What is Stamplay?

Stamplay is a web-based development platform for the API connected world. We have the ability to launch full-featured web apps in record time without worrying about servers, back-end coding and API integrations.

Stamplay is like if IFTTT and Heroku had a child.

Stamplay can make a developer's life easier by navigating the giant world that is APIs and helping you bring them all together as quickly as possible. Some examples of how you could use Stamplay are:

When a user signs up with GitHub, send him a welcome email and add him to my MailChimp newsletter

If a user fills this form out, charge him $25 with Stripe

If a user takes an action 5 times, reward them with a gamification badge

Main Benefits

Hit the ground running while launching a new app with our out of the box user and data API, cloud infrastructure and front-end hosting

focus on user experience rather than troubleshooting OAuth, servers and data

ship fast and iterate even faster

orchestrate third-party APIs integrating services with no cost

lower operational costs over the time

Sample Apps

For some sample applications that you can take a look at, check out these two very informative demos:

In this tutorial, we'll be looking at how to integrate Stamplay into an Angular application easily. If you haven't done so, go ahead and create a free Stamplay account so that you'll be able to follow along with this tutorial.

**Coupon**: Stamplay has provided Scotch users an exclusive coupon to provide **3 months of the premium plan for free** ($600 value). The coupon code is **SCOTCHED** and it expires on June 30.

How is it used?

Per the Stamplay docs, here is a diagram for how the platform works.

There are 5 main layers to Stamplay applications:

Upgrade Your JS Go from vanilla JavaScript 👉 React

Watch for FREE

User Management Stamplay handles these processes for you. Registration with userid and password or social logins are all present here. Even role management is available.

Components These are the building blocks of our application. This is where API integration happens. Components perform three kinds of jobs:

Manage data Integrate with an API (i.e Stripe to manage payments) Add features (i.e. email, gamification, etc)

Currently, here is a list of the available:

Tasks This is the part most aligned with IFTTT. You can tell Stamplay to start assigning the business logic of your application. All without writing a single line of code.

If a user registers, send them an email

If a user takes a certain action, reward them

Here's a quick look at the interface for creating tasks. It's a very IFTTT sort of interface and makes server-side logic easy to handle.

APIs When creating components and tasks, Stamplay will generate a complete layer of APIs to interact with your back-end. To be clear, this API is customized to your application since it is only looking at your components and tasks to generate the API.

Web Hosting

Stamplay gives you the ability to host your application on their infrastructure and use your own domain. Stamplay also gives users the option to use their own domain names with https on paid plans. Users can test out these features with the SCOTCHED coupon code (expires June 30).

Building an App

Today we'll be building a suggestion box application with authentication and some gamification added. The main features are:

Allow users to login with Google

When they login, send them a welcome email

Let users add suggestions

When their suggestion gets 5 upvotes, email them congratulations

The Backend

The Stamplay dashboard is where we will handle the entire server side part of our application. We don't have to deal with any of the server/database/backend because Stamplay is doing all that for us.

Go ahead and login or signup to the Stamplay dashboard and we'll get started.

Once logged in, you are greeted with this very simple and elegant dashboard. We will create an application here. Name it whatever you please, but just remember that this name is what we will use to identify our application. This will also be used as the URL for our application when it is hosted.

In our case, we are using scotch and our application will be hosted at https://scotch.stamplayapp.com.

Authentication with Google

In order to let users authenticate with Google, we just need to wire up our Google connection in the dashboard. The two steps that need to be taken are:

Create a developer app on Google Developer Apps Fill in your credentials ( APPID and APPSECRET ) in the dashboard

Go ahead and create a Google developer application at https://code.google.com/apis/console/.

Once you have that, we'll need to enter our APPID and APPSECRET.

Now we have the ability to authenticate our application using Google. The following are the relevant links:

Application URL https://scotch.stamplayapp.com Authentication URL https://scotch.stamplayapp.com/auth/v0/google/connect Redirect URL https://scotch.stamplayapp.com/auth/v0/google/callback https://scotch.stamplayapp.com/auth/v1/google/callback

We'll link to the Authentication URL in our application and Stamplay will handle the rest. It will also handle the callback and store the token we've gotten back from Google so we can authenticate our users.

Further Reading: The Ins and Outs of Token Based Authentication and The Anatomy of a JSON Web Token

Wiring Up Our Components

The components are the building blocks of our application. We can see the different tools available to us under Tasks -> Components.

For this tutorial, we'll just be sticking with the Email component (which requires no configuration). We'll also use the Slack component to see how we can easily use these components to get a good amount of functionality easily.

Go ahead and authenticate your Slack component here. We could easily add more components like a gamification system or the Stripe component to charge users based on their interactions.

Creating Custom Objects

Not everything can be handled with components, so Stamplay provides us with an easy way to handle custom data. Think of this as the backend database interface for your application. Since we will be providing the ability to create suggestions, let's go ahead and create a suggestion custom object.

Under Objects -> Add, create a suggestion object and add a text property.

You'll notice that as soon as you create a custom object, a new API URL get's created for this specific resource. Stamplay is crafting your API for you on the fly! This API is specific to your application and will be how you interact with your data.

That's the only custom object we'll be using for this tutorial. All custom objects from Stamplay are given certain fields like:

owner

dt_create

dt_update

votes: holds users that have voted (up/down) on this object

shares: holds number and the users that have shared on facebook/twitter

These fields above help take care of a lot of tasks that you'll normally find in applications.

Tasks

This is the IFTTT part of our application. This is where the bulk of the magic happens. Let's say that we wanted to do a couple things:

Email a user "Welcome" when they sign up with Google

When a suggestion is created, add that to a Slack channel

These two things would take a good bit of code normally, but not with Stamplay. We have tasks in the backend that we can wire up.

For example, this is how our task for the email would look:

Under Tasks -> Manage, create a new Task and set it up the way you want. Here is how we've set up the email task.

Posting to Slack

Let's quickly create a task for Slack.

Now we have easily created the ability to have new suggestions submitted to our Slack application. All without a single line of code!

Exploring the API

The backend dashboard of Stamplay also provides an API Explorer. We can easily move through our custom API and see what our data would look like.

Under API Console, let's just check out our suggestions data.

You can see the query that is created and how easily we can see our data. With this tool, we can take the guess work of how our API will respond.

You can also execute queries as certain users. This helps us fine tune our privacy settings and lets us examine how our API will look to certain users, guests, and authenticated users.

Here is the request and some data that have come back from this specific API call. Notice that in the headers in our request, we have an x-stamplay-jwt . This will be required when making API calls that require authentication. Don't worry about that though, Stamplay comes with a JavaScript SDK that will handle all that for you.

We've gotten our backend wired up all without writing a single line of code. Let's create the frontend and see how we can integrate with Angular.

The Frontend

To start working on our frontend, we'll need to grab the Stamplay CLI tool.

Install the Stamplay CLI

This tool will give us the ability to work with our Stamplay applications. It provides the ability to:

Deploy applications

Start a local server for development

Initialize a Stamplay project

Rollback versions

Download the latest version

$ npm install -g stamplay-cli

Create a new folder and let's initialize our Stamplay application in this folder.

$ mkdir stamplay-demo && cd stamplay-demo $ stamplay init

You'll be prompted to enter your appId (name of your app) and your apiKey . In this case, they are scotch and 4eeb87438b172b11f2c030aaa906f719711348317a84acda27c1b989e75efc60 respectively.

This will create a stamplay.json file in the root of your app so that when deploying, Stamplay will know your credentials.

{ "appId": "scotch", "apiKey": "4eeb87438b172b11f2c030aaa906f719711348317a84acda27c1b989e75efc60", "public": "./", "ignore": [ "stamplay.json", "**/.*", "**/node_modules/**" ] }

Starting the Frontend

Let's create a simple index.html with the following:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scotch Suggestions</title> <!-- CSS --> <!-- load bootstrap ionicons and custom css --> <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./bower_components/ionicons/css/ionicons.min.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <section class="site-topper"> <div class="container"> <div class="page-header text-center"> <h1>Scotch Suggestions with Stamplay and Angular</h1> </div> <div class="suggestion-container"> <div class="suggestion-page"> login button and suggestion form go here! </div> <div class="suggestion-box"> Suggestion Box </div> </div> </div> </section> </body> </html>

We are referencing some libraries here so we need to install them using Bower. Run the following command and we'll be good to go.

$ bower install bootstrap ionicons angular angular-stamplay stamplay-sdk --save

We've brought Bootstrap and Ionicons into the mix and we'll be using the other three JS libraries we pulled in ( angular , angular-stamplay and stamplay-sdk ) soon.

Now let's add some of our own custom styling to the mix. Create the css/style.css that we referenced in this index.html file.

