Menu

Clase 1 - Creando una app en Ionic 2.

classionic2 - December 29, 2016 por Carlos Rojas

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

Primero que todo quiero hacer una distincion entre Ionic 1 y Ionic 2

Si es tu primera vez explorando Hybrid Apps quizas puedas estar un poco confundido porque las personas estan hablando sobre Ionic 1 y Ionic 2

Son similares, es lo mismo?

Bueno, basicamente las dos versiones de Ionic comparten la ideologia 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 y Ionic 2 usa Angular 2.x.x y estas dos tecnologias solo comparten el nombre :)

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

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, yu podras ser capaz de acceder al administrador de paquetes de node o npm a traves del comando.

npm install -g ionic cordova

Quizas puedas necesitar sudo para instalar globalmente

Instalando el Android SDK

Vas a necesitar Android instalado en tu maquina 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 2. Yeeeeih!!

Ok, ahora necesitamos escribir este comando:

ionic start myFirstApp --v2

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 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 tu elijas tu editor vas a necesitar abrir el proyecto ahí:

Cool, que sigue?

Vamos a crear una app que va a tener estas caracteristicas:

  • 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 :)

What are RSS feeds?

Angular 2 Series

Ionic Cloud Services


¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Carlos Rojas