Question

用到的名词：

• end to end 端对端
• end point 终端接口
• request 请求
• pagination 分页
• data persistence layer 数据持久层
• grid system 格子系统，栅格系统

书店应用的介绍

本章将开发一个书店应用。之前也说过，用户在其中可以进行注册和登录。用户可以在未经认证的情况下浏览书籍。 用户可以添加书籍到购物车，查看购物车，检出购物车。用户在有了购物记录之后，就可以浏览他们的订购历史页。应用功能非常简单，但是想要提升应用的等级的话，就必须要给应用整合一个安全的 REST API 服务端，服务端使用的是 Node.js 开发，使用了 JSON Web Token 进行认证。 由于我们本机以及设置好了 Node.js，所以设置服务器不会很复杂。如果你不想在本机搭建服务端的话，你也可以在下一章中找到一个外部主机的连接。一些终端接口是使用 加密的，例如检出和查看订购清单。服务器的设置方式是这样的：当一个 TEST 客户端（例如 Ionic app）想要获取应用数据； 那么它在请求的时候就必须发送有效的 token。应用的工作流是这样的：

JSON Web Token（JWT)

• 用户启动 app
• 用户无需认证就可以浏览数据
• 用户想要添加书籍到购物车或者查看订单
• 用户想要注册或者登录
• 注册或者登录成功，服务端将会返回一个有效期 7 天的 token
• 当客户端进行一些操作的时候（例如，添加到购物车，或者查看订单），它就会需要向对应的 REST 终端发送请求，请求中会包含 token。 如果请求有效，并且对应当前用户，我们就给他分发数据；否则，我们将禁止用户访问或者更新数据。

下一个部分，我们将理解完整的应用架构。我添加了一些额外的功能来更好的管理数据，例如分页，本地存储。但是没有 100%的完成。这些代码片是给你示范如何整合功能到你的 ionic app。

提醒：这不是一个产品级的 app，但是可以作为制作产品级的开端。

书店应用的架构

以下是所有参与创建书店应用的组件的高级视图。

服务端架构

本应用使用的加密 REST 服务用的上 Node.js/Express。数据持久层使用的是 MongoDB。

应用中使用的数据是用 Faker 脚本生成的，Faker 脚本： 。本应用中的数据都是假的，仅可以用作应用原型，填满空白处。所有图片和文本都是随机的。

https://www.npmjs.com/package/faker

鉴于本书的目的是介绍 Ionic，所以我不会讲解如何搭建服务端。

可以参考博客介绍服务端的帖子，了解如何设置，JWT 是如何工作的。 参考

搭建一个加密 REST 风格的 Node.js 应用

我搭建了两个相同实现的应用，一个是我使用 Node.js 作为服务端的 Bucket 列表应用，另一个是我使用 Firebase 作为服务端的同样的应用。 更多信息可以参考：

• Ionic Restify MongoDB：端对端混合应用：

http://thejackalofjavascript.com/an-end-to-end-hybrid-app/

• 创建一个搭载 Firebase 的端对端 Ionic 应用：

http://www.sitepoint.com/creating-firebase-powered-end-endionic-application/

服务端 API 文档

我提供了 Bookstore REST API 的文档，其中你可以查看所有的终端 API，理解每个路由所需的输入数据，将会返回何种数据，可能会有哪些异常会发生。

文档在此处查看：

https://ionic-bookstore.herokuapp.com/

文档的扩展性不强，但是详尽，简单易用。

客户端架构

客户端将会有以下路由：

• 主页，Home（查看所有书籍）
• 登录 Login（标签组件）/注册 Register（标签组件）
• 查看某本书
• 添加购物车
• 查看购物车
• 查看订单 我们将需要以下控制器：
• AppCtrl：应用级别的控制器（管理认证）
• BrowseCtrl：用来展示所有的书籍
• BookCtrl：用来显示某本书的详细信息
• CartCtrl：用来显示购物车
• PuerchasesCtrl：用来显示订单 我们将要用到 4 组工厂：一组管理 Ionic 加载，一组管理本地存储（localStorage），一组管理认证，一组管理数据。
• Loader：管理 Ionic 加载
• LSFactory：管理本地存储
• AuthFactory：管理认证
• TokenFacroty：管理每个 HTTP 请求的 token
• BooksFactory：用来获取所有书籍
• UserFactory：用户的登录，注册以及购物车，订单的 API

Github 上的代码

服务端和客户端的代码都上传到 Github 了。建议检出代码至本机。我会添加更新以及修复读者反馈的任何 bug。同时鼓励读者在发现任何问题的时候发起 issue，我将尽力完成：

• Bookstore Ionic Client Repository
• Bookstore Node.js Server Repository

书店 demo

这个书店 app 将使用侧边菜单模板来搭建。搭建本应用我们还会用到标签页，modal，加载，卡片，列表以及栅格系统。

在开始之前，可以提前预览一下我们将要搭建的 app 的效果：

https://ionic-book-store.herokuapp.com/app

应用加载需要些时间，但是加载完成之后，就可以看到以下效果：

这是我们将要制作的应用的一个实时演示 demo。可以随便点点看看其他页面的效果，例如菜单，例如购物车。 当你在添加购物车，或者访问购物车或者访问订单的时候，将会要求你进行注册或者登录。 你可以创建一个帐号进行测试。顶部有一个分辨率条供你调整查看应用中不同分辨率下面的效果。

注意，此处展示的数据都是随机的假数据，仅供原型开发之用。

开发流

本章中，我们不会一个接一个的去开发功能，在完成一个之后再开发下一个。我们会一次性完成整个 app 的开发，然后查看输出效果。 如果你在开发某功能的时候有不懂的，想要知道最终会是什么样子，那么我强烈建议你检出实时版本的代码，也就是这个版本：

https://ionic-book-store.herokuapp.com/app