Mi primer aplicación con Ionic ( y tecnologías adyacentes)

Estimados alumnos:

Como parte de la materia de desarrollo aplicaciones web de la unidad 5 nos dimos a la tarea de construir una aplicación móvil con acceso a los servicios del dispositivo.

Como sabemos esa gran biblioteca llamada Internet me encontré el siguiente artículo que fue preámbulo para iniciar un tutorial del 2015 y que sin duda representará algún reto para actualizar a las versiones de este 2018 que esta por terminar.

Una de las motivaciones para usar Ionic fue la recomendación de uno de los desarrolladores de aplicaciones móviles que ha dado la universidad: el Ingeniero Daniel Marín.

El siguiente recetario es como apoyo para hacer el tutorial de Chris Nwamba para realizar nuestra primera aplicación con Ionic, en mi caso he utilizado la versión 8 de NodeJS (node-v8.12.0-x64.msi).

Pasos del tutorial

  1. Descargue NodeJs (https://nodejs.org/en/)
  2. Instalar la versión de NodeJS (por omisión nodejs queda C:\Program Files\nodejs
  3. Actualizar la variable de entorno PATH (familia Windows) – se puede hacer de forma gráfica usando el Panel de Control o el mismo paquete modifica la variable de entorno Path.
    1. En la línea de comandos set path=%path%;C:\Program Files\nodejs
  4. Tecleamos el comando para instalar Cordova e Ionic
  5. Como se puede observar hay un error en el tutorial ya que marca ioniv, en lugar de ionic, cambiamos el comando y funciona sin problemas.
  6. A continuación se crea la primer aplicación en blanco.
  7. Al terminar queda una estructura muy compleja de directorios donde reside la aplicación, aquí hay otra variación debido sin duda a la versión más actual de Ionic que estamos usando. Lo que no se puedo agregar fue la plataforma para IoS y en el caso de Android no hubo problemas.
  8. Ahora corremos la aplicación.
    El resultado aparece la aplicación en un navegador:
  9.  Ahora una utilería para mostrar en tamaños o apariencia similar teléfonos Android o Ios, el comando cambia y dicha utilería se instala.
  10. Después se pregunta acerca de instalar dicho paquete, después de aceptar la instalación se ejecuta la vista previa en los 2 grandes sistemas operativos para móviles.
  11. Aquí la ventana del navegador, para terminar esta vista previa en la consola se presionan las teclas Ctrl-C. En lo subsecuente para ver el proyecto con esta vista se manda el comando como viene el manual.
  12. Y aquí queda la vista en el navegador.
    Hasta aquí la primera parte del tutorial con una aplicación de Ionic en blanco.

Profesor Miguel Araujo.

Deja un comentario