Het bouwen van een Full-Stack Serverloze Toepassing met Cloudflare Werknemers

0
19

Een van mijn favoriete ontwikkelingen in software-ontwikkeling is de komst van een server is niet vereist. Als een ontwikkelaar die heeft een neiging om te verzanden in de details van de implementatie en DevOps, het is verfrissend om een wijze van bouwen van web-applicaties die gewoon abstracts schalen en infrastructuur, weg van mij. Serverloze heeft mij beter eigenlijk verzending projecten!

Dat gezegd zijnde, als je nieuw bent in serverloze, het kan onduidelijk hoe aan het vertalen van de dingen die je al weet in een nieuw paradigma. Als je een front-end developer, mag u geen ervaring hebt met wat serverloze beweert te abstract was verwijderd, dus hoe doe je zelfs aan de slag?

Vandaag, zal ik proberen te helpen demystificeren van het praktische gedeelte van het werken met serverloze door het nemen van een project, van idee tot de productie, het gebruik van Cloudflare Werknemers. Ons project zal worden dagelijks leaderboard, genaamd “Repo Jacht” geïnspireerd door sites als Product Jagen en Reddit, waar gebruikers kunnen indienen en upvote cool open-source projecten van GitHub en GitLab. U kunt zien dat de definitieve versie van de site, hier gepubliceerd.

Werknemers is een van de serverloze application platform gebouwd op de top van het Cloudflare netwerk. Bij het publiceren van een project te Cloudflare Werknemers, het is onmiddellijk verdeeld over 180 (en groeiende) steden over de hele wereld, wat betekent dat ongeacht waar uw gebruikers zijn gelegen, uw Werknemers toepassing zal worden bediend vanaf een nabijgelegen Cloudflare server met een extreem lage latency. Op de top van dat, de Werknemers-team heeft all-in gegaan op de developer-ervaring: onze nieuwste release, aan het begin van deze maand introduceerde een volledig-featured command line tool genaamd Wrangler, die het beheer van het gebouw, het uploaden en publiceren van uw server is niet vereist voor toepassingen met een paar makkelijk te leren en krachtige commando ‘ s.

Het eindresultaat is een platform waarmee u eenvoudig het schrijven van JavaScript en implementeren in een URL – geen zorgen meer over wat “Dokwerker” betekent, of als uw aanvraag zal vallen wanneer het op de voorpagina van de Hacker News!

Als u het type bent die wil zien van het project van tevoren, vóór hoppen in een lange tutorial, heb je geluk! De bron voor dit project is beschikbaar op GitHub. Met dat, laten we springen in op de commando-regel en iets op te bouwen rad.

Het installeren van Wrangler en het voorbereiden van onze werkruimte

Wrangler is de command-line tool voor het genereren, bouwen en publiceren van Cloudflare Werknemers projecten. We hebben het super makkelijk te installeren, vooral als je hebt gewerkt met npm voor:

npm installeren -g @cloudflare/wrangler

Als je eenmaal hebt geïnstalleerd, Wrangler, kunt u gebruik maken van het genereren opdracht voor het maken van een nieuw project. Wrangler projecten gebruik maken van “templates” die code repositories gebouwd voor re-gebruik door ontwikkelaars gebouw met de Werknemers. Wij onderhouden een groeiende lijst van sjablonen om u te helpen bij de bouw van alle soorten projecten in de Werknemers: bekijk onze Template Gallery aan de slag!

In deze tutorial gebruiken we de “Router” – sjabloon, waarmee u te bouwen op basis van de URL projecten op de top van de Werknemers. Het genereren commando heeft twee argumenten: ten eerste, de naam van uw project (ik maak gebruik van repo-hunt), en een Git URL. Dit is mijn favoriete deel van de opdracht genereren: u kunt gebruik maken van alle soorten sjablonen door te wijzen Wrangler op GitHub URL, dus delen, af, en het samenwerken aan sjablonen is super eenvoudig. Laten we het uitvoeren van de opdracht genereren nu:

wrangler genereren repo-hunt https://github.com/cloudflare/worker-template-router
cd-repo ‘ s jagen

De Router sjabloon bevat ondersteuning voor het bouwen van projecten met webpack, zodat u kunt toevoegen npm modules aan uw project, en het gebruik van de JavaScript-tooling u kennen en liefhebben. Bovendien, als je zou verwachten, is de sjabloon bevat een Router klasse, die het mogelijk maakt u te behandelen routes in uw Werknemer, en binden ze aan een functie. Laten we eens kijken naar een simpel voorbeeld: het opzetten van een exemplaar van de Router, de behandeling van een GET-verzoek naar / en het retourneren van een antwoord naar de client:

