How to Build a Daily Affirmations SMS Service with Stripe & Syncano
This article was sponsored by Syncano. Thank you for supporting the sponsors who make SitePoint possible.
Syncano provides a cloud-based platform for real-time applications. It stores the data, microservice code, schedules for automating code execution, user accounts, webhooks to access these functions via HTTP and more. They’ve even got an open source community of code snippets and support various runtime environments including Node, Python, Go and Ruby.
From a developer point of view, Syncano makes it simpler to get started by providing a lot of the backend infrastructure you’d otherwise need to piece together yourself. In this article, we will look at what is involved in setting up a web app using Syncano and linking it to third party services.
What You’ll Need
In order to be able to follow along with this tutorial, it will be handy for you to have a knowledge in the basics of HTML, CSS and JavaScript.
In the demo application, we use jQuery to put together some simple prototype screens and actions. I’d like to stress one point – in a proper application you really should be using a much more reliable and clean way of structuring your web app. I’d recommend a JavaScript framework such as React, Angular, Meteor… etc. For this demo, we purposely avoided using a JavaScript framework like those to keep things simple and focus on Syncano’s part in it all. Take our snippets of Syncano functionality and adapt the front-end JavaScript to your own favorite framework!
Our Demo Application
To explore what is possible with Syncano from a beginner’s perspective, we’ll be putting together a web app that will send registered users positive affirmations each day for the low price of $1 a month! We’ll explore user registrations, scheduling events, sending out SMS messages via Twilio and setting up payments.
The Code
The code for this demo can all be found on GitHub.
Getting Started With Syncano
If you don’t have a Syncano account, you can sign in for free at Syncano.com. You’ll find a “Sign Up” button in the top right:
Fill in your email address and preferred password, then click “Create My Account”:
Once you sign up, you’ll have access to your Syncano dashboard. You can access this any time by going to dashboard.syncano.io. When you have logged in, you will have one “instance” which we will use for our demo app. If you’ve already been using Syncano and would like to create a new one, click the “+” icon on the bottom right (note, you cannot give the instance a custom name unless you use their API explorer, however that’s beyond the scope of this article!):
Generating a Syncano API Key
Click that instance to open it up. It’ll look rather empty to start, with plenty of options alongside the left. The first thing you’ll want to do is click the “API keys” menu option to get your API key:
Then generate an API key for this instance by clicking “Generate an API Key”:
Syncano will give you a popup to provide API key settings. There are three settings you can update:
- Description – the description for your API key. We will call ours “Affirmations”.
- Ignore ACL – this ignores any permissions set for resources within our app, we won’t need that.
- User registration – this lets people sign up within this API key, we will want to have this ticked!
Once you have input in all of those settings, click “Confirm”:
You should now see your API key listed, copy that key somewhere ready for when you’ll want to use it in your code. If you lose it, just come right back to this “API keys” page in your dashboard:
Finding Your Syncano Account Key
In order to make some calls in Syncano, you will need to generate an API key. We can do that via the Account screen. To get there, we will click our profile picture in the top right and then click the area with our email to go to the Account screen:
From there, we click the “Authentication” item in the menu on the left and click “Copy” to copy the Account key that is displayed. Store that somewhere safe for now!
We will want to try and stick to using the API key where possible, especially anywhere that is outside the Syncano ecosystem.
Getting Started With Syncano’s JavaScript
Syncano provides a variety of ways you can include their JavaScript library into your app:
- Directly downloading the JavaScript file from GitHub – You can find the latest JavaScript library on their GitHub (download the zip file from this link). You’ll find the JavaScript file you will need under
dist/syncano.min.js. - Including their npm module – If you prefer to use npm (via Node, Browserify… etc), you can install their module via
npm install syncano --save- You would then include this in your project via
var Syncano = require('syncano');
- You would then include this in your project via
- Including their Bower module – If you prefer Bower, you can install their module via
bower install syncano- Include this via
<script src="path/to/bower_components/syncano/dist/syncano.min.js">
</script>
- Include this via
User Accounts in Syncano
Syncano comes ready with user account functionality for you to pick up and use straight away. If we head over to the “Classes” page by clicking the menu item on the left, we can see our user_profile class is ready and waiting to store user details:
We will also be able to see our users listed on the “Users” page once we’ve got a user in the system. The “User” page will show their e-mail addresses and whether they are assigned to any groups (we won’t be assigning groups in this demo), the “Classes” page with the user_profile class will show us much more detail, including custom fields we will be adding for our app in particular.
Continue reading %How to Build a Daily Affirmations SMS Service with Stripe & Syncano%
LEAVE A REPLY
You must be logged in to post a comment.