Nuestro primer proyecto
Last updated
Was this helpful?
Last updated
Was this helpful?
En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un proyecto:
Usar el cli 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" (con una única pantalla 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 en primer lugar nos preguntará el framework de JavaScript que queremos utilizar, dándonos a elegir entre Angular y React. En este manual solo veremos la opción de Angular.
Una vez seleccionado el framework 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, como por ejemplo:
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:
Además, si ejecutamos este comando sin indicar ningún parámetro (es decir, escribiendo solamente ionic start
), en primer lugar nos preguntará el nombre de la carpeta y a continuación nos aparecerá un menú (como el que se puede ver a continuación) para que seleccionemos el tipo de aplicación a crear.
Además de las plantillas tabs
y sidemenu
, ya indicadas previamente, nos sugiere algunas más, estas son:
tabs
: Aplicación simple con navegación tipo pestañas.
sidemenu
: Aplicación con menú lateral desplegable.
blank
: Aplicación con una única página vacía.
my-first-app
: Aplicación que muestra el uso de la cámara y el almacenaje de fotografías.
conference
: Aplicación de ejemplo un poco más completa, con varios diseños de página y componentes.