Wir Bauen ein JAMstack E-Commerce-Shop mit Netlify Funktionen

0
9

Eine Menge Leute sind verwirrt über das, was JAMstack ist. Die Abkürzung steht für JavaScript, APIs und Markup, aber wirklich, JAMstack nicht alle drei. Was definiert JAMstack ist, dass es serviert, ohne web-Server. Wenn man die Geschichte der Computer, ist diese Art der Abstraktion ist nicht unnatürlich, sondern es ist das unvermeidliche Fortschreiten dieser Industrie wurde in Richtung.

Also, wenn JAMstack tendenziell statisch sein, per definition, kann es keine dynamische Funktionalität, server-side-events, oder verwenden Sie ein JavaScript-framework, richtig? Zum Glück nicht so. In diesem tutorial werden wir ein JAMstack e-commerce-app und fügen Sie einige serverlose Funktionalität mit Netlify Funktionen (die abstrakte AWS Lambda, und sind super dope meiner Meinung nach).

Ich werde zeigen, mehr direkt, wie die Nuxt/Vue Teil wurde in einer follow-up-post, aber jetzt konzentrieren wir uns auf die Streifen serverlose Funktion. Ich werde Ihnen zeigen, wie ich diese ein, und wir werden auch darüber sprechen, wie eine Verbindung zu anderen statischen Website-Generatoren, wie Gatsby.

Diese Website und repo sollte Ihnen den Einstieg, wenn Sie möchten, legen Sie etwas, das wie diese selber:

Demo-Website

GitHub Repo

Gerüst unserer app

Der erste Schritt ist das einrichten unserer app. Dieser ist gebaut mit Nuxt zu erstellen a Vue app, aber Sie können ersetzen Sie diese Befehle mit Ihrem tech-stack der Wahl:

Garn erstellen nuxt-app

hub erstellen

git add-A
git commit -m “initial commit”

git push -u origin master

Ich bin mit Garn, hub (ermöglicht mir das erstellen repos von der Kommandozeile) und Nuxt. Sie müssen möglicherweise installieren Sie diese tools lokal oder Global bevor Sie fortfahren.

Mit diesen wenigen Befehlen, Folgen Sie den Anweisungen, können wir einen völlig neuen Nuxt Projekt als auch für die repo.

Wenn wir anmelden Netlify und zu authentifizieren, es wird uns Fragen zur Auswahl eines repo:

Ich verwende Garn erzeugen, um das Projekt zu erstellen. Mit, dass, ich kann in den site Einstellungen für Nuxt in das dist-Verzeichnis und drücken feploy! Das ist alles was es braucht, um einzurichten, CI/CD und die Bereitstellung der Website! Jetzt jedes mal, wenn ich push auf den master-Zweig, nicht nur werde ich bereitstellen, aber ich werde einen eindeutigen link, dass insbesondere die Bereitstellung als gut. So genial.

Eine grundlegende serverlose Funktion mit Netlify

Hier also der spannende Teil, da das setup für diese Art von Funktionalität ist so schnell! Wenn Sie nicht vertraut sind mit Serverlose, Sie können betrachten Sie es wie die gleiche JavaScript-Funktionen, die Sie kennen und lieben, aber auf dem server ausgeführt. Serverlose Funktionen ereignisgesteuerte Logik und Ihrer Preisgestaltung extrem niedrig ist (und nicht nur auf Netlify, sondern die Industrie-weit) und die Waage mit Ihrem Gebrauch. Und ja, wir müssen den qualifier hier: serverlose verwendet immer noch den Server, aber Baby Ihnen ist nicht mehr Ihr job. Lassen Sie uns begonnen erhalten.

Unsere sehr grundlegende Funktion sieht wie folgt aus. Ich gespeichert, die mir in einem Ordner namens Funktionen, kurz genannt index.js. Man kann wirklich nennen sich die Ordner und Funktion, was Sie wollen.

// functions/index.js
die Exporte.handler = async (event, context) => {
return {
statusCode: 200,
Körper: JSON.stringify({
Nachricht: “Hallo Tacos”,
event
})
}
}

Wir müssen auch schaffen, ein netlify.toml-Datei im Stammverzeichnis des Projektes und lassen Sie es wissen, in welchem Verzeichnis zu finden ist die Funktion, die in diesem Fall ist “Funktionen”.

// netlify.toml
[build]
functions = “Funktionen”

Wenn wir push-to-master und gehen in das dashboard können Sie sehen, es pick-up-Funktion!

Wenn man sich die aufgeführten Endpunkt oben ist es hier gespeichert:
https://ecommerce-netlify.netlify.com/.netlify/functions/index

