Créer des applications mobiles avec Angular et Capacitor

In 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 Capgo de la navigation et des transitions natives pour une expérience mobile native, et utiliser tailwind-capacitor pour les zones de sécurité.

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. Vous pouvez également utiliser Capgo de la navigation, des transitions et tailwind-capacitor pour les zones de sécurité.

À 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 dispositif 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 API et sa fonctionnalité épurée rendent l'intégration dans votre projet un jeu d'enfant. Croyez-moi, vous serez émerveillés de la facilité avec laquelle vous pouvez obtenir une application mobile native complète 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 le projet Angular :

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

Après avoir exécuté la commande build, vous devriez voir un dossier frais à la racine de votre projet. dist Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement.

Intégrer Capacitor à votre application Angular

Adding Capacitor to Your Angular App

Pour créer une application mobile native avec Angular et Capacitor, nous avons besoin d'un sync commande.

Tout d’abord, nous pouvons installer le Capacitor CLI comme une dépendance de développement, et puis le configurer 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.

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

__CAPGO_KEEP_0__ créera des dossiers pour chaque plateforme à la racine de notre projet : À ce stade, vous devriez pouvoir observer de nouveaux ios et

context : Page/zone : Site de marketing Capgo. Rôle : Étiquette de navigation ou élément UI court. Vu dans : page trust.astro. Clé de message `et` (Et).

To accéder au projet Android plus tard, 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 le webDircontexte : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `solutions_cordova_to_capacitor_ai_step2_body`). Page/zone : page de marketing de solutions Capgo. Rôle : phrase de copie du site Web. Vu dans : page solutions/cordova-to-capacitor-ai.astro. Clé de message `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte. capacitor.config.json __CAPGO_KEEP_0__.config.json répertoireWeb:

{
  "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 mise en page statique, tandis que la deuxième commande npx cap sync syncrondra tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés dans une application.

En outre, la commande de synchronisation peut 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 encore.

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

Développer 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 iOS et au Google Play Console pour 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, il suffit d'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 :

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 déjà fait cela, 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 'Démarrer' pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

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

Attendez, il y a aussi une façon plus rapide de faire cela pendant le développement…

Capacitor Live Reload

À ce stade, vous êtes probablement habitué à avoir la mise à jour en temps réel 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'efforts !

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

La première étape 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

Recherchez ensuite l'adresse IPv4.

On peut instruire Capacitor à charger l'application directement depuis le 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 corrects, j'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 ! et affichera les modifications !

Prenez en compte que si vous installez de nouveaux plugins comme la caméra, il est toujours nécessaire de reconstruire votre projet natif. C'est parce que les fichiers natifs sont modifiés, et cela ne peut pas être fait en temps réel.

Notez que vous devez utiliser l'adresse IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port par défaut d'Angular à des fins de démonstration.

Utilisation des plugins Capacitor

Examinons maintenant comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour ce faire, nous pouvons installer un plugin relativement simple en exécutant :

npm i @capacitor/share

Rien de particulier n'est à signaler sur le plugin de partage, mais il montre quand même le dialogue de partage natif ! Pour cela, nous n'avons désormais besoin que d'importer le package et d'appeler la fonction correspondante depuis notre application, donc changeons le share() src/app/app.component.ts à cela : 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 :

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'
    });
  }
}

Nous avons supprimé les éléments qui ne sont pas traduisibles (comme les éléments de code) et avons gardé les éléments qui nécessitent une traduction.

npx cap sync

After avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec des Capgo de navigation et des transitions, et corriger les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.

UI natif avec des Capgo de navigation et de transitions natives

J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais intégrer Ionic avec Angular est hacky et rarement valable lorsque vous avez déjà Tailwind CSS.

Pour un sentiment mobile natif dans une application Angular + Capacitor , utilisez les plugins Capgo au lieu des kits UI uniquement web comme Konsta UI :

• @capgo/capacitor-native-navigation — barre de navigation native, Liquid Glass barre de tab sur iOS, et un style de barre de tab flou sur Android. Votre routeur Angular conserve l'état de la route ; le plugin possède la barre de chrome native.
• @capgo/capacitor-transitions — transitions de page à la manière d'Ionic et un retour arrière par swipe sur l'éditeur de code iOS, sans adopter l’UI d'Ionic.

Installez les deux :

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configurez la navigation native avec le mode d'insertion CSS pour que le contenu web respecte les barres natives :

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Affichez une barre de tab de verre liquide (iOS utilise la mise en page système ; Android utilise un fond de fenêtre WebView flou) :

import { inject } from '@angular/core';
import { Router } from '@angular/router';

const router = inject(Router);

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.navigate([`/${id}`]);
});

Add native page transitions in your app shell:

```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
      <router-outlet></router-outlet>
    </cap-router-outlet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('outlet') outlet?: ElementRef<HTMLElement>;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    if (this.outlet?.nativeElement) {
      setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
    }
  }

  openSettings() {
    setDirection('forward');
    this.router.navigate(['/settings']);
  }
}

