logo

Vytvořte aplikaci Newsletter pomocí Twitter Revue, Next.js API Routes a Tailwindcss

Ahoj 👋, rádi se učíte z videonávodů? Tento článek je také dostupný jako videoobsah.

https://www.youtube.com/watch?v=XbtgjxWFssQ

Neváhejte se přihlásit k odběru budoucího obsahu

Máte e-mailový zpravodaj nebo uvažujete o jeho založení? E-mailový zpravodaj poskytuje vašim odběratelům pravidelné aktualizace o vaší práci, produktech, vášni, životě, cestě, o čemkoli, co uznáte za vhodné ke sdílení. Máme několik skvělých prodejců/produktů/stránek, které nám pomáhají okamžitě začít se službou e-mailového zpravodaje. Buttondown, Mailchimp, MailerLite, Substack jsou jen některé, které zde lze jmenovat.

Začátkem tohoto roku Twitter oznámil akvizici Revue, služby, díky které může kdokoli zdarma a snadno zakládat a publikovat redakční zpravodaje. Nejen to. Twitter také zpřístupnil funkce Revue Pro zdarma pro všechny účty.

Před pár dny tweet z oficiálního účtu Revue potvrdil, že lidem umožní přihlásit se k odběru vašeho zpravodaje Revue přímo z vašeho profilu na Twitteru. Když ponechám některé debaty stranou, myslím, že je to skvělý krok.

https://twitter.com/revue/status/1428371221524189186

Jako vlastník newsletteru jej můžeme propagovat mnoha způsoby.

  • Můžeme odkazovat na stránku zpravodaje z našeho webu, blogu.
  • Formulář předplatného můžeme vložit na naše webové stránky pomocí jednoduchých úryvků JavaScript, HTML a CSS, které poskytují dodavatelé.
  • Pokud prodejce zpravodaje poskytuje rozhraní API pro přístup k datům, můžeme zpravodaj vytvářet a spravovat zcela pod naší kontrolou. Je to výkonné použití, které dává vašim uživatelům pocit oneness být součástí stejného webu, podobný vzhled a dojem.

Jaký je tedy plán?

Tento tutoriál vás naučí, jak používat Revue API pro načítání dat do Next.js aplikace využívající API trasy (bezserverové funkce). Použijeme také tailwindcss abyste aplikaci dodali lepší vzhled a dojem.

Jsem na cestě k migraci svého starého webu na nový web pomocí Next.js a tailwindcss , a newsletter bude jeho součástí. Je to tedy vynikající příležitost podělit se o to, co jsem implementoval a naučil.

TL;DR

Pokud chcete skočit do finální aplikace nebo zdrojového kódu brzy, zde jsou odkazy

  • Odkaz na aplikaci Newsletter
  • Celý zdrojový kód na GitHubu
  • (Znovu) Odkaz na YouTube

Nastavení informační služby pomocí Revue

Chcete-li nastavit newsletter s Revue , zaregistrujte se na https://www.getrevue.co/ pomocí svého Twitter účtu nebo e-mailu.

Dále se přihlaste ke svému účtu a nastavte newsletter zadáním názvu, popisu, rozložení, problémů a plánu. S účtem Revue můžete integrovat mnoho služeb, jako je Twitter, Facebook, Instagram, a získávat z nich obsah, který můžete přidat do zpravodaje. Kromě toho můžete data načíst pomocí kanálů RSS. Můžete také integrovat RSS zdroj vašeho blogu poháněného Hshnode. Už jsem si přál Sam Sycamore 😆!

https://twitter.com/tapasadhikary/status/1428744252532477955

Ve spodní části integrační stránky je zobrazen váš klíč API pro přístup k datům bulletinu prostřednictvím požadavků HTTP. Zkopírujte prosím tento klíč a uschovejte jej.

Tento klíč API bude součástí Authorization hodnotu záhlaví při použití rozhraní API Revue. Zde je odkaz, kde se dozvíte o všech veřejně dostupných rozhraních API. V tomto tutoriálu použijeme následující,

  • POST /v2/subscribers :Přidejte odběratele do seznamu.
  • GET /v2/subscribers :Vrátí seznam vašich aktivních odběratelů.
  • GET /v2/issues :Vrátí seznam vašich odeslaných problémů.

Předtím si ale vypracujme uživatelské rozhraní aplikace Newsletter Subscription.

Vytvoření aplikace pro odběr zpravodaje pomocí Next.js a Tailwindcss

