IONIC FRAMEWORK

TUTORIALES

Como Enviar SMS desde el Movil

Instalación y Configuración

    sudo npm install -g ionic cordova

Paso 1. Instalar la paquetería de Ionic Framework y Cordova Project, este último es

    ionic start sms_example blank
    cd sms_example

Paso 2. Creamos el proyecto que se llamará sms_example y entramos en la carpeta del proyecto

Mas de la Configuración

    // Plugin para enviar mensaje desde nuestro móvil
    cordova plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
    
    // Plugin de las listas blancas
    cordova plugin add cordova-plugin-whitelist

Paso 3. Añadimos los plugins que conectarán con el móvil.

    // Plataforma Android
    ionic platform add android

    // Plataforma IOS
    ionic platform add ios

Paso 4. Agregamos la plataforma en cual se desarrollará nuestra App. Aquí escogemos entre IOS, Android, Windows Phone, etc...

Ajustando el Entorno

    <!-- ngCordova debe colocarse SIEMPRE por encima de cordova.js) -->
    <script src="lib/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

Paso 5. Utilizaremos la extensión ngCordova el cual es un plugins que permite enlazar el proyecto Apache Cordova e Ionic. Para saber mas visita su portal http://ngcordova.com/

    var app = angular.module('starter', ['ionic','ngCordova'])

Agregamos en el archivo js/app.js las dependencias de ngCordova

El Index.html

Paso 6. El Index, destacamos el controller, el cual nos diar en donde escribimos las acciones que hara el formulario

  <body ng-app="starter">
    <ion-pane ng-controller="smsController">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ejemplo SMS</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <label class="item item-input">
            <span class="input-label" >Número</span>
            <input type="number" ng-model="sms.number">
          </label>
          <label class="item item-input">
            <span class="input-label">Mensaje</span>
            <input type="text" ng-model="sms.message">
          </label>
          <button class="button button-full button-positive" 
            ng-click="sendSms()">Enviar</button>
        </ion-list>
      </ion-content>
    </ion-pane>
  </body>

Fijense que nuestros modelos se llaman sms.number y sms.message, los cuales los utilizare en el Controller, igualmente llamamos la function sendSms() el cual explicaremos mas adelante

El Controller

Paso 7. Es hora de trabajar, debemos generar las instrucciones para que la Apps ejecute el envio de texto, lo primero que haremos es llamar mi controlador y pasarle el parametro $cordovaSms este es quien trabaja con la mensajeria de texto

  app.controller('smsController',function($scope,$cordovaSms){
    $scope.sms={};
  });

app.controller('smsController',function($scope,$cordovaSms){
  $scope.sms={};
    var options = {
       replaceLineBreaks: false,
       android: { intent: 'INTENT' }
    };
});

replaceLineBreaks es un parámetro con valor booleano, True creara una nueva linea.

El Controller

Paso 8. Asi quedaria el Controlador, agregando la función sendSms()

app.controller('smsController',function($scope,$cordovaSms){
  $scope.sms={};
  var options = {
    replaceLineBreaks: false, 
    android: { intent: 'INTENT' }
  }

  $scope.sendSms=function(){
    console.log($scope.sms.number);
    console.log($scope.sms.message);    
    $cordovaSms.send($scope.sms.number, $scope.sms.message, options)
    .then(function() {
      console.log('Success')}, 
    function(error) {
      console.log(error); 
    });
  }
};

Corriendo Apps

Paso 9. Nos toca probar el ejemplo, lo haremos con ls siguiente instrucción

    ionic build android

VOALA!!!

MI APLICACION ANDANDO