Een abonnementsbox bouwen met Stamplay

Abonnementsboxen zijn tegenwoordig een steeds populairder wordende onderneming. Je vindt ze voor alles, van verzorgingsproducten tot gezonde snacks, kinderspellen en zelfs ijs. In deze zelfstudie laat ik u zien hoe u snel een web-app kunt bouwen om te testen of u de eerste 1.000 klanten kunt vinden voor uw abonnement!

Onze app is geïnspireerd op cocktailabonnementen Shaken en bevat de volgende functies:

• Meld gebruikers aan via Facebook.
• Activeer terugkerende betalingen via Stripe.
• Onderbreek abonnementen en activeer ze opnieuw.
• Verzend transactionele e-mails.
• Gebruikers toevoegen aan een MailChimp-lijst.

In deze zelfstudie leert u hoe u een back-end met volledige functies kunt configureren en hoe u de AngularJS-front-end kunt bouwen die er verbinding mee maakt.

De volledige codebase van de front-end is te vinden op GitHub.

Coupon: Stamplay heeft Tuts + lezers een exclusieve kortingsbon verstrekt 6 maanden gratis plusplan ($ 600 waarde). De kortingscode is CODETUTSPLUS en het vervalt op 10 oktober. Meld je nu gratis aan om het in te wisselen.

1. Stamplay: API Lego voor ontwikkelaars

Stamplay is een webgebaseerd ontwikkelplatform dat ontwikkelaars een ongelooflijk snelle manier biedt om volledig geïntegreerde applicaties te bouwen. Met Stamplay kunt u met veel verschillende API's praten, dus dat hoeft niet.

Stamplay is gebouwd rond het concept van componenten; componenten zijn de bouwstenen van onze applicatie. We kunnen de verschillende tools die beschikbaar zijn onder ons bekijken Taken> Componenten.

Nadat u bent ingelogd, wordt u begroet met dit eenvoudige en elegante dashboard. We zullen hier een applicatie maken. Noem het wat je wilt, maar vergeet niet dat deze naam is wat we zullen gebruiken om onze applicatie te identificeren. Dit wordt ook gebruikt als de URL voor onze applicatie wanneer deze wordt gehost.

In ons geval gebruiken we "tutsplus" en onze applicatie wordt gehost op https://tutsplus.stamplayapp.com.

Laten we nu beginnen met het configureren van de back-end.

1.1 Back-end configureren: Facebook-aanmelding integreren

Deze app bevat een Facebook-login. We kunnen communiceren met de Facebook API en inloggen en aanmelden, allemaal zonder een enkele regel code. Omdat we willen dat onze gebruikers zich aanmelden bij Facebook, moeten we naar de Facebook-ontwikkelaarspagina gaan en een nieuwe ontwikkelaar-app maken.

kiezen Website, en zodra je je app hebt aangemaakt, kunnen we twee dingen pakken die we van Facebook nodig hebben om te integreren met Stamplay:

• App-ID
• App Secret

Deze twee dingen zijn te vinden onder Instellingen> Basis.

Nu we onze app-ID en App Secret hebben, kunnen we die aansluiten op Stamplay.

Ga terug naar Stamplay en selecteer gebruikers in het hoofdmenu en vervolgens authenticatie. Toevoegen Facebook als de registratieservice kopieert en plakt u de app-ID en het app-geheim en klikt u op Opslaan.

U kunt nu gebruikers registreren via Facebook!

Nu we onze Facebook-inloggegevens hebben gekoppeld, biedt Stamplay een handige API-URL om in te loggen met Facebook. Laten we daar nu heen gaan en onze Facebook-login in actie zien. 

Ga naar https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

En boem! Je hebt je Facebook-login in gebruik.

1.2 Back-end configureren: gegevens beheren met objecten

Niet alles kan met componenten worden afgehandeld, zodat Stamplay ons een gemakkelijke manier biedt om met aangepaste gegevens om te gaan. Beschouw dit als de back-end database-interface voor uw toepassing.

Orders worden bijgehouden met een Object genaamd orden. Het heeft de volgende vijf eigenschappen:

• actief (boolean) // om bij te houden of het abonnement actief is of niet
• adres (plain_object) // adresgegevens van de gebruiker
• plan (string) // het abonnement waarop de gebruiker geabonneerd is
• stripesubscription (string) // de abonnement-ID gegenereerd door Stripe
• user (user_id) // de unieke _id van onze gebruiker

