Tutorial de Ionic – Estructura de un proyecto Ionic

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el post anterior聽vimos como crear un proyecto en ionic 2 creando el famoso “Hola Mundo”.

Hoy vamos a ver la estructura de carpetas y archivos que se general al crear un proyecto ionic.

Al crear un proyecto con ionic 2 se crea聽una carpeta con el nombre del proyecto y dentro de ella una estructura de archivos y directorios que contiene todos los elementos del proyecto.

Vamos a echar un vistazo a la estructura de archivos y carpetas que se ha generado al crear nuestro proyecto hola-mundo:

Estructura de carpetas de un proyecto Ionic 2
Estructura de carpetas de un proyecto Ionic 2

Veamos que contiene cada carpeta:

hooks: Contiene scripts que se ejecutan en el proceso de construcci贸n de la app y que pueden ser creados por el propio sistema de compilaci贸n para personalizar comandos de cordova, automatizar procesos, etc. Normalmente no tendremos que modificar nada aqu铆.

node_modules:聽La carpeta node_modules se genera autom谩ticamente al instalar las dependencias npm con “npm install”. Este comando explora el archivo package.json para todos los paquetes que necesitan ser instalados. No necesitamos tocar nada en esta carpeta.

platforms: En esta carpeta se generar谩 los proyectos nativos para cada plataforma que hayas a帽adido previamente. Si hemos a帽adido la plataforma IOS y Android se crear谩 聽una carpeta llamada ios y otra llamada android 聽y dentro tendr谩n los archivos y carpetas con la estructura de un proyecto nativo. En MAC se suele crear por defecto la plataforma IOS al crear un proyecto, en Windows cuando creas un proyecto no aparecer谩 esta carpeta hasta que a帽adas alguna plataforma,veremos m谩s adelante c贸mo se a帽aden plataformas.

Estas carpetas se actualizan cada vez que compilas o ejecutas el proyecto en un emulador o en un dispositivo. Salvo excepciones no tendremos que modificar nada en estas carpetas.

plugins: Contiene los plugins de Cordova que hayamos instalado. Se crean autom谩ticamente en esta carpeta al instalar un plugin as铆 聽que tampoco tendremos que modificar nada en esta carpeta a mano.

resources:聽Contiene el icono y la “splash screen” (pantalla de presentaci贸n) de la aplicaci贸n con la que despu茅s podremos crear autom谩ticamente todas las im谩genes聽en todos los tama帽os necesarios para cada plataforma, lo que nos ahorrar谩 mucho tiempo al no tener que generar a mano todos los tama帽os de imagen necesarios del icono y la聽pantalla de presentaci贸n. Veremos m谩s adelante como se generan autom谩ticamente.

src: Esta es la carpeta m谩s importante y donde realizaremos la mayor parte de nuestro trabajo. Aqu铆 es donde est谩n los archivos con el contenido de nuestra aplicaci贸n, donde definimos las pantallas, el estilo y el comportamiento que tendr谩 nuestra aplicaci贸n.

www:聽 Esta carpeta聽se genera autom谩ticamente y contiene la聽versi贸n actual del c贸digo聽cada vez que efectuamos un cambio. Si hab铆as trabajado anteriormente con ionic 1 puede que tengas la tentaci贸n de editar el contenido de esta carpeta pero聽NO debemos cambiar nada aqu铆 ya que todo lo que cambiemos en esta carpeta se machacar谩 con cada cambio que realicemos en la carpeta src que es 聽donde realmente debemos editar nuestra aplicaci贸n.

Veamos ahora varios聽archivos que se generan al crear un proyecto con ionic 2.

.editorconfig y .gitignore聽son dos archivos ocultos, as铆 que dependiendo de tu sistema puede que no los veas, est谩n relacionados con la configuraci贸n del editor de c贸digo y Git, en principio no tenemos que preocuparnos por ellos.

config.xml:聽El archivo config.xml contiene par谩metros que se utilizan cuando se construye聽un proyecto nativo a partir de un proyecto ionic. Aqu铆 deberemos indicar los permisos especiales que necesite la aplicaci贸n y otras configuraciones聽que puedan ser necesarias.

Ionic.config.json:聽 Contiene informaci贸n b谩sica sobre la configuraci贸n nuestro聽proyecto, se utiliza si vas a subir tu aplicaci贸n a la plataforma Ionic.io.

