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

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:

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.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Anuncios

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s