In diesem Tutorial beginnen wir mit einer neuen React -Anwendung und wechseln zu nativen mobilen Entwicklungen mit Capacitor. Optional können Sie auch Konsta UI zur Verbesserung der mobilen Benutzeroberfläche mit Tailwind CSS hinzufügen.
Capacitor ermöglicht Ihnen, Ihre React-Webanwendung leicht in eine native mobile App umzuwandeln, ohne signifikante Änderungen oder das Erlernen einer neuen Fähigkeit wie React Native.
Mit nur wenigen einfachen Schritten können die meisten React-Anwendungen in mobile Apps umgewandelt werden.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen React-Anwendung und dann die Einbindung von Capacitor zur Umstellung in die Welt der nativen mobilen Apps. Darüber hinaus können Sie optional Konsta UI zur Verbesserung Ihrer mobilen Benutzeroberfläche mit Tailwind CSS verwenden.
Über Capacitor
CapacitorJS ist ein Game-Changer! Sie können es leicht in jede Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, wodurch die native Xcode- und Android Studio-Projekt generiert werden. Zusätzlich bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.
With Capacitor, erhalten Sie eine fantastische native mobile App ohne komplizierte Einrichtung oder steile Lernkurve. Sein schlanker API und gestreamlinertes Funktionsdesign machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!
Vorbereitung Ihrer React-App
Während es verschiedene Methoden gibt, um React-Anwendungen zu initiieren, gehen wir in diesem Tutorial für die einfachste davon, die eine leere React-Anwendung bietet:
npx create-react-app my-appUm eine native mobile App zu erstellen, benötigen wir ein export unseres Projekts. Daher fügen wir ein einfaches Skript in unserem package.json ein, das verwendet werden kann, um das React-Projekt zu bauen und zu exportieren:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}Sie können jetzt ohne Sorgen npm run build ausführen und sollten ein frisches Ordner in der Wurzel Ihres Projekts erkennen.
Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.
Capacitor zu Ihrer React-App hinzufügen
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Befehls.
Zunächst können wir das Capacitor CLI als Entwicklungszusammenhang installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID zu akzeptieren.
Als Nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.
Schließlich können wir die Plattformen hinzufügen und Capacitor wird Ordner für jede Plattform an der Wurzel unseres Projekts erstellen:
# 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 androidBis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem React-Projekt beobachten können.
Das sind echte native Projekte!
Um auf das Android-Projekt später zuzugreifen, müssen Sie Android Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. Zusätzlich sollten Sie ein capacitor.config.ts -File in Ihrem Projekt finden, das einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist die webDir, die auf das Ergebnis Ihres Build-Befehls zeigen muss. Derzeit ist sie ungenau.
Um dies zu korrigieren, öffnen Sie das capacitor.config.json Datei und aktualisieren Sie die webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "out",
"bundledWebRuntime": false
}Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:
npm run build
npx cap syncDer erste Befehl npm run build wird einfach Ihr React-Projekt erstellen und den statischen Build exportieren.
Während der zweite Befehl npx cap sync synchronisiert alle Web code in die richtigen Orte der nativen Plattformen, damit sie in einer App angezeigt werden können.
Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie ein neues Capacitor-Plugin installieren es Zeit ist, npx cap sync wieder zu laufen.
Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir das App auf einem Gerät!
native Apps entwickeln und bereitstellen
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich bei iOS im Apple Developer Programm und bei Android im Google Play Console anmelden.
Wenn Sie neu bei der Entwicklung von nativen mobilen Apps sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidSobald Sie Ihre native Projekte eingerichtet haben, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihren Signierungsaccount einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie sich im Developer Programm angemeldet zu haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:
Herzlichen Glückwunsch! Sie haben erfolgreich Ihre React-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:
Aber halt, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capacitor Live Reload
Bis jetzt bist du wahrscheinlich an heißen Neuladen mit allen modernen Frameworks gewöhnt und die gute Nachricht ist, dass du die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen erhalten kannst!
Aktiviere den Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk indem du die Capacitor-App laden lässt, die Inhalte von der spezifischen URL.
Der erste Schritt besteht darin, deine lokale IP-Adresse zu ermitteln. Wenn du einen Mac verwendest, kannst du dies herausfinden, indem du folgenden Befehl in der Terminal-Anwendung ausführst:
ipconfig getifaddr en0Bei Windows ausführen:
ipconfigDann such nach der IPv4-Adresse.
Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir ein weiteres Eintrag in unsere capacitor.config.ts datei:
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;Stellen Sie sicher, dass Sie den richtigen IP-Adresse und Port verwenden, ich habe in diesem Beispiel die Standard-React-Port verwendet.
Nun können wir diese Änderungen anwenden, indem wir sie in unsere native Projekt übernehmen:
npx cap copyDer copy Befehl ähnelt sich sync, aber er wird nur die Änderungen in der Web-Folder und Konfiguration kopieren, ohne das native Projekt zu aktualisieren. Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer React-App ändern,
__CAPGO_KEEP_0__ Die App wird automatisch neu geladen und zeigt die Änderungen!
Bedenken Sie dass Sie, wenn Sie neue Plugins wie die Kamera installieren, noch eine Neuverteilung Ihres nativen Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.
Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der code-Block oben zeigt die Standard-React-Port für Demonstrationszwecke an.
Verwendung von Capacitor-Plugins
Lassen Sie uns einen Blick darauf werfen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt haben. Dazu können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf! Für dies benötigen wir nun nur noch die Importierung des Pakets und die Aufrufung der share() Funktion aus unserer App. Lassen Sie uns nun die src/App.js zu diesem:
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;Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierung durchführen und das App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte folgende Kommando aus:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie das schöne native Share-Dialog in Aktion sehen!
Um den Button mobiler zu gestalten, können wir einige Stile hinzufügen, indem wir unsere Lieblings-Bibliothek für UI-Komponenten für Web-Apps verwenden - React (kein Witz!).
Konsta UI hinzufügen
Ich habe Jahre lang mit Ionic die großartigen Cross-Platform-Anwendungen erstellt, und es war eines der besten Wahlmöglichkeiten in den letzten Jahren. Aber jetzt empfehle ich es nicht mehr; es ist sehr hackig, es mit React zu integrieren, und es lohnt sich nicht, wenn Sie bereits tailwindcss.
Wenn Sie eine großartige, mobile UI möchten, die sich an iOS- und Android-spezifische Stile anpasst, empfehle ich Ihnen Konsta UI.
Sie müssen haben tailwind ist bereits installiert
Um es zu verwenden, müssen wir nur das Paket installieren: react package:
npm i konstaZusätzlich müssen Sie Ihre tailwind.config.js Datei anpassen:
// 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 erweitert die Standard- (oder Ihre benutzerdefinierte) Tailwind CSS-Konfiguration um einige zusätzliche Varianten und Hilfsfunktionen, die für Konsta UI erforderlich sind.
Jetzt müssen wir die Haupt- Komponente einrichten, damit wir einige globale Parameter (wie Wir müssen die gesamte App mit theme).
umschließen in der App Beispiel Seite 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;Jetzt, wenn alles eingerichtet ist, können wir Konsta UI React-Komponenten in unserer React-App verwenden.
__CAPGO_KEEP_0__
For example, let’s open src/App.js und ändere es in folgendes:
// 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;Wenn die Live-Neuladung nach der Installation aller notwendigen Komponenten außer Synchron ist, versuche es mit einem Neustart. Sobald du das getan hast, solltest du eine mobile App mit einem etwas nativ anmutenden Aussehen sehen, die mit React und Capacitor erstellt wurde!
Du solltest die folgende Seite als Ergebnis sehen:
Fazit
Capacitor ist eine hervorragende Option für die Erstellung nativer Anwendungen auf Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.
Und mit der Zugabe von Capgoist es sogar einfacher, Live-Updates in deine App hinzuzufügen, sodass deine Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerkorrekturen haben.
Wenn du gerne wissen möchtest, wie du Capgo in deine React-App hinzufügen kannst, lies bitte den nächsten Artikel:
Fortsetze von Building Mobile Apps with React und Capacitor
Wenn Sie __CAPGO_KEEP_0__ verwenden Mit Capacitor Mobile Apps mit React erstellen um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD für den Produktworkflow in Capgo CI/CD Capgo Native Builds für den Produktworkflow in Capgo Native Builds Capgo Integrations für den Produktworkflow in Capgo Integrations CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration GitHub Actions Integration für die Implementierungsdetails in GitHub Aktionen-Integration.
