In questo tutorial, inizieremo con una nuova React app e passeremo alla sviluppo nativo mobile utilizzando Capacitor. Opzionalmente, puoi anche aggiungere Konsta UI per un miglioramento dell'interfaccia utente mobile 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 app React e poi incorporando Capacitor per passare nel mondo delle app mobili native. Inoltre, puoi utilizzare optionalmente Konsta UI per migliorare l'interfaccia utente mobile con Tailwind CSS.
Su Capacitor
CapacitorJS è un vero cambiamento! Puoi incorporarlo facilmente in qualsiasi progetto web, e lo stesso lo avvolgerà in una view web 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.
With Capacitor, ottenete un'app mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API sottile e la sua funzionalità ottimizzata rendono facile integrarla nel tuo progetto. Sono sicuro che sarai impressionato dalla facilità con cui puoi ottenere un'app mobile nativa funzionale con Capacitor!
Preparazione dell'app React
Mentre ci sono diversi metodi per avviare le applicazioni React, scegliamo il più semplice in questo tutorial che fornisce un'applicazione React vuota:
npx create-react-app my-appPer creare un'app mobile nativa, abbiamo bisogno di un export del nostro progetto. Quindi, includiamo uno script semplice nel nostro package.json che possiamo utilizzare 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 vedere un nuovo cartella out al root del tuo progetto.
Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.
Aggiunta di Capacitor all'app React
To pacchiare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma in seguito è semplice come eseguire un solo sync comando.
Innanzitutto, possiamo installare il Capacitor CLI come dipendenza di sviluppo, e quindi configurarlo nel 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.
Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:
# 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__CAPGO_KEEP_0__ creerà cartelle per ogni piattaforma nella radice del nostro progetto: Al punto in cui si trova, dovresti essere in grado di osservare nuove ios e
Questi 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 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 comando di build. Attualmente, è inesatto.
Per correggere questo, apri il capacitor.config.json file 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 syncIl primo comando npm run build costruirà semplicemente il tuo progetto React e esporterà la costruzione statica.
Mentre il secondo comando npx cap sync sincronizzerà tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati in un'app.
Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin è ora il momento di eseguire npx cap sync ancora.
Senza accorgersene, sei ora effettivamente fatto, quindi vediamo l'applicazione su un dispositivo!
Costruisci e distribuisci applicazioni native
Per sviluppare applicazioni iOS, hai bisogno di avere Xcode installato, e per le applicazioni Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, devi iscriverti al programma di sviluppatore Apple per iOS e al Google Play Console per Android.
Se sei nuovo nello sviluppo di applicazioni mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:
npx cap open ios
npx cap open androidUna volta impostati i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:
In Xcode, devi configurare il tuo account di firma per distribuire la tua app 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 sviluppatore). Dopo di che, puoi semplicemente premere play per eseguire l'app sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:
Congratulazioni! Hai con successo distribuito la tua app web React su un dispositivo mobile. Ecco un esempio:
Ma aspetta, c'è anche un modo più veloce per farlo 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 sforzo minimo!
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 il tuo indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo eseguendo il seguente comando nel terminale:
ipconfig getifaddr en0Su Windows, esegui:
ipconfigPoi cerca l'indirizzo IPv4.
We possiamo istruire Capacitor per caricare l'app direttamente dal server aggiungendo un'altra voce nel 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 corretto, ho utilizzato il porto predefinito di React in questo esempio.
Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:
npx cap copyLa copy comando è simile a sync, ma copierà solo le modifiche apportate al cartella web e la configurazione, senza aggiornare il progetto nativo.
Ora puoi distribuire nuovamente la tua app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nella tua app React, The app si automaticamente ricaricherà E mostrerà le modifiche!
Tenere a mente Che se si installano nuovi plugin come la camera, è ancora necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati, e non può essere fatto in tempo reale.
Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il port di reazione predefinito per scopi dimostrativi.
Utilizzo dei plugin Capacitor
Prendiamo in considerazione come utilizzare un plugin Capacitor in azione, che abbiamo menzionato alcune volte prima. Per farlo, possiamo installare un plugin abbastanza semplice eseguendo:
npm i @capacitor/shareNon c'è nulla di particolarmente complesso nel Plugin di condivisione, ma porta comunque alla finestra di dialogo di condivisione nativa! Per questo, adesso abbiamo bisogno solo di importare il pacchetto e chiamare la share() funzione dal nostro app. Prendiamo in considerazione di modificare il src/App.js per 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 in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ripubblicare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:
npx cap syncDopo aver premuto il pulsante, potrai assistere alla meravigliosa finestra di condivisione nativa in azione!
Per rendere il pulsante più compatibile con i dispositivi mobili, possiamo aggiungere alcune stampe utilizzando la mia libreria di componenti UI preferita per le app web - React (nessuna battuta intenzionale).
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 raccomando più; è molto hacky integrarlo con React, e non è veramente valente quando già hai tailwindcss.
Se desideri una UI mobile di grande effetto che si adatti allo stiling specifico di iOS e Android, ti consiglio di utilizzare Konsta UI.
È necessario avere tailwind è già installato
Per utilizzarlo, dobbiamo solo installare il pacchetto react package:
npm i konstaInoltre, è necessario 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) Tailwind CSS con alcune varianti e utilità aggiuntive richieste per Konsta UI.
Ora abbiamo bisogno di configurare il componente App principale in modo da poter impostare alcuni parametri globali (come theme).
Dobbiamo avvolgere l'intera app con App nel 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.
Forse apriamo con l'esempio: src/App.js e lo cambiamo 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 aver installato 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!
Vorresti vedere la seguente pagina come risultato:
Conclusioni
Capacitor è un'ottima scelta per costruire 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'app, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.
Se desideri imparare a aggiungere Capgo alla tua app React, prendi un'occhiata all'articolo successivo:
Continua a leggere da Building Mobile Apps con React e Capacitor
If sei stai utilizzando Costruisci App Mobili con React e Capacitor per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native, Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni, Integrazione CI/CD per i dettagli di implementazione in Integrazione CI/CD, e GitHub Integrazione di Azioni per i dettagli di implementazione in GitHub Azioni di integrazione.
