Creación de mi primera app con Ionic

Introducción

Vamos a ver los pasos necesarios para crear unas aplicaciones de ejemplo con Ionic en base a las plantillas que se ofrece.

1) Creamos una carpeta 'apps-ionic' y nos movemos a ella.

2) Lanzamos el siguiente comando para crear un app llamado ejemplo1:

   ionic start -a "ejemplo1" -i es.ine.sgtic.ejemplo1 ejemplo1 blank

    -a ejemplo1              -> Nombre de la aplicación
    -i es.ine.sgtic.ejemplo1 -> Nombre del dominio/id de la aplicación
    ejemplo1                 -> Nombre del directorio donde generará el proyecto
    blank                    -> Nombre de la plantilla que hemos usado

   Nota. En mi caso durante la creación del proyecto base ha saltado el error:

     Error Initializing app: Error: connect ETIMEDOUT 192.30.252.131:443

Googleando el problema he visto que hay que definir una variable PROXY a nivel de sistema dado que Ionic no usa la config del proxy definida en NPM. Por tanto creamos una variable de entorno llamada PROXY y le metemos el valor http://usuario:password@xxx.xxx.xxx.xxx:pppp

Tras el ajuste he tenido que reabrir la ventana de comandos para que pille el cambio y ejecute el comando con normalidad. La traza obtenida ha sido:

C:\Users\IEUser\Desktop\apps-ionic>ionic start -a "ejemplo1" -i es.ine.sgtic.ejemplo1 ejemplo1 blank
Creating Ionic app in folder C:\Users\IEUser\Desktop\apps-ionic\ejemplo1 based on blank project
    Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
    [=============================]  100%  0.0s
    Downloading: https://github.com/driftyco/ionic-starter-blank/archive/master.zip
    [=============================]  100%  0.0s
    Updated the hooks directory to have execute permissions
    Update Config.xml
    Initializing cordova project

    Your Ionic project is ready to go! Some quick tips:

     * cd into your project: $ cd ejemplo1

     * Setup this project to use Sass: ionic setup sass

     * Develop in the browser with live reload: ionic serve

     * Add a platform (ios or Android): ionic platform add ios [android]
       Note: iOS development requires OS X currently
       See the Android Platform Guide for full Android installation instructions:
       https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

     * Build your app: ionic build <PLATFORM>

     * Simulate your app: ionic emulate <PLATFORM>

     * Run your app on a device: ionic run <PLATFORM>

     * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

    For more help use ionic --help or ionic docs

    Visit the Ionic docs: http://ionicframework.com/docs


    New! Add push notifications to your Ionic app with Ionic Push (alpha)!
    https://apps.ionic.io/signup
    +---------------------------------------------------------+
    + New Ionic Updates for March 2016
    +
    + The View App just landed. Preview your apps on any device
    + http://view.ionic.io
    +
    + Invite anyone to preview and test your app
    + ionic share EMAIL
    +
    + Generate splash screens and icons with ionic resource
    + http://ionicframework.com/blog/automating-icons-and-splash-screens/
    +
    +---------------------------------------------------------+

3) Ya tendríamos montado el proyecto con su esqueleto, para ver funcionando el app deberemos seguir los pasos que nos indica la propia traza de Ionic:

   cd ejemplo1         --> Nos movemos a la carpeta de la app
   ionic setup sass  --> Ajustamos hojas de estilo
   ionic serve           --> Arranca un server http por el puerto 8100 para pruebas

4) Ahora podemos repetir los pasos anteriores con otras plantillas de ejemplo, hay algunas mas. Para sacar la lista completa de plantillas de ionic deberemos ejecutar el comando

   ionic start --list
 
Nota. No debemos olvidar colocarnos en el directorio padre 'apps-ionic' para tener los distintos ejemplos
organizados en una misma carpeta:

   ionic start -a "ejemplo2" -i es.ine.sgtic.ejemplo2 ejemplo2 tabs
   ionic start -a "ejemplo3" -i es.ine.sgtic.ejemplo3 ejemplo3 sidemenu
   ionic start -a "ejemplo4" -i es.ine.sgtic.ejemplo4 ejemplo4 complex-list
   ionic start -a "ejemplo5" -i es.ine.sgtic.ejemplo5 ejemplo5 maps
   ionic start -a "ejemplo6" -i es.ine.sgtic.ejemplo6 ejemplo6 salesforce

Nota. En el ejemplo4 (complex-list) se ve lo mismo que en el ejemplo1 ¿?

En la siguiente entrada nos dedicaremos a 'destripar' el contenido de la estructura de carpetas generada para cada proyecto, veremos cómo visualizar la aplicación directamente en el emulador de un dispositivo con Android y empaquetaremos el app para instalarlo en un app real.

Un saludo