قم بإنشاء قائمة بريدية باستخدام واجهة برمجة تطبيقات SendGrid للبريد الإلكتروني في Twilio و Laravel و Vue.js

نشرت: 2021-03-31

ظهر هذا البرنامج التعليمي في الأصل على مدونة Twilio.

التسويق عبر البريد الإلكتروني هو مفتاح نجاح استراتيجية الاتصالات الخاصة بك. من خلال تقديم عائد استثمار ومعدل تحويل ممتازين ، لا يمكن المبالغة في التأكيد على أهمية برنامج بريد إلكتروني فعال. سيعلمك هذا البرنامج التعليمي كيفية إرسال رسائل بريد إلكتروني مجمعة إلى قوائم تضم أكثر من 100 عنوان بريد إلكتروني باستخدام واجهة برمجة تطبيقات البريد الإلكتروني لـ Twilio SendGrid و Laravel و Vue.js.

قبل أن نبدأ

لإكمال هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

    • تم تثبيت الملحن وجاهز للاستخدام
    • معرفة أساسية بإطار عمل Laravel
    • خادم قاعدة بيانات مثبت محليًا جاهز للاستخدام
    • المعرفة الأساسية لـ Vue.js
    • حساب Twilio SendGrid
    • npm
    • Node.js (بإصدار 12.14 كحد أدنى ، ولكن من الأفضل أن يكون أحدث إصدار ثابت أو LTS)

لماذا واجهة برمجة تطبيقات البريد الإلكتروني Twilio SendGrid؟

تعمل مكتبة Twilio SendGrid على تبسيط عملية إرسال رسائل البريد الإلكتروني. وهو متوفر بلغات وأطر برمجة متعددة ، بما في ذلك PHP و Java و Ruby و Go. لنبدأ في إنشاء تطبيق القائمة البريدية الخاص بنا.

أنشئ قائمتنا البريدية

أنشئ مشروع Laravel جديدًا باستخدام أمر Composer التالي أدناه.

بدلاً من ذلك ، يمكنك استخدام الأمر التالي ، إذا كان مثبت Laravel مثبتًا بشكل عام على نظامك:

بغض النظر عن كيفية إنشاء مشروع Laravel الجديد ، بمجرد إنشائه ، انتقل إلى الدليل الذي تم إنشاؤه حديثًا باستخدام الأمر أدناه:

cd twilioSendGrid

التكوين وإعداد env

سيحتوي تطبيقك على نموذج صغير لجمع رسائل البريد الإلكتروني لقائمتك البريدية. لتخزينها ، أنشئ نموذجًا جديدًا ، ووحدة تحكم ، وملف ترحيل للتطبيق باستخدام الأمر أدناه.

يجب أن ترى إخراجًا مشابهًا للمثال أدناه مطبوعًا على الجهاز.

الآن ، قم بتعديل ملف الهجرة الجديد ،
database/migrations/2021_02_16_192153_create_email_listings_table.php ، بحيث تتطابق مع الكود أدناه. عند تشغيله ، سيضيف حقل بريد إلكتروني إلى جدول email_listings .

بعد ذلك ، أضف تفاصيل التكوين لخادم قاعدة البيانات المحلي إلى .env في الدليل الجذر للمشروع . هذه نسخة من قسم قاعدة البيانات لتكوين قاعدة بيانات env الخاصة بي لهذا المشروع.

بعد ذلك ، قم بتشغيل ترحيل قاعدة البيانات باستخدام الأمر التالي لتحديث جدول email_listings .

خدمة المشروع

للتأكد من أن الكود يعمل بالشكل المطلوب ، ابدأ تطبيق Laravel باستخدام الأمر أدناه.

يجب أن يبدأ التطبيق بسرعة كبيرة ، وسترى ما يلي مطبوعًا على الجهاز:

Laravel development server started: http://127.0.0.1:8000

إعادة تشكيل الواجهة الأمامية لـ Vue.js

ارتفعت شعبية Vue.js بشكل ملحوظ في الأشهر الأخيرة ، لدرجة أنه يتم شحنها الآن مع إطار عمل Laravel كإطار أمامي افتراضي. نتيجة لذلك ، سوف نستخدم Vue.js مع Laravel API الخاص بنا. لبدء إعداد Vue.js في تطبيقنا ، قم بتشغيل الأمر التالي:

composer require laravel/ui
php artisan ui vue
npm install && npm run development && npm run dev

بعد ذلك ، قم بتعديل نص نموذج العرض الافتراضي ،
resources/views/welcome.blade.php ، لتحتوي على الكود التالي:

تستورد علامة البرنامج النصي في نهاية علامة النص js/app.js في قالب Blade الخاص بنا حتى نتمكن من استخدام Vue.js في تطبيقنا. ومع ذلك ، نحتاج إلى إجراء بعض التعديلات عليه حتى يعمل بالشكل المتوقع. للقيام بذلك ، قم بتعديل resources/js/app.js بحيث يبدو مثل المثال التالي.

يستورد الكود Vue.js و Bootstrap.js وملف App.vue الخاص بنا. يحتفظ App.vue بكل ما يظهر في المتصفح. قم بإنشاء ملف جديد يسمى App.vue في دليل المكون ( resources/js/components ).

ثم أضف الكود التالي إلى App.vue :

مع تحديث الملف ، استخدم الأمر التالي لتجميع كود JavaScript الخاص بنا ومراقبة أي تغييرات مستقبلية.

مع إعادة تجميع الشفرة ، إذا أعدنا تحميل المتصفح ، فيجب أن يبدو الآن مثل الصورة أدناه.

قم بإعداد Twilio SendGrid

بعد ذلك ، نحتاج إلى تثبيت Twilio SendGrid SDK لـ Laravel باستخدام الأمر أدناه.

بعد تثبيت SDK ، توجه إلى لوحة معلومات Twilio SendGrid . ثم ، انقر فوق " إعدادات -> مفاتيح API. "في صفحة API Keys ، انقر فوق" Create API Key " in" في الزاوية العلوية اليمنى. أدخل اسمًا لمفتاح واجهة برمجة التطبيقات الجديد ، واترك " أذونات مفتاح واجهة برمجة التطبيقات " مضبوطة على " الوصول الكامل " ، وانقر على " إنشاء وعرض " في الركن الأيمن السفلي لإنشاء المفتاح.

يؤدي القيام بذلك إلى إنشاء مفتاح API جديد. انسخ مفتاح API الخاص بك ، حيث ستحتاج إليه لكي ترسل SDK رسائل البريد الإلكتروني.

ملاحظة: بعد ذلك ، في .env ، أضف التكوين أدناه ، واستبدل {YOUR API KEY} بمفتاح Twilio SendGrid API الذي نسخته للتو.

قبل أن نواصل ، من المهم أن نعرف أن Twilio SendGrid لديه مستويات مختلفة من التحقق لحسابات مختلفة. إذا قمت للتو بإنشاء حساب Twilio SendGrid جديد أو كان عمر حسابك أقل من 6 أشهر ، فإن Twilio SendGrid يتطلب منك التحقق من عنوان الإرسال الخاص بك. هذا هو العنوان الذي سيرى المستلمون الخاصون بك على أنهم مرسل البريد الإلكتروني.

إذا لم تتحقق من عنوان البريد الإلكتروني لمرسل Twilio SendGrid وكان حسابك أقل من 6 أشهر ، فقد تواجه خطأ في الخادم يطلب منك القيام بذلك عندما تحاول إرسال رسائل بريد إلكتروني.

ملاحظة: مع ذلك ، دعونا نواصل بناء تطبيق القائمة البريدية الخاص بنا.

رسائل البريد الإلكتروني الأولية

سيقوم تطبيقنا بتخزين عناوين البريد الإلكتروني للمستلمين في جدول قاعدة بيانات يسمى email_listing . لتوفير بعض الوقت ، سنقوم email_listing جدول قائمة البريد الإلكتروني الخاص بنا بعناوين البريد الإلكتروني باستخدام بزار .

