Qanday qilib Mailchimp xizmatini 야라티시 멈킨?

Hozirgi kunda Mailchimp xizmati 마케팅 sohasini muhim qismiga aylanib borayotganiga shubha yo'q. Bugun sizlarga Mailchimp xizmatini tanishtirish barobarida, uni qanday qilib yaratish haqida shu maqolada yoritib beraman.

메일침프 xizmati nima?

Men avval boshidan Mailchimp xizmati Marketing sohasida o'z o'rniga egaligini bekorga eslatib o'tganim yo'q. Biz bilamizki Marketing - bu Reklama, shunday ekan Mailchimp xizmati Tijoratchilarga yoki Tadbirkorlarga o'z maxsulotlarini reklama qilishga yordam beradi. xabar orqali reklama qilishini taklif etadi, ya'ni, foydalanuvchilarning o'zlari yangi chiqayotgan maxsulotga yoki tayyor bo'lgan maxsulotning kutilayat

Endi birgalikda Mailchimp xizmatini yaratamiz.

Bizga kerakli bo'ladigan dasturlar:

Next.js Next.js haqida to'liq ma'lumot

Tailwind CSS Tailwind CSS haqida to'liq ma'lumot

수파베이스 Supabase haqida to'liq ma'lumot

Albatta, sizda savol paydo bo'lishi mumkin, ya'ni, nega bizga bu dasturlar kerak?

Keling unda, bu dasturlar haqida qisqa ma'lumot berib o'tay.
Xullas, Next.js - bu Front-End React kutubxonasi asosida qurilgan framework va biz uni Web sahifasi yaratish uchun ishlatamiz.

Tailwind CSS - bu bizga kerakli bo'lgan CSS classlari bilan ta'minlab beradi va biz uni Web sahifamizni ko'rinishini bezatish uchun ishlatamiz.

Supabase - bu bizga ma'lumotlar bazasi bilan taminlaydi va biz obunachilarning email manzillarini ma'lumotlar bazasiga saqlaymiz. 추가 기반 asosiy afzalligi shunadaki, biz Back-End dasturini yaratishimizga xojat qolmaydi.

Endi loyihamizni yaratishni boshlasak ham bo'ladi.

Birinchi navbatda Supabase web sahifasi orqali ro'yxatdan o'tamiz va yangi loyiha yaratamiz, keyin loyihaning SQL Editor bo'limiga quyidagi kodni kiritamiz:

create table functions_emails (
  id bigint generated by default as identity primary key,
  name text,
  email_address text NOT NULL UNIQUE
);

엔디 boshlang'ich repository ni kopmyterimizga yuklab olamiz va repositoryni 터미널 orqali ochib, quyidagi kod komandasini kiritamiz:npm installUshbu komanda bizga kerakli bo'lgan dasturlarni o'rnatadi.

Keyin Repositoryni 코드 편집기 orqali ochamiz va loyihaning asos qismiga env.local faylini yaratib, quyidagi kodni kiritamiz:

NEXT_PUBLIC_SUPABASE_URL=SupabaseURL 

NEXT_PUBLIC_SUPABASE_KEY=SupabaseKEY

SupabaseURL - bu Supabase 웹 sahifasida yaratgan loyihangizning sozlashlar bo'limidagi ilova( URL )

SupabaseKEY - bu Supabase web sahifasida yaratgan loyihangizning sozlashlar bo'limidagi kalit ( anon public )

Endi navbat Form 구성 요소. handleSubmit(e) funksiyasini quyidagi kod bilan o'zgartiramiz:

// Form.js
async function handleSubmit(e) {
    try {
      e.preventDefault();
      if (!email)
        throw new Error(
          "Email is required. Please provide a valid email address!"
        );
      const { error } = await supabase.from(props.table).insert([
        {
          name,
          email_address: email,
        },
      ]);
      resetName();
      resetEmail();
      if (error) alert(error.details);
      if (!error) alert("You have successfully subscribed!");
    } catch (error) {
      alert(error.message);
    }
  }

비즈닝 Form Componentimiz to'liq bo'ldi. Ushbu Componentdan foydalanish uchun pages 파카시다기 index.js fayliga quyidagi kodlarni kiritamiz:

// index.js
import Form from "../components/Form/Form";

export default function Home() {
  return (
    <div className="dark">
      <main>
        <Form table="functions_emails" title="Functions" />
      </main>
    </div>
  );
}

Endi loyihamizni tekshirib ko'ramiz. Avval terminalga quyidagi kod komandasini kiritamiz:npm run devUshbu komanda loyihani o'z kopmyterimizda ishlatishga imkon beradi.

Va nihoyat Browserda http://localhost:3000 ilovasi orqali yaratgan loyihamizning web sahifasini ochamiz, Form ga o'z ismimiz va email manzilimiz kiritamiz. Endi Supabase ma'lumotlar bazasini tekshiramiz, agar biz kiritgan ma'lumotlar Supabase ma'lumotlar bazasida saqlangan bo'lsa, u holda bizning Mailchimp loyihamiz tayyor deb atasak ham bo'ladi.

Siz ushbu Mailchimp loyihasini takomillashtirishingiz va omma e'tiboriga havola etishingiz mumkin.

Loyihaning so'nggi versiyasi: https://mailchimp.vercel.app/
Loyihaning so'nggi Github 저장소: https://github.com/erkeen/mailchimp

E'tiboringiz uchun raxmat.