Tutorial de IONIC: Estructura de un proyecto en IONIC

Estructura

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

Vamos a ver la estructura de carpetas y archivos que se generan al crear un proyecto ionic.

Al crear un proyecto con ionic 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:

Veamos qu茅 contiene cada carpeta:

e2e: Aqu铆 se encuentra el c贸digo para escribir tests end to end que prueben la aplicaci贸n, no nos vamos a preocupar de esta carpeta.


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

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.
Dentro de src tenemos las siguientes subcarpetas:聽

La carpeta app, que es donde se ubicar谩 las p谩ginas que creemos para la aplicaci贸n, los servicios y toda la l贸gica de programaci贸n.

La carpeta assets donde almacenaremos aquellos recursos que necesitemos para nuestra aplicaci贸n, como im谩genes etc.

La carpeta environments contiene un archivo llamado environment.prod.ts y un archivo llamado environment.ts. Ambos archivos exportan un objeto llamado environment donde podemos definir variables de entorno, por defecto contienen la variable variable production que podemos utilizar para diferenciar cuando vamos a ejecutar la aplicaci贸n en producci贸n en en modo desarrollo. De momento no nos vamos a preocupar por esto.

La carpeta theme contiene el archivo variables.scss donde se definen las variables css de ionic. Por defecto vienen definidos algunos colores que podemos utilizar.

El archivo global.scss: En este archivo podemos colocar css que se utilice globalmente en cualquier sitio de nuestra aplicaci贸n.

index.html: Es el punto de entrada de nuestra aplicaci贸n, la mayor铆a de las veces no necesitaremos cambiar nada aqu铆.

karma.conf.js: Es el archivo de configuraci贸n de karma, se utiliza para la realizaci贸n de test unitarios.

main.ts: Es el punto de entrada del m贸dulo principal de nuestra aplicaci贸n. No necesitaremos cambiar nada aqu铆.

polyfills.ts: Es un archivo de configuraci贸n que se genera al crear un proyecto angular, no necesitaremos modificar nada en el.

test.ts: Este archivo es requerido por karma.conf.js que como hemos comentado se utiliza para realizar tests unitarios.聽

tsconfig.app.json, tsconfig.spec.json y typings.d.ts:Contienen configuraciones typescript para los tests.

.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.

angular.json: Archivo de configuraci贸n de la app.

 

Ionic.config.json:聽 Contiene informaci贸n b谩sica sobre la configuraci贸n nuestro proyecto.

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.

Modificando nuestro hola mundo

Ahora que ya hemos visto la estructura de un proyecto en ionic vamos a modificar nuestro hola-mundo para que realmente diga 鈥渉ola mundo鈥.

Si desplegamos el directorio src podemos ver la carpeta app, en esta 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 una 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.

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

El archivo home.module.ts: En este archivo se importan los m贸dulos y funcionalidades requeridas.

El archivo home.page.html que contiene la plantilla html de la p谩gina.

El archivo home.page.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la p谩gina.

home.page.spec.ts este archivo se utiliza para las pruebas unitarias, no nos vamos a preocupar de 茅l por ahora.

El archivo home.page.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 m谩s adelante en profundidad cada una de las partes de una p谩gina.

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

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>


Las p谩ginas se pueden crear utilizando html puro, sin embargo aqu铆 podemos ver algunas etiquetas que no corresponden con las etiquetas html 鈥渆st谩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 libro. 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/components/

Todos los componentes de ionic comienzan con el prefijo 鈥渋on-鈥.

C贸mo ionic est谩 basado en Web components si en alg煤n caso no nos es suficiente con los componentes que nos ofrece ionic podr铆amos crear nuestros propios componentes personalizados, 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 m谩s 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.

Como puedes ver ion-header aparece dos veces, una dentro de la etiqueta ion-content con el par谩metro collapse=”condense”, esto es una nueva funcionalidad que trae ionic 5 y que solo es visible en IOS, al hacer scroll la cabecera se colapsa.
En los ejemplos de este libro no vamos a utilizar esta funcionalidad, pero si necesitas saber m谩s sobre c贸mo funcionan las cabeceras desplegables para iOS en ionic puedes consultar la documentaci贸n oficial de ionic al respecto en el siguiente link:

https://ionicframework.com/docs/api/title#collapsible-large-titles

Bien, vamos a cambiar el contenido de ion-title por 鈥淗ola 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 [translucent]="true">
  <ion-toolbar>
    <ion-title>
     Hola Mundo
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content [fullscreen]="true">
  <div class="ion-padding">
    <h1>隆隆隆隆Hola mundo!!!!</h1>
  </div>
</ion-content>

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:

 

Eso es todo por hoy,聽 en el pr贸ximo post crearemos un mini juego para seguir aprendiendo a crear aplicaciones con este potente framework llamado IONIC.

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.

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.