En este momento estás viendo Introducción al Desarrollo de Apps con Ionic en Linux

Introducción al Desarrollo de Apps con Ionic en Linux

Compártelo:
Reading Time: 8 minutes
¡Vota al post! 4.8/5 - (49 votos)

Introducción al Desarrollo de Apps con Ionic en Linux

Hoy en día es interesante aprender a desarrollar apps para cualquier función o uso. Una de las maneras más simples es adoptar un Framework que nos permita evitar saltarnos una gran parte de la curva de aprendizaje. Para este mismo propósito propongo el Desarrollo de Apps con Ionic. Ionic es un Framework muy intuitivo. Podemos usarlo con ciertos conocimientos de desarrollo no tan avanzados pero si un poco conocer de código de algunos lenguajes como HTML5, JavaScript, CSS3 y TypeScript.

Instalando Ionic 4

Para iniciar primero te explico cómo instalar Ionic en Fedora. Actualmente estoy usando Fedora 29 en 64 bits. Los siguientes pasos te darán la pauta para que puedas desarrollar apps desde GNU/Linux.

1. Instalar Node JS

Ejecutas desde el shell el siguiente comando,

sudo dnf install nodejs npm
Instalar Node JS
Instalar Node JS

Verificamos que ya está instalado viendo las versiones de Node JS y NPM con los siguientes comandos,

node -v

y para npm,

npm -v
node -v npm -v

2. Instalar Cordova

Para instalar Cordova hay que ejecutar el siguiente comando,

sudo npm install -g cordova
Instalar Cordova
Instalando Cordova

y te dará el siguiente resultado,

Como yo estoy usando Fedora en 64 bits debo ejecutar la siguiente instalación de complementos y plugins ya que Ionic se da solo para 32 bits.

sudo yum install -y glibc.i686 glibc-devel.i686 libstdc++.i686 zlib-devel.i686 ncurses-devel.i686 libX11-devel.i686 libXrender.i686 libXrandr.i686
Instalando complementos de Fedora en 32 bits
Instalando paquetes de 32 bits indispensables

Al final de la instalación verás algo como la siguiente imagen.

Instalación finalizada

3. Instalar Ionic

Ahora si está listo el sistema para instalar Ionic con la ejecución del siguiente comando,

sudo npm install -g ionic
Instalando Ionic
Instalando Ionic

al ejecutar el siguiente comando podemos verificar que nos ha instalado la versión 4.3.1 de Ionic,

ionic -v
Versión 4.3.1 de Ionic
Versión 4.3.1 de Ionic

Para ver la versión de Cordova ejecutamos el comando,

cordova -v
Versión de Cordova
Versión de Cordova

si no das ninguna respuesta aun así al final te da la versión de Cordova.

Cordova versión 8.1.2
Cordova versión 8.1.2

Con el comando siguiente miras la versión de Java que usará el framework,

java -version
Versión de Java
Versión de Java

4. Instalar Git

Ahora debemos instalar Git el cual es necesario para tener un control de las versiones de nuestras Apps. Además Git es utilizado para descargar las librerías que normalmente necesita Ionic para funcionar adecuadamente.

sudo dnf install git
Instalar Git
Instalar Git

Me sale que ya lo tengo instalado :-). Para verificar la versión ejecutamos el siguiente comando,

git --version
Versión de Git
Versión de Git

5. Instalar Yarn

Ahora instalamos Yarn para administrar las dependencias de las librerías de nuestras Apps 🙂 Ejecutamos el siguiente comando,

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
Instalando Yarn
Instalando Yarn

Ejecutamos el siguiente comando,

sudo dnf install yarn

Y tenemos algo como la siguiente imagen,

Instalando Yarn
Instalando Yarn

Verificas la versión con el siguiente comando,

yarn --version
Versión 1.12.3 de Yarn
Versión 1.12.3 de Yarn

6. Crear el primer proyecto

Ahora ya podemos crear el primer proyecto de una App. Ejecutas el siguiente comando para iniciar creando una carpeta donde alojaremos a nuestras Apps,

mkdir Apps

y luego te cambias al directorio de las Apps.

cd Apps
Directorio de las Apps
Directorio de las Apps

Ahora ejecutamos el siguiente comando para generar los archivos de tu primer App llamada HolaMundo y la característica blank es para tener una App limpia para comenzar,

ionic start HolaMundo blank

de inmediato verás que te ofrece usar ionic 4 beta,

generando la App
generando la App

y escribes que si “y” para usar Ionic 4.

Eligiendo Ionic 4
Eligiendo Ionic 4

Verás la siguiente pantalla,

Ionic 4
Ionic 4

Luego verás los siguientes mensajes,

A esta opción le daremos que si “Y”.

Ionic Pro SDK
Ionic Pro SDK

Te pedirá auntenticarte y entonces si no tienes una cuenta para ionic pro entonces ejecutas el comando ionic signup. En el caso mío ya tengo una cuenta e introduzco el email y la contraseña.

Autenticación en Ionic Pro
Autenticación en Ionic Pro

Al itroducir mis datos y autenticarme me da dos opciones: 1. Link an existing app on Ionic Pro y 2. Create a new app on Ionic Pro. Entonces elijo la número 2.

Create a new app on Ionic Pro
Create a new app on Ionic Pro

y a continuación me da las dos opciones de gestión de mi App: 1. GitHub y 2. Ionic Pro. En este caso elijo la número 1.

GitHub
GitHub

Como ya cree el repositorio en GitHub entonces elijo yocupiciomx/holamundo,

