Crear aplicaciones móviles con React y Capacitor

En este tutorial, comenzaremos con una nueva React aplicación y transitaremos a desarrollo móvil nativo utilizando Capacitor. Opcionalmente, también puede agregar Konsta UI

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

__CAPGO_KEEP_0__ le permite convertir fácilmente su aplicación web de React en una aplicación móvil nativa sin modificaciones significativas o aprender una nueva habilidad como React Native.

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you can optionally use Este tutorial le guiará a través del proceso, comenzando con una nueva aplicación de React y luego incorporando __CAPGO_KEEP_0__ para moverse al reino de las aplicaciones móviles nativas. Además, puede utilizar opcionalmente Konsta UI

About Capacitor

Sobre __CAPGO_KEEP_0__","CapacitorJS es un cambio de juego! Puede incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto de Xcode y Android Studio nativo para usted. Además, sus plugins proporcionan acceso a características de dispositivo nativo como la cámara a través de un puente de JS.

Con Capacitor, obtienes una aplicación móvil nativa fantástica sin ningún setup complicado o curva de aprendizaje empinada. Su API delgado y funcionalidad afinada lo hacen un placer integrarlo en tu proyecto. Confía en mí, te sorprenderá lo fácil que es lograr una aplicación nativa funcional completa con Capacitor!

Preparando tu aplicación de React

Mientras hay varias formas de iniciar aplicaciones de React, vamos a elegir la más sencilla en este tutorial que proporciona una aplicación de React en blanco:

npx create-react-app my-app

Para crear una aplicación móvil nativa, necesitamos un export de nuestro proyecto. Por lo tanto, incluyamos un script directo en nuestro package.json que se puede utilizar para compilar y exportar el proyecto de React:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Puedes ejecutar npm run build sin preocupaciones, y deberías poder ver un nuevo directorio de salida en la raíz de tu proyecto.

Este directorio se utilizará por Capacitor más adelante, pero por ahora debemos configurarlo correctamente.

Agregar Capacitor a tu aplicación de React

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente, pero posteriormente es tan simple como ejecutar un solo sync command.

Primero, podemos instalar el Capacitor CLI como una dependencia de desarrollo, y luego configurarlo dentro de nuestro proyecto. Durante la configuración, puedes pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de paquete.

A continuación, necesitamos instalar el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, podemos agregar 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

En este punto, deberías poder observar nuevas ios y android carpetas en tu proyecto de React.

¡Estos son proyectos nativos reales!

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

Además, debes encontrar un archivo capacitor.config.ts que contiene algunas configuraciones fundamentales Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDir, que debe apuntar al resultado de tu comando de compilación. Actualmente, es inexacto.

Para corregir esto, abre el capacitor.config.json archivo y actualizar el webDir:

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

Puedes probarlo ejecutando los siguientes comandos:

npm run build
npx cap sync

El primer comando npm run build solo construirá tu proyecto de React y exportará la construcción estática.

Mientras que el segundo comando npx cap sync sincronizará todos los archivos web code en los lugares correctos de las plataformas nativas para que puedan ser mostrados en una aplicación.

Además, el comando de sincronización podría actualizar las plataformas nativas e instalar plugins, por lo que cuando instales un nuevo Capacitor plugins es hora de ejecutar npx cap sync de nuevo.

Sin darte cuenta, ya estás hecho, así que veamos la aplicación en un dispositivo!

Desarrolla y despliega aplicaciones nativas

Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones Android, necesitas tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, necesitas inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Si eres nuevo en el desarrollo de aplicaciones móviles nativas, puedes utilizar el Capacitor CLI para abrir fácilmente ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:

En Xcode, necesitas configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar de solo en el simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero de nuevo, necesitas estar inscrito en el Programa de Desarrolladores). Después de eso, solo necesitas pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:

¡Felicidades! Has desplegado con éxito tu aplicación web de React en un dispositivo móvil. Aquí tienes un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Live Reload

Hasta ahora, probablemente estás acostumbrado a tener hot reload con todas las marcos modernas, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilite el acceso a su aplicación localmente alojada con live reload en su red teniendo la aplicación Capacitor cargar el contenido desde la URL específica.

El primer paso es determinar su dirección IP local. Si está utilizando un Mac, puede encontrar esto ejecutando el siguiente comando en la terminal:

ipconfig getifaddr en0

En Windows, ejecuta :

ipconfig

Luego busque la dirección IPv4.

We can instruct Capacitor to load the app directly from the server by adding another entry to our capacitor.config.ts archivo:

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

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

export default config;

Asegúrese de utilizar el IP y puerto correctosEn este ejemplo, he utilizado el puerto de React por defecto.

Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

npx cap copy

El copy comando es similar a sync, pero solo copiará los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.

Puede desplegar su aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambia algo en su aplicación de React, la aplicación se recargará automáticamente y mostrará los cambios!

Ten en cuenta que si instala nuevos plugins como la cámara, todavía requiere una reconstrucción de tu proyecto nativo. Esto se debe a que los archivos nativos se han modificado, y no se puede hacer en tiempo real.

Ten en cuenta que debes utilizar la IP y el puerto correctos en tu configuración. El bloque code anterior muestra el puerto de demostración de React por defecto.

Usando Capacitor Plugins

Vamos a ver cómo utilizar un plugin Capacitor en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:

npm i @capacitor/share

No hay nada sofisticado en el plugin de Compartir, pero de todos modos muestra el diálogo de compartir nativo. Para esto, ahora solo necesitamos importar el paquete y llamar al share() función desde nuestra aplicación. Vamos a cambiar el src/App.js a esto:

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

function App() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  };

  return (
    <div>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

Como se mencionó anteriormente, cuando instalamos nuevos plugins, debemos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecute el siguiente comando:

npx cap sync

Después de pulsar el botón, puede ver el diálogo de compartir nativo en acción!

Para hacer que el botón tenga un aspecto más móvil, podemos agregar algunos estilos utilizando mi biblioteca de componentes de interfaz de usuario favorita para aplicaciones web - React (sin intención de broma).

Agregar Konsta UI

He trabajado años con Ionic para construir aplicaciones de plataforma cruzada impresionantes, y fue una de las mejores opciones durante años. Pero ahora ya no lo recomiendo; es muy hackeable integrarlo con React, y no vale la pena cuando ya tienes tailwindcss.

Si desea una interfaz de usuario móvil que se adapte a estilos específicos de iOS y Android, recomiendo Konsta UI.

Necesita tener tailwind ya está instalado

Para utilizarlo, solo necesitamos instalar el paquete react package:

npm i konsta

Además, necesitas modificar tu tailwind.config.js archivo:

// 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 extenderá la configuración predeterminada (o la tuya personalizada) de Tailwind CSS con algunas variantes y utilidades adicionales requeridas para Konsta UI.

Ahora necesitamos configurar el componente principal para poder establecer algunos parámetros globales (como Necesitamos envolver toda la aplicación con theme).

en el App Página de Ejemplo src/App.js:

import { App } from 'konsta/react';
import './App.css';

function MyApp({ Component, pageProps }) {
  return (
    // Wrap our app with App component
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

Ahora que todo está configurado, podemos utilizar componentes de Konsta UI React en nuestra aplicación de React.

__CAPGO_KEEP_0__

For ejemplo, abramos src/App.js y cambiémoslo a lo siguiente:

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

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

      <Block strong>
        <p>
          Here is your React & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

export default App;

Si el recarga en vivo está fuera de sincronía después de instalar todos los componentes necesarios, intenta reiniciar todo. Una vez que lo hayas hecho, deberías ver una aplicación móvil con un aspecto nativo algo similar, construida con React y Capacitor!

Deberías ver la siguiente página como resultado:

Conclusión

Capacitor es una excelente opción para construir aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir code y mantener una interfaz de usuario consistente.

Y con la adición de Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

Si deseas aprender a agregar Capgo a tu aplicación de React, mira el siguiente artículo:

Sigue adelante desde Construyendo aplicaciones móviles con React y Capacitor

Si estás utilizando Desarrollo de aplicaciones móviles con React y Capacitor para planificar la automatización de CI/CD, conecta con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Compilaciones nativas para el flujo de trabajo del producto en Capgo Compilaciones nativas, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración de CI/CD para el detalle de implementación en Integración de CI/CD, y GitHub Integración de acciones para los detalles de implementación en GitHub Acciones de Integración.