Questa guida ti guiderà attraverso la 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 che tu te ne accorga, la tua app React.js sarà un'applicazione mobile funzionante. 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 un view web nativo mentre genera il progetto Xcode e Android Studio nativo. Inoltre, attraverso i suoi plugin, puoi accedere alle funzionalità di dispositivo nativo come la fotocamera tramite un ponte JS.
Capacitor offre un modo semplice per creare un'applicazione mobile nativa senza alcun problema o curva di apprendimento ripida. La sua semplice API e funzionalità streamlinata rendono facile incorporarla nel tuo progetto.
Configurazione dell'app React.js
Vediamo il metodo più semplice per avviare un'app React. Utilizzeremo il package manager npm per creare una nuova app React:
npx create-react-app my-appPer trasformare il nostro progetto in un'app mobile nativa, è richiesta una export della nostra app.
Ritorneremo a questo momento. Prima, capiamo come integrare Capacitor nella nostra app React.
Integrazione di Capacitor nel tuo App React.js
I passaggi di configurazione iniziali potrebbero essere un po' dettagliati, ma dopo di essi, aggiornare il wrapper dell'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 androidIl directory ios e il directory android sono ora presenti nel tuo progetto React.js.
Per accedere al progetto Android in seguito, installa Studio AndroidPer iOS, hai bisogno di un Mac e dovresti installare Xcode.
Successivamente, aggiorna il webDir nel tuo file capacitor.config.json Esegui il comando di compilazione e sincronizza il tuo progetto con __CAPGO_KEEP_0__:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "build",
"bundledWebRuntime": false
}Run the build command and sync your project with Capacitor:
npm run build
npx cap synccomando compilerà il tuo progetto React.js, mentre npm run build allineerà il web __CAPGO_KEEP_0__ nei posti precisi delle piattaforme native affinché possano essere eseguiti in un'app. npx cap sync will align the web code in the accurate places of the native platforms so they can be executed in an app.
Ora, con un po' di fortuna e nessun errore, il tuo app React.js dovrebbe essere pronta per il lancio su un dispositivo!
Sviluppo e distribuzione delle tue App native
Lo sviluppo di app iOS richiede Xcode, mentre le app Android hanno bisogno di Android Studio. Se hai in programma di distribuire la tua app sullo store, 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 nativi:
npx cap open ios
npx cap open androidUna volta che i progetti nativi sono configurati, il processo di distribuzione dell'app su un dispositivo connesso è piuttosto lineare.
Per Android Studio, attendi che tutto si carichi e poi distribuisci l'app su un dispositivo connesso.
Per Xcode, stabilisci il tuo account di firma per distribuire l'app su un dispositivo reale invece che solo sul simulatore. Dopo aver fatto ciò, basta cliccare su 'play' per eseguire l'app sul tuo dispositivo connesso, che puoi scegliere in alto.
Se tutto è andato bene, avrai convertito la tua app web React.js in un'applicazione mobile nativa!
Capacitor Live Reload
I framework di sviluppo moderni vengono spesso forniti con il riavvio caldo, e fortunatamente, puoi avere lo stesso con Capacitor ma sul tuo dispositivo mobile!
Puoi rendere il tuo'applicazione ospitata localmente accessibile con il riavvio live sul tuo rete restando con l'app Capacitor a caricare il contenuto da una specifica URL.
In primo luogo, determina l'indirizzo IP locale. Su Mac, puoi farlo eseguendo ipconfig getifaddr en0 nel terminale. Su Windows, esegui ipconfig e cerca l'indirizzo IPv4.
Dopo di che, 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 port corretti. Esegui npx cap copy per applicare queste modifiche al nostro progetto nativo.
Una volta distribuito il tuo'applicazione un'altra volta attraverso Android Studio o Xcode, qualsiasi modifica nel tuo'app React verrà automaticamente ricaricata e visualizzata sul tuo'app!
Mantenere a mente che se vengono installati nuovi plugin, come la camera, è necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi saranno stati modificati e non possono essere aggiornati in tempo reale.
Utilizzare Capacitor Plugins
Ecco un esempio di come utilizzare un Capacitor plugin. Ecco un esempio semplice, il plugin di condivisione, che sollecita il dialogo di condivisione nativo:
npm i @capacitor/sharePer utilizzarlo, importa il pacchetto e chiama la rispettiva share() funzione dal tuo app. Considera il file 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 un'esperienza di UI mobile più attraente, utilizzeremo Konsta UI. Fornisce stili specifici per iOS e Android e è facile da utilizzare.
Per utilizzare Konsta UI, installa il pacchetto React:
npm i konstaModifica il tuo tailwind.config.js file come segue:
// 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 supporrerà la tua configurazione attuale di Tailwind CSS con varianti e utilità aggiuntive necessarie per Konsta UI.
Ora, configura il componente App principale 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')
);Utilizziamo i componenti React di Konsta UI nelle nostre pagine React.js. Apri src/App.js e modificalo in:
// 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 un mezzo senza soluzione di continuità per costruire app native basate su un progetto web esistente, fornendo un modo semplice per condividere code e avere un'interfaccia utente coerente.
Grazie a tecnologie come Capacitor, costruire applicazioni mobili da progetti web React.js è mai stato più facile. Porta le tue abilità di sviluppatore web al livello successivo creando app mobili native impressionanti. Buon codice!
Per ulteriori informazioni su come puoi accelerare il tuo processo di sviluppo dell'app, registrati gratuitamente oggi.
Continua da Building Mobile Apps con React.js puro e Capacitor
Se stai utilizzando Building Mobile Apps con React.js puro e Capacitor per pianificare il comportamento di media e interfaccia nativa, connettilo con Utilizza @capgo/capacitor-live-attività per la capacità nativa in Utilizza @capgo/capacitor-live-attività, @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività, Utilizza @capgo/capacitor-video-player per la capacità nativa in Utilizza @capgo/capacitor-video-player, @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzando @capgo/capacitor-navigazione-nativa.