Wirklich, für jede Website, die Sie geben es, die URL hat Folgendes Muster:
https:/<yoursiteurlhere>/.netlify/Funktionen/<functionname>

Wenn wir uns treffen, dass der Endpunkt, stellt es uns mit der Nachricht, die wir übergeben, sowie alle event-Daten, die wir protokolliert:

Ich Liebe, wie wenige Schritte! Dieses kleine Stück code, gibt uns unendliche Kraft und Fähigkeiten für reiche, dynamische Funktionalität auf unseren Seiten.

Hook up Stripe

Die Kopplung mit Streifen ist extrem Spaß, weil es einfach zu bedienen, elegant, hat eine große docs, und der arbeiten gut mit serverlose Funktionen. Ich habe andere tutorials, wo ich Streifen, weil ich genieße, den Dienst zu nutzen, so viel.

Hier ein Blick aus der Vogelperspektive auf die app, die wir bauen:

Zuerst gehen wir zum Stripe dashboard und bekommen unseren Schlüssel. Für jemand, der völlig schockiert jetzt, es ist OK, dies sind die Test-keys. Sie können Sie auch, aber Sie werden mehr lernen, wenn Sie Sie auf Ihre eigenen. (Es sind zwei Klicks, und ich verspreche, es ist nicht schwer zu Folgen, von hier aus.)

Installieren wir ein Paket namens dotenv, die uns helfen, speichern unsere Schlüssel und testen Sie es vor Ort. Dann, wir speichern unsere Stripe secret key, um ein Streifen-variable. (Sie können es nennen, alles, aber hier habe ich die Bezeichnung STRIPE_SECRET_KEY, und das ist ziemlich viel Industrie-standard.)

Garn hinzufügen dotenv
require(“dotenv”).config()

const Streifen = require(“Streifen”) (- Prozess.env.STRIPE_SECRET_KEY)

In der Netlify dashboard, fahren wir dann zu “Build & deploy” und dann auf “Umwelt” zu erweitern-Umgebung Variablen, in denen die STRIPE_SECRET_KEY ist der Schlüssel und der Wert ist der Schlüssel, der beginnt mit sk.

Wir werden auch hinzufügen, einige Kopf-also wir laufen nicht in CORS Probleme. Wir werden diese Header nutzen, während die Funktion, die wir gehen, um zu bauen.

const Header = {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Headers”: “”Content-Type”
}

So, jetzt erstellen wir die Funktionalität für das Gespräch zu Streifen. Wir stellen sicher, dass wir werden behandeln die Fälle, dass es nicht die HTTP-Methode, die wir erwarten, und auch, dass wir immer die Informationen, die wir erwarten.

Sie sehen schon hier, welche Daten wir benötigen, um senden zu Streifen durch das, was wir prüfen. Wir müssen die token, die Gesamtmenge und ein idempotenz-Taste.

Wenn Sie nicht vertraut sind mit idempotenz Tasten, Sie sind einzigartige Werte, die erzeugt werden durch einen client und an eine API zusammen mit einem Antrag im Fall der Verbindung ist gestört. Wenn der server erhält einen Anruf, dass es realisiert wurde, ist ein Duplikat ist, wird es ignoriert die Anforderung und antwortet mit einem erfolgreichen Statuscode. Oh, und es ist unmöglich ein Wort auszusprechen.

