Ú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 :
-
Přihlaste se do Altogic s vašimi přihlašovacími údaji.
-
Vyberte možnost Nová aplikace .
-
V části Název aplikace zadejte název aplikace.
-
A klikněte na Další .
-
Vyberte Prázdná aplikace šablonu a klikněte na Další .
-
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;
-
Klikněte na Nastavení aplikace v levé dolní části návrháře.
-
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.
-
Klikněte na související klientský klíč.
-
Zrušte zaškrtnutí políčka Vynutit relaci zaškrtávací políčko
Vytvořit model blogu
-
Klikněte na Modely na levém postranním panelu.
-
Klikněte na Nový na pravé straně obrazovky a vyberte Model.
-
Nastavit název modelu jako blogy
-
Ujistěte se, že Povolit časová razítka je vybráno pro uložení data vytvoření blogového příspěvku.
-
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.
-
Klikněte na blogy model na Modely stránka
-
Klikněte na Nové pole v pravé horní části stránky.
-
Vyberte Textové pole → Text.
-
Nastavte název modelu title.
-
Ujistěte se, že Povinné pole je vybráno.
-
Klikněte na Vytvořit.
-
Klikněte na Nové pole v pravé horní části stránky.
-
Vyberte Textové pole → Formátovaný text.
-
Nastavit název modelu obsah.
-
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.