Menu

Clase 1 - Creando una app en Ionic

classionic2 - June 19, 2017 por Carlos Rojas
ionic3.3.0ionic-app-scripts1.3.7cordova-cli7.0.0ionic-cli3.4.0

!Hola! y bienvenido a esta serie de lecciones que te enseñaran como hacer una app en Ionic.

Primero que todo quiero hacer una distincion entre Ionic 1 y el nuevo Ionic.

Si es tu primera vez explorando aplicaciones híbridas quizas puedas estar un poco confundido porque las personas estan hablando sobre Ionic y Ionic 2 o 3.

¿Son similares? ¿Es lo mismo?

Bueno, basicamente las dos versiones de Ionic comparten la ideología de usar html/js/css para construir Apps moviles. Estas dos versiones usan el mismo CLI, entonces, tu puedes usar el mismo comando para construir, servir y desplegar. Pero son diferentes principalmente porque Ionic 1 usa Angular 1.x.x, Ionic 2 usa Angular 2.x.x y Ionic 3 usa Angular 4.x.x y estas dos tecnologías solo comparten el nombre :)

Es importante aclarar que la migración de Ionic 1 a Ionic 2 es compleja pero de ahora en adelante Ionic 2, Ionic 3 y las versiones que siguen van a ser retrocompatibles. Esto quiero decir que no hay por que preocuparse por las nuevas versiones y cada nueva versión traerá nuevas características y con migraciones sencillas. En resumen ‘es solo Ionic’.

Ok. Habiendo dicho esto vamos a enfocar esta serie en Ionic.

Instalando Ionic

Instalando Node y Cordova

El CLI de Ionic esta instalado sobre Node e Ionic es construido sobre Cordova, Asi que vas a necesitar Descargar e instalar una versión reciente de Node desde acá .

Una vez tienes Node.js instalado, tu podrás ser capaz de acceder al administrador de paquetes de node o npm a traves del comando.

npm install -g ionic@latest cordova@latest

Quizas puedas necesitar sudo para instalar globalmente

Instalando el Android SDK

Vas a necesitar Android instalado en tu máquina para que Ionic se ejecute correctamente. Por favor sigues estas guias.

Mac OS X

Windows

Instalando XCODE solo para Mac OS X

Si tienes Mac, tu vas a necesitar de Xcode CLI Tools. Sigue el enlace e instala.

Descarga XCODE

Creando tu primera App en Ionic. Yeeeeih!!

Ok, ahora necesitamos escribir este comando:

ionic start myFirstApp

Ok, ahora si todo sale bien, tu puedes ver en la ubicacion de tu directorio una nueva carpeta llamada “myFirstApp” y en tu terminal CLI. Algo como esto:

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Some helpful tips:

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic cordova run ios[android,browser]

Test and share your app on device with Ionic View:
  http://view.ionic.io

Build better Enterprise apps with expert Ionic support:
  http://ionic.io/enterprise

New! Add push notifications, live app updates, and more 
with Ionic Cloud!
  https://apps.ionic.io/signup

Ahora nos vamos a ubicar en la carpeta del proyecto.

cd myFirstApp

Desde ahora, siempre que ejecutemos algo en el CLI va a ser desde esta ubicación.

Ahora, vamos a ejecutar nuestra nueva App. Ejecute en la terminal.

ionic serve

vas a ver algo como esto en tu navegador:

Si ves algo asi en tu pantalla estas muy bien :)

Ahora, yo personalmente uso Chrome Dev Tools para trabajar en mis proyectos.

Para usar esto desde tu navegador tu vas a necesitar Click Derecho en tu Raton. y seleccionar “Inspeccionar”.

Presione en los 3 puntos en la esquina y seleccione “Dock to right”.

y luego, presione en la imagen del dispositivo pequeño.

Ahora veras algo como esto:

!Perfecto! ahora, nosostros estamos casi listo.

Adicionalmente, vas a necesitar de un editor. Tu puede encontrar buenas opciones aquí.

Yo estoy usando Visual Studio Code.

Entonces, cuando tú elijas tu editor vas a necesitar abrir el proyecto ahí:

Cool, ¿Qué sigue?

Vamos a crear una app que va a tener estas características:

  • Vas a leer noticias desde un Feed (RSS).
  • Puedes registrar usuarios.
  • Puedes autenticar usuarios.
  • Puedes resetear la constraseña.

Listo eso es todo por ahora. pero mientras tanto puedes leer los siguientes enlaces :)

¡Compártelo!