Costruire Applicazioni Mobili con React.js e Capacitor

Questa guida ti guiderà nella creazione di un'applicazione mobile utilizzando React, Capacitor, e Konsta UI. Alla fine, saprai come trasformare un'app web React.js in un'applicazione mobile nativa con Capacitor, e implementare un'interfaccia utente nativa utilizzando Konsta UI.

Capacitor consente la facile trasformazione della tua app web React.js in un'applicazione mobile nativa, richiedendo nessuna sostanziale alterazione o apprendimento di nuove strategie come React Native.

Il processo coinvolge pochi passaggi semplici, e prima di rendersene conto, la tua app React.js sarà una completa applicazione mobile. Quindi, rimani con noi mentre ti guideremo in questo viaggio.

Capacitor Overview

CapacitorJS è un vero cambiamento. Può integrarsi facilmente con qualsiasi progetto web e avvolgere la tua app in una view web nativa mentre genera il progetto Xcode e Android Studio nativo. Inoltre, attraverso i suoi plugin, puoi accedere alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Capacitor offre una via d'accesso diretta alla creazione di un'applicazione mobile nativa senza alcun problema o curva di apprendimento ripida. La sua semplice API e funzionalità streamlinata rendono facile l'incorporazione nel tuo progetto.

Configurazione dell'App React.js

Vediamo il metodo più semplice per avviare un'applicazione React. Utilizzeremo il package manager npm per creare una nuova app React:

npx create-react-app my-app

Per trasformare il nostro progetto in un'applicazione mobile nativa, un export di nostra app è richiesto.

Ritorneremo a questo momento. In primo luogo, capiamo come integrare Capacitor nel nostro app React.

Integrazione di Capacitor nella tua App React.js

I passaggi di configurazione iniziali potrebbero essere un po' dettagliati, ma dopo di che, aggiornare il tuo wrapper di app nativa diventa semplice come eseguire un sync comando.

In primo luogo, installeremo il Capacitor CLI come dipendenza di sviluppo e lo configureremo all'interno del nostro progetto. Durante la configurazione, accetta i valori predefiniti per nome e ID bundle premendo “invio.”

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

Infine, aggiungeremo 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

La ios e android Ora sono presenti i directory nel tuo progetto React.js.

Per accedere al progetto Android in seguito, installa Android StudioPer iOS, hai bisogno di un Mac e dovresti installare Xcode.

Aggiorna poi il webDir nel tuo file capacitor.config.json Come mostrato di seguito:

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

Esegui il comando di build e sincronizza il tuo progetto con Capacitor:

npm run build
npx cap sync

The npm run build il comando costruirà il tuo progetto React.js, mentre npx cap sync allineerà il web code nei posti precisi delle piattaforme native affinché possano essere eseguiti in un'app.

Ora, con un po' di fortuna e nessun errore, il tuo app React.js dovrebbe essere pronta per il lancio su un dispositivo!

Costruire e Distribuire le Tue App Native

Sviluppare app iOS richiede Xcode, mentre le app Android hanno bisogno di Android Studio. Se hai in programma di distribuire la tua app sullo store delle app, devi iscriverti al Apple Developer Program per iOS e al Google Play Console per Android.

Il Capacitor CLI semplifica il processo di apertura di entrambi i progetti native:

npx cap open ios
npx cap open android

Una volta che i progetti native sono configurati, il processo di distribuzione dell'app su un dispositivo connesso è un processo lineare.

For Android Studio, attendi che tutto sia caricato e poi distribuisci l'app sul dispositivo connesso.

For Xcode, stabilisci il tuo account di firma per distribuire l'app sul dispositivo reale anziché solo sul simulatore. Dopo aver fatto ciò, semplicemente premi play per eseguire l'app sul dispositivo connesso, che puoi scegliere in alto.

Se tutto è andato bene, avrai convertito la tua applicazione web React.js in un'applicazione mobile nativa!

Capacitor Live Reload

Il framework di sviluppo moderno solitamente include il ricollegamento in tempo reale, e fortunatamente, puoi avere lo stesso con Capacitor ma sul tuo dispositivo mobile!

Puoi rendere la tua applicazione ospitata localmente accessibile con il ricollegamento in tempo reale sulla tua rete avendo l'app Capacitor caricare il contenuto da una specifica URL.

Prima, determina l'indirizzo IP locale. Su un Mac, puoi farlo eseguendo ipconfig getifaddr en0 nel terminale. Su Windows, esegui ipconfig e cerca l'indirizzo IPv4.

Dopo di ciò, istruisci Capacitor a caricare l'app direttamente dal server aggiungendo un altro parametro al tuo capacitor.config.ts file:

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;

Assicurati di utilizzare l'indirizzo IP e il porto corretti. Esegui npx cap copy per applicare queste modifiche al nostro progetto nativo.

Dopo aver distribuito nuovamente il tuo app tramite Android Studio o Xcode, qualsiasi modifica nel tuo app React verrà automaticamente ricaricata e visualizzata nel tuo app!

Tieni presente che se vengono installati nuovi plugin, come la camera, è necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati e non possono essere aggiornati in tempo reale.

Utilizzo dei Capacitor Plugins

Vediamo velocemente come utilizzare un Capacitor plugin. Installiamo uno semplice, il Plugin di condivisione, che sollecita il dialogo di condivisione nativo:

npm i @capacitor/share

Per utilizzarlo, importa il pacchetto e chiama la rispettiva share() funzione dal nostro app. Considera il App.js:

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;

Dopo l'installazione di un nuovo plugin, ricorda di sincronizzare nuovamente il tuo progetto React utilizzando npx cap sync.

Implementazione di Konsta UI: una UI mobile più attraente

Per una migliore esperienza di UI mobile, utilizzeremo Konsta UI. Fornisce stili specifici per iOS e Android e è facile da utilizzare.

Per utilizzare Konsta UI, installa il pacchetto React:

npm i konsta

Modifica il tuo tailwind.config.js __CAPGO_KEEP_0__

// 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 Konsta UI completerà la tua configurazione Tailwind CSS attuale con varianti e utilità aggiuntive necessarie per Konsta UI.

Ora, configura il componente App primario per impostare i parametri globali come themeAvvolgi l'app principale con App nel 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')
);

Utilizzeremo i componenti React di Konsta UI nelle nostre pagine React.js. Apri src/App.js e modificalo per:

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

Se tutto è stato fatto correttamente, dovresti vedere un'integrazione senza sforzo tra React e Konsta UI per dare alla tua app mobile un aspetto nativo.

Conclusioni

Capacitor offre una via senza intoppi per creare applicazioni native basate su un progetto web esistente, fornendo un modo semplice per condividere code e avere una UI coerente.

Grazie a tecnologie come Capacitor, costruire applicazioni mobili da React.js web app è mai stato più facile. Porta le tue abilità di sviluppatore web al livello successivo creando applicazioni native mobili impressionanti. Buon codice!

Per saperne di più su come puoi accelerare il tuo processo di sviluppo dell'applicazione, iscrivi il tuo account gratuito oggi.

Creazione di Applicazioni Mobili con React.js puro e Capacitor