Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

كيفية بناء مربع الاشتراك مع Stamplay

by
Difficulty:IntermediateLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Arabic (العربية/عربي) translation by ansgaradh (you can also view the original English article)

Final product image
What You'll Be Creating

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

تطبيقنا مستوحى من خدمة الاشتراك في الكوكتيل Shaken ويتضمن الميزات التالية:

  • تسجيل المستخدمين عبر Facebook.
  • تفعيل المدفوعات المتكررة عبر Stripe.
  • وقفة وإعادة تنشيط الاشتراكات.
  • إرسال رسائل البريد الإلكتروني للمعاملات.
  • قم بإضافة مستخدمين إلى قائمة MailChimp.

سيوضح لك هذا البرنامج التعليمي كيفية تكوين واجهة خلفية كاملة الميزات وكيفية إنشاء واجهة AngularJS الأمامية التي ترتبط بها.

يمكن العثور على مصدر الشفرة الكامل للواجهة الأمامية على GitHub .

الكوبون : قدم Stamplay لـ Tuts + readers قسيمة حصرية لتقديم 6 أشهر من خطة plus مجانًا (بقيمة 600 دولار). رمز القسيمة هو CODETUTSPLUS وينتهي في 10 أكتوبر. اشترك الآن مجانًا لاستردادها .

1. Stamplay: API Lego للمطورين

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

Stamplay مبني حول مفهوم المكونات. المكونات هي اللبنات الأساسية للتطبيق لدينا. يمكننا رؤية الأدوات المختلفة المتاحة لنا ضمن المهام> المكونات .

Components available in Stamplay

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

في حالتنا ، نحن نستخدم "tutsplus" ، وسيتم استضافة التطبيق لدينا فيhttps://tutsplus.stamplayapp.com .

الآن دعنا نبدأ بتكوين النهاية الخلفية.

1.1 تهيئة النهاية الخلفية: دمج اشتراك فيس بوك

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

Add a New App on Facebook

حدد موقع الويب ، وبعد إنشاء تطبيقك ، سنتمكن من انتزاع شيئين نحتاجهما من Facebook للاندماج مع Stamplay:

  • معرف التطبيق
  • سر التطبيق

يمكن العثور على هذين الأمرين ضمن الإعدادات> الأساسي .

Dashboard showing App ID and App Secret

الآن وبعد أن أصبح لدينا معرّف التطبيق وسري التطبيق ، يمكننا توصيل هذه الأجهزة إلى Stamplay.

العودة إلى Stamplay وتحديد المستخدمين من القائمة الرئيسية ، ومن ثم المصادقة . أضف Facebook كخدمة الاشتراك ، انسخ والصق معرّف التطبيق وسر التطبيق ، وانقر على حفظ .

أنت الآن قادر على تسجيل المستخدمين عبر Facebook!

User authentication

الآن بعد أن قمنا بتوصيل بيانات اعتمادنا على Facebook ، يوفر Stamplay عنوان URL مناسبًا لـ API للتعامل مع تسجيل الدخول باستخدام Facebook. دعنا نذهب إلى هناك الآن ونرى تسجيل الدخول إلى Facebook أثناء العمل.

انتقل إلىhttps://tutsplus.stamplayapp.com/auth/v1/facebook/connect .

وازدهار! لديك سجل الفيسبوك الخاص بك وتشغيلها.

1.2 تكوين النهاية الخلفية: إدارة البيانات باستخدام الكائنات

لا يمكن التعامل مع كل شيء مع المكونات ، لذلك يوفر Stamplay طريقة سهلة للتعامل مع البيانات المخصصة. فكر في ذلك كواجهة قاعدة البيانات الخلفية للتطبيق الخاص بك.

سيتم تتبع الطلبات باستخدام أوامر تسمى " أوامر" . يحتوي على الخصائص الخمسة التالية:

  • نشط (منطقي) // لتعقب ما إذا كان الاشتراك نشطًا أم لا
  • عنوان (plain_object) // معلومات عنوان المستخدم
  • الخطة (السلسلة) // الخطة التي اشترك فيها المستخدم
  • stripesubscription (string) // the subscription Id created by Stripe
  • المستخدم (user_id) // _id فريد من مستخدمنا
