This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)
مربعات الاشتراك هي نشاط تجاري متزايد الشعبية هذه الأيام. يمكنك العثور عليها لكل شيء من منتجات الاستمالة إلى الوجبات الخفيفة الصحية ، ألعاب الأطفال وحتى الآيس كريم. في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء تطبيق ويب بسرعة لاختبار ما إذا كان بإمكانك العثور على أول 1000 عميل لفكرة مربع الاشتراك!
تطبيقنا مستوحى من خدمة الاشتراك في الكوكتيل Shaken ويتضمن الميزات التالية:
- تسجيل المستخدمين عبر Facebook.
- تفعيل المدفوعات المتكررة عبر Stripe.
- وقفة وإعادة تنشيط الاشتراكات.
- إرسال رسائل البريد الإلكتروني للمعاملات.
- قم بإضافة مستخدمين إلى قائمة MailChimp.
سيوضح لك هذا البرنامج التعليمي كيفية تكوين واجهة خلفية كاملة الميزات وكيفية إنشاء واجهة AngularJS الأمامية التي ترتبط بها.
يمكن العثور على مصدر الشفرة الكامل للواجهة الأمامية على GitHub .
الكوبون : قدم Stamplay لـ Tuts + readers قسيمة حصرية لتقديم 6 أشهر من خطة plus مجانًا (بقيمة 600 دولار). رمز القسيمة هو CODETUTSPLUS وينتهي في 10 أكتوبر. اشترك الآن مجانًا لاستردادها .
1. Stamplay: API Lego للمطورين
Stamplay هو نظام تطوير قائم على الويب يمنح المطورين طريقة سريعة بشكل لا يصدق لإنشاء تطبيقات متكاملة تمامًا. تعالج Stamplay مشكلة التحدّث إلى العديد من واجهات برمجة التطبيقات المختلفة بحيث لا تضطر إلى ذلك.
Stamplay مبني حول مفهوم المكونات. المكونات هي اللبنات الأساسية للتطبيق لدينا. يمكننا رؤية الأدوات المختلفة المتاحة لنا ضمن المهام> المكونات .
بمجرد تسجيل الدخول ، يتم الترحيب بك مع لوحة القيادة البسيطة والأنيقة هذه. سنقوم بإنشاء تطبيق هنا. سمها ما شئت ، ولكن تذكر أن هذا الاسم هو ما سنستخدمه لتحديد طلبنا. سيتم استخدام هذا أيضًا كعنوان URL لتطبيقنا عند استضافته.
في حالتنا ، نحن نستخدم "tutsplus" ، وسيتم استضافة التطبيق لدينا فيhttps://tutsplus.stamplayapp.com .
الآن دعنا نبدأ بتكوين النهاية الخلفية.
1.1 تهيئة النهاية الخلفية: دمج اشتراك فيس بوك
سيحتوي هذا التطبيق على تسجيل الدخول على Facebook. سنكون قادرين على التفاعل مع واجهة برمجة تطبيقات Facebook والتعامل مع تسجيل الدخول والاشتراك ، وكل ذلك بدون سطر واحد من التعليمات البرمجية. نظرًا لأننا نريد من مستخدمينا الاشتراك في Facebook ، فسنحتاج إلى التوجه إلىصفحة مطوري Facebook وإنشاء تطبيق مطور جديد.
حدد موقع الويب ، وبعد إنشاء تطبيقك ، سنتمكن من انتزاع شيئين نحتاجهما من Facebook للاندماج مع Stamplay:
- معرف التطبيق
- سر التطبيق
يمكن العثور على هذين الأمرين ضمن الإعدادات> الأساسي .
الآن وبعد أن أصبح لدينا معرّف التطبيق وسري التطبيق ، يمكننا توصيل هذه الأجهزة إلى Stamplay.
العودة إلى Stamplay وتحديد المستخدمين من القائمة الرئيسية ، ومن ثم المصادقة . أضف Facebook كخدمة الاشتراك ، انسخ والصق معرّف التطبيق وسر التطبيق ، وانقر على حفظ .
أنت الآن قادر على تسجيل المستخدمين عبر Facebook!
الآن بعد أن قمنا بتوصيل بيانات اعتمادنا على 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 فريد من مستخدمنا
ستقوم Stamplay بتعريض RESTful APIs فور إنشاء الكائن. ستبدو نقطة النهاية كما يلي:https://APPID.stamplayapp.com/api/cobject/v1/orders .
1.3 تكوين شريط
سنحتاج إلى إصدار فاتورة لعملائنا بشكل دوري ، ولله الحمد ، من السهل القيام بهذا مع Stripe! يتم تنفيذ معالجة المدفوعات المتكررة ضمن مفهوم الخطة. تعد خطط الشريط هي كائنات تمثل دورة التكلفة والفواتير لاشتراكاتك.
لإعداد هذا ، ستحتاج إلى إنشاء خطتك في وحدة تحكم Stripe> خطط :
بمجرد القيام بذلك ، العودة إلى Stamplay وقم بتوصيل مكون Stripe في Task> Components . حدد الوحدة النمطية الشريطية وانقر فوق الزر " اتصال" .
سيتم الآن ربط حساب Stripe بتطبيق Stamplay ، والذي يمكنه تنفيذ طلبات واجهة برمجة التطبيقات بالنيابة عنا.
بعد اتصال شريطية ناجح ، سينتهي بك الأمر إلى عرض كهذا.
1.4 تكوين MailChimp
لتكوين MailChimp ، تكون العملية مشابهة جدًا ؛ ببساطة قم بتوصيل حساب MailChimp الخاص بك كما فعلت سابقا مع Stripe ، وسترى صفحة مثل هذا:
2. إضافة أتمتة مع المهام
هذا هو الجزء من جانب الخادم من تطبيقنا ، حيث يحدث الجزء الأكبر من السحر! لنفترض أننا نريد القيام ببعض الأشياء:
- أرسل رسالة "مرحبًا" عند اشتراك المستخدم في Facebook.
- قم بإضافة مستخدمين إلى قائمة MailChimp عند تسجيلهم.
هذين الأمرين يتطلبان عادة جزءًا جيدًا من الكود ، ولكن ليس مع Stamplay ...
2.1 البريد الإلكتروني الترحيبي
سيرشدك المعالج خلال تكوين المهمة. ضمنالمهام> إدارة ، قم بإنشاء مهمة جديدة وقم بإعدادها بالطريقة التي تريدها. إليك طريقة إعداد مهمة الترحيب عبر البريد الإلكتروني:
بعد ذلك يمكنك تكوين الإجراء الذي يستفيد من المتغيرات الخارجة من المشغل (في هذه الحالة ، المستخدم). فيما يلي كيفية تكويننا:
2.2 ادفع المستخدمين إلى قائمة MailChimp
دفع رسائل البريد الإلكتروني الخاصة بالمستخدمين إلى قائمتك البريدية على MailChimp أمر بسيط.
ضمن المهام> إدارة ، قم بإنشاء مهمة جديدة وقم بإعدادها بالطريقة التي تريدها. إليك كيفية إعداد مهمة الاشتراك MailChimp.
3. الواجهة الأمامية
لبدء العمل على الواجهة الأمامية ، سنحتاج إلى استخدام أداة Stamplay CLI .
3.1 تثبيت Stamplay CLI
ستمنحك هذه الأداة القدرة على العمل مع تطبيقات Stamplay الخاصة بنا. يتيح لنا:
- نشر التطبيقات
- بدء خادم محلي للتنمية
- تهيئة مشروع Stamplay
- استرجاع الإصدارات
- تحميل أحدث إصدار
1 |
$ npm install -g stamplay-cli |
لنقم بإنشاء مجلد جديد وتهيئة تطبيق Stamplay الخاص بنا إلى هذا المجلد.
1 |
$ mkdir tutsplus && cd tutsplus |
2 |
$ stamplay init |
ستتم مطالبتك بإدخال appId (اسم تطبيقك) و apiKey . في هذه الحالة ، هم tutsplus و 4 **** 0 على التوالي.
سيؤدي هذا إلى إنشاء ملف stamplay.json في جذر تطبيقك بحيث عند نشره ، سيعرف Stamplay بيانات الاعتماد الخاصة بك.
1 |
{
|
2 |
"appId": "tutsplus", |
3 |
"apiKey": "4e****0", |
4 |
"public": "./", |
5 |
"ignore": [ |
6 |
"stamplay.json", |
7 |
"**/.*", |
8 |
"**/node_modules/**" |
9 |
] |
10 |
} |
3.2 بناء الواجهة الأمامية
لتصوير الأرض باستخدام تصميم جيد ، بدأنا من واحدة من العديد من قوالب HTML5 المجانية الرائعة المدعومة من Templated.co. يسمى واحد استخدمنا Retrospect .
دعونا تنزيله وفك ضغطه إلى مجلد مشروعنا. ثم لنقم بتثبيت بعض المكتبات الإضافية هنا باستخدام Bower. قم بتشغيل الأمر التالي وسنكون على أتم الاستعداد:
1 |
$ bower install angular angular-ui-router angular-stamplay stamplay-sdk angular-route --save |
لاستخدام Stamplay مع Angular ، سنحتاج إلى:
- تحميل Stamplay SDK
- تكوين تطبيق Stamplay
- تحميل الزاوي
- تحميل الزاوي UI جهاز التوجيه
- تحميل مكتبة Angular-Stamplay (مجرد مجمّع خدمة لـ SDK)
فيما يلي الخطوط المطلوبة للقيام بكل ذلك. سنقوم بإضافتها أسفل علامة</ footer> الخاصة بملف index.html الخاص بنا:
1 |
<html>
|
2 |
<head> ... </head> |
3 |
<body class="landing"> |
4 |
... |
5 |
|
6 |
<footer id="footer"> |
7 |
<div class="inner"> |
8 |
…. |
9 |
</div>
|
10 |
</footer>
|
11 |
<!-- Scripts -->
|
12 |
<script src="assets/js/jquery.min.js"></script> |
13 |
<script src="assets/js/skel.min.js"></script> |
14 |
<script src="assets/js/util.js"></script> |
15 |
<script src="assets/js/main.js"></script> |
16 |
|
17 |
<script src="/bower_components/stamplay-sdk/dist/stamplay.min.js"></script> |
18 |
<script type="text/javascript"> |
19 |
Stamplay.init('subscribeboxdemo'); |
20 |
</script>
|
21 |
<script src="/bower_components/angular/angular.min.js"></script> |
22 |
<script src="/bower_components/angular-route/angular-route.min.js"></script> |
23 |
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> |
24 |
<script src="/bower_components/angular-stamplay/angular-stamplay.js"></script> |
25 |
|
26 |
</body>
|
27 |
</html>
|
تأكد من أنك قمت بكتابتها بنفسك معرف التطبيق في وظيفة Stamplay.init. يمكننا الآن بدء تشغيل الخادم المحلي للتأكد من تحميل كل شيء بشكل صحيح. قم بتشغيل ما يلي:
1 |
stamplay start |
سترى أن التطبيق الخاص بك جاهز للانتقال إلى http: // localhost: 8080 .
3.3 التطبيق الزاوي
سننشئ بعض الملفات لتطبيق Angular الخاص بنا:
سيستخدم ملفا الخدمات Stamplay SDK ومكتبات stamplay زاويّة لمساعدة تطبيقنا على التفاعل مع بيانات Stamplay.
الأهم هو userService.js. يحتوي على بعض الوظائف ويساعدنا على انتزاع البيانات أو إنشاء البيانات. للحصول على نظرة أكثر تفصيلاً على ما تستطيعه Stamplay SDK ، تأكد من مراجعة الوثائق .
يستفيد UserService.js من Stamplay JS SDK لتزويد تطبيق Angular بالوظائف التالية:
- تسجيل الدخول
- الخروج
- تم الدخول
- saveAddress
- getUserModel
- createCard
- الاشتراك
- إلغاء الاشتراك
/assets/js/services/userService.js
1 |
/*global angular, Stripe, console*/
|
2 |
'use strict'; |
3 |
|
4 |
angular
|
5 |
.module('tutsplus.service') |
6 |
.factory('userService', ['$q', '$stamplay', |
7 |
function ($q, $stamplay) { |
8 |
var user = $stamplay.User().Model; |
9 |
return { |
10 |
login: function () { |
11 |
return user.login('facebook'); |
12 |
},
|
13 |
logout: function () { |
14 |
return user.logout(); |
15 |
},
|
16 |
isLogged: function () { |
17 |
return user.isLogged(); |
18 |
},
|
19 |
saveAddress: function (address, city, zipcode) { |
20 |
// Save user’s address information
|
21 |
},
|
22 |
getUserModel: function () { |
23 |
// Get User informations
|
24 |
},
|
25 |
createCard: function (cardObj) { |
26 |
// Collect Credit card information and store it via Stripe
|
27 |
},
|
28 |
subscribe: function (planId) { |
29 |
// Subscribe user
|
30 |
},
|
31 |
unsubscribe: function (planId) { |
32 |
// Cancel user subscription
|
33 |
}
|
34 |
};
|
35 |
}]);
|
سيكون لدينا تطبيق ثلاث صفحات:
- home.html ، الصفحة المقصودة الرئيسية حيث سيتمكن المستخدم من الاشتراك
- subscriptions.html ، حيث يمكن للمستخدمين عرض المربعات المتاحة للاشتراك
- profile.html ، حيث يمكن للمستخدمين تعديل معلوماتهم وإلغاء الاشتراك
تتم إدارة هذه الصفحات بواسطة ثلاث وحدات تحكم (كما هو موضح بواسطة أفضل الممارسات ) ، وهي homeCtrl.js و subscriptionCtrl.js و profileCtrl.js.
يتم ربط قوالب الصفحة ووحدات التحكم معًا من خلال تطبيق Angular الرئيسي.
هذا هو أساس app.js لدينا:
1 |
/*global angular*/
|
2 |
'use strict'; |
3 |
angular.module('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); |
4 |
|
5 |
angular
|
6 |
.module('tutsplus') |
7 |
.config(function ($stateProvider, $urlRouterProvider) { |
8 |
$urlRouterProvider.otherwise('/'); |
9 |
$stateProvider
|
10 |
.state('home', { |
11 |
url: '/', |
12 |
templateUrl: '/pages/home.html', |
13 |
controller: 'homeCtrl', |
14 |
controllerAs: 'home' |
15 |
})
|
16 |
.state('subscriptions', { |
17 |
url: '/subscriptions', |
18 |
templateUrl: '/pages/subscriptions.html', |
19 |
controller: 'subscriptionCtrl', |
20 |
controllerAs: 'sub' |
21 |
})
|
22 |
.state('profile', { |
23 |
url: '/profile', |
24 |
templateUrl: '/pages/profile.html', |
25 |
controller: 'profileCtrl', |
26 |
controllerAs: 'profile' |
27 |
});
|
28 |
})
|
29 |
/*
|
30 |
* Save logged user, if present, in the rootScope
|
31 |
*/
|
32 |
.run(['$rootScope', 'userService', |
33 |
function ($rootScope, userService) { |
34 |
userService.getUserModel() |
35 |
.then(function (userResp) { |
36 |
$rootScope.user = userResp; |
37 |
});
|
38 |
}
|
39 |
]);
|
الآن نحتاج فقط إلى تحميل ملفاتنا الجديدة في index.html أسفل المكتبات التي قمنا بإضافتها في وقت سابق.
/index.html
1 |
...head of the index.html file.. |
2 |
<script src="/bower_components/angular/angular.min.js"></script> |
3 |
<script src="/bower_components/angular-route/angular-route.min.js"></script> |
4 |
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> |
5 |
<script src="/bower_components/angular-stamplay/angular-stamplay.js"></script> |
6 |
|
7 |
<script src="/assets/js/services/main.js"></script> |
8 |
<script src="/assets/js/services/userService.js"></script> |
9 |
<script src="/assets/js/modules/app.js"></script> |
10 |
|
11 |
<script src="/assets/js/controllers/homeCtrl.js"></script> |
12 |
<script src="/assets/js/controllers/subscriptionCtrl.js"></script> |
13 |
<script src="/assets/js/controllers/profileCtrl.js"></script> |
14 |
</body>
|
15 |
</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
1 |
...head of the index.html file.. |
2 |
<body class="landing" ng-app="tutsplus"> |
3 |
<!-- Header -->
|
4 |
<header id="header" class="alt"> |
5 |
<h1><a href="index.html">Stamplay Shaken</a></h1> |
6 |
<a href="#nav">Menu</a> |
7 |
</header>
|
8 |
<!-- Nav -->
|
9 |
<nav id="nav" ng-controller="homeCtrl as home"> |
10 |
<ul class="links"> |
11 |
<li><a ui-sref="home">Home</a></li> |
12 |
<li><a ng-show="home.isLogged" ui-sref="profile">My Profile</a></li> |
13 |
<li><a ui-sref="subscriptions">New Subscription</a></li> |
14 |
<li><a ng-show="home.isLogged" href ng-click="home.logout()">Logout</a></li> |
15 |
</ul>
|
16 |
</nav>
|
17 |
|
18 |
<div ui-view></div> |
19 |
|
20 |
<footer>
|
21 |
...end of the index.html file.. |
عند بدء تشغيل التطبيق ، سيقوم جهاز التوجيه بفحص عنوان URL وتحميل العرض المناسب. داخل <section> الأول من home.html ، يمكننا بسهولة تحديد جميع التوجيهات الزاويّة المقترنة بالوظائف homeCtrl.js.
/pages/home.html
1 |
<section id="banner"> |
2 |
<i class="icon fa-glass"></i> |
3 |
<h3 ng-show="home.isLogged">Welcome {{ home.user.instance.displayName }}</h3> |
4 |
<h2>The best cocktails you've ever made</h2> |
5 |
<p>Premium ingredients and recipes, delivered to your door each month.</p> |
6 |
<ul class="actions"> |
7 |
<li><a class="button big special" |
8 |
ng-show="!home.isLogged" |
9 |
ng-click="home.signUp()"> |
10 |
Become a member |
11 |
</a></li>
|
12 |
<li><a class="button big special" |
13 |
ng-show="home.isLogged" |
14 |
ui-sref="subscriptions"> |
15 |
New subscription |
16 |
</a></li><br>
|
17 |
<li><a class="button big special" |
18 |
ng-show="home.isLogged" |
19 |
ui-sref="profile"> |
20 |
View your subscriptions |
21 |
</a></li>
|
22 |
</ul>
|
23 |
</section>
|
/assets/js/controllers/homeCtrl.js
1 |
/*global angular*/
|
2 |
'use strict'; |
3 |
|
4 |
angular
|
5 |
.module('tutsplus') |
6 |
.controller('homeCtrl', ['$rootScope', 'userService', |
7 |
function ($rootScope, userService) { |
8 |
var homeModel = this; |
9 |
homeModel.isLogged = userService.isLogged(); |
10 |
|
11 |
$rootScope.$watch('user', function (newVal) { |
12 |
homeModel.user = newVal; |
13 |
homeModel.isLogged = userService.isLogged(); |
14 |
}, true); |
15 |
|
16 |
homeModel.signUp = function () { |
17 |
userService.login(); |
18 |
};
|
19 |
|
20 |
homeModel.logout = function () { |
21 |
userService.logout(); |
22 |
};
|
23 |
}
|
24 |
]);
|
إذا قام أحد المستخدمين بالنقر فوق الزر "كن عضوًا" ، فسيُطلب منه تسجيل الدخول باستخدام حسابه على Facebook. كان علينا النشر لأن المصادقة لن تعمل من المضيف المحلي: 8080. يريد Facebook إرجاع مستخدم إلى نطاق مؤهل بالكامل.
في هذه المرحلة ، قم بنشر التطبيق الخاص بك مرة أخرى باستخدام:
1 |
$ stamplay deploy |
بعد تسجيل دخول المستخدم بنجاح ، نريده أن يكون قادرًا على الاشتراك في أحد خططنا.
3.5 خلق عملاء شريطية
العملاء هم المكون الرئيسي الآخر للاشتراكات. بمعنى واسع ، العميل هو مجرد وسيلة عامة لربط المستخدمين الخاصة بك مع حساب Stripe الخاص بك. ستحتاج عادةً إلى ربط بعض البيانات الوصفية ، مثل عنوان البريد الإلكتروني ، بعميل. يمكن لعناصر العملاء أيضًا تخزين بطاقة ائتمان ، وهي طريقة إصدار الفواتير في وقت لاحق.
من السهل إنشاء عميل جديد عبر واجهة برمجة التطبيقات ، حيث يوفر Stamplay JS SDK بالفعل كل الدعم المطلوب. يعمل تطبيقنا على ربط عميل Stripe بمستخدمينا بعد تسجيل الدخول أو تسجيل الدخول مباشرة - يتم إدارته عبر userService.js في وظيفة getUserModel .
/assets/js/services/userService.js
1 |
.. head of userService.js ... |
2 |
getUserModel: function () { |
3 |
var def = $q.defer(); |
4 |
user.currentUser() |
5 |
.then(function () { |
6 |
//create a stripe customer if doesn't exist
|
7 |
if (user.isLogged()) { |
8 |
if (!user.get('stripeCustomerId')) { |
9 |
$stamplay.Stripe().createCustomer(user.get('id')) |
10 |
.then(function (sResponse) { |
11 |
var saveUser = $stamplay.User().Model; |
12 |
user.set('stripeCustomerId', sResponse.customer_id); |
13 |
user.set('subscriptions', sResponse.subscriptions); |
14 |
saveUser.set('stripeCustomerId', user.get('stripeCustomerId')); |
15 |
saveUser.set('subscriptions', user.get('subscriptions')); |
16 |
saveUser.set('_id', user.get('_id')); |
17 |
saveUser.save() |
18 |
.then(function () { def.resolve(user); |
19 |
});
|
20 |
})
|
21 |
} else { |
22 |
def.resolve(user); |
23 |
}
|
24 |
} else { |
25 |
def.resolve(user) |
26 |
}
|
27 |
})
|
28 |
.catch(function (err) { |
29 |
def.reject(err); |
30 |
});
|
31 |
return def.promise;}, |
32 |
.. tail of userService.js ... |
يتحقق الرمز أعلاه من تسجيل دخول المستخدم أم لا ، وإذا كان لديه بالفعل خاصيةstripeCustomerId . إذا لم يكن كذلك ، فإنه ينشئ عميل Stripe مع stamplay.Stripe () $. createCustomer (user.get ('id')) ويقوم بتخزينstripeCustomerId كخاصية إضافية للمستخدم الذي قام بتسجيل الدخول.
يتم تشغيل عنصر التحكم هذا في كل مرة يبدأ فيها التطبيق بوحدة app.js Angular.
/assets/js/modules/app.js
1 |
.run(['$rootScope', 'userService', |
2 |
function ($rootScope, userService) { |
3 |
userService.getUserModel() |
4 |
.then(function (userResp) { |
5 |
$rootScope.user = userResp; |
6 |
});
|
7 |
}
|
8 |
])
|
3.6 الاشتراك في الخطة
والآن نحتاج إلى تحصيل رسوم من مستخدمنا عند شراء خطة. يعرض القالب subscriptions.html ، المرتبط بالاشتراك في وحدة التحكم Ctrl.js ، لمستخدمينا خطط الاشتراك التي يمكنهم الاختيار منها.
عندما يحدد المستخدم أحد الاشتراكات ، سيتم عرض نموذج الدفع ، مما يسمح للمستخدم بإنهاء عملية الشراء. تسرد صفحة الاشتراك المقالات في الأعلى وتحتوي على قسمين آخرين (قسم الدفع والمشاركة) ، كلاهما مخفيان.
/pages/subscription.html
1 |
<!-- articles section starts -->
|
2 |
<section id="three" class="wrapper style3 special"> |
3 |
<div class="inner"> |
4 |
<header class="major narrow "> |
5 |
<h2>Join your spirit way</h2> |
6 |
</header>
|
7 |
<article class="feature left"> |
8 |
<span class="image"><img src="images/gin.jpg" alt=""/></span> |
9 |
<div class="content"> |
10 |
<h3>God save the queen</h3> |
11 |
<p>Discover a new gin cocktail each month.</p> |
12 |
<ul class="actions"> |
13 |
<li ng-show="sub.isLogged"><a href class="button special" ng-click="sub.openSubscribe('tplanOne')">Subscribe</a> |
14 |
</li>
|
15 |
</ul>
|
16 |
</div>
|
17 |
</article>
|
18 |
<article class="feature right"> |
19 |
<!-- second article here -->
|
20 |
</article>
|
21 |
… |
22 |
</section>
|
23 |
|
24 |
<section id="payment-form" class="wrapper style2 special" ng-show="sub.showPayment"> |
25 |
<div class="inner"> |
26 |
<header class="major narrow"> |
27 |
<h2>Payment information</h2> |
28 |
</header>
|
29 |
<form>
|
30 |
<div class="container 50%"> |
31 |
<div class="row uniform 50%"> |
32 |
<div class="12u$"> |
33 |
<h3>Personal data</h3> |
34 |
</div>
|
35 |
<div class="6u 12u$(xsmall)"> |
36 |
<input name="firstname" placeholder="First name" type="text" value="{{sub.user.get('name').givenName}}"/> |
37 |
</div>
|
38 |
<div class="6u$ 12u$(xsmall)"> |
39 |
<input name="familyname" placeholder="Family Name" type="text" value="{{sub.user.get('name').familyName}}"/> |
40 |
</div>
|
41 |
<div class="12u$"> |
42 |
<input name="email" placeholder="Email" type="text" value="{{sub.user.get('email')}}"/> |
43 |
</div>
|
44 |
<div class="12u$"> |
45 |
<h3>Card info</h3> |
46 |
</div>
|
47 |
<div class="12u"> |
48 |
<input name="cardnumber" placeholder="Card number" type="text" |
49 |
value="{{sub.card.number}}"/> |
50 |
</div>
|
51 |
<div class="4u"> |
52 |
<input name="expiremonth" placeholder="Expire month" type="text" value="{{sub.card.expM}}"/> |
53 |
</div>
|
54 |
<div class="4u"> |
55 |
<input name="expireyear" placeholder="Expire year" type="text" |
56 |
value="{{sub.card.expY}}"/> |
57 |
</div>
|
58 |
<div class="4u"> |
59 |
<input name="cvc" placeholder="CVC" type="text" value="{{sub.card.cvc}}"/> |
60 |
</div>
|
61 |
<div class="12u$"> |
62 |
<h3>Subscription</h3> |
63 |
</div>
|
64 |
<div class="12u"> |
65 |
<select ng-model="sub.selectedPlanId"> |
66 |
<option value="tplanOne">God save the queen</option> |
67 |
<option value="tplanTwo">From kentucky with love</option> |
68 |
<option value="tplanThree">The rum diary</option> |
69 |
</select>
|
70 |
</div>
|
71 |
<div class="12u$"> |
72 |
<h3>Delivery details</h3> |
73 |
</div>
|
74 |
<div class="12u"> |
75 |
<input name="address" placeholder="Address" type="text" ng-model="sub.address.address" /> |
76 |
</div>
|
77 |
<div class="6u"> |
78 |
<input name="city" placeholder="City" type="text" ng-model="sub.address.city"/> |
79 |
</div>
|
80 |
<div class="6u"> |
81 |
<input name="zipcode" placeholder="Post Code" type="text" ng-model="sub.address.zipcode"/> |
82 |
</div>
|
83 |
<div class="12u$" style="text-align:left"> |
84 |
<input name="defaultadress" type="checkbox" ng-model="sub.saveAddress"> |
85 |
<label ng-click="sub.saveAddress = !sub.saveAddress">Save as default address</label> |
86 |
</div> </div> |
87 |
</div>
|
88 |
|
89 |
<ul class="actions"> |
90 |
<li><input type="submit" class="special" value="Confirm subscription" ng-click="sub.subscribe($event)"/></li> |
91 |
</ul>
|
92 |
</form>
|
93 |
</div>
|
94 |
</section>
|
95 |
... |
من أجل تمرير المعلومات المتعلقة بالاشتراك المحدد ، سنستخدم وظيفة تسمىopenSubscribe ('planName') من subscriptionCtrl.js.
/assets/js/controllers/subscriptionCtrl.js
1 |
subModel.openSubscribe = function (planId) { |
2 |
subModel.showPayment = true; |
3 |
subModel.showThankyou = false; |
4 |
subModel.selectedPlanName = subModel.selectedPlanMap[planId]; |
5 |
subModel.selectedPlanId = planId; |
6 |
//Scroll to payment
|
7 |
$timeout(function () { |
8 |
$location.hash('payment-form'); |
9 |
$anchorScroll(); |
10 |
});
|
11 |
};
|
تجعل هذه الوظيفة نموذج الدفع مرئيًا وسيتم عرضه جنبًا إلى جنب مع بيانات المستخدم والخطة المحددة.
يجمع هذا النموذج معلومات المستخدم والاشتراك المحدد وقيم بطاقة الائتمان.
لجمع قيم بطاقات الائتمان ، نحتاج إلى إضافة عميل جافا سكريبت لـ Striped للحصول على رمز البطاقة ، ثم نستخدم وظيفة Stamplay's Stripe لإنهاء الخطة. في index.html الخاص بنا ، فلنقم باستيراد مكتبة Stripe.js وتهيئتها بمفتاح الاختبار.
/index.html
1 |
... |
2 |
<script src="/bower_components/angular/angular.min.js"></script> |
3 |
<script src="/bower_components/angular-route/angular-route.min.js"></script> |
4 |
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> |
5 |
<script src="/bower_components/angular-stamplay/angular-stamplay.js"></script> |
6 |
|
7 |
<script type="text/javascript" src="https://js.stripe.com/v2/"></script> |
8 |
<script type="text/javascript"> |
9 |
Stripe.setPublishableKey('pk_test_**********************0'); |
10 |
</script>
|
11 |
|
12 |
<script src="/assets/js/services/main.js"></script> |
13 |
<script src="/assets/js/services/userService.js"></script> |
14 |
<script src="/assets/js/modules/app.js"></script> |
15 |
... |
أخيرا ، يمكن معالجة الاشتراك. عند النقر فوق تأكيد الاشتراك، يبدأ الاشتراك لدينا Ctrl.js عملية الاشتراك ، مع الاستفادة من userService.js.
/assets/js/controllers/subscriptionCtrl.js
1 |
...
|
2 |
subModel.subscribe = function ($event) { |
3 |
$($event.currentTarget).prop('disabled', 'disabled'); |
4 |
if (subModel.saveAddress) { |
5 |
userService.saveAddress(subModel.address.address, subModel.address.city, subModel.address.zipcode); |
6 |
}
|
7 |
userService.createCard({ |
8 |
number: subModel.card.number, |
9 |
exp_month: subModel.card.expM, |
10 |
exp_year: subModel.card.expY, |
11 |
cvc: subModel.card.cvc |
12 |
})
|
13 |
.then(function () { |
14 |
return userService.subscribe(subModel.selectedPlanId); |
15 |
})
|
16 |
.then(function () { |
17 |
subModel.showPayment = false; |
18 |
subModel.showThankyou = true; |
19 |
$($event.currentTarget).removeProp('disabled'); |
20 |
}).catch(function (err) { |
21 |
$($event.currentTarget).removeProp('disabled'); |
22 |
});
|
23 |
};
|
24 |
…
|
قبل حفظ بطاقة الائتمان ، لنقم بتحديث المستخدم بمعلومات عنوانه. سنرى لاحقا لماذا هذا مفيد في هذه المرحلة.
يمكن ربط المستخدم ببطاقة ائتمان واحدة فقط. هذا سبب قيام دالةcreateCard بالتحقق مما إذا كان المستخدم لديه بالفعل $ stripe.getCreditCard (user.get ('id')) . إذا لم تكن هناك بطاقة ، فسنشرع في إضافة البطاقة.
قبل ربط البطاقة بالمستخدم ، نحتاج إلى إضافة مكتبة جافا سكريبت من جانب العميل إلى تحويل قيم بطاقات الائتمان بشكل آمن إلى رمز مميز. وبمجرد حصولنا على الرمز ، يمكننا تمريره إلى Stamplay JS SDK وربط البطاقة بالمستخدم $ stamplay.Stripe (). createCreditCard .
/assets/js/service/userService.js
1 |
...
|
2 |
createCard: function (cardObj) { |
3 |
var def = $q.defer(); |
4 |
var $stripe = $stamplay.Stripe(); |
5 |
|
6 |
$stripe.getCreditCard(user.get('id')) |
7 |
.then(function (response) { |
8 |
var nDef = $q.defer(); |
9 |
if (response.card_id) { |
10 |
nDef.resolve(); |
11 |
} else { |
12 |
Stripe.card.createToken(cardObj, function (err, response) { |
13 |
var token = response.id; |
14 |
$stamplay.Stripe().createCreditCard(user.get('id'), token) |
15 |
.then(function (response) { |
16 |
nDef.resolve(response); |
17 |
})
|
18 |
.catch(function (err) { |
19 |
nDef.reject(new Error(err)); |
20 |
});
|
21 |
});
|
22 |
}
|
23 |
return nDef.promise; |
24 |
})
|
25 |
.then(function () { |
26 |
def.resolve(); |
27 |
})
|
28 |
.catch(function (err) { |
29 |
console.log(err); |
30 |
});
|
31 |
return def.promise; |
32 |
}
|
33 |
…
|
لاختبار تنفيذ Stripe ، قمنا بملء معلومات بطاقة الائتمان مسبقًا باستخدام قيم الاختبار أدناه. للحصول على معلومات حول الاختبار في Stripe ، راجع الوثائق .
- n.4242 4242 4242 4242
- التاريخ: 07/2020
- cvc: 424
ثم يستمر تدفق الاشتراك عن طريق استدعاء وظيفة اشتراك userService.js. هذا يكمل العملية عن طريق تقديم طلب الاشتراك إلى Stripe.
/assets/js/services/userService.js
1 |
...
|
2 |
subscribe: function (planId) { |
3 |
var def = $q.defer(); |
4 |
$stamplay.Stripe().createSubscription(user.get('id'), planId) |
5 |
.then(function () { |
6 |
return $stamplay.Stripe().getSubscriptions(user.get('id')); |
7 |
})
|
8 |
.then(function (response) { |
9 |
user.set('subscriptions', response.data); |
10 |
var saveUser = $stamplay.User().Model; |
11 |
saveUser.set('subscriptions', user.get('subscriptions')); |
12 |
saveUser.set('id', user.get('id')); |
13 |
saveUser.save() |
14 |
.then(function () { |
15 |
def.resolve(); |
16 |
});
|
17 |
})
|
18 |
.catch(function (err) { |
19 |
console.log(err); |
20 |
def.reject(err); |
21 |
});
|
22 |
|
23 |
return def.promise; |
24 |
}
|
وظيفة الاشتراك بسيطة. بمجرد التأكد من وجود المستخدم ولديه بطاقة ائتمان ، فإننا نحتاج فقط إلى الاتصال بـ stamplay.Stripe (). createSubscription .
تتمثل الخطوة الأخيرة في تتبع الاشتراكات من خلال إنشاء طلبات وتلقي إشعارات لكل اشتراك جديد نبيعه عبر موقع الويب. لنعد إلى Stamplay وننشئ بعض المهام.
4. إضافة أتمتة النهائية
نريد ربط بيانات الاشتراك بأمر والعكس. سيسمح هذا لمستخدمينا بإلغاء اشتراكهم إذا اختاروا ذلك.
4.1 عندما يتم إرسال اشتراك جديد ، قم بإنشاء أمر
عند إرسال اشتراك ، نريد إنشاء مثيل جديد لكائن الطلبات. سيستمر الطلب في تتبع الاشتراك الذي تم إنشاؤه للتو بواسطة Stripe و userId والخطة والعنوان.
عندما يتم تشغيل مهمة من قبل مستخدم قام بتسجيل الدخول ، يمكننا استخدام أي من خصائصه لتغذية الإجراء التالي. هذا هو السبب في أننا ربطنا العنوان بمستخدمينا في subscriptionCtrl.js. يتيح لنا ذلك تخزينها في كائن الطلب حتى إذا لم توفر بيانات مشغل الاشتراك هذه المعلومات. حتى تتمكن من رؤية خاصية عنوان الطلب المملوءة بالبيانات التي تم جلبها من المستخدم ، على سبيل المثال{{user.address.city}} .
4.2 عندما يتم إجراء طلب جديد ، قم بربطه بالاشتراك المرتبط
للحصول على مرجع للأمر أيضًا في الاشتراك على Stripe ، يمكننا تحديث حقل بياناتتعريف الاشتراك على النحو التالي. أولاً ، دعنا نختار المشغل المناسب والإجراء من مكوّن Objects و Stripe.
نظرًا لأننا حفظنا طلبنا في رقم الاشتراك ، يمكننا الآن تعديل اشتراكات Stripe باستخدام Id.
4.3 عندما يتم إجراء طلب جديد ، إبلاغ كل من المستخدم ومسؤول التطبيق مع البريد الإلكتروني
استنتاج
في هذا البرنامج التعليمي ، راجعنا كيفية البدء في إنشاء تطبيق ويب باستخدام Stamplay. لقد نفذنا وظيفة تسجيل الدخول الاجتماعي ونجحنا في مصادقة المستخدم على قاعدة بيانات Stamplay. أنشأنا RESTful واجهات برمجة التطبيقات لإدارة الطلبات. تمكّنا من ربط تطبيقنا بواجهات برمجة التطبيقات MailChimp و Stripe وصمغها مع بعض عمليات النهاية الخلفية.
الكوبون : قدم Stamplay لـ Tuts + readers قسيمة حصرية لتقديم 6 أشهر من خطة plus مجانًا (بقيمة 600 دولار). رمز القسيمة هو CODETUTSPLUS وينتهي في 10 أكتوبر. اشترك الآن مجانًا لاستردادها .
كود من البرنامج التعليمي أعلاه متاح على جيثب . اسمحوا لنا أن نعرف أفكارك في التعليقات أدناه.
