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

Cette étape par étape vous guidera dans la création d'une application mobile à l'aide de 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 à l'aide de 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 vous en rendiez compte, votre application React.js sera une application mobile fonctionnelle. Alors, restez avec nous pour vous guider dans ce voyage.

Capacitor Vue d'ensemble

CapacitorJS est un changement de jeu. 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, à travers ses plugins, vous pouvez accéder aux fonctionnalités de périphérique native comme la caméra via un pont JavaScript.

Capacitor offre une méthode directe pour 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.

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 L'export de notre application est requis. Nous reviendrons à cela dans un moment. 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 installerons le __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 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'ensemble 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 ajouterons 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 android

ios et et Android android Les 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 fichier comme indiqué ci-dessous :

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

Exécutez la commande de build et synchronisez votre projet avec Capacitor:

npm run build
npx cap sync

La commande construira votre projet React.js, tandis que npm run build alignera le web __CAPGO_KEEP_0__ dans les endroits précis des plateformes natives afin qu'ils puissent être exécutés dans une application. npx cap sync will align the web code in the accurate places of the native platforms so they can be executed in an app.

Construire et Déployer Vos Applications Natives

Le développement d'applications iOS nécessite

Xcode , tandis que les applications Android ont besoin deAndroid Studio . Si 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 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ simplifie le processus d'ouverture des deux projets natives :

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

Le développement d'applications iOS nécessite Xcode, et les applications Android ont besoin d'Android Studio.

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, appuyez simplement sur "Exécuter" 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 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 la reprise 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 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;

Utilisez l'adresse IP et le port exacts. Exécutez npx cap copy appliquer ces modifications à notre projet natif.

Lorsque vous déployez votre application une fois de plus à l'aide d'Android Studio ou Xcode, toutes 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 recompilation de votre projet natif. C'est parce que les fichiers natifs auront changé et ne peuvent pas être mis à jour en temps réel.

Utiliser les Capacitor plugins

Let’s take a quick look at how to use a Capacitor plugin. Let’s install a simple one, the Partager l'extension, qui ouvre le dialogue de partage natif :

npm i @capacitor/share

Importez le package et appelez la méthode respective. share() function de notre application. Pensez à la 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 avec npx cap sync.

Mise en œuvre de 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 page spécifique à iOS et Android, et il est facile à utiliser.

Pour utiliser Konsta UI, installez le package React :

npm i konsta

Modifiez 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 Cela complètera votre configuration Tailwind CSS actuelle avec des variantes et des utilitaires supplémentaires nécessaires pour Konsta UI.

Maintenant, configurez le composant d'application principal pour définir des paramètres globaux comme themeEntourez 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 Konsta UI 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 une manière fluide de créer des applications natives sur la base d'un projet web existant, offrant une façon 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, inscrivez-vous à un compte gratuit aujourd'hui.