Archivo de la etiqueta: ionic espa帽ol

Tutorial de IONIC: Introducci贸n

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

Hola todos:

Hace tiempo escrib铆 en este blog una serie de tutoriales sobre ionic, estos tutoriales estaban basados en ionic 2/3 y se han quedado desactualizados聽 con las 煤ltimas versiones de IONIC, aprovechando que acabo de sacar mi libro actualizado: Desarrollo de aplicaciones m贸viles multiplataforma y PWAs con Ionic y Firebase desde cero. voy a iniciar una serie de tutoriales sobre IONIC.

He decidido dejar los tutoriales antiguos avisando de que son para versiones antiguas de ionic, por si alguien necesita esa informaci贸n para mantener alguna aplicaci贸n antigua, y porque me es m谩s sencillo volver a escribir desde cero que adaptar los tutoriales que ya existen.

Sin m谩s pre谩mbulos vamos a empezar con una peque帽a introducci贸n:

驴Que es ionic?

Ionic es un framework que nos permite crear de una manera r谩pida y sencilla aplicaciones m贸viles multiplataforma (Android, IOS, Windows, PWAs…) utilizando tecnolog铆as web (HTML, JAVASCRIPT, CSS).

Para poder utilizar elementos web en una aplicaci贸n m贸vil utiliza lo que se conoce como una聽 Webview.

A este tipo de aplicaciones se las conoce como aplicaciones h铆bridas. El resultado final es una app 鈥渘ativa鈥 que puedes subir a las tiendas de apps.

Ionic nos ofrece un mont贸n de componentes para crear la interfaz de usuario con estilo nativo listos para utilizar por lo que podemos crear aplicaciones con una est茅tica profesional y con muy poco esfuerzo.

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo c贸digo podemos generar apps para Android, IOS y Web e incluso aplicaciones de escritorio utilizando Electron, por lo que el tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje ser谩 mucho menor.

Adem谩s Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran dise帽ador.

Novedades a partir de la versi贸n 4 de IONIC

Ionic 2/3 estaba basado en Apache Cordova y Angular.

Apache cordova nos permite ejecutar nuestro c贸digo escrito con tecnolog铆a web (html, css, javascript) encapsulado en una webview y hace de puente entre esta y nos permite hacer uso de las funciones nativas del m贸vil (c谩mara, gps, etc) a trav茅s de plugins.

Sin embargo a partir de la versi贸n 4 de Ionic se incorpora Capacitor.

Capacitor

Al igual que lo hac铆a apache cordova, Capacitor hace de puente entre nuestra aplicaci贸n web y el dispositivo nativo.

Capacitor adem谩s se integra mejor cuando ejecutamos nuestra aplicaci贸n en otros entornos que no sean dispositivos m贸viles como en navegadores de escritorio facilitando el desarrollo de progressive web apps (PWA).

Hasta la versi贸n 4 Ionic utilizaba Angular como framework de desarrollo para crear componentes web basados en angular.聽

A partir de la versi贸n 4 Ionic utiliza componentes web gen茅ricos, para crear los Web Components, el equipo de Ionic cre贸 una herramienta llamada Stencil.

Los Web components son un conjunto de web APIs que te permiten crear etiquetas HTML personalizadas que son reutilizables.

Stencil

Stencil es una herramienta que crea componentes web, y el equipo Ionic ha creado un conjunto de componentes web con Stencil que forman parte de Ionic Core.聽

Ionic Core contiene el conjunto de los componentes web que componen la biblioteca de la interfaz de usuario de Ionic (listas, botones, selectores, etc.).

Nosotros no necesitamos utilizar Stencil ni entender c贸mo funciona para utilizar los componentes que el equipo de ionic a creado para nosotros.聽

Angular

Al utilizar componentes web gen茅ricos y no componentes Angular podemos utilizar cualquier framework por lo que no es obligatorio el uso de Angular. Si te sientes m谩s c贸modo utilizando otro framework puedes hacerlo.

Sin embargo en este tutorial vamos a utilizar Angular para desarrollar nuestras aplicaciones ya que Angular nos proporciona muchas cosas listas para usar que nos ayudan a construir aplicaciones bien estructuradas.聽

Hay una biblioteca llamada @ionic/angular que es la biblioteca de ionic espec铆fica de Angular, es la que ya ven铆amos utilizando antes de la versi贸n 4 de ionic, este paquete ofrece funcionalidades adicionales que solo se pueden utilizar con Angular, sin embargo utiliza los mismos componentes web que pueden ser utilizados con otro framework.聽

Angular nos permite aprovechar las ventajas de este framework, adem谩s como Angular siempre ha sido el framework por defecto de Ionic hay mucho m谩s soporte y muchas m谩s apps desarrolladas con ionic utilizando Angular.

Adem谩s hay muchas librer铆as y utilidades ya creadas en Angular para utilizar con Ionic.

Angular utiliza TypeScript como lenguaje de programaci贸n, si no dominas estas tecnolog铆as mencionadas no te preocupes, tratar茅 de ir explicando las cosas b谩sicas necesarias seg煤n las vayamos necesitando en los ejemplos que realizaremos.

La versi贸n 4 de Ionic tambi茅n trae cambios en la navegaci贸n entre p谩ginas utilizando ahora el router de Angular.

Tambi茅n cambian en la versi贸n 4 los ciclos de vida de las p谩ginas, ya no utilizamos por ejemplo ionWillLoad o ionViewDidEnter, en su lugar utilizaremos ngOnInit.

Si vienes de utilizar ionic en versiones anteriores te ser谩 煤til conocer estas diferencias, si empiezas de cero no te preocupes, veremos todo lo que necesitas saber para desarrollar aplicaciones con Ionic en la versi贸n actual.

Vamos a ver como instalar Ionic y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic.

Instalar Node.js

Para instalar ionic debemos instalar primero Node.js para ello descargamos el paquete con la versi贸n LTS de http://nodejs.org/ y lo instalamos.聽

Si est谩s usando linux y quieres utilizar un gestor de paquete puedes consultar aqu铆 los pasos a seguir para instalar Node.js usando un gestor de paquetes seg煤n la distribuci贸n que tengas instalada:

https://nodejs.org/es/download/package-manager/

Instalar ionic

Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic con el siguiente comando:

npm install -g ionic

 

Una vez instalado ya podemos crear aplicaciones con ionic y ejecutarlas en el navegador, sin embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las herramientas de desarrollo de Android, as铆 mismo para poder ejecutar la app para IOS necesitaremos instalar Xcode.

Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, para poder compilar las Apps para IOS necesitamos un MAC con Xcode instalado.

Para instalar Android Studio descargalo desde la p谩gina oficial y sigue las instruci贸nes dependiendo de tu sistema operatico: https://developer.android.com/studio/index.html.

Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Por 煤ltimo necesitaremos un editor de c贸digo que nos coloree typescript para facilitarnos el trabajo. En realidad podr铆amos editar el c贸digo con cualquier editor de texto plano, pero una buena opci贸n para typescript es utilizar Visual Studio Code de Microsoft que es multiplataforma y pod茅is descargarlo desde el siguiente enlace:聽 https://code.visualstudio.com/

Hola Mundo en Ionic

Vamos a crear nuestra primera aplicaci贸n con Ionic, el famoso 鈥渉ola mundo鈥 que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programaci贸n o framework.

Para crear nuestro proyecto 鈥渉ola mundo鈥 iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

 

Seleccionamos Angular como framework y tras un rato descargando los paquetes necesarios para crear nuestra aplicaci贸n ya estar谩 listo nuestro proyecto.

El comando start de ionic cli (commandline interface)聽 se utiliza聽 para crear (iniciar) un nuevo proyecto, el siguiente par谩metro es el nombre del proyecto, en este caso hola-mundo, el siguiente par谩metro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vac铆a.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vac铆a.
  • sidemenu: Crea una plantilla con men煤 lateral.
  • tabs: Crea una plantilla con Tabs (Pesta帽as).聽

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto 鈥榟ola-mundo鈥 que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

 

Podemos utilizar simplemente ionic serve, pero con el par谩metro -l nos muestra como queda nuestra app en IOS, Android聽 y Windows.

Para poder ejecutar ionic serve con el par谩metro -l tenemos que instalar @ionic/lab, por eso la primera vez que lo ejecutemos nos pedir谩 que instalemos el paquete @ionic/lab:

Install @ionic/lab? (Y/n)

Le decimos que s铆 pulsando la tecla 鈥Y鈥.

En la barra superior a la derecha desplegando la opci贸n platforms podemos seleccionar en qu茅 plataformas queremos ver c贸mo queda nuestra aplicaci贸n.Vista de c贸mo quedar铆a nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrar谩 solo una plataforma a pantalla completa.

Como podemos ver,聽 sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para a帽adir lo que necesitemos.

Eso es todo por hoy,聽 el el pr贸ximo post analizaremos la estructura de un proyecto de IONIC y veremos c贸mo empezar a modificar nuestro Hola Mundo.