Tutorial de Ionic – Instalar ionic y las herramientas necesarias para el desarrollo

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

 

隆隆Atenci贸n!! este tutorial se basa en ionic 2/3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

En el post anterior hicimos una introducci贸n sobre ionic 2 y sus caracter铆sticas.

Hoy vamos a ver como instalar ionic 2 y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic 2.

Para instalar ionic debemos instalar primero nodejs 聽para ello descargamos聽聽el paquete mas reciente de http://nodejs.org/聽y lo instalamos.聽

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

npm install -g cordova ionic

Si lo est谩s ejecutando en linux o en mac debes utilizar sudo por delante, es decir:

sudo npm install -g cordova ionic

Al utilizar sudo ejecutamos el comando con privilegios de administrador (root) por lo que nos pedir谩 la contrase帽a de usuario.

Una vez instalado ya podr铆amos 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 Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Existen soluciones en la nube como Phonegap Build para poder compilar una App para IOS si no disponemos de un MAC.

Ahora vamos a ver como instalar android studio en Ubuntu (Linux), Mac OS y Windows:

Tabla de contenidos

Como instalar Android Studio en Ubuntu

Primero debemos instalar聽Java SE Development Kit 8:

Desde consola ejecutamos los siguientes comandos:

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

Para verificar la versi贸n de java instalada escribimos:

java -version

Ahora para configurar las variables de entorno escribimos lo siguiente:

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

Para versiones de 64 bits tenemos que instalar los siguientes paquetes:

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

Por ultimo聽Instalamos Android studio via ppa con los siguientes comandos:

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

 

Como Instalar Android Studio en Mac

Instalamos java SE

Descargamos la 煤ltima versi贸n de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

La instalamos y despu茅s descargamos e instalamos android studio

https://developer.android.com/studio/index.html

Despu茅s de descargar el paquete seguimos los siguientes pasos:

  1. Ejecuta el archivo DMG de Android Studio.
  2. Arrastra Android Studio y su茅ltalo en la carpeta Applications. Luego inicia Android Studio.
  3. Elige si deseas importar configuraciones previas de Android Studio y luego haz clic en OK.
  4. El asistente de configuraci贸n de Android Studio te guiar谩 en el resto de la configuraci贸n. Esto incluye la descarga de componentes del Android SDK que se necesiten para el desarrollo.

Como instalar android studio en windows

Instalamos java SE

Descargamos la 煤ltima versi贸n de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

Buscamos variables de entorno en el panel de control, le damos a帽adir nueva y le damos el nombre de JAVA_HOME.

Despues le damos a examinar directorio y buscamos donde esta la carpeta del jdk, en mi caso en C:\Program Files\Java\jdk1.8.0_101

Le damos a aceptar y listo.

Ahora descargamos android studio de aqu铆:

https://developer.android.com/studio/install.html

Una vez descargado lo ejecutamos el instalador y ya tendr铆amos Android studio funcionando.

Instalar un editor de c贸digo compatible con聽TypeScript

Para finalizar de instalar las herramientas necesarias, como 煤ltimo paso 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 personalmente recomiendo utilizar Visual Studio Code de Microsoft que es multiplataforma y pod茅is descargarlo desde el siguiente enlace:聽 https://code.visualstudio.com/

Este editor nos marcara los errores de sintaxis mientras introducimos el c贸digo lo que no ayuda bastante. Si prefieres otros editores聽eres libres de utilizar el que m谩s te guste.

Puedes dejar en los comentarios que editor con soporte para typescript utilizas y as铆 ampliamos el abanico de posibilidades.

En el pr贸ximo post veremos como crear por fin nuestro primer hola mundo con Ionic 2.

 

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

6 comentarios en “Tutorial de Ionic – Instalar ionic y las herramientas necesarias para el desarrollo

  1. Buenas tardes!

    Existe posibilidad de descargar tan buenos tutoriales en formato pdf???

    De ser afirmativo, ind铆quenme por favor, desde d贸nde puedo descargarlos

    Agradecida

    Batistina

  2. otra opci贸n muy valida para utilizar en vez de Visual studio es atom es un buen IDE para desarrollo con sus respectivos paquetes que soporten typescrit y dem谩s, nos har谩n el trabajo mas sencillo.

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.