YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← 03-32 Uso de la UI de Web

03-32 Uso de la UI de Web

Get Embed Code
4 Languages

Showing Revision 7 created 09/29/2014 by Fran Ontanaya.

  1. Hasta ahora, has usado
    el Explorador de APIs
  2. para investigar y probar
    las funciones en tus aplicaciones.
  3. Tienes la getProfile,
    la saveProfile.
  4. Sin embargo, la aplicación
    Conference Center incluye
  5. una interfaz de usuario web (UI) completa.
  6. Cada una de las páginas de la UI de web,
    envía llamadas a los endpoints API
  7. en el back end.
  8. Al implementar
    la funcionalidad de back end,
  9. las páginas web en la app
    comenzarán a funcionar.
  10. En este momento, no todas funcionan.
    Por ejemplo, si vas a Show Conferences,
  11. no vas a encontrar ninguna conferencia.
  12. Es por la implementación,
    puesto que no has escrito el código
  13. para encontrar conferencias.
    Pero en esta lección
  14. hemos implementado el código
    para obtener y establecer perfiles.
  15. Así que la página Mi perfil
    ahora funciona.
  16. Veamos qué sucede,
    si cambio mi perfil.
  17. Cambiaré el tamaño de camiseta a
    muy pequeño, extra pequeño.
  18. Cambio mi nombre a Jocelyn B.
    Voy a actualizar mi perfil.
  19. Y el perfil ha sido actualizado.
    Excelente.
  20. Cuando hago clic
    en el botón Actualizar Perfil,
  21. lo que pasa es que esta página web
  22. detrás de escena está enviando una llamada
    a la función de endpoint saveProfile
  23. que acabas de implementar.
  24. El objetivo de este curso es
    ayudarte a aprender
  25. cómo desarrollar aplicaciones
    de App Engine, no enseñarte JavaScript.
  26. Sin embargo, sí quiero destacar
  27. el código que realiza la llamada
    a getProfile y a saveProfile.
  28. Ahora aquí estamos en Eclipse.
    Y encontrarás el código
  29. para las páginas web o la UI web
    bajo SRC, Web app, y verás allí
  30. la carpeta CSS,
    la carpeta de fuentes, el IMG,
  31. está el index.html,
    y está la carpeta JavaScript JS.
  32. Y está eso llamado partials,
    que es de las páginas HTML.
  33. Lo que quiero mirar primero
    es controllers.js, porque tiene
  34. el código que llama a los métodos
    getProfile y saveProfile.
  35. Veamos a getProfile.
  36. Aquí está el código que envía la llamada
    a la función de endpoint getProfile.
  37. Y aquí está gapi.client
    para invocar la biblioteca cliente.
  38. Y luego, conference
    es el nombre de la API.
  39. Y luego, getProfile
    es el nombre del método.
  40. Y de nuevo, ejecutamos.
    Y aquí está el código a llamar
  41. cuando la solicitud se ejecuta con éxito.
  42. Y en este caso puedes ver
    que el código está justo aquí, en línea.
  43. No está en una función separada.
    Este es el callback a llamar
  44. cuando la llamada a getProfile
    tiene éxito.
  45. Veamos a saveProfile.
    Voy a buscarlo.
  46. Y aquí está. Y de nuevo,
    solo quería señalar,
  47. que aquí está la llamada a gapi.client,
    o gapi.client.
  48. Y luego conferencia es el nombre
    de los endpoints.
  49. Entonces saveProfile
    es el método a llamar.
  50. En este caso
    estamos pasando un argumento.
  51. Y entonces llamamos a execute,
    para ejecutar la solicitud.
  52. Y de nuevo, aquí está la llamada.
    Aquí está el código
  53. a ejecutar en el callback
    que se llama, cuando saveProfile
  54. finaliza correctamente.
    Si saveProfile finaliza correctamente.
  55. Así que eso es todo
    lo que realmente quería señalar aquí.
  56. No voy a entrar en el resto del código
    de interfaz de usuario en detalle.
  57. Solo quería mostrarte
    el gancho donde el JavaScript
  58. realiza la llamada
    a las funciones de endpoint.
  59. A medida que transcurra el curso,
    implementarás las funciones de endpoint.
  60. Y quería que supieras cómo llamarlas
    desde la interfaz de usuario.