ionic-framework
Nube Jónica para Proyectos Iónicos Yeoman

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript
Buscar..


Plataforma Iónica (Ionic Cloud) para Proyectos Iónicos de Yo (Yeoman)

Plataforma jónica :

Construye, empuja, implementa y escala tus aplicaciones iónicas de la manera más fácil.

Descripción del Título:

Ionic Platform es una plataforma en la nube para administrar y escalar aplicaciones móviles multiplataforma. Los servicios integrados le permiten a usted y a su equipo crear, implementar y hacer crecer sus aplicaciones de manera eficiente.

Objetivo del documento:
Ionic Platform funciona bien con los proyectos estándar de Ionic. Pero los proyectos que siguen cualquier estructura de directorio no estándar pueden enfrentar algunos obstáculos. Estos documentos proporcionan los pasos para utilizar la Plataforma iónica en los proyectos iónicos creados con Yeoman.

Alcance del documento:
Este documento cubre los pasos básicos para crear un proyecto Ionic utilizando Yeoman e integrarlo con Ionic Platform utilizando el Cliente Web de Ionic Platform. Este documento cubre los pasos básicos para utilizar Ionic Deploy, Ionic Analytics y Ionic Push.

Público objetivo:
Los destinatarios de este documento son los desarrolladores de aplicaciones web / móviles, con experiencia tanto de nivel principiante como experto, que están familiarizados con los requisitos previos que se detallan a continuación.

Requisitos previos:
Debe estar familiarizado con los siguientes marcos / herramientas antes de intentar este documento.

Generador Ionic Framework

Un generador para el Ionic Framework de Yeoman, la herramienta de andamiaje de la web para aplicaciones web modernas.

Node.js es un tiempo de ejecución de JavaScript creado en el motor de JavaScript V8 de Chrome. npm es el gestor de paquetes para JavaScript. Descargue e instale Node (y npm) desde http://nodejs.org 

$ npm install npm –g
$ npm install -g yo

Yeoman lo ayuda a impulsar nuevos proyectos, prescribiendo las mejores prácticas y herramientas para ayudarlo a mantenerse productivo. 

$ yo ionic [app-name]

En package.json incluye lo siguiente en devDependencies 

"grunt-string-replace": "^1.2.1"

En bower.json incluyen lo siguiente en dependencias. 

"ionic-platform-web-client": "^0.7.1"

En Gruntfile.js, cambie la carpeta de scripts a 'js' . Cambie en index.html también si es necesario. 

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

Entonces corre 

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

plataforma-iónica-cliente-web

Un cliente web que proporciona interacciones con la plataforma Ionic.

Necesitamos algún código para permitir que su aplicación hable con la plataforma iónica. Necesitamos agregar el cliente web de la plataforma Ionic para que la aplicación Ionic interactúe con los complementos y la plataforma Ionic.io. 

$ ionic io init

En su app.js agregue la dependencia del módulo 'ionic.service.core' . En Gruntfile.js agregue la tarea grunt 'ionicSettings' como se indica a continuación. 

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Agregue el 'ionicSettings' en init y comprima las tareas después de la copia . En index.html, mueva la siguiente etiqueta después de todas las declaraciones de etiquetas. 

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

Entonces corre 

$ Grunt serve

Despliegue jónico

Inserte actualizaciones en tiempo real de sus aplicaciones de producción y administre el historial de versiones.

Ionic Deploy le permite actualizar su aplicación a pedido, para cualquier cambio que no requiera modificaciones binarias, ahorrando días o incluso semanas de tiempo de espera. Siga el procedimiento a continuación para configurar Ionic Deploy para su aplicación.

En Gruntfile.js agregue la tarea grunt 'desplegar' como se indica a continuación. 

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

entonces corre 

$ ionic plugin add ionic-plugin-deploy

Código de implementación iónica: 

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

Implementando actualizaciones:

Enviar nuevo código para su aplicación.

Crea un apk e instala tu aplicación. Realice algunos cambios en su código e implemente los cambios utilizando ' grunt deploy '. Luego actualízalo desde tu aplicación.

También puede implementar desde el tablero de instrumentos apps.ionic.io. Puede implementar la aplicación sin el parámetro de despliegue. Luego, en el tablero de instrumentos, puede agregar los metadatos y los detalles de la versión y desplegar la aplicación desde allí. 

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

Analítica Iónica

Ver la transmisión en vivo de eventos o el número de eventos / usuarios en bruto / único a lo largo del tiempo.

