Jamstack mit React, Serverless und Airtable gehen

Lernen durch Bau! Dieses Tutorial zeigt die Jamstack -Architektur, indem eine React -Anwendung mit netlify serverlosen Funktionen und Airtable erstellt wird. Während Jamstack das statische Hosting betont, zeigt dieses Projekt dynamische Funktionen, einschließlich der vollständigen CRUD -Funktionalität.

Technologische Auswahlmöglichkeiten

Jamstack, der JavaScript, APIs und Markup repräsentiert, nutzt vorhandene Technologien auf neuartige Weise. Der Technologiestapel dieses Tutorials priorisiert die einfache Bereitstellung und Hosting. Netlify -Funktionen behandeln Backend -CRUD -Operationen mit Airtable, wodurch eine nahtlose Bereitstellung für Netlify ermöglicht wird. Airtable vereinfacht die Datenbankverwaltung und bietet eine benutzerfreundliche Schnittstelle und JavaScript SDK an, wodurch die Notwendigkeit separater Datenbank-Hosting und -verwaltung beseitigt wird.

Anwendungsübersicht

Diese Bewerbung verfolgt Online -Kurse und wirkt sich wie eine persönliche Lernwarteschlange. Es ermöglicht Benutzern, Kurse hinzuzufügen, zu aktualisieren, als gekaufte und zu löschen.

Quellcode: Ich erstelle Online-Kurse, einschließlich eines neuen zum Erstellen sicherer, produktionsbereiteter Jamstack-Anwendungen mit React- und Netlify-Funktionen. Dieser Kurs behandelt die Authentifizierung, die Lufttable -Datenspeicherung, die gestalteten Komponenten, die Netlify CI und mehr. Erfahren Sie mehr →

Airtable Setup

Airtable verwendet "Basen" für Datenbanken. Folgen Sie folgenden Schritten:

1. Erstellen Sie ein kostenloses Airtable -Konto.
2. Erstellen Sie eine neue Basis (ich nannte meine "Jamstack -Demos").
3. Erstellen Sie eine Tabelle mit dem Namen "Kurse" mit diesen Spalten:
   • name (einzelner Zeilentext)
   • link (einzelner Zeilentext)
   • tags (mehrere ausgewählte - Tags wie "Knoten", "React", "Jamstack", "JavaScript")
   • purchased (Kontrollkästchen)
4. Fügen Sie einige Beispielkursdaten hinzu.

Airtable -Anmeldeinformationen erhalten

Sammeln Sie vor dem Codieren diese Airtable -Anmeldeinformationen:

1. API -Schlüssel: Auf Ihrer Seite "Airtable Account Übersicht" gefunden.
2. Basis -ID: Befindet sich auf der Airtable -API -Seite innerhalb Ihrer Basisdetails.
3. Tabellenname: (zB "Kurse")

Projekt -Setup

Ein Starterprojekt ist auf GitHub erhältlich. Folgen Sie folgenden Schritten:

1. Geben Sie das Repository auf.
2. Klonen Sie das Gabel -Repository lokal.
3. Checkout the starter Branch ( git checkout starter ).

Das Projekt enthält eine create-react-app Struktur, ein functions für serverlose Funktionen und eine netlify.toml -Konfigurationsdatei. Installieren Sie das dotenv -Paket:

 NPM dotenv installieren

Erstellen Sie eine .env -Datei im Projektroot mit Ihren Airtable -Anmeldeinformationen:

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

Serverlose Funktionen

Netlify -Funktionen sind JavaScript -Dateien im Verzeichnis /functions . Die Datei courses.js fungiert als Haupt -API -Endpunkt. Es verwendet Helferfunktionen ( getCourses , createCourse , updateCourse , deleteCourse ) basierend auf HTTP -Methoden:

 exports.handler = async (Ereignis) => {
  if (event.httpMethod === 'get') {
    Rückgabe warten GetCourse (Event);
  } // ... Andere HTTP -Methoden
};

Die Datei airtable.js -Datei konfiguriert die Airtable -Verbindung:

 erfordern ('dotenv'). config ();
var airtable = required ('airtable');
// ... Airtable Basis und Tabellenaufbau ...

Crud Operations

Die Helferfunktionen interagieren mit Airtable:

• getCourses.js : Ruft Kurse mit table.select().firstPage() , behandelt Fehler und formatiert die Antwort.
• createCourse.js : Erstellt einen neuen Kurs mit table.create() .
• updateCourse.js : Aktualisiert einen Kurs über table.update() .
• deleteCourse.js : Löscht einen Kurs mit table.destroy() .

Testen: Verwenden Sie netlify dev um die Funktionen lokal auszuführen. Testen Sie Endpunkte mit Tools wie Postman oder Schlaflosigkeit.

Frontend reagieren

Die React -Anwendung interagiert mit den serverlosen Funktionen:

• App.js : loadCourses Abrufenkurse mit fetch('/api/courses') .
• CourseForm.js : submitCourse sendet Postanfragen zum Erstellen neuer Kurse.
• Course.js : markCoursePurchased sendet Put -Anfragen und deleteCourse sendet Löschanfragen.

Bereitstellung zu netlify

Bereitstellen in NetLify, indem Sie Ihr Github -Repository verbinden. Angeben:

• Befehl erstellen: npm run build
• Veröffentlichung Verzeichnis: build
• Fügen Sie Umgebungsvariablen aus Ihrer .env -Datei hinzu.

Abschluss

Dieses Tutorial zeigt die Einfachheit und Kraft der Jamstack -Architektur. Die Kombination von React, Netlify-Funktionen und Airtable bietet eine robuste und einfach einsetzbare Vollstapelanwendung. Entdecken Sie andere Jamstack -Dienste und -Technologien, um Ihren Entwicklungsworkflow weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonJamstack mit React, Serverless und Airtable gehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!