die Exporte.handler = async (event, context) => {
if (!event.Körper || event.httpMethod !== “POST”) {
return {
statusCode: 400,
Header,
Körper: JSON.stringify({
status: “ungültige http-Methode”
})
}
}

const data = JSON.parse(event.Körper)

if (!Daten.stripeToken || !Daten.stripeAmt || !Daten.stripeIdempotency) {
console.Fehlermeldung(“Erforderliche Informationen fehlen.”)

return {
statusCode: 400,
Header,
Körper: JSON.stringify({
status: “fehlende Informationen”
})
}
}

Nun, wir werden kick-off der Streifen Zahlungsabwicklung! Wir erstellen ein Streifen-Kunden mit dem E-Mail-und token, ein wenig die Protokollierung, und erstellen Sie dann die Streifen berechnen. Wir werden spezifizieren Sie die Währung, Betrag, E-Mail, Kunden-ID, und geben Sie eine Beschreibung ein, während wir an sind es. Schließlich bieten wir die idempotenz key (ausgesprochen eye-dem-po-ten-sehen), und melden Sie, dass es erfolgreich war.

(Es ist zwar nicht gezeigt, hier werden wir auch einige Fehler im handling.)

// Streifen Zahlungsabwicklung beginnt hier
try {
warten auf Streifen.Kunden
.create({
E-Mail: Daten.stripeEmail,
Quelle: Daten.stripeToken
})
.dann(Kunde => {
console.log(
`starten der Gebühren, amt: ${data.stripeAmt}, E-Mail: ${data.stripeEmail}`
)
zurück Streifen.Gebühren
.create(
{
Währung: “usd”,
Menge: Daten.stripeAmt,
receipt_email: Daten.stripeEmail,
Kunde: Kunde.id,
Beschreibung: “Probe Kostenlos”
},
{
idempotency_key: Daten.stripeIdempotency
}
)
.dann(Ergebnis => {
console.log(`Ladung erzeugt: ${Ergebnis}`)
})
})

Es Haken bis zu Nuxt

Wenn wir zurückblicken auf unsere Anwendung, die Sie sehen können, haben wir die Seiten und Komponenten, die sich in die Seiten. Die Vuex-Shop ist wie das Gehirn unserer Anwendung. Es wird halten Sie den Zustand der app, und das ist, was die Kommunikation mit Streifen. Aber wir müssen noch an der Kommunikation mit unseren Nutzer über den client. Wir sammeln die Daten der Kreditkarte in einer Komponente namens AppCard.vue, das Leben auf der Warenkorb-Seite.

Zuerst installieren wir das Paket namens vue-Streifen-Elemente-plus, das gibt uns eine Stripe-form-Elemente, die uns erlauben, zu sammeln, Daten der Kreditkarte, und sogar sets, die uns mit einem zahlen-Methode, die uns erlaubt, erstellen von tokens für Streifen-Zahlungsabwicklung. Wir werden auch hinzufügen, eine Bibliothek namens uuid, die es uns ermöglichen zu erzeugen eindeutiger Schlüssel, die wir verwenden werden, für die idempotenz-Taste.

Garn hinzufügen vue-Streifen-Elemente-plus uuid

Die Standard-setup-geben Sie uns für die Arbeit mit vue-Streifen-Elemente-plus sieht wie folgt aus:

<Vorlage>
<div id= “app”>
<h1>Bitte geben Sie uns Ihre Zahlungs-details:</h1>
<card class=’Streifen-Karte”
:Klasse='{ complete }’
Streifen=’pk_test_XXXXXXXXXXXXXXXXXXXXXXXX’
:options=’stripeOptions’
@change=’complete = $event.komplette’
/>
<button class=’bezahlen-mit-Streifen” @click= “bezahlen”: deaktiviert=’!komplette’>mit Kreditkarte Bezahlen</button>
</div>
</template>
<script>
import { stripeKey, stripeOptions } from ‘./stripeConfig.json’
import {- Karte, createToken } von ‘vue-Streifen-Elemente-plus”

export default {
Daten () {
return {
komplett: false,
stripeOptions: {
// siehe https://stripe.com/docs/stripe.js#element-options für details
}
}
},

components: { Karte },

Methoden: {
pay () {
// createToken gibt eine Verheißung, die sich auflöst in ein Ergebnis-Objekt mit
// entweder ein token oder ein Fehler Schlüssel.
// Siehe https://stripe.com/docs/api#tokens für das token-Objekt.
// Siehe https://stripe.com/docs/api#errors für das error-Objekt.
// Allgemeiner https://stripe.com/docs/stripe.js#stripe-create-token.
createToken().dann(Daten => Konsole.log(data.token))
}
}
}
</script>

So, hier ist, was wir tun. Wir aktualisieren Sie das Formular speichern, um die E-Mails Ihrer Kunden, und aktualisieren Sie die zahlen-Methode zu senden, und das token oder error-Taste, um die Vuex-Shop. Wir werden Versand eine Aktion zu tun.

Daten() {
return {

stripeEmail: “”
};
},
Methoden: {
pay() {
createToken().dann(data => {
const stripeData = { Daten, stripeEmail: dies.stripeEmail };
das.$store.dispatch(“postStripeFunction”, stripeData);
});
},

Dass postStripeFunction Maßnahmen, die wir ausgelöst, die wie folgt aussieht:

// Vuex-Shop
export const Aktionen = {
async postStripeFunction({ get, commit }, payload) {
commit(“updateCartUI”, “laden”)

try {
erwarten axios
.post – (
“https://ecommerce-netlify.netlify.com/.netlify/functions/index”,
{
stripeEmail: Nutzlast.stripeEmail,
stripeAmt: Math.Stock(Getter.cartTotal * 100), //er erwartet, dass der Preis in Cent
stripeToken: “tok_visa”, //Prüf-token), später verwenden wir würden Nutzlast.Daten.token
stripeIdempotency: uuidv1() //wir verwenden diese Bibliothek für das erstellen einer eindeutigen id
},
{
Header: {
“Content-Type”: “application/json”
}
}
)
.dann(res => {
if (res.status === 200) {
commit(“updateCartUI”, “Erfolg”)
setTimeout(() => commit(“clearCart”), 3000)

Wir gehen zum aktualisieren der UI-state zu laden, während wir gerade Bearbeiten. Dann verwenden wir axios zur post, um unsere Funktion Endpunkt (die URL, die Sie bereits gesehen haben, in die post, wenn wir unsere Funktion). Wir senden über email, das amt, das token und die eindeutigen Schlüssel, den wir gebaut haben, die Funktion zu erwarten.

Dann, wenn es erfolgreich war, aktualisieren wir den UI-Status zu reflektieren.

Eine Letzte Anmerkung, die ich geben werde, ist, dass ich die UI-state in einem string, anstatt einen booleschen Wert. Ich in der Regel beginnen Sie mit so etwas wie “Leerlauf”, und in diesem Fall, ich werde auch noch “loading”,” “Erfolg” und “Versagen”. Ich glaube nicht, verwenden Sie Boolesche Staaten, denn ich habe selten erlebt, eine situation, wo UI-Staat hat nur zwei Zustände. Wenn du mit booleans für diesen Zweck, Sie neigen dazu, zu brechen müssen Sie sich in mehr und mehr Staaten, und die Prüfung für alle von Ihnen bekommen können, zunehmend kompliziert.

So wie es da steht, kann ich die änderungen in der Benutzeroberfläche auf der Warenkorb-Seite mit gut lesbaren Bedingungen, wie diese:

<section v-if=”cartUIStatus === ‘idle'”>
<app-Warenkorb-Anzeige />
</section>

<section v-else-if=”cartUIStatus === ‘be'” class=”loader”>
<app-loader />
</section>

<section v-else-if=”cartUIStatus === ‘success'” class=”success”>
<h2>Success!</h2>
<p>vielen Dank für Ihren Kauf. Werden Sie Ihren Artikel erhalten, in 4 Arbeitstagen.</p>
<p>haben Sie etwas Vergessen?</p>

<button class=”pay-with-Streifen”>
<nuxt-link genau zu=”/”>Zurück zur Startseite</nuxt-link>
</button>
</section>

<section v-else-if=”cartUIStatus === ‘Fehler'”>
<p>Hoppla, etwas ist schiefgelaufen. Umleiten Sie zu Ihrem Warenkorb, um erneut zu versuchen.</p>
</section>

Und dort haben Sie es! Wir sind alle einrichten und ausführen von Zahlungen mit Streifen auf einer Nuxt, Vue Website mit einem Netlify Funktion, und es war auch nicht so kompliziert einzurichten!

Gatsby-Anwendungen

Wir verwendet Nuxt in diesem Fall aber, wenn Sie wollte, um die gleiche Art von Funktionalität, die mit etwas verwendet Reagieren wie Gatsby, gibt es ein plugin für, dass. (Alles ist plugin in Gatsby. ☺️)

Installieren Sie es mit diesem Befehl:

Garn hinzufügen gatsby-plugin-netlify-Funktionen

…und fügen Sie das plugin auf Ihre Anwendung wie diese:

plugins: [
{
behoben: `gatsby-plugin-netlify-Funktionen`,
Optionen: {
functionsSrc: `${__dirname}/src/Funktionen`,
functionsOutput: `${__dirname}/ – Funktionen”,
},
},
]

Die serverlose Funktion, die in dieser demo ist gerade auf JavaScript, also ist es auch tragbar zu Reagieren Anwendungen. Gibt es ein plugin zum hinzufügen der Streifen script Gatsby-app (mal wieder, alles ist ein plugin). Faire Warnung: dies fügt das Skript auf jeder Seite auf der Website. Sammeln Sie die Kreditkarten-Informationen auf dem client, die Sie verwenden würden, Reagieren Streifen-Elemente, die ähnlich wie der Vue ein, die wir oben verwendet.

Nur stellen Sie sicher, dass Sie sammeln von den Kunden und übergeben alle Informationen, die die Funktion erwartet wird:

  • Die Benutzer-E-Mails
  • Der Gesamtbetrag in Cent
  • Die token
  • Die idempotenz Schlüssel

Demo-Website

GitHub Repo

Mit solch eine niedrige Barriere zum Eintrag, können Sie sehen, wie Sie wirklich dynamische Erfahrungen mit JAMstack Anwendungen. Es ist erstaunlich, wie viel man erreichen kann ohne Wartungskosten von Servern. Streifen und Netlify Funktionen machen die Einrichtung Zahlungsabwicklung in einer statischen Anwendung wie eine glatte Entwickler Erfahrung!