English subtitles

← Using The Web UI - Developing Scalable Apps with Java

Get Embed Code
4 Languages

Showing Revision 5 created 05/24/2016 by Udacity Robot.

  1. So far, you've used the APIs Explorer to investigate and test the functions in
  2. your applications. You've got the getProfile, the
  3. safeProfile. However, Conference Center application includes a full
  4. web UI. Each of the pages in the web UI, send calls to the endpoints
  5. API on the back end. As you implement the back end functionality, the web pages
  6. in the app will start to work. Right now,
  7. they don't all work. For example, if you go to
  8. Show Conferences, it's not going to find any conferences.
  9. It's because the implementation, because you haven't written the code
  10. to find conferences. But in this lesson we implemented
  11. the code to get and set profiles. So the My
  12. Profile page now works. So let's see what happens,
  13. if I change my profile. Let me change my t-shirt
  14. size to, very small, extra small. Change
  15. my display name to Jocelyn B. I'll Update my profile. And
  16. the profile has been updated, excellent. When I click the Update Profile
  17. button, what happens is that this web page in behind the scenes is sending a
  18. call off to the saveProfile endpoint function
  19. that you just implemented. The goal of this
  20. course is to help you learn how to
  21. develop App Engine applications, not to teach you JavaScript.
  22. However, I do want to point out the code
  23. that makes the call to getProfile and to saveProfile.
  24. So, now here we are in Eclipse. And you'll find the code for the webpages or the
  25. web UI under SRC, Web app, and you'll see
  26. there's the CSS folder, the fonts folder, the IMG,
  27. there's index.html, and there's a JavaScript folder
  28. JS. And then there's this thing called partials,
  29. which is the HTML pages. What I want to look at first is controllers.js, because
  30. this has the code that calls the
  31. getProfile and the saveProfile methods. So let's look
  32. at getProfile. So here's the code that
  33. send the call to the getProfile endpoint function.
  34. And you see here, it's gapi.client to
  35. invoke the client library. And then, conference
  36. is the name of the API. And then, getProfile is the method name. And again,
  37. we execute. And then, here's the code to call when the request is successfully
  38. executed. And in this case, you can see that the code's just right here in line.
  39. It's not in a separate function. That this is the callback to call when the call
  40. to getProfile succeeds. Let's look at saveProfile. I'll search for it.
  41. And here it is. And again, I just wanted to point out, here's the call to
  42. gapi.client, or gapi.client. And then conference is the name of the endpoints.
  43. Then saveProfile is the method to call. And in this case we're
  44. passing at one argument. And then we call the execute, to execute the
  45. request. And again, here's the call. Here's. The code to
  46. execute in the call back that's called, when saveProfile
  47. completes successfully. If saveProfile completes successfully.
  48. So that's all I really wanted to point out here. I'm not going to go into the
  49. rest of the UI code in detail. I just wanted to show you the hook where the
  50. JavaScript issues the call to the endpoint functions.
  51. As you go through the course, you're going to be
  52. implementing the endpoint functions. And I wanted you
  53. to know how they get called from the UI.