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

Mailchimp 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. Mailchimp xizmati sizning maxsulotingizni email xabar orqali reklama qilishini taklif etadi, ya'ni, foydalanuvchilarning o'zlari yangi chiqayotgan maxsulotga yoki tayyor bo'lgan maxsulotning kutilayotgan yangiliklari uchun obuna bo'ladi va siz ularni o'z maxsulotingiz haqida xabardor qilasiz.

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 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. Supabasening 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
);

Endi boshlang'ich repository ni kopmyuterimizga yuklab olamiz va repositoryni terminal orqali ochib, quyidagi kod komandasini kiritamiz:
npm install
Ushbu komanda bizga kerakli bo'lgan dasturlarni o'rnatadi.

Keyin Repositoryni Code Editor 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 web sahifasida yaratgan loyihangizning sozlashlar bo'limidagi ilova (URL)

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

Endi navbat Form Componentiga. 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);
    }
  }

Bizning Form Componentimiz to'liq bo'ldi. Ushbu Componentdan foydalanish uchun pages papkasidagi 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 dev
Ushbu komanda loyihani o'z kopmyuterimizda 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 Repositoriysi: https://github.com/erkeen/mailchimp

E'tiboringiz uchun raxmat.