logo

Ukládejte potenciální zákazníky ze vstupní stránky bez backendového serveru v Next.js

Vstupní stránky pro generování potenciálních zákazníků pomáhají usnadnit proces získávání uživatelů a obvykle se vytvářejí za účelem shromažďování osobních údajů uživatele. S těmito informacemi se značka může rozhodnout poslat zdroje nebo zjistit demografickou skupinu potenciálního zákazníka. Vstupní stránky pro generování potenciálních zákazníků vytvářejí počáteční kontaktní bod mezi naší značkou a potenciálním zákazníkem.

Co budeme stavět

Tento příspěvek pojednává o vytvoření vstupní stránky pro shromažďování a ukládání kontaktních informací uživatele v aplikaci Next.js. Tato aplikace nevyžaduje vlastní backend server.

Adresa URL GitHubu

https://github.com/Iheanacho-ai/appwrite-email-leads

Předpoklady

Abychom z tohoto projektu vytěžili maximum, vyžadujeme následující:

  • Základní znalost CSS, JavaScriptu a React.js
  • Na počítači je nainstalován Docker Desktop, spusťte docker -v příkaz k ověření, zda máme nainstalovanou plochu dockeru, pokud ne, nainstalujte jej odtud
  • Instance Appwrite běžící na našem počítači, podívejte se na tento článek a vytvořte místní instanci Appwrite. K ukládání e-mailových potenciálních zákazníků použijeme výkonnou databázovou službu Appwrite

Nastavení naší aplikace Next.js

Next.js je open-source rámec React, který nám umožňuje vytvářet statické webové aplikace vykreslované na straně serveru.

Chcete-li vytvořit naši aplikaci Next.js, přejdeme do našeho preferovaného adresáře a spustíme příkaz terminálu níže:

    npx create-next-app@latest
    # or
    yarn create next-app

Po vytvoření naší aplikace změníme adresář na projekt a spustíme vývojový server s:

    cd <name of our project>
    npm run dev

Chcete-li vidět naši aplikaci, přejděte na http://localhost:3000.

Instalace aplikace Appwrite

Appwrite je end-to-end serverové řešení s otevřeným zdrojovým kódem, které umožňuje vývojářům rychleji vytvářet aplikace.

Chcete-li používat Appwrite v naší aplikaci Next.js, nainstalujeme sadu SDK na straně klienta Appwrite pro webové aplikace. 

    npm install appwrite

Vytvoření nového projektu Appwrite

Během vytváření instance Appwrite jsme specifikovali, jaký název hostitele a port vidíme naši konzoli. Výchozí hodnota je localhost:80.

Přejdeme na localhost:80 a vytvoříme nový účet, abychom viděli naši konzoli.

Na naší konzoli je Vytvořit projekt knoflík. Kliknutím na něj spustíte nový projekt.

Náš řídicí panel projektu se zobrazí, jakmile projekt vytvoříme. V horní části stránky je Nastavení bar. Klikněte na panel nastavení pro přístup k ID projektu a Koncový bod API .

Zkopírujeme ID projektu a Koncový bod API , kterou potřebujeme k inicializaci Appwrite Web SDK.

V našem index.js soubor, inicializujeme novou instanci Appwrite pomocí následujícího. 

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";

    const Home = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

        return(
          <div>Hello World!</div>
        )
    }

    export default Home;

Vytvoření kolekce a atributů

Ve webové konzoli Appwrite klikneme na Databáze na levé straně řídicího panelu.

Kolekci vytvoříme v záložce databáze kliknutím na Přidat kolekci knoflík. Tato akce nás přesměruje na Oprávnění stránku.

Na Úrovni kolekce chceme přiřadit Přístup pro čtení a Přístup pro zápis s role:all hodnota. Tato oprávnění můžeme později upravit, abychom řídili, kdo má přístup ke čtení nebo zápisu do naší databáze.

Napravo od Oprávnění zkopírujeme ID sbírky , které potřebujeme k provádění operací s dokumenty sbírky.

Dále přejdeme na Atributy vytvoříte vlastnosti, které chceme, aby dokument měl.

Vytvoříme e-mail atribut emailAddress.

Vytvoření naší vstupní stránky

V našem index.js vytvoříme naši vstupní stránku. Tato stránka se skládá z input prvek, který uživatelům umožní zadat jejich e-mailové adresy, které se uloží do databáze. 

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";

    const Home = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

          return(
            <div className="home">
              <div className="title-container">
                  <h2>Orange Music</h2>
                  <p>Input your email address to get updates when we launch!</p>
                  <input 
                  type="text" 
                  />
                  <button type="button">Add email address</button>
              </div>
            </div>
      )
    }

    export default Home;

POZNÁMKA: Používáme tlačítko s type= button k přepsání výchozího chování tlačítka při odesílání.

V našem global.css přidáme tyto styly CSS na naši vstupní stránku. 

    body{
        margin: 0;
        padding: 0;
    }

    .home{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: url('https://res.cloudinary.com/amarachi-2812/image/upload/v1649445450/music-banner_zveuix.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .title-container h2{
        color: #fff;
        font-size: 32px;
    }

    .title-container p{
        color: rgba(255, 255, 255, 0.815);
        font-size: 18px;

    }

    .title-container input{
        outline: none;
        height: 30px;
        width: 250px;

    }

    .title-container button{
        height: 35px;
        background-color: #111;
        color: #fff;
        border: 1px solid #111;

    }

Pro náš obrázek na pozadí můžeme použít jakýkoli odkaz na obrázek. V tomto tutoriálu však používáme obrázek uložený na Cloudinary, protože je snazší aplikovat transformace a optimalizovat doručení.
Chcete-li pochopit, jak nahrát obrázky do Cloudinary, podívejte se na dokumentaci Cloudinary.

Zde je naše vstupní stránka:

Přidání interakce vstupu s databází

Appwrite má bezpečnostní zásady, které trvají na tom, abychom se přihlásili, abychom mohli používat funkce Appwrite, jako je Databáze a Funkce Appwrite nám však umožňuje obejít tuto politiku pro jednoduché projekty, jako je tento, vytvářením anonymních uživatelských relací.

V našem index.js vytváříme anonymní uživatelskou relaci jakmile se naše aplikace připojí pomocí Appwrite's createAnonymousSession metoda. 

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";

    const Home = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

        //creating an anonymous Session

        const createAnonymousSession = async() => {
          try{
            await sdk.account.createAnonymousSession();
          }catch(err){
            console.log(err)
          }

        }
        useEffect(()=> {
          createAnonymousSession()
        }, [])

        return(
          <div className="home">
            <div className="title-container">
              <h2>Orange Music</h2>
              <p>Input your email address to get updates when we launch!</p>
              <input 
              type="text" 
              />
              <button type="button">Add email address</button>
            </div>
          </div>
      )
    }

    export default Home;

Dále v našem index.js vytvoříme stavovou proměnnou pomocí React useState háček pro uložení hodnoty naší e-mailové adresy input formulář. 

    // email state 
    const [emailAddress, setEmailAddress] = useState()

Poté vytvoříme handleEmailAddress funkce v našem index.js soubor pro uložení e-mailových adres do databáze Appwrite. 

    // handle email submission
    const handleEmailAddress = async () => {
      try {
        await sdk.database.createDocument(collectionID, 'unique()',{
          "emailAddress": emailAddress
        } )
        setEmailAddress('');
        alert("Email saved successfully!")
      } catch (error) {
        console.log(error)

      }
    }

V bloku kódu výše handleEmailAddress funkce dělá následující:

  • Vytvoří nový dokument v databázi pomocí createDocument Appwrite Tato funkce obdrží ID kolekce, které jsme uložili z Oprávnění stránka, unikátní() parametr, který určuje, že chceme dynamicky vytvořené ID dokumentu, a hodnoty atributů jako parametry
  • Upozorní nás, když jsme dokument úspěšně uložili, a poté vymaže informace v našem emailAddress stavová proměnná
  • Zaprotokoluje každou chybu, na kterou jsme narazili, do naší konzole

Dále předáme naši stavovou proměnnou jako hodnotu našemu input prvek a náš handleEmailAddress funkce na naše tlačítko onClick posluchač události. 

    <div className="home">
      <div className="title-container">
        <h2>Orange Music</h2>
        <p>Input your email address to get updates when we launch!</p>
        <input 
        type="text" 
        value={emailAddress}
        onChange= {(e) => setEmailAddress(e.target.value)}
        />
        <button type="button" onClick={handleEmailAddress}>Add email address</button>
      </div>
    </div>

Zde je návod, jak naše index.js vzhled souboru.

https://gist.github.com/Iheanacho-ai/c0b17efee282f5e2b280ac53fb2e8218

Zadejte prosím e-mailovou adresu, aby se zobrazila uložená v databázi.

Závěr

Tento článek popisuje použití Appwrite k vytvoření dat v databázi. Vytvořili jsme jednoduchou stránku pro generování potenciálních zákazníků v aplikaci Next.js.

Zdroje

Zde je několik zdrojů, které mohou být užitečné:

  • Začínáme s aplikací Appwrite pro web
  • Databázové rozhraní API
  • Co je Appwrite a jak jej efektivně používat