Qanday qilib Mailchimp xizmatini yaratish mumkin?
Published: 2021-02-15 22:11:38


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](https://nextjs.org/)
* Tailwind CSS [Tailwind CSS haqida to'liq ma'lumot](https://tailwindcss.com/)
* Supabase [Supabase haqida to'liq ma'lumot](https://supabase.io/)

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](https://reactjs.org/)** 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](https://github.com/erkeen/mailchimp-starter) 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/](https://mailchimp.vercel.app/)
Loyihaning so'nggi Github Repositoriysi: [https://github.com/erkeen/mailchimp](https://github.com/erkeen/mailchimp)

E'tiboringiz uchun raxmat.