Rychlý start:Jak vytvořit aplikaci Blog pomocí React &Allogic?

Úvod

Tento článek se bude zabývat vytvářením aplikace Quickstart Blog App pomocí React a Allogic, platforma backend-as-a-service využívající svou klientskou knihovnu.

Aplikace bude pokrývat následující funkce:

  • Vytvořit příspěvek na blogu

  • Seznam všech blogových příspěvků

  • Zobrazit jeden blogový příspěvek na samostatné stránce

Zde se můžete podívat na demo.

Video o vývoji na YouTube

Allogic Designer

Vytvořit aplikaci

Můžeme vytvořit aplikaci s Allogic Designer opravdu rychle. Chcete-li vytvořit aplikaci prostřednictvím Návrháře :

  1. Přihlaste se do Altogic s vašimi přihlašovacími údaji.

  2. Vyberte možnost Nová aplikace .

  3. V části Název aplikace zadejte název aplikace.

  4. A klikněte na Další .

  1. Vyberte Prázdná aplikace šablonu a klikněte na Další .

  2. Klikněte na Vytvořit na „Potvrdit a vytvořit“ kartu.

Zde si můžete přizpůsobit svou subdoménu, ale nemusíte to dělat nutně, Altogic vám ji automaticky vytvoří, což bude váš envUrl . Pokud jste ztratili envUrl, nemusíte se obávat; můžete jej získat z Prostředí pohled na Návrhář .

Po vytvoření naší aplikace potřebujeme envUrl a clientKey pro přístup k naší aplikaci přes Allogic Client Library a vytvoření webové aplikace.

Chcete-li získat clientKey musíme zadat aplikaci, kterou jsme vytvořili dříve, a;

  1. Klikněte na Nastavení aplikace v levé dolní části návrháře.

  2. A klikněte na Klíče klientské knihovny sekce.

Můžeme vytvořit nový clientKey z této stránky, ale díky Altogicu za vytvoření jednoho clientKey automaticky pro nás, takže zkopírujeme stávající clientKey ze seznamu.

Navíc, protože nebudeme používat žádné autentizační uživatele, musíme být schopni odesílat požadavky bez relace. Měli bychom odstranit vynucení relací z klienta.

  1. Klikněte na související klientský klíč.

  2. Zrušte zaškrtnutí políčka Vynutit relaci zaškrtávací políčko

Vytvořit model blogu

  1. Klikněte na Modely na levém postranním panelu.

  2. Klikněte na Nový na pravé straně obrazovky a vyberte Model.

  3. Nastavit název modelu jako blogy

  4. Ujistěte se, že Povolit časová razítka je vybráno pro uložení data vytvoření blogového příspěvku.

  5. Klikněte na Další

Altogické poskytuje základní CRUD koncové body a služby se souvisejícím modelem ve výchozím nastavení při vytváření nového modelu. Protože používáme Altogic Client Library, tyto koncové body nebudeme používat.

Vytvořili jsme naše první modelové “blogy“. Jediné, co musíme udělat, je definovat název a obsah vlastností modelu. Protože jsme vytvořili model **blogů, měli bychom definovat **obsah vlastnost jako strukturovaný text a název jako text.

  1. Klikněte na blogy model na Modely stránka

  2. Klikněte na Nové pole v pravé horní části stránky.

  3. Vyberte Textové pole → Text.

  4. Nastavte název modelu title.

  5. Ujistěte se, že Povinné pole je vybráno.

  6. Klikněte na Vytvořit.

  1. Klikněte na Nové pole v pravé horní části stránky.

  2. Vyberte Textové pole → Formátovaný text.

  3. Nastavit název modelu obsah.

  4. Klikněte na Vytvořit

Dokončili jsme návrh databáze a definici modelu na Altogic bez jakéhokoli kódování a složité konfigurace. Pojďme k vývoji frontendu.

Vývoj frontendu

Vytvořit aplikaci React

Nejprve musíme vytvořit aplikaci React. Otevřete terminál a vložte následující skript. Skript vytvoří altogic-react-blog-app-tutorial Aplikace React.

npx create-react-app altogic-react-blog-app-tutorial

Je čas nainstalovat potřebné závislosti!

