Portada Ionic + Yeoman = generador m-ionic

Ionic Framework : Mi primera app con generator-m-ionic

En el post :  Ionic Framework I : ¿Qué es? y ¿Cómo lo instalo?   vimos cómo instalar el entorno necesario para trabajar con ionic y el generador de yeoman : m-ionic .

Recordemos que Yeoman es una herramienta que nos sirve para agiliar el desarrollo de la estructura de  nuestros proyectos web y al ser Ionic una tecnología para desarrollo de aplicaciones híbridas, yeoman también nos es de gran utilidad.

Yeoman trabaja con un conjunto de paquetes a los que llama generadores, los cuales estarán configurados para que podamos trabajar con una gran gama de tecnología, generando un ecosistema muy completo de desarrollo, prácticamente hay un generador para casi cualquier tecnología web que uno se pueda imaginar

A continuación veremos como hacer nuestra primera app .

Corriendo el generador

  1. Para correr el generador utilizaremos nuevamente la consola con el siguiente comando :
    yo m-ionic
  2. Una vez ejecutado dicho comando, el generador nos pedirá que ingresemos el nombre que le daremos a nuestra aplicación:
         _-----_     ?──────────────────────────?
        |       |    │  Welcome to the polished │
        |--(o)--|    │    Generator-M-Ionic!    │
       `---------´   │          v.1.9.2         │
        ( _´U`_ )    ?──────────────────────────?
        /___A___\   /
         |  ~  |
       __'.___.'__
     ´   `  |° ´ Y `
    
    ?
    Enter a name for your project
    This name will be displayed below the app icon.
    
    
  3. Ingresaremos  :   Soy Geek  Kanban
  4. Lo siguiente que nos pedirá será que ingresemos un identificador para la app ( sugiriendo que se utilice la notación de dominio inverso).
    ?
    Enter an app identifier for your project
    e.g. com.company.project
  5. Ingresaremos : org.soygeek.project
  6. Ahora nos pedirá que seleccionemos el tipo de estilos para Ionic podemos escoger entre CSS y SASS: Escogeremos SASS para este ejemplo.
    ?
    Include Ionic styles as CSS or Sass
    
      Ionic CSS (faster, for starters)
    > Ionic Sass (more flexible, for pros)
  7. Adicionalmente nos pedirá que seleccionemos los paquetes de bower adicionales a angular y a cordova  que utilizaremos para nuestro proyecto: dejaremos los que están seleccionados por defecto
    Choose additional bower packages
    Besides angular, ionic, angular-ui-router and ngCordova.
     (Press  to select)
     ---- i18n/l10n ----
    >(*) angular-dynamic-locale
     (*) angular-translate
     (*) angular-translate-loader-static-files
     ---- persistence ----
     (*) localforage
  8. Seleccionaremos la(s) plataforma(s) en para las cuales queremos que se compile nuestra aplicación: en este caso utilizaremos sólo Android, por lo que deseleccionaremos iOS
    Select Cordova platforms
    Only works if you have the platforms correctly set up.
    
    >( ) iOS
     (*) Android
     ( ) Windows

    Recordemos que esta funcionalidad sólo funcionará si tenemos correctamente instalada la plataforma que seleccionemos

  9. Ahora seleccionaremos los plugins de Cordova que deseemos utilizar: dejaremos está configuración por defecto .
    ?
    Select Cordova plugins
    Install more later at any time.
    (Press to select)
    ------
    >(*) Device - cordova-plugin-device
    ( ) Dialogs - cordova-plugin-dialogs
    ( ) In App Browser - cordova-plugin-inappbrowser
    ( ) Keyboard - ionic-plugin-keyboard
    ( ) Network - cordova-plugin-network-information
    ( ) Splashscreen - cordova-plugin-splashscreen
    ( ) Statusbar - cordova-plugin-statusbar
  10. Y finalmente seleccionaremos el tipo de template con el que iniciaremos la navegación de la aplicación. Seleccionaremos slidemenu
    Choose a starter template
    (Use arrow keys)
    > sidemenu
    tabs
    blank

Esta es la configuración básica para que se comience a generar el proyecto ionic. Posteriormente te preguntará que si deseas integrarlo a alguno de los ecosistemas siguientes.

Integrate into the following ecosystems
Can also be done later, check out the README for further instructions.
(Press to select)
>( ) Ionic Platform (beta)
( ) Appmobi (have your APP_NAME, PROJECT_ID & CONFIG_URL ready)
( ) ApiOmat (beta)

Simplemente presionaremos ENTER para saltar esta configuración y dejaremos que el generador termine de agregar los archivos del proyecto y descargue las dependencias desde repositorios de github.

Una vez que se hayan instalador todas las dependencias del proyecto nos mostrará el siguiente mensaje :

                │  All done! To get going  │
    _-----_     │           run:           │
   |       |    │        gulp watch        │
   |--(o)--|    │        More info:        │
  `---------´   │   http://bit.ly/1DXy7MJ  │
   ( _´U`_ )    ?──────────────────────────?
   /___A___\   /
    |  ~  |
  __'.___.'__
´   `  |° ´ Y `

Introduciremos el comando

 gulp watch

Para probar que nuestra app se generó correctamente.

Continuaremos en el siguiente post con la funcionalidad de nuestra app.

Comments

comments

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *