(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Aprende Ionic 4 – Tutorial de Primeros Pasos

¿Qué es Ionic?

Es un framework que permite el desarrollo de aplicaciones con tecnologías web, es decir, estándares abiertos altamente conocidos por la comunidad: HTML, CSS y Javascript.

Con Ionic y una única base de código es posible compilar apps que funcionan en distintas plataformas, como iOS y Android. Pero además es posible compilar los proyectos también a lo que se conoce como PWA (Progressive Web Apps) o aplicaciones de escritorio basadas en Electron.

Una de las ventajas fundamentales de Ionic y el desarrollo híbrido en general es que, al tratarse de tecnologías de desarrollo conocidas y usadas en el entorno web, cualquier desarrollador que trabaje habitualmente en Internet puede reutilizar todo el conocimiento atesorado durante años.

Gracias a ello y con una curva de aprendizaje bastante leve, una persona con experiencia en desarrollo frontend es capaz de desarrollar aplicaciones móviles, que se podrán poner a disposición de los usuarios en los stores de apps (como App Store de Apple o Google Play).

Android Studio es un editor de código inteligente, desarrollado y mantenido directamente por Google, para facilitar, el desarrollo de aplicaciones para este sistema operativo.

Android Studio no solo es un editor de código adaptado para Android, sino que es un paquete completo de herramientas y dependencias necesarias para poder empezar a desarrollar y compilar aplicaciones para este sistema operativo.

Aprende Ionic 4 - Tutorial

Ionic 4

Ionic 4 viene con importantes novedades, que llevan el framework a un siguiente nivel, más versátil en todos los sentidos, gracias a la incorporación de nuevas tecnologías, flujos de desarrollo.

Sin duda, con esta actualización el framework alcanza un elevado grado de madurez, aportando a desarrolladores nuevas herramientas con las que hacer asombrosas aplicaciones orientadas a dispositivos.

Ionic 4 ahora ofrece los componentes de UI, optimizados para móviles, por medio de Web Components. La ventaja de Web Components es que es un estándar Javascript, con lo que se asientan sobre código nativo, que alcanza un mayor rendimiento en general. Pero además, al tratarse de Javascript, es posible usar Web Components dentro de cualquier framework frontend.

Ionic 4 ha eliminado las dependencias con cualquier framework Javascript en particular. Ya no es necesario usar Angular. Podemos usar React, Vue y otras librerías si así lo preferimos, o incluso Javascript nativo, sin el uso de un framework en concreto.

Incorpora la librería Stencil (Stencil.JS) para el desarrollo de los componentes de UI. Stencil está creada por el mismo equipo de Ionic, lo que nos asegura un rendimiento optimizado para correr en móviles y en apps híbridas con Ionic. Podemos decir que Stencil es transparente para el desarrollador.

A todas luces el desarrollador usará componentes que no sabe en principio si son custom elements (componentes personalizados con Web Components nativo) realizados con un framework o librería en concreto. No hace falta tener conocimientos de Stencil, puesto que los propios componentes de la aplicación se pueden realizar con esta librería o con otro framework de nuestra preferencia.

Ahora Ionic ha desarrollado una nueva capa para conversar con la parte nativa de los dispositivos. Su nombre es Capacitor y sustituye a lo que antes nos ofrecían los plugins de Cordova. Aunque aún se puede usar Cordova si se desea, gracias a Capacitor obtenemos un mayor rendimiento y eliminamos dependencias con sistemas de otras organizaciones no vinculadas a Ionic.

Existen bastantes plugins para comportamientos nativos dentro de Capacitor, pero en muchos casos todavía tendremos que ir acudiendo a Cordova cuando ese componente todavía no exista en este sistema.

Paso 1. Instalación de Node.js

Node.js es un entorno Javascript del lado del servidor, basado en eventos. Se trata de una librería y entorno de ejecución de E/S dirigida por eventos y por lo tanto asíncrona que se ejecuta sobre el intérprete de JavaScript creado por Google V8.

Para instalarlo nos dirigimos a la página oficial y descargamos la última versión para nuestro sistema operativo. Una vez descargado el instalador, lo ejecutamos y hacemos clic en “Siguiente”.

Ejecutamos el instalador y hacemos clic en "Siguiente"

Aceptamos el acuerdo de licencia y hacemos clic en “Siguiente”.

Aceptamos el acuerdo de licencia y hacemos clic en "Siguiente"

Elegimos la ruta donde queramos instalarlo y hacemos clic en “Siguiente”.

Elegimos la ruta donde queramos instalarlo y hacemos clic en "Siguiente"

Dejamos esto como está y hacemos clic en “Siguiente”.

Dejamos la configuración por defecto y hacemos clic en "Siguiente"

Por último hacemos clic en “Install”.

Por último hacemos clic en "Install"

Cuando termine la instalación hacemos clic en “Finalizar” y se nos cerrará el instalador.

Hacemos clic en el botón de "Finalizar"Para comprobar que se ha instalado correctamente, abrimos la consola y ejecutamos el siguiente comando:

node --version

Nos saldrá la versión de node que tenemos actualmente instalada.

Paso 2. Instalación de Ionic Cli

Ionic CLI es el intérprete por línea de comandos de Ionic, que contiene una serie de herramientas útiles para realizar de forma sencilla, muchas tareas habituales en el desarrollo y producción de aplicaciones con Ionic.

Para instalarlo, abrimos la consola y tecleamos el siguiente comando:

npm install -g ionic

Cuando termine la instalación, podemos comprobar que todo ha ido correctamente ejecutando el siguiente comando:

ionic --version

Paso 3. Creación de nuestra cuenta en Ionic.

Antes de empezar con Ionic necesitamos crear una cuenta de Ionic para poder manejar nuestras futuras aplicaciones.

Para ello nos dirigimos al siguiente enlace y rellenamos la información correspondiente.

Una vez hecho esto se nos abrirá una ventana de bienvenida como esta, que indica que la cuenta se ha creado correctamente.

Ventana de bienvenida indicando que la cuenta se ha creado correctamente

Paso 4. Crear nuestra primera aplicación.

Para crear nuestra primera aplicación en Ionic podemos hacerlo tecleando este comando en la consola:

ionic start myApp tabs

Para ver todas las plantillas disponibles que contiene ionic, podemos ejecutar el siguiente comando:Establecemos el nombre que queramos dar a nuestra aplicación en el lugar de “myApp” y elegimos la plantilla que queramos en el lugar de “tabs”.

ionic start --list

Cuando ejecutemos el comando, empezará a instalar todas las dependencias necesarias y nos preguntará si deseamos instalar Ionic Appflow SDK y conectarnos a la app. Presionamos “Y” para indicarle que sí y nos pedirá que iniciemos sesión con la cuenta de ionic que hemos creado anteriormente.Y elegir la plantilla que más se adapte a nuestras necesidades.

Introducimos el email y la contraseña, y nos preguntará si deseamos crear una aplicación nueva o ejecutar una existente. Seleccionamos la opción “Create a new app on Ionic Appflow”.

Una vez creada la app, nos preguntará qué git queremos usar. Seleccionamos el que más nos guste, en caso de no tener una cuenta en el git seleccionado la creamos y seguimos adelante. Por último nos preguntará qué branch queremos usar, elegimos “Link to master branch only” y con esto tendremos nuestra primera aplicación en Ionic.

Finalmente para ejecutar la aplicación, entramos a la carpeta de la app desde la terminal y la iniciamos de la siguiente forma:

cd myApp
ionic serve

Se nos abrirá una ventana en el navegador parecida a esta, dependiendo de la plantilla que hayamos usado:

Nueva ventana en el navegador

Si quieres aprender más recuerda que tiene estos cursos con nosotros…

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies