Mit React und Capacitor mobile Apps erstellen

In diesem Tutorial beginnen wir mit einer neuen React-App und wechseln zur nativen mobilen Entwicklung mit __CAPGO_KEEP_0__. Optional können Sie auch app and transition to native mobile development using Capacitor. Optionally, you can also add Konsta UI für eine verbesserte mobile Benutzeroberfläche mit Tailwind CSS.

Capacitor ermöglicht Ihnen, Ihre React-Web-Anwendung 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.

Diese Anleitung führt Sie durch den Prozess, beginnend mit einer neuen React-Anwendung und dann die Einbindung von Capacitor zur Erschließung der native mobile Apps. Optional können Sie auch Konsta UI für die Verbesserung Ihrer mobilen Benutzeroberfläche mit Tailwind CSS nutzen.

Über Capacitor

CapacitorJS ist ein Game-Changer! Sie können es leicht in Ihr Web-Projekt integrieren und es wird Ihre Anwendung in eine native WebView einhüllen, sodass die native Xcode- und Android-Studio-Projekte generiert werden. Zusätzlich bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.

Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken API und gestreamten Funktionalitäten machen es zu einem Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine vollständig funktionierende native App mit Capacitor zu erreichen!

Ihre React-Anwendung vorbereiten

Während es verschiedene Methoden gibt, um React-Anwendungen zu initiieren, gehen wir in dieser Anleitung für den einfachsten Ansatz, der eine leere React-Anwendung bereitstellt:

npx create-react-app my-app

Um ein natives Mobilprogramm zu erstellen, benötigen wir ein export des Projekts. Daher fügen wir ein einfaches Skript in unserem package.json ein, das zum Bauen und Exportieren des React-Projekts verwendet werden kann:

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

Sie können jetzt ohne Sorgen ausführen, und Sie sollten ein frisches Ausgabefolder an der Wurzel Ihres Projekts erkennen. npm run build Dieser Ordner wird später von __CAPGO_KEEP_0__ verwendet, aber für den Moment müssen wir ihn korrekt einrichten.

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your React App

Befehls. sync Zuerst können wir das

installieren. Capacitor CLI als Abhängigkeit für die Entwicklung und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe von Enter die Standardwerte für Namen und Bundle-ID 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 für jede Plattform einen Ordner am Root 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 android

Bis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem React-Projekt beobachten können.

Das sind echte native Projekte!

Um später auf das Android-Projekt zugreifen zu können, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.

Darüber hinaus sollten Sie ein capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der

webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie die __CAPGO_KEEP_0__.config.json:

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

Datei und aktualisieren Sie den Wert von "webDir". Sie können dies ausprobieren, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Die erste Kommandozeilenanweisung npm run build wird einfach Ihr React-Projekt bauen und den statischen Build exportieren.

Während die zweite Kommandozeilenanweisung npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisiert, damit sie in einer App angezeigt werden können.

Zusätzlich kann die Synchronisierungsanweisung die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, es Zeit ist, npx cap sync wieder auszuführen.

Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal das App auf einem Gerät!

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps benötigen Sie, dass Android Studio installiert ist. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Wenn Sie mit der nativen mobilen Entwicklung neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald 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 Ihre Signierungsanmeldung einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht gemacht 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 Ihre React-Web-App erfolgreich auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Sie sind wahrscheinlich jetzt daran gewöhnt, dass Sie mit allen modernen Frameworks eine Hot-Reload-Funktion haben, und die gute Nachricht ist, dass Sie die gleiche Funktionalität auch auf einem mobilen Gerät haben können. auf einem mobilen Gerät mit minimalen Anstrengungen!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live-Reload auf Ihrem Netzwerk indem Sie die Capacitor-App laden, die den Inhalt von der spezifischen URL lädt.

Der erste Schritt besteht darin, Ihre lokale IP-Adresse zu ermitteln. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl in der Terminal-Anwendung ausführen:

ipconfig getifaddr en0

Auf Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem 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 die richtige IP-Adresse und den PortIch habe in diesem Beispiel die Standard-React-Port verwendet.

Jetzt können wir diese Änderungen in unser natives Projekt übernehmen:

npx cap copy

Das copy Die Kommandozeilenanweisung ähnelt sich sync, aber sie wird nur nur die Änderungen im Web-Ordner und der Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren. Sie können Ihr App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer React-App ändern,

die App wird automatisch neu geladen und zeigt die Änderungen an! Bleiben Sie dran

__CAPGO_KEEP_0__ Wenn Sie neue Plugins wie die Kamera installieren, ist eine Neuverteilung Ihres native Projekts erforderlich. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. 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. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Share-Plugin, aber es bringt trotzdem den native Share-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 das src/App.js in diesem Zustand ändern:

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, ist bei der Installation neuer Plugins eine Synchronisierungsoperation erforderlich und danach muss die App auf das Gerät neu verteilt werden. Um dies zu tun, führen Sie bitte Folgendes aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Share-Dialog in Aktion sehen!

Um den Button mobilerfreundlicher aussehen zu lassen, können wir einige Stilelemente hinzufügen, indem wir mein Lieblings-UI-Komponentenbibliothek für Web-Anwendungen verwenden - React (kein Wortspiel).

Konsta UI hinzufügen

Ich habe Jahre mit Ionic erstaunliche cross-plattformfähige Anwendungen erstellt und es war eines der besten Wahlmöglichkeiten für Jahre. 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 aussehende mobile UI möchten, die sich an iOS- und Android-spezifische Stile anpasst, empfehle ich Konsta UI.

Sie müssen bereits tailwind

Um es zu verwenden, müssen wir nur das Paket react installieren:

npm i konsta

Zusätzlich müssen Sie Ihre tailwind.config.js Datei:

// 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 Es wird die Standard- (oder Ihre eigene) Tailwind CSS-Konfiguration mit einigen zusätzlichen Varianten und Hilfsfunktionen erweitern, die für Konsta UI erforderlich sind.

Jetzt müssen wir die Hauptkomponente "App" einrichten, damit wir einige globale Parameter (wie z.B. Wir müssen die gesamte Anwendung mit in der theme).

Beispiel-Seite App Wenn alles eingerichtet ist, können wir Konsta UI React-Komponenten in unserer React-Anwendung verwenden. 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;

Beispiel: Öffnen Sie

und ändern Sie es in folgendes:

Wenn der Live-Reload nach der Installation aller notwendigen Komponenten nicht synchron ist, versuchen Sie, alles neu zu starten. Sobald Sie das getan haben, sollten Sie eine mobile App mit einem etwas nativen Aussehen sehen, die mit React und __CAPGO_KEEP_0__ erstellt wurde! src/App.js protectedTokens

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

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with React and Capacitor!

Sie sollten die folgende Seite als Ergebnis sehen:

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Hinzufügung von Capgo",ist es sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihrer React-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel: