35 | [[text]]
98 | 99 | 100 |
35 | 11 | The purpose of this application is to demonstrate a Service Oriented Approach for Single Page App development. 12 |
13 |
14 | To serve this purpose this application template integrates Polymer, Play Framework and MongoDB.
15 |
22 | A document based NoSQL MongoDB database is used along with ReactiveMongo driver to connect to it in asynchronous, non-blocking way.
23 |
26 | To install MongoDB on your computer you can use this manual.
27 |
30 | To connect to database Play-ReactiveMongo plugin is used. 31 | To make it work the following has been done: 32 |
33 |"org.reactivemongo" %% "play2-reactivemongo" % "0.11.7.play24"1100:play.modules.reactivemongo.ReactiveMongoPluginmongodb.uri = "mongodb://localhost:27017/posts"
51 | The application tier is delivered by a simple Play app.
52 | This way you can easily take advantage of Play's ecosystem, eg. add some plugins or other
53 | benefits, such as Akka, CoffeScript support Web Sockets and many, many more.
54 | The template has one Controller: Posts.
55 | It has PostRepo which uses Play-ReactiveMongo plugin under the hood.
56 |
57 |
58 |
60 | PostRepo provides db object to access specific database collections:
61 |
62 |
63 | protected def collection = db.collection[JSONCollection]("posts")
64 |
65 |
66 |
67 |
68 |
69 | To get data from the database use list method. It's use looks like this:
70 |
71 |
72 | def list = Action.async {implicit request =>
73 | postRepo.find()
74 | .map(posts => Ok(Json.toJson(posts.reverse)))
75 | .recover {case PrimaryUnavailableException => InternalServerError("Please install MongoDB")}
76 | }
77 |
78 |
79 | In this case the response is json with all posts from the database collection:
80 |
81 |
82 | [
83 | {
84 | "_id": {"$oid":"556848238600001401dfead6"},
85 | "text" : "Have you heard about the Web Components revolution?",
86 | "username" : "Eric",
87 | "avatar" : "../images/avatar-01.svg",
88 | "favorite": false
89 | },
90 | {
91 | "uid": {"$oid":"556848238600001401dfead7"},
92 | "text" : "Loving this Polymer thing.",
93 | "username" : "Rob",
94 | "avatar" : "../images/avatar-02.svg",
95 | "favorite": false
96 | },
97 | ...
98 | ]
99 |
100 |
101 |
102 |
103 |
104 | To like post : In the template it accepts json body with favorite, boolean flag. The method saves this flag in the database collection:
105 |
106 |
107 | def like(id: String) = Action.async(BodyParsers.parse.json) { implicit request =>
108 | val value = (request.body \ Favorite).as[Boolean]
109 | postRepo.update(BSONDocument(Id -> BSONObjectID(id)), BSONDocument("$set" -> BSONDocument(Favorite -> value)))
110 | .map(le => Ok(Json.obj("success" -> le.ok)))
111 | }
112 |
113 |
114 |
115 |
116 |
117 | To update post's message : In the template it accepts json body with text, String parameter:
118 |
119 |
120 | def update(id: String) = Action.async(BodyParsers.parse.json) { implicit request =>
121 | val value = (request.body \ Text).as[String]
122 | postRepo.update(BSONDocument(Id -> BSONObjectID(id)), BSONDocument("$set" -> BSONDocument(Text -> value)))
123 | .map(le => Ok(Json.obj("success" -> le.ok)))
124 | }
125 |
126 |
127 |
128 |
129 |
130 | To delete post :
131 |
132 |
133 | def delete(id: String) = Action.async {
134 | postRepo.remove(BSONDocument(Id -> BSONObjectID(id)))
135 | .map(le => RedirectAfterPost(le, routes.Posts.list()))
136 | }
137 |
138 |
139 |
140 |
141 |
142 | To add post :
143 |
144 |
145 | def add = Action.async(BodyParsers.parse.json) { implicit request =>
146 | val username = (request.body \ Username).as[String]
147 | val text = (request.body \ Text).as[String]
148 | val avatar = (request.body \ Avatar).as[String]
149 | postRepo.save(BSONDocument(
150 | Text -> text,
151 | Username -> username,
152 | Avatar -> avatar,
153 | Favorite -> false
154 | )).map(le => Redirect(routes.Posts.list()))
155 | }
156 |
157 |
158 |
159 |
160 | 161 | To expose REST API in Play framework the routes file has been configured: 162 |
163 |
164 | GET /api/posts controllers.Posts.list
165 | PATCH /api/post/:id/like controllers.Posts.like(id: String)
166 | PATCH /api/post/:id controllers.Posts.update(id: String)
167 | POST /api/post controllers.Posts.add
168 | DELETE /api/post/:id controllers.Posts.delete(id : String)
169 |
170 |
171 |
172 |
177 | Frontend is based on Polymer which uses
178 | Web Components.
179 | It's a very prospecting technology, promising true component development of the web.
180 |
182 | For sake of this template this 183 | sample app available on Polymer 184 | website has been used. 185 |
186 |187 | All resources from the sample app have been copied to public directory in Play application. 188 | (We are looking forward to publishing polymer and web components as webjars in the future to use them as dependencies instead). 189 | Application is built from the post-list element which represents a list of posts. 190 | A single post is represented by the post-card element. 191 |
192 |193 | Polymer elements encapsulate template for view and script for behavior: 194 |
195 |
196 | <dom-module id="unique-id">
197 | <template>
198 | ...
199 | </template>
200 | </dom-module>
201 |
202 | <script>
203 | Polymer({
204 | is: 'unique-id',
205 | ...
206 | });
207 | </script>
208 |
209 |
210 |
211 | 212 | Use data binding in your markup to fill your template with data: 213 |
214 |
215 | <img src="[[item.avatar]]" width="70" height="70">
216 | <h2>[[item.username]]<h2>
217 |
218 |
219 |
220 |
225 | The core-ajax component in post-service element is used to call backend REST services from Polymer:
226 |
227 |
228 | <iron-ajax id="ajax"
229 | url="/api/posts"
230 | handle-as="json"
231 | last-response="{{posts}}">
232 | </iron-ajax>
233 |
234 |
235 |
236 |
237 |
238 | The posts element attribute is public and can be used by other elements:
239 |
240 |
241 | <post-service id="service" posts="{{posts}}" ...></post-service>
242 |
243 |
244 |
245 |
246 |
247 | To set favorite flag for a post you have to call the like REST URL.
248 | Specify the HTTP method, url, body and contentType:
249 |
250 |
251 | <iron-ajax id="likeCall"
252 | method="PATCH"
253 | content-type="application/json"
254 | handle-as="json"
255 | on-response="refresh">
256 | </iron-ajax>
257 |
258 |
259 |
260 |
261 | To make the call bind your parameters and invoke go method on the like-call iron-ajax component:
262 |
263 |
264 | setFavorite: function(id, isFavorite) {
265 | this.$.likeCall.url = '/api/post/' + id + '/like';
266 | this.$.likeCall.body = JSON.stringify({ "favorite": isFavorite });
267 | this.$.likeCall.generateRequest();
268 | }
269 |
270 |
271 |
272 |
276 | MongoDB and Play Framework are a great mix to implement backend web services, easy to integrate with contemporary UI frameworks.
277 |
279 | Thanks to Mongo you can store data without worrying about the schema and Play can expose this data very easily via REST API. 280 |
281 |
282 | It is a very powerful technology stack with the UI in cutting edge Polymer library and Web components.
283 |