Création d'applications mobiles avec Pure React.js 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 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, 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 les projets Xcode et Android Studio natifs. 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 méthode directe pour 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

Commençons par 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 ce point plus tard. 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 l’application en appuyant sur « entrer ».

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 à 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

Le iOS et Android les 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.

Ensuite, mettez à jour le webDir dans votre fichier capacitor.config.json 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

La npm run build 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 les applications Android nécessitent Android StudioSi vous prévoyez de 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 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é 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 une application mobile native !

Capacitor Live Reload

Les frameworks de développement modernes disposent généralement de la rechargement chaud, 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 rechargement en direct 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 cherchez l'adresse IPv4.

Après cela, instruisez Capacitor à charger l'application directement depuis le 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 ont changé et ne peuvent pas être mis à jour en temps réel.

Utilisation des plugins Capacitor

Essayons de regarder rapidement comment utiliser un plugin Capacitor. Essayons d'installer un simple, le Partager plugin, qui déclenche le dialogue de partage natif :

npm i @capacitor/share

Pour l'utiliser, importez le package et appelez la fonction respective dans notre application. Considérez le 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 ce qui 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 placeholder

Maintenant, configurez le composant d'application principal pour définir les paramètres mondiaux 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 UI Konsta React 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 créer 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 création 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.