Aller Jamstack avec React, sans serveur et Airtable

Apprenez en construisant! Ce tutoriel démontre l'architecture JAMSTACK en créant une application React avec des fonctions sans serveur NetLify et AirTable. Alors que Jamstack met l'accent sur l'hébergement statique, ce projet présente des capacités dynamiques, y compris la fonctionnalité complète de CRUD.

Choix technologiques

Jamstack, représentant JavaScript, API et Markup, exploite les technologies existantes d'une manière nouvelle. La pile technologique de ce tutoriel hiérarchise la facilité de déploiement et d'hébergement. Les fonctions Netlify gèrent les opérations de crud backend avec Airtable, permettant un déploiement transparent sur Netlify. Airtable simplifie la gestion de la base de données, offrant une interface conviviale et un SDK JavaScript, éliminant le besoin d'hébergement et de gestion de la base de données séparés.

Aperçu de l'application

Cette application suit les cours en ligne, agissant comme une file d'attente d'apprentissage personnelle. Il permet aux utilisateurs d'ajouter, de mettre à jour, de marquer comme acheté et de supprimer les cours.

Code source: Je crée des cours en ligne, y compris une nouvelle sur les applications Jamstack sécurisées et prêtes à la production en utilisant les fonctions React et Netlify. Ce cours couvre l'authentification, le stockage de données Airtable, les composants stylisés, le Netlify CI, etc. En savoir plus →

Configuration aérienne

Airtable utilise des "bases" pour les bases de données. Suivez ces étapes:

1. Créez un compte Airtable gratuit.
2. Créez une nouvelle base (j'ai nommé les miens "Jamstack Demos").
3. Créez une table nommée "cours" avec ces colonnes:
   • name (texte unique)
   • link (texte à ligne unique)
   • tags (plusieurs sélections - Ajouter des balises comme "nœud"
   • purchased (case à cocher)
4. Ajoutez quelques exemples de données de cours.

Obtenir des références Airtable

Avant de coder, rassemblez ces informations d'identification Airtable:

1. Clé API: trouvé sur votre page de vue d'ensemble de compte AirTable.
2. ID de base: Situé sur la page de l'API Airtable, dans vos détails de base.
3. Nom de la table: (par exemple, "cours")

Configuration du projet

Un projet de démarrage est disponible sur GitHub. Suivez ces étapes:

1. Fourk le référentiel.
2. Clone le référentiel fourchu localement.
3. Découvrez la branche starter ( git checkout starter ).

Le projet comprend une structure create-react-app , un répertoire functions pour les fonctions sans serveur et un fichier de configuration netlify.toml . Installez le package dotenv :

 NPM Installer Dotenv

Créez un fichier .env dans la racine du projet avec vos informations d'identification AirTable:

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

Fonctions sans serveur

Les fonctions Netlify sont des fichiers JavaScript dans le répertoire /functions . Le fichier courses.js agit comme point de terminaison de l'API principal. Il utilise des fonctions d'assistance ( getCourses , createCourse , updateCourse , deleteCourse ) basée sur les méthodes HTTP:

 exports.handler = async (événement) => {
  if (event.httpMethod === 'Get') {
    RETOUR AWAIT GetCourses (événement);
  } // ... Autres méthodes HTTP
};

Le fichier airtable.js configure la connexion AirTable:

 require ('dotenv'). config ();
var AirTable = require ('AirTable');
// ... Configuration de la base et de la table Airtable ...

Opérations CRUD

Les fonctions d'assistance interagissent avec Airtable:

• getCourses.js : récupère les cours à l'aide de table.select().firstPage() , gère les erreurs et formats la réponse.
• createCourse.js : crée un nouveau cours en utilisant table.create() .
• updateCourse.js : met à jour un cours à l'aide de table.update() .
• deleteCourse.js : supprime un cours en utilisant table.destroy() .

Test: Utilisez netlify dev pour exécuter les fonctions localement. Testez des points de terminaison à l'aide d'outils comme Postman ou Insomnia.

React frontend

L'application React interagit avec les fonctions sans serveur:

• App.js : loadCourses récupèrent des cours en utilisant fetch('/api/courses') .
• CourseForm.js : submitCourse envoie des demandes de poste pour créer de nouveaux cours.
• Course.js : markCoursePurchased envoie des demandes de put et deleteCourse envoie des demandes de suppression.

Déploiement à Netlify

Déploiement sur Netlify en connectant votre référentiel GitHub. Spécifier:

• Commande de construction: npm run build
• Publier le répertoire: build
• Ajoutez des variables d'environnement de votre fichier .env .

Conclusion

Ce tutoriel montre la simplicité et la puissance de l'architecture Jamstack. La combinaison de React, Netlify Functions et AirTable fournit une application complète robuste et facilement déployable. Explorez d'autres services et technologies Jamstack pour améliorer encore votre flux de travail de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!