Android-app-using-Kotlin/C3/URL-Request/English-timed
From Script | Spoken-Tutorial
| |
|
| 00:01 | Welcome to the Spoken Tutorial on URL Request. |
| 00:06 | In this tutorial we will learn to
Pass the Foss and Language ids to the URL of Spoken Tutorial |
| 00:15 | Parse the response JSON data |
| 00:18 | Run the Kotlin App and Display the fetched data |
| 00:23 | To record this tutorial, I am using
Ubuntu Linux 16.04 operating system |
| 00:30 | Android Studio version 3.x and |
| 00:34 | Android Phone with minimum of Android OS version 4.03 |
| 00:40 | To follow this tutorial, you should have basic knowledge of |
| 00:44 | Java programming language and Android Studio |
| 00:49 | If not, then go through the relevant tutorials on this website. |
| 00:54 | Spoken Tutorial project has a server which has an API made for a specific purpose. |
| 01:01 | It helps to fetch the video tutorials of a FOSS in a particular language. |
| 01:07 | Specific ids of a FOSS and language are passed to the server, to fetch the exact video. |
| 01:15 | API means Application Programming Interface |
| 01:19 | An API is the messenger that allows two software programs to communicate with each other |
| 01:27 | It delivers the request to the provider and then delivers the response back to us |
| 01:34 | Spoken Tutorial URL format is shown below: |
| 01:39 | In this URL, instead of variables fossID and languageID we have to pass the actual ids. |
| 01;48 | How to make a request to the URL? |
| 01:51 | Google provides Volley library which makes requesting a URL easy and faster. |
| 01:58 | Volley is an HTTP library that makes networking for Android Apps easier. |
| 02:05 | It is an external library. |
| 02:08 | We need to add to our Android studio project so that necessary files are downloaded. |
| 02:14 | Let us open Android Studio. |
| 02:18 | Open the project ST Search. |
| 02:22 | In the left panel, under Project, click on the small triangle to open Gradle Scripts. |
| 02:29 | Double-click on build dot gradle within brackets Module colon app |
| 02:36 | A new window opens. |
| 02:39 | In the dependencies block we will add a new dependency. |
| 02:43 | At the end of the block, add a new line as shown. |
| 02:48 | We have now added the Volley library to our project. |
| 02:53 | Next we will add the dependency of Picasso, as we will display images at a later stage. |
| 03:00 | So add a new line for the dependency as shown. |
| 03:04 | This is to display the thumbnail of the spoken tutorial videos. |
| 03:09 | A Sync Now message appears at the top right corner of the IDE.
Click on it. |
| 03:16 | Wait for the gradle build to complete which is shown at the bottom of the screen. |
| 03:22 | To request a URL, we need Internet connection. |
| 03:26 | So let us add code to get Internet permission for the app. |
| 03:31 | In the left panel, go to app manifests and double click on AndroidManifest dot xml |
| 03:40 | Add the below code above the application tag. |
| 03:44 | Without this line of code, our App cannot request any information from the Internet. |
| 03:51 | Now, go to SecondActivity dot kt |
| 03:57 | In onCreate method, we will add the code as shown to create a new request queue. |
| 04:04 | This will use the newRequestQueue method of volley library. |
| 04:09 | Next declare a variable url and assign the string as shown. |
| 04:14 | Here the URL is dynamic as we have to concatenate the FOSS and language ids received in intent. |
| 04:24 | So every time a different FOSS and language are selected, the URL will be different. |
| 04:31 | We will try to invoke the above URL in any web browser. |
| 04:36 | I’ll open Firefox web browser. |
| 04:40 | Type the following URL and press Enter. |
| 04:44 | Here, 10 specifies the FOSS id for Java and 22 specifies the language id for English. |
| 04:54 | We can see the json data that is displayed on the web page. |
| 04:59 | It is in readable format. For other browsers, it may look different. |
| 05:09 | Let us try for some other FOSS id and language id combination. |
| 05:12 | Change the FOSS id to 26 and language id to 22 and press Enter |
| 05:18 | This URL gives the videos of Python in English. |
| 05:23 | Now let’s change the id to 26 and 18. |
| 05:28 | This URL returns empty data which indicates that there are no videos for this combination of ids. |
| 05:37 | JSON stands for JavaScript Object Notation. |
| 05:42 | JSON is easy to read and write. |
| 05:46 | It is used to transmit data between a server and web application. |
| 05:51 | It is an alternative to XML. |
| 05:54 | Let us go back to SecondActivity dot kt |
| 05:58 | Now the next step is to make a string request. |
| 06:02 | Write the below code after val url line, in the oncreate method as shown. |
| 06:10 | If you see your code highlighted in red color, press Alt+Enter keys. |
| 06:17 | Select the appropriate option to quick fix the error. |
| 06:23 | In string request we specify four arguments: |
| 06:27 | Request dot Method, url, Response dot Listener and Response dot ErrorListener. |
| 06:36 | Response dot Listener specifies what to do when the response is received. |
| 06:42 | Response dot ErrorListener specifies what to do when there is an error. |
| 06:48 | extractJsonData is a method which we will create later, to parse the JSON data that we have received. |
| 06:55 | We have commented this line of code as of now. |
| 06:59 | Once we create the method, we will call it from the Response dot Listener |
| 07:04 | Write the code as shown after the StringRequest method. |
| 07:11 | This message “Contacting server…” indicates that still processing is going on. |
| 07:18 | Add the code in the next line as shown. |
| 07:23 | When the request is put in queue, the request is executed. |
| 07:28 | The Volley code which is required to request the URL to fetch data, is ready. |
| 07:33 | Run the app. |
| 07:38 | Search for a specific FOSS and language and press the Search button. |
| 07:43 | If you receive a toast message “Received server response!”, then your code is running fine. |
| 07:50 | As an assignment, do the following: |
| 07:53 | Disconnect the Internet/Wifi. |
| 07:57 | Now run the app and search for the FOSS and language. |
| 08:02 | Observe the error output. |
| 08:05 | We checked in the demonstration that we got the response from the server. Now we need to parse it. |
| 08:13 | Parsing means extracting useful information.
Let us go back to the browser, to see the JSON format data. |
| 08:21 | Change the FOSS id and Language Id to 26 and 22. |
| 08:27 | The data in JSON is key-value pairs. |
| 08:31 | We will use the tutorial underscore name, video underscore id and tutorial underscore level fields present in the JSON data. |
| 08:42 | Switch back to Android studio interface. |
| 08:46 | On the top left panel, under project, go to
app java com dot example dot spoken dot stsearch |
| 08:57 | Right-click on it. |
| 08:59 | Select New Kotlin File or Class |
| 09:05 | Type a name as VideoItem and press OK. |
| 09:10 | A new file VideoItem dot kt is created below SecondActivity. |
| 09:16 | Type this code in VideoItem dot kt. |
| 09:20 | Here we have created a class named as data class in Kotlin. |
| 09:25 | When data class is created, the getters and setters method are created while compiling. |
| 09:32 | So when we save the details of videos, we will make an object of this class for each video. |
| 09:40 | Here, video level specifies the basic, intermediate or advance level of spoken tutorials. |
| 09:48 | Now go to SecondActivity dot kt |
| 09:52 | Here we will create our method extractJsonData |
| 09:56 | So write the code after the onCreate method: |
| 10:02 | In the method we take the response received as arguments. |
| 10:07 | As we know how the JSON data will look, we can start parsing it. |
| 10:12 | First we obtain the array from response: |
| 10:16 | Write the code for it in extractJsonData method as shown. |
| 10:22 | Here we convert the response into JSONArray. |
| 10:26 | Now we know that inside this array there are many JSON objects of different videos. |
| 10:32 | So we declare a variable for storing objects one by one as shown here. |
| 10:40 | After that we need an object for VideoItem class in which we store the data.
Write the code as shown: |
| 10:49 | Next we require a ArrayList for VideoItem class. |
| 10:54 | Declare a global ArrayList as shown above the onCreate method and inside the class. |
| 11:01 | In this ArrayList all the video data will be saved. |
| 11:05 | So that it will be accessible to both onCreate and extractJsonData methods. |
| 11:12 | In this ArrayList we have declared the type as VideoItem. |
| 11:17 | That means it will have objects of VideoItem class as data. |
| 11:23 | Now we go to extractJsonData method. |
| 11:27 | Type the code as shown. |
| 11:34 | while loop is to iterate all the objects in JSON array: |
| 11:39 | In this loop we first obtain the json object in singleVideoJsonObject |
| 11:46 | This line extracts all the information and makes an object of VideoItem in singleVideoItem variable. |
| 11:54 | Here we make an object of VideoItem and pass all the values from the JSON object. |
| 12:01 | The loop will extract data of all videos received and store it in our arraylist. |
| 12:08 | So after the while block we will write the code to print the items of finalResultsArrayList: |
| 12:16 | forEach method loops through all the elements of the array list. |
| 12:21 | The it variable in the println() statement points to one item in every loop. |
| 12:28 | Now in Request dot Listener of stringRequest code we had the method which is commented. |
| 12:05 | Un-comment the code, so that extractJsonData will be called from there. |
| 12:41 | So this array list will contain many objects of our class type VideoItem. |
| 12:48 | When we take any one item from the array list, we get a object of VideoItem. |
| 12:53 | We can access the values for this object such as videoId, videoTitle, videoLevel. |
| 13:00 | So in this way JSON parsing is done. |
| 13:04 | Let us now run the App. |
| 13:08 | Search for a specific FOSS and language and press the Search button. |
| 13:15 | Click the Logcat section at the bottom of the IDE. |
| 13:20 | Here we can see the output of println statement. |
| 13:25 | To find our output, search for video in search box. |
| 13:30 | Here we can see all the VideoItems shown one after the other. |
| 13:39 | This brings us to the end of this tutorial. Let us summarize. |
| 13:44 | In this tutorial we learnt to
Pass the Foss and Language ids to the URL of Spoken Tutorial |
| 13:53 | Parse the response JSON data |
| 13:56 | Run the Kotlin App and Display the fetched data |
| 14:01 | The video at the following link summarises the Spoken Tutorial project.Please download and watch it. |
| 14:08 | The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests.
For more details, please write to us. |
| 14:18 | Please post your timed queries in this forum. |
| 14:22 | Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
| 14:34 | The Android app and the script for this tutorial was contributed by Abhishek Shah. |
| 14:40 | And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.
Thanks for watching. |
