Nuestro primer proyecto
Last updated
Last updated
En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un proyecto:
Usar el clic de Ionic para crear el proyecto.
Añadir la plataforma para la que vamos a compilar.
Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real.
En las siguientes secciones se detallan cada uno de estos pasos.
Ionic facilita la creación de proyectos usando su intérprete de línea de comandos (cli), mediante el cual podremos generar proyectos en "blanco" (en el que la primera pantalla esté vacía) para empezar a programar su contenido desde cero. Para crear un proyecto tenemos que escribir el siguiente comando en un terminal:
Al ejecutar este comando se creará una carpeta llamada "myApp" con el contenido del nuevo proyecto de Ionic. Además el código de la aplicación incluirá una primera pantalla vacía, en la cual podremos empezar a escribir nuestro código.
El cli de Ionic también permite generar proyectos con algo de contenido para no partir desde cero:
Los cuales generarían respectivamente un proyecto de Ionic con la navegación mediante pestañas o con un menú lateral. En la imagen inferior se puede ver un ejemplo de estos tres tipos:
Como siguiente paso tendríamos que añadir las plataformas para las cuales queremos compilar. Ionic (con la ayuda de Cordova) permite generar código para multitud de plataformas, entre ellas están Android, iOS, Amazon Fire OS, Blackberry 10, navegador, Firefox OS, Ubuntu, WebOS, Windows Phone 8 y Windows. Las posibles plataformas para las que podemos generar dependerán del sistema operativo que utilicemos, por ejemplo, para iOS solo podremos compilar desde un Mac. En general soporta las siguientes combinaciones:
Para añadir una plataforma para la cual queremos compilar nuestro proyecto usaremos el siguiente comando:
Por ejemplo, para añadir la plataforma de compilación Android usaríamos:
Para ver un listado de las plataformas instaladas y las disponibles simplemente tenéis que ejecutar:
El código de las plataformas se añadirá dentro de la carpeta platforms del proyecto. Dentro de esta carpeta se copiará y compilará nuestro proyecto, generando las aplicaciones compiladas. Pero todo esto se realizará mediante comandos de Ionic, en ningún caso tenemos que modificar manualmente el código de esta carpeta.
Para más información podéis consultar:
https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
Para ejecutar el proyecto tenemos tres opciones: abrirlo en el navegador, emularlo o ejecutarlo en un terminal real. Según lo que queramos hacer nos puede interesar una opción un otra. Abrirlo en una navegador sería la opción más rápida y la más recomendable durante el desarrollo. Sin embargo, si usamos características nativas del dispositivo y queremos probarlas no podremos usar el navegador y tendremos que abrirlo en un emulador o dispositivo real.
Para abrir nuestro proyecto en un navegador para poder ver y depurar lo que vamos haciendo, simplemente tenemos que ejecutar el siguiente comando en un terminal en la raíz del proyecto:
Este terminal lo tenemos que dejar abierto mientras que estemos trabajando para que funcione el servidor. Al ejecutarlo nos mostrará el siguiente texto por pantalla:
Como se puede ver en las instrucciones el servidor se creara en la URL http://localhost:8100/. Automáticamente se nos tendría que abrir una ventana del navegador en esta dirección, si no se abre también podemos poner la dirección manualmente. Con cada cambio que hagamos en el código del proyecto se recargará automáticamente el contenido del navegador. Si no funcionara por cualquier razón podéis escribir restart o r en el terminal.
Para parar el servidor simplemente tendremos que escribir quit o q en el terminal.
Como opción podemos añadir el parámetro --lab en la llamada ($ ionic serve --lab) que nos mostrará como quedaría la aplicación a la vez para Android y para iOS.
Ionic también permite emular o ejecutar el proyecto en un dispositivo real. Para esta opción primero tendremos que haber añadido una plataforma como vimos en el paso 2, en otro caso daría error.
Para emular un proyecto simplemente tendríamos que escribir en un terminal:
Donde <PLATFORM> es la plataforma para la que queremos emular. Por ejemplo para emular en Android escribiríamos:
Y para instalar y ejecutar en un dispositivo real se hace de igual forma pero usando el comando run:
En ambos casos podemos añadir la opción --livereload o -l, de esta forma tras cada cambio que hagamos en el código se recargará la emulación o la aplicación en el dispositivo. Por ejemplo:
Esta opción todavía está en beta así que es normal que a veces de problemas y no funcione bien.
Además también podemos añadir en ambos casos la opción --consolelogs or -c para ver en el terminal la información que imprime por consola la aplicación.
Por último mencionar que si no queremos ejecutar el proyecto y solamente queremos compilarlo y generar el código destino de la plataforma podemos usar la opción build indicando también la plataforma de compilación:
Si no indicamos la plataforma este comando compilaría el proyecto para todas las plataformas que tengamos instaladas.
Mac
Linux
Windows
iOS
x
Amazon Fire OS
x
x
x
Android
x
x
x
BlackBerry 10
x
x
x
Navegador
x
x
x
Ubuntu
x
Windows Phone 8
x
Windows
x
Firefox OS
x
x
x
