Créer des applications mobiles avec Angular et Capacitor

Dans ce tutoriel, nous allons commencer avec une nouvelle Angular app et passer dans le monde des applications mobiles natives 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 Angular en application mobile native sans nécessiter de modifications importantes ou d'apprendre une nouvelle compétence comme React Native.

Avec juste quelques étapes simples, la plupart des applications Angular peuvent être transformées en applications mobiles.

Ce tutoriel vous guidera tout au long du processus, en commençant par une nouvelle application Angular et en incorporant ensuite Capacitor pour passer dans le monde 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 l'appareil natif comme la caméra via un pont JS.

Avec Capacitor, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa mince API et sa fonctionnalité épurée en font un plaisir à intégrer dans votre projet. Croyez-moi, vous serez impressionné par la facilité avec laquelle vous pouvez atteindre une application mobile native fonctionnelle avec Capacitor!

Préparation de votre application Angular

Pour créer une nouvelle application Angular, exécutez la commande suivante :

ng new my-app
cd my-app

Choisissez « Angular » lorsque vous êtes invité à choisir la version d'Angular.

Pour créer une application mobile native, nous avons besoin d'un export de notre projet. Par conséquent, incluez un script simple dans votre package.json qui peut être utilisé pour construire et copier l'application Angular :

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

Après avoir exécuté la commande build, vous devriez être en mesure de voir un dossier frais à la racine de votre projet. dist L'export de notre projet

Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.

Ajouter Capacitor à votre application Angular

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 seul sync commande.

Tout d'abord, nous pouvons installer le Capacitor CLI en tant que dépendance de développement, et puis configurer cela 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 Angular 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 pouvoir observer de nouveaux ios et android dossiers de votre projet Angular.

Ce sont des projets natives 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 la webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.

Pour y remédier, ouvrez le capacitor.config.json fichier et mettez à jour la webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Vous pouvez essayer en exécutant les commandes suivantes :

npm run build
npx cap sync

La première commande npm run build construira simplement votre projet Angular et copiera la construction statique, tandis que la deuxième commande npx cap sync syncra toutes les web code dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application.

De plus, la commande sync 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 à nouveau.

Sans vous en apercevoir, vous êtes maintenant effectivement terminé, alors voyons l'application sur un appareil !

Construire et déployer 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 android

Une 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 :

android-studio-run

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). Ensuite, vous pouvez simplement appuyer sur la touche de lecture pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

xcode-run

Félicitations ! Vous avez réussi à déployer votre application web Angular sur un appareil mobile. Voici un exemple :

Mais attendez, il existe également un moyen plus rapide de procéder pendant le développement…

Capacitor Live Reload

À ce stade, vous êtes probablement habitué à avoir un redémarrage chaud 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'effort !

Activer l'accès à votre application hébergée localement avec redémarrage en direct sur votre réseau en ayant l'application Capacitor charger le contenu à partir de l'URL spécifique.

Le premier pas 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 en0

Sur Windows, exécutez :

ipconfig

Alors, recherchez 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: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:4200',
    cleartext: true
  }
};

export default config;

Assurez-vous d'utiliser l'adresse IP et le port correctsJ'ai utilisé le port par défaut d'Angular dans cet exemple.

Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :

npx cap copy

Le 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 Angular, l'application se rechargera automatiquement

et affichera les modifications ! N'oubliez pas

Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.

Using Capacitor Plugins

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

Le bloc __CAPGO_KEEP_0__ ci-dessus montre le port Angular par défaut à des fins de démonstration. Utilisation des plugins __CAPGO_KEEP_0__Étudions maintenant comment utiliser un plugin __CAPGO_KEEP_0__ en action, que nous avons mentionné quelques fois avant. share() Pour cela, nous pouvons installer un plugin relativement simple en exécutant : src/app/app.component.ts à cela :

import { Component } from '@angular/core';
import { Share } from '@capacitor/share';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  async share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
}

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 ce faire, exécutez la commande suivante :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez assister à la belle boîte de dialogue de partage native en action !

Ajouter Konsta UI

Pour utiliser Konsta UI dans votre application Nuxt 3, vous devez avoir tailwind déjà installé et pour installer le package :

npm i konsta

De 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/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig permettra d'étendre la configuration par défaut (ou votre configuration personnalisée) de Tailwind CSS avec certaines variantes et utilitaires supplémentaires nécessaires pour Konsta UI.

Maintenant, nous devons configurer le principal Application composant afin de pouvoir définir certaines paramètres globaux (comme theme).

Nous devons envelopper toute l'application avec App dans le src/app/app.component.html:

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

Page d'exemple

Maintenant que tout est configuré, nous pouvons utiliser les composants UI Konsta Vue dans nos pages Angular.

Par exemple, ouvrez src/app/app.component.html et modifiez-le en

<app>
  <page>
    <navbar title="My App" />

    <block strong>
      <p>
        Here is your Angular & Konsta UI app. Let's see what we have here.
      </p>
    </block>
    <block-title>Navigation</block-title>
    <list>
      <list-item href="/about/" title="About" />
      <list-item href="/form/" title="Form" />
    </list>

    <block strong class="flex space-x-4">
      <button>Button 1</button>
      <button>Button 2</button>
    </block>
  </page>
</app>

Si le rechargement en direct est hors synchronisme après avoir installé 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, construite avec Angular et Capacitor!

Vous devriez voir la page suivante comme résultat :

Conclusion

Capacitor est une excellente option pour créer des applications natives sur la base d'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 temps réel à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et corrections de bogues.

Si vous souhaitez apprendre à ajouter Capgo à votre application Angular, consultez l'article suivant :

Continuez à partir de la création d'applications mobiles avec Angular et Capacitor

Si vous utilisez Créer des applications mobiles avec Angular et Capacitor pour planifier le comportement de médias et d'interface natives, connectez-le avec Utiliser @capgo/capacitor-live-activités pour la capacité native dans Utiliser @capgo/capacitor-live-activités, @capgo/capacitor-live-activités pour les détails d'implémentation dans @capgo/capacitor-activités en direct, En utilisant @capgo/capacitor-joueur de vidéo pour la capacité native dans En utilisant @capgo/capacitor-joueur de vidéo, @capgo/capacitor-joueur de vidéo pour les détails d'implémentation dans @capgo/capacitor-joueur de vidéo, et En utilisant @capgo/capacitor-navigation native pour la capacité native dans En utilisant @capgo/capacitor-navigation native.