Na GitHubu je k dispozici spousta začínajících projektů, jak začít s Next.js a Tailwindcss. Můj osobní favorit je next-starter-tailwind kvůli jeho jednoduchosti. Budu ho používat jako šablonu pro vytvoření úložiště pro aplikaci pro odběr zpravodaje. Neváhejte použít jakýkoli jiný startovací projekt, který vám vyhovuje.

Kliknutím na Use this template vytvořte repo tlačítko next-starter-tailwind úložiště.

Zadejte požadované podrobnosti a vytvořte úložiště ze šablony.

Nyní naklonujte úložiště a přejděte do složky projektu. Otevřete příkazový řádek nebo okno terminálu a nainstalujte závislosti pomocí následujícího příkazu

npm install # Or, yarn install

V této fázi prosím otevřete projekt pomocí svého oblíbeného editoru kódu (v mém případě VS Code) a proveďte drobné změny kódu. Otevřete header.js soubor pod components složku a najděte Next.js Starter Tailwind text. Změňte tento text na Newsletter demo powered by Next.js Revue Tailwind . Navíc můžete změnit jméno tvůrce, informace na GitHubu v footer.js soubor.

Nyní uložte změny a pomocí tohoto příkazu z příkazového řádku spusťte aplikaci. 

npm run dev # Or, yarn dev

Přístup k aplikaci získáte pomocí adresy URL http://localhost:3000 . Měli byste vidět počáteční uživatelské rozhraní.

Vytvořte formulář odběru

Vytvořme si základní formulář pro přihlášení k odběru s jediným polem pro e-mail a tlačítkem pro přihlášení. Vytvořte prosím nový soubor s názvem Subscribe.js pod components složku s následujícím obsahem.

const Subscribe = () => {
  return (
    <div className="border border-gray-200 rounded p-6 my-4 w-full bg-gray-50">
      <p className="text-gray-900 mb-6 text-lg md:text-xl">
         Want to keep your brain engaged with great UI/UX learning content?
      </p>
      <p className="text-gray-800 dark:text-gray-400 mb-10 text-base">
        Enter your email address and you'll be be added to my email newsletter, of which you can opt out any time.
      </p>
      <form className="relative my-4">
        <input
          aria-label="Email for newsletter"
          placeholder="[email protected]"
          type="email"
          autoComplete="email"
          required
          className="py-4 px-0 text-md bg-transparent w-9/12 text-gray-900 border-b-2 border-gray-600 dark:border-gray-400 dark:text-white focus:border-brand focus-visible:outline-none"
        />
        <button
          className="flex justify-center px-5 py-4 mt-8 bg-green-600 text-white font-bold text-lg"
          type="submit"
        >
          Subscribe
        </button>
      </form>

      <p className="text-xl text-gray-800 dark:text-gray-200">
        14 subscribers . 3 issues
      </p>
    </div>
  );
};

export default Subscribe;

Jedná se o komponentu reakce s jednoduchým formulářem s jedním polem pro e-mail a tlačítkem. Také jsme pevně zakódovali počet odběratelů a vydání. Později provedeme volání API, abychom je načetli. Styl HTML elementu jsme upravili pomocí tříd tailwindcss.

Nyní přejděte na index.js pod pages složku. Nahraďte obsah souboru následujícím,

import Subscribe from "@components/Subscribe";

export default function IndexPage() {
  return (
    <Subscribe />
  );
}

Zde importujeme a používáme Subscribe komponenta, takže když se aplikace načte, zobrazí formulář pro přihlášení k odběru newsletteru. Obnovíme stránku. Měli byste vidět formuláře předplatného jako,

Vytvořte trasy Next.js API pro přihlášení k odběru a mnoho dalších

Nyní je čas vytvořit Next.js API Routes registrovat nového odběratele, získat počet odběratelů a seznam vydání.

Funkce bez serveru Next.js

S API Routes Next.js můžete snadno vytvářet koncové body API. Na pozadí používá funkce bez serveru Node.js. Tyto funkce musíte vytvořit uvnitř pages/api složku. Nejprve tedy vytvořte složku s názvem api pod pages složku.

Nyní budeme potřebovat Revue API klíč. Vytvořte prosím .env.local soubor v kořenovém adresáři složky projektu s následujícím řádkem

REVUE_API_KEY=<REPLACE_THIS_WITH_REVUE_API_KEY>

Použijte prosím svůj API Key jste zkopírovali ze stránky integrace revue dříve.

V této fázi musíte restartovat místní server pro proměnnou prostředí, aby se načetla do naší aplikace. Zastavte tedy server a restartujte jej pomocí yarn dev příkaz.

