How to Use Google Sheets as a Database with React and SSR

In diesem Tutorial erkläre ich, wie Sie Google Sheets als Datenbank verwenden, um die Ergebnisse einer Benutzerumfrage zu speichern. Ich habe diesen Google Sheets-Ansatz für eine Reihe von Marketingkampagnen verwendet. Ich habe mich aus einem Grund für diese Methode gegenüber einer traditionelleren Datenbanklösung entschieden: Datenabruf.

Es hängt natürlich ganz von Ihren Anforderungen ab, aber die Möglichkeit, einfach ein Google Sheet mit einem technischen oder nicht-technischen Mitglied meines Teams zu teilen – damit sie die erfassten Daten leicht sehen können – hat sich mehr als einmal als wirklich erwiesen wertvoll.

Daten werden vom Browser an eine serverlose Funktion gesendet, die sicher an ein Google-Blatt übermittelt wird, das die Daten speichert. Um Serverless Functions in React zu verwenden, kannst du entweder Next.js oder Gatsby verwenden.

Unter den folgenden Links finden Sie eine Live-Vorschau und ein GitHub-Repository für die abgeschlossenen Benutzerumfragen, die beide Frameworks verwenden.

Ich werde nicht behandeln, wie Sie mit beiden Frameworks beginnen, also konsultieren Sie bitte die Dokumentation, wenn Sie mit diesen Technologien nicht vertraut sind.

Was sind serverlose Funktionen?

Serverlose Funktionen ermöglichen es Frontend-Entwicklern, unseren Apps leistungsstarke „Backend“-Logik hinzuzufügen, indem sie einfach JavaScript schreiben – keine DevOps, keine Server, nur Ergebnisse. —Jason Lengstorf

Die Verwendung von Serverless Functions ermöglicht es Ihnen, Daten von Ihrem Frontend an Ihr „Backend“ im selben Projekt zu „posten“. Die Serverless-Funktion kann dann sicher an eine Datenbank „posten“, um Daten zu speichern.

Da sich die gesamte Geschäftslogik im „Backend“ befindet, werden die API-Schlüssel oder Geheimnisse, die zum Herstellen der Datenbankverbindung erforderlich sind, niemals dem Frontend/Benutzer/(dem Browser) offengelegt.

Der Weg, dies zu erreichen, unterscheidet sich geringfügig zwischen den Frameworks, aber die allgemeine Idee ist, eine „Seite“ zu haben, die das Senden der Anfrage an die „API“ handhabt.

Beispiel für eine serverlose Gatsby-Funktion

Die „Seite“ wird gespeichert src/pages/some-page.js und sendet eine Anfrage an die darin gespeicherte „API“. src/api/some-endpoint.js.

Du kannst das … sehen src für das Gatsby-Beispiel über die folgenden Links.

Irgendeine-Seite.js

some-endpoint.js

Ein erfolgreicher „Post“ würde Folgendes anzeigen, das in JSX mithilfe von HTML zurückgegeben wird <pre /> Element.

Beispiel für eine serverlose Next.js-Funktion

Die „Seite“ wird gespeichert Seiten/irgendeine-Seite.js und sendet eine Anfrage an die darin gespeicherte „API“. pages/api/some-endpoint.js

Du kannst das … sehen src für das Next.js-Beispiel mithilfe der folgenden Links.

Der Code für die Seite und die API sind für beide Frameworks gleich; der Unterschied zwischen den beiden ist die Verzeichnisstruktur.

In diesen Beispielen gibt die Serverless-Funktion einfach eine Zeichenfolge mithilfe von zurück name Wert, den es als Abfrageparameter erhält. In den Beispiel-Apps für Benutzerumfragen wird die Serverless-Funktion verwendet, um Daten an ein Google Sheet zu senden, um sie zu speichern und sicher aufzubewahren. Mehr dazu gleich.

So richten Sie Google Sheets ein

Bevor Sie mit dem Google Sheet beginnen, müssen Sie zunächst das einrichten, was Google als Dienstkonto bezeichnet. Weitere Informationen zu Dienstkonten finden Sie in den Google-Dokumenten: Grundlegendes zum Google-Dienstkonto

Erstellen Sie ein Google Cloud-Projekt

Der erste Schritt besteht darin, ein Projekt zu erstellen. Sie konfigurieren dieses Projekt so, dass es über einen Benutzer/eine E-Mail-Adresse eines Dienstkontos Zugriff auf die Google Sheets-API enthält, und verwenden es, um die erforderlichen API-Schlüssel zu generieren, die zum „Posten“ von Daten in das Google Sheet erforderlich sind.

Die Schritte zum Erstellen eines Google Cloud-Projekts sind in der folgenden Anleitung beschrieben: Gewähren Sie eine IAM-Rolle mithilfe der Google Cloud-Konsole.

1. Beginnen Sie mit dem obigen Link, indem Sie auf klicken Gehen Sie zur Projektauswahl Taste.
   
