diff --git a/common-content/en/module/js3/api/index.md b/common-content/en/module/js3/api/index.md new file mode 100644 index 000000000..09f101e87 --- /dev/null +++ b/common-content/en/module/js3/api/index.md @@ -0,0 +1,62 @@ ++++ +title = '🌐 API Request examples' +headless = true +time = 10 +facilitation = false +emoji= '🧩' +[objectives] +1="GET Data from API's" +2="POST Data to API's" ++++ + +Let's try more API interactions + +To get song details of all songs we can make a `GET` request to the songs page + +``` +const url = 'https://curriculum.codeyourfuture.io/api/songs'; + +fetch(url).then(response => response.json()) + .then(data => console.log('All songs:', data)); +``` + +Next, to retrieve details only for Adele's "Rolling in the Deep" we can send a `GET` request to the song's page + +This time, the URL can include the ID of the song we are interested in + +``` +const url = 'https://curriculum.codeyourfuture.io/api/song/5'; + +fetch(url).then(response => response.json()) + .then(data => console.log('Song No 5:', data)); +``` + +To update the popularity of a song, API's might use a `POST` method to the song's page with the song's ID included in the URL + +As a response, it will display the newly updated details +``` +const url = 'https://curriculum.codeyourfuture.io/api/song/3'; + +const updateRequest = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + popularity: 97 + }), +}; + +fetch(url, updateRequest) + .then(response => response.json()) + .then(updatedData => console.log('Updated Song No 3:', updatedData)); +``` + +Note please that, each API can utilize various types of {{}} +GET +POST +PUT +DELETE +PATCH
+and more... +{{
}} to perform CRUD operations on data, and they may require you to include a different type of `Authentication` methods for security reasons. \ No newline at end of file diff --git a/common-theme/layouts/_default/apijson.json b/common-theme/layouts/_default/apijson.json new file mode 100644 index 000000000..4c84079f8 --- /dev/null +++ b/common-theme/layouts/_default/apijson.json @@ -0,0 +1,6 @@ +{{- $jsonFile := readFile "data/songs.json" -}} +{{- $jsonData := (jsonify $jsonFile) -}} +{{- if $jsonData -}} + {{- $.Scratch.Add "json" $jsonData -}} +{{- end -}} +{{- printf "%s" ($.Scratch.Get "json") -}} diff --git a/org-cyf/config/issues-are-cached-and-incomplete/config.toml b/org-cyf/config/issues-are-cached-and-incomplete/config.toml index c9344d4d3..1301ccdb8 100644 --- a/org-cyf/config/issues-are-cached-and-incomplete/config.toml +++ b/org-cyf/config/issues-are-cached-and-incomplete/config.toml @@ -9,4 +9,4 @@ issuesorgapi = "https://api.github.com/repos/CodeYourFuture/" [caches.getjson] # Cache JSON responses because making fetches is slow when iterating. # This means updates to issues (or newly created ones) won't be picked up when rebuilding. -maxAge = "4h" +maxAge = "4h" \ No newline at end of file diff --git a/org-cyf/content/api/songs/index.md b/org-cyf/content/api/songs/index.md new file mode 100644 index 000000000..b7246c953 --- /dev/null +++ b/org-cyf/content/api/songs/index.md @@ -0,0 +1,5 @@ +--- +layout: "apijson" +outputs: +- json +--- diff --git a/org-cyf/content/js3/sprints/3/prep/index.md b/org-cyf/content/js3/sprints/3/prep/index.md index 86d6e862e..a42334973 100644 --- a/org-cyf/content/js3/sprints/3/prep/index.md +++ b/org-cyf/content/js3/sprints/3/prep/index.md @@ -25,6 +25,9 @@ src="module/js3/callbacks" name="Using .fetch()" src="module/js3/using-fetch" [[blocks]] +name="API usage" +src="module/js3/api" +[[blocks]] name="Product MVP and features" src="https://cyf-pd.netlify.app/blocks/define-your-products-mvp/readme/" +++ diff --git a/org-cyf/data/songs.json b/org-cyf/data/songs.json new file mode 100644 index 000000000..2e22dba30 --- /dev/null +++ b/org-cyf/data/songs.json @@ -0,0 +1,52 @@ +[ + { + "id": "1", + "title": "Shape of You", + "artist": "Ed Sheeran", + "album": "÷ (Divide)", + "genre": "Pop", + "release_date": "2017-01-06", + "duration_ms": 233712, + "popularity": 90 + }, + { + "id": "2", + "title": "Blinding Lights", + "artist": "The Weeknd", + "album": "After Hours", + "genre": "R&B", + "release_date": "2019-11-29", + "duration_ms": 200040, + "popularity": 95 + }, + { + "id": "3", + "title": "Bohemian Rhapsody", + "artist": "Queen", + "album": "A Night at the Opera", + "genre": "Rock", + "release_date": "1975-10-31", + "duration_ms": 354320, + "popularity": 92 + }, + { + "id": "4", + "title": "Dance Monkey", + "artist": "Tones and I", + "album": "The Kids Are Coming", + "genre": "Pop", + "release_date": "2019-08-09", + "duration_ms": 209754, + "popularity": 88 + }, + { + "id": "5", + "title": "Rolling in the Deep", + "artist": "Adele", + "album": "21", + "genre": "Pop", + "release_date": "2010-11-29", + "duration_ms": 228293, + "popularity": 89 + } +] \ No newline at end of file