package.json: Contiene paquetes y dependencias de nodeJS.

tsconfig.json y tslint.json:聽Son archivos que contienen informaci贸n necesaria a la hora de compilar聽TypeScript, no necesitamos editar estos archivos.

Aunque pueda parecer complicado en realidad la mayor铆a de los elementos los gestiona autom谩ticamente Ionic y nosotros solo tenemos que preocuparnos de la carpeta src que es donde se va a situar nuestro c贸digo. Ocasionalmente puede que tengamos que editar alg煤n archivo fuera del directorio src como el archivo config.xml.

Ahora que ya hemos visto la estructura de un proyecto en ionic 2 vamos a modificar nuestro hola-mundo para que realmente diga “hola mundo”.

Si desplegamos el directorio src聽podemos ver la carpeta pages, en est谩 carpeta es donde se van a alojar todas la p谩ginas que contenga nuestra aplicaci贸n. Para que nos entendamos una p谩gina ser谩 como una vista o un pantalla de nuestra aplicaci贸n.

Al crear un proyecto con la plantilla blank ionic genera por defecto un p谩gina llamada home, que como su propio nombre indica es la p谩gina inicial que se va a mostrar al iniciar nuestra aplicaci贸n. Esta p谩gina la podemos mantener como p谩gina principal y modificarla, o podemos eliminarla y crear otra con el nombre que nosotros queramos. De momento vamos a mantener la que nos ha creado por defecto y vamos a modificar su contenido.

Carpeta pages dentro de src.
Carpeta pages dentro de src.

Como podemos ver dentro de la carpeta de la p谩gina home que nos ha creado hay tres archivos:

El archivo home.html que contiene la plantilla html de la p谩gina.
El archivo home.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la p谩gina.
El archivo home.ts que es el archivos typescript que contiene el controlador de la p谩gina, donde definiremos el comportamiento de la misma, como por ejemplo la funci贸n con la l贸gica a ejecutarse cuando se pulse sobre un bot贸n de la p谩gina etc. Veremos mas adelante en profundidad cada una de las partes de una p谩gina.

Modificando nuestro hola mundo

Si abrimos el archivo home.html veremos que contiene algo como esto:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Contenido home.html.

Las p谩ginas se pueden crear utilizando html puro, sin embargo aqu铆 podemos ver algunas etiquetas que no corresponden con las etiquetas html “est谩ndar”. Lo que vemos aqu铆 son componentes de ionic.

Ionic nos ofrece una amplia gama de componentes listos para utilizar聽y que nos facilitar谩n la labor de crear nuestra interfaz de usuario con un estilo atractivo y profesional.
Iremos viendo 聽diferentes componentes de ionic seg煤n los vayamos necesitando a lo largo de este tutorial. En este enlace pod茅is consultar en la documentaci贸n oficial de ionic los componentes disponibles con peque帽os ejemplos de como implementarlos: https://ionicframework.com/docs/v2/components/

Todos los componentes de ionic comienzan con el prefijo聽“ion-“.

Como ionic est谩 basado en Angular 2 聽si en alg煤n caso no nos es suficiente聽con los componentes que nos ofrece ionic podr铆amos聽crear nuestros propios componentes personalizados de la misma manera que en angular 2, aunque en la mayor铆a de los casos no ser谩 necesario ya que ionic nos ofrece una amplia gama de componentes para poder desarrollar nuestras aplicaciones.
Veremos mas sobre componentes en posteriores cap铆tulos.

En la p谩gina principal (y 煤nica de momento) de nuestro proyecto hola-mundo vemos que tenemos los siguientes componentes:

  • ion-header: Cabecera.
  • ion-navbar: Barra de navegaci贸n.
  • ion-title:聽T铆tulo.
  • ion-content: Contenido de la p谩gina.

Bien, vamos a cambiar el contenido de ion-title por “Hola Mundo”, tambi茅n vamos a borrar todo lo que hay dentro de la etiqueta ion-content y vamos a poner orgullosos “<h1>隆隆隆隆Hola mundo!!!!<h1>”, as铆 el c贸digo de home.html deber铆a quedar de la siguiente manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <h1>隆隆隆隆Hola Mundo!!!!</h1>
</ion-content>

