Una introducción a reaccionar con iónico
El desarrollo de aplicaciones móviles utilizando marcos híbridos ha avanzado mucho desde su lanzamiento inicial en 2008. Con las mejoras realizadas en el motor JavaScript y la mayor potencia de procesamiento disponible para los teléfonos móviles, la principal preocupación que tenían las personas cuando consideraban desarrollar sus aplicaciones utilizando el enfoque híbrido (es decir, el rendimiento) prácticamente se ha eliminado y los marcos multiplataforma han experimentado un aumento en popularidad.
Vamos a crear una aplicación móvil que extraiga datos de la API de Marvel Comics ; los datos mostrarán los cómics de Marvel y podrás elegir tus favoritos. Al final, crearemos una compilación nativa del proyecto en Android.
Ionic Framework es un conjunto de herramientas de interfaz de usuario de código abierto para crear aplicaciones rápidas y de alta calidad utilizando tecnologías web con integraciones para marcos populares como Angular y React. Ionic permite el desarrollo multiplataforma utilizando Cordova o Capacitor, y este último ofrece soporte para el desarrollo de aplicaciones de escritorio utilizando Electron.
En este artículo, exploraremos Ionic con la integración de React mediante la creación de una aplicación que muestra cómics usando la API de Marvel Comics y permite a los usuarios crear una colección de sus favoritos. También aprenderemos cómo integrar capacidades nativas en nuestra aplicación con Capacitor y generar compilaciones para una plataforma nativa.
Si no ha trabajado con Ionic en el pasado o tiene curiosidad por saber cómo funciona Ionic con React, este tutorial es para usted.
Requisitos previos
Antes de poder comenzar a crear aplicaciones con Ionic Framework, necesitará lo siguiente:
- Node.js (al menos v10) instalado en su computadora
- conocimiento práctico de reaccionar
- familiaridad con la API de Hooks
- algo de experiencia con TypeScript
- un IDE nativo, Android Studio para Android o XCode para iOS
- una cuenta de desarrollador de Marvel con una clave API. Puedes conseguir uno aqui
Aquí hay una imagen de lo que construiremos:
Instalación de la CLI iónica
Las aplicaciones Ionic se crean y desarrollan principalmente a través de la interfaz de línea de comandos (CLI) de Ionic. La CLI ofrece una amplia gama de herramientas de desarrollo y opciones de ayuda a medida que desarrolla su aplicación híbrida. Para continuar con esta guía, deberá asegurarse de que la CLI esté instalada y sea accesible desde su terminal.
Abra una nueva ventana de terminal y ejecute el siguiente comando:
npm install -g @ionic/cliEsto instalará la última versión de Ionic CLI y la hará accesible desde cualquier lugar de su computadora. Si desea confirmar que la instalación se realizó correctamente, puede ejecutar el siguiente comando:
ionic --versionEste comando generará la versión de Ionic instalada en su computadora y debería ser similar a esto:
6.4.1Ahora puede iniciar aplicaciones Ionic para las integraciones de marcos admitidas oficialmente (Angular y React) utilizando cualquiera de las plantillas prediseñadas disponibles.
Iniciar una aplicación de Ionic React
Crear una aplicación Ionic React es fácil usando la CLI. Proporciona un comando llamado startque genera archivos para un nuevo proyecto basado en el marco de JavaScript que seleccione. También puede optar por comenzar con una plantilla de interfaz de usuario prediseñada en lugar de la aplicación "Hola mundo" en blanco predeterminada.
Para comenzar, ejecute el siguiente comando:
ionic start marvel-client tabs --type=react --capacitorEste comando creará una nueva aplicación Ionic React usando la tabsplantilla. También agrega una integración de Capacitor a su aplicación. Capacitor es un tiempo de ejecución de aplicaciones multiplataforma que facilita la ejecución de aplicaciones web de forma nativa en iOS, Android y escritorio.
Navegue su terminal hasta el directorio recién creado y ejecute iniciar el servidor.
cd marvel-clientionic serveAhora apunte su navegador para https://localhost:8100ver su aplicación ejecutándose.
Nota: Si ha utilizado create-react-app(CRA) antes, la estructura de directorios de su proyecto actual le resultará muy familiar. Esto se debe a que, para que la experiencia de desarrollo sea familiar, los proyectos de Ionic React se crean utilizando una configuración similar a la que se encuentra en una aplicación CRA. React Router también se utiliza para impulsar la navegación de aplicaciones bajo el capó.
Creando un componente de reacción
En este paso, creará un componente React reutilizable. Este componente recibirá datos y mostrará información sobre un cómic. Este paso también tiene como objetivo ayudar a demostrar que Ionic React sigue siendo solo React.
Elimine los archivos del componente ExploreContainer src/componentsy elimine sus importaciones de los .tsxarchivos del src/pagesdirectorio.
import React from 'react';import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';import ExploreContainer from '../components/ExploreContainer';import './Tab1.css';const Tab1: React.FC = () = { return ( IonPage ... IonContentIonHeader collapse="condense" IonToolbar IonTitle size="large"Tab 1/IonTitle /IonToolbar /IonHeader ExploreContainer name="Tab 1 page" //IonContent /IonPage );};export default Tab1;
En su Tab1.tsxarchivo, elimine también el contenido dentro de la IonContent/IonContentetiqueta.
A continuación, cree un archivo con el nombre ComicCard.tsxen su src/componentsdirectorio. Luego, abra el archivo en su editor y agregue el siguiente contenido:
import React, { FC } from 'react';import { Comic } from '../interfaces/comic';import { IonImg, IonCard, IonCardTitle, IonCardSubtitle, IonCardHeader } from '@ionic/react';type Props = { comic: Comic;}const ComicCard: FC = (props): JSX.Element = { const { comic } = props; return ( IonCard div style={{ height: '250px', overflow: 'hidden', }} IonImg src={`${comic.thumbnail.path}.${comic.thumbnail.extension}`} / /div IonCardHeader IonCardSubtitle {comic.title} /IonCardSubtitle IonCardTitle h3 {comic.series.name} /h3 /IonCardTitle /IonCardHeader /IonCard );}export default ComicCard; Su ComicCardcomponente recibe accesorios que contienen detalles de un cómic y representa la información utilizando un IonCardcomponente. Las cartas en Ionic generalmente se componen utilizando otros subcomponentes. En este archivo, está utilizando los componentes IonCardTitley IonCardSubtitlepara representar el título del cómic y la información de la serie dentro de un IonCardHeadercomponente.
Consumiendo la API de Marvel
Para utilizar su componente recién creado, deberá obtener algunos datos de la API de Marvel. A los efectos de esta guía, utilizará el paquete axios para realizar sus solicitudes HTTP. Puede instalarlo ejecutando el siguiente comando:
yarn add axiosA continuación, agregue la siguiente carpeta a su srcdirectorio:
# ~/Desktop/marvel-client/srcmkdir -p servicesLuego, cdingrese al servicesdirectorio y cree un archivo llamado api.ts:
# ~/Desktop/marvel-client/src/servicestouch api.tsFinalmente, abra el archivo y agregue el siguiente contenido:
import axios from 'axios';import { DataContainer } from '../interfaces/data-container';import { Comic } from '../interfaces/comic';const API_KEY = '813xxxxxxxxxxxxxxxxxx';const api = axios.create({ baseURL: 'https://gateway.marvel.com:443/v1/public', headers: { 'Content-Type': 'application/json', },});api.interceptors.response.use((response) = { if (response.status === 200) { return response.data.data; }});export function getComics(): PromiseDataContainerComic { return api.get('/comics', { params: { apikey: API_KEY, limit: 10, hasDigitalIssue: true, }, });}Asegúrese de reemplazar el valor de API_KEYcon su propia clave API. Si no tienes uno, puedes solicitar uno registrándote en el sitio web de desarrolladores de Marvel . También debe configurar su cuenta para permitir solicitudes de su servidor de desarrollo local agregándolas a su lista de referencias autorizadas de Marvel (vea la imagen a continuación):localhost*
Ahora tiene una instancia de axios configurada para usar la API de Marvel. El api.tsarchivo tiene solo una exportación, que llega al GET /comicspunto final y devuelve una colección de cómics. Está limitando los resultados solo a aquellos que están disponibles digitalmente. Ahora procederá a utilizar el Servicio API en su aplicación.
Abra el Tab1.tsxarchivo y reemplace el contenido con lo siguiente:
import React, { FC, useState, useEffect } from 'react';import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSpinner, IonGrid, IonRow, IonCol } from '@ionic/react';import './Tab1.css';import ComicCard from '../components/ComicCard';import { Comic } from '../interfaces/comic';import { getComics } from '../services/api';const Tab1: FC = () = { const [comics, setComics] = useState(null as Comic[] | null); const [loading, setLoading] = useState(false); const fetchComics = () = { setLoading(true); getComics().then((response) = { if (response response.results) { setComics(response.results); } }).finally(() = { setLoading(false); }); }; useEffect(() = { fetchComics(); }, []) return ( IonPage IonHeader IonToolbar IonTitleHome/IonTitle /IonToolbar /IonHeader IonContent {(loading) ( div className="ion-text-center ion-padding" IonSpinner name="crescent" / /div )} {(comics) ( IonGrid IonRow {comics.map((comic) = ( IonCol key={comic.id} sizeXs="12" sizeSm="6" sizeMd="4" sizeLg="3" sizeXl="2" ComicCard comic={comic} / /IonCol ))} /IonRow /IonGrid )} /IonContent /IonPage );};export default Tab1;El archivo de arriba es un ejemplo de una página en Ionic. Las páginas son componentes a los que se puede acceder con una ruta/URL. Para garantizar que las transiciones entre páginas funcionen correctamente, es necesario que el IonPagecomponente sea el componente raíz de su página.
IonHeaderes un componente destinado a existir en la parte superior de una página. No es necesario para todas las páginas, pero puede contener componentes útiles como el título de la página, el IonBackButtoncomponente para navegar entre páginas o el archivo IonSearchBar. IonContentes el área de contenido principal de sus páginas. Es responsable de proporcionar el contenido desplazable con el que interactuarán los usuarios, además de cualquier evento de desplazamiento que pueda usarse en su aplicación.
Dentro de su componente, tiene una función llamada fetchComics()(llamada una vez dentro del useEffect()gancho) que realiza una solicitud para obtener cómics de la API de Marvel llamando a la getComics()función que escribió anteriormente. Guarda los resultados en el estado de su componente a través del useState()gancho. El IonSpinnercomponente muestra un ícono giratorio mientras su aplicación realiza una solicitud a la API. Cuando se completa la solicitud, pasa los resultados al ComicCardcomponente que creó anteriormente.
En este punto, su aplicación debería verse así:
En el siguiente paso, aprenderá cómo utilizar los complementos de Capacitor en su aplicación habilitando el almacenamiento sin conexión.
Creando una colección personal de cómics de Marvel
Su aplicación se ve bien hasta ahora, pero no es muy útil como aplicación móvil . En este paso, ampliará la funcionalidad de su aplicación permitiendo a los usuarios destacar cómics o guardarlos como favoritos. También hará que la información sobre los favoritos guardados esté disponible para verla sin conexión mediante el complemento Capacitor Storage.
Primero, cree un archivo con el nombre util.tsen su srcdirectorio:
# ~/Desktop/marvel-client/srctouch util.tsAhora, abra el archivo y pegue el siguiente contenido:
import { Plugins } from '@capacitor/core';import { Comic } from './interfaces/comic';const { Storage, Toast } = Plugins;export const updateFavourites = async (comic: Comic): Promise = { const saved = await Storage.get({ key: 'savedFavourites' }); const favourites: Comic[] | null = (saved saved.value) ? JSON.parse(saved.value) : null; if (!favourites) { const comics = [comic]; await Storage.set({ key: 'savedFavourites', value: JSON.stringify(comics), }); return Toast.show({ text: 'Added to favourites', }); } const copyOfFavourites = favourites.slice(); const { id } = comic; const isSavedIndex = copyOfFavourites.findIndex((c) = c.id === id); if (isSavedIndex !== -1) { copyOfFavourites.splice(isSavedIndex, 1); await Storage.set({ key: 'savedFavourites', value: JSON.stringify(copyOfFavourites), }); return Toast.show({ text: 'Removed from favourites', }); } else { copyOfFavourites.unshift(comic); await Storage.set({ key: 'savedFavourites', value: JSON.stringify(copyOfFavourites), }); return Toast.show({ text: 'Added to favourites', }); }};export const getFavourites = async (): PromiseComic[] | null = { const saved = await Storage.get({ key: 'savedFavourites', }); return (saved saved.value) ? JSON.parse(saved.value) : null;};export const checkFavourite = async (id: number): Promiseboolean = { const saved = await Storage.get({ key: 'savedFavourites', }); const favourites: Comic[] | null = (saved saved.value) ? JSON.parse(saved.value) : null; if (favourites) { const isSavedIndex = favourites.findIndex((c) = c.id === id); if (isSavedIndex !== -1) { return true; } } return false;}; El complemento Storage proporciona un almacén clave-valor para datos simples, mientras que el complemento Toast proporciona una notificación emergente para mostrar información importante a un usuario.
La updateFavourites()función en este archivo toma un único argumento, un Comicobjeto, y lo agrega al almacenamiento del dispositivo si no existe, o lo elimina del almacenamiento del dispositivo si ya estaba guardado. getFavourites()devuelve los cómics guardados del usuario, mientras checkFavourites()acepta un único argumento, un ComicID de recurso, y lo busca en los cómics guardados, devolviendo truesi existe o falseno.
A continuación, abra el ComicCard.tsxarchivo y realice los siguientes cambios para permitir a los usuarios de su aplicación guardar sus cómics favoritos:
import { star, starOutline } from 'ionicons/icons';import * as utils from '../util';type Props = { comic: Comic;}const ComicCard: FCProps = (props): JSX.Element = { const { comic } = props;const [isFavourite, setIsFavourite] = useState(false); const checkFavourite = (): void = { utils.checkFavourite(comic.id).then((value: boolean) = { setIsFavourite(value); }); } useEffect(() = { checkFavourite(); });return ( IonCard ... IonCardHeader ... /IonCardHeaderIonCardContent IonButton onClick={(): void = { utils.updateFavourites(comic).finally(() = { checkFavourite(); }); }} IonIcon icon={(isFavourite) ? star : starOutline} color="light" / {(isFavourite) ? 'Remove' : 'Add' } /IonButton /IonCardContent/IonCard );}
Su ComicCardcomponente ahora tiene un IonButtoncomponente que, cuando se hace clic, llama a la updateFavourites()función que escribió anteriormente. Recuerda que la función actúa como un interruptor, eliminando el cómic si ya estaba guardado o guardándolo. No olvide agregar las importaciones para los nuevos componentes Ionic, IonButtony IonCardContent, IonIconque acaba de agregar a este componente.
Ahora vamos a la parte final de este paso, donde renderizarás los cómics guardados en su propia página. Reemplace el contenido del Tab2.tsxarchivo con lo siguiente:
import React, { useState } from 'react';import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonGrid, IonRow, IonCol, useIonViewWillEnter } from '@ionic/react';import './Tab2.css';import { Comic } from '../interfaces/comic';import { getFavourites } from '../util';import ComicCard from '../components/ComicCard';const Tab2: React.FC = () = { const [comics, setComics] = useState(null as Comic[] | null); const loadComics = (): void = { getFavourites().then((result) = { if (result) { setComics(result); } }) }; useIonViewWillEnter(() = { loadComics(); }); return ( IonPage IonHeader IonToolbar IonTitleFavourites/IonTitle /IonToolbar /IonHeader IonContent {(comics) ( IonGrid IonRow {comics.map((comic) = ( IonCol key={comic.id} sizeXs="12" sizeSm="6" sizeMd="4" sizeLg="3" sizeXl="2" ComicCard comic={comic} / /IonCol ))} /IonRow /IonGrid )} /IonContent /IonPage );};export default Tab2;Esta página es bastante similar a la Tab1página pero, en lugar de realizar una solicitud API para obtener cómics, accede a datos guardados localmente. También está utilizando el gancho del ciclo de vida de Ionic, useIonViewWillEnter()en lugar de un useEffect()gancho, para realizar una llamada a la función que lee los cómics guardados y actualiza el estado del componente. El useIonViewWillEnter()gancho se llama justo cuando la página a la que se navega aparece a la vista.
Su aplicación ahora utiliza algunos complementos nativos para mejorar su funcionalidad. En el siguiente paso, aprenderá cómo generar un proyecto nativo para Android y crear una aplicación nativa usando Android Studio.
Nota: Puede eliminar los archivos relacionados *Tab3* y eliminar la importación y el *IonTab* componente relacionado del *App.tsx* archivo.
Generando un proyecto nativo
Ionic viene con soporte para tiempos de ejecución de aplicaciones multiplataforma como Capacitor y Cordova. Estos marcos le ayudan a crear y ejecutar aplicaciones desarrolladas con Ionic en un dispositivo o emulador nativo. A los efectos de esta guía, utilizará Capacitor para generar archivos de proyecto nativos.
Antes de proceder a agregar una plataforma, deberá generar una compilación de producción de su aplicación. Ejecute el siguiente comando en el directorio raíz de su proyecto para hacerlo:
ionic buildAhora agreguemos Capacitor a su proyecto y generemos los activos necesarios para crear una aplicación nativa. Capacitor proporciona una CLI a la que se puede acceder en su proyecto mediante npxo desde la ionicCLI como se muestra a continuación:
Usandonpx
npx cap add androidEste comando agrega la androidplataforma a su proyecto. Otros posibles valores de plataforma son iosy electron.
Usandoionic
Dado que inicializó su proyecto usando la --capacitorbandera anteriormente, Capacitor ya se ha inicializado con la información de su proyecto. Puede proceder a agregar una plataforma ejecutando el siguiente comando:
ionic capacitor add androidEste comando instalará las dependencias necesarias para la androidplataforma. También generará los archivos necesarios para un proyecto nativo de Android y copiará los recursos que creó anteriormente durante la ejecución ionic build.
Si ha instalado Android Studio , ahora puede abrir su proyecto en Android Studio ejecutando:
ionic capacitor open androidFinalmente, construye tu proyecto:
Conclusión
En esta guía, ha aprendido cómo desarrollar aplicaciones móviles híbridas utilizando la integración React de Ionic Framework. También aprendió a usar Capacitor para crear aplicaciones nativas, específicamente para la plataforma Android. Consulte los documentos de la API, ya que hay muchos más componentes de la interfaz de usuario disponibles para usar en aplicaciones Ionic que no exploramos. Puedes encontrar el código en GitHub .
Referencias
- Marco iónico
- API de cómics de Marvel
- Estudio Android
- XCode
(ks, ra, yk, il, og)Explora más en
- Reaccionar
- Androide
- javascript
Deja un comentario