We Bouwen een JAMstack E-Commerce Winkel met Netlify Functies

0
17

Veel mensen zijn verward over wat JAMstack is. De afkorting staat voor JavaScript, Api ‘ s en Markeringen, maar echt, JAMstack niet alle drie. Wat bepaalt JAMstack is dat het geserveerd zonder web servers. Als je kijkt naar de geschiedenis van de computer, is deze vorm van abstractie is niet onnatuurlijk; maar het is de onvermijdelijke vooruitgang van deze industrie is de richting.

Dus, als JAMstack heeft de neiging om statische per definitie, het kan niet zo zijn dynamische functionaliteit, server-side events, of het gebruik van een JavaScript framework, toch? Gelukkig niet zo. In deze tutorial zullen we het opzetten van een JAMstack e-commerce app en voeg wat serverloze functionaliteit met Netlify de Functies die abstracte AWS Lambda, en zijn super dope in mijn mening).

Ik zal je laten zien, meer direct hoe de Nuxt/Vue deel werd opgericht in een follow-up post, maar voor nu gaan we de focus op de Streep serverloze functie. Ik zal je laten zien hoe ik deze één van, en we zullen ook praten over hoe om verbinding te maken met andere static site generators, zoals Gatsby.

Deze site en repo moet u aan de slag als u wilt instellen dat iets als dit eens:

Demo Website

GitHub Repo

De steiger van onze app

De eerste stap is het opzetten van onze app. Deze is gebouwd met Nuxt maken van een Vue-app, maar u kunt de plaats van deze opdrachten met uw technologie-stack van de keuze:

garen maken nuxt-app

hub maken

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

git push -u oorsprong master

Ik ben het gebruik van garen, hub (die me in staat stelt tot het maken van repo ‘ s vanaf de commando-regel) en Nuxt. U kan nodig zijn om deze hulpprogramma ‘ s installeert, lokaal of wereldwijd, voordat u verdergaat.

Met deze paar opdrachten, het volgen van de aanwijzingen, kunnen we het opzetten van een geheel nieuwe Nuxt project evenals de repo.

Als we log in Netlify en verifiëren, zal het vragen ons om te kiezen van een repo:

Ik zal gebruik maken van garen genereren om het project te maken. Met dat ik kan toevoegen aan de site-instellingen voor Nuxt in de dist-map en druk feploy! Dat is alles wat er nodig is om tot CI/CD en implementeren van de site! Nu elke keer als ik druk op de master branch, zal niet alleen de implementatie, maar ik krijgt een unieke link voor die bepaalde implementeren ook. Zo geweldig.

Een basic serverloze functie met Netlify

Dus hier is het spannend, want de setup voor dit soort functionaliteit is zo snel! Als u niet bekend bent met de server is niet vereist, u kunt het zien als hetzelfde JavaScript-functies die u kent en liefde, maar op de server wordt uitgevoerd. Serverloze functies zijn event-gedreven logica en hun prijzen zeer laag is (niet alleen op Netlify, maar de industrie-breed) en een weegschaal met uw verbruik. En ja, we hebben het toevoegen van de qualifier hier: serverloze nog steeds gebruik maakt van de servers, maar babysit hen is niet langer uw werk. We gaan aan de slag.

Onze zeer basic-functie ziet er zo uit. Ik mijn opgeslagen in een map met de naam van functies, en net noemde het index.js. Kunt u echt bellen het map en de functie wat je wilt.

// functions/index.js
de export.handler = async (event, context) => {
terug {
statusCode: 200,
lichaam: JSON.stringify({
bericht: “Hallo taco ‘s”,
gebeurtenis
})
}
}

We moeten ook het maken van een netlify.toml-bestand in de hoofdmap van het project en laat het weten in welke map om de functie in, welke in dit geval is “functies”.

// netlify.toml
[bouwen]
functies = “functies”

Als we op naar de meester en ga in het dashboard, kunt u het afhalen van de functie!

Als je kijkt naar het eindpunt die hierboven wordt hier opgeslagen:
https://ecommerce-netlify.netlify.com/.netlify/functions/index

Echt, voor elke site die je geeft, de URL volgt dit patroon:
https:/<yoursiteurlhere>/.netlify/functies/<functienaam>

Wanneer we op dat eindpunt, het geeft ons met het bericht dat we doorgegeven, evenals alle gegevens van de gebeurtenis hebben we ook vastgelegd:

Ik hou van hoe weinig werk is dat! Dit stukje code geeft ons oneindige kracht en de mogelijkheden voor rijke, dynamische functionaliteit op onze websites.

Haak Streep

Koppeling met Streep is erg leuk, want het is makkelijk te gebruiken, geavanceerde, grote documenten, en de werken goed met serverloze functies. Ik heb andere tutorials waar ik vroeger Streep, want ik geniet van het gebruik van hun service zo veel.

Hier is een bird ‘ s eye view van de app zullen we het gebouw:

Eerst gaan we naar de Streep dashboard en krijgen onze sleutels. Voor iedereen die helemaal scandalized nu, het is OK, dit zijn testen toetsen. U kunt ze gebruiken, maar je leert meer als je ze instellen op uw eigen. (Het is twee keer klikken en ik beloof het is niet moeilijk om te volgen langs vanaf hier.)

We installeren van een pakket met de naam dotenv die ons zal helpen onze belangrijkste winkel en test het lokaal. Dan zullen we slaan onze Streep geheime sleutel om een Streep variabele. (U kunt het noemen van alles, maar hier heb ik noemde het STRIPE_SECRET_KEY, en dat is vrij veel industrie-standaard.)

garen toevoegen dotenv
require(“dotenv”).config()

const streep = require(“streep”)(proces.env.STRIPE_SECRET_KEY)

In de Netlify dashboard, gaan we naar “Bouwen & implementeren” en vervolgens “Milieu” toe te voegen in de Omgeving van de variabelen, waar de STRIPE_SECRET_KEY is de sleutel, en zal de waarde van de sleutel die begint met sk.

We zullen ook toevoegen in sommige koppen, zodat we niet in CORS problemen. We zullen deze headers gebruiken in de functie die we gaan bouwen.

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

Zo, nu maken we de functionaliteit voor het gesprek Streep. We zullen zorgen dat we hanteren in de gevallen dat het niet de HTTP-methode, verwachten we, en ook dat krijgen we de informatie die we verwachten.

U kunt al zie hier welke gegevens we nodig hebben om te versturen streep door wat wij controleren voor. We moeten de token, is het totale bedrag, en een idempotency toets.

Als u niet bekend bent met idempotency toetsen, ze zijn unieke waarden die worden gegenereerd door een klant en verstuurd naar een API, samen met een verzoek in het geval dat de verbinding is verbroken. Als de server ontvangt een oproep, dat het altijd een dubbele, negeert het verzoek en reageert met een succesvolle status code. Oh, en het is een onmogelijk woord om uit te spreken.

