Erstellen Sie einen Projektordner und initialisieren Sie ein neues npm-Projekt:<\/p>\n
\r\nmkdir mail-list && cd mail-list\r\nnpm init -y\r\n<\/pre>\nDadurch wird die Datei package.json f\u00fcr die Installation von Abh\u00e4ngigkeiten vorbereitet. Installieren Sie ein paar Pakete, die wir brauchen:<\/p>\n
\r\nnpm install google-spreadsheet dotenv\r\n<\/pre>\nDas erste ist google-spreadsheet, eine JavaScript-Bibliothek f\u00fcr die Arbeit mit Google Spreadsheets. Das zweite, dotenv, ist ein Paket, das es uns erm\u00f6glicht, Werte aus einer .env-Datei im Stammverzeichnis unseres Projekts zu laden und sie dem Knotenskript bereitzustellen.<\/p>\n
Schritt 4: Aktivieren Sie die Google Sheets-API und erstellen Sie ein Dienstkonto<\/h5>\n Erstellen Sie \u00fcber das Men\u00fc oben ein neues Projekt.<\/p>\n<\/figure>\n<\/figure>\n<\/figure>\nNachdem Sie alle diese Schritte abgeschlossen haben, m\u00fcssen Sie ein Dienstkonto erstellen. Mit diesem Konto erhalten Sie eine Reihe von Anmeldeinformationen mit den erforderlichen Berechtigungen f\u00fcr den Zugriff auf die API.<\/p>\n
Klicken Sie in der linken Seitenleiste auf IAM und Administrator und dann auf Dienstkonten. Klicken Sie auf der Seite auf \u201eDienstkonto erstellen\u201c. F\u00fcllen Sie das Formular aus, indem Sie einen Namen f\u00fcr das Dienstkonto ausw\u00e4hlen. Der gew\u00e4hlte Name und der Projektname werden Teil der Dienstkonto-ID.<\/p>\n<\/figure>\nW\u00e4hlen Sie JSON als Schl\u00fcsseltyp aus. Klicken Sie auf die Schaltfl\u00e4che ERSTELLEN und die JSON-Schl\u00fcsseldatei wird auf Ihren Computer heruntergeladen.<\/p>\n
Schritt 5. Erstellen Sie die Registrierungsformularseite<\/h5>\n Erstellen Sie in Ihrem Projektordner eine index.html-Datei mit folgendem Inhalt:<\/p>\n
\r\n\n\r\n\r\n\tRegistration form<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/www.hongkiat.com\/blog\/serverless-app-with-netlify-javascript\/style.css\">\r\n<\/head>\r\n<body>\r\n\t<form action=\"\/.netlify\/functions\/subscribe\" method=\"post\">\r\n\t<div>\r\n\t\t<p>Subscribe to my newsletter<\/p>\r\n\t<\/div>\r\n\t<div>\r\n\t\t<input type=\"text\" class=\"button\" id=\"name\" name=\"name\" placeholder=\"Name\"><\/br>\r\n\t\t<input type=\"text\" class=\"button\" id=\"email\" name=\"email\" placeholder=\"Enter your email\"><\/br>\r\n\t\t<input type=\"submit\" class=\"button\" id=\"submit\" value=\"Click on this to sign up\">\r\n\t<\/div>\r\n\t<\/form>\r\n<\/body>\n<\/html> \r\n<\/pre>\n<h5>Schritt 6: F\u00fcgen Sie eine serverlose Funktion hinzu, um das Formular zu verarbeiten<\/h5>\n<p>In dieser Datei greifen wir auf das Dienstkonto zu, laden die Tabelle, empfangen Daten vom Kunden (Benutzername und E-Mail-Adresse) und schreiben diese Daten in die Tabelle. <\/p>\n<p>Bevor wir die Benutzerdaten schreiben, pr\u00fcfen wir, ob die vom Benutzer angegebene E-Mail nicht in der Tabelle enthalten ist. Sollte dies nicht der Fall sein, informieren wir den Nutzer dar\u00fcber, dass er die Updates bereits abonniert hat.<\/p>\n<pre name=\"code\" class=\"javascript\">\r\nrequire('dotenv').config()\r\nconst { GoogleSpreadsheet } = require('google-spreadsheet')\r\nexports.handler = async (event) => {\r\n const doc = new GoogleSpreadsheet(process.env.GOOGLE_SPREADSHEET_ID)\r\n try {\r\n await doc.useServiceAccountAuth({\r\n client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,\r\n private_key: process.env.GOOGLE_PRIVATE_KEY.replace(\/\\\\n\/g, '\\n')\r\n })\r\n await doc.loadInfo()\r\n const sheet = doc.sheetsByIndex[0]\r\n const data = JSON.parse(event.body)\r\n const rows = await sheet.getRows()\r\n if (rows.some((row) => row.email === data.email)) {\r\n const response = {\r\n statusCode: 400,\r\n body: 'The email is already in use'\r\n }\r\n return response\r\n }\r\n await sheet.addRow(data)\r\n const response = {\r\n statusCode: 200,\r\n body: \u2018Thank you, your subscription has been completed!'\r\n }\r\n return response\r\n } catch (err) {\r\n console.error(err)\r\n const response = {\r\n statusCode: 500,\r\n body: 'Error, maybe the problem will be resolved later'\r\n }\r\n }\r\n return response\r\n }\r\n}\r\n<\/pre>\n<p>Um die Funktion lokal zu testen, m\u00fcssen wir eine .env-Datei im Projektstammverzeichnis erstellen und einige Variablen hinzuf\u00fcgen:<\/p>\n<pre name=\"code\" class=\"bash\">\r\nGOOGLE_SERVICE_ACCOUNT_EMAIL=your_client_email\r\nGOOGLE_PRIVATE_KEY=your_private_key\r\nGOOGLE_SPREADSHEET_ID=your_spreadsheet_id<\/pre>\n<p>Die E-Mail-Adresse des Dienstkontos ist diejenige, die Sie in Schritt 4 erstellt haben, und der private Schl\u00fcssel stammt aus der JSON-Schl\u00fcsseldatei, die Sie heruntergeladen haben. Die letzte, die Tabellen-ID, erhalten wir im n\u00e4chsten Schritt.<\/p>\n<h5>Schritt 7. Erstellen Sie eine Tabelle und teilen Sie sie<\/h5>\n<p>Erstellen Sie eine neue Tabelle in Google Sheets. Es spielt keine Rolle, welchen Titel Sie ihm geben, aber notieren Sie sich die URL-ID und f\u00fcgen Sie sie der .env-Datei hinzu, die Sie im letzten Schritt erstellt haben.<\/p>\n<p>F\u00fcgen Sie in der ersten Zeile der Tabelle zwei Spalten\u00fcberschriften hinzu: Name und E-Mail (beachten Sie, dass die Gro\u00df- und Kleinschreibung mit den Eingabenamen des HTML-Formulars \u00fcbereinstimmen muss). Die durch die Serverless-Funktion erstellten Eintr\u00e4ge werden unten als zus\u00e4tzliche Zeilen hinzugef\u00fcgt.<\/p>\n<p>Sie m\u00fcssen nun dem von Ihnen erstellten Dienstkonto die Berechtigung erteilen, auf die Tabelle zuzugreifen. Klicken Sie auf die Schaltfl\u00e4che \u201eTeilen\u201c und geben Sie die E-Mail-Adresse des Dienstkontos in das Eingabefeld ein. Stellen Sie sicher, dass Sie Editorrechte vergeben.<\/p>\n<h5>Schritt 8. \u00dcberpr\u00fcfen Sie die Funktionalit\u00e4t der Anwendung.<\/h5>\n<p>Um die Anwendung zu starten und die Funktion zu initialisieren, m\u00fcssen Sie lediglich den folgenden Befehl ausf\u00fchren:<\/p>\n<pre name=\"code\" class=\"bash\">netlify dev<\/pre>\n<p>F\u00fcllen Sie die Formularfelder aus, best\u00e4tigen Sie und klicken Sie erneut auf \u201eKlicken Sie hier, um sich zu registrieren\u201c. Es wird zur Erfolgsseite weitergeleitet, gefolgt von einer weiteren Weiterleitung zur Hauptseite. Wenn wir die Tabelle \u00f6ffnen, sehen wir die eingegebenen Daten.<\/p>\n<h4>Abschluss<\/h4>\n<p>Serverlose Funktionen ersetzen nicht alle Serverteile, sind aber eine \u00e4u\u00dferst leistungsstarke Option f\u00fcr die Verwaltung der Mid-Tier-Entwicklung. Ein serverloses System vermeidet unerw\u00fcnschte Komplexit\u00e4t, die zu organisatorischen Engp\u00e4ssen und schwerwiegenden Leistungsproblemen f\u00fchren kann.<\/p>\n ","protected":false},"excerpt":{"rendered":"<p>Der Begriff \u201eserverlos\u201c wird Sie sicherlich neugierig machen, wenn Sie ihn zum ersten Mal h\u00f6ren. Sie fragen sich vielleicht: \u201eWie f\u00fchre ich Code im Internet ohne Server aus?\u201c Das bedeutet in Wirklichkeit, dass Sie sich als Entwickler keine Sorgen um die Server machen m\u00fcssen, auf denen Ihr Code ausgef\u00fchrt wird. Der serverlose Anbieter abstrahiert Hardwarebereitstellung, […]<\/p>\n","protected":false},"author":1,"featured_media":881427,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/3_content_3F_Hero-768x419-1.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/881426"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=881426"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/881426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/881427"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=881426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=881426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=881426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}