Desarrollo de aplicaciones móviles con React.js y Capacitor

Esta guía te guiará a través de la creación de una aplicación móvil utilizando React, Capacitor, y Konsta UI. Al final, sabrás cómo transformar una aplicación web de React.js en una aplicación móvil nativa con Capacitor, y implementar una interfaz de usuario nativa utilizando Konsta UI.

Capacitor permite la fácil transformación de tu aplicación web de React.js en una aplicación móvil nativa, sin necesidad de realizar cambios sustanciales o aprender nuevas estrategias como React Native.

El proceso implica unos pocos pasos simples, y antes de que lo sepas, tu aplicación de React.js será una aplicación móvil funcional. Así que mantente aquí mientras te guiamos en este viaje.

Capacitor Overview

CapacitorJS es un cambio de juego. Puede integrarse de manera fluida con cualquier proyecto web y envolver tu aplicación en una vista web nativa mientras genera el proyecto de Xcode y Android Studio nativo. Además, a través de sus plugins, puedes acceder a características de dispositivo nativas como la cámara a través de un puente de JS.

Capacitor ofrece una forma directa de crear una aplicación móvil nativa sin problemas ni curva de aprendizaje pronunciada. Su simple API y funcionalidad escalonada lo hacen fácil de incorporar en tu proyecto.

Configuración de tu aplicación de React.js

Vamos a utilizar el método más sencillo para iniciar una aplicación de React. Utilizaremos el administrador de paquetes npm para crear una nueva aplicación de React:

npx create-react-app my-app

Para transformar nuestro proyecto en una aplicación móvil nativa, un export de nuestra aplicación es necesario.

Volveremos a esto en un momento. Primero, comprendamos cómo integrar Capacitor en nuestra aplicación de React.

Integración de Capacitor en su aplicación de React.js

Los pasos de configuración inicial pueden ser un poco detallados, pero después de eso, actualizar su wrapper de aplicación nativa se vuelve tan simple como ejecutar un sync comando.

Primero, instalaremos el Capacitor CLI como dependencia de desarrollo y lo configuraremos dentro de nuestro proyecto. Durante la configuración, acepte los valores predeterminados para el nombre y el ID de paquete presionando “enter”.

Enseguida, instalaremos el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, agregaremos las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de nuestro proyecto:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

La iOS y android Los directorios ahora están presentes en tu proyecto de React.js.

Para acceder al proyecto de Android más tarde, instala Android StudioPara iOS, necesitas un Mac y debes instalar Xcode.

A continuación, actualiza el webDir en tu capacitor.config.json archivo como se muestra a continuación:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

Ejecuta el comando de compilación y sincroniza tu proyecto con Capacitor:

npm run build
npx cap sync

El npm run build El comando construirá su proyecto de React.js, mientras que npx cap sync Alineará el web code en los lugares precisos de las plataformas nativas para que puedan ejecutarse en una aplicación.

Ahora, con un poco de suerte y sin errores, su aplicación de React.js debería estar lista para su lanzamiento en un dispositivo.

Desarrollando y Desplegando Sus Aplicaciones Nativas

Desarrollando aplicaciones para iOS requiere Xcodey aplicaciones de Android necesitan Estudio de AndroidSi planeas distribuir tu aplicación en la tienda de aplicaciones, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

El Capacitor CLI simplifica el proceso de abrir proyectos nativos.

npx cap open ios
npx cap open android

Una vez que se hayan configurado los proyectos nativos, el proceso de desplegar la aplicación en un dispositivo conectado es sencillo.

Para Android Studio, espere a que todo se cargue y luego despliegue su aplicación a un dispositivo conectado.

Para Xcode, establezca su cuenta de firma para desplegar su aplicación en un dispositivo real en lugar de solo en el simulador. Una vez hecho esto, simplemente presione play para ejecutar la aplicación en su dispositivo conectado, que puede elegir en la parte superior.

Si todo ha ido bien, habrás convertido tu aplicación web de React.js en una aplicación móvil nativa!

Capacitor Live Reload

Los marcos de desarrollo modernos suelen venir con hot reload, y afortunadamente, puedes tener lo mismo con Capacitor pero en tu dispositivo móvil!

Puedes hacer que tu aplicación alojada localmente sea accesible con live reload en tu red al tener la aplicación Capacitor cargar el contenido desde una URL específica.

Primero, determina tu dirección IP local. En un Mac, puedes hacerlo ejecutando ipconfig getifaddr en0 en la terminal. En Windows, ejecuta ipconfig y busca la dirección IPv4.

Después de esto, instruye a Capacitor para que cargue la aplicación directamente desde el servidor agregando otro parámetro a tu capacitor.config.ts archivo:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Asegúrese de utilizar el IP y puerto precisos. Ejecute npx cap copy para aplicar estos cambios a nuestro proyecto nativo.

Al desplegar su aplicación una vez más a través de Android Studio o Xcode, cualquier cambio en su aplicación de React se rellenará automáticamente y se mostrará en su aplicación.

Tenga en cuenta que si se instalan nuevos plugins, como la cámara, es necesario realizar una reconstrucción de su proyecto nativo. Esto se debe a que los archivos nativos habrán cambiado y no pueden ser actualizados en tiempo real.

Usando Capacitor Plugins

Vamos a echar un vistazo rápido a cómo utilizar un Capacitor plugin. Vamos a instalar uno simple, el plugin de compartir, que muestra el diálogo de compartir nativo:

npm i @capacitor/share

Para utilizarlo, importe el paquete y llame a la función correspondiente desde nuestra aplicación. Considere el share() App.js Después de instalar un nuevo plugin, recuerde sincronizar su proyecto de React nuevamente utilizando:

import { Share } from '@capacitor/share';

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

__CAPGO_KEEP_0__ npx cap sync.

Implementando Konsta UI: Una interfaz de usuario móvil más atractiva

Para una experiencia de interfaz de usuario móvil más atractiva, usaremos Konsta UI. Proporciona estilos específicos para iOS y Android, y es fácil de trabajar con.

Para usar Konsta UI, instale el paquete de React:

npm i konsta

Modifique su archivo como se muestra a continuación: tailwind.config.js Esto complementará su configuración actual de Tailwind CSS con variantes y utilidades adicionales necesarias para Konsta UI.

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Ahora, configure el componente principal de la aplicación para establecer parámetros globales como:

Envuelva la aplicación principal con App en el themeVamos a usar componentes de Konsta UI React en nuestras páginas de React.js. Abra src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

y modifíquelo para: src/App.js Si todo se ha hecho correctamente, debería ver una integración sin esfuerzo entre React y Konsta UI para dar a su aplicación móvil un aspecto nativo.

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
} from 'konsta/react';

export default function MyApp() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

Conclusión

protectedTokens

Capacitor ofrece una forma sencilla de crear aplicaciones nativas basadas en un proyecto web existente, proporcionando una forma sencilla de compartir code y tener una interfaz de usuario consistente.

Gracias a tecnologías como Capacitor, crear aplicaciones móviles a partir de aplicaciones web de React.js nunca ha sido más fácil. Lleva tus habilidades de desarrollo web a un nivel superior creando impresionantes aplicaciones móviles. ¡Disfruta codificando!

Para obtener más información sobre cómo acelerar tu proceso de desarrollo de aplicaciones, regístrate para una cuenta gratuita hoy.

Crear aplicaciones móviles con React.js puro y Capacitor