replace bbc tutorial with Vonage

KimberleyCook · KimberleyCook · commit 8b1879e106d5 · 2021-04-27T15:42:05.000+01:00
diff --git a/js/lesson4/tutorial.md b/js/lesson4/tutorial.md
@@ -228,213 +228,17 @@ Well done, you've finished! For a bonus, switch your `getGithubInfo` method to r
 > Coach... explain the difference between synchronous and asynchronous requests. There's a good explanation on [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests)
 
 
-## ~~Exercise 2 - BBC's tomorrow's TV schedule~~
+## Exercise 2 - Vonage API
 
-![](https://cdn0.iconfinder.com/data/icons/shift-free/32/Error-128.png)
+<img src="./assets/images/VonageLogo.png" alt="Vonage Logo" width="250px">
 
-**Part 2 of this exercise is no longer possible as the API that it uses has been taken down by the BBC.**  
-**Sorry, we're working on fixing the exercise!**
+In the following Vonage API tutorial you will create an account, and send yourself an SMS. Just a heads up, it will involve you creating an account and giving your phone number.
 
-[Download](https://gist.github.com/despo/05cab2f0b38bc02318e7/download) the exercise files or clone them directly from github `git clone https://gist.github.com/05cab2f0b38bc02318e7.git`
+When signing up select NodeJS as you're language. NodeJS is a runtine enviroment that allows you to run JavaScript on the server than in the browser which is what you would've been doing if you've followed our first 2 tutorials.
 
-For the second exercise, we will build an application that retrieves tomorrow's TV schedule for each genre using BBC's API.
+(Send yourself an SMS with Vonage)[https://developer.nexmo.com/?utm_source=codebar&utm_campaign=Events&utm_medium=bitly&utm_source=Events]
 
-### What we will be doing:
 
-1. Retrieve and render available genres using `http://www.bbc.co.uk/tv/programmes/genres.json`
-
-2. Write a function that retrieves tomorrow's TV schedule using a genre `http://www.bbc.co.uk/tv/programmes/genres/<genre>/schedules/tomorrow.json`
-
-3. Write a function that displays each programme
-
-4. **Bonus** Retrieve all upcoming episodes of a programme
-
-### Request using jQuery
-
-This time, let's use jQuery's `ajax()` method. Things are a bit easier when using jQuery as we can create different code blocks that handle successful or failed requests.
-
-Also, jQuery isolates us from the differences between browser implementations of AJAX calls (for example, if we wanted to make the previous AJAX call work in Internet Explorer,  we will have to write [a much longer method](http://www.tutorialspoint.com/ajax/ajax_browser_support.htm)!)
-
-```js
-$.ajax({
-  url: request_url,
-  dataType: 'json',
-  beforeSend: function() {
-   // do something before running the request
-  }
-}).done(function(data) {
-  // process data
-}).fail(function() {
-  // code
-}).always(function() {
-  // code that runs regardless of request succeeding or failing
-});
-```
-
-`datatype` defines the type of result we will be getting back. This avoids us having to parse the response to JSON.
-
-`beforeSend` can be used if we need to perform something before running the request.
-
-`.done()` handles a response that returns a success status code
-
-`.fail()` is called when the request fails
-
-
-## Retrieving and displaying all available genres
-
-Write a function `retrieveGenres()` that does an AJAX call to the API.
-
-```javascript
-function retrieveGenres() {
-  // AJAX call using jQuery that retrieve and process the result
-}
-```
-> Try logging the resulted data and have a look in the console to see and explore the created objects
-
-> `<key>` is the genre format we need to retrieve results from the API
-
-> You can use `<title>` to display a humanly readable format of the Genre
-
-As you can see from the console, the resulting objects are returned inside an Array. We want to iterate over the list using the native Array `forEach( )` function and add each item to the `#genres` list, as a **list item**. As we need to have access to the `key` as well, we can set that as the list item's `id`.
-
-Now that we have all the available genres, we can move on to making calls to the API using the genre to retrieve tomorrow's schedule!!
-
-## Retrieve schedule
-
-Now, let's create a function that retrieves films using genre.
-
-```javascript
-function getTomorrowsSchedule(genre) {
-  // call to retrieve TV schedule
-}
-```
-
-The response you get back should look similar to this, with multiple objects in the broadcasts array.
-
-```json
-{
-  "broadcasts": [
-    {
-      "is_repeat": false,
-      "is_blanked": false,
-      "schedule_date": "2014-01-15",
-      "start": "2014-01-15T00:10:00Z",
-      "end": "2014-01-15T01:50:00Z",
-      "duration": 6000,
-      "service": {
-        "type": "tv",
-        "id": "bbc_one",
-        "key": "bbcone",
-        "title": "BBC One",
-        "outlets": [
-          {
-            "id": "bbc_one_wales",
-            "key": "wales",
-            "title": "Wales"
-          },
-          {
-            "id": "bbc_one_wales_hd",
-            "key": "wales_hd",
-            "title": "Wales HD"
-          }
-        ]
-      },
-      "programme": {
-        "type": "episode",
-        "pid": "b00sbk03",
-        "position": null,
-        "title": "Disturbia",
-        "short_synopsis": "Thriller about a high school student convinced that his neighbour is a serial killer.",
-        "media_type": "audio_video",
-        "duration": 6000,
-        "image": {
-          "pid": "p01gqbj3"
-        },
-        "display_titles": {
-          "title": "Disturbia",
-          "subtitle": ""
-        },
-        "first_broadcast_date": "2010-05-03T22:30:00+01:00",
-        "ownership": {
-          "service": {
-            "type": "tv",
-            "id": "bbc_three",
-            "key": "bbcthree",
-            "title": "BBC Three"
-          }
-        },
-        "is_available_mediaset_pc_sd": false,
-        "is_legacy_media": false
-      }
-      }]
-    }
-```
-
-To process the response, we want to iterate over the `response.broadcasts` array and add each item, to `#programmes` as a list item.
-
-To make this a bit easier, this is how you can access the values we need:
-
-* `item.programme.display_titles.title`
-* `item.programme.short_synopsis`
-* `item.programme.image.pid` _only if `item.programme.image` is set_
-* `item.start` and `item.end`
-* `item.duration`
-* `item.service.title`
-
-It would be easier to use string concatenation to construct the html, before appending each item to the list.
-Also, to make your code easier to read, try constructing the html in a method that you pass the response object.
-
-```javascript
-function processEpisode(episode) {
-  var item_html = '<li>';
-  item_html += '<h2>' + episode.programme.display_titles.title + '</h2>';
-  // display short short synopsis
-  // display image
-  // display date and time
-  // display duration (HINT: the duration is in seconds, convert that to minutes)
-  // display the channel (or service, as its called by the API) - add this in a span with the class `service`
-  ...
-}
-```
-
-> To display the date formatted correctly, you can use the `formatDate( )` function as we won't be going into details about dates in this tutorial. If you want to know how it works, try going through the code and ask your coach any questions you have.
-
-To display an image for a programme, we need to use `<img src=http://ichef.bbci.co.uk/images/ic/272x153/<pid>.jpg />`.  As not all programmes have an image, we can use an image placeholder when no image is set `<img src='http://placehold.it/272x153' />`
-
-### Binding the call to the click event
-
-Handle a `click` event on `#genres li` and make a call to `getTomorrowsSchedule(genre)`
-
-### Improving our function
-
-To make the genre we have just clicked active, we also want to add the CSS class `active` to the element that the event has been triggered from.  Don't forget to remove the class `active` from any other `#genres li` items.
-
-> Did you remember to commit your changes?
-
-### Using `beforeSend`
-
-Every time we issue a call to the API, we want to clear the `#programmes` list. We can do that using `empty()`.
-Also, as some of the requests take a while, we want to display a spinning image `<div class='spinner'><img src='spinner.gif' /></div>`.
-
-> Don't forget to remove the spinner, when the request is completed successfully.
-
-## Bonus: Retrieving all upcoming episodes of a programme
-
-To get back all the upcoming shows for an episode, we need to utilise the programme pid, that we can retrieve from the response using `episode.programme.programme.pid`. The URL for the request is `http://www.bbc.co.uk/programmes/<pid>/episodes/upcoming.json`
-
-> **Hint:** The programme `pid` is only available if `episode.programme.position` is set.
-
-
-```javascript
-function getUpcomingEpisodes(pid) {
-  // AJAX call to retrieve upcoming episodes
-}
-```
-Since the response structure is similar to the one for retrieving tomorrow's schedule, we should be able to re-use the `processEpisode( )` function to display each item from the broadcasts array.
-
-Handle the `click` event to retrieve and display the upcoming episodes!
-
-Here is our version of the [tv schedule app](../../examples/tv-schedule/index.html).
 
 ---
 This ends our **HTTP Requests, AJAX and APIs** tutorial. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know.