Instalace knihovny klienta Allogic

Nainstalujte klientskou knihovnu Allogic do našeho projektu pomocí NPM nebo Yarn spuštěním následujícího příkazu:

npm install altogic

Vytvořte soubor .env v kořenovém adresáři vaší aplikace pro nastavení proměnných prostředí aplikace:

touch .env

Vložte následující skript do souboru .env a nahraďte YOUR-APPLICATION-ENV-URL a YOUR-APPLICATION-CLIENT-KEY s envUrl a clientKey zkopírovali dříve, pak se vraťte do svého terminálu.



Dále vytvořte soubor pro zpracování Altogic služby a klienta.

Vraťte se do kořenového adresáře a postupujte podle následujících příkazů:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js bude vytvořen v /src/helpers adresář. Otevřete soubor ve svém editoru a vložte následující.

Instalace React-Router

Protože potřebujeme různé stránky pro každý blogový příspěvek a jinou trasu pro výpis všech blogových příspěvků, musíme pro naši aplikaci implementovat strukturu trasy. Použijeme react-router-dom v naší aplikaci.

Otevřete kořenový adresář v terminálu a spusťte následující skript:

npm install react-router-dom@6

Instalace CSS Tailwind

Použijeme Tailwind CSS pro stylizaci projektu. Spusťte následující příkazy v kořenovém adresáři.

npm install -D tailwindcss postcss autoprefixer

Níže uvedený příkaz vytvoří tailwind.config.js soubor:

npx tailwindcss init -p

Otevřete tailwind.config.js v editoru a zkopírujte/vložte následující skript pro konfiguraci cest šablony:



Otevřete index.css soubor v src adresář a přidejte následující direktivy:

Komponenty

Vyvineme dvě samostatné komponenty:

  • BlogList :Seznam všech blogových příspěvků a vytvoření blogového příspěvku

  • SingleBlog :Zobrazení podrobností o jednom příspěvku na blogu

Vytvoříme BlogList.js a SingleBlog.js soubory v /src/components adresář. Otevřete kořenový adresář v projektu a vložte následující skript řádek po řádku.

cd src
mkdir components
cd components
touch SingleBlog.js BlogList.js

Seznam blogů

Uvedeme seznam všech blogových příspěvků v této komponentě. V horní části této komponenty je struktura formuláře pro vytvoření nového příspěvku na blogu.

Knihovna klienta Altogic nám umožňuje vytvářet, získávat, aktualizovat, mazat, vypisovat jakoukoli instanci v databázi pomocí elementárních funkcí. V naší aplikaci použijeme funkce vytvoření a získání:

*altogic.db.model(<MODEL_NAME>).get() :Načte všechny instance ze související tabulky

  • altogic.db.model(<MODEL_NAME>).object(<CREATED_INSTANCE>).create() Vytvoří instanci v databázi se vstupními daty

Voláme altogic.db.model("blogs").get() funkce uvnitř useEffect() k načtení blogů z databáze při vykreslení komponenty.



SingleBlog

SingleBlog komponenta je komponenta, kde můžete zobrazit podrobnosti o jednom blogu, jako je obsah blogu a datum vytvoření.

Každý blogový příspěvek má svou vlastní stránku v cestě /blog/:id, kde id je jedinečné ID blogu. K ID se dostaneme pomocí useParams() háček uvnitř komponenty React.

Data blogu získáváme pomocí altogic.db.model("blogs").object(id).get() funkce v háku useEffect().


Aplikace

Protože používáme react-router-dom pro směrování musíme použít komponentu BrowserRouter v našem index.js soubor. Otevřete index.js a vložte následující skript:


Nyní zbývá pouze upravit hlavní App komponent. Musíme definovat cesty v App komponenta s vykreslenými komponentami a parametry trasy. Vložte následující fragment kódu do App.js soubor:

Závěr

V tomto tutoriálu jsme vyvinuli úplnou aplikaci blogu React využívající Altogic a Tailwind CSS. Vývoj backendu zastrašuje vývojáře frontendu v raných fázích. Vytvoření backendové aplikace s pomocí Altogic Client Library však zabralo pouze 2 řádky kódu. Zdrojový kód této aplikace najdete zde.