Ionic - Primeros pasos

 

 

 

 

0. Qué es Ionic.

Ionic es un SDK open source para el desarrollo de aplicaciones móviles creado por Max Lynch, su liberación oficial fue en 2013. En su liberación original estaba construido sobre AngularJS y Apache Cordova. Actualmente se reconstruyó como un set de componentes web permitiendo al usuario elegir el framework de interfaz usuario que desee utilizar así como Angular, React o Vue.js. 

Lo que resulta cómodo de trabajar utilizando Ionic es que su motor es responsive, por lo que en desarrollo solamente nos preocuparemos por generar los estilos y lógica que deseemos. El motor de Ionic también se encarga de las validaciones y flujos de navegación.

 Para la navegación se utiliza el sistema de rutas de Angular, podemos pensarlo como que Ionic es quien da los controles y la forma de crear nuestras aplicaciones tomando el código de angular y desplegándola en un dispositivo móvil.

Algunas de las cosas que permite Ionic la podremos encontrar en componentes, en la documentación oficial, la cual contendrá cada elemento esencial de las aplicaciones nativas.

 

 

 Fig. 1 Pagina de componentes de Ionic en la cual existen ejemplo de utilización.

Esto nos permite no perder mucho tiempo creando alertas, creando tarjetas, creando scroll, creando lo que es el refresh todo eso ya existe en Ionic y simplemente lo podemos consumir utilizando los ejemplos de la documentación oficial.

Por ejemplo, si queremos implementar un action-sheet simplemente lo implementamos utilizando el código de ejemplo que viene en la documentación oficial.

 Fig. 2 action-sheet página de componentes de Ionic.

 

Ionic se encargará de aplicar el estilo correspondiente dependiendo de la plataforma donde la estamos corriendo. Implementarlo es sumamente sencillo y agradable.

Fig. 3 Framworks de Javascript soportados con Ionic. Sitio oficial de Ionic.

1. Generando nuestra primera app con Ionic

Requerimientos previos: 

• Chrome
• Visual Studio Code
• Node
• AngularCli 
• Ionic
  

Opcionales:

• PostMan
• Android Studio
• Git

Utilizaremos Chrome como emulador ya que permite múltiples vistas rápidas y sencillas de dispositivos móviles, y Visual Studio Code como editor de código.

Una vez que tengamos Visual Studio Code y Chrome instalaremos Node para utilizar Javascript el cual correrá del lado del servidor puesto que Ionic utiliza Javascript del lado del servidor. Para comprobar que tenemos instalado Node correctamente vamos a la terminal y ejecutamos:

 
node –version

Con que tengamos una respuesta arriba de la versión 8 con eso tenemos, continuamos con las instalaciones en este caso de XCode - Sólo para usuarios de OSX.

Instalamos AngularCli con el siguiente comando:

npm install -g @angular/cli

*Recordemos abrir la terminal como root o administrador para ejecutar comandos con -g

Finalmente instalaremos Ionic para lo cual utilizaremos el siguiente comando:

npm install -g @ionic/cli

1.1 Creación de la app.

En este caso crearemos una app con tabs sencillos para verla de forma sencilla. Con el siguiente comando creamos la carpeta que contendrá la aplicación:

Ionic start myapp tabs

 

Fig. 4 Creación de la aplicación con ionic.

Seleccionamos el entorno, en este caso angular.

Fig. 5 Selección de Angular, React o Vue.

Empezara a instalar los requisitos necesarios para la aplicación.

Fig. 6 Instalación de las dependencias requeridas para la creación del proyecto de pruebas.

Al terminar estará una carpeta así, con el nombre que le pusiste a la app, en este caso utilizamos el nombre myApp.
   

Fig. 7 Carpeta creada.

Fig. 8 Corremos la aplicación navegando a la carpeta dónde se encuentra y utilizando el comando Ionic Serve.

Entonces ingresas a la carpeta desde el cmd y corres la app con el siguiente comando:

Ionic serve

Fig. 9 Aplicación corriendo en Chrome.

Te tendrá que abrir el navegador de Chrome con la app corriendo en modo debug o depuración, asi es como se vería tu aplicación.

Fig. 10 Vista de código en VSC.

Entonces podrás arrastrar la carpeta hasta a visual studio code y se abrirá el código.
Para empezar a modificar el código iremos a visual studio code y buscaremos en src y dentro de app tendremos las carpetas tab que contendrán las pestañas de la app.

Fig. 11 Carpetas del código.

Podemos modificar el tab1 para empezar nuestra aplicación .

Fig. 12 Código de inicio de tab1.

Modificamos un poco el código para crear un ejemplo rápido:

 

Fig. 13 ejemplo de login.

Fig. 14 Código de login.

 

 Puedes observar mayor detalle de cómo utilizamos los componentes dentro de los tag de Ionic en forma de html en el transcrito del código:

<pre class="css"><code>
<ion-header translucent="" true="">
  <ion-toolbar>
    <ion-title>
      <img alt="" src="https://ingenieriadesoftware.com.mx/Resources/Images/LogoEuclides.png" style="height: 30px;" />
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" fullscreen="" true="">
  <ion-content padding="">
    <form form="" login="" ngsubmit="">
      <ion-grid>
        <ion-row color="primary" justify-content-center="">
          <ion-col align-self-center="" size-lg="5" size-md="6" size-xs="12">
            <div text-center="">
              <h3>Ingresar</h3>
            </div>
            <div padding="">
              <ion-item>
                <ion-input name="email" ngmodel="" placeholder="ejemplo@email.com" required="" type="email"></ion-input>
              </ion-item>
              <ion-item>
                <ion-input name="password" ngmodel="" placeholder="Contraseña" required="" type="password"></ion-input>
              </ion-item>
            </div>
            <div padding="">
              <ion-button disabled="" expand="block" form.invalid="" size="large" type="submit">Login</ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </ion-content>
</ion-content>
</code></pre>