Android-app-using-Kotlin/C3/URL-Request/English-timed

From Script | Spoken-Tutorial
Revision as of 16:08, 13 October 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Time
Narration
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.

Contributors and Content Editors

PoojaMoolya