Pojďme vytvořit trasu API pro registraci nového předplatitele.

Ale počkejte! Proč nemůžeme přímo používat API Revue?

Můžeš. Je možné používat API Revue přímo ve vašich komponentách React. Jeho použití prostřednictvím rozhraní Next.js API má však několik výhod.

  • Pokud v budoucnu budete chtít používat jinou informační službu než Revue, kód komponenty vašeho uživatelského rozhraní se nikdy nezmění. Stačí změnit funkci bez serveru a znovu nasadit.
  • Existuje abstrakce. Pomáhá vám samostatně nasadit a hostovat pouze API spolu s vašimi vlastními obchodními případy použití.
  • Přímý přístup k těmto rozhraním API na straně klienta vás vystaví riziku API key vystavené, které může kdokoli snadno získat kontrolou síťových požadavků. To přece nechcete!

Dobře, pojďme dál.

Vytvoření trasy Next.js API pro registraci nového odběratele

Vytvořte soubor s názvem subscribe.js uvnitř pages/api složku. Znamená to, že naše trasa API bude přístupná z komponent uživatelského rozhraní pomocí URI /api/subscribe . Vložte prosím následující obsah do subscribe.js soubor.

export default async function handler(req, res) {
    // 1. Get the email from the payload and
    // validate if it is empty.
    const { email } = req.body;
    if (!email) {
        return res.status(400).json({error: 'Please provide an email id.'});
    }

    // 2. Use the Revue API Key and create a subscriber using
    // the email we pass to the API. Please note, we pass the
    // API Key in the 'Authorization' header.
    try {
        const API_KEY = process.env.REVUE_API_KEY;
        const response = await fetch(
            `https://www.getrevue.co/api/v2/subscribers`,
            {
                method: 'POST',
                body: JSON.stringify({email: email, double_opt_in: false}),
                headers: {
                    'Authorization': `Token ${API_KEY}`,
                    'Content-Type': 'application/json'
                }
            }
        )

    // 3. We check in the response if the status is 400
    // If so, consider it as error and return. Otherwise a 201
    // for create        
        if (response.status >=400) {
            const message = await response.json();
            console.log(message.error.email[0]);
            return res.status(400).json({error: message.error.email[0]});
        }
        // Send a JSON response
        res.status(201).json({
            message: `Hey, ${email}, Please check your email and verify it. Can't wait to get you boarded.`,
            error: ''
        });
    } catch (err) {
    // 4. If the control goes inside the catch block
    // let us consider it as a server error(500)  
        return res.status(500).json({error: err.message || error.toString()});
    }
}

Ve výše uvedené funkci se děje několik věcí.

  1. Když někdo vyvolá tuto funkci API, očekáváme e-mailovou část datové části. Nejprve tedy získejte e-mail z datové části a ověřte, zda je prázdný.
  2. Dále použijte e-mail a klíč API_KEY k volání rozhraní API Revue k registraci odběratele. Zde si všimněte užitečného zatížení. Předáváme hodnotu e-mailu a double_opt_in hodnotu jako false . Ve skutečnosti NEBUDETE předat hodnotu double_opt_in jako false, protože chcete, aby vaši odběratelé ověřili e-mail před potvrzením. Děláme to jen kvůli demu.
  3. Potom zkontrolujeme response pokud je stav 400. Pokud ano, považujte to za chybu a vraťte se s chybovou zprávou. Jinak 201 pro vytvoření a návrat se zprávou o úspěchu.
  4. Naposledy, pokud se ovládací prvek dostane do bloku catch, považujme to za chybu serveru (500).

Aktualizujte kód uživatelského rozhraní pro registraci odběratelů

Aktualizujeme Subscribe komponentu použít /api/subscribe API. Otevřete Subscribe.js soubor pod components a proveďte tyto změny.

  1. Importujte useState háček z react spravovat několik států. Přidejte tento řádek na začátek souboru.

    import { useState } from 'react';

  2. Vytvořte tři stavové proměnné pro zpracování e-mailu ze vstupu uživatele a zprávy o chybě a úspěchu z volání API. Přidejte tyto tři řádky na začátek Subscribe fungovat jako,

    const Subscribe = () => {
 const [email, setEmail] = useState('');
 const [error, setError] = useState('');
 const [success, setSuccess] = useState('');
   return (
     ..... 
     {/* Rest of the code as is */}
     ....
   )
}

  3. Dále zpracujte dvě události. Jedním je zachycení uživatelského vstupu do pole e-mailu a druhým je zpracování pro odeslání.

    ...
