Dans ce tutoriel, nous allons commencer avec une nouvelle React application et passer à un développement mobile natif en utilisant Capacitor. Vous pouvez également ajouter Konsta UI pour une interface utilisateur mobile améliorée avec Tailwind CSS.
Capacitor vous permet de convertir facilement votre application web React en une application mobile native sans modifications importantes ou apprentissage d'une nouvelle compétence comme React Native.
Avec juste quelques étapes simples, la plupart des applications React peuvent être transformées en applications mobiles.
Ce tutoriel vous guidera tout au long du processus, en commençant par une nouvelle application React et en incorporant ensuite Capacitor pour passer dans le domaine des applications mobiles natives. De plus, vous pouvez optionnellement utiliser Konsta UI pour améliorer votre interface utilisateur mobile avec Tailwind CSS.
À propos de Capacitor
CapacitorJS est un changement de jeu ! Vous pouvez l'intégrer facilement dans tout projet web, et il enveloppera votre application dans une vue web native, générant le projet Xcode et Android Studio natif pour vous. De plus, ses plugins vous donnent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JS.
With Capacitor, vous obtenez une application mobile native fantastique sans aucune mise en place compliquée ou courbe d'apprentissage raide. Sa mince API et sa fonctionnalité affinée rendent l'intégration dans votre projet un jeu d'enfant. Faites-moi confiance, vous serez impressionné par la facilité avec laquelle vous pouvez atteindre une application mobile native fonctionnelle avec Capacitor!
Préparation de l'application React
Alors qu'il existe diverses méthodes pour lancer les applications React, allons pour la plus simple dans ce tutoriel qui fournit une application React vierge :
npx create-react-app my-appPour créer une application mobile native, nous avons besoin d'un export de notre projet. Par conséquent, ajoutons un script simple à notre package.json qui peut être utilisé pour construire et exporter le projet React :
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}Vous pouvez maintenant exécuter npm run build sans aucune inquiétude, et vous devriez être en mesure de repérer un dossier vierge à la racine de votre projet.
Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.
L'ajout de Capacitor à l'application React
Pour emballer toute application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales, mais ensuite, c'est aussi simple que d'exécuter un sync commande.
Tout d'abord, nous pouvons installer le Capacitor CLI comme dépendance de développement, et puis le configurer dans notre projet. Lors de la configuration, vous pouvez appuyer sur “entrer” pour accepter les valeurs par défaut pour le nom et l'ID de l'application.
Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
Enfin, nous pouvons ajouter les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de notre projet:
# 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À ce stade, vous devriez être en mesure d'observer de nouveaux ios et android dossiers dans votre projet React.
Ces sont des projets natifs réels !
Pour accéder au projet Android ultérieurement, vous devez installer Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.
De plus, vous devriez trouver un fichier capacitor.config.ts qui contient certaines configurations fondamentales Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est le webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, il est inexact.
Pour rectifier cela, ouvrez le capacitor.config.json fichier et mettez à jour le webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "out",
"bundledWebRuntime": false
}Vous pouvez essayer de le faire en exécutant les commandes suivantes :
npm run build
npx cap syncLa première commande npm run build construira simplement votre projet React et exporter la mise en forme statique.
Alors que la deuxième commande npx cap sync syncra tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés dans une application.
De plus, la commande de synchronisation pourrait mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez un nouveau Capacitor plugins il est temps de relancer npx cap sync sans vous en rendre compte, vous êtes maintenant effectivement terminé, alors voyons donc l'application sur un appareil !
Without noticing, you are now actually done, so let’s see the app on a device!
Développez et déployez des applications natives
Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez distribuer votre application sur l'App Store, vous devez vous inscrire au programme Apple Developer pour les applications iOS et au Google Play Console pour les applications Android.
Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le Capacitor CLI pour ouvrir facilement les projets natifs :
npx cap open ios
npx cap open androidUne fois que vous avez configuré vos projets natifs, déployer votre application sur un appareil connecté est facile. Dans Android Studio, vous n'avez qu'à attendre que tout soit prêt, et vous pouvez déployer votre application sur un appareil connecté sans modifier les paramètres. Voici un exemple :
Dans Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Si vous n'avez pas fait cela avant, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit au programme de développement). Une fois que vous avez terminé, vous pouvez simplement appuyer sur Play pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :
Félicitations ! Vous avez réussi à déployer votre application web React sur un appareil mobile. Voici un exemple :
Attends, il existe une méthode plus rapide pour procéder pendant le développement…
Capacitor Live Reload
Vous êtes probablement habitué à avoir la mise à jour en temps réel avec tous les frameworks modernes, et la bonne nouvelle est que vous pouvez avoir la même fonctionnalité sur un appareil mobile avec un minimum d'efforts !
Activer l'accès à votre application hébergée localement avec mise à jour en temps réel sur votre réseau en ayant l'application Capacitor charger le contenu à partir de l'URL spécifique.
La première étape consiste à déterminer votre adresse IP locale. Si vous utilisez un Mac, vous pouvez trouver cela en exécutant la commande suivante dans le terminal :
ipconfig getifaddr en0Sur Windows, exécutez :
ipconfigRecherchez ensuite l'adresse IPv4.
Nous pouvons instruire Capacitor pour charger l'application directement du serveur en ajoutant une autre entrée à notre capacitor.config.ts fichier :
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;Assurez-vous d'utiliser le bon IP et le port, J'ai utilisé le port React par défaut dans cet exemple.
Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :
npx cap copyLa copy commande est similaire à sync, mais elle ne copiera que les modifications apportées au dossier web et la configuration, sans mettre à jour le projet natif.
Vous pouvez maintenant déployer votre application une fois de plus à l'aide d'Android Studio ou Xcode. Après cela, si vous modifiez quelque chose dans votre application React, L'application se rechargera automatiquement et affichera les modifications !
Prenez en compte que si vous installez de nouveaux plugins comme la caméra, il est encore nécessaire de reconstruire votre projet natif. Cela est dû au fait que les fichiers natifs sont modifiés, et cela ne peut pas être fait en temps réel.
Notez que vous devez utiliser l'IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port React par défaut pour des fins de démonstration.
Utilisation des Capacitor Plugins
Étudions maintenant comment utiliser un Capacitor plugin en action, que nous avons mentionné quelques fois avant. Pour cela, nous pouvons installer un plugin relativement simple en exécutant :
npm i @capacitor/shareRien de particulier n'est fait avec le Plugin de partage, mais il apporte quand même le dialogue de partage natif ! Pour cela, nous n'avons plus besoin que d'importer le package et d'appeler la share() fonction de notre application. Étudions maintenant la modification du src/App.js Pour cela :
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;Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour cela, exécutez la commande suivante :
npx cap syncAprès avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !
Pour rendre le bouton plus mobile-friendly, nous pouvons ajouter quelques styles en utilisant ma bibliothèque de composants UI préférée pour les applications web - React (aucune plaisanterie).
Ajouter Konsta UI
J'ai travaillé des années avec Ionic pour construire des applications cross-plateformes incroyables, et c'était l'une des meilleures options pendant des années. Mais maintenant, je ne le recommande plus ; il est très hacky d'intégrer cela avec React, et ce n'est pas vraiment la peine lorsque vous avez déjà tailwindcss.
Si vous souhaitez une interface utilisateur mobile qui ressemble à un grand écran et qui s'adapte aux styles spécifiques d'iOS et d'Android, je recommande Konsta UI.
Vous devez avoir tailwind est déjà installé
Pour l'utiliser, nous n'avons besoin que d'installer le package react package :
npm i konstaDe plus, vous devez modifier votre tailwind.config.js fichier :
// 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 ceci étendra la configuration par défaut (ou votre configuration personnalisée) Tailwind CSS avec quelques variantes supplémentaires et des utilitaires d'aide nécessaires pour Konsta UI.
Nous devons maintenant configurer le composant principal App afin de pouvoir définir certaines paramètres mondiaux (comme theme).
Nous devons envelopper l'ensemble de l'application avec App dans le 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;Page d'exemple
Maintenant que tout est configuré, nous pouvons utiliser les composants React de Konsta UI dans notre application React.
Par exemple, ouvrez et modifiez-le en suivant : src/App.js et changez-le en suivant :
// 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;Si le rechargement en direct est hors synchronisation après l'installation de tous les composants nécessaires, essayez de redémarrer tout. Une fois que vous avez fait cela, vous devriez voir une application mobile avec un aspect natif quelque peu, construite avec React et Capacitor !
Vous devriez voir la page suivante comme résultat :
Conclusion
Capacitor est une excellente option pour construire des applications natives basées sur un projet web existant, offrant une façon simple de partager code et de maintenir une interface utilisateur cohérente.
Et avec l'ajout de Capgo, il est encore plus facile d'ajouter des mises à jour en direct à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et correctifs de bogues.
Si vous souhaitez apprendre à ajouter Capgo à votre application React, consultez l'article suivant :
Continuez de la section précédente : Building Mobile Apps with React et Capacitor
If vous utilisez Créer des applications mobiles avec React et Capacitor pour planifier l'automatisation CI/CD, connectez-le avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour le détail d'implémentation dans Intégration CI/CD, et GitHub Intégration d'actions pour les détails d'implémentation dans GitHub Actions Integration.
