ifttt 编程开发

什么是Stamplay？ (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是用于API连接世界的基于Web的开发平台。 我们能够在创纪录的时间内启动功能齐全的Web应用程序，而无需担心服务器，后端编码和API集成。

Stamplay is like if IFTTT and Heroku had a child.

Stamplay就像IFTTT和Heroku育有孩子一样。

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:

Stamplay通过浏览API的巨大世界并帮助您将它们尽快整合在一起，可以使开发人员的生活更轻松。 以下是一些如何使用Stamplay的示例：

• When a user signs up with GitHub, send him a welcome email and add him to my MailChimp newsletter当用户注册GitHub时，向他发送欢迎电子邮件，并将其添加到我的MailChimp新闻通讯中
• If a user fills this form out, charge him $25 with Stripe如果用户填写此表格，请向他收取$ 25的条纹费用
• If a user takes an action 5 times, reward them with a gamification badge如果用户执行了5次操作，请用游戏化徽章奖励他们

主要好处 (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借助我们的现成用户和数据API，云基础架构和前端托管，在启动新应用程序时开始运作
• focus on user experience rather than troubleshooting OAuth, servers and data关注用户体验，而不是对OAuth，服务器和数据进行故障排除
• ship fast and iterate even faster运送速度更快，迭代速度更快
• orchestrate third-party APIs integrating services with no cost免费编排第三方API集成服务
• 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:

对于您可以查看的一些示例应用程序，请查看以下两个非常有用的演示：

• HackerNews Clone黑客新闻克隆
• StackOverflow CloneStackOverflow克隆

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.

在本教程中，我们将研究如何轻松地将Stamplay集成到Angular应用程序中。 如果还没有这样做，请继续创建一个免费的Stamplay帐户，以便您可以按照本教程进行操作。

如何使用？ (How is it used?)

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

根据Stamplay文档 ，这是平台工作原理的图表。

There are 5 main layers to Stamplay applications:

Stamplay应用程序有5个主要层：

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

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.

用户管理 Stamplay为您处理这些过程。 此处提供了使用userid和password或社交登录名进行的注册。 甚至可以进行角色管理。

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

组件这些是我们应用程序的基础。 这就是API集成的地方。 组件执行三种工作：

1. Manage data管理资料
2. Integrate with an API (i.e Stripe to manage payments)与API集成（例如，用于管理付款的Stripe）
3. 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.

任务这是与IFTTT最一致的部分。 您可以告诉Stamplay开始分配应用程序的业务逻辑。 所有这些都无需编写任何代码。

• 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.

快速浏览一下创建任务的界面。 这是一种非常IFTTT的接口，使服务器端逻辑易于处理。

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.

API在创建组件和任务时，Stamplay将生成完整的API层以与您的后端进行交互。 需要明确的是，此API是为您的应用程序定制的，因为它仅查看生成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).

Stamplay使您能够在其基础结构上托管应用程序并使用自己的域。 Stamplay还为用户提供了在付费计划中使用带有https的自己的域名的选项。 用户可以使用SCOTCHED优惠券代码（将于6月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允许用户使用Google登录
• When they login, send them a welcome email他们登录时，向他们发送欢迎电子邮件
• Let users add suggestions让用户添加建议
• When their suggestion gets 5 upvotes, email them congratulations当他们的建议获得5票赞成时，请向他们发送电子邮件表示祝贺

后端 (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.

Stamplay仪表板是我们将处理应用程序的整个服务器端部分的地方。 我们不需要处理任何服务器/数据库/后端，因为Stamplay为我们做了所有这些工作。

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

继续并登录或注册到Stamplay仪表板，我们将开始。

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.

登录后，您将获得一个非常简单而优雅的仪表板。 我们将在这里创建一个应用程序。 随便命名，但请记住，此名称是我们用来标识应用程序的名称。 托管时，这也将用作我们应用程序的URL。

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

就我们而言，我们使用的是苏格兰威士忌，我们的应用程序将托管在https://scotch.stamplayapp.com上 。

与Google验证 (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:

为了让用户通过Google进行身份验证，我们只需要在仪表板上连接我们的Google连接。 需要采取的两个步骤是：

1. Create a developer app on Google Developer Apps在Google Developers Apps上创建开发人员应用程序
2. Fill in your credentials (APPID and APPSECRET) in the dashboard在信息中心中填写您的凭据（ APPID和APPSECRET ）

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

继续并通过https://code.google.com/apis/console/创建一个Google开发人员应用程序。

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

有了之后，我们需要输入我们的APPID和APPSECRET。

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

现在，我们可以使用Google对应用程序进行身份验证。 以下是相关链接：

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.

我们将链接到我们应用程序中的Authentication URL，Stamplay将处理其余的内容。 它还将处理回调并存储我们从Google返回的令牌，以便我们对用户进行身份验证。

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

深度阅读 ： 基于令牌的身份验证 的来龙去脉和JSON Web令牌的剖析

连接我们的组件 (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.

这些组件是我们应用程序的基础。 我们可以在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.

对于本教程，我们将继续使用“ 电子邮件”组件（无需配置）。 我们还将使用Slack组件来了解如何轻松使用这些组件来轻松获得大量功能。

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.

继续并在此处验证您的Slack组件。 我们可以轻松添加更多组件，例如游戏化系统或Stripe组件，以根据用户的互动向用户收费。

创建自定义对象 (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.

并非所有组件都可以处理所有内容，因此Stamplay为我们提供了一种处理自定义数据的简便方法。 将此视为您的应用程序的后端数据库接口。 由于我们将提供创建建议的功能 ，因此让我们继续创建suggestion自定义对象。

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

在“ 对象”->“添加”下 ，创建suggestion对象并添加text属性。

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.

您会注意到，一旦创建自定义对象，就会为此特定资源创建一个新的API URL。 Stamplay正在为您精心设计API！ 此API特定于您的应用程序，将成为您与数据进行交互的方式。

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

这是我们将在本教程中使用的唯一自定义对象。 Stamplay中的所有自定义对象都被赋予了某些字段，例如：

• owner所有者
• dt_createdt_create
• dt_updatedt_update
• votes: holds users that have voted (up/down) on this object投票：保留对该对象投票（上/下）的用户
• shares: holds number and the users that have shared on facebook/twitter 份额：持有号码和在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:

这是我们应用程序的IFTTT部分。 这就是发生大量魔术的地方 。 假设我们想做几件事：

• Email a user "Welcome" when they sign up with Google通过Google注册向用户发送“欢迎”电子邮件
• When a suggestion is created, add that to a Slack channel创建建议后，将其添加到Slack频道

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.

正常情况下，这两件事需要花费很多代码，而Stamplay则不需要 。 我们在后端可以完成一些任务。

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.

在“ 任务”->“管理”下 ，创建一个新任务并按照所需方式进行设置。 这是我们设置电子邮件任务的方式。

发布到Slack (Posting to Slack)

Let's quickly create a task for Slack.

让我们快速为Slack创建一个任务。

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

现在，我们轻松创建了将新建议提交到我们的Slack应用程序的功能。 全部都没有一行代码！

探索API (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.

Stamplay的后端仪表板还提供了API Explorer。 我们可以轻松地通过自定义API来查看数据。

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

在API控制台下 ，让我们只查看建议数据。

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.

您可以看到创建的查询以及我们查看数据的难易程度。 使用此工具，我们可以猜测我们的API将如何响应。

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.

您还可以以某些用户身份执行查询。 这有助于我们微调隐私设置，并让我们检查API对某些用户，访客和经过身份验证的用户的外观。

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.

这是此特定API调用返回的请求和一些数据。 注意，在请求的标题中，我们有一个x-stamplay-jwt 。 进行需要身份验证的API调用时，这是必需的。 不过，不必担心，Stamplay带有一个JavaScript SDK ，它将为您处理所有这些事情。

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.

我们无需编写任何代码即可将所有后端连接起来。 让我们创建前端，看看如何与Angular集成。

前端 (The Frontend)

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

要开始在前端工作，我们需要使用Stamplay CLI工具。

安装Stamplay CLI (Install the Stamplay CLI)

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

这个工具将使我们能够使用Stamplay应用程序。 它提供以下功能：

• Deploy applications部署应用
• Start a local server for development启动本地服务器进行开发
• Initialize a Stamplay project初始化Stamplay项目
• 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.

创建一个新文件夹，然后在该文件夹中初始化Stamplay应用程序。

$ 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.

系统将提示您输入appId （应用程序名称）和apiKey 。 在这种情况下，它们分别是scotch和4eeb87438b172b11f2c030aaa906f719711348317a84acda27c1b989e75efc60 。

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

这将在应用程序的根目录中创建一个stamplay.json文件，以便在部署时，Stamplay将知道您的凭据。

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

启动前端 (Starting the Frontend)

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

让我们用以下内容创建一个简单的index.html ：

<!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安装它们。 运行以下命令，我们将很好。

$ 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.

我们已经将Bootstrap和Ionicons引入了混合物，我们将很快使用我们引入的其他三个JS库（ angular ， angular-stamplay和stamplay-sdk ）。

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.

现在，让我们添加一些自己的自定义样式。 创建我们在此index.html文件中引用的css/style.css 。

@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.

不必太担心这种样式。 它只是这里和那里的几种样式，使我们的应用看起来不错。

在本地使用Stamplay应用程序 (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!

您将看到您的应用程序已准备就绪，可以访问http：// localhost：8080 。 如果一切都如您所愿，请部署我们的应用程序！

部署Stamplay应用 (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.

让我们部署我们的应用程序，看看它是什么样子！ 只要我们具有由stamplay init创建的stamplay.json文件，就可以部署我们的应用程序。

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.

这将要求您对此版本发表评论。 输入您的消息，然后观察Stamplay将您的应用程序部署到其托管环境。 Stamplay还可以为您托管，您甚至可以使用其服务配置自己的自定义域。

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!

Stamplay将打开您的应用程序的浏览器，您应该会看到已加载应用程序，并可以向世界展示！

在Angular中使用Stamplay数据 (Working With Stamplay Data in Angular)

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

为了在Angular中使用Stamplay，我们需要：

• Load the Stamplay SDK加载Stamplay SDK
• Configure the Stamplay application配置Stamplay应用程序
• Load Angular加载角度
• Load the Angular-Stamplay library (just a service wrapper for the SDK)加载Angular-Stamplay库（仅是SDK的服务包装器）

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

这是完成所有操作所需的行。 我们将它们添加到index.html文件的head ：

<!-- 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 nameStamplay.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!

这就是我们需要的所有设置！ 我们可以得到我们应用程序中有趣的部分Angular代码！

角度应用 (The Angular Application)

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

我们将为Angular应用程序创建三个文件：

- 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.

这两个services文件将使用Stamplay SDK和angular-stamplay库来帮助我们的应用程序与Stamplay数据进行交互。

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.

我们将很快将其粘贴到此处。 每个仅具有一些功能，可以帮助我们获取数据或创建数据。 suggestion服务还使我们可以对建议进行投票 。

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

要深入了解Stamplay SDK的功能，请务必查看文档 。

建议服务（app / services / suggestion.js） (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 sdkvar suggestionModel = $stamplay.Cobject('suggestion').Model;// set the proper variablessuggestionModel.set('owner', id);suggestionModel.set('text', data.text);// save the suggestionsuggestionModel.save().then(function() {deferred.resolve(suggestionModel);});return deferred.promise;}// get all the suggestionsfunction getAll() {var deferred = $q.defer();// use collection instead of model to grab allvar 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 onsuggestionModel.fetch(id).then(function() {// handle the upvote and the downvoteif (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;}}

用户服务（app / services / user.js） (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 userfunction getCurrent() {var deferred = $q.defer();// instantiate the user model from the sdkvar 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 sdkvar 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.

Stamplay使用“ Model和“ Collection属性使用户能够获取数据，查询特定的数据集等等。 在这里，我们只是在执行简单的操作来获取数据和创建数据。

主角应用 (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.

既然我们已经完成了服务，并且能够使用Stamplay API，则可以将这些服务注入到我们的主应用程序中。

Here's the foundation of our app.js:

这是我们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 formmain.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.

这是我们应用的基础。 现在，我们只需要在index.html加载三个新文件，然后将Angular应用与ng-app和ng-controller一起ng-app 。

...<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.

我们之前已经连接了Google应用程序。 现在，我们需要为我们的用户提供一种使用它的方式。

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.

所有身份验证均由Stamplay处理。 我们不需要编写任何代码； 我们只需要将用户链接到Stamplay为我们提供的身份验证路径即可。

This means the authentication process looks like:

这意味着身份验证过程如下所示：

1. Link users to our authentication route将用户链接到我们的身份验证路线
2. Authentication happens on GitHub身份验证在GitHub上进行
3. GitHub sends a user back to our application with a tokenGitHub使用令牌将用户发送回我们的应用程序
4. Stamplay handles storing that token and our user is authenticated!Stamplay处理该令牌的存储，并且我们的用户已通过身份验证！

We only need to do part 1 of those steps.

我们只需要执行这些步骤的第1部分。

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.

现在，如果用户单击它，将要求他们使用其Google帐户登录。 我们必须进行部署，因为身份验证无法从localhost：8080进行 。 Google希望将用户带回完全合格的域。

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:

现在，我们必须确保该用户已登录。我们将使用我们之前创建的用户服务。 在app.js文件中，让我们为用户添加检查：

// ========================================
// 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 objectmain.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.

现在我们有了main.loggedIn变量，可以在视图中使用它了。 我们将隐藏登录按钮并显示建议创建表单。

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

首先，我们需要使用ng-show隐藏登录按钮。

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

Further Reading: How to Use ngShow and ngHide

相关阅读 ： 如何使用ngShow和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.

我们将显示从Google获取的用户图像和显示名称。 我们还将使用ng-submit="main.submitSuggestion()"处理此表单。 让我们现在创建它。

添加注销按钮 (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.

这是需要添加的链接。 我们将创建一个logout()函数，并在HTML文件中使用该函数。

app.js

app.js

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

index.html

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.

通过使用Stamplay JS SDK上的logout()函数，我们可以注销用户。 这将删除存储在其浏览器中的令牌。

处理建议 (Handling Suggestions)

插入建议 (Inserting a Suggestion)

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

我们已经有服务来处理创建建议。 现在在app.js使用它：

// ========================================
// submit a suggestion ====================
// ========================================
main.submitSuggestion = function(id, formData) {Suggestion.create(id, formData).then(function(data) {// clear the formmain.suggestionData = {};// update the suggestionsSuggestion.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.

创建建议时，请记住我们已完成任务设置，因此该建议将提交到我们的Slack频道。

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:

我们将以下内容添加到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:

这将获取所有建议并将它们绑定到main.suggestionList对象。 我们现在只需要在我们的视图中遍历：

<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.

我们已经在应用程序的up和downvote部分中添加了ng-click="main.vote()" 。 让我们在app.js处理。

// ========================================
// vote on a suggestion
// ========================================
main.vote = function(suggestion, type) {Suggestion.vote(suggestion.instance._id, type).then(function() {// update the suggestionsSuggestion.getAll().then(function(data) {// if the vote was successful, update the UIif (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.

在suggestion服务中，我们从Stamplay SDK调用upVote()函数，这将自动将已登录的用户添加到投票数组中，无论其投票赞成还是反对票。 Stamplay也将自动处理total票数的计算。

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.

这可以通过Stamplay任务轻松完成。 只需登录到后端并创建任务即可。

结论 (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.

就像这样，我们有一个非常强大的应用程序，其中包含触发器和动作。 如果您要自己编写很多代码，那将是一个非常耗时的过程。 借助Stamplay的简单性，我们能够以美观的界面创建任务和触发器。

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

试试Stamplay。 创建一个免费帐户 ，让我们知道您对他们的服务的看法。

*This content is sponsored via Syndicate Ads.

*此内容是通过辛迪加广告赞助的 。

翻译自: https://scotch.io/tutorials/build-an-angularjs-app-with-stamplay-the-ifttt-for-developers

ifttt 编程开发