Met Stamplay worden RESTful API's direct zichtbaar zodra u het object maakt. Het eindpunt ziet er als volgt uit: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Stripe configureren

We moeten onze klanten regelmatig factureren, en gelukkig is dit eenvoudig te doen met Stripe! De terugkerende verwerking van betalingen wordt geïmplementeerd binnen het Plan-concept. Stripe Plans zijn objecten die de kosten- en factureringscyclus van uw abonnementen vertegenwoordigen.

Om dit in te stellen, moet je je plan maken in de Stripe console> Plannen:

Als je klaar bent, ga je terug naar Stamplay en sluit je de stripcomponent aan Taak> Componenten. Selecteer de Streep module en klik op de Aansluiten knop.

Het Stripe-account wordt nu gekoppeld aan de Stamplay-app, die namens ons API-aanvragen kan uitvoeren.

Na een succesvolle Stripe-verbinding kom je uit op een weergave als deze.

1.4 MailChimp configureren

Om MailChimp te configureren, is het proces vergelijkbaar; sluit eenvoudig uw MailChimp-account aan, zoals u eerder deed met Stripe, en u ziet een pagina als deze:

2. Automatisering toevoegen met taken

Dit is het servergedeelte van onze applicatie, waar het grootste deel van de magie gebeurt! Laten we zeggen dat we een aantal dingen willen doen:

• E-mail een "welkomstbericht" wanneer een gebruiker zich aanmeldt bij Facebook.
• Gebruikers toevoegen aan een MailChimp-lijst wanneer ze zich aanmelden.

Deze twee dingen zouden normaal gesproken een flink stuk code vereisen, maar niet met Stamplay ...

2.1 Welkom e-mail

Een wizard leidt u door de configuratie van de taak. Onder Taken> Beheer, maak een nieuwe taak en stel deze in zoals u dat wilt. Zo hebben we de welkomst-e-mailtaak ingesteld:

Vervolgens kunt u de actie configureren met behulp van de variabelen die uit de trigger komen (in dit geval de gebruiker). Zo hebben we de onze geconfigureerd:

2.2 Duw gebruikers naar een MailChimp-lijst

E-mailen van gebruikers naar uw mailinglijst op MailChimp is eenvoudig.

Onder Taken> Beheer, maak een nieuwe taak en stel deze in zoals u dat wilt. Dit is hoe we de inschrijftaak voor MailChimp hebben ingesteld.

3. De voorkant

Om aan onze voorkant te werken, moeten we de Stamplay CLI-tool gebruiken.

3.1 Installeer de Stamplay CLI

Deze tool geeft ons de mogelijkheid om met onze Stamplay-applicaties te werken. Het stelt ons in staat om:

• applicaties implementeren
• start een lokale server voor ontwikkeling
• initialiseer een Stamplay-project
• terugdraaien versies
• download de nieuwste versie

$ npm install -g stamplay-cli

Laten we een nieuwe map maken en onze Stamplay-applicatie in die map initialiseren.

$ mkdir tutsplus && cd tutsplus $ stamplay init

U wordt gevraagd om uw appId (naam van uw app) en uw API sleutel. In dit geval zijn ze dat tutsplus en 4 **** 0 respectievelijk.

Hiermee wordt een stamplay.json-bestand in de hoofdmap van uw app gemaakt, zodat Stamplay tijdens het distribueren uw inloggegevens kent.

"appId": "tutsplus", "apiKey": "4e **** 0", "public": "./", "ignore": ["stamplay.json", "** /. *", "** / node_modules / **"]

3.2 De voorkant bouwen

Om hard te lopen met een goed ontwerp, begonnen we met een van de vele coole gratis HTML5-sjablonen op Templated.co. Degene die we hebben gebruikt, heet Retrospect.

Laten we het downloaden en unzippen in onze projectmap. Laten we vervolgens enkele extra bibliotheken hier installeren met behulp van Bower. Voer het volgende commando uit en we zijn klaar om te gaan:

$ bower installeren hoekige hoekige-ui-router hoek-stempellaag stamplay-sdk hoekige route - opslaan

Om Stamplay met Angular te gebruiken, moeten we:

• laad de Stamplay SDK
• configureer de Stamplay-applicatie
• laad Angular
• laad Angular UI Router
• laad de Angular-Stamplay-bibliotheek (slechts een service-wrapper voor de SDK)

Hier zijn de regels die nodig zijn om dat allemaal te doen. We zullen ze toevoegen onder de tag van ons index.html bestand:

 ...  ...              

Zorg ervoor dat je je eigen getypt hebt AppId in de functie Stamplay.init. We kunnen nu onze lokale server starten om te controleren of alles correct wordt geladen. Voer het volgende uit:

stamplay start

U ziet dat uw toepassing gereed is voor gebruik op http: // localhost: 8080.

3.3 De hoektoepassing

We zullen enkele bestanden maken voor onze Angular-applicatie:

De twee services-bestanden zullen de Stamplay SDK en hoek-stemmingsbibliotheken gebruiken om onze applicatie te laten samenwerken met onze Stamplay-gegevens.

Het belangrijkste is userService.js. Het heeft een paar functies en helpt ons gegevens te verzamelen of gegevens te maken. Bekijk de documentatie voor meer informatie over wat de Stamplay SDK kan.

UserService.js maakt gebruik van de Stamplay JS SDK om onze Angular-app de volgende functionaliteiten te bieden:

• Log in
• uitloggen
• isLogged
• saveAddress
• getUserModel
• createCard
• abonneren
• Afmelden

/assets/js/services/userService.js

/ * global angular, Stripe, console * / 'gebruik strict'; angular .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay', function ($ q, $ stamplay) var user = $ stamplay.User (). Model; ga terug login: function () return user.login ('facebook');, logout: function () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : functie (adres, plaats, postcode) // Bewaar gebruikersadresgegevens, getUserModel: function () // Krijg gebruikersinformatie, createCard: function (cardObj) // Verzamel creditcardgegevens en sla deze op via Stripe , subscribe: function (planId) // Abonneer gebruiker, uitschrijven: function (planId) // Annuleer gebruiker abonnement;]);

Onze applicatie zal drie pagina's bevatten:

• home.html, de belangrijkste landingspagina waar de gebruiker zich kan aanmelden
• subscriptions.html, waar gebruikers de beschikbare boxen voor een abonnement kunnen bekijken
• profile.html, waar gebruikers hun informatie kunnen bewerken en een abonnement kunnen annuleren

Deze pagina's worden beheerd door drie controllers (zoals aanbevolen door best practices), die homeCtrl.js, subscriptionCtrl.js en profileCtrl.js zijn.

Paginasjablonen en controllers zijn samengebonden door de belangrijkste Angular-app.

Dit is de basis van onze app.js:

/ * global angular * / 'use strict'; angular.module ('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); hoek .module ('tutsplus') .config (functie ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/'); $ stateProvider .state ('home', url: '/', templateUrl: '/ pages / home.html ', controller:' homeCtrl ', controllerAs:' home ') .state (' subscriptions ', url:' / subscriptions ', templateUrl:' /pages/subscriptions.html ', controller:' subscriptionCtrl ', controllerAs:' sub ') .state (' profile ', url:' / profile ', templateUrl:' /pages/profile.html ', controller:' profileCtrl ', controllerAs:' profile '); ) / * * Bewaar aangemelde gebruiker, indien aanwezig, in rootScope * / .run (['$ rootScope', 'userService', function ($ rootScope, userService) userService.getUserModel () .then (function (userResp)  $ rootScope.user = userResp;);]); 

Nu hoeven we alleen onze nieuwe bestanden in index.html te laden onder de bibliotheken die we eerder hebben toegevoegd.

/index.html

... hoofd van het index.html-bestand ...            

3.4 Front-end authenticatie

We hebben eerder onze Facebook-applicatie verbonden en nu moeten we onze gebruikers een manier bieden om het te gebruiken! Alle verificatie wordt afgehandeld door Stamplay. We hoeven niets te coderen; we hoeven alleen onze gebruikers te koppelen aan het authenticatiepad dat Stamplay ons heeft gegeven.

Het authenticatieproces ziet er als volgt uit:

• Koppel gebruikers aan onze authenticatie-URL.
• Authenticatie gebeurt op Facebook.
• Facebook stuurt een gebruiker terug naar onze applicatie met een token.
• Met Stamplay wordt het token opgeslagen en onze gebruiker wordt geverifieerd.

We hoeven alleen de eerste van die stappen handmatig te configureren. Laten we onze Angular-app toepassen met ng-app en ng-controller naar index.html en voeg enkele hoekige richtlijnen toe om de startpagina te verbinden met onze homeCtrl.js. We gaan ook alles verwijderen tussen de