Elección del Repositorio previamente creado en GitHub
Elección del Repositorio previamente creado en GitHub

En la siguiente pantalla dejamos la primera opción por defecto.

Link to master branch only
Link to master branch only

y finalmente se crean todos los archivos necesarios para tu primeraa App con Ionic 4.

Proceso finalizado de creación de archivos
Proceso finalizado de creación de archivos

debes de cambiarte al directorio de la App,

cd ./HolaMundo

Instalar la App para ver las pruebas en tu SmartPhone. Yo en particular haré las pruebas en mi Samsung Galaxy J5. La app que hay que instalar se llama DevApp y la puedes encontrar fácilmente en Google Play Store.

Con el siguiente comando podemos ver todos los archivos y directorios creados dentro de nuestra primer App,

ls -las
Archivos y carpetas dentro de HolaMundo
Archivos y carpetas dentro de HolaMundo

7. Configurar Plataformas

Debes informarle a Ionic 4 que habilitarás para tu App las plataformas de iOS y Android.

Así que ejecutas para iOS,

ionic cordova platform add ios
Habilitando la Plataforma iOS en la App
Habilitando la Plataforma iOS en la App
Adding Project
Adding Project

Y finalmente tenemos que,

Termina el proceso para iOS
Termina el proceso para iOS

Ahora haremos lo propio para habilitar la plataforma para Android dentro de la App,

ionic cordova platform add android
Proceso para habilitar la Plataforma de Android
Proceso para habilitar la Plataforma de Android

y el proceso finaliza mostrando lo siguiente,

Habilitada Android
Habilitada Android

Si tuvieras un error al habilitar la plataforma Android como el siguiente:

[Error: ERROR : Make sure JAVA_HOME is set, as well as paths to your JDK and JRE for java.]

Entonces prueba con ejecutar el siguiente comando antes de volver intentar habilitar la plataforma de Android en tu App,

export JAVA_HOME=$(/usr/libexec/java_home)

8. Ejecutando la App

Es momento de verificar si todo va bien con nuestros códigos de nuestra App. Ejecuta los siguientes comandos:

ionic serve

con esto se abrirá un navegador para mostrar la App.

Ejecutando ionic serve
Ejecutando ionic serve

Y en el navegador Firefox se muestra lo siguiente,

Ejecutándose en el puerto 8100
Ejecutándose en el puerto 8100

Ejecutas también la combinación de teclas Ctrl + Shift + i para mostrar el panel de desarrollo y la emulación de un smartphone con la App.

Escribimos http://localhost:8100/home en Google Chrome para el desarrollo de la App posteriormente damos Ctrl + Shift + i,

En Google Chrome
En Google Chrome

Das click en el símbolo de smartphone mostrado en el círculo rojo de la parte superior derecha para activar la vista previa emulando a un smartphone.

Vista de desarrollo
Vista de desarrollo

Si tu deseas hacer esta previsualización en otro navegador de tu preferencia solo escribes en la barra de direcciones http://localhost:8100 y te llevará a la App en forma de una web. Aquí de nuevo debes buscar el ícono de smartphones empalmados para ver la versión smartphone en el propio navegador.

Por otro lado usando la DevApp instalada en el smartphone tenemos la siguiente imagen al autenticarme en DevApp,

DevApp en Acción en Samsung Galaxy J5
DevApp en Acción en Samsung Galaxy J5

Y al dar click sobre la App,

Vista previa de HolaMundo
Vista previa de HolaMundo

Ahora puedes editar el código para quitar el texto por defecto que trae la creación de esta App. Voy a usar Sublime Text y si no lo tienes lo puedes instalar dando click en este link que te llevará a un tutorial que hice hace poco para tunear Fedora 29. Es muy importante y elegante usar Sublime Text en el desarrollo de apps y en el desarrollo en general.

Vas a abrir Sublime Text y tecleas Ctrl + O para abrir el archivo en la ruta ~/Apps/HolaMundo/src/app/home/home.page.html

Claro que debes tener en cuenta que tal raíz de directorios está en el nombre de tu cuenta de usuario. En el caso mío mi usuario es Angel a la cual en Dolphin le llamará “Carpeta personal”. A partir de ahí debes empezar a buscar. Mira la siguiente imagen de Dolphin. 🙂

Directorio de archivos para edición con Sublime Text
Directorio de archivos para edición con Sublime Text

El archivo home.page.html es mostrado como seleccionado en la imagen anterior.

Una vez que hayas abierto el archivo home.page.html verás algo como la siguiente imagen.

Editando el archivo home.page.html
Editando el archivo home.page.html

Vas a modificar este archivo para que te quede como se muestra en la siguiente imagen 🙂

Código editado para la App HolaMundo
Código editado para la App HolaMundo

Como te podrás dar cuenta al final pongo un link con el tag <img> mostrando la foto de la hermosa chica de principio de este post. En la siguiente imagen se muestra la emulación de la App usando Google Chrome.

Vista previa de la App en Google Chrome
Vista previa de la App en Google Chrome

Hasta aquí dejo a este post y espero sea suficiente para una introducción a Ionic y sobre todo para iniciar con la creación de Apps. Lo que restaría para ser publicado en una segunda parte sería el build de la App dentro de nuestro sistema o usando PhoneGap u otra plataforma de compilación de android.

Angel Yocupicio

Profesor de Física y Matemáticas, Webmaster, Blogger, Linux Servers Manager, Aficionado al Béisbol, Linuxero, Emprendedor y Padre de Familia.