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

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

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat