logo

Jak vytvořit aplikaci bez serveru s Gatsby, Netlify a FaunaDB - část 1

Úvod

Vítejte ve zcela nové sérii s názvem Go Serverless. Na rozdíl od předchozí série bude tato krátká a plně zaměřená na praktický vývoj aplikací.

S touto sérií vyvineme serverless aplikace pomocí Gatsbyjs , Netlify a FaunaDB .

Série bude vydána ve třech článcích,

  • Část 1 :Sestavte datové rozhraní API bez serveru s FaunaDB a přistupujte k němu pomocí funkcí Netlify.
  • Část 2 :Vybudujte kůži. Využijte funkce a rozhraní API k vytvoření něčeho skvělého pomocí Gatsby.
  • Část 3 :Bezbolestná integrace autentizace a autorizace pomocí Netlify Identity.

Tento článek je Part 1 série. Doufám, že si cestu užijete!

Jak sledovat tuto sérii?

Myslím, že nejlepší způsob, jak sledovat tuto sérii, by bylo vyvíjet aplikaci vedle ní.

Postupujte podle kroků, udělejte si pauzu, abyste pochopili, co se právě stalo, a pokračujte dál. Doufám, že se vám bude líbit a budete na něm klidně improvizovat.

Nezapomeňte mít své oblíbené nápoje (☕, 🍵, 🍺) poblíž!

Co stavíme?

Napsali jste v poslední době nějaké posudky? Pojďme vytvořit aplikaci, která uživatelům umožní psát posudky s hodnocením. Aplikace by měla umožnit každému uživateli číst také všechna doporučení odeslaná ostatními uživateli.

Při vytváření aplikace se postaráme o následující případy použití:

  • Všechny posudky budou uloženy v databázi.
  • Rozhraní API pro podporu vytváření posudku a načítání všech posudků.
  • Uživatelské rozhraní pro použití těchto rozhraní API k zobrazení všech posudků a jejich vytváření.
  • Uživatel se musí ověřit, aby mohl vytvořit posudek.

Ale počkejte, existuje několik důležitých aspektů,

  • Nebudeme instalovat ani udržovat žádnou databázi sami.
  • Nebudeme používat žádný server k hostování rozhraní API.
  • K hostování aplikace na straně klienta nebudeme používat žádný aplikační server. Pamatujte, že jsme serverless .

Zde je náhled testovací aplikace

https://github.com/atapas/testimonial/tree/part-1-function-api-db

Dobře, můžeme začít!

Rychlé pozadí

Už jste slyšeli o JAMstack? ?

Pokud ano, koncept aplikace bez serveru by pro vás neměl být nový. Jeden ze základů JAMstack je to practically serverless . To znamená, že vy jako programátor, vlastník kódu nebo vlastník firmy nespravujete a neudržujete servery. Soustředíte se pouze na vytváření aplikací pomocí J na straně klienta avaScript, opakovaně použitelný A PI a předpřipravené M arkupy.

FaunaDB – Pojďme nastavit databázi

FaunaDB je datové API pro aplikace bez klient-server. Transformuje tradiční DBMS na Data API, které vám poskytuje všechny možnosti staré gardové databáze, aniž by byla obětována flexibilita, rozsah a výkon.

Má několik rozhraní API pro přístup k datům, včetně nativního GraphQL a funkční dotazovací jazyk podobný DSL. Pro aplikaci posudků budeme používat typ GraphQL.

  • Nejprve se zaregistrujte pomocí této adresy URL. Vyberte si prosím bezplatný plán, který má velkorysou denní kvótu využití a je více než dostatečný pro naše využití.
  • Dále vytvořte databázi zadáním názvu databáze podle vašeho výběru. Použil jsem testimonial jako název databáze.

  • Po vytvoření databáze budeme definovat GraphQL schéma a importujte jej do databáze.

    V této fázi vytvoříme složku projektu. Někde na pevném disku vytvořte složku projektu s názvem testimonial . Vytvořte soubor s názvem testimonial.gql s následujícím obsahem,

     type Message {
    text: String!
    rating: Int!
 }

 type Query {
    allMessages: [Message!]!
 }

    Všimněte si, že jsme definovali Message typu, který se skládá z textu, tj. zprávy posudku, a hodnocení. Máme také Query type, který vrací pole zpráv.

    Jako další krok nahrajte testimonial.gql soubor z řídicího panelu FaunaDB pomocí IMPORT SCHEMA knoflík,

  • To je vše, naše databáze byla úspěšně vytvořena a je připravena k použití.

Zkusíme nějaké dotazy

Naše aplikace pro posudky nám umožní vytvářet posudky a načítat je všechny najednou. Abychom to podpořili, budeme používat mutation (pro vytváření, aktualizaci a mazání) a query (pro načtení) GraphQL .

  • Vytvořte posudek s textem „Tohle je super“ s hodnocením 5.

     mutation {
    createMessage(data: { text: "This is so cool", rating: 5 }) {
       _id
        text
        rating
     }
 }

    Zkuste výše uvedený dotaz na hřišti GraphQL FaunaDb, abyste viděli odpověď,

    Skvělé, byl vytvořen posudek. Zkusme získat všechna svědectví. Zde je dotaz GraphQL,

     query {
    allMessages {
      data {
         _id
         text
         rating
      }
    }
 }

    Zkusme výše uvedený dotaz na hřišti jako dříve,

To je skvělé, nyní máme databázi se schématem a plně funkční s funkcí vytváření a načítání.

Vytvořit tajný klíč serveru

Dále musíme vytvořit tajný klíč zabezpečeného serveru, abychom se ujistili, že přístup k databázi je ověřený a autorizovaný.

Klikněte na SECURITY možnost dostupná v rozhraní FaunaDB pro vytvoření klíče,

Po úspěšném vytvoření klíče jej budete moci zobrazit a ujistit se, že jej zkopírujete a uložíte na bezpečné místo.

Nechceme, aby o tomto klíči věděl někdo jiný. A to ani za účelem zaslání do úložiště zdrojového kódu. Chcete-li zachovat toto utajení, vytvořte prázdný soubor s názvem .env na kořenové úrovni složky projektu.

Upravte .env soubor a přidejte do něj následující řádek (namísto <your secret fauna key> vložte vygenerovaný klíč serveru ).

FAUNA_SERVER_SECRET=<your secret fauna key>

Přidejte .gitignore a přidejte do něj následující obsah. Je to proto, abychom se ujistili, že nepotvrdíme .env soubor do úložiště zdrojového kódu náhodně.

node_modules
*.env

Jsme hotovi se vším, co jsme museli udělat s nastavením databáze. Přejděme k další fázi vytvoření serverless funkcí a rozhraní API pro přístup k datům z FaunaDB databáze.

Takto může vypadat řídicí panel faunadb na základě vašeho používání,

Netlify – funkce a rozhraní API

Nyní máme klíč serveru. Je čas jej využít jako API klíč pro vyvolání serverless funkce.

Netlify je skvělá platforma pro bezproblémové vytváření serverless funkcí. Tyto funkce mohou interagovat s databázemi, systémem souborů a objekty v paměti.

Funkce Netlify jsou poháněny AWS Lambda. Vlastní nastavení lambd AWS může být poměrně složitá práce. S Netlify jednoduše nastavíme složku a vypustíme naše funkce. Psaní jednoduchých funkcí se automaticky stávají API.

  • Nejprve si vytvořte účet s Netlify . To je zdarma a stejně jako FaunaDB bezplatná úroveň, Netlify je také velmi flexibilní.
  • Nyní musíme nainstalovat několik závislostí pomocí buď npm nebo yarn . Ujistěte se, že máte nainstalovaný nodejs.
  • Otevřete příkazový řádek v kořenovém adresáři složky projektu. K inicializaci projektu se závislostmi uzlů použijte následující příkaz 
    npm init
  • Nainstalujte netlify-cli utilitu, abychom mohli lokálně spouštět funkci bez serveru.
    npm install netlify-cli -g
  • Nyní nainstalujeme dvě důležité knihovny, axios a dotenv. axios se použije pro volání HTTP a dotenv pomůže načíst FAUNA_SERVER_SECRET proměnná prostředí ze souboru .env do process.env.
    yarn add axios dotenv

Vytvoření funkcí bez serveru

  • Vytvořte složku s názvem functions v kořenovém adresáři složky projektu. Všechny funkce bez serveru pod ním ponecháme.
  • Nyní vytvořte podsložku s názvem utils pod functions složku. Vytvořte soubor s názvem query.js pod utils složku. Budeme potřebovat nějaký společný kód pro dotazování databáze na všechny funkce bez serveru. Společný kód bude v query.js soubor.

  • Nejprve importujeme funkcionalitu knihovny axios a načteme .env soubor. Dále exportujeme a asynchronní funkci, která přebírá query a variables . Uvnitř asynchronní funkce provádíme volání pomocí axios s tajným klíčem. Nakonec vrátíme odpověď.

     // query.js

 const axios = require("axios");
 require("dotenv").config();

 module.exports = async (query, variables) => {
   const result = await axios({
       url: "https://graphql.fauna.com/graphql",
       method: "POST",
       headers: {
           Authorization: `Bearer ${process.env.FAUNA_SERVER_SECRET}`
       },
       data: {
         query,
         variables
       }
  });

  return result.data;
 };

  • Vytvořte soubor s názvem get-testimonials.js pod functions složku. Provedeme dotaz, abychom načetli všechny zprávy s posudky.

     // get-testimonials.js

 const query = require("./utils/query");

 const GET_TESTIMONIALS = `
     query {
         allMessages {
           data {
              _id
              text
              rating
           }
         }
      }
 `;

  exports.handler = async () => {
     const { data, errors } = await query(GET_TESTIMONIALS);

     if (errors) {
        return {
          statusCode: 500,
          body: JSON.stringify(errors)
        };
     }

     return {
       statusCode: 200,
       body: JSON.stringify({ messages: data.allMessages.data })
     };
   };

  • Je čas otestovat serverless function jako API. Zde musíme provést jednorázové nastavení. Otevřete příkazový řádek v kořenovém adresáři složky projektu a zadejte,

     netlify login

    Otevře se karta prohlížeče a požádá vás o přihlášení a autorizaci přístupu k vašemu účtu netlify. Klikněte prosím na Authorize tlačítko.

    Vytvořte soubor s názvem netlify.toml a přidejte k němu tento obsah,

     [build]
    functions = "functions"

 [[redirects]]
   from = "/api/*"
   to = "/.netlify/functions/:splat"
   status = 200

    Toto je říci netlify o umístění funkcí, které jsme napsali, aby to bylo známo v době sestavování.

    Netlify automaticky poskytuje API pro funkce. Adresa URL pro přístup k rozhraní API je v tomto tvaru /.netlify/functions/get-all-testiminials což nemusí být příliš uživatelsky přívětivé. Napsali jsme redirect aby to vypadalo jako /api/get-all-testimonials .

  • Dobře, jsme hotovi. Nyní v příkazovém řádku zadejte,

     netlify dev

  • Nyní je server netlify dev spuštěn lokálně a můžete přistupovat k první funkci bez serveru. Otevřete kartu prohlížeče a vyzkoušejte tuto adresu URL, http://localhost:8888/api/get-testimonials :

    Gratulujeme!!! Máte prvních serverless function v provozu.

  • Pojďme nyní napsat další funkci bez serveru, abychom vytvořili posudek. Tohle bude jednoduché. Vytvořte soubor s názvem create-testimonial.js ve složce 'functions'. Potřebujeme napsat dotaz předáním textu zprávy a hodnocení.

    // create-testimonial.js

const query = require("./utils/query");

const CREATE_TESTIMONIAL = `
  mutation($text: String!, $rating: Int!){
    createMessage(data: {text: $text, rating: $rating}){
      _id
      text
      rating
    }
  }
`;

exports.handler = async event => {
  const { text, rating } = JSON.parse(event.body);
  const { data, errors } = await query(
          CREATE_TESTIMONIAL, { 
text, rating });

  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ testimonial: data.createMessage })
  };
};

    Co myslíš? Jasně, destrukturovali jsme užitečné zatížení, abychom získali text zprávy a hodnocení. Když je získáme, zavoláme query způsob vytvoření posudku. Všimli jste si, že dotaz je v tomto případě mutation dotaz?

    Dobře, pojďme to otestovat. Budu používat postman nástroj pro testování API. Můžete použít pošťáka nebo jakékoli jiné nástroje podle vašeho výběru,

  • Dobře, pojďme rychle vytvořit další bezserverovou funkci pro aktualizaci posudku. Vytvořte soubor s názvem update-testimonial.js pod functions složku. Musíme předat id zkušební zprávy, kterou chceme aktualizovat spolu se zprávou samotnou, tj. text a rating .

    // update-testimonial.js

const query = require("./utils/query");

const UPDATE_TESTIMONIAL = `
    mutation($id: ID!, $text: String!, $rating: Int!){
        updateMessage(id: $id, data: {text: $text, rating: $rating}){
            _id
            text
            rating
        }
    }
`;

exports.handler = async event => {
  const { id, text, rating } = JSON.parse(event.body);
  const { data, errors } = await query(
       UPDATE_TESTIMONIAL, { id, text, rating });

  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ updatedMessage: 
data.updateMessage })
  };
};

    Pojďme otestovat toto API,

  • Skvělé, nyní jste již uhodli delete část, ne? Abychom mohli smazat posudek, potřebujeme pouze jeho ID. Zde je funkce pro smazání posudku,

    // delete-testimonial.js

const query = require("./utils/query");

const DELETE_TESTIMONIAL = `
  mutation($id: ID!) {
    deleteMessage(id: $id){
      _id
    }
  }
`;

exports.handler = async event => {
  const { id } = JSON.parse(event.body);
  const { data, errors } = await query(
        DELETE_TESTIMONIAL, { id });

  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ deletedMessage: data.deleteMessage 
   })
  };
};

    Je čas to vyzkoušet,

V této fázi byste měli mít strukturu adresářů takto:

To je prozatím vše. Úspěšně jste vytvořili databázi s FaunaDB, nastavili ji pro použití, vytvořili bezserverové funkce pomocí funkcí Netlify a otestovali je jako API.

Gratulujeme, zvládli jste to a to je skvělé!!!

Co bude dál?

V dalším článku seriálu budeme tato rozhraní API používat k vývoji klientské aplikace s doporučeními s Gatsbym. Do té doby pokračujte v prozkoumávání rozvětvením úložiště github. Uvidíme se brzy.

https://github.com/atapas/testimonial/tree/part-1-function-api-db

Pokud vám to bylo užitečné, dejte like/sdílejte, aby se to dostalo i k ostatním. Chcete-li dostávat e-mailové upozornění na mé nejnovější příspěvky, přihlaste se k odběru mého blogu kliknutím na Přihlásit se k odběru tlačítko v horní části stránky.

Sledujte mě na Twitteru @tapasadhikary pro další aktualizace.