Création d'applications mobiles avec React.js pur et Capacitor

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 une 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 une application mobile native, sans nécessiter de modifications substantielles ou l'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 : Présentation

CapacitorJS est un véritable changement de cap. Il peut intégrer de manière fluide 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 périphérique native 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 abrupte. Sa simple API et sa fonctionnalité épurée rendent facile son incorporation dans votre projet.

Configuration de votre application React.js

Allons-y pour la méthode la plus simple pour initier une application React. Nous utiliserons le gestionnaire de packages npm pour créer une nouvelle application React :

npx create-react-app my-app

Pour transformer notre projet en application mobile native, un export de notre application est requis.

Nous reviendrons sur cela dans un moment. Tout d'abord, comprenons comment intégrer Capacitor dans notre application React.

Intégration de Capacitor dans votre application React.js

Les étapes d'initialisation initiales peuvent être un peu détaillées, mais après cela, la mise à jour de votre enveloppe d'application native devient aussi simple que de lancer un sync commande.

Tout d'abord, nous installerons le Capacitor CLI en tant que dépendance de développement et le configurerons dans notre projet. Lors de la configuration, acceptez les valeurs par défaut pour le nom et l'ID de bundle en appuyant sur « entrée ».

Ensuite, nous installerons le package de base et les packages pertinents pour les plateformes iOS et Android.

Enfin, nous ajouterons les plateformes, et Capacitor créera des dossiers pour chaque plateforme dans le répertoire 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

Le ios et android répertoires 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.

Mettez ensuite à jour langue cible : Français en votre capacitor.config.json 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 sync

Le npm run build Cette 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 à être lancée sur un appareil !

Construction et déploiement de vos applications natives

Le développement d'applications iOS nécessite Xcodeet des applications Android nécessitent Android StudioSi vous prévoyez de distribuer votre application sur les magasins d'applications, 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 deux projets natifs :

npx cap open ios
npx cap open android

Une 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é et déployez ensuite 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 « Jouer » 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 disposent généralement de la mise à jour en temps réel, et heureusement, vous pouvez en avoir le même 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.

Tout d'abord, 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 et 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'adresse 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, les modifications apportées à votre application React seront automatiquement rechargées et affichées dans votre application !

N'oubliez pas que si de nouveaux plugins sont installés, comme la caméra, cela nécessite une reconstruction de votre projet natif. C'est parce que les fichiers natifs auront changé et ne peuvent pas être mis à jour en temps réel.

Utilisation des plugins Capacitor

Prenez un moment pour regarder comment utiliser un plugin Capacitor. Installons un simple, le plugin de partage, qui active le dialogue de partage natif :

npm i @capacitor/share

Pour l'utiliser, importez le package et appelez la fonction respective de notre application. Pensez à share() App.js Après l'installation d'un nouveau plugin, n'oubliez pas de synchroniser votre projet React à nouveau en utilisant :

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;

Mise en œuvre de Konsta UI : une interface utilisateur mobile plus attractive npx cap sync.

Pour une expérience d'interface utilisateur mobile plus attractive, nous utiliserons Konsta UI. Il fournit des styles spécifiques à iOS et Android, et il est facile à utiliser.

Pour utiliser Konsta UI, installez le package React :

Modifiez votre

npm i konsta

fichier comme suit : tailwind.config.js Cela complètera votre configuration actuelle de Tailwind CSS avec des variantes et des utilitaires supplémentaires nécessaires pour Konsta UI.

// 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 Configurez ensuite le composant principal App pour définir les paramètres globaux comme

Now, set up the primary App component to set global parameters like theme. Enveloppez l'application principale dans 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 modifiez-le 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 en fonction d'un projet web existant, fournissant un moyen simple de partager code et d'avoir une interface utilisateur cohérente.

Grâce à des technologies comme Capacitor, la construction d'applications mobiles à partir d'applications web React.js a jamais été plus 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 Inscrivez-vous à un compte gratuit aujourd'hui.

Création d'applications mobiles avec Pure React.js et Capacitor