Agence web » Actualités du digital » AWS Amplify simplifie la création d'applications mobiles

AWS Amplify simplifie la création d'applications mobiles

AWS Amplify est un framework conçu pour faciliter la création d'applications Web et natives. Il se concentre sur le fait d'avoir un backend entièrement intégré prêt à l'emploi – l'exécution d'une API et d'une base de données avec authentification est gérée pour vous.

Qu'est-ce qu'AWS Amplify?

Amplify ne remplace pas un framework tel que React: vous êtes libre d'utiliser l'interface de votre choix (bien que React, React Native, Vue, Android et iOS soient mieux pris en charge avec des bibliothèques spécifiques). Amplify gérera le backend, des choses telles que l'exécution d'un serveur d'API, la gestion de la base de données et l'authentification des clients.

Lorsque vous créez un projet Amplify, les ressources backend sont provisionnées automatiquement à l'aide de CloudFormation. Lorsque vous ajoutez une API, il vous sera simplement demandé de définir le schéma, et une table DynamoDB sera créée pour vous, avec les méthodes de gestion pour l'abonnement, l'interrogation et la mise à jour des entrées générées également. Si vous souhaitez intégrer un outil de gestion d'état tiers comme Redux autour du backend d'Amplify, vous pouvez également le faire.

Pour l'authentification, Amplify peut être connecté à Amazon Cognito, un service de gestion d'identité polyvalent. Cognito peut gérer l'authentification multifacteur, la connexion et l'inscription des utilisateurs, les services d'annuaire et fédérer les connexions aux fournisseurs sociaux (Google, Facebook), ou même à votre propre serveur Active Directory via SAML.

Amplify contient également une bibliothèque d'interface utilisateur pleine de composants utiles, similaires à Bootstrap. Cependant, la bibliothèque d'interface utilisateur d'Amplify se concentre sur les flux fonctionnels, tels que l'inscription et la connexion des utilisateurs, le téléchargement de fichiers et de photos et les chatbots basés sur AWS Lex. L'utilisation du composant d'authentification, par exemple, facilitera la connexion de votre application au backend d'authentification d'Amplify (Cognito).

Vous pouvez, bien entendu, les étendre avec votre propre code et vos propres couleurs, si vous n’êtes pas fan de l’orange emblématique d’AWS.

Commencer

Si vous souhaitez monter et jouer avec Amplify, la configuration est assez simple. Installez la CLI Amplify globalement à partir de npm:

npm install -g @aws-amplify/cli

Pour l'application réelle, nous allons démarrer une application React de base en utilisant la propre application React create-react-app modèle de démarrage:

npx create-react-app amplify

cd dans ce nouveau dossier et installez Amplify en tant que npm dépendance:

npm install @aws-amplify/api @aws-amplify/pubsub

Courir npm start, et vous devriez voir le logo React en rotation ouvert dans votre navigateur.

Si vous souhaitez utiliser la bibliothèque d'interface utilisateur optionnelle d'Amplify, disponible sous forme de package distinct pour React:

npm install aws-amplify-react

Une fois que tout est installé côté client, vous pouvez configurer votre projet Amplify à l'aide de la CLI:

amplify init

Cela vous demandera quelques informations, telles que le nom de l'environnement (dev, prod, etc.), le type d'application que vous créez (JavaScript, React Native) et la configuration de la source et de la construction. Entrez tout ce dont vous avez besoin et Amplify prendra une seconde pour configurer votre backend.

Cela connectera Amplify à la console AWS, mais vous devrez effectuer une configuration supplémentaire pour que l'API soit opérationnelle.

Ajouter une API

Pour configurer le backend API d'Amplify, exécutez:

amplifier ajouter une API

Cela vous posera quelques questions, la première étant votre type d'API. Si vous souhaitez utiliser une API GraphQL ou Rest, vous devrez faire ce choix ici. Nous allons utiliser GraphQL.

Vous devrez également choisir un schéma d'authentification. Si vous ne faites que tester des éléments, vous pouvez choisir la clé API pour vous authentifier en développement. En production, cependant, vous souhaiterez probablement configurer AWS Cognito pour la gestion des utilisateurs et le lier à Amplify, qui est le schéma d'authentification recommandé pour les applications Amplify.

Vous serez invité à définir le schéma de votre API, qui s'ouvrira dans votre éditeur de texte par défaut. Amplify l'utilisera pour configurer DynamoDB.

Une fois que cela est configuré, exécutez amplify push pour envoyer les modifications dans le cloud. Amplify vous demandera si vous souhaitez qu'il crée les fonctions GraphQL pour interagir avec votre API, qui générera automatiquement les méthodes pour les requêtes, les abonnements et les mutations.

La première fois que vous poussez, une table DynamoDB sera provisionnée et configurée automatiquement. Vous pouvez afficher le tableau lui-même depuis la console Amplify:

Mais si vous souhaitez apporter des modifications au schéma, vous devrez le faire via la console. La configuration du backend d'Amplify est stockée dans:

project/amplify/backend/

avec la configuration de l'API stockée dans api/amplify. Si vous apportez des modifications et exécutez amplify push encore une fois, il apportera des modifications à la pile CloudFormation.

Pour utiliser votre API, vous pouvez importer PubSub depuis Amplify et le configurer pour utiliser la configuration dans laquelle Amplify a placé src/aws-exports.js

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

// Configure Amplify
API.configure(awsconfig);
PubSub.configure(awsconfig);

Vous pouvez ensuite utiliser l'objet API pour établir des connexions. Par exemple, si vous utilisez GraphQL, vous pouvez importer les méthodes de mutation et appeler l'une d'elles à l'aide de API.graphql(method):

import { createTodo } from './graphql/mutations';

async function createNewTodo() {
  const todo = { name: "new-item" , description: "Hello Amplify!" };
  await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

Publication de votre application Amplify

Vous êtes libre de distribuer votre application Amplify comme bon vous semble, mais si vous publiez une application Web, Amplify inclut certaines fonctions intégrées pour déployer automatiquement votre application sur S3. L'option par défaut est pour un environnement de développement sans HTTPS, mais elle peut également être configurée pour utiliser CloudFront. Une alternative à cela serait de configurer un pipeline de déploiement S3 automatisé à partir de CodePipeline, ou simplement de l'héberger sur un serveur Web existant à la place.

Si vous souhaitez déployer sur S3, ajoutez simplement la fonctionnalité d'hébergement Web à partir de la CLI:

amplify add hosting

Cela vous demandera si vous effectuez un déploiement en développement ou en production, et vous demandera l'index et les documents d'erreur pour votre site. Une fois que cela est configuré, exécutez amplify publish pour pousser une nouvelle pile CloudFormation.

Votre navigateur ouvrira le nouveau point de terminaison pour votre application, que vous pouvez ajouter à votre DNS avec un enregistrement CNAME ou un alias de compartiment Route 53.

★★★★★