Orders page

ستقوم Stamplay بتعريض RESTful APIs فور إنشاء الكائن. ستبدو نقطة النهاية كما يلي:https://APPID.stamplayapp.com/api/cobject/v1/orders .

1.3 تكوين شريط

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

لإعداد هذا ، ستحتاج إلى إنشاء خطتك في وحدة تحكم Stripe> خطط :

Create new plan popup

بمجرد القيام بذلك ، العودة إلى Stamplay وقم بتوصيل مكون Stripe في Task> Components . حدد الوحدة النمطية الشريطية وانقر فوق الزر " اتصال" .

سيتم الآن ربط حساب Stripe بتطبيق Stamplay ، والذي يمكنه تنفيذ طلبات واجهة برمجة التطبيقات بالنيابة عنا.

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

Stripe account info and settings

1.4 تكوين MailChimp

لتكوين MailChimp ، تكون العملية مشابهة جدًا ؛ ببساطة قم بتوصيل حساب MailChimp الخاص بك كما فعلت سابقا مع Stripe ، وسترى صفحة مثل هذا:

Mailchimp connection page

2. إضافة أتمتة مع المهام

هذا هو الجزء من جانب الخادم من تطبيقنا ، حيث يحدث الجزء الأكبر من السحر! لنفترض أننا نريد القيام ببعض الأشياء:

  • أرسل رسالة "مرحبًا" عند اشتراك المستخدم في Facebook.
  • قم بإضافة مستخدمين إلى قائمة MailChimp عند تسجيلهم.

هذين الأمرين يتطلبان عادة جزءًا جيدًا من الكود ، ولكن ليس مع Stamplay ...

2.1 البريد الإلكتروني الترحيبي

سيرشدك المعالج خلال تكوين المهمة. ضمنالمهام> إدارة ، قم بإنشاء مهمة جديدة وقم بإعدادها بالطريقة التي تريدها. إليك طريقة إعداد مهمة الترحيب عبر البريد الإلكتروني:

New Task window

بعد ذلك يمكنك تكوين الإجراء الذي يستفيد من المتغيرات الخارجة من المشغل (في هذه الحالة ، المستخدم). فيما يلي كيفية تكويننا:

Welcome email configuration

2.2 ادفع المستخدمين إلى قائمة MailChimp

دفع رسائل البريد الإلكتروني الخاصة بالمستخدمين إلى قائمتك البريدية على MailChimp أمر بسيط.

New task window for MailChimp signup

ضمن المهام> إدارة ، قم بإنشاء مهمة جديدة وقم بإعدادها بالطريقة التي تريدها. إليك كيفية إعداد مهمة الاشتراك MailChimp.

MailChimp task configuration

3. الواجهة الأمامية

لبدء العمل على الواجهة الأمامية ، سنحتاج إلى استخدام أداة Stamplay CLI .

3.1 تثبيت Stamplay CLI

ستمنحك هذه الأداة القدرة على العمل مع تطبيقات Stamplay الخاصة بنا. يتيح لنا:

  • نشر التطبيقات
  • بدء خادم محلي للتنمية
  • تهيئة مشروع Stamplay
  • استرجاع الإصدارات
  • تحميل أحدث إصدار

لنقم بإنشاء مجلد جديد وتهيئة تطبيق Stamplay الخاص بنا إلى هذا المجلد.

ستتم مطالبتك بإدخال appId (اسم تطبيقك) و apiKey . في هذه الحالة ، هم tutsplus و 4 **** 0 على التوالي.

سيؤدي هذا إلى إنشاء ملف stamplay.json في جذر تطبيقك بحيث عند نشره ، سيعرف Stamplay بيانات الاعتماد الخاصة بك.

3.2 بناء الواجهة الأمامية

لتصوير الأرض باستخدام تصميم جيد ، بدأنا من واحدة من العديد من قوالب HTML5 المجانية الرائعة المدعومة من Templated.co. يسمى واحد استخدمنا Retrospect .

دعونا تنزيله وفك ضغطه إلى مجلد مشروعنا. ثم لنقم بتثبيت بعض المكتبات الإضافية هنا باستخدام Bower. قم بتشغيل الأمر التالي وسنكون على أتم الاستعداد:

لاستخدام Stamplay مع Angular ، سنحتاج إلى:

  • تحميل Stamplay SDK
  • تكوين تطبيق Stamplay
  • تحميل الزاوي
  • تحميل الزاوي UI جهاز التوجيه
  • تحميل مكتبة Angular-Stamplay (مجرد مجمّع خدمة لـ SDK)

فيما يلي الخطوط المطلوبة للقيام بكل ذلك. سنقوم بإضافتها أسفل علامة</ footer> الخاصة بملف index.html الخاص بنا:

تأكد من أنك قمت بكتابتها بنفسك معرف التطبيق في وظيفة Stamplay.init. يمكننا الآن بدء تشغيل الخادم المحلي للتأكد من تحميل كل شيء بشكل صحيح. قم بتشغيل ما يلي:

سترى أن التطبيق الخاص بك جاهز للانتقال إلى http: // localhost: 8080 .

3.3 التطبيق الزاوي

سننشئ بعض الملفات لتطبيق Angular الخاص بنا:

List of files and folders for Angular app

سيستخدم ملفا الخدمات Stamplay SDK ومكتبات stamplay زاويّة لمساعدة تطبيقنا على التفاعل مع بيانات Stamplay.

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

يستفيد UserService.js من Stamplay JS SDK لتزويد تطبيق Angular بالوظائف التالية:

  • تسجيل الدخول
  • الخروج
  • تم الدخول
  • saveAddress
  • getUserModel
  • createCard
  • الاشتراك
  • إلغاء الاشتراك

/assets/js/services/userService.js

سيكون لدينا تطبيق ثلاث صفحات:

  • home.html ، الصفحة المقصودة الرئيسية حيث سيتمكن المستخدم من الاشتراك
  • subscriptions.html ، حيث يمكن للمستخدمين عرض المربعات المتاحة للاشتراك
  • profile.html ، حيث يمكن للمستخدمين تعديل معلوماتهم وإلغاء الاشتراك

تتم إدارة هذه الصفحات بواسطة ثلاث وحدات تحكم (كما هو موضح بواسطة أفضل الممارسات ) ، وهي homeCtrl.js و subscriptionCtrl.js و profileCtrl.js.

يتم ربط قوالب الصفحة ووحدات التحكم معًا من خلال تطبيق Angular الرئيسي.

هذا هو أساس app.js لدينا:

الآن نحتاج فقط إلى تحميل ملفاتنا الجديدة في index.html أسفل المكتبات التي قمنا بإضافتها في وقت سابق.

/index.html

3.4 المصادقة الأمامية

لقد قمنا بتوصيل تطبيق Facebook الخاص بنا في وقت سابق ، والآن نحن بحاجة إلى تزويد مستخدمينا بطريقة لاستخدامه! تتم معالجة كافة المصادقة بواسطة Stamplay. لا نحتاج إلى ترميز أي شيء ؛ نحتاج فقط إلى ربط مستخدمينا بمسار المصادقة الذي قدمه Stamplay لنا.

تبدو عملية المصادقة كما يلي:

  • اربط المستخدمين بعنوان URL للمصادقة.
  • تحدث المصادقة على Facebook.
  • يرسل Facebook مستخدمًا مرة أخرى إلى طلبنا باستخدام رمز مميز.
  • يعالج Stamplay تخزين هذا الرمز ويتم مصادقة مستخدمنا.

نحتاج فقط إلى تهيئة أول هذه الخطوات يدويًا. دعونا نطبق تطبيق Angular مع ng-app و ng-controller على index.html وإضافة بعض التوجيهات الزاويّة لربط الصفحة الرئيسية مع homeCtrl.js. سنقوم أيضًا بإزالة كل شيء بين <nav> و<footer> من القالب الأصلي واستبداله بعنصر علامة <div ui-view> </ div> .

سيعرض هذا العنصر محتوى الصفحة الحالية ديناميكيًا.

/index.html

عند بدء تشغيل التطبيق ، سيقوم جهاز التوجيه بفحص عنوان URL وتحميل العرض المناسب. داخل <section> الأول من home.html ، يمكننا بسهولة تحديد جميع التوجيهات الزاويّة المقترنة بالوظائف homeCtrl.js.

/pages/home.html

/assets/js/controllers/homeCtrl.js

إذا قام أحد المستخدمين بالنقر فوق الزر "كن عضوًا" ، فسيُطلب منه تسجيل الدخول باستخدام حسابه على Facebook. كان علينا النشر لأن المصادقة لن تعمل من المضيف المحلي: 8080. يريد Facebook إرجاع مستخدم إلى نطاق مؤهل بالكامل.

في هذه المرحلة ، قم بنشر التطبيق الخاص بك مرة أخرى باستخدام:

بعد تسجيل دخول المستخدم بنجاح ، نريده أن يكون قادرًا على الاشتراك في أحد خططنا.

3.5 خلق عملاء شريطية

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

من السهل إنشاء عميل جديد عبر واجهة برمجة التطبيقات ، حيث يوفر Stamplay JS SDK بالفعل كل الدعم المطلوب. يعمل تطبيقنا على ربط عميل Stripe بمستخدمينا بعد تسجيل الدخول أو تسجيل الدخول مباشرة - يتم إدارته عبر userService.js في وظيفة getUserModel .

/assets/js/services/userService.js

يتحقق الرمز أعلاه من تسجيل دخول المستخدم أم لا ، وإذا كان لديه بالفعل خاصيةstripeCustomerId . إذا لم يكن كذلك ، فإنه ينشئ عميل Stripe مع stamplay.Stripe () $. createCustomer (user.get ('id')) ويقوم بتخزينstripeCustomerId كخاصية إضافية للمستخدم الذي قام بتسجيل الدخول.

يتم تشغيل عنصر التحكم هذا في كل مرة يبدأ فيها التطبيق بوحدة app.js Angular.

/assets/js/modules/app.js

3.6 الاشتراك في الخطة

والآن نحتاج إلى تحصيل رسوم من مستخدمنا عند شراء خطة. يعرض القالب subscriptions.html ، المرتبط بالاشتراك في وحدة التحكم Ctrl.js ، لمستخدمينا خطط الاشتراك التي يمكنهم الاختيار منها.

Join Your Spirit Way

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

/pages/subscription.html

من أجل تمرير المعلومات المتعلقة بالاشتراك المحدد ، سنستخدم وظيفة تسمىopenSubscribe ('planName') من subscriptionCtrl.js.

/assets/js/controllers/subscriptionCtrl.js

تجعل هذه الوظيفة نموذج الدفع مرئيًا وسيتم عرضه جنبًا إلى جنب مع بيانات المستخدم والخطة المحددة.

يجمع هذا النموذج معلومات المستخدم والاشتراك المحدد وقيم بطاقة الائتمان.

لجمع قيم بطاقات الائتمان ، نحتاج إلى إضافة عميل جافا سكريبت لـ Striped للحصول على رمز البطاقة ، ثم نستخدم وظيفة Stamplay's Stripe لإنهاء الخطة. في index.html الخاص بنا ، فلنقم باستيراد مكتبة Stripe.js وتهيئتها بمفتاح الاختبار.

/index.html

أخيرا ، يمكن معالجة الاشتراك. عند النقر فوق تأكيد الاشتراك، يبدأ الاشتراك لدينا Ctrl.js عملية الاشتراك ، مع الاستفادة من userService.js.

Payment Information

/assets/js/controllers/subscriptionCtrl.js

قبل حفظ بطاقة الائتمان ، لنقم بتحديث المستخدم بمعلومات عنوانه. سنرى لاحقا لماذا هذا مفيد في هذه المرحلة.

يمكن ربط المستخدم ببطاقة ائتمان واحدة فقط. هذا سبب قيام دالةcreateCard بالتحقق مما إذا كان المستخدم لديه بالفعل $ stripe.getCreditCard (user.get ('id')) . إذا لم تكن هناك بطاقة ، فسنشرع في إضافة البطاقة.

قبل ربط البطاقة بالمستخدم ، نحتاج إلى إضافة مكتبة جافا سكريبت من جانب العميل إلى تحويل قيم بطاقات الائتمان بشكل آمن إلى رمز مميز. وبمجرد حصولنا على الرمز ، يمكننا تمريره إلى Stamplay JS SDK وربط البطاقة بالمستخدم $ stamplay.Stripe (). createCreditCard .