...
<form className="relative my-4" onSubmit={subscribeMe}>
     <input
       onChange={changeEmail}

  4. Nyní je čas definovat oba subscribeMe a changeEmail metody.

    const subscribeMe = async (event) => {
  event.preventDefault();

  const res = await fetch("/api/subscribe", {
     body: JSON.stringify({ email: email }),
     headers: { 'Content-Type': 'application/json' },
     method: "POST",
  });

 const { error, message } = await res.json();
  if (error) {
     setError(error);
  } else {
     setSuccess(message);
  }
};

const changeEmail = (event) => {
 const email = event.target.value;
 setEmail(email);
}

    V subscribeMe metodu, nazýváme API /api/subscribe , předáním hodnoty e-mailu jako užitečného zatížení. Poté zpracujeme chybovou a úspěšnou zprávu.

  5. Nakonec si ukážeme úspěšnou a chybovou zprávu v uživatelském rozhraní. Přidejte tento kód hned za prvek formuláře.

    {success 
       ? 
    <span className="flex items-center text-sm font-bold text-green-700"> 
         {success}
    </span> 
       : 
    <span className="flex items-center text-sm font-bold text-red-800">
          {error} 
    </span>
}

    Skvělé, nyní přejděte do aplikace a zadejte e-mailovou adresu pro registraci. Protože jsme vypnuli ověřování e-mailu, můžete jej otestovat pomocí libovolného e-mailového ID. Podívejte se prosím na celý zdrojový soubor odtud.

Pro ověření, e-mailová adresa byla úspěšně přidána, dostala se na stránku odběratelů vašeho účtu. Toto nové e-mailové ID by mělo být přidáno,

Zkuste znovu stejné e-mailové ID a pokuste se zaregistrovat!

Ano, dostanete tuto chybu. To je vše. Předplatné funguje dobře.

Získejte počet odběratelů

Dobře, pojďme zjistit počet odběratelů. Nyní tedy napíšeme bezserverovou funkci pro získání počtu odběratelů. Vytvořte prosím soubor s názvem subscribers.js pod pages/api složku s následujícím obsahem.

export default async function handler(_, res) {
  const API_KEY = process.env.REVUE_API_KEY;
  const response = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    headers: {
      Authorization: `Token ${API_KEY}`,
      'Content-Type': 'application/json'
    },
    method: 'GET'
  });

  const data = await response.json();
  const count = data.length;

  res.setHeader(
    'Cache-Control',
    'public, s-maxage=1200, stale-while-revalidate=600'
  );

  return res.status(200).json({ count });
}

K načtení seznamu odběratelů a následnému vrácení počtu jako odpovědi používáme API Revue. Nyní tedy musíme použít /api/subscribers URI pro načtení počtu. Pojďme na to.

Aktualizujte kód uživatelského rozhraní tak, aby načítal počet odběratelů

Potřebujeme načíst počet odběratelů při Subscribe zatížení komponent. Pokud je také nový odběratel, musíme v uživatelském rozhraní zobrazit aktualizovaný počet. Next.js podporuje dva druhy pre-rendering ,

  • Static Generation(SSG) :V tomto případě je vše předkompilováno, předkompilováno a uloženo do mezipaměti. Změny ve vašem obsahu neuvidíte, dokud nebude k dispozici další sestavení. Funguje to nejlépe, když pracujete se statickými daty, jako jsou články na blogu.
  • Server-Side Rendering(SSR) :Zde se data pro stránku generují na vyžádání pro každý požadavek.

Dáváme přednost statickému generování, jak je to jen možné, ale v některých případech se nemusíme vyhnout vykreslování na straně serveru. Pro naši aplikaci budeme používat SWR . Jak je popsáno zde,

Pomocí Next.js pre-rendering podpora a SWR , můžete stránku předem vykreslit pro SEO a povolit ukládání do mezipaměti, opětovné ověření a opětovné načítání v intervalech na straně klienta.

  1. Nainstalujte swr knihovny pomocí příkazu,

    npm install swr #Or, yarn add swr

  2. swr knihovna nám dává háček nazvaný useSWR . Vyžaduje dva parametry, key a funkce načítání. key je řetězcová hodnota, obvykle adresa URL API, kterou předáme do fetcher funkce a fetcher funkce může být asynchronní funkcí. Vytvořme tedy jednoduchou funkci načítání.

    Vytvořte prosím utils složku v kořenovém adresáři projektu a vytvořte fetcher.js soubor s následujícím obsahem,

    export default async function Fetcher(...args) {
 const res = await fetch(...args);

 return res.json();
}

    Dále v components/Subscribe.js zahrnout tyto dva importy. 

    import useSWR from 'swr';
