Aplicaciones Multiplataforma con Ionic 2

Preparación del entorno de desarrollo para Programar Aplicaciones Multiplataforma con Ionic 2

Un saludo amigos y amigas. En este post quiero mostraros los pasos que he seguido para instalar y configurar el entorno de desarrollo de Aplicaciones Multiplataforma con Ionic 2 en Ubuntu 16.04.
También os mostraré todos los enlaces donde he sacado la información para poder llevarlo a cabo y las alternativas que he seguido para los problemas que me he encontrado.

El tutorial que he seguido es el siguiente: reviblog.net donde explica perfectamente qué es Ionic 2 y los pasos a seguir para construir tu primera App Multiplataforma (Web, Android, iOS, Windows Phone).
Durante la instalación y configuración de las herramientas necesarias en Ubuntu 16.04, he tenido algunos problemas y he necesitado seguir otros pasos para solucionarlos, por lo que este post no será una copia de este increíble tutorial de reviblog, sino que lo complementará para aquél que se encuentre con los mismos problemas que yo usando el mismo Sistema Operativo.
Sin más, comenzamos.

Qué es Ionic 2

Ionic 2 es un Framework que utiliza los lenguajes de programación web para realizar aplicaciones multiplataforma y poderlas subir a las distintas tiendas de aplicaciones.
Está basado en Apache Cordova y en Angular 2 y usa TypeScript como lenguaje de programación.

Instalación y Configuración del entorno de Desarrollo con Ionic 2

Aquí pasamos al segundo tutorial de reviblog: Instalar ionic y las herramientas necesarias para el desarrollo (recomiendo visitarlo), y aquí es donde tuve que seguir una serie de pasos alternativos, por lo que pasaré a explicarlos.

Herramientas que necesitaremos instalar

Node.js
Apache Cordova
Ionic
Java SE Development Kit 8
Gradle
Android Studio
Editor de código compatible con TypeScript: Visual Studio Code (Aunque puedes utilizar tu editor favorito, recomiendo este porque colorea TypeScript y facilita el trabajo, además, es multiplataforma)

Node.js

Según el artículo de Wikipedia Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.

Para su instalación podemos descargar el archivo en su web https://nodejs.org/en/ o en Ubuntu tán fácil como instroducir el siguiente comando en la consola (recuerda siempre actualizar los repositorios con sudo apt update):

sudo apt install nodejs

Apache Cordova e Ionic

Apache Cordova es un marco de desarrollo móvil de código abierto. Permite utilizar las tecnologías estándar web como HTML5, CSS3 y JavaScript para desarrollo multiplataforma, evitando el lenguaje de desarrollo nativo.

Instalaremos Cordova e Ionic con el siguiente comando:

sudo npm install -g cordova ionic

Java SE Development Kit 8

Java Development Kit o (JDK), es un software que provee herramientas de desarrollo para la creación de programas en Java. (Wikipedia).

Para su instalación añadiremos un nuevo repositorio a nuestro Ubuntu, verificaremos su versión y configuraremos las variables de entorno.

Añadimos el repositorio e instalamos:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

Verificamos la versión instalada:

java -version

Configuramos las variables de entorno:

sudo apt-get install oracle-java8-set-default

Para versiones de 64 bits:

sudo dpkg --add-architecture amd64
sudo apt-get update
sudo apt-get install libncurses5:amd64 libstdc++6:amd64 zlib1g:amd64

Gradle

«Gradle es básicamente una herramienta para automatizar el proceso de construcción de nuestro proyecto(compilar,testing,empaquetado…).» Enlace.

Lo necesitaremos para compilar nuestra app y poder probarla en un emulador de Android o en nuestro propio dispositivo Android.
Para su instalación seguí el siguiente tutorial: Instalación Gradle pero al comprobar la versión me daba un error y la misma consola me recomendaba instalarlo con:

sudo apt install gradle

Y luego configurando la variable de entorno, que en mi caso añadí la siguiente línea en el archivo /home/mi-usuario/.bashrc (nano /home/mi-usuario/.bashrc):

export PATH=$PATH:/opt/gradle/gradle-3.4.1/bin

De esa forma ya me funcionó perfectamente.

Android Studio

Android Studio es el entorno de desarrollo integrado oficial para la plataforma Android. Fue anunciado el 16 de mayo de 2013 en la conferencia Google I/O, y reemplazó a Eclipse como el IDE oficial para el desarrollo de aplicaciones para Android. (Wikipedia).

Aquí nuevamente me guié del Tutorial de reviblog.net:

sudo apt-add-repository ppa:paolorotolo/android-studio
sudo apt-get update
sudo apt-get install android-studio lib32stdc++6 mesa-utils
cd /opt/android-studio/bin
./studio.sh

Pero me daba error del repositorio. Mesa-utils se instaló bien, pero para poder instalar Android Studio en Ubuntu seguí este tutorial. En el mismo indican los siguientes comandos para su instalación:

sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt update
sudo apt install ubuntu-make
sudo umake android

Luego añadí las siguientes líneas al archivo .bashrc (/home/mi-usuario/.bashrc):

# Android
export ANDROID_HOME=$HOME/~/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools

Visual Studio Code

Visual Studio Code es un editor de código de Microsoft, libre, gratuito y multiplataforma (Windows, OSX y GNU/Linux). Elegimos este editor por facilitarnos las cosas con el lenguaje TypeScript, aunque puedes utilizar tu editor de código favorito.

Para instalarlo seguí este tutorial (link), el cuál indica que nos descarguemos el paquete .deb desde su web: https://code.visualstudio.com/ y ejecutemos el siguiente comando /Ten en cuenta que la versión puede cambiar cuando estés leyendo este artículo, asegúrate de poner el nombre correcto del archivo):

sudo dpkg -i code_1.13.1-1497464373_amd64.deb

Siguientes pasos

Llegados a este punto, estaremos listos para construir Aplicaciones Multiplataforma con Ionic 2, siguiendo estos tutoriales consecutivos de reviblog.net:

Hola Mundo en Ionic -> https://reviblog.net/2017/02/04/hola-mundo-con-ionic-v2/
Estructura de un proyecto en Ionic 2 -> https://reviblog.net/2017/02/10/tutorial-de-ionic-2-estructura-de-un-proyecto-ionic-2/
Mini Juego Acertar números -> https://reviblog.net/2017/02/16/mini-juego-de-acertar-numeros-en-ionic-2-el-controlador-de-la-pagina-y-data-binding/

Twitter de reviblog: @revigames

Intenta seguir el tutorial original, pero si te encuentras alguna dificultad para instalar todo en Ubuntu 16.04 sigue mis pasos y comenta que tal te fue en este mismo post o por Twitter, un saludo!!

También puede interesarte: Instalación de LAMP

Aplicaciones Multiplataforma con Ionic 2 – Programación Multiplataforma – JavierJG