· 6 years ago · Dec 07, 2019, 09:14 AM
1JS Applications Exam - The Trekking Zone SPA
2You are assigned to implement a Web application (SPA) using HTML5, JavaScript, AJAX, REST and JSON with cloud-based backend (Kinvey). Using libraries like jQuery, Handlebars and Sammy is allowed but is not obligatory. The app keeps users and treks. Guests should be able to register and login. Logged-in users should be able to view all treks, create treks, like treks, see details about a trek and logout. Logged-in users should also be able to edit or delete the treks they have created. There should also be a section where users can see only the treks they have created.
31. Create a Kinvey REST Service
4Register at Kinvey.com and create application to keep your data in the cloud.
5Create a collection called treks. Each trek has a location, date, description, organizer and likes (starting from 0).
6
7
8In order to be able to keep track of the likes of the trek, you need to give all users permission to edit this collection. So, go to the properties of the collection.
9
10Then go to the permissions and edit them to look like this:
11
122. Test the Kinvey REST Services
13Using Postman or other HTTP client tool (you can use Kinvey's built-in API Console), test the REST service end points:
14User Registration (Sign Up)
15POST https://baas.kinvey.com/user/app_id/
16
17Request headers Authorization: Basic base64(app_id:app_secret)
18Content-Type: application/json
19Request body {
20 "username": "testuser",
21 "password": "testuserpass890"
22}
23Response
24201 Created {
25 "_id": "59930c78a743e20c7d3fca77",
26 "username": "testuser",
27 "password": "testuserpass890"
28}
29Error response
30409 Conflict { "error": "UserAlreadyExists", "description": "This username is already taken. Please retry your request with a different username", "debug": "" }
31Error response
32401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
33
34The request needs "Basic" authentication. Use the Kinvey App Key and App Secret as credentials.
35
36User Login
37POST https://baas.kinvey.com/user/app_id/login
38
39Request headers Authorization: Basic base64(app_id:app_secret)
40Content-Type: application/json
41Request body {
42 "username": "testuser",
43 "password": "testuserpass890"
44}
45Response
46200 OK {
47 "_id": "59930c78a743e20c7d3fca77",
48 "username": "testuser"
49 "_kmd": {
50 "authtoken":"8e6471bc-3712-4cfb-b92e-50e62a0c80….Duj5fHdM /7XHIe6KdY="
51 …
52 },
53 …
54}
55Error response
56401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
57Successful login returns an authtoken which is later used to authenticate the CRUD operations.
58User Logout
59POST https://baas.kinvey.com/user/app_id/_logout
60
61Request headers Authorization: Kinvey authtoken
62Response
63204 No Content
64Error response
65401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
66To logout, you need to provide the authtoken given by login/register as "Kinvey" authorization header.
67List All Treks
68GET https://baas.kinvey.com/appdata/app_id/treks
69
70Request headers Authorization: Kinvey authtoken
71Response
72200 OK [{
73 "name":"Everest Base Camp",
74 "dateTime":"28.08.2020",
75 "description":"Experience beautiful...",
76 "imageURL":"https://....",
77 "likes":"0",
78 "organizer": "peter.georgiev"
79 "_acl":
80 {
81 "creator":"5bfd4674682ae23931b4f91c"
82 },
83 "_kmd":
84 {
85 "lmt":"2018-11-28T15:25:24.521Z",
86 "ect":"2018-11-28T14:55:00.958Z"
87 }
88}, …]
89Error response
90401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
91
92Create Trek
93POST https://baas.kinvey.com/appdata/app_id/treks
94
95Request headers Authorization: Kinvey authtoken
96Content-Type: application/json
97Request body {
98 "name": "Everest Base Camp",
99 "dateTime": "28.08.2020",
100 "description": "Experience beautiful...",
101 "imageURL": "https://...",
102 "likes":0,
103 "organizer": "peter.georgiev"
104}
105Response
106201 Created {
107 "name": "Everest Base Camp",
108 "dateTime": "28.08.2020",
109 "description": "Experience beautiful...",
110 "imageURL": "https://...",
111 "likes":0,
112 "organizer": "peter.georgiev"
113 "_acl": {
114 "creator": "5bfd4674682ae23931b4f91c"
115 },
116 "_kmd": {
117 "lmt": "2018-11-28T15:39:58.801Z",
118 "ect": "2018-11-28T15:39:58.801Z"
119 },
120 "_id": "5bfeb6ce682ae23931bf7d26"
121}
122Error response
123401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
124
125Edit Trek
126PUT https://baas.kinvey.com/appdata/app_id/treks/trek_id
127
128Request headers Authorization: Kinvey authtoken
129Content-Type: application/json
130Request body {
131 "name": "Everest Base Camp",
132 "dateTime": "28.08.2020",
133 "description": "Experience beautiful...",
134 "imageURL": "https://...",
135 "likes":0,
136 "organizer": "peter.georgiev"
137}
138Response
139200 Ok {
140 "_id": "59931398996ab5127d2a84d1",
141 "name": "Everest Base Camp",
142 "dateTime": "28.08.2020",
143 "description": "Experience beautiful...",
144 "imageURL": "https://...",
145 "likes":0,
146 "organizer": "peter.georgiev"
147}
148Error response
149401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
150
151Delete Trek
152DELETE https://baas.kinvey.com/appdata/app_id/treks/trek_id
153
154Request headers Authorization: Kinvey authtoken
155Response
156200 OK {
157 "count": 1
158}
159Error response
160404 Not Found { "error": "EntityNotFound", "description": "This entity not found in the collection", "debug": "" }
161Error response
162401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
163
164Like Trek
165PUT https://baas.kinvey.com/appdata/app_id/treks/trek_id
166
167Request headers Authorization: Kinvey authtoken
168Content-Type: application/json
169Request body {
170 "name": "Everest Base Camp",
171 "dateTime": "28.08.2020",
172 "description": "Experience beautiful...",
173 "imageURL": "https://...",
174 "likes":0,
175 "organizer": "peter.georgiev"
176}
177Response
178200 Ok {
179 "name": "Everest Base Camp",
180 "dateTime": "28.08.2020",
181 "description": "Experience beautiful...",
182 "imageURL": "https://...",
183 "likes":0,
184 "organizer": "peter.georgiev"
185 "_id": "5bfeb6ce682ae23931bf7d26",
186 "_acl": {
187 "creator": "5bfd4674682ae23931b4f91c"
188 },
189 "_kmd": {
190 "lmt": "2018-11-28T15:45:13.760Z",
191 "ect": "2018-11-28T15:39:58.801Z"
192 }
193}
194Error response
195401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
196
197My Treks
198GET https://baas.kinvey.com/appdata/app_id/treks?query={"_acl.creator":"${user_id}"}
199
200Request headers Authorization: Kinvey authtoken
201Response
202200 OK [{
203 "name": "Everest Base Camp",
204 "dateTime": "28.08.2020",
205 "description": "Experience beautiful...",
206 "imageURL": "https://...",
207 "likes":0,
208 "organizer": "peter.georgiev"
209 "_acl":
210 {
211 "creator":"5bfd4674682ae23931b4f91c"
212 },
213 "_kmd":
214 {
215 "lmt":"2018-11-28T15:25:24.521Z",
216 "ect":"2018-11-28T14:55:00.958Z"
217 }
218}, …]
219Error response
220401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
221
2223. The Trekking Zone - HTML and CSS
223You have been given the web design of the application as HTML + CSS files.
224• Initially all views and forms are shown by the HTML. Your application may hide/show elements by CSS (display: none) or delete/reattach from and to the DOM all unneeded elements, or just display the views it needs to display.
225• You may render the views/forms/components with jQuery or Handlebars.
226Important: Don’t change the elements’ class names and ids. Don’t rename form fields/link names/ids. You are allowed to add data attributes to any elements. You may modify href attributes of links and add action/method attributes to forms, to allow the use of a routing library.
2274. The Trekking Zone - Client-Side Web Application
228Design and implement a client-side front-end app (SPA) for managing treks. Implement the functionality described below.
229Navigation Bar (5 pts)
230Navigation links should correctly change the current page (view).
231• Clicking on the links in the NavBar should display the view behind the link (views are represented as sections in the HTML code).
232• Your application may hide/show elements by CSS (display: none) or delete/reattach from and to the DOM all unneeded elements, or just display the views it needs to display.
233• The Logged-in user navbar should contain the following elements: Icon (icon.jpg) which is a link to the Home page, [Request Trek], the user caption ("{username}"), [Logout].
234o The user caption should be a link that navigates to the currently logged in user’s profile.
235
236• The guest users navbar should contain the following elements: : Icon (icon.jpg) which is a link to the Home page and [Login].
237
238
239
240Home Page (Guest) (5 pts)
241The initial page (view) should display the guest navigation bar ("Home" (icon) and "Login") + Guest Home Page + Footer.
242
243
244Register User (5 pts)
245By given username and password, the app should register a new user in the system.
246• (Bonus) The following validations should be made:
247o The username should be at least 3 characters long
248o The password should be at least 6 characters long
249o The repeat password should be equal to the password
250• (Bonus) After a successful registration, a notification message "Successfully registered user." should be displayed and the app should redirect to the home page with the right navbar.
251• In case of error (eg. invalid username/password), an appropriate error message should be displayed, and the user should be able to try to register again.
252• Keep the user local data in the browser's local storage.
253Register once and create/like awesome treks!
254
255
256
257
258Login User (5 pts)
259By given username and password, the app should login an existing user.
260• (Bonus) After a successful login, a notification message "Successfully logged user." should be shown and the user home screen should be displayed.
261• In case of error, an appropriate error message should be displayed and the user should be able to fill in the login form again.
262• Keep the user local data in the browser's local storage.
263• Clear all input fields after a successful login.
264You are one step away from awesome treks!
265
266
267
268Logout (5 pts)
269Successfully logged in users should be able to logout from the app.
270• (Bonus) After a successful logout, a notification message "Logout successful." should be displayed and the anonymous screen should be shown
271• The "logout" REST service at the back-end must be called at logout
272• All local information in the browser (user local data) about the current user should be deleted
273
274
275
276
277Home Page (30 pts)
278Successfully logged-in users should be welcomed by the Home page. They should be able to see all created (organized) treks.
279 If there are NO such treks, the following view should be displayed:
280
281
282[Create the first trek?] button should refer to the request trek form
283Request Trek (10 pts)
284Logged-in users should be able to Create (organize) treks.
285Clicking the [Request Trek] link in the NavBar should display the Request Trek page.
286• (Bonus) The form should contain the following validations:
287o The trek name should be at least 6 characters long.
288o The description should be at least 10 characters long.
289o After a successful trek creation, a notification message "Trek created successfully." should be displayed and the Home page should be shown.
290• By default, every newly created trek must have additional information:
291o Organizer: string representing the current trek creator;
292o Likes: number starting from 0;
293• The inputs fields in the form should be cleared.
294• The newly organizer trek should be stored in the Kinvey collection "treks".
295
296
297
298Details Trek (10 pts)
299Logged-in users should be able to view details about treks.
300Clicking the [More] link in of a particular trek should display the Trek Details page.
301• If the currently logged-in user is the organizer of the trek, the [Edit] and [Close] buttons should be set to visible, otherwise there should be only 1 button [Like].
302
303
304Edit Trek (10 pts)
305Logged-in users should be able to edit their own treks.
306Clicking the [Edit the trek] link of a particular trek on the Trek Details page should display the Edit Trek page:
307
308• (Bonus) After a successful edit, a notification message "Trek edited successfully." should be displayed, and the user should be redirected to the Home page.
309
310Like Trek (10 pts)
311Logged-in users should be able to Like treks, organized by other users.
312NOTE: A user should NOT be able to like a trek, organized by himself.
313Clicking the [Like the trek] link of an trek (on the Trek Details page) should increase the property for the likes the corresponding trek.
314Users can like treks multiple times.
315• (Bonus) After successfully liking a trek, a notification message "You liked the trek successfully." should be displayed.
316
317Delete Trek (5 pts)
318Logged-in users should be able to delete their treks.
319Clicking the [Close the trek] link of an trek (on the Trek Details page) should delete the trek.
320• (Bonus) After successful trek delete a notification message "You closed the trek successfully." should be displayed
321• After successful trek delete you should show the Home page
322
323(BONUS) Notifications (5 pts)
324The application should notify the users about the result of their actions.
325• In case of a successful action, a notification message (green) should be shown, which disappears automatically after 5 seconds or manually when the user clicks it.
326
327• In case of error, an error notification message (red) should be shown, which disappears on user click.
328
329• During the AJAX calls a loading notification message (blue) should be shown. It should disappear automatically as soon as the AJAX call is completed.
330
331• NOTE: You get all the points if all the notifications have the exact content as described in each section above.
332
333(BONUS) User Profile (5 pts)
334Logged-in users should be able to view their profile.
335Clicking the user caption ({USERNAME}) link on the navigation bar should display the
336User Profile page:
337• Each user profile should display user info - profile picture, username and organization information
338o "Wished {count} treks =)"
339o The names of all treks which the user has organized.
340
341• In case of no treks, display "No treks".
342
343(BONUS) Sorting: (5 pts)
344The treks in the home page (for registered users), should be sorted in descending order by likes.
345(BONUS) Validations: (5 pts)
3465. Submitting Your Solution
347Exclude the node_modules folder and ZIP your project. Upload the archive to Judge system.
348https://judge.softuni.bg/Contests/Compete/Index/1645#0