2. Jetzt klicken PROJEKT ERSTELLEN.
   
3. Geben Sie Ihrem Projekt einen Namen und klicken Sie SCHAFFEN.
   
4. Sie sollten jetzt zum Projekt-Dashboard weitergeleitet werden. Klick auf das APIs und Dienste Navigationselement in der Seitenleiste.
   
5. Jetzt können Sie den Zugriff auf die Google Sheets-API aktivieren. Drücke den + APIS UND DIENSTE AKTIVIEREN Taste.
   
6. Suchen Sie nach „Blätter“ und wählen Sie die aus Google Sheets-API.
   
7. Um den Zugriff auf die Google Tabellen-API zu aktivieren, klicken Sie auf “ERMÖGLICHEN” Taste.
   
8. Um die erforderlichen Anmeldeinformationen für die Google Sheets-API zu erstellen, klicken Sie auf ANMELDEDATEN ERSTELLEN Taste.
   
9. Wähle aus Google Sheets-API und überprüfe die Anwendungsdaten Radio knopf. Für die Zwecke dieses Tutorials können Sie antworten Nein zur letzten frage.
   
10. Die kannst du überspringen Ihre Anmeldeinformationen Schritt und klicken Sie auf ERLEDIGT Knopf, wenn Sie bereit sind.
    
11. Klick auf das Dienstkonten Navigationselement in der Seitenleiste. Erstellen Sie ein Dienstkonto für Ihr Projekt und geben Sie ihm ein Dienstkonto-ID.
    
12. Stellen Sie die ein Rolle zu Eigentümer. Sie können den letzten Schritt überspringen. Klicken ERLEDIGT wenn du bereit bist.
    
13. Klick auf das ICH BIN Navigationselement in der Seitenleiste. Überprüfen Sie, ob die Berechtigungen für Dienstkontodetails korrekt sind.
    
14. Klick auf das Dienstkonten Navigationselement in der Seitenleiste. Klicken Sie dann auf die mehr Punkte und auswählen Schlüssel verwalten.
    
15. Auf der SCHLÜSSEL Klicken Sie auf die Registerkarte SCHLÜSSEL HINZUFÜGEN Schaltfläche und klicken Sie dann Neuen Schlüssel erstellen.
    
16. Auswählen JSON als Schlüsseltyp und klicken Sie dann auf SCHAFFEN Schaltfläche, um eine .json-Datei herunterzuladen, die Ihre Schlüssel enthält.
    
17. Die .json-Datei, die Sie gerade heruntergeladen haben, sieht in etwa so aus wie unten. Die beiden Schlüssel, die Sie als Umgebungsvariablen speichern müssen, sind. privater_schlüssel und client_email.
    

In den Beispielprojekten habe ich die folgenden Umgebungsvariablen erstellt.

Weitere Informationen zum Konfigurieren von Umgebungsvariablen für Gatsby und Next.js finden Sie unter den folgenden Links.

Erstellen eines Google Sheets

Erstellen Sie ein neues Google Sheet und notieren Sie sich die Ich würde in der URL-Adressleiste.

Spaltenüberschriften zu Google Sheet hinzufügen

Sie können beliebig viele Überschriften hinzufügen. Es ist erwähnenswert, dass Leerzeichen durch Unterstriche ersetzt werden. Ich werde erklären, warum in einem späteren Schritt.

Teilen Sie das Google Sheet

Wenn Ihr neues Blatt erstellt ist, teilen Sie es mit der E-Mail-Adresse Ihres Dienstkontos / der client_email aus der .json-Datei. Stellen Sie sicher, dass das Dienstkonto verfügt Editor Zugang.

Erstellen einer Benutzerumfrage

Das Erstellen der Benutzerumfrage besteht aus zwei Teilen; Die Seite und die API.

• Die Seite enthält die UI-Elemente, mit denen der Benutzer abstimmen kann, und die visuellen Elemente, um die Geschäftswerte aus dem Google Sheet anzuzeigen.
• Die API empfängt Anfragen von der Seite, postet sie im Google Sheet und führt einige kleinere Berechnungen durch, bevor sie die Daten zurückgibt.

Erstellen der Seite

Erstellen Sie eine neue Seite und fügen Sie Folgendes hinzu.

Seitenkonfiguration und useState-Werte

In diesem Schritt erstellen Sie eine Konfiguration, die für den Text auf den Abstimmungsschaltflächen und einer verwendet wird id die Sie später verwenden, um die richtige Zelle in der Google-Tabelle anzusteuern. Wie bereits erwähnt, die id‘s sollten keine Leerzeichen enthalten.

Es gibt auch eine Reihe von useState Werte, die den Status der Anwendung enthalten, bevor, während und nachdem eine Anfrage an die API gestellt wurde.

Hinzufügen der „Click“-Handler-Funktion

