IONIC FRAMEWORK

TUTORIAL: #2

Compartir Contenido

SocialSharing

Instalación y Configuración

    sudo npm install -g ionic cordova

Obviaremos la explicación en la instalación de Ionic, ya que en el tutorial anterior se explico. Vamos al grano

    ionic start tuto blank
    cd sms_example

Instalación de ionic y cordova

Creamos el proyecto ionic y nos dirigimos dentro de la carpeta

    ionic platform add android

Agregamos la plataforma en que se vera la App.

    // Plugin para compartir contenido desde el móvil
    cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

Agregamos el Plugin para compartir contenido.

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>

Instalamos ngCordova el cual permite enlazar el proyecto Apache Cordova e Ionic usando angularJS. 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

  <body ng-app="starter">
    <ion-pane ng-controller="ShareCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ejemplo SMS</h1>
      </ion-header-bar>
      <ion-content>
       <div class="card">
         <div class="item item-divider"><b>Compartir App</b></div>
         <ul class="list">
           <li class="item" id="displayLabel">
             <div class="item item-text-wrap">
               <button class="button button-block button-royal item-icon-left" 
                 ng-click="whatsappShare()"><i class="icon ion-social-whatsapp"></i>
                 WhatsApp</button>
           </li>
           <li class="item" id="displayLabel">
             <div class="item item-text-wrap">
               <button class="button button-block button-royal item-icon-left" 
                 ng-click="twitterShare()"><i class="icon ion-social-twitter"></i>
                 Twitter</button>
           </li>
           <li class="item" id="displayLabel">
             <div class="item item-text-wrap">
               <button class="button button-block button-royal item-icon-left" 
                 ng-click="sms()"><i class="icon ion-android-share-alt"></i>
                 SMS</button>
           </li>
         </ul>
       </div>
     </div>
   </ion-content>
  </ion-pane>
</body>

El Controller

En el controller ShareCtrl debemos pasarle el parametro  $cordovaSocialSharing quien es el encargado de ejecutar el plugin para. compartir contenido

  app.controller('ShareCtrl',function($scope, $cordovaSocialSharing){
   
  });
app.controller('ShareCtrl',function($scope,$cordovaSocialShare){
    
    // message: El mensaje a enviar
    // number: el numero de telefono a enviar o los numeros de telefono a enviar SMS
    // Para enviar a varios números, solo debemos separarlos co una (,)
    // Ejemplo 04124445566,04165554400

    $scope.sms = function(){
      $cordovaSocialSharing.shareViaSMS(message, number).then(function(result) {
        // enviado!
      }, function(err) {
        // Ocurrio un error. Para mostrar el error
        alert(err)
      });
    }
});

Asi quedaria nuestro controller ya con todas las funciones hechas

app.controller('ShareCtrl',function($scope,$cordovaSocialSharing){
    // message: El mensaje a enviar
    // number: el numero de telefono a enviar o los numeros de telefono a enviar SMS
    // Para enviar a varios números, solo debemos separarlos co una (,)
    // Ejemplo 04124445566,04165554400
    $scope.sms = function(){
      $cordovaSocialSharing.shareViaSMS(message, number).then(function(result) {
        // enviado!
      }, function(err) {
        // Ocurrio un error. Para mostrar el error
        alert(err)    
      });
    }
    
    // message: El mensaje a enviar
    // image: la ruta de la imagen a compartir
    // link: algun link a compartir    
    $scope.whatsappShare = function(){
      $cordovaSocialSharing.shareViaWhatsApp(message, image, link).then(function(result) {
        // enviado!
      }, function(err) {
        // Ocurrio un error. Para mostrar el error
        alert(err)
      });
    }
 
    // message: El mensaje a enviar
    // image: la ruta de la imagen a compartir
    // link: algun link a compartir  
    $scope.twitterShare = function(){
      $cordovaSocialSharing.shareViaTwitter(message, image, link).then(function(result) {
        // enviado!
      }, function(err) {
        // Ocurrio un error. Para mostrar el error
        alert(err)
      });
    }
});

Corriendo Apps

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

    ionic build android

VOALA!!!

MI APLICACION ANDANDO

Ionic Tutorial #2

By Hector Rodriguez Velasquez

Made with Slides.com

Ionic Tutorial #2

Compartir Contenido - SocialSharing

  • 873

More from Hector Rodriguez Velasquez