我们将使用 CloudBoost.io 和 Ionic Framework 构建一个示例社交网络移动应用程序。 我们 <3 Ionic 和你们所有人一样，它是一个优秀的混合移动应用程序开发框架，您可以在其中使用您已经知道的 Web 技术（HTML、JS 和 CSS）构建应用程序。 Ionic 可以成为您移动应用程序的出色前端，而 CloudBoost.io 可以成为您的后端和数据库服务。对于登陆这里但不知道 CloudBoost.io 是什么的人 -
CloudBoost 是一种专为“下一代网络”设计的数据库服务，它不仅可以进行数据存储，还可以进行搜索、实时搜索等等，帮助像您这样的开发人员在一半的时间内构建更丰富的应用程序.
在我们开始之前，我们已经将所有代码签入到 GitHub 中，您可以从这里克隆 repo：
GitHub 网址： https: //github.com/CloudBoost/sample-ionic-social-network
这是我们要构建的应用程序的快速演示：
安装离子框架：
要开始，请转到 http://ionicframework.com/ 和
通过节点包管理器 (NPM) 安装 Ionic 命令行工具。如果您没有安装 NodeJS。请先从 https://nodejs.org/ 安装 NodeJS。
要安装 Ionic 命令行，请输入
npm install -g cordova ionic
进入您的命令行，NPM 将为您安装 Ionic 和 Cordova。
构建前端：
创建一个新项目：
要创建一个新的 Ionic 项目，Ionic 几乎没有可供选择的模板。我们将从模板集中选择“选项卡”模板。
要开始一个新项目，创建一个目录并输入
ionic start myApp tabs
在你的命令行中。
安装完成后，在命令行中输入
cd myApp
以移动到您的应用程序目录。
要在浏览器中运行您的新应用程序，请输入
ionic serve
，它将在本地主机的 8100 端口上运行您的应用程序。
建筑仪表板：
现在，我们需要一个文本框来接收“帖子”文本，并在屏幕上显示提要。
导航到
www\templates\tab-dash.html
这是您的仪表板屏幕。
编辑 HTML 以添加文本框：
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
并添加示例提要：
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
您的屏幕现在应该如下所示：
您的仪表板现已准备就绪，下一步是将后端与您的应用程序集成。
将您的应用程序与 CloudBoost.io 集成：
在你开始之前 ：
- 您需要 在此处 注册 CloudBoost 上的免费帐户。
- 您需要创建一个新的应用程序。输入名称和 AppID，然后单击创建。 提示：AppID 只是您的应用程序在 CloudBoost 网络上的唯一名称。
创建应用程序后，单击“密钥”以检查您的客户端密钥。
提示：如果您在客户端而不是服务器上使用 SDK，则使用 客户端密钥 。如果您在服务器上使用我们的 NodeJS SDK 之类的 SDK。请改用 万能钥匙
第 2 步：构建一个功能来保存“帖子”。
在这里，我们将实现一个功能来将帖子保存在 CloudBoost 数据库中。
-
在 CloudBoost.io 的表设计器中创建一个表
- 创建新表后，向其中添加两个字段： 文本 类型的 名称 和 文本 类型的 帖子 。它应该看起来像下面的屏幕：
- 创建新表后，您就可以开始使用我们的 JavaScript SDK 进行破解了。从 这里 下载我们的 JavaScript SDK
第 3 步：将 CloudBoost.io 与您的 Ionic 应用程序集成。
在
index.html
的
<head>
部分，链接 CloudBoost JavaScript SDK。
<script src="https://cloudboost.io/js-sdk/1.0.0.js"></script>
您也可以下载 SDK 并将其本地链接到您的应用程序中。这是一个更好的选择，因为 SDK 不会在每次应用程序启动时加载。
链接 SDK 后。您需要初始化新的 CloudBoost 应用程序。在
js
文件夹中，您会找到名为
app.js
的文件，您可以将此代码添加到该文件内部的 angular
run
函数中，这将初始化您的新 CloudBoost 应用程序。
var appId="YOUR APP ID"; //This should be your AppID
var appKey="YOUR CLIENT KEY"; //this should be your AppKey
完成后，您现在可以调用 CB.CloudApp.init() 函数来初始化您的应用程序。
CB.CloudApp.init(appId,appKey);
第 4 步：保存帖子
要保存帖子，您需要导航到 js 目录中的控制器文件。寻找
DashCtrl
并具有保存功能以保存帖子
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
在这里，您创建了一个类型为
feed
(TableName) 的新
CloudObject
，并调用 CloudObject 的
save
函数将新的提要保存到表中。
第 5 步：在仪表板上显示帖子列表
要在启动应用程序时查看帖子列表，您需要创建一个角度
init
函数并从提要表中查询帖子。
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
现在您需要使用 Angular ngRepeat 将
posts
数组绑定到 HTML。
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
第 6 步：使您的应用实时。
要在世界任何地方的某人将新“帖子”添加到提要表时自动刷新应用程序，您需要实施 CloudBoost.io 的实时功能。只需几行代码即可使用 CloudBoost.io 实现实时。您需要监听 CloudObject 类的
on
。
<form ng-submit="savePost(postText)">
<label class="item item-input">
<i class="icon ion-ios-arrow-forward placeholder-icon"></i>
<input type="text" placeholder="Your Post" ng-model="postText">
<button type="submit" />
</label>
将上述代码放在仪表板控制器的“init”函数中。
你完成了！
恭喜您使用 CloudBoost.io 创建了您的第一个 Ionic 应用程序。
这是您的新应用程序的快速演示：
我们已将所有代码签入 GitHub。您可以下载代码，如果您要在其中添加新功能，请随时向我们发送请求请求。 ;)