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.