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

1. Github Repo
https://github.com/
lporte/make-a-pokedex

2. Intro to APIs with the
Pokeapi!
Make a Pokedex with Node & Express
Lauryn Porte: @laurynaporte
Hannaha Lee: @hleetwin

3. Overview
● Introductions
● Workshop Objectives
● What are APIs?
● Q&A
● How are APIs used?
● Pokeapi Demo
● Pokedex exercises
● Learning materials

4. Introductions

5. About us?
● Software
developers at
Autodesk
● Pokemon
enthusiasts

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. Who are you?
● Early Career
Developers
● Students
● Designers
● Tech-curious

8. Workshop Objectives

9. Objectives
● Learn the fundamentals of APIs
● Learn how to make a HTTP GET request
● Customize your own Pokedex!

10. Project Demo

11. Our Pokedex!
https://codepen.io/Bidji/

12. What are APIs?

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. 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. TL;DR version
An API is like a waiter who…
● Takes a request
● Tells a system what you want
● Then returns response

16. Let's see some examples!

17. Look at the menu… but where’s my food?
A restaurant analogy...

18. Think of the waiter/tress as the API!
BROWSER DATA SOURCE
REQUEST
DATA

19. Real world example: Booking a flight on Kayak

20. How does that work?

21. How does that work?

22. How does that work?

23. How does that work?

24. Question break!
● Summary
● Other questions?

25. How do we use APIs?

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. 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. 1. REQUEST: GET Psyduck data!
POKEAPI
2. RESPONSE: Psyduck data from DB!
In our Pokedex...
POKEAPI

29. 1. REQUEST: GET Psyduck data!
POKEAPI
2. RESPONSE: Psyduck data from DB!
In our Pokedex...
POKEAPI
READing data
via HTTP GET
Request!

30. What is HTTP?

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. HTTP - TL;DR version
Hypertext transfer protocol.
Rules are for transferring data across the
web

33. 1. REQUEST: GET your web page
POKEAPI
2. RESPONSE:HTML/CSS/JS
HTTP
Google
HTTP GET Request!

34. URLs vs API Urls
http://pokeapi.co/api/v2/...

35. HTTP Verbs
POST: to add the new
data
GET: to fetch data
PUT: to edit existing
data
DELETE: to delete data

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. CHALLENGE: A wild GET Request appeared!

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. CHALLENGE: make a GET request to the Pokeapi!
curl request in your terminal in your browser
https://pokeapi.co/docsv2/

40. SOLUTION: make a GET request to the Pokeapi!

41. Used GET on Pokeapi - was very effective!

42. CHALLENGE: Grab Data From Your Response!

43. Github Repo
https://github.com/lport
e/make-a-pokedex
/tree/WWC-JSON-Challenge

44. JSON response from Pokeapi

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. Simple Pokedex
● Upload app/index.html
● Oh no! Our pokemon needs:
○ Name
○ Height
○ Weight

47. CHALLENGE : Grab JSON data
● Go to app/pokemonData.js
● Let’s grab:
1. Name
2. Height
3. Weight

48. Solution : Grab JSON data
1. Name: pokemon.name
2. Height: pokemon.height
3. Weight: pokemon.weight

49. We just grabbed JSON data - very cool!

50. CHALLENGE: Add a GET request to your Pokedex!

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. Github Repo
https://github.com/
lporte/make-a-pokedex
/tree/Get-Challenge

53. CONGRATS! YOU LEVELLED UP!!

54. Solution branch!
https://github.com/
lporte/make-a-pokedex
/tree/solution

55. More Questions? E-mail us!
CONTACT INFO:
lauryn.porte@autodesk.com
hannaha.lee@autodesk.com

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. 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. Thanks for coming!