Nuestro primer proyecto

En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un proyecto:

1. Usar el cli de Ionic para crear el proyecto.

2. Añadir la plataforma para la que vamos a compilar.

3. Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real.

En las siguientes secciones se detallan cada uno de estos pasos.

Crear un nuevo proyecto

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:

$ ionic start myApp blank

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:

$ ionic start myApp tabs
$ ionic start myApp sidemenu

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.

? Starter template: (Use arrow keys)
❯ tabs         | A starting project with a simple tabbed interface
  sidemenu     | A starting project with a side menu with navigation in the content area
  blank        | A blank starter project
  my-first-app | An example application that builds a camera with gallery
  conference   | A kitchen-sink application that shows off all Ionic has to offer

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.