import fetcher from '../utils/fetcher';

    Nyní můžeme použít useSWR háček pro předání API(api/subscribers ) a funkci načítání.

    const Subscribe = () => {

  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  // --- above is old code ---

  const { data } = useSWR('/api/subscribers', fetcher);
  const subscriberCount = data?.count;

    Upozorňujeme, že používáme JavaScript optional chaining(?.) funkce pro získání hodnoty počtu. Zpracovává undefined hodnotu mnohem bezpečněji.

    Pokaždé, když se data změní na back-endu, subscriberCount proměnná bude mít nejnovější počet.

  3. Poslední je použít subscriberCount stavová proměnná místo pevně zakódované hodnoty.

    <p className="text-sm text-gray-800 dark:text-gray-200">
  { subscriberCount } subscribers . 3 issues
</p>

    To je vše. Obnovte aplikaci a podívejte se na skutečný počet.

Získat seznam problémů

Nyní potřebujeme získat seznam vydání a počet publikovaných vydání. Musíme tedy znovu napsat funkci bez serveru, abychom získali tyto podrobnosti. Ale počkat, v tomto tutoriálu to neudělám. Berte to prosím jako cvičení k vyzkoušení.

Tip:K načtení dat musíte použít toto API Revue => GET /v2/issues . Pokud potřebujete pomoc, kód API je zde a změny komponent jsou k dispozici.

Nakonec by uživatelské rozhraní mělo mít skutečný počet problémů a seznam publikovaných problémů, jako je tento (mám jeden testovací problém).

Pojďme nasadit

Gratulujeme!!! Aplikace je připravena k použití. Je však k dispozici pouze u vás. Pojďme to nasadit veřejně. K nasazení naší aplikace použijeme platformu Vercel. Je velmi snadné nasadit aplikaci Next.js na Vercel pomocí několika jednoduchých kroků. Chcete-li to provést, potvrďte a odešlete všechny změny kódu do GitHub úložiště.

  1. Vytvořte si účet u Vercelu, přihlaste se a klikněte na New Project začněte.

  2. Dále importujte svůj projekt z GitHubu.

  3. Nyní musíte svůj projekt nakonfigurovat. U projektu Next.js téměř nemusíte provádět žádné změny v sestavení a dalších parametrech. Pokud je vaše aplikace závislá na jakýchkoli proměnných prostředí, musíte je přidat jednu po druhé. V našem případě jeden máme. Tak to přidejme. Poté klikněte na Deploy tlačítko.

  4. Gratulujeme!!! Úspěšně jste nasadili aplikaci na Vercel. Nyní můžete k aplikaci přistupovat veřejně pomocí adresy URL vygenerované procesem nasazení.

Po nasazení můžete provádět mnoho kontrol a dalších konfigurací podle vašich potřeb. Pokud má vaše aplikace jednu nebo více bezserverových funkcí, můžete si prohlédnout protokoly živého spuštění z Functions vašeho projektu tab. Obrázek níže ukazuje protokol našich funkcí.

Souhrnně

  • Next.js je budoucnost (pravděpodobně?) pro projekty založené na Reactu. Je snadné jej nastavit, naučit se a používat. tailwindcss je vývojářsky přívětivá knihovna CSS pro stylování aplikace. Revue je úžasná služba newsletteru.
  • Vaši uživatelé, zákazníci mají rádi oneness a belongingness . Proč tedy nezískat službu newsletteru v rámci samotné aplikace/stránky a nespravovat ji?
  • Next.js APIs jsou Node.js serverless functions v pozadí. Je to skvělý způsob načítání a interakce se službami typu back-end.
  • Je velmi snadné nasadit a udržovat vaši aplikaci Next.js (včetně funkcí bez serveru) pomocí Vercel .
  • Podobně jako toto můžete integrovat mnoho dalších služeb, jako je GitHub, váš blog a mnoho dalších, kterým se budu věnovat ve svém nadcházejícím příspěvku.

To je vše. Doufám, že jste si to se mnou užili. Sdílejte/lajkujte prosím tento článek a videonávod, aby se dostal i k ostatním.

Pojďme se spojit. Najdete mě na Twitteru (@tapasadhikary), kde sdílím myšlenky, tipy a praktiky kódování. Dal bys prosím follow? Můžete kliknout na Přihlásit se k odběru tlačítko v horní části stránky, abyste dostali e-mailové upozornění na mé nejnovější příspěvky.