AWS Amplify

Un framework complet pour développer et déployer rapidement des applications cloud, en intégrant facilement les services AWS dans vos projets web et mobiles.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce qu'AWS Amplify ?

Imaginez que vous souhaitez construire une maison. Vous aurez besoin de différents corps de métier : maçons, électriciens, plombiers, etc. Chacun est spécialisé et il faut coordonner leur travail.

AWS Amplify joue le rôle d'un entrepreneur général qui simplifie la construction d'applications numériques. Il vous offre une boîte à outils complète et coordonnée pour intégrer facilement de nombreux services AWS dans votre application.

Pourquoi Amplify est utile ?

Simplicité

Transforme des tâches complexes (comme l'authentification ou le stockage de données) en fonctionnalités faciles à ajouter à vos applications.

Tout-en-un

Couvre tous les aspects du développement d'une application, de la création du code à son déploiement en production.

En termes simples, AWS Amplify permet aux développeurs de créer des applications cloud complètes plus rapidement, en offrant une interface qui masque la complexité des technologies sous-jacentes.

Pour les développeurs

Composants et fonctionnement

AWS Amplify est composé de trois éléments principaux qui peuvent être utilisés ensemble ou séparément :

Les piliers d'Amplify

Amplify CLI

Interface en ligne de commande qui permet de configurer les services AWS pour votre application et de générer le code nécessaire.

Installation et configuration d'Amplify

// Installation d'Amplify CLI
npm install -g @aws-amplify/cli

// Initialisation du projet
amplify init

// Installation d'Amplify dans votre projet
npm install aws-amplify

Amplify Libraries

Bibliothèques de code pour JavaScript, iOS et Android qui facilitent l'intégration des services AWS dans votre code.

Frameworks supportés

React / React Native
Angular
Vue.js
Next.js
iOS (Swift)
Android (Kotlin/Java)

Catégories principales

Authentication
API (REST & GraphQL)
Storage
Analytics
Predictions (AI/ML)
DataStore (offline/sync)

Amplify Hosting

Service d'hébergement et de CI/CD pour applications web frontend et servies via un CDN global. Permet de déployer rapidement des applications React, Angular, Vue.js ou tout autre site statique.

Déploiement continu depuis GitHub, GitLab ou BitBucket
Aperçus pour chaque branche (preview environments)
Domaines personnalisés avec HTTPS automatique
Authentification basée sur les rôles
Tests sur différents appareils et navigateurs

Exemples d'utilisation pratiques

Authentification utilisateur

Mise en place d'un système d'authentification avec Cognito, y compris l'inscription, la connexion, et la récupération de mot de passe :

Authentification avec Amplify

// Ajout de l'authentification à votre projet
amplify add auth

// Configuration dans votre application React/React Native
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

// Configuration d'Amplify
Amplify.configure(awsconfig);

// Composant principal avec authentification
function App() {
  return (
    <div>
      <h1>Contenu protégé par authentification</h1>
    </div>
  );
}

// Exporter le composant avec l'authentificateur
export default withAuthenticator(App);

APIs GraphQL

Création et utilisation d'une API GraphQL avec AWS AppSync :

API GraphQL avec Amplify

// Ajout d'une API à votre projet
amplify add api

// Exemple d'utilisation d'une API GraphQL dans React
import { API, graphqlOperation } from 'aws-amplify';
import { createTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';
import { useEffect, useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  
  // Charger les todos
  useEffect(() => {
    fetchTodos();
  }, []);
  
  async function fetchTodos() {
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos));
      setTodos(todoData.data.listTodos.items);
    } catch (err) {
      console.log('Erreur lors du chargement des todos:', err);
    }
  }
  
  async function addTodo(title) {
    try {
      const todo = { title };
      await API.graphql(graphqlOperation(createTodo, { input: todo }));
      fetchTodos(); // Actualiser la liste
    } catch (err) {
      console.log('Erreur lors de la création du todo:', err);
    }
  }
  
  return (
    <div>
      {/* Interface utilisateur pour afficher et ajouter des todos */}
    </div>
  );
}

Stockage de fichiers

Gestion du stockage de fichiers avec Amazon S3 :

Stockage avec Amplify

// Ajout du stockage à votre projet
amplify add storage

// Utilisation du stockage dans une application
import { Storage } from 'aws-amplify';

// Téléverser un fichier
async function uploadFile(file) {
  try {
    const result = await Storage.put(file.name, file, {
      contentType: file.type,
      level: 'public' // ou 'private' ou 'protected'
    });
    console.log('Fichier téléversé avec succès:', result);
    return result.key;
  } catch (error) {
    console.error('Erreur lors du téléversement:', error);
    throw error;
  }
}

// Récupérer un fichier
async function getFile(key) {
  try {
    const url = await Storage.get(key);
    return url;
  } catch (error) {
    console.error('Erreur lors de la récupération du fichier:', error);
    throw error;
  }
}

Applications concrètes

Cas d'usage

Applications mobiles

Développement d'applications mobiles avec authentification, stockage hors ligne et synchronisation automatique des données.

Applications web SPA

Création d'applications React, Angular ou Vue.js complètes avec déploiement continu et stockage d'actifs média.

Tableau de bord analytique

Construction d'interfaces d'analyse avec collecte et visualisation de données en temps réel et authentification sécurisée.

Prototypage rapide

Développement accéléré de prototypes fonctionnels et d'applications MVP avec tous les services cloud nécessaires.

Avantages et limitations

Avantages

Développement accéléré - Réduction significative du temps de développement
Architecture cohérente - Bonnes pratiques intégrées
Évolutivité - S'adapte de quelques utilisateurs à des millions
Intégration complète - Travaille harmonieusement avec les services AWS
Support multi-plateformes - Web et applications mobiles natives

Limitations

Flexibilité limitée - Peut être restrictif pour des besoins très spécifiques
Couplage à AWS - Crée une dépendance aux services AWS
Courbe d'apprentissage - Bien que simplifié, nécessite d'apprendre le système
Potentiel de sur-abstraction - Peut masquer des concepts importants pour les débutants