قم بإنشاء بزار جديد باستخدام الأمر التالي:

افتح Seeder الجديد ، الموجود في database/seeders/EmailListingSeeder.php ، وقم بتعديله ، واستبدل الكود الحالي بالكود أدناه.

ملاحظة: لن يعمل إرسال رسائل البريد الإلكتروني إلى عناوين البريد الإلكتروني التي تم إنشاؤها عشوائيًا باستخدام Twilio SendGrid. أود أن أقترح عليك التأكد من استخدام عناوين بريد إلكتروني شرعية يمكنها تلقي رسائل البريد الإلكتروني من الإنترنت.

بعد ذلك ، قم بتشغيل الأمر التالي لبذر بياناتنا.

إرسال رسائل بريد إلكتروني مجمعة

الآن بعد أن أصبح لدينا رسائل بريد إلكتروني في جدول email_listings لقاعدة بياناتنا ، دعنا نضيف وظيفة إرسال رسائل بريد إلكتروني مجمعة. في وقت سابق ، أنشأنا وحدة تحكم تسمى EmailListingController . سنقوم الآن بإعادة تشكيل رمز وحدة التحكم لإرسال رسائل البريد الإلكتروني إلى عناوين البريد الإلكتروني في قاعدة البيانات الخاصة بنا. للقيام بذلك ، استبدل رمز EmailListingController الحالي بالرمز أدناه.

قبل أن نواصل ، اسمحوا لي أن أتوقف لحظة لشرح الكود أعلاه. الطريقة الأولى ، array_push_assoc() ، تضيف ببساطة القيم إلى مصفوفة في أزواج مفتاح / قيمة. هذا لأن Twilio SendGrid يتطلب أن تكون جميع عناوين البريد الإلكتروني للمستلمين في زوج مفتاح / قيمة. هناك العديد من الطرق التي يمكنك من خلالها إلحاق القيم بالمصفوفات في PHP ولكن عندما يتعلق الأمر بأزواج المفاتيح / القيم ، يصبح الأمر صعبًا. لذلك ستصبح هذه الطريقة مفيدة لاحقًا. فلنواصل.

الطريقة الثانية ، sendEmail ، تتعامل مع التحقق من صحة النموذج وإرسال رسائل البريد الإلكتروني باستخدام Twilio SendGrid. لدى Twilio SendGrid طريقتان مختلفتان لإرسال رسائل البريد الإلكتروني من أحد التطبيقات. لدينا أيضًا وثائق مكثفة حول كيفية إرسال رسائل البريد الإلكتروني.

ألق نظرة فاحصة على الشفرة أدناه ، والتي هي مجرد جزء من مقتطف الشفرة أعلاه. هذا القسم هو المسؤول الوحيد عن التفاعل مع Twilio SendGrid API.

هنا حيث نقوم بتهيئة متغير جديد ، $email ككائن \SendGrid\Mail\Mail() . يحتوي هذا المتغير على الكثير من المعلومات والبيانات المفيدة حول عملية إرسال البريد الإلكتروني.

الآن ، أريد أن ننتبه إلى المقتطف أعلاه. هذا هو المكان الذي يتلقى فيه Twilio SendGrid التعليمات لإرسال رسائل البريد الإلكتروني إلى جميع مستلمي البريد الإلكتروني المقدمين. يتلقى وسيطة ، $receiver ، وهي مجموعة من جميع عناوين البريد الإلكتروني الخاصة بالمستلمين.

هنا ، قمنا بتهيئة متغير جديد ، $addresses ، نتيجة جلب جميع عناوين البريد الإلكتروني للمستلمين من قاعدة بياناتنا. نظرًا لأن Twilio SendGrid يتطلب أن تكون هذه العناوين في زوج مفتاح / قيمة لتمريرها ، كان علينا المرور عبر قيم $address للحصول على البريد الإلكتروني لكل جهاز استقبال. ثم أضفنا هذه العناوين إلى مصفوفة $receivers باستخدام الطريقة التي غطيناها سابقًا ، $this->array_push_assoc() .