¿Cuántos usuarios hay en tu aplicación en este momento? ¿Cuántos de ellos usarán tu aplicación mañana o la próxima semana? Sin información, no tiene forma de saber si su aplicación se está utilizando de la manera que usted espera. Siga el procedimiento a continuación para configurar Ionic Analytics para su aplicación.

En su app.js, agregue la dependencia del módulo ' ionic.service.analytics ' después de ionic.service.core Ejecute el método de registro analítico en la función de ejecución de nuestro módulo. 

$ionicAnalytics.register();

En Ionic Analytics, cada acción rastreada que un usuario realiza en su aplicación está representada por un objeto de evento. Un evento es una acción única realizada en un punto específico en el tiempo. Para rastrear sus propios eventos, llame a $ionicAnalytics.track(eventType, eventData) siempre que ocurra una acción. 

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

La directiva ion-track-tap envía un evento cuando se toca su elemento host. La directiva de datos de seguimiento de iones asociada adjunta datos de eventos. 

<button ion-track-tap="eventType" ion-track-data="expression"></button>

En el panel de control de apps.ionic.io puede ver los siguientes datos de análisis,

Eventos: vea la cantidad bruta de eventos a lo largo del tiempo, o la cantidad de usuarios únicos que completaron un evento. Un evento puede ser cualquier cosa, desde un usuario que carga la aplicación, hasta confirmar una compra.

Embudos: Un embudo es una secuencia de acciones que espera que los usuarios realicen en su aplicación, lo que lleva a un objetivo definido. El uso cuidadoso de los embudos le ayudará a mejorar las tasas de conversión.

Segmentos: vea eventos a lo largo del tiempo, agrupados por una propiedad específica. O bien, calcule el porcentaje de eventos que coinciden con una propiedad determinada. Los segmentos le ayudan a comprender su base de usuarios y ver cómo cambian las propiedades con el tiempo.

Retención: realice un seguimiento del tiempo que los usuarios están activos en su aplicación antes de que dejen de usarla. O bien, identifique cuánto tiempo tardan los usuarios en alcanzar un objetivo definido, como una venta completa.

Pulse: una transmisión en vivo de eventos que llegan de sus usuarios.

Empuje ionico

Envíe notificaciones push dirigidas y automatizadas a sus usuarios.

Ionic Push le permite crear notificaciones push dirigidas a través de un panel simple que se enviará automáticamente cuando los usuarios cumplan con criterios específicos, y ofrece una API simple para enviar notificaciones push desde sus propios servidores.

Perfiles Push de Android:

Las notificaciones push de Android utilizan el servicio Google Cloud Messaging (GCM). Abra la Consola de desarrolladores de Google y cree un proyecto. Anote su número de proyecto . Este será el ID de remitente de GCM o el Número de proyecto de GCM .

En la sección Administrador de API , habilite la API de mensajería en la nube de Google . Luego navegue a la sección Credenciales y seleccione Crear credenciales, luego elija Clave de API, luego Clave de servidor. Asigne un nombre a su clave API y deje en blanco el campo Aceptar solicitudes de ... y haga clic en Crear . Guarde su clave API !

Autenticación:

Vaya al panel de control de su aplicación en la plataforma iónica y navegue a Configuración -> Certificados . Si aún no lo ha hecho, cree un nuevo perfil de seguridad, luego presione editar . Anote la etiqueta de perfil .

Ahora, haga clic en la pestaña Android y busque la sección marcada Google Cloud Messaging , ingrese la Clave API que generó en la Consola de desarrollador de Google, luego haga clic en Guardar . Vaya a Configuración -> Claves API . Bajo API Tokens , cree un nuevo token y cópielo. Esto será su token de API . 

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

Nota: phonegap-plugin-push requiere el repositorio de soporte de Android versión 32+

En su app.js agregue la dependencia del módulo ' ionic.service.push ' después de ionic.service.core

Código de empuje iónico:

Inicialice el servicio y registre su dispositivo en la función de ejecución de su módulo. Necesitará el token del dispositivo que está registrado por el usuario para enviar una notificación al usuario. 

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

entonces corre 

$ grunt build:android --debug

Ionic Push le permite crear notificaciones push dirigidas a través del panel de control. También puede enviar notificaciones desde el servidor en el siguiente formato. 

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

Nota: los pasos para configurar Ionic Push para iOS son los mismos, excepto para crear los perfiles Push. Para crear perfiles push de iOS, consulte http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles

Aplicación de ejemplo

Descarga la aplicación de muestra aquí .

Una aplicación de ejemplo se adjunta aquí para referencia. 

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

Nota: Este no es un proyecto independiente. El código dado es solo para comparación con un proyecto creado e implementado utilizando los procedimientos descritos anteriormente en este documento, en caso de problemas o errores.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow