En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con 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:
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:
- Ejecuta el archivo DMG de Android Studio.
- Arrastra Android Studio y suéltalo en la carpeta Applications. Luego inicia Android Studio.
- Elige si deseas importar configuraciones previas de Android Studio y luego haz clic en OK.
- 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.