DEV Community: ES

How to Create Your Own Mailchimp Service?

ES — Mon, 01 Mar 2021 14:27:46 +0000

Mailchimp is often used to collect email lists. This post will teach you how to quickly create a Mailchimp-style email collection form. You can then start using it to collecting subscribers' emails.

Why build your own version of a Mailchimp form?

There are a few reasons to do create your own Mailchimp style form, one is to remove the Mailchimp sponsor branding in your form. Sponsor branding free subscriber list forms are a paid-for feature with Mailchimp, and you may not want your subscribers to see third-party branding. Another reason is to avoid sharing user data with third parties. If you're going to take a privacy-minded approach with your services, it is good practice to avoid sharing user details with third parties wherever possible.

The "Supastack".

I picked a stack with minimal setup, and which allows us to scale easily later without any stress.

Next.js is a React based Front-End framework and it helps us to build a web page of Mailchimp.

Tailwind CSS is a utility-first CSS framework packed with classes. So, we don't have to create CSS styling classes, instead, we can just use ready-made Tailwind CSS classes directly in our HTML.

Supabase is a Backend-as-a-Service based on PostgreSQL Database. It provides not only a database but also Authentication, RESTfull APIs, a real-time database, and other back-end-related services (I'm also currently interning at Supabase!).

Let's create the project

First of all, we need to sign up for an account with Supabase. You can sign up at Supabase.io. Once you have an account, create a new project and enter the following code in SQL Editor of the project:

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

-- This creates a table called functions_emails with id, name, and email_address columns.

Secondly, clone my starter repository and open it with your Code Editor.

Now, let's install the required dependencies by entering the following command on the terminal of the Code Editor:
npm install

We should now have everything set up. It is time to make the pieces together. Create a file called env.local to save Environment Variables:

NEXT_PUBLIC_SUPABASE_URL=SupabaseURL 

NEXT_PUBLIC_SUPABASE_KEY=SupabaseKEY

SupabaseURL is a unique URL provide by Supabase to connect to your project database. You can find it in your project settings.

SupabaseKEY is a key provided by Supabase to access your project database. You can find it in your project settings.

Now, we can move on to Form Component. I have already created the form except main functionality. Let's complete the component by modifying handleSubmit(e) function:

// Form.js
async function handleSubmit(e) {
    try {
      e.preventDefault();
      if (!email)
        throw new Error(
          "Email is required. Please provide a valid email address!"
        );
// Following code inserts data into the database.
      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);
    }
  }

The Form Component should now be ready. We now have to add it into the index.js file in the pages folder by entering the following code:

// 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>
  );
}

One final step is running the project by entering the following code in the terminal:
npm run dev

If it runs successfully, we can check the project by entering the http://localhost:3000 URL on our choice of browser. Now we have to submit the form by entering our name and email address.

If the form is submitted successfully, the data should be stored in the Supabase database.

If you have made it this far, it means you have your own Mailchimp Service. Of course, you can customize it however you want and start using it.

The final version of the project: https://mailchimp.vercel.app/
The final version of the project Github Repository: https://github.com/erkeen/mailchimp

Thank you for your attention!

Qanday qilib Mailchimp xizmatini yaratish mumkin?

ES — Mon, 15 Feb 2021 22:11:38 +0000

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.