Diese Funktion akzeptiert eine id und übergibt es als Abfrageparameter an die API-Anfrage; auch genannt id.

Wenn die Antwort in Ordnung ist, speichern Sie das Ergebnis in der useState Wert. Die anderen Staaten für isSubmitting und hasVoted werden ebenfalls aktualisiert.

Wenn die Antwort fehlschlägt, wird der Fehlerzustand aktualisiert.

Hinzufügen der Schnittstelle

Die Schnittstelle hat zwei Zustände. Die ersten sind die Schaltflächen, mit denen ein Benutzer abstimmen kann, die zweiten sind die Ergebnisse. Du kannst den … benutzen hasVoted state-Wert, um zu bestimmen, welcher Zustand gerendert werden soll.

Um die Schaltflächen zu erstellen, können Sie die Konfigurationsoptionen durchlaufen. Der Name ist der Text, der auf der Schaltfläche und der angezeigt wird id wird als Argument für die verwendet onClick Funktion.

Um die Ergebnisse zu erstellen, können Sie die Ergebnisse aus der API durchlaufen, jeden der Werte anzeigen und das „Balkendiagramm“ mit dem Prozentsatz skalieren. Zusätzliches Styling könnte durch die Verwendung von hinzugefügt werden isMax Wert, der entweder sein wird true oder false (abhängig von der Anzahl der Stimmen).

Erstellen der API

Installieren Sie die Google-Spreadsheet-Abhängigkeit

Erstellen Sie die serverlose Funktion

• Importieren (erfordern) Sie die Google-Spreadsheet-Abhängigkeit.
• Erstellen Sie eine neue Konstante namens doc und stellen Sie mithilfe des GoogleSpreadsheet-Konstruktors die GOOGLE_SHEET_ID Umgebungsvariable.
• Destrukturieren Sie die id aus dem Abfrageparameter und fügen Sie einen try catch hinzu. Sie können einen Fehler ausgeben, wenn die id entfällt bei der Anfrage.
• await die doc-Autorisierung mit useServiceAccountAuth. Stellen Sie ähnlich wie oben die erforderlichen Umgebungsvariablen bereit.
• Fügen Sie die Erfolgs- und Fehlerantworten hinzu.

Weitere Informationen zu den grundlegenden Konfigurationsoptionen finden Sie in den Google-Sheet-Dokumenten.

Lesen und aktualisieren Sie das Google Sheet

• Erstellen Sie eine neue Konstante namens sheet. Dadurch werden Daten aus dem ersten in Ihrem Google Sheet definierten Tab gelesen.
• Erstellen Sie eine neue Konstante namens rows. Dadurch werden die verfügbaren Zeilen aus dem Blatt gelesen.
• Erstellen Sie eine neue Konstante namens raw_data. Dies sind die Werte aus der ersten Zeile im Blatt.
• Erstellen Sie eine neue Konstante namens header_values. Dies sind die Werte aus der im Blatt definierten Kopfzeile.
• Erstellen Sie eine neue Konstante namens row_value. Dies ist der Wert für die spezifische Zelle. Das id from query parameter wird verwendet, um auf die richtige Zelle abzuzielen.

Sie können jetzt den Wert in der Zelle aktualisieren, indem Sie den Wert um +1 erhöhen, und die Daten dann wieder im Blatt speichern.

Berechnung der Stimmen

In diesem Schritt berechnen Sie basierend auf den Werten aus dem Blatt einige neue zurückzugebende Werte.

• Erstellen Sie eine neue Konstante namens total</cide>. This sums up the total votes across all cells. This value is used to calculate the percentage value for each cell. 
• Erstellen Sie eine neue Konstante namens max. Dies ist die Zelle mit dem höchsten Wert aus dem Blatt. Dies wird verwendet, um zu bestimmen, ob der Zellenwert der höchste Wert im Blatt ist.
• Erstellen Sie eine neue Konstante namens results und iteriere über die header_values. Sie können die „nachschlagen“. raw_data Verwenden Sie den Indexwert, um die Anzahl zu bestimmen, und geben Sie dann die berechneten Werte zurück.

Sie können jetzt die Ergebnisse und die Summe in der Antwort an den Browser zurücksenden.

Fertig

Die fertige Seiten-API finden Sie unter den folgenden Links für beide Frameworks.

Alle von der Serverless-Funktion zurückgegebenen Werte helfen dabei, den zuvor definierten Anwendungsstatus zu bestimmen und aufzufüllen.

Alle Fehler sollten behandelt werden, um sicherzustellen, dass die Anwendung nicht abstürzt, falls die Google-API aus irgendeinem Grund fehlschlägt.

Danke fürs Lesen, und wenn Sie Fragen haben, besuchen Sie mich bitte auf Twitter: @PaulieScanlon oder besuchen Sie meine Seite paulie.dev, wo ich mehr React/Jamstack-Tutorials habe.

Weiterführende Lektüre