de export.handler = async (event, context) => {
if (!evenement.lichaam || gebeurtenis.httpMethod !== “POST”) {
terug {
statusCode: 400,
koppen,
lichaam: JSON.stringify({
status: “ongeldige http-methode”
})
}
}

const data = JSON.parse(evenement.lichaam)

if (!de gegevens.stripeToken || !de gegevens.stripeAmt || !de gegevens.stripeIdempotency) {
console.fout(“Vereiste informatie ontbreekt.”)

terug {
statusCode: 400,
koppen,
lichaam: JSON.stringify({
status: “ontbrekende informatie”
})
}
}

Nu, we ‘ ll kick-off van de Streep de verwerking van de betaling! We maken een Streep klant via de e-mail en de token, een beetje te loggen, en maak vervolgens de Streep kosten. We geven op de munt, het bedrag, e-mail, klant-ID en een beschrijving geven terwijl we toch bezig zijn. Tot slot, wij bieden je de idempotency toets (uitgesproken als eye-dem-po-ten-zien), en log dat het succesvol was.

(Hoewel het hier niet weergegeven, zullen we ook doen wat de afhandeling van fouten.)

// streep de verwerking van de betaling begint hier
proberen {
wachten op de streep.klanten
.maken({
e-mail: data.stripeEmail,
bron: gegevens.stripeToken
})
.vervolgens(klant => {
console.log(
`het starten van de kosten, amt: ${gegevens.stripeAmt}, e-mail: ${gegevens.stripeEmail}`
)
terug streep.kosten
.maak(
{
munt: ‘eur’,
bedrag: gegevens.stripeAmt,
receipt_email: gegevens.stripeEmail,
klant: de klant.id,
beschrijving: “de steekproeflast”
},
{
idempotency_key: gegevens.stripeIdempotency
}
)
.vervolgens(resultaat => {
console.log(`Kosten gemaakt: ${gevolg}`)
})
})

Het aansluiten op de Nuxt

Als we terugkijken op onze aanvraag, u kunt zien hebben we pagina ‘s en componenten die leven in de pagina’ s. De Vuex winkel als de hersenen van onze applicatie. Het houdt de staat van de app, en dat is wat er zal communiceren met Streep. Echter, we moeten nog steeds om te communiceren met de gebruikers via de opdrachtgever. We verzamelen de credit card gegevens in een onderdeel met de naam AppCard.vue die live op de winkelwagen pagina.

Eerst zullen we de installatie van een pakket genaamd vue-streep-elementen-plus, dat geeft ons enkele Streep formulier elementen die ons in staat stellen te verzamelen credit card gegevens, en ook stelt het ons met een betaal methode die ons in staat stelt tot het maken van penningen voor de streep de verwerking van de betaling. We voegen ook een bibliotheek genoemd uuid die ons toelaten zal om het genereren van unieke sleutels, die we gebruiken voor de idempotency toets.

garen toevoegen vue-streep-elementen-plus uuid

De standaard installatie geeft hij ons om te werken met een vue-streep-elementen-plus ziet er zo uit:

<sjabloon>
<div id=’app’>
<h1>geef ons uw betaalgegevens in:</h1>
<card class=’streep-kaart’
:class='{ compleet }’
streep=’pk_test_XXXXXXXXXXXXXXXXXXXXXXXX’
:opties=’stripeOptions’
@change=’voltooid = $gebeurtenis.complete’
/>
<button class= “pay-met-de-streep’ @klik=’betalen’ :disabled=’!complete’>Betalen met creditcard</button>
</div>
</template>
<script>
importeren { stripeKey, stripeOptions } uit ‘./stripeConfig.json’
importeren { Kaart, createToken } van ‘vue-streep-elementen-plus’

export standaard {
gegevens () {
terug {
compleet: false,
stripeOptions: {
// zie https://stripe.com/docs/stripe.js#element-options voor details
}
}
},

onderdelen: { Kaart },

methoden: {
betalen () {
// createToken geeft een Belofte die wordt omgezet in een resultaat object met
// een token of een fout toets.
// Zie https://stripe.com/docs/api#tokens voor de token object.
// Zie https://stripe.com/docs/api#errors voor de fout object.
// Meer algemene https://stripe.com/docs/stripe.js#stripe-create-token.
createToken().vervolgens(gegevens => console.log(data.token))
}
}
}
</script>

Dus hier is wat we gaan doen. We gaan voor het bijwerken van de vorm voor het opslaan van de e-mail van klanten, en het bijwerken van de betaal methode voor het verzenden en het token of fout-toets om de Vuex store. We zullen de verzending van een actie te doen.

gegevens() {
terug {

stripeEmail: “”
};
},
methoden: {
betalen() {
createToken().vervolgens(gegevens => {
const stripeData = { gegevens, stripeEmail: dit.stripeEmail };
deze.$store.verzending(“postStripeFunction”, stripeData);
});
},

Dat postStripeFunction actie wordt verzonden ziet er zo uit:

// Vuex winkel
export const actions = {
async postStripeFunction({ getters, plegen }, laadvermogen) {
commit(“updateCartUI”, “laden”)

proberen {
wachten axios
.post(
“https://ecommerce-netlify.netlify.com/.netlify/functions/index”,
{
stripeEmail: laadvermogen.stripeEmail,
stripeAmt: Math.verdieping(getters.cartTotal * 100), //dat het verwacht dat de prijs in cents
stripeToken: “tok_visa”, //het testen van token, later zouden we het gebruik van het laadvermogen.de gegevens.token
stripeIdempotency: uuidv1() //we gebruik deze bibliotheek voor het maken van een unieke id
},
{
headers: {
“Content-Type”: “application/json”
}
}
)
.vervolgens(res => {
als (res.status === 200) {
commit(“updateCartUI”, “succes”)
setTimeout(() => commit(“clearCart”), 3000)

We gaan voor het bijwerken van de UI staat te laden terwijl we verwerking. Vervolgens gebruiken we axios post aan onze functie-eindpunt (de URL die je al eerder zag in de post, wanneer we onze functie). Wij sturen per e-mail, de ama, de token en het unieke sleutel die we gebouwd om de functie te verwachten.

Als het dan is gelukt, we updaten de UI staat om dat te weerspiegelen.

Een laatste opmerking die ik geef is dat bewaar ik de UI staat in een string, in plaats van een boolean-waarde zijn. Ik begin meestal met iets als “inactief” en, in dit geval, zal ik ook hebben “laden,” ‘succes’ en ‘ mislukking.” Ik maak geen gebruik van boolean staten, want ik heb zelden geconfronteerd met een situatie waar de UI staat heeft slechts twee staten. Wanneer u werkt met booleans voor dit doel, je de neiging om in te breken in steeds meer staten, en voor het controleren van alle van hen kan steeds ingewikkelder.

Zoals het nu is, ik kan wijzigingen in de GEBRUIKERSINTERFACE op de winkelwagen pagina leesbare voorwaarden, zoals deze:

de sectie <sectie v-als=”cartUIStatus === ‘inactief'”>
<app-cart-display />
</section>

de sectie <sectie v-anders-als=”cartUIStatus === ‘laden'” class=”loader”>
<app-loader />
</section>

de sectie <sectie v-anders-als=”cartUIStatus === ‘success'” class=”succes”>
<h2>Succes!</h2>
<p>Bedankt voor uw aankoop. U zult worden ontvangen met uw items in 4 werkdagen.</p>
<p>iets Vergeten?</p>

<button class=”pay-met-streep”>
<nuxt-link exacte to=”/”>Terug naar Home</nuxt-link>
</button>
</section>

de sectie <sectie v-anders-als=”cartUIStatus === ‘fout'”>
<p>Oeps, er ging iets mis. U wordt omgeleid naar uw winkelwagentje om het opnieuw te proberen.</p>
</section>

En daar heb je het! We zijn alle set-up en running te accepteren betalingen met een streep op een Nuxt, Vue site met een Netlify functie, en het was niet eens zo ingewikkeld te stellen!

Gatsby Toepassingen

We gebruikten Nuxt in dit geval maar als u wilde opzetten dezelfde soort functionaliteit met iets dat maakt gebruik van Reageren zoals Gatsby, er is een plugin voor. (Alles is plug-in Gatsby. ☺️)

Je zou installeren met het commando:

garen toevoegen gatsby-plugin-netlify-functies

…en de plugin toevoegen aan uw toepassing, zoals deze:

plugins: [
{
oplossen: `gatsby-plugin-netlify-functies`,
opties: {
functionsSrc: `${__dirname}/src/functies`,
functionsOutput: `${__dirname}/functies`,
},
},
]

De serverloze functie die wordt gebruikt in deze demo is recht omhoog JavaScript, dus het is ook draagbaar te Reageren toepassingen. Er is een plugin voor het toevoegen van de Streep script aan uw Gatsby app (nogmaals, alles is een plugin). Eerlijke waarschuwing: hiermee wordt het script op elke pagina op de site. Voor het verzamelen van de credit card informatie op de client, gebruikt u Reageren Streep Elementen, die vergelijkbaar is met de Vue we boven.

Zorg ervoor dat u bent het verzamelen van de cliënt en het doorgeven van alle informatie in de functie wordt verwacht:

  • De gebruiker e-mail
  • Het totale bedrag, in cents
  • De token
  • De idempotency toets

Demo Website

GitHub Repo

Met een dergelijke lage toetredingsdrempel, zie je hoe je echt dynamische ervaringen met JAMstack toepassingen. Het is verbazingwekkend hoeveel je kunt bereiken zonder de kosten voor onderhoud van de servers. Streep en Netlify Functies maken het instellen van de verwerking van de betaling in een statische toepassing (bijvoorbeeld een gladde developer ervaring!