Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make your own Pokédex with the Pokéapi & Node/Express!

1,748 views

Published on

Code is cool. In this presentation, we share how to build your own Pokédex with the Pokéapi. Fun way to use javascript and learn about APIs. Forge.Autodesk.com

Published in: Technology
  • Discover A Simple Holistic System For Curing Acne Once And For All using 100% Guaranteed All-Natural Method. Click Here  http://t.cn/AiWGkfA8
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you just broke up with your Ex,you have to follow these steps to get her back or risk ruining your chances. Click here ■■■ http://t.cn/R50e5nn
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Make your own Pokédex with the Pokéapi & Node/Express!

  1. 1. Github Repo https://github.com/ lporte/make-a-pokedex
  2. 2. Intro to APIs with the Pokeapi! Make a Pokedex with Node & Express Lauryn Porte: @laurynaporte Hannaha Lee: @hleetwin
  3. 3. Overview ● Introductions ● Workshop Objectives ● What are APIs? ● Q&A ● How are APIs used? ● Pokeapi Demo ● Pokedex exercises ● Learning materials
  4. 4. Introductions
  5. 5. About us? ● Software developers at Autodesk ● Pokemon enthusiasts
  6. 6. We make software for people who make things. If you’ve ever driven a high-performance car, admired a towering skyscraper, used a smartphone, or watched a great film, chances are you’ve experienced what millions of Autodesk customers are doing with our software. We believe that anyone can make literally anything they imagine when equipped with the right tools. What is Autodesk?
  7. 7. Who are you? ● Early Career Developers ● Students ● Designers ● Tech-curious
  8. 8. Workshop Objectives
  9. 9. Objectives ● Learn the fundamentals of APIs ● Learn how to make a HTTP GET request ● Customize your own Pokedex!
  10. 10. Project Demo
  11. 11. Our Pokedex! https://codepen.io/Bidji/
  12. 12. What are APIs?
  13. 13. Data and connectivity • How do different devices and applications connect to each other? • Make a reservation • Place an order • Book a flight APIs!!!!!
  14. 14. API Definition An application program interface (API) is a set of routines, protocols, and tools for building software applications. An API specifies how software components should interact.
  15. 15. TL;DR version An API is like a waiter who… ● Takes a request ● Tells a system what you want ● Then returns response
  16. 16. Let's see some examples!
  17. 17. Look at the menu… but where’s my food? A restaurant analogy...
  18. 18. Think of the waiter/tress as the API! BROWSER DATA SOURCE REQUEST DATA
  19. 19. Real world example: Booking a flight on Kayak
  20. 20. How does that work?
  21. 21. How does that work?
  22. 22. How does that work?
  23. 23. How does that work?
  24. 24. Question break! ● Summary ● Other questions?
  25. 25. How do we use APIs?
  26. 26. Back at the Restaurant... We can request that the waiter: ● Create an order of french fries ● Read all the specials ● Update our order to include berries ● Delete our order (because diet reasons)
  27. 27. Back at the Restaurant... We can request that the waiter: ● Create an order of french fries ● Read all the specials ● Update our order to include berries ● Delete our order (because diet reasons)
  28. 28. 1. REQUEST: GET Psyduck data! POKEAPI 2. RESPONSE: Psyduck data from DB! In our Pokedex... POKEAPI
  29. 29. 1. REQUEST: GET Psyduck data! POKEAPI 2. RESPONSE: Psyduck data from DB! In our Pokedex... POKEAPI READing data via HTTP GET Request!
  30. 30. What is HTTP?
  31. 31. HTTP Definition The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers (https://www.w3.org/Protocols/rfc2616/rfc2616.html)
  32. 32. HTTP - TL;DR version Hypertext transfer protocol. Rules are for transferring data across the web
  33. 33. 1. REQUEST: GET your web page POKEAPI 2. RESPONSE:HTML/CSS/JS HTTP Google HTTP GET Request!
  34. 34. URLs vs API Urls http://pokeapi.co/api/v2/...
  35. 35. HTTP Verbs POST: to add the new data GET: to fetch data PUT: to edit existing data DELETE: to delete data
  36. 36. HTTP Verbs CRUD Action POST: to add the new data GET: to fetch data PUT: to edit existing data DELETE: to delete data CREATE READ UPDATE DESTROY
  37. 37. CHALLENGE: A wild GET Request appeared!
  38. 38. Check out the Docs! https://pokeapi.co/docsv2/ ● What are the API's capabilities? ● How are requests formed? ● What is the "shape" of the response data?
  39. 39. CHALLENGE: make a GET request to the Pokeapi! curl request in your terminal in your browser https://pokeapi.co/docsv2/
  40. 40. SOLUTION: make a GET request to the Pokeapi!
  41. 41. Used GET on Pokeapi - was very effective!
  42. 42. CHALLENGE: Grab Data From Your Response!
  43. 43. Github Repo https://github.com/lport e/make-a-pokedex /tree/WWC-JSON-Challenge
  44. 44. JSON response from Pokeapi
  45. 45. JSON Overview ● parameter and value pairs ● colon separates parameter from value ● comma separates each pair ● access properties with dot notation Ex. pokeObj.id
  46. 46. Simple Pokedex ● Upload app/index.html ● Oh no! Our pokemon needs: ○ Name ○ Height ○ Weight
  47. 47. CHALLENGE : Grab JSON data ● Go to app/pokemonData.js ● Let’s grab: 1. Name 2. Height 3. Weight
  48. 48. Solution : Grab JSON data 1. Name: pokemon.name 2. Height: pokemon.height 3. Weight: pokemon.weight
  49. 49. We just grabbed JSON data - very cool!
  50. 50. CHALLENGE: Add a GET request to your Pokedex!
  51. 51. What tools are we using? ● Node/Express ○ How we are running JS in our application ● Handlebars ○ How we are displaying data in the view ● PokeAPI ○ The API we will be consuming
  52. 52. Github Repo https://github.com/ lporte/make-a-pokedex /tree/Get-Challenge
  53. 53. CONGRATS! YOU LEVELLED UP!!
  54. 54. Solution branch! https://github.com/ lporte/make-a-pokedex /tree/solution
  55. 55. More Questions? E-mail us! CONTACT INFO: lauryn.porte@autodesk.com hannaha.lee@autodesk.com
  56. 56. Resources APIs SF OpenData Registered Business Locations API (link) SF OpenData Recreation and Park Department Info (link) Google Maps API (link) Twitter API (link) Learning Learn you Node (link) Nodeschool (link) Express Tutorial (link) Handlebars-Express (link) curl tutorial (link)
  57. 57. GLOSSARY HTTP(HyperText Transfer Protocol: The rules for transmitting data across the web GET request: HTTP verb that tells the server to look up the data API(Application Program Interface): messenger that takes requests and tells a system what you want to do, then returns a response back to you JSON (JavaScript Object Notation) is a lightweight data-interchange format Node: Server-side solution for running JavaScript Express: Framework for Node Handlebars: Front end templating engine
  58. 58. Thanks for coming!

×