Contenido modificado de home.html.

聽Si desde el terminal,escribimos ionic serve -l para ver desde el navegador como queda en las tres plataformas nuestra aplicaci贸n veremos algo como esto:

Nuestro Hola Mundo en acci贸n.
Nuestro Hola Mundo en acci贸n.

Ahora ya si podemos ver nuestro Autentico Hola Mundo en acci贸n.

En el siguiente capitulo veremos como implementar la l贸gica de una p谩gina en el controlador, para ello construiremos un minijuego de acertar n煤meros con ionic.

 
Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

9 comentarios en “Tutorial de Ionic – Estructura de un proyecto Ionic

  1. Hola Edu, buenas tardes desde Valencia, mi nombre es Luis Jord谩n y soy programador experimentado en websites, webservices, wapportals, etc.
    A d铆a de hoy, he decidido dar el paso y aprender a sacarle partido al framework Ionic, me parece muy interesante, y buscando por la red he dado con tu blog al cual ya estoy suscrito.

    Antes de nada, agradecerte estas entradas step to step que ofreces. Seguro que a muchos nos ayudan, intentar茅 realizar comentarios de forma peri贸dica para ayudarte en el aporte.

    En este caso, quer铆a que tuvieras en cuenta (por si consideras oportuno editar la entrada), en en la versi贸n actual de Ionic, al crear un nuevo proyecto ya no existe el directorio “platforms”, las plataformas ios, android y window se construyen dentro de resources.

    Una vez m谩s, gracias por tu tiempo y dedicaci贸n.
    Saludos!

    1. Hola Luis, antes de nada gracias por comentar.
      驴Me puedes decir por favor que versi贸n de ionic est谩s utilizando?, yo tengo en estos momentos la versi贸n 2.2.1 de ionic y la 6.5.0 de apache cordova y si crea la carpeta platforms, pero el c贸digo fuente generado para cada plataforma se aloja en platforms, y en la carpeta resources es donde se alojan los recursos como los iconos y la splash screen para las diferentes plataformas.Veremos m谩s adelante como podemos generar a partir de una imagen todos los tama帽os de iconos necesarios y tambi茅n para la splash screen, eso ahorra mucho trabajo a la hora de preparar la aplicaci贸n para subirla a las tiendas de aplicaciones.
      Lo dicho, revisa que versi贸n tienes instalada para contrastar.
      Muchas gracias

      Un saludo

      1. Hola Edu, pues mira te pasteo el resultado de ionic info

        Ionic CLI Version: 2.2.1
        Ionic App Lib Version: 2.2.0
        ios-deploy version: Not installed
        ios-sim version: Not installed
        OS: Windows 7
        Node Version: v7.5.0
        Xcode version: Not installed

        Y acerca de apache Cordova: version: ‘6.5.0’,

  2. Hola de nuevo Luis,

    Yo he estado utilizando Mac para realizar los ejemplos, cuando creas un proyecto ionic desde macOS autom谩ticamente se a帽ade la plataforma iOS, por eso a mi me sale la carpeta platforms nada m谩s crear el proyecto, para que a ti te salga tienes que a帽adir una plataforma a tu proyecto, por ejemplo para a帽adir la plataforma Android desde consola y dentro de la carpeta de tu proyecto tienes que escribir el siguiente comando: ionic platform add android

    Con esto te generar谩 toda la estructura de un proyecto para android dentro de la carpeta platforms.
    Veremos m谩s adelante los comandos consola de ionic cli y como a帽adir plataformas con mas detenimiento m谩s adelante.

    Por ultimo para aclarar dudas no confundas la carpeta platforms con la carpeta resources tal y como me comentaste en el primer comentario ya que se utilizan para cosas distintas.

    Espero haber resuelto tu duda.

    Un saludo y gracias por tus comentarios.

    1. Gracias por la aclaraci贸n.
      Quedo a la espera de esas pr贸ximas entradas para aprender a utilizar los comandos consola de ionic cli.

  3. Hola Eduardo es un placer encontrarse contenido de Ionic en espa帽ol, Me gustar铆a que pudiera desarrollar una aplicaci贸n para crear, leer y listas listas de archivos, ya sea imagenes, texto, xml etc. Saludos-

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.