Instalar Node

Lo primero que necesitas es tener instalado node en tu sistema.

Ve a https://nodejs.org/ y descarga el paquete donde más te plazca.  Ejecutado el pkg descargado tendrás disponible Node en /usr/local/bin/node y el gestor de paquetes npm en /usr/local/bin/npm.

Debes asegurarte que la ruta /usr/local/bin está añadida al $PATH de tu sistema.  Puedes comprobarlo ejecutando en una ventana de terminal el comando

echo $PATH

En el extraño caso de que esa ruta no esté añadida a la variable de sistema $PATH, ejecuta:

sudo nano /etc/paths

Introduce tu contraseña en caso de ser preguntado por ella, y en el editor abierto, ve a la última fila y añade la ruta. Pulsa Crtl+X para salir y la tecla “Y” para confirmar que deseas grabar antes de salir.

Abre una nueva ventana del terminal, y vuelve a comprobar la variable $PATH.

 

Instalar Cordova

El siguiente paso es instalar las herramientas de línea de comando de Cordova, la plataforma para construir aplicaciones móviles usando html, CSS y JavaScript.  Lo haremos directamente desde el gestor de paquetes de node, npm.

Si quieres que esté disponible de forma global (para todos los usuarios), comienza la linea con sudo y mete la contraseña de administrador del equipo cuando la pida:

sudo npm install -g ionic cordova

El resultado debe ser algo parecido a este:

 

 

Instalar los SDK’s de los dispositivos

Y por último para tener el entorno configurado y ponder hacer nuestra primera aplicación, debemos tener en el equipo las plataformas de desarrollo de los diferentes sistemas para los que queremos construir aplicaciones:  Android, iOS y/o Windows.

Por no extenderme en la instalación de cada una de las plataformas, os dejo el enlace a cada una de ellas y su paso a paso, realmente bien explicadas:

• Android SDK > http://developer.android.com/sdk/index.html
• XCode > https://itunes.apple.com/us/app/xcode/id497799835?mt=12
  (Recuerda que para poder instalar aplicaciones en un dispositivo iOS, y por supuesto poder publicarlas, debes tener una cuenta de desarrollador de Apple, que cuesta 99 dólares).

Me centraré en esta entrada en Android:

Si no tienes ya instalado Android Studio (mi recomendación), un IDE que viene con el SDK ya pre-instalado y te guía paso a paso en la configuración, puedes descargarte el SDK de Android forma independiente (http://developer.android.com/sdk/installing/index.html?pkg=tools).

Debes tener tantas versiones del framework como versiones de Android quieras soportar, teniendo en cuenta siempre que Cordova solo da soporte para las versiones con un mínimo de un 5% de cuota de mercado. En el momento de escribir este post, Android 2.3 y superior, o lo que es lo mismo, API level 10 y en adelante.  Por tanto, debes instalar todos los niveles de API desde la versión 10.  Para ello, abre una ventana del Terminal y ve donde hayas instalado las SDK de Android, en mi caso en /user/joseluisgv/android-sdks.

cd /users/joseluisgv/android-sdks

Accede a la carpeta “tools”

cd tools

Ejecuta:

sh android

Eso abrirá el gestor de versiones y añadidos del SDK de Android:

 

Para cada versión de API que desees soportar, debes tener AL MENOS instalado “SDK Platform” y “Google APIs” de cada una de ellas. No está de más tener la documentación también lista y descargada. Por supuesto, las imágenes para los sistemas que quieres tener un emulador:

 

 

Configurar variables de sistema necesarias

Una vez descargadas las versiones de las API que queremos, debemos incluir en $PATH las rutas a las carpetas tools y platform-tools del directorio del SKD.

Recordando cómo se añadían rutas al PATh en osX:

sudo nano /etc/paths

Introduce tu contraseña en caso de ser preguntado por ella, y en el editor abierto, ve a la última fila y añade la ruta. Pulsa Crtl+X para salir y la tecla “Y” para confirmar que deseas grabar antes de salir.  Como en mi caso instalé las SDK’s en /users/joseluisgv/android-sdks, mi archivo paths queda así:

Y para que Cordova funcione correctamente, debemos tener en nuestro $PATH la ruta a %JAVA_HOME%bin y a %ANT_HOME%bin.

• Cómo añadir la variable de sistema JAVA_HOME en osX
• Añadir Apache ANT a OSX y establecer sus variables de sistema

 

Hacer una aplicación desde cero.

Lo más sencillo es partir de una las plantillas disponibles para Ionic (https://www.npmjs.com/package/ionic#starting-an-ionic-app).  Puedes ver las plantillas “starter” disponibles, ejecutando lo siguiente:

ionic start -list

Donde te aparecerá algo como:

 

Yo me voy a atrever con la plantilla “maps”, que incluye Google Maps y un menú lateral, pero eso ya es para otro post donde contaré como voy avanzando.

Si quieres compartir tus proyectos con Ionic, déjame un comentario y si quieres el repo de git.  Aprenderemos juntos.

😉