API tools faq
paste
Advertisement
Guest User

aSD

a guest
Dec 7th, 2019
283
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.08 KB | None | 0 0
raw download clone embed print report
  1. JS Applications Exam - The Trekking Zone SPA
  2. You 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.
  3. 1. Create a Kinvey REST Service
  4. Register at Kinvey.com and create application to keep your data in the cloud.
  5. Create a collection called treks. Each trek has a location, date, description, organizer and likes (starting from 0).
  6.  
  7.  
  8. In 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.  
  10. Then go to the permissions and edit them to look like this:
  11.  
  12. 2. Test the Kinvey REST Services
  13. Using Postman or other HTTP client tool (you can use Kinvey's built-in API Console), test the REST service end points:
  14. User Registration (Sign Up)
  15. POST https://baas.kinvey.com/user/app_id/
  16.  
  17. Request headers Authorization: Basic base64(app_id:app_secret)
  18. Content-Type: application/json
  19. Request body {
  20. "username": "testuser",
  21. "password": "testuserpass890"
  22. }
  23. Response
  24. 201 Created {
  25. "_id": "59930c78a743e20c7d3fca77",
  26. "username": "testuser",
  27. "password": "testuserpass890"
  28. }
  29. Error response
  30. 409 Conflict { "error": "UserAlreadyExists", "description": "This username is already taken. Please retry your request with a different username", "debug": "" }
  31. Error response
  32. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  33.  
  34. The request needs "Basic" authentication. Use the Kinvey App Key and App Secret as credentials.
  35.  
  36. User Login
  37. POST https://baas.kinvey.com/user/app_id/login
  38.  
  39. Request headers Authorization: Basic base64(app_id:app_secret)
  40. Content-Type: application/json
  41. Request body {
  42. "username": "testuser",
  43. "password": "testuserpass890"
  44. }
  45. Response
  46. 200 OK {
  47. "_id": "59930c78a743e20c7d3fca77",
  48. "username": "testuser"
  49. "_kmd": {
  50. "authtoken":"8e6471bc-3712-4cfb-b92e-50e62a0c80….Duj5fHdM /7XHIe6KdY="
  51. …
  52. },
  53. …
  54. }
  55. Error response
  56. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  57. Successful login returns an authtoken which is later used to authenticate the CRUD operations.
  58. User Logout
  59. POST https://baas.kinvey.com/user/app_id/_logout
  60.  
  61. Request headers Authorization: Kinvey authtoken
  62. Response
  63. 204 No Content
  64. Error response
  65. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  66. To logout, you need to provide the authtoken given by login/register as "Kinvey" authorization header.
  67. List All Treks
  68. GET https://baas.kinvey.com/appdata/app_id/treks
  69.  
  70. Request headers Authorization: Kinvey authtoken
  71. Response
  72. 200 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. }, …]
  89. Error response
  90. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  91.  
  92. Create Trek
  93. POST https://baas.kinvey.com/appdata/app_id/treks
  94.  
  95. Request headers Authorization: Kinvey authtoken
  96. Content-Type: application/json
  97. Request 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. }
  105. Response
  106. 201 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. }
  122. Error response
  123. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  124.  
  125. Edit Trek
  126. PUT https://baas.kinvey.com/appdata/app_id/treks/trek_id
  127.  
  128. Request headers Authorization: Kinvey authtoken
  129. Content-Type: application/json
  130. Request 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. }
  138. Response
  139. 200 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. }
  148. Error response
  149. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  150.  
  151. Delete Trek
  152. DELETE https://baas.kinvey.com/appdata/app_id/treks/trek_id
  153.  
  154. Request headers Authorization: Kinvey authtoken
  155. Response
  156. 200 OK {
  157. "count": 1
  158. }
  159. Error response
  160. 404 Not Found { "error": "EntityNotFound", "description": "This entity not found in the collection", "debug": "" }
  161. Error response
  162. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  163.  
  164. Like Trek
  165. PUT https://baas.kinvey.com/appdata/app_id/treks/trek_id
  166.  
  167. Request headers Authorization: Kinvey authtoken
  168. Content-Type: application/json
  169. Request 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. }
  177. Response
  178. 200 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. }
  194. Error response
  195. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  196.  
  197. My Treks
  198. GET https://baas.kinvey.com/appdata/app_id/treks?query={"_acl.creator":"${user_id}"}
  199.  
  200. Request headers Authorization: Kinvey authtoken
  201. Response
  202. 200 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. }, …]
  219. Error response
  220. 401 Unauthorized { "error": "InvalidCredentials", "description": "Invalid credentials. Please retry your request with correct credentials", "debug": "" }
  221.  
  222. 3. The Trekking Zone - HTML and CSS
  223. You 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.
  226. Important: 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.
  227. 4. The Trekking Zone - Client-Side Web Application
  228. Design and implement a client-side front-end app (SPA) for managing treks. Implement the functionality described below.
  229. Navigation Bar (5 pts)
  230. Navigation 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].
  234. o 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.  
  240. Home Page (Guest) (5 pts)
  241. The initial page (view) should display the guest navigation bar ("Home" (icon) and "Login") + Guest Home Page + Footer.
  242.  
  243.  
  244. Register User (5 pts)
  245. By given username and password, the app should register a new user in the system.
  246. • (Bonus) The following validations should be made:
  247. o The username should be at least 3 characters long
  248. o The password should be at least 6 characters long
  249. o 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.
  253. Register once and create/like awesome treks!
  254.  
  255.  
  256.  
  257.  
  258. Login User (5 pts)
  259. By 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.
  264. You are one step away from awesome treks!
  265.  
  266.  
  267.  
  268. Logout (5 pts)
  269. Successfully 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.  
  277. Home Page (30 pts)
  278. Successfully 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
  283. Request Trek (10 pts)
  284. Logged-in users should be able to Create (organize) treks.
  285. Clicking the [Request Trek] link in the NavBar should display the Request Trek page.
  286. • (Bonus) The form should contain the following validations:
  287. o The trek name should be at least 6 characters long.
  288. o The description should be at least 10 characters long.
  289. o 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:
  291. o Organizer: string representing the current trek creator;
  292. o 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.  
  298. Details Trek (10 pts)
  299. Logged-in users should be able to view details about treks.
  300. Clicking 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.  
  304. Edit Trek (10 pts)
  305. Logged-in users should be able to edit their own treks.
  306. Clicking 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.  
  310. Like Trek (10 pts)
  311. Logged-in users should be able to Like treks, organized by other users.
  312. NOTE: A user should NOT be able to like a trek, organized by himself.
  313. Clicking the [Like the trek] link of an trek (on the Trek Details page) should increase the property for the likes the corresponding trek.
  314. Users can like treks multiple times.
  315. • (Bonus) After successfully liking a trek, a notification message "You liked the trek successfully." should be displayed.
  316.  
  317. Delete Trek (5 pts)
  318. Logged-in users should be able to delete their treks.
  319. Clicking 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)
  324. The 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)
  334. Logged-in users should be able to view their profile.
  335. Clicking the user caption ({USERNAME}) link on the navigation bar should display the
  336. User Profile page:
  337. • Each user profile should display user info - profile picture, username and organization information
  338. o "Wished {count} treks =)"
  339. o 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)
  344. The treks in the home page (for registered users), should be sorted in descending order by likes.
  345. (BONUS) Validations: (5 pts)
  346. 5. Submitting Your Solution
  347. Exclude the node_modules folder and ZIP your project. Upload the archive to Judge system.
  348. https://judge.softuni.bg/Contests/Compete/Index/1645#0
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!