الآن يجب أن نكون قادرين على إرسال رسائل البريد الإلكتروني الخاصة بنا. ومع ذلك ، نحن بحاجة إلى طريق لاستدعاء الطريقة. للقيام بذلك ، أضف كود API التالي إلى routes/api.php :

بعد القيام بذلك ، يمكننا تعديل resources/js/components/App.vue ، التي أنشأناها سابقًا لاختبار البريد الإلكتروني الخاص بنا. استبدل الكود الموجود للملف بالرمز أدناه.

في الكود أعلاه ، أنشأنا نموذج HTML أساسي. لا شيء يتوهم. عند إرسال النموذج ، يتم استدعاء طريقة send() . هذه طريقة Vue.js. نحن نستخدمه للتحقق من صحة حقول النموذج المقدمة وإجراء مكالمة API إلى مسار البريد الإلكتروني الخاص بنا.

الآن ، هناك شيء واحد يجب القيام به: إعطاء الشكل القليل من الأسلوب. للقيام بذلك ، سنقوم بإضافة ورقة أنماط Bootstrap ، حيث أن عناصر النموذج تستفيد بالفعل من فئات Bootstrap. إليك الكود الذي يجب إضافته أدناه في نهاية قسم head resources/views/welcome.blade.php

بعد ذلك ، قم بتشغيل المزيج مرة أخرى لإعادة إنشاء واجهة المستخدم باستخدام الأمر أدناه.

اختبار أنه يمكننا إرسال بريد إلكتروني بالجملة

خذ المخاطر. لا شيء يمكن أن يحل محل التجربة. مع تساوي جميع العوامل ، يجب أن تبدو شاشتك مثل لقطة الشاشة أعلاه. إذا كان الأمر كذلك ، فأنت جاهز لإرسال رسائل بريد إلكتروني مجمعة. للقيام بذلك ، أدخل موضوعًا وعنوان البريد الإلكتروني للمستلم ونص الرسالة ، ثم انقر على "إرسال رسائل بريد إلكتروني". بعد ذلك بوقت قصير ، من المفترض أن ترى "تم إرسال البريد الإلكتروني بنجاح" يظهر فوق النموذج ، كما في لقطة الشاشة أدناه.

يستخدم Twilio SendGrid قائمة انتظار بريد إلكتروني. هذا يعني أنه قد لا يتم تسليم رسائل البريد الإلكتروني الخاصة بك على الفور. عند تساوي كل الأشياء ، يجب أن تُرجع 202 إجابة ، تخبرك أنه تم وضع بريدك الإلكتروني في قائمة الانتظار لإرساله في وقت لاحق. في معظم الحالات ، يتم إرسال رسائل البريد الإلكتروني هذه مرة واحدة يوميًا.

مراجعة

تهانينا! لقد نجحت في إنشاء قائمة بريدية باستخدام Twilio SendGrid Email API و Laravel و Vue.js.

الآن بعد أن أكملت هذا البرنامج التعليمي ، فأنت تعرف كيفية:

    • قم بإنشاء وتكوين مشروع Laravel باستخدام Vue.js كإطار عمل للواجهة الأمامية
    • أنشئ قائمة بريدية باستخدام Twilio SendGrid Email API في Laravel

يمكنك أيضًا ضمان تسليم رسائل البريد الإلكتروني الخاصة بك إلى عنوان البريد الإلكتروني الصحيح. ابحث عن رابط إلى رمز هذه المقالة على GitHub هنا .

اسمي أنومادو أودوديري موسى. أنا مطور برامج ومنشئ محتوى تقني في نظام PHP وجافا سكريبت. أدير مجتمعًا عبر الإنترنت لعشاق التكنولوجيا يسمى Tekiii . يمكنك التواصل معي على LinkedIn .