Enveloppez les pages routées dans cap-router-outlet, cap-page, et cap-content, et appelez setDirection('forward') ou setDirection('back') avant de naviguer. N'ajoutez pas de titres ou de pieds de page web lorsqu'une navigation native possède ces surfaces.

Consultez les guides complets : En utilisant @capgo/capacitor-native-navigation et En utilisant @capgo/capacitor-transitions.

Zones de sécurité avec Tailwind

Pour les zones de sécurité de l'appareil dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor sur npm). Il fournit safe-areas des outils et d'autres plugins de Tailwind compatibles avec Capacitor :

bun add -D tailwind-capacitor

Dans src/styles.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utilisez des outils tels que pt-safe, pb-safe, et px-safe au lieu de les répandre env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration Angular, ouvre une PR sur GitHub.

Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité et Débordement horizontal)

Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster seul le tag de vueport ne résout généralement pas le problème. Travaillez à travers ces vérifications dans l'ordre.

Assurez-vous que le tag de métadonnées de vueport est appliqué correctement

In src/index.html, définissez le tag de métadonnées de vueport dans <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gérez la zone de sécurité iOS à partir d'un seul enveloppeur racine

Créez une coquille d'application unique et appliquez la mise en forme de la zone de sécurité là-bas — et non dans plusieurs composants imbriqués :

html,
body,
app-root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Enveloppez tout le contenu de la page à l'intérieur .app-shell. Le doublonnement de la mise en forme de la zone de sécurité dans les en-têtes, les modaux et les enveloppes de mise en page fait souvent que l'interface utilisateur semble coupée ou trop grande.

Avec @capgo/tailwind-capacitor, vous pouvez exprimer le même écran de chargement avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.

Définissez Capacitor iOS contentInset à never premier

Dans capacitor.config.ts, préférez l'insérer nativement désactivé et laissez CSS (ou la navigation native) contentInsetMode: 'css') prendre en charge la zone de sécurité :

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'www',
  ios: {
    contentInset: 'never',
  },
};

Mélanger les écrans de chargement automatiques de Capacitor avec CSS env(safe-area-inset-*) est une cause courante de double espace.

Trouvez l'élément qui déborde vraiment

Le coupable habituel est un élément utilisant 100vwTailwind w-screenune largeur fixe en pixels, ou une large min-width.

In Safari Web Inspector, exécutez :

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Avec Tailwind, remplacez w-screen avec w-full lorsque possible. De nombreux problèmes d'écoulement horizontal proviennent de 100vw / w-screend'une largeur fixe du conteneur, ou de la duplication de la marge de sécurité de l'espace sécurisé — et non de la balise meta viewport elle-même.

Conclusion

Capacitor est une excellente option pour créer des applications natives basées sur 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 Capgoet ce, même si vous ajoutez des mises à jour en direct à votre application, vous pouvez vous assurer que vos utilisateurs ont toujours accès aux dernières fonctionnalités et correctifs 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 La création d'applications mobiles avec Angular et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-l’à Utiliser @capgo/capacitor-activités-en-ligne pour la capacité native dans Utiliser @capgo/capacitor-activités-en-ligne, Utiliser @capgo/capacitor-activités-en-ligne pour le détail d'implémentation dans @capgo/capacitor-activités-en-ligne, Utiliser @capgo/capacitor-joueur-de-videos pour la capacité native dans Utiliser @capgo/capacitor-joueur-de-videos, Utiliser @capgo/capacitor-joueur-de-videos pour les détails d'implémentation dans @capgo/capacitor-video-player, et En utilisant @capgo/capacitor-native-navigation pour la capacité native dans En utilisant @capgo/capacitor-native-navigation.