/assets/js/service/userService.js

لاختبار تنفيذ Stripe ، قمنا بملء معلومات بطاقة الائتمان مسبقًا باستخدام قيم الاختبار أدناه. للحصول على معلومات حول الاختبار في Stripe ، راجع الوثائق .

  • n.4242 4242 4242 4242
  • التاريخ: 07/2020
  • cvc: 424

ثم يستمر تدفق الاشتراك عن طريق استدعاء وظيفة اشتراك userService.js. هذا يكمل العملية عن طريق تقديم طلب الاشتراك إلى Stripe.

/assets/js/services/userService.js

وظيفة الاشتراك بسيطة. بمجرد التأكد من وجود المستخدم ولديه بطاقة ائتمان ، فإننا نحتاج فقط إلى الاتصال بـ stamplay.Stripe (). createSubscription .

تتمثل الخطوة الأخيرة في تتبع الاشتراكات من خلال إنشاء طلبات وتلقي إشعارات لكل اشتراك جديد نبيعه عبر موقع الويب. لنعد إلى Stamplay وننشئ بعض المهام.

4. إضافة أتمتة النهائية

نريد ربط بيانات الاشتراك بأمر والعكس. سيسمح هذا لمستخدمينا بإلغاء اشتراكهم إذا اختاروا ذلك.

4.1 عندما يتم إرسال اشتراك جديد ، قم بإنشاء أمر

On new subscription then create an instance of order

عند إرسال اشتراك ، نريد إنشاء مثيل جديد لكائن الطلبات. سيستمر الطلب في تتبع الاشتراك الذي تم إنشاؤه للتو بواسطة Stripe و userId والخطة والعنوان.

عندما يتم تشغيل مهمة من قبل مستخدم قام بتسجيل الدخول ، يمكننا استخدام أي من خصائصه لتغذية الإجراء التالي. هذا هو السبب في أننا ربطنا العنوان بمستخدمينا في subscriptionCtrl.js. يتيح لنا ذلك تخزينها في كائن الطلب حتى إذا لم توفر بيانات مشغل الاشتراك هذه المعلومات. حتى تتمكن من رؤية خاصية عنوان الطلب المملوءة بالبيانات التي تم جلبها من المستخدم ، على سبيل المثال{{user.address.city}} .

Create a new order when a user subscribes to a plan

4.2 عندما يتم إجراء طلب جديد ، قم بربطه بالاشتراك المرتبط

للحصول على مرجع للأمر أيضًا في الاشتراك على Stripe ، يمكننا تحديث حقل بياناتتعريف الاشتراك على النحو التالي. أولاً ، دعنا نختار المشغل المناسب والإجراء من مكوّن Objects و Stripe.

On create order add id to subscription
Configure trigger

نظرًا لأننا حفظنا طلبنا في رقم الاشتراك ، يمكننا الآن تعديل اشتراكات Stripe باستخدام Id.

Configure action

4.3 عندما يتم إجراء طلب جديد ، إبلاغ كل من المستخدم ومسؤول التطبيق مع البريد الإلكتروني

Confirmation email for plan subscription
Configure action

استنتاج

في هذا البرنامج التعليمي ، راجعنا كيفية البدء في إنشاء تطبيق ويب باستخدام Stamplay. لقد نفذنا وظيفة تسجيل الدخول الاجتماعي ونجحنا في مصادقة المستخدم على قاعدة بيانات Stamplay. أنشأنا RESTful واجهات برمجة التطبيقات لإدارة الطلبات. تمكّنا من ربط تطبيقنا بواجهات برمجة التطبيقات MailChimp و Stripe وصمغها مع بعض عمليات النهاية الخلفية.

الكوبون : قدم Stamplay لـ Tuts + readers قسيمة حصرية لتقديم 6 أشهر من خطة plus مجانًا (بقيمة 600 دولار). رمز القسيمة هو CODETUTSPLUS وينتهي في 10 أكتوبر. اشترك الآن مجانًا لاستردادها .

Manage your tasks

كود من البرنامج التعليمي أعلاه متاح على جيثب . اسمحوا لنا أن نعرف أفكارك في التعليقات أدناه.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.