// index.js
const Router = require(‘./router’)

addEventListener(‘halen’, event => {
evenement.respondWith(handleRequest(event.aanvraag))
})

asynchrone functie handleRequest(aanvraag) {
proberen {
const r = nieuwe Router()
r.get(‘/’, () => nieuw Antwoord(“Hello, world!”))
const resp = wachten r.route(verzoek)
terug resp
} catch (err) {
return new Reactie(err)
}
}

Alle Werknemers toepassingen beginnen door te luisteren naar de fetch-evenement, dat is een verzoek van een klant voor uw toepassing. In dat geval luisteraar, is het gebruikelijk om te bellen met een handleRequest functie, die kijkt naar het binnenkomend verzoek en bepaalt hoe te reageren. Bij het hanteren van een inkomende halen evenement, dat geeft een binnenkomende aanvraag, een Werknemers-script moet altijd terug met een Antwoord aan de gebruiker: het is een soortgelijke vraag/antwoord-patroon te veel web-frameworks, zoals Express, dus als je hebt gewerkt met web frameworks voor, het voelt heel vertrouwd!

In ons voorbeeld zullen we gebruik maken van een paar routes: een “root” route (/), die zal maken op de homepage van onze website; een formulier voor het indienen van nieuwe repo ‘ s, aan /post, een speciale route voor het accepteren van de POST-aanvragen, wanneer een gebruiker een repo van het formulier, aan /repo.

Het bouwen van een route en het renderen van een sjabloon

De eerste route die we stellen is de “root” – route op het pad /. Dit zal worden waar repo ‘ s die door de gemeenschap zal worden weergegeven. Voor nu, laten we een aantal praktijk het bepalen van een route, en de terugkeer van HTML. Dit patroon is vaak voor te komen bij Werknemers toepassingen dat het zinvol is om te begrijpen voor het eerst, voor we verder gaan met wat meer interessante stukjes!

Om te beginnen, werken we index.js om een exemplaar van een Router, verwerken KRIJGEN verzoeken voor /, en het aanroepen van de functie index, van handlers/index.js (meer volgt binnenkort):

// index.js
const Router = require(‘./router’)
const-index = require(‘./handlers/index’)

addEventListener(‘halen’, event => {
evenement.respondWith(handleRequest(event.aanvraag))
})

functie handleRequest(aanvraag) {
proberen {
const r = nieuwe Router()
r.get(‘/’, index)
return r.route(verzoek)
} catch (err) {
return new Reactie(err)
}
}

Zoals met het voorbeeld index.js in de vorige paragraaf, is onze code luistert naar een fetch-evenement, en reageert door te bellen met de handleRequest functie. De handleRequest functie stelt een exemplaar van de Router, die de functie index op alle aanvragen naar / te maken. Met de installatie van de router, die we de route van de binnenkomende aanvragen, met behulp van r.route en terug als het antwoord naar de client. Als er iets mis gaat, zijn we gewoon wikkel de inhoud van de functie in een try/catch blok, en de terugkeer van de fout aan de opdrachtgever (een opmerking hierbij: in productie-applicaties, wilt u misschien iets meer robuuste hier, zoals te loggen om een uitzondering monitoring tool).

Om verder te gaan met het opzetten van onze route handler, we maken een nieuw bestand aan, handlers/index.js die zal het binnenkomend verzoek en de terugkeer van een HTML-antwoord naar de client:

// handlers/index.js
const headers = { ‘Content-Type’: ‘text/html’ }
const-handler = () => {
return new Reactie(“Hello, world!” { kop })
}
de module.export = handler

Onze handler functie is eenvoudig: het geeft een nieuw exemplaar van de Reactie met de tekst “Hello, world!” evenals een kop-object dat stelt de Content-Type header tekst/html – dit vertelt de browser om te zorgen dat de inkomende reactie als een HTML-document. Dit betekent dat wanneer een klant maakt een GET-verzoek naar de route /, een nieuwe HTML-antwoord zal worden gebouwd met de tekst “Hello, world!” en teruggestuurd naar de gebruiker.

Wrangler heeft een preview-functie, ideaal voor het testen van de HTML output van onze nieuwe functie. We draaien het nu om ervoor te zorgen dat onze applicatie werkt zoals verwacht:

wrangler voorbeeld

De opdracht voorbeeld moet het openen van een nieuw tabblad in uw browser, na het bouwen van uw Werknemers applicatie en het uploaden ervan naar onze testen speeltuin. In het tabblad Voorbeeld, ziet u uw gerenderde HTML reactie:

Met onze HTML reactie verschijnen in de browser, laten we onze handler functie een beetje spannender, door terugzending van een aantal leuk uitziende HTML-code. Om dit te doen, stellen we een corresponderende index “sjabloon” voor onze route handler: wanneer er een verzoek komt in de index handler, het zal de oproep van de template en het retourneren van een HTML-string, de client een goede user interface als de reactie. Om te beginnen, laten we update handlers/index.js om terug te keren een reactie met behulp van onze sjabloon (en, daarnaast, het opzetten van een try/catch blok te vangen eventuele fouten, en hen terug te keren als het antwoord):

// handlers/index.js
const headers = { ‘Content-Type’: ‘text/html’ }
const template = vereist(‘../templates/index’)

const-handler = async () => {
proberen {
return new Reactie(sjabloon(), { kop })
} catch (err) {
return new Reactie(err)
}
}

de module.export = handler

Zoals je je kunt voorstellen, we moeten het opzetten van een overeenkomstige sjabloon! We maken een nieuw bestand aan, templates/index.js en het retourneren van een HTML-string, met ES6 sjabloon strings:

// templates/index.js
const template = () => {
terug <code><h1>Hello world!</h1>`
}

de module.export = sjabloon

Onze template functie retourneert een eenvoudige HTML-tekenreeks die het lichaam van onze Reactie, in handlers/index.js. Voor onze laatste fragment van templates voor onze eerste route, laten we iets doen iets interessanter: het maken van een templates/layout.js bestand, dat de basis “lay-out” dat al onze sjablonen te maken in. Dit zal ons toelaten om een aantal consistente vormgeving en opmaak voor alle sjablonen. In templates/layout.js:

// templates/layout.js
const layout = body => `
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Repo Hunt</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css”>
</head>
<body>
<div class=”container”>
<div class=”navbar”>
<div class=”navbar-merk”>
Repo Jagen
Het vinden coole open source projecten dagelijks
</div>
<div class=”navbar-menu”>
<div class=”navbar-end”>
<div class=”navbar-item”>
Post een repository
</div>
</div>
</div>
</div>
<div class=”section”>
${body}
</div>
</div>
</body>
</html>
`
de module.export = lay-out

Dit is een grote brok van de HTML-code, maar breekt deze af, er zijn slechts een paar belangrijke dingen op te merken: ten eerste, deze lay-out variabele is een functie! Een lichaam variabele wordt doorgegeven, bestemd zijn om te worden opgenomen in een div in het midden van de HTML-fragment. In aanvulling, wij zijn de Bulmahttps://bulma.io) CSS frameworkhttps://bulma.io), voor een beetje makkelijk styling in ons project, en een navigatiebalk, om gebruikers te vertellen *wat* deze site is, met een link naar het indienen van nieuwe depots.

Voor het gebruik van onze lay-out template, we importeren in templates/index.js en wikkel onze HTML-tekenreeks met het:

// templates/index.js
const layout = require(‘./lay-out’)

const template = () => {
terug lay-out(`<h1>Hello world!</h1>`)
}

de module.export = sjabloon

Dat kunnen we wrangler preview weer, om ons mooi weergegeven HTML-pagina, met een beetje styling hulp van Bulma:

Het opslaan en ophalen van gegevens met Werknemers KV

De meeste web-applicaties zijn niet erg bruikbaar zonder enige vorm van data persistentie. Werknemers KV is een key-value-winkel gebouwd voor gebruik met de Werknemers – denk aan het als een super-snelle en wereldwijd verspreide Redis. In onze toepassing, we gebruiken KV voor het opslaan van alle gegevens voor onze toepassing: elke keer dat een gebruiker een nieuwe op de gegevensopslagruimte, wordt het opgeslagen in KV, en we zullen ook het genereren van een dagelijks aanbod van repositories te maken op de home pagina.

Een kort briefje: op het moment van schrijven, het gebruik van de Werknemers KV vereist een betaalde Werknemers plan. Lees meer in de “Prijzen” sectie van de Werknemers documenten hier.

De binnenkant van een Werknemers-toepassing, kunt u verwijzen naar een vooraf ingestelde KV-naamruimte, die we zullen maken van de binnenkant van de Cloudflare UI, en te binden aan onze toepassing als het eenmaal is ingezet om de Arbeiders toepassing. In deze tutorial gebruiken we een KV-naamruimte genoemd REPO_HUNT, en als onderdeel van de implementatie proces, wij zorgen ervoor dat om het te hechten aan onze applicatie, zodat alle verwijzingen in de code te REPO_HUNT de juiste manier van het oplossen van de KV-naamruimte.

Voordat we de hop in het creëren van de gegevens in van de naamruimte, laten we eens kijken naar de basis van het werken met KV binnenkant van uw Werknemers toepassing. Gegeven een naamruimte (bijv. REPO_HUNT), kunnen we stellen een toets met een bepaalde waarde, met behulp van zetten:

const string = “Hello, world!”
REPO_HUNT.put(“myString”, string)

We kunnen ook het ophalen van de waarde van de toets, door het gebruik van async/wachten en wachten op de belofte in te lossen:

const getString = async () => {
const string = wachten REPO_HUNT.get(“myString”)
console.log(string) // “Hello, world!”
}

De API is super eenvoudig, dat is geweldig voor web-ontwikkelaars die willen beginnen met het bouwen van toepassingen met de Werknemers platform, zonder te hoeven duiken in relationele databases of andere vorm van externe data service. In ons geval is, zullen wij gegevens voor onze toepassing door het opslaan van:

  1. Een repo – object, opgeslagen op de toets repo ‘ s:$id, waar $id wordt gegenereerd UUID voor een nieuw ingezonden repo.
  2. Een dag array opgeslagen op de toets $datum (bijvoorbeeld “6/24/2019”), met een lijst van de repo-Id ‘s die een indicatie geven van de ingediende repo’ s voor die dag.

We beginnen met de uitvoering van de ondersteuning voor het indienen van repositories, en het maken van onze eerste schrijft ons KV naamruimte door het opslaan van de gegevens uit de gegevensopslagruimte in het object dat we dat hierboven is gespecificeerd. Langs de weg, maken we een eenvoudige JavaScript-klasse voor interfacing met onze winkel we maken gebruik van die klasse weer, wanneer gaan we over naar de weergave van de homepage, waar we je ophalen van de gegevens uit de gegevensopslagruimte, het bouwen van een UI, en de afwerking van onze voorbeeld toepassing.

Zodat de gebruiker verstrekte gegevens

Geen kwestie wat de toepassing ook is, het lijkt erop dat web ontwikkelaars altijd tot het einde hoeft te schrijven vormen. In ons geval zullen we de bouw van een eenvoudig formulier voor gebruikers in te dienen repositories.

Aan het begin van deze tutorial, we index.js verwerken van inkomende aanvragen om het root-route (`/). Ter ondersteuning van gebruikers, het toevoegen van nieuwe archieven, voegen we een andere route, GET /post, die zal maken van een formuliersjabloon voor gebruikers. In index.js:

// index.js

// …

const post = require(‘./handlers/post’)

// …

functie handleRequest(aanvraag) {
proberen {
const r = nieuwe Router()
r.get(‘/’, index)
r.get(‘/post, post)
return r.route(verzoek)
} catch (err) {
return new Reactie(err)
}
}

Naast een nieuwe route handler in index.js we zullen ook toevoegen handlers/post.js een nieuwe functie-handler maken een bijbehorende sjabloon als een HTML-reactie aan de gebruiker:

// handlers/post.js
const headers = { ‘Content-Type’: ‘text/html’ }
const template = vereist(‘../templates/post’)

const-handler = vraag => {
proberen {
return new Reactie(sjabloon(), { kop })
} catch (err) {
return new Reactie(err)
}
}

de module.export = handler

Het laatste stukje van de puzzel is de HTML-sjabloon zelf – net als onze vorige sjabloon voorbeeld zullen we opnieuw gebruik maken van de lay-out sjabloon dat we hebben opgebouwd, en wikkel een eenvoudige drie-veld vorm met het exporteren van de HTML-string in templates/post.js:

// templates/post.js
const layout = require(‘./lay-out’)

const template = () =>
lay-out(`
<div>
<h1>Post een nieuwe repo</h1>
<form action=”/repo” method=”post”>
<div class=”field”>
<label class=”label” for=”naam”>Naam</label>
<input class=”input” id=”naam” name=”naam” type=”text” placeholder=”Naam” required></input>
</div>
<div class=”field”>
<label class=”label” for=”description”>Beschrijving</label>
<input class=”input” id=”description” name=”description” type=”text” placeholder=”Description”></input>
</div>
<div class=”field”>
<label class=”label” for=”url”>URL</label>
<input class=”input” id=”url” name=”url” type=”text” placeholder=”URL” required></input>
</div>
<div class=”field”>
<div class=”controle”>
<button class=”knop-link” type=”submit”>Verzenden</button>
</div>
</div>
</form>
</div>
<code>)

de module.export = sjabloon

Met behulp van wrangler voorbeeld, kunnen we navigeer naar het pad /de post en zie onze gerenderd formulier:

Als je kijkt naar de definitie van de werkelijke vorm tag in onze template, zult u merken dat we het maken van een POST-aanvraag naar het pad /repo. Te ontvangen in de vorm van gegevens, en behouden in onze KV winkel, we gaan door het proces van het toevoegen van een andere handler. In index.js:

// index.js

// …

const maken = require(‘./handlers/create’)

// …

functie handleRequest(aanvraag) {
proberen {
const r = nieuwe Router()
r.get(‘/’, index)
r.get(‘/post, post)
r.post(‘/repo’, maken)
return r.route(verzoek)
} catch (err) {
return new Reactie(err)
}
}

Wanneer een formulier wordt verzonden naar een eindpunt, het is gezonden als een query string. Om ons leven gemakkelijker maken, nemen we de qs-bibliotheek in ons project, die zal ons toelaten om gewoon te parseren van de inkomende query-tekenreeks als JS-object. In de commando-regel, voegen we qs simpelweg door het gebruik van npm. Terwijl we hier zijn, laten we ook de installatie van de knooppunt-uuid-pakket, dat zullen we later gebruiken voor het genereren van Id ‘ s voor inkomende gegevens. Om ze te installeren, zowel gebruik npm ‘ s installeren –opslaan sub-commando:

npm install –opslaan qs uuid

Met dat, kunnen wij de uitvoering van de desbetreffende afhandelings functie voor POST /repo. In handlers/create.js:

// handlers/create.js
const qs = vereist(‘qs’)

const-handler = asynchrone request => {
proberen {
const body = wachten op aanvraag.tekst()

if (!lichaam) {
throw new Foutmelding(‘Onjuiste gegevens’)
}

const data = qs.parse(lichaam)

// TODOs:
// – Het maken van repo
// – Opslaan repo
/ / Voeg de huidige repo ‘ s op de homepage

return new Reactie(‘ok’, { kop: { Locatie: ‘/’ }, status: 301 })
} catch (err) {
return new Reactie(err, { status: 400 })
}
}

de module.export = handler

Onze handler functie is vrij eenvoudig — het roept de tekst op de aanvraag, wachtend op de belofte in te lossen om terug te krijgen van onze query string lichaam. Als er geen body-element is voorzien van de aanvraag, de geleider meldt een fout (geeft de status code van 400, dankzij onze try/catch blok). Gegeven een geldig lichaam, noemen we ontleden op het ingevoerde qs-pakket, en een aantal gegevens terug. Voor nu hebben we drukte onze plannen voor de rest van deze code: eerst maken we een repo, gebaseerd op de gegevens. We bewaren die repo, en vervolgens toevoegen aan de array van vandaag is de repo ‘ s, om te worden weergegeven op de home pagina.

Schrijven onze repo gegevens in KV, bouwen we twee eenvoudige ES6 klassen, om te doen een beetje van het licht van de validatie en het definiëren van een aantal persistentie methoden voor onze data-types. Terwijl u kunt bellen, REPO_HUNT.zet direct, als je werkt met grote hoeveelheden gelijksoortige gegevens, het kan leuk zijn om iets te doen als nieuwe Repo(gegevens).save() – in feite, zullen wij de uitvoering iets bijna precies zoals deze, zodat het werken met een Repo is ongelooflijk eenvoudig en consistent.

Laten we definiëren store/repo.js bevat een Repo-klasse. Met deze klasse kunnen we het concretiseren van nieuwe Repo objecten, en het gebruik van de constructor-methode, hebben we het kunnen doorgeven van gegevens, en te valideren, voordat u het verder gebruikt in onze code.

// store/repo.js
const uuid = vereist(‘uuid/v4’)

klasse Repo {
constructor({ id, beschrijving, naam, submitted_at, url }) {
deze.id = id || uuid()
deze.description = beschrijving

if (!de naam) {
throw new Foutmelding(`Ontbrekende naam in de gegevens`)
} else {
deze.naam = naam
}

deze.submitted_at = submitted_at || Nummer(new Date())

proberen {
const urlObj = new URL(url)
const witte lijst = [‘github.com’, ‘gitlab.com’]

if (!witte lijst.sommige(geldig => valid === urlObj.host)) {
throw new Foutmelding(‘De URL die is niet een repository’)
}
} catch (err) {
throw new Foutmelding(‘De URL is niet geldig’)
}

deze.url = url
}

save() {
terug REPO_HUNT.put(`repo:${dit.id}`, JSON.stringify(deze))
}
}

de module.export = Repo

Zelfs als je niet super bekend met de constructor-functie in een ES6 klasse, dit voorbeeld moet het nog vrij gemakkelijk te begrijpen. Wanneer we willen het maken van een nieuw exemplaar van een Repo, passeren we de relevante gegevens aan de constructor als een object met behulp van de ES6 destructuring opdracht te trek elke waarde in een eigen sleutel. Met die variabelen, lopen we door elk van hen, het toewijzen van deze.$toets (bijv. deze.naam, dit.beschrijving, etc.) aan de doorgegeven waarde.

Veel van deze waarden hebben een “standaard” waarde: bijvoorbeeld, als er geen naam wordt doorgegeven aan de constructor, zullen we een nieuwe genereren, het gebruik van onze eerder opgeslagen uuid pakket v4 variant voor het genereren van een nieuwe UUID, het gebruik van de uuid(). Voor submitted_at, we zullen het genereren van een nieuw exemplaar van de Datum en het om te zetten in een Unix timestamp, en voor de url, we zullen ervoor zorgen dat de URL is zowel geldig is *en* is uit github.com of gitlab.com om ervoor te zorgen dat de gebruikers het indienen van echte repo ‘ s.

Met de save-functie, die kan worden opgeroepen op een exemplaar van de Repo, voegt een JSON-stringified versie van de Repo-exemplaar in KV, de instelling van de belangrijkste als repo ‘ s:$id. Terug handlers/create.js we importeren de Repo-klasse, en het opslaan van een nieuwe Repo met onze eerder verdeelde gegevens:

// handlers/create.js

// …

const Repo = vereist(‘../winkel/repo’)

const-handler = asynchrone request => {
proberen {
// …

const data = qs.parse(lichaam)
const repo = nieuwe Repo(gegevens)
wachten repo.save()

// …
} catch (err) {
return new Reactie(err, { status: 400 })
}
}

// …

Met een nieuwe Repo op basis van inkomende gegevens op formulier moet daadwerkelijk worden gemaakt in Werknemers KV! Terwijl de repo is opgeslagen, willen we ook andere gegevens model, Dag, waarin een eenvoudige lijst van de repositories die werden ingediend door de gebruikers voor een bepaalde dag. We maken een ander bestand, store/day.js en het uit vlees:

// store/day.js
const vandaag = () => new Date().toLocaleDateString()
const todayData = async () => {
const datum = vandaag()
const vastgelegde = wachten REPO_HUNT.voor(datum)
terug bleef ? JSON.parse(vastgelegde) : []
}

de module.export = {
toevoegen: asynchrone functie(id) {
const datum = vandaag()
laat id = wachten todayData()
id = id ‘ s.concat(id)
terug REPO_HUNT.put(datum, JSON.stringify(ids))
}
}

Let op dat de code voor dit is niet eens een klasse — het is een object met een sleutel-waarde paar, waar de waarden zijn functies! We zullen meer toevoegen aan dit snel, maar de enkele functie die we hebben gedefinieerd, toevoegen, laadt alle bestaande repo ‘ s vanaf de datum van vandaag (met de huidige functie voor het genereren van een datum tekenreeks die wordt gebruikt als de toets KV), en voegt een nieuwe Repo, gebaseerd op de id-argument is doorgegeven aan de functie. Terug binnenkant van handlers/create.js wij zullen ervoor zorgen, te importeren en noemen deze nieuwe functie, zodat een eventuele nieuwe repo ‘s worden onmiddellijk toegevoegd aan de huidige lijst van repo’ s:

// handlers/create.js

// …

const Dag = vereist(‘../winkel/dag’)

// …

const-handler = asynchrone request => {
proberen {

// …

wachten repo.save()
wachten op de Dag.toevoegen(repo.id)

return new Reactie(‘ok’, { kop: { Locatie: ‘/’ }, status: 301 })
} catch (err) {
return new Reactie(err, { status: 400 })
}
}

// …

Onze repo gegevens nu aanhoudt in KV en het is toegevoegd aan een lijst van de repo ‘ s die door gebruikers voor de datum van vandaag. We gaan nu op naar het laatste stuk van onze tutorial te nemen dat de gegevens, en zorgen dat het op de homepage.

Het renderen van gegevens

Op dit moment hebben we geïmplementeerd renderen van HTML-pagina ‘ s in een Arbeiders toepassing, alsmede het nemen van inkomende gegevens en aanhoudende aan Werknemers KV. Het mag niet verrassen om te leren dat de gegevens van KV, en het renderen van een HTML-pagina met het onze homepage, is vrij gelijkaardig aan alles, wat we hebben gedaan tot nu toe. Herinner u dat de pad / is gebonden aan onze index handler: in dat bestand, we willen voor het laden van de repo ‘ s voor de datum van vandaag en geef ze in de template, in volgorde worden weergegeven. Er zijn een paar stukken die we moeten implementeren om die werken – om te beginnen, laten we eens kijken naar handlers/index.js:

// handlers/index.js

// …
const Dag = vereist(‘../winkel/dag’)

const-handler = async () => {
proberen {
laat repo = wachten op de Dag.getRepos()
return new Reactie(sjabloon(repo ‘ s), { kop })
} catch (err) {
return new Reactie(`Fout! ${fout} van ${JSON.stringify(repo ‘ s)}`)
}
}

// …

Terwijl de algemene structuur van de functie-handler moet hetzelfde blijven, zijn we nu klaar om een aantal echte gegevens in onze toepassing. We moeten importeren van de Dag-module, en de binnenkant van de handler, bel wachten op de Dag.getRepos om een overzicht te krijgen van de repo ‘ s terug (maak je geen zorgen, we zullen de uitvoering van de overeenkomstige functies snel). Met die set van repo ‘ s, passeren we hen in onze template-functie, wat betekent dat we in staat zijn om daadwerkelijk renderen hen binnenkant van de HTML.

De binnenkant van de Dag.getRepos, we nodig hebben om te laden van de lijst van repo-Id ‘ s uit binnen KV, en voor elk van hen, het laden van de bijbehorende repo gegevens van KV. In store/day.js:

// store/day.js

const Repo = require(‘./repo’)

// …

de module.export = {
getRepos: asynchrone functie() {
const id = wachten todayData()
terug-id ‘ s.lengte ? Repo.findMany(ids) : []
},

// …
}

De getRepos functie hergebruikt onze eerder gedefinieerde todayData functie retourneert een lijst met id ‘ s. Als die lijst heeft *een* Id ‘ s, we willen eigenlijk het ophalen van die repositories. Nogmaals, we noemen een functie die we nog niet gedefinieerd nog, het importeren van de Repo-klasse en bellen Repo.findMany doorgeven in onze lijst met Id ‘ s. Zoals je je kunt voorstellen, we moeten hop naar store/repo.js en implementeren van de bijbehorende functie:

// store/repo.js

klasse Repo {
statische findMany(id) {
rendement Beloven.alle(id ‘ s.kaart(Repo.vinden))
}

statische async zoeken(id) {
const vastgelegde = wachten REPO_HUNT.te krijgen (“repo’ s:${id}`)
const repo = JSON.parse(vastgelegde)
terug bleef ? nieuwe Repo({ …repo }) : null
}

// …
}

Ter ondersteuning van het vinden van alle repo ‘s voor een set-Id’ s, definiëren we twee klasse-niveau of statische functies, vinden en findMany die gebruik maakt van Belofte.alle bellen te vinden voor elk ID-in de set, en wacht tot ze allemaal te voltooien voor het oplossen van de belofte. De bulk van de logica, de binnenkant van vinden, zoekt de repo door het ID (met behulp van de vooraf gedefinieerde sleutel, repo ‘ s:$id), analyseert de JSON string, en geeft een nieuw gemaakt aanleg van de Repo.

Nu gaan we op zoek naar repositories van KV, we moeten die gegevens en het daadwerkelijk renderen in onze template. In handlers/index.js passeerden we in de repo ‘ s matrix naar de template-functie gedefinieerd in templates/index.js. In dat bestand, nemen we aan dat repos array, en maken de brokken van HTML voor elke repo binnenkant van het:

// templates/index.js

const layout = require(‘./lay-out’)
const dateFormat = submitted_at =>
nieuwe Datum(submitted_at).toLocaleDateString(‘nl-nl’)

const repoTemplate = ({ beschrijving, naam, submitted_at, url }) =>
`<div class=”media”>
<div class=”media-content”>
<p>
${naam}
</p>
<p>
${beschrijving}
</p>
<p>

Ingediend ${dateFormat(submitted_at)}
</p>
</div>
</div>
`