@charset "UTF-8"; h1, h2, h3, h4, h5, h6 { color:#F26C4F; } .site-topper { background:#E9F0F4; padding:50px; } .login-message i { font-size:40px; display:block; padding-left:50px; padding-right:50px; margin-bottom:10px; } .suggestion-container { width:600px; padding:0; margin:0 auto; } .suggestion-page { background:#FFF; padding:50px; margin:0 80px; min-height:250px; transform:translateY(50px); position:relative; } .suggestion-page::after { content:''; position:absolute; bottom:0; left:-4%; width:108%; height:5px; background:#0D96BD; } .suggestion-box { background:#00B8EC; padding:70px 0 30px; color:#FFF; text-align:center; font-size:40px; text-transform:uppercase; border-top-left-radius:8px; border-top-right-radius:8px; letter-spacing:-3px; } form img { margin:0 auto; } .suggestions-section .container { width:95%; } .suggestion { color:#333; font-size:18px; padding:15px 10px 15px 50px; border-radius:5px; box-shadow:3px 3px #EBEBEB; border:1px solid #DDD; margin-bottom:30px; min-height:130px; } .suggestion .vote-buttons { position:absolute; left:30px; top:20px; margin-right:20px; } /* responsive work */ @media screen and (max-width:768px) { .site-topper { padding:20px; } .suggestion-container { width:auto; } .suggestion-page { margin-left:0; margin-right:0; padding:20px; } }

Don't worry too much about this styling. It's just a few styles here and there to make our app look decent.

Working Locally with a Stamplay App

We can now start our local server to make sure that everything is loading correctly. Run the following:

$ stamplay start

You will see that your application is ready to go at http://localhost:8080. If everything is how you like it, let's deploy our application!

Deploying A Stamplay App

Let's deploy our app and see what it looks like! As long as we have the stamplay.json file created by stamplay init , we have the ability to deploy our application.

Go ahead and run:

$ stamplay deploy

This will ask you for a comment for this version. Enter your message and watch as Stamplay will deploy your application to its hosting environment. Stamplay will also take care of hosting for you and you can even configure your own custom domain with their service.

Once deployed, run:

$ stamplay open

Stamplay will open your browser with your application and you should see your app loaded and ready for the world to see!

Working With Stamplay Data in Angular

In order to use Stamplay with Angular, we will need to:

Load the Stamplay SDK

Configure the Stamplay application

Load Angular

Load the Angular-Stamplay library (just a service wrapper for the SDK)

Here are the lines required to do all that. We'll add them to the head of our index.html file:

<!-- JS --> <!-- load stamplay sdk, angular, angular-stamplay service --> <script src="./bower_components/stamplay-sdk/dist/stamplay.min.js"></script> <script> // initiate stamplay app with app name Stamplay.init('scotch'); </script> <script src="./bower_components/angular/angular.min.js"></script> <script src="./bower_components/angular-stamplay/angular-stamplay.js"></script>

That's all the setting up we need! We can get to the fun part of our application, the Angular code!

The Angular Application

We'll be creating three files for our Angular application:

- app/ |----- services/ |----- suggestion.js |----- user.js |- app.js

The two services files will use the Stamplay SDK and angular-stamplay libraries to help our application interact with our Stamplay data.

We'll just quickly paste these here. Each only has a few functions and help us grab data or create data. The suggestion service will also allow us to vote on suggestions.

For a more in depth look at what the Stamplay SDK is capable of, be sure to check out the documentation.

Suggestions Service (app/services/suggestion.js)

angular .module('SuggestionService', []) .factory('Suggestion', ['$q', '$stamplay', SuggestionService]); function SuggestionService($q, $stamplay) { return { create: create, getAll: getAll, vote: vote }; function create(id, data) { var deferred = $q.defer(); // instantiate the suggestion from the sdk var suggestionModel = $stamplay.Cobject('suggestion').Model; // set the proper variables suggestionModel.set('owner', id); suggestionModel.set('text', data.text); // save the suggestion suggestionModel.save() .then(function() { deferred.resolve(suggestionModel); }); return deferred.promise; } // get all the suggestions function getAll() { var deferred = $q.defer(); // use collection instead of model to grab all var suggestionCollection = $stamplay.Cobject('suggestion').Collection; suggestionCollection.fetch() .then(function() { deferred.resolve(suggestionCollection); }); return deferred.promise; } // vote on a suggestion (upvote or downvote) function vote(id, type) { var deferred = $q.defer(); var suggestionModel = $stamplay.Cobject('suggestion').Model; // find the specific suggestion you want to vote on suggestionModel.fetch(id).then(function() { // handle the upvote and the downvote if (type == 'upvote') { suggestionModel.upVote() .then(function() { deferred.resolve(suggestionModel); }) .fail(function(err) { // if stamplay returns a 406 not allowed alert('You already voted for this suggestion.'); }); } else if (type == 'downvote') { suggestionModel.downVote() .then(function() { deferred.resolve(suggestionModel); }) .fail(function(err) { // if stamplay returns a 406 not allowed alert('You already voted for this suggestion.'); }); } }); return deferred.promise; } }

Users Service (app/services/user.js)

angular .module('UserService', []) .factory('User', ['$q', '$stamplay', UserService]); function UserService($q, $stamplay) { return { getCurrent: getCurrent, logout: logout }; // get the current logged in user function getCurrent() { var deferred = $q.defer(); // instantiate the user model from the sdk var userModel = $stamplay.User().Model; userModel.currentUser() .then(function() { deferred.resolve(userModel); }) .catch(function(err) { deferred.reject(err); }); return deferred.promise; } // logout function to clear the token from function logout() { // instantiate the user model from the sdk var userModel = $stamplay.User().Model; userModel.logout(); } }

Stamplay uses the Model and Collection properties to give users the ability to grab data, query specific sets of data, and much more. Here we are just doing simple operations to grab data and create data.

The Main Angular App

Now that we have the services done and have the ability to work with the Stamplay API, we can inject these services into our main application.

Here's the foundation of our app.js :

angular .module('stamplayApp', ['ngStamplay', 'SuggestionService', 'UserService']) .controller('MainController', MainController); function MainController(Suggestion, User) { var main = this; main.suggestionData = {}; // blank object to hold data from suggestion form main.loggedUser = {}; // blank object to hold logged in user data // ======================================== // function to logout a user // ======================================== // ======================================== // get current user ======================= // ======================================== // ======================================== // get all suggestions // ======================================== // ======================================== // submit a suggestion ==================== // ======================================== // ======================================== // vote on a suggestion // ======================================== }

This is the foundation for our application. Now we just need to load our three new files in index.html and apply our Angular app with ng-app and ng-controller .

... <script src="./app/services/suggestion.js"></script> <script src="./app/services/user.js"></script> <script src="./app/app.js"></script> </head> <body ng-app="stamplayApp" ng-controller="MainController as main">

Frontend Authentication

We wired up our Google application earlier. Now we need to provide our users a way to use it.

All of the authentication is handled by Stamplay. We don't need to code anything up; we just need to link our users to the authentication path that Stamplay has provided for us.

This means the authentication process looks like:

Link users to our authentication route Authentication happens on GitHub GitHub sends a user back to our application with a token Stamplay handles storing that token and our user is authenticated!

We only need to do part 1 of those steps.

Let's add a link to login in our application:

<div class="login-message text-center""> <a href="/auth/v0/google/connect" class="btn btn-danger btn-lg"> <i class="icon ion-social-google"></i> Login </a> </div>

That will add the login button. At this point, deploy your application again using:

$ stamplay deploy

Now if a user clicks it, they will be asked to login with their Google account. We had to deploy because authentication won't work from localhost:8080. Google wants to return a user to a full qualified domain.

Now we have to make sure that the user is logged in. We're going to use the user service we created earlier. In the app.js file, let's add our check for the user:

// ======================================== // get current user ======================= // ======================================== User.getCurrent() .then(function(data) { // check if the user is logged in if (data.get('_id')) { // save the data to the main.loggedUser object main.loggedIn = true; main.loggedUser.userId = data.get('_id'); main.loggedUser.displayName = data.get('displayName'); main.loggedUser.profileImg = data.get('profileImg'); } else { main.loggedIn = false; } });

Now that we have the main.loggedIn variable, we can use it in our view. We will hide the login button and show the suggestion creation form.

First, we need to hide the login button with ng-show .

<div class="login-message text-center" ng-show="!main.loggedIn"> ...

Further Reading: How to Use ngShow and ngHide

Below the login button, we'll add the login form:

<form class="text-center" name="suggestionForm" ng-submit="main.submitSuggestion(main.loggedUser.userId, main.suggestionData)" ng-show="main.loggedIn" novalidate> <div class="form-group"> <img ng-src="{{ main.loggedUser.profileImg }}" class="img-circle img-responsive"> <h3>{{ main.loggedUser.displayName }}</h3> </div> <div class="form-group"> <label>What can we improve at Scotch.io?</label> <textarea class="form-control" rows="5" name="text" ng-model="main.suggestionData.text" required></textarea> </div> <button class="btn btn-danger btn-lg btn-block" ng-disabled="suggestionForm.$invalid">Submit Suggestion</button> </form>

We'll show a user's image and display name that were grabbed from Google. We'll also handle processing this form using the ng-submit="main.submitSuggestion()" . Let's create that now.

Adding a Logout Button

Here is the link that needs to be added. We'll create a logout() function and use that function within our HTML file.

app.js

// ======================================== // log a user out ======================= // ======================================== main.logout = function() { User.logout(); };

index.html

<a ng-click="main.logout()" class="btn btn-default">Logout</a>

By using the logout() function on the Stamplay JS SDK, we can log our users out. This will delete the token that is stored in their browser.

Handling Suggestions

Inserting a Suggestion

We already have the service to handle creating suggestions. Let's use it now in app.js :

// ======================================== // submit a suggestion ==================== // ======================================== main.submitSuggestion = function(id, formData) { Suggestion.create(id, formData) .then(function(data) { // clear the form main.suggestionData = {}; // update the suggestions Suggestion.getAll() .then(function(data) { main.suggestionList = data.instance; }); }); };

When we create a suggestion, remember that we have the task setup so that this suggestion will be submitted to our Slack channel.

Now that we have the ability to create suggestions from our form, we need to show all our suggestions. Notice that we're already grabbing all the suggestions after we create one in our promise. We'll just use that same exact code when we load the application so that the suggestions are loaded.

Showing All Suggestions

We're going to add the following to app.js :

// ======================================== // get all suggestions // ======================================== Suggestion.getAll() .then(function(data) { main.suggestionList = data.instance; });

This will get all the suggestions and bind them to the main.suggestionList object. We just need to loop over this in our views now:

<div class="row"> <div class="col-sm-4 col-lg-3 text-center" ng-repeat="suggestion in main.suggestionList"> <div class="suggestion"> <p>{{ suggestion.instance.text }}</p> <div class="vote-buttons btn-group-vertical"> {{ suggestion.instance.actions.votes.total }} <a class="btn btn-success" ng-click="main.vote(suggestion, 'upvote')" ng-disabled="suggestion.instance.actions.votes.upvoted"> <i class="icon ion-thumbsup"></i> </a> <a class="btn btn-danger" ng-click="main.vote(suggestion, 'downvote')" ng-disabled="suggestion.instance.actions.votes.downvoted"> <i class="icon ion-thumbsdown"></i> </a> </div> </div> </div> </div>

Now we have the list of suggestions available with the number of votes and title.

Voting on Custom Objects

We've added ng-click="main.vote()" to the up and downvote sections of our application. Let's handle that back in app.js .

// ======================================== // vote on a suggestion // ======================================== main.vote = function(suggestion, type) { Suggestion.vote(suggestion.instance._id, type) .then(function() { // update the suggestions Suggestion.getAll() .then(function(data) { // if the vote was successful, update the UI if (type == 'upvote') { suggestion.instance.actions.votes.total++; suggestion.instance.actions.votes.upvoted = true; suggestion.instance.actions.votes.downvoted = false; } else if (type == 'downvote') { suggestion.instance.actions.votes.total--; suggestion.instance.actions.votes.downvoted = true; suggestion.instance.actions.votes.upvoted = false; } main.suggestionList = data.instance; }); }); };

In the suggestion service, we call the upVote() function from the Stamplay SDK and this will automatically add the logged in user to the array of votes, whether they be up or downvotes. The calculation for the total number of votes will also be handled automatically by Stamplay.

Now we have our voting functionality for our application and we're pretty much done!

Another Task

Let's say when a suggestion has gotten many upvotes, we want to inform its owner that their suggestion is gaining traction.

That is easily accomplished with a Stamplay task. Just login to the backend and create the task.

Conclusion

Just like that, we have a very powerful application with triggers and actions. If you were to code a lot of this by yourself, it would be a time consuming process. With the simplicity of Stamplay, we have the ability to create tasks and triggers with a good looking interface.

Give Stamplay a try. Create a free account and let us know what you think of their service.

*This content is sponsored via Syndicate Ads.

Like this article? Follow @chrisoncode on Twitter