(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Ionic 4: Angular, React y VueJS

Si estás buscando una tecnología cross-platform para aplicaciones web seguramente hayas oído algo acerca de Ionic Framework.

En su última iteración (versión 4) se abrió a otras tecnologías, se considera que es la independencia total del framework base (anteriormente éste únicamente podía ser Angular).

Dado que los componentes de Ionic Framework son ahora encapsulados como Web Components, ya no es necesario desarrollar atado a un framework base concreto.

Los web components funcionan con cualquier framework, incluso se podría no utilizar ningún Framework, si así se desease. Esta cuarta versión abrió las puertas a que en un futuro se puedan crear aplicaciones en Vue o en React utilizando los Web Components de Ionic.

Antes de continuar, si quieres seguir el tutorial debes asegurarte de que tienes instalado NodeJS en tu entorno.

Instalando Ionic CLI

Ionic nos ofrece una manera muy sencilla de configurar nuestro proyecto utilizando su CLI con varios servicios, como inicializar proyectos y añadir componentes, entre otros.

npm install -g ionic

Actualmente la creación de proyectos con angular CLI está limitada a Angular, sin embargo veremos más adelante cómo incorporar este framework a un proyecto React o Vue.En todo proyecto Ionic encontrarás, en su raíz, un archivo llamado ionic.config.json donde podrás configurarlo.

Angular

Crearemos el proyecto Ionic con Angular utilizando la siguiente línea de comando:

$ ionic start

Nos pedirá un nombre:

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply
name, the first argument to ionic start.

? Project name: ionicAngular

Y una plantilla de inicio, seleccionamos blank:

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
this prompt next time, supply template, the second argument to ionic start.

? Starter template:
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  tabs     | A starting project with a simple tabbed interface
  

Por último, nos solicitará si queremos conectar nuestro proyecto a AppFlow, para este tutorial no será necesario:

? Install the free Ionic Appflow SDK and connect your app? (Y/n) n

Ionic CLI ha generado una plantilla con una home page básica, si nos dirigimos a src/app/home.page.html observamos el siguiente contenido:

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

<ion-content>
 <div class="ion-padding">
   The world is your oyster.
   <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
 </div>
</ion-content>

Vamos a utilizar algunos de los componentes de ionic para construir una home en condiciones, eliminamos el contenido que ha generado y lo sustituimos por el siguiente:

<!-- Cabecera -->
<ion-header>
 <ion-toolbar color="dark">
   <ion-title>
     Ionic Home
   </ion-title>
 </ion-toolbar>
</ion-header>
<!-- Contenido de la page -->
<ion-content>
 <!-- Componente Ionic Card -->
 <ion-card>
     <!-- Componente Ionic Slide -->
     <ion-slides color="medium" pager="true">
         <ion-slide>
           <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
         </ion-slide>
         <ion-slide>
           <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
         </ion-slide>
       </ion-slides>
   <ion-card-header>
     <ion-card-subtitle>Card + slider</ion-card-subtitle>
     <ion-card-title>¡Rápido y eficaz!</ion-card-title>
   </ion-card-header>
   <ion-card-content>
     ¡Los componentes de Ionic son la leche!
   </ion-card-content>
 </ion-card>
 <!-- Componente Ionic Botón -->
 <ion-button (click)="mensaje()" expand="full" color="danger">¡No pulses el botón!</ion-button>
</ion-content>

Además, añadimos al archivo src/app/home.page.ts el siguiente método:

export class HomePage {

 constructor() {}

 mensaje(){
   alert('¡Te dije que no pulses!')
 }
}

Por último, ejecutamos el siguiente comando a nivel raíz del proyecto:

$ ionic serve

Se desplegará el proyecto en localhost, puerto 8100 (por defecto), podemos especificar el puerto con la bandera –port:

$ ionic serve --port=8200

Se mostrará la home con el siguiente aspecto:

Imagen del resultado al crearemos un proyecto Ionic con Angular

¡Queda genial! Ahora veamos cómo podemos replicar esta home en React y Vue.

React

Comenzaremos creando un proyecto de react, para ello necesitamos el script de creación de proyectos de React:

$ npm install create-react-app

A continuación, llamamos al script para crear la aplicación:

$ create-react-app ionicReact --typescript

Desplegamos el proyecto con el comando npm start a nivel raíz del proyecto :

$ npm start

La home por defecto se verá de la siguiente forma:

[IMAGEN]

Vamos a instalar Ionic en el proyecto React, para ello vamos a instalar los siguientes paquetes:

  • @ionic/react
  • @ionic/core
  • react-router

Ejecutamos el siguiente comando:

$ npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

Importamos el CSS de ionic en el punto de entrada principal de la aplicación, en el archivo index.tsx.

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

Ahora en cualquier clase de la aplicación podemos llamar a cada componente individualmente, por ejemplo, los elementos básicos de una page en ionic, como la generada anteriormente se verían de la siguiente forma:

import {
  IonApp,
  IonHeader,
  IonContent
} from '@ionic/react';

Vamos a recrear la home que hemos realizado con Ionic + Angular pero utilizando React. Nos dirigimos al archivo app.tsx y añadimos el siguiente código:

import React from 'react';
import './App.css';

import {
 IonApp,
 IonHeader,
 IonToolbar,
 IonContent,
 IonTitle,
 IonCard,
 IonCardHeader,
 IonCardTitle,
 IonCardSubtitle,
 IonCardContent,
 IonSlides,
 IonSlide,
 IonButton
} from '@ionic/react';

const App: React.FC = () => {
 return (
   <IonApp>
       <IonHeader>
         <IonToolbar color="dark">
           <IonTitle>Ionic Home</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
         <IonCard>
           <IonSlides>
             <IonSlide>
               <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" />
             </IonSlide>
             <IonSlide>
               <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" />
             </IonSlide>
           </IonSlides>
           <IonCardHeader>
             <IonCardSubtitle>Card + slider</IonCardSubtitle>
             <IonCardTitle>¡Rápido y eficaz!</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>¡Los componentes de Ionic son la leche!</IonCardContent>
         </IonCard>
         <IonButton expand="full" color="danger">¡No pulses el botón!</IonButton>
       </IonContent>
     </IonApp>
 );
}

export default App;

Ahora nuestra home es idéntica a la que hicimos con angular:

Imagen del resultado al crearemos un proyecto Ionic con React

Por último, vamos a realizar la misma implementación pero con VueJS.

VueJS

En primer lugar, instalamos Vue CLI para generar un nuevo proyecto Vue:

$ npm install @vue/cli

De esta forma podemos crear el proyecto Vue con el siguiente comando:

$ vue create ionic-vuejs

Aparecerá una selección de opciones, seleccionamos las opciones por defecto:

Vue CLI v3.7.0
┌───────────────────────────┐
│  Update available: 3.8.2  │
└───────────────────────────┘
? Please pick a preset:
> default (babel, eslint)
  Manually select features
  

Para ejecutar el proyecto nos dirigimos a la carpeta raíz del proyecto y ejecutamos:

$ npm run serve

Tenemos una aplicación Vue desplegada en nuestro navegador:

Ahora vamos a instalar las dependencias para poder utilizar Ionic en este proyecto, necesitaremos los paquetes:

  • @ionic/core
  • @ionic/vue
  • vue-router

La línea de comando será la siguiente:

$ npm install @ionic/core @ionic/vue vue-router

A continuación, debemos importar Ionic en el proyecto, para ello hay que introducir el siguiente código en main.js:

import Vue from 'vue'
import App from './App.vue'

import IonicVue from '@ionic/vue';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

Vue.config.productionTip = false

Vue.use(IonicVue);

new Vue({
 render: h => h(App),
}).$mount('#app')

Como hicimos con React, nos traemos los estilos de Ionic y además le decimos a Vue que utilice el plugin @ionic/vue con Vue.use().

Por último, vamos hacer que la aplicación presente el mismo aspecto que las aplicaciones realizadas hasta ahora. Nos dirigimos a App.vue y añadimos el código que se muestra a continuación:

<template>
    <ion-app>
    <!-- Cabecera -->
    <ion-header>
        <ion-toolbar color="dark">
            <ion-title>
                Ionic Home
            </ion-title>
        </ion-toolbar>
    </ion-header>
    <!-- Contenido de la page -->
    <ion-content>
        <!-- Card -->
        <ion-card>
            <!-- Slide -->
            <ion-slides color="medium" pager="true">
                <ion-slide>
                    <img src="https://cdn.pixabay.com/photo/2017/12/06/13/46/leaves-3001812_960_720.jpg" alt="">
                </ion-slide>
                <ion-slide>
                <img src="https://cdn.pixabay.com/photo/2016/08/05/15/02/london-1572444_960_720.jpg" alt="">
                </ion-slide>
            </ion-slides>
            <ion-card-header>
                <ion-card-subtitle>Card + slider</ion-card-subtitle>
                <ion-card-title>¡Rápido y eficaz!</ion-card-title>
            </ion-card-header>
            <ion-card-content>
            ¡Los componentes de Ionic son la leche!
            </ion-card-content>
        </ion-card>
        <!-- Botón -->
        <ion-button expand="full" color="danger">¡No pulses el botón!</ion-button>
    </ion-content>
    </ion-app>
</template>

Vualá, la home como lo hemos estado haciendo hasta ahora:

Imagen del resultado al crearemos un proyecto Ionic con VueJS

Conclusión

Como hemos podido ver, los resultados son idénticos, por lo tanto, podemos desarrollar en cualquiera de las tres tecnologías, elegir en cual nos desenvolvemos cómodamente y utilizar este fantástico framework.

Si quieres aprender más recuerda que tiene estos cursos con nosotros…

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies