Costruire Applicazioni Mobili con React e Capacitor

In questo tutorial, inizieremo con una nuova app React e passeremo alla sviluppo mobile nativo utilizzando __CAPGO_KEEP_0__. Se lo desiderate, potete anche aggiungere app and transition to native mobile development using Capacitor. Optionally, you can also add React per una UI mobile migliorata con Tailwind CSS.

Capacitor consente di convertire facilmente la tua applicazione web React in un'app mobile nativa senza modifiche significative o l'apprendimento di una nuova abilità come React Native.

Con solo pochi passaggi semplici, la maggior parte delle applicazioni React può essere trasformata in app mobili.

Questo tutorial guiderà attraverso il processo, iniziando con una nuova applicazione React e poi incorporando Capacitor per entrare nel mondo delle app mobili native. Inoltre, puoi utilizzare optionalmente Konsta UI per migliorare la tua UI mobile con Tailwind CSS.

Su Capacitor

CapacitorJS è un vero cambiamento! Puoi incorporarlo facilmente in qualsiasi progetto web, e lo renderà in un'app mobile nativa, generando il progetto Xcode e Android Studio nativo per te. Inoltre, i suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Con Capacitor, ottieni una fantastica app mobile nativa senza alcun setup complesso o curva di apprendimento ripida. La sua API sottile e la sua funzionalità streamlinata rendono facile da integrare nel tuo progetto. Sono sicuro che sarai ammirato dalla facilità con cui puoi ottenere un'app mobile nativa completa con Capacitor!

Preparazione dell'App React

Mentre ci sono vari metodi per avviare le applicazioni React, andiamo per il più semplice in questo tutorial che fornisce una applicazione React vuota:

npx create-react-app my-app

Per creare un'app mobile nativa, abbiamo bisogno di un esportazione di nostro progetto. Quindi, includiamo uno script diretto nel nostro package.json che può essere utilizzato per costruire e esportare il progetto React:

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

Ora puoi eseguire npm run build senza preoccupazioni, e dovresti essere in grado di individuare una cartella fresca all'interno della root del tuo progetto.

Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.

Aggiungere Capacitor al tuo App React

Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma dopo di che è semplice come eseguire un solo sync comando.

Infine, possiamo installare il Capacitor CLI come dipendenza di sviluppo, e quindi impostalo all'interno del nostro progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.

Successivamente, dobbiamo installare il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

Infine, possiamo aggiungere le piattaforme, e Capacitor creerà cartelle per ogni piattaforma nella radice del nostro progetto:

# 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

A questo punto, dovresti essere in grado di osservare nuove cartelle e cartelle all'interno del tuo progetto React.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare Android Studio. Per iOS, è necessario un Mac e dovresti installare Xcode.

Inoltre, dovresti trovare un file capacitor.config.ts nel tuo progetto, che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il webDir, che deve puntare al risultato del tuo comando di build. Attualmente, è inesatto.

Per correggere questo, apri il file capacitor.config.json e aggiorna il webDir:

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

Puoi provare a farlo eseguendo i seguenti comandi:

npm run build
npx cap sync

Il primo comando npm run build costruirà semplicemente il tuo progetto React e esporterà la costruzione statica.

Mentre il secondo comando npx cap sync sincronizzerà tutte le code web nel posto giusto delle piattaforme native affinché possano essere visualizzate in un'app.

Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin è arrivato il momento di eseguire npx cap sync ancora.

Senza accorgersene, sei ora effettivamente finito, quindi vediamo l'app sul dispositivo!

Costruire e distribuire app native

Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire il tuo'applicazione sul negozio di app, devi iscriverti al programma di sviluppo Apple per iOS e al console di Google Play per Android.

Se sei nuovo nello sviluppo mobile nativo, puoi utilizzare i Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i tuoi progetti nativi, distribuire il tuo'applicazione su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire il tuo'applicazione su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, devi impostare il tuo account di firma per distribuire l'applicazione su un dispositivo reale al posto del simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto al programma di sviluppo). Dopo di che, puoi semplicemente premere play per eseguire l'applicazione sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai distribuito con successo la tua'applicazione web React su un dispositivo mobile. Ecco un esempio:

Ma aspetta, c'è anche un modo più veloce di fare questo durante lo sviluppo…

Capacitor Live Reload

Da adesso, sei probabilmente abituato a avere il reload caldo con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con minimo sforzo!

Abilita l'accesso alla tua applicazione ospitata localmente con live reload su il tuo rete avendo l'app Capacitor caricare il contenuto dalla specifica URL.

Il primo passo è capire l'indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo eseguendo il seguente comando nel terminale:

ipconfig getifaddr en0

Su Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Possiamo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce al nostro capacitor.config.ts file:

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;

Assicurati di utilizzare l'indirizzo IP e il port corretti, Ho utilizzato il port di reazione predefinito in questo esempio.

Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:

npx cap copy

Il copy comando è simile a sync, ma copierà solo le modifiche apportate al cartella web e alla configurazione, senza aggiornare il progetto nativo.

Puoi ora distribuire la tua app un'altra volta tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nel tuo app React, l'app si ricaricherà automaticamente e mostrerà le modifiche!

Tieni presente che se installi nuovi plugin come la fotocamera, è ancora necessario un rebuild del tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono cambiati, e non può essere fatto in tempo reale.

Nota che dovresti utilizzare l'indirizzo IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il porto predefinito React per scopi dimostrativi.

Utilizzare Capacitor Plugin

Vediamo come utilizzare un Capacitor plugin in azione, di cui abbiamo parlato prima. Per farlo, possiamo installare un plugin abbastanza semplice eseguendo:

npm i @capacitor/share

Non c'è nulla di particolarmente complesso nel Condividi plugin, ma porta comunque in evidenza il dialogo di condivisione nativo! Per questo, adesso abbiamo bisogno solo di importare il pacchetto e chiamare la share() funzione dal nostro app. Vediamo come modificare il src/App.js a questo:

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;

Come menzionato prima, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

Dopo aver premuto il pulsante, puoi assistere alla bella dialogo di condivisione nativa in azione!

Per rendere il pulsante più amichevole per i dispositivi mobili, possiamo aggiungere alcune impostazioni di stile utilizzando la mia libreria di componenti UI preferita per le app web - React (nessuna intenzione di scherzo).

Aggiungere Konsta UI

Ho lavorato per anni con Ionic per costruire applicazioni cross-platform incredibili, e è stato uno dei migliori scelte per anni. Ma ora non lo consiglio più; è molto hacky integrarlo con React, e non è veramente valsa la pena quando hai già tailwindcss.

Se desideri una UI mobile di grande effetto che si adatti allo stiling specifico di iOS e Android, consiglio Konsta UI.

Hai bisogno di avere tailwind già installato

Per utilizzarlo, dobbiamo solo installare il pacchetto react package:

npm i konsta

Inoltre, hai bisogno di modificare il tuo tailwind.config.js file:

// 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 estenderà la configurazione di default (o la tua personalizzata) di Tailwind CSS con alcune varianti e utilità di aiuto richieste per Konsta UI.

Ora abbiamo bisogno di configurare il componente principale App per poter impostare alcuni parametri globali (come theme).

abbiamo bisogno di avvolgere l'intera app con App in il 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;

Pagina di Esempio

Ora che tutto è stato configurato, possiamo utilizzare i componenti React di Konsta UI nel nostro app React.

Per esempio, apriamo src/App.js e cambialo nel seguente modo:

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

Se il live reload è fuori sincronia dopo l'installazione di tutti i componenti necessari, prova a riavviare tutto. Una volta fatto, dovresti vedere un'app mobile con un aspetto nativo, costruita con React e Capacitor!

Dovresti vedere la seguente pagina come risultato:

Conclusione

Capacitor è un'ottima scelta per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.

E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, garantendo che gli utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desiderate imparare a aggiungere Capgo al vostro'app React, guardate il prossimo articolo: