Ce tutoriel vous guidera dans la création d'une application mobile en utilisant React, Capacitor, et Konsta UI. À la fin, vous saurez comment transformer une application web React.js en application mobile native avec Capacitor, et mettre en œuvre une interface utilisateur native avec Konsta UI.
Capacitor facilite la transformation facile de votre application web React.js en application mobile native, nécessitant aucune modification substantielle ou apprentissage de nouvelles stratégies comme React Native.
Le processus implique quelques étapes simples, et avant que vous ne le sachiez, votre application React.js sera une application mobile fonctionnelle. Alors, restez avec nous tout au long de ce voyage.
Capacitor Overview
CapacitorJS est un changement de jeu. Il peut intégrer de manière fluide avec tout projet web et envelopper votre application dans une vue web native tout en générant le projet Xcode et Android Studio natif. De plus, grâce à ses plugins, vous pouvez accéder aux fonctionnalités de dispositif natif comme la caméra via un pont JS.
Capacitor offre une façon simple de créer une application mobile native sans aucune difficulté ou courbe d'apprentissage raide. Sa simple API et sa fonctionnalité épurée rendent facile son incorporation dans votre projet.
translations
Let’s go for the simplest method to initiate a React application. We’ll use the npm package manager to create a new React app:
npx create-react-app my-appPour initier une application React de manière la plus simple, nous allons utiliser le __CAPGO_KEEP_0__ pour créer une nouvelle application React : Pour transformer notre projet en application mobile native, il est nécessaire d'exporter notre application. Nous reviendrons sur ce point plus tard. Tout d'abord, comprenons comment intégrer __CAPGO_KEEP_0__ dans notre application React.
Intégration de Capacitor dans votre application React.js
Integrating Capacitor into Your React.js App
commande. sync Tout d'abord, nous allons installer le __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ en tant que dépendance de développement et le configurer dans notre projet. Lors de la configuration, acceptez les valeurs par défaut pour le nom et l'ID de l'application en appuyant sur « entrer ».
First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”
Enfin, nous allons ajouter les plateformes, et __CAPGO_KEEP_0__ créera des dossiers pour chaque plateforme à la racine de notre projet :
Finally, we’ll add the platforms, and Capacitor will create folders for each platform at our project root:
# 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 androidLes ios et android dossiers sont maintenant présents dans votre projet React.js.
Pour accéder au projet Android ultérieurement, installez Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.
Ensuite, mettez à jour le webDir dans votre capacitor.config.json le fichier comme indiqué ci-dessous :
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "build",
"bundledWebRuntime": false
}Exécutez la commande de construction et synchronisez votre projet avec Capacitor:
npm run build
npx cap syncLa npm run build La commande construira votre projet React.js, tandis que npx cap sync alignera le web code dans les endroits précis des plateformes natives afin qu'ils puissent être exécutés dans une application.
Maintenant, avec un peu de chance et sans erreurs, votre application React.js devrait être prête pour la mise en ligne sur un appareil !
La construction et la mise en ligne de vos applications natives
Le développement d'applications iOS nécessite Xcode, et les applications Android ont besoin de Android Studio. Si vous prévoyez distribuer votre application sur l'App Store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.
Le Capacitor CLI simplifie le processus d'ouverture des projets natifs :
npx cap open ios
npx cap open androidUne fois que vos projets natifs sont configurés, le déploiement de votre application sur un appareil connecté est un processus simple.
Pour Android Studio, attendez que tout soit chargé puis déployez votre application sur un appareil connecté.
Pour Xcode, établissez votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Une fois cela fait, cliquez simplement sur 'Démarrer' pour exécuter l'application sur votre appareil connecté, que vous pouvez choisir en haut.
Si tout s'est bien passé, vous aurez converti votre application web React.js en application mobile native !
Capacitor Live Reload
Les frameworks de développement modernes viennent généralement avec la mise à jour en temps réel, et heureusement, vous pouvez avoir la même chose avec Capacitor mais sur votre appareil mobile!
Vous pouvez rendre votre application hébergée localement accessible avec la mise à jour en temps réel sur votre réseau en faisant en sorte que l'application Capacitor charge le contenu à partir d'une URL spécifique.
Premièrement, déterminez votre adresse IP locale. Sur un Mac, vous pouvez le faire en exécutant ipconfig getifaddr en0 dans le terminal. Sur Windows, exécutez ipconfig And recherchez l'adresse IPv4.
Après cela, instruisez Capacitor pour charger l'application directement du serveur en ajoutant un autre paramètre à votre capacitor.config.ts Fichier :
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;Assurez-vous d'utiliser l'IP et le port exacts. Exécutez npx cap copy Pour appliquer ces modifications à notre projet natif.
Lorsque vous déployez votre application une fois de plus à l'aide d'Android Studio ou Xcode, toute modification de votre application React sera automatiquement rechargée et affichée dans votre application !
Notez que si de nouveaux plugins sont installés, comme la caméra, cela nécessite une reconstruction de votre projet natif. Cela est dû au fait que les fichiers natifs auront changé et ne peuvent pas être mis à jour en temps réel.
Utilisation des plugins Capacitor
Commençons par jeter un coup d'œil sur la façon d'utiliser un plugin Capacitor. Installons un simple, le plugin de partage, qui affiche le dialogue de partage natif :
npm i @capacitor/sharePour l'utiliser, importez le package et appelez la fonction respective. share() fonction de notre application. Pensez à considérer le 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;Après l'installation d'un nouveau plugin, n'oubliez pas de synchroniser votre projet React à nouveau en utilisant npx cap sync.
Mettre en œuvre Konsta UI : une interface utilisateur mobile plus attractive
Pour une expérience d'interface utilisateur mobile plus attractive, nous utiliserons Konsta UI. Il fournit une mise en forme spécifique à iOS et Android, et il est facile à utiliser.
Pour utiliser Konsta UI, installez le package React :
npm i konstaModifiez votre tailwind.config.js fichier comme suit :
// 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 ce qui complètera votre configuration actuelle de Tailwind CSS avec des variantes et des utilitaires supplémentaires nécessaires pour Konsta UI.
Maintenant, configurez le composant principal App pour définir des paramètres globaux comme themeEnveloppez l'application principale avec App dans le 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')
);Utilisons les composants React de Konsta UI dans nos pages React.js. Ouvrez src/App.js et le modifier pour :
// 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>
);
}Si tout a été fait correctement, vous devriez voir une intégration sans effort entre React et Konsta UI pour donner à votre application mobile un aspect natif.
Conclusion
Capacitor offre un moyen fluide de construire des applications natives sur la base d'un projet web existant, fournissant un moyen simple de partager code et d'avoir une interface utilisateur cohérente.
Merci aux technologies comme Capacitor, la construction d'applications mobiles à partir d'applications web React.js a jamais été aussi facile. Portez vos compétences en développement web à un niveau supérieur en créant des applications mobiles natives impressionnantes. Bon codage !
Pour en savoir plus sur la façon dont vous pouvez accélérer votre processus de développement d'applications, s'inscrire à un compte gratuit aujourd'hui.
Continuez à partir de Building Mobile Apps with Pure React.js et Capacitor
Si vous utilisez Building Mobile Apps with Pure React.js et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-le avec Utiliser @capgo/capacitor-activités-en-vivre pour la capacité native dans Utiliser @capgo/capacitor-activités-en-vivre, @capgo/capacitor-activités-en-vivre pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre, Utiliser @capgo/capacitor-joueur-de-videos pour la capacité native dans Utiliser @capgo/capacitor-joueur-de-videos, @capgo/capacitor-joueur-de-videos pour le détail d'implémentation dans @capgo/capacitor-joueur-de-videos, et Utiliser @capgo/capacitor-navigation-native pour la capacité native dans Utiliser @capgo/capacitor-navigation-native.