const template = repo ‘ s => {
const renderedRepos = repo ‘ s.kaart(repoTemplate)

terug lay-out(`
<div>
${
repo ‘ s.lengte
? renderedRepos.join(“)
: `<p>Geen repo ‘ s zijn ingediend nog!</p>`
}
</div>
`)
}

de module.export = sjabloon

Het breken van dit bestand, we hebben twee primaire functies: sjabloon (een bijgewerkte versie van onze originele geëxporteerde functie die een array van repo ‘ s, kaarten via hen bellen repoTemplate, voor het genereren van een reeks HTML-snaren. Als repo ‘ s wordt een lege array is, retourneert de functie gewoon een p-tag met een lege staat. De repoTemplate functie gebruikt destructuring opdracht om de variabelen omschrijving, naam, submitted_at, en de url van de binnenzijde van de repo-object wordt doorgegeven aan de functie, en maakt dat elk van hen in vrij eenvoudige HTML, leunend op Bulma ‘ s CSS-klassen gebruikt om snel het definiëren van een media-object-lay-out.

En met dat we klaar bent met het schrijven van code voor het project! Na het coderen van een vrij uitgebreide full-stack toepassing op de top van de Werknemers, zijn we op de laatste stap: de implementatie van de toepassing op de Werknemers platform.

Het inzetten van uw site bij de werknemers.dev

Alle Werknemers van de gebruiker aanspraak kan maken op een vrije Arbeiders.dev subdomein, na het aanmelden voor een Cloudflare account. In de Wrangler, we hebben het super makkelijk om te stellen en configureren van uw subdomein, het gebruik van de subdomein subcommando. Elk account krijgt één van de Werknemers.dev subdomein, dus kies verstandig!

wrangler subdomein my-cool-subdomein

Met een geconfigureerd subdomein, kunnen we nu de implementatie van onze code! De naam van de eigenschap in de wrangler.toml zal geven aan de uiteindelijke URL dat onze aanvraag zal worden ingezet om: in mijn codebase, de naam is ingesteld op repo-jacht, en mijn subdomein is signalnerve.de werknemers.dev, dus mijn uiteindelijke URL voor mijn project zal worden repo-hunt.signalnerve.de werknemers.dev. Laten we implementeren het project met de opdracht publiceren:

wrangler publiceren

Voordat we het kunnen bekijken van de project browser, we hebben nog een stap te voltooien: in te gaan op de Cloudflare UI, het creëren van een KV-naamruimte, en te binden aan ons project. Om dit proces te starten, log in op uw Cloudflare dashboard en selecteer de “Werknemers” tab aan de rechterkant van de pagina.

De binnenkant van de Werknemers deel van het dashboard, vind de “KV” menu-item, en het maken van een nieuwe naamruimte, het afstemmen van de naamruimte die u gebruikt in uw browser (als u hebt gevolgd de code voorbeelden, deze zal worden REPO_HUNT).

In de lijst van KV naamruimten, kopieert u de naamruimte-ID. Terug in ons project, voegen we een `kv-naamruimten` toets om onze `wrangler.toml`, onze nieuwe naamruimte in de codebase:

# wrangler.toml
[[kv-naamruimten]]
bindend = “REPO_HUNT”
id = “$yourNamespaceId”

Om ervoor te zorgen dat uw project wordt met behulp van de nieuwe KV-naamruimte, publiceren van uw project een laatste keer:

wrangler publiceren

Met uw aanvraag moet in staat zijn om met succes het lezen en schrijven van uw KV-naamruimte. Het openen van mijn project, moet de URL van de definitieve versie van onze project — een volledige, data-gestuurde toepassing die is zonder het beheren van de servers, geheel gebouwd op de Werknemers platform!

Wat is het volgende?

In deze tutorial hebben we een full-stack serverloze toepassing op de top van de Werknemers platform, met behulp van Wrangler, Cloudflare de commando-regel gereedschap voor het bouwen en implementeren van Werknemers toepassingen. Er is een ton van de dingen die je kan doen om bij te blijven toe te voegen aan deze applicatie: bijvoorbeeld de mogelijkheid om upvote inzendingen, of zelfs om opmerkingen en andere soorten data. Als u wilt de voltooid codebase voor dit project, kijk op de GitHub repo!

De Werknemers team onderhoudt een voortdurend groeiende lijst van de nieuwe templates te beginnen met het bouwen van projecten met – als je wilt zien wat je kunt bouwen, zorg ervoor om te controleren onze Template Gallery. Bovendien, zorg ervoor om te controleren enkele van de tutorials in de Werknemers-documentatie, zoals het bouwen van een Olierijke bot, of een QR-code generator.

Als je ging door de hele tutorial (of als je je toffe dingen die je wilt delen), zou ik graag horen hoe het verder ging . Als u geïnteresseerd bent in serverloze en willen houden met eventuele nieuwe tutorials ik ben publiceren, zorg ervoor dat word lid van mijn nieuwsbrief en abonneer je op mijn YouTube kanaal!