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

Este tutorial 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 facilita la transformación fácil de tu aplicación web de React.js en una aplicación móvil nativa, sin necesidad de alteraciones sustanciales o aprendizaje de 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 juego de cambio. Puede integrarse de manera fluida con cualquier proyecto web y envolver su aplicación en una vista web nativa mientras genera el proyecto Xcode y Android Studio nativo. Además, a través de sus plugins, puede acceder a características de dispositivos nativos como la cámara a través de un puente JS.

Capacitor ofrece una forma sencilla de crear una aplicación móvil nativa sin ningún problema o curva de aprendizaje pronunciada. Su API y funcionalidad simplificada lo hacen fácil de incorporar en su proyecto.

Configuración de la Aplicación de React.js

Vamos a elegir el método más simple para iniciar una aplicación de React. Usaremos el 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, es necesario exportar nuestra aplicación. Volveremos a esto en un momento. Primero, debemos entender cómo integrar __CAPGO_KEEP_0__ en nuestra aplicación de React.

Integración de Capacitor en la Aplicación de React.js

Integrating Capacitor into Your React.js App

comando. sync Primero, instalaremos el __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 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.”

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

A continuación, 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

El ios y android directorio ahora están presentes en tu proyecto de React.js.

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

Actualiza directorioWeb en su capacitor.config.json 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

La npm run build Este comando compilará tu proyecto de React.js, mientras que npx cap sync se encargará de alinear el web code en los lugares precisos de las plataformas nativas para que puedan ejecutarse en una aplicación.

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

Construyendo y Desplegando Tus Aplicaciones Nativas

Desarrollar aplicaciones iOS requiere Xcodey aplicaciones Android necesitan Android StudioSi planea distribuir su aplicación en la tienda de aplicaciones, debe inscribirse 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 ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que estén configurados los proyectos nativos, el despliegue de la aplicación en un dispositivo conectado es un proceso sencillo.

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

Para Xcode, establezca su cuenta de firma para desplegar la aplicación en un dispositivo real en lugar de solo el simulador. Después de hacerlo, 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á convertido su 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, puede tener lo mismo con Capacitor pero en su dispositivo móvil!

Puede hacer que su aplicación localmente alojada sea accesible con live reload en su 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 a cargar 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úrate de utilizar la IP y el puerto precisos. Ejecuta npx cap copy para aplicar estos cambios a nuestro proyecto nativo.

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

Ten en cuenta que si se instalan nuevos plugins, como la cámara, es necesario realizar una reconstrucción de tu 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 plugin de Capacitor. Vamos a instalar uno simple, el plugin de compartir, que despliega el diálogo de compartir nativo:

npm i @capacitor/share

Para utilizarlo, importa el paquete y llama a la función correspondiente desde nuestra aplicación. Considera el share() App.js Después de instalar un nuevo plugin, recuerda sincronizar tu 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;

Implementación de Konsta UI: Una interfaz de usuario móvil mejorada npx cap sync.

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

Para utilizar Konsta UI, instala el paquete de React:

Modifica tu

npm i konsta

archivo como se muestra a continuación: tailwind.config.js suplementará tu 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, configura el componente principal de la aplicación para establecer parámetros globales como

los theme. Envuelve la aplicación principal con App en el 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')
);

Vamos a utilizar componentes de Konsta UI React en nuestras páginas de React.js. Abre src/App.js y modifícalo a:

// 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>
  );
}

Si todo se ha hecho correctamente, deberías ver una integración sin esfuerzo entre React y Konsta UI para dar a tu aplicación móvil un aspecto nativo.

Conclusión

Capacitor ofrece un medio sin fisuras para 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 al siguiente nivel creando impresionantes aplicaciones móviles nativas. ¡Disfruta codificando!

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

Desarrollo de Aplicaciones Móviles con React.js Puro y Capacitor