Primeros pasos con el marco iónico

Instalación o Configuración

1. Instale Ionic Framework y Cordova (ya que las aplicaciones de Ionic se basan en Cordova) usando npm (el administrador de paquetes de nodos):

Asegúrese de tener una versión actualizada de Node.js instalada en su sistema. Si no tiene instalado Node.js, puede instalarlo desde aquí.

Además, para los usuarios de Mac, tener la última versión de Xcode instalada en su sistema les brinda herramientas de línea de comandos y el simulador iOs, [descargue aquí] (https://itunes.apple.com/it/app/xcode/id497799835? mt=12).

Abra una ventana de terminal (Mac) o una ventana de comandos (Windows) e instale Cordova e Ionic:

$ npm install -g cordova ionic

En una Mac, es posible que deba usar sudo según la configuración de su sistema:

$ sudo npm install -g cordova ionic

Si ya tiene Cordova e Ionic instalados en su computadora, asegúrese de actualizar a la última versión:

$ npm update -g cordova ionic

o

$ sudo npm update -g cordova ionic

Siga Android y [iOS](http://cordova.apache.org/docs/en /5.1.1/guide/platforms/ios/index.html) guías de plataforma para instalar las dependencias de plataforma requeridas.

Nota: el desarrollo de iOS requiere Mac OS X. El simulador de iOS a través de Ionic CLI requiere el paquete ios-sim npm, que se puede instalar con el comando:

$ sudo npm -g install ios-sim

2. Iniciar un nuevo proyecto Ionic:

Cree un proyecto de Ionic usando una de las plantillas de aplicaciones listas para usar, o una en blanco para comenzar de nuevo.

$ ionic start myApp blank

o

$ ionic start myApp tabs

o

$ ionic start myApp sidemenu

3. Pruebe la aplicación Ionic:

Para probar su aplicación Ionic en un navegador de escritorio en plataformas iOS y Android:

$ ionic serve --lab

Mientras que ionic serve --lab es excelente para probar la interfaz de usuario de la aplicación en múltiples plataformas, podría generar algunos problemas para la Consola de Javascript o la Inspección de elementos, en ese caso, lo que prefiera:

$ ionic serve

Para probar su aplicación Ionic en un emulador:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Sustituya ios con android para la prueba del emulador de Android:

$ ionic build android
$ ionic emulate android

Para probar su aplicación Ionic en un dispositivo Android conectado a través de USB:

$ ionic run android

Para probar su aplicación Ionic en un dispositivo iOS conectado a través de USB:

$ ionic run ios --device

Plataforma iónica (nube iónica) para proyectos iónicos Yo (Yeoman)

Plataforma iónica:


Cree, impulse, implemente y escale sus aplicaciones Ionic de la forma más sencilla.



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. Este documento proporciona los pasos para usar Ionic Platform en los proyectos Ionic creados con Yeoman.

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

Público objetivo:
El público objetivo de este documento son los desarrolladores de aplicaciones web/móviles, con experiencia de nivel principiante y experto, que están familiarizados con los requisitos previos a continuación.

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

  • AngularJs: https://docs.angularjs.org/guide
  • Marco iónico: http://ionicframework.com/docs/guide
  • Yeoman: http://yeoman.io/codelab/index.html
  • Generador iónico: https://github.com/diegonetto/generator-ionic
  • Plataforma iónica: https://ionic.io/platform

Generador de marco iónico

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


Node.js es un tiempo de ejecución de JavaScript basado en el motor de JavaScript V8 de Chrome. npm es el administrador 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 poner en marcha nuevos proyectos, prescribiendo 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 incluye lo siguiente en las dependencias

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

En Gruntfile.js cambie la carpeta 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

cliente-web-plataforma-ionica

Un cliente web que proporciona interacciones con la plataforma Ionic.


Necesitamos un código para permitir que su aplicación se comunique con la plataforma Ionic. 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 ‘ionicSettings’ en las tareas init y compress después de copy. En index.html, mueva la siguiente etiqueta