IONIC un framework para app moviles


Ionic es un framework para el desarrollo de aplicaciones nativas de Android e IOS mediante Javascript, HTML y CSS (como si estuvieramos haciendo una webapp). La herramienta está construida sobre AngularJS es muy potente y nos permite hacer una vista previa del la aplicación en el navegador, ejecutarla en modo debug en el móvil, compilar el código fuente para generar un instalador de la app entre otras funcionalidades.

He encontrado un cheatsheet creado por @schlimmson que puede ser de utilidad para comprender mejor la herramienta. Además de las guías que ofrece el framewrok en su web.

Guía rápida Linux

Instala IONIC

  • Para ello es necesario tener instalado el gestor de paquetes multiplataforma npm. Instalamos las dependencias "sudo npm install -g cordova" y finalmente IONIC "sudo npm install -g ionic", la opción -g permite hacer una instalación global.

Crea un nuevo proyecto

  • Ubicados en el directorio de trabajo en el que queramos crear el nuevo proyecto "ionic start [--v2] [nombre-proyecto]" opcionalmente podemos añadir "--v2" para usar la versión 2 del framework. El proceso crea un nuevo directorio con una plantilla por defecto.

Visualízalo

  • En la raíz del proyecto "ionic serve". IONIC servirá tu aplicación en versión web que puedes visualizar en el navegador en la url "[tu-IP]:8100". Es importante recalcar que algunas funcionalidades no estarán disponibles en esta versión web de tu app, por lo que recomiendo usarla para debugear solamente Front-end (la interfaz de tu app).

Edita el código

  • Básicamente los ficheros de la plantilla que se han creado: index.html y style.css sirven para el Front-end es decir la interfaz de la apliación y los .js nos darán la funcionalidad (Back-end). Se puede desarrollar de forma similar a una página web.
  • Si has creado un proyecto sin usar "--v2" osea usando la primera versión del framework será algo más sencillo. Tienes que acceder al directorio www ahí encontrarás la jerarquía de código necesario para desarrollar la aplicación móvil.
  • Si usas la versión 2 de IONIC, entonces tienes que ir a /src/pages para editar la aplicación. La forma es un poco menos intuitiva que en a versión 1 y por ello recomiendo profundizar algo más en la documentación de IONIC para entender mejor su funcionamiento.

Agrega algunos plugins

  • Sirven para obtener acceso a algunas de las funcionalidades nativas de los dispositivos. Se pueden agregar haciendo "npm install @ionic-native/camera --save" con la opción "--save" para que sea incluido en las dependencias del proyecto.

Añade una nueva plataforma

  • Instalar las dependencias para Android o para IOS.

  • Actualizar el PATH del sistema. Edita ~/.profile y añade las rutas necesarias. Te debe quedar algo similar a esto:

  • # ~/.profile: executed by the command interpreter for login shells.
    # This file is not read by bash(1), if ~/.bash_profile or ~/.bash_login
    # exists.
    # see /usr/share/doc/bash/examples/startup-files for examples.
    # the files are located in the bash-doc package.
     
    # the default umask is set in /etc/profile; for setting the umask
    # for ssh logins, install and configure the libpam-umask package.
    #umask 022
     
    # if running bash
    if [ -n
        "$BASH_VERSION" ] ; then
        # include .bashrc if it exists
        if [ -f "$HOME/.bashrc" ] ; then
        . "$HOME/.bashrc"
        fi
    fi
     
    # set PATH so it includes user's private bin directories
    PATH = "$HOME/bin:$HOME/.local/bin:$PATH"
    ANDROID_HOME = "${HOME}/Android/Sdk"
    JAVA_HOME = "/usr/lib/jvm/java-1.8.0-openjdk-amd64"
    JRE_HOME = "${JAVA_HOME}/jre"
    PATH = "${PATH}:${HOME}/Android/Sdk/tools:${HOME}/Android/Sdk/platform-tools:${JAVA_HOME}/bin:${JRE_HOME}/bin"

  • Agregar a IONIC: "ionic platform add [plataforma]" donde [plataforma] es android o ios

Debugea en el dispositivo

  • Debes tener el dispositivo conectado vía USB y en modo depuración. En la raíz del proyecto "ionic run [plataforma]" donde [plataforma] es android o ios. El dispositivo ejecutará tu app para que puedas probarla completamente.

Compila tu aplicación

  • "ionic build [plataforma]" generará un archivo instalable en la plataforma que hayas puesto. Lo podemos encontrar en PROYECTO/platforms/[plataforma]/build/outputs/.