Nirmala Venkat: Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
2019-06-26T11:55:52Z

Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent..."

New page

{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Visual Cue'''</center>
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Narration'''</center>
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 1:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Welcome to the''' Spoken Tutorial''' on''' URL Request.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 2:

Learning Objectives
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 3:

System requirement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 4:

Pre-requisites

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 5:

Spoken Tutorial Server

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * '''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.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 6:

API
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * '''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
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 7:

Spoken Tutorial URL Format:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Spoken Tutorial URL format''' is shown below:

[http://spoken-tutorial.org/api/get_tutorials/fossID/languageID 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'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 8:

How to make a request to the URL?
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the '''Android studio '''from the launcher bar.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''ST search'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the '''project ST Search.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Select '''Project Explorer >>Gradle Scripts.'''

Double click on''' build.gradle'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the dependencies block
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''dependencies''' block we will add a new '''dependency'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Type,'''

'''implementation'''

''''com.android.volley:volley:1.1.0''''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| At the end of the block, add a new line as shown.

We have now added the '''Volley library''' to our '''project'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will add the '''dependency''' of '''Picasso,''' as we will display images at a later stage.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type,

'''implementation '''

''''com.squareup.picasso:picasso:2.5.2''''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| So add a new line for the '''dependency''' as shown.

This is to display the thumbnail of the '''spoken tutorial''' videos.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''Sync Now '''message

Click on it.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A '''Sync Now '''message appears at the top right corner of the '''IDE'''.

Click on it.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the bottom of the screen
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Wait for the '''gradle build''' to complete which is shown at the bottom of the screen.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| narration only
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| To request a '''URL''', we need '''Internet connection.'''

So let us add code to get '''Internet''' permission for the '''app'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Select''' app => manifests => AndroidManifest.xml'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel, go to '''app => manifests => '''and double-click on''' AndroidManifest.xml'''

Add the below code above the '''<nowiki><application></nowiki>''' '''tag'''.

Without this line of code, our '''App''' cannot request any information from the '''Internet'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''SecondActivity.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now, go to '''SecondActivity.kt'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type,

'''val queue = Volley.newRequestQueue(this)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type,
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Type'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the output in the browser
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy - paste the below url

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Slide 9:'''

'''JSON'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * '''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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to''' SecondActivity.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us go back to '''SecondActivity.kt'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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 '''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Write the code as shown after the '''StringRequest method'''.

This message indicates that still processing is going on as “'''Contacting server…”'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''queue.add(stringRequest)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Narration only'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The '''Volley''' code which is required to '''request''' the '''URL''' to fetch '''data,''' is ready.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Run App
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''slide 10:'''

'''Assignment:'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''narration'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We checked in the demonstration that we got the '''response''' from the '''server'''. Now we need to parse it.

'''Parsing''' means '''extracting '''useful information.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Switch to browser.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us go back to the '''browser''', to see the '''JSON format data.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Highlight

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Switch back to Android studio interface.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| narration only
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Switch back to''' Android studio''' interface.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| On the top left panel, under '''project''', go to

'''app => java =>''' '''com.example.spoken.stsearch'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Right click on com.example.spoken.searchapp'''

Select''' New => Kotlin File/Class'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now go to '''SecondActivity.kt'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''private fun extractJsonData(jsonResponse: String) {'''

'''}'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var videosDataArray = JSONArray(jsonResponse)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var singleVideoJsonObject: JSONObject'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| So we declare a '''variable''' for storing '''objects''' one by one as shown here.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var singleVideoItem: VideoItem'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| After that we need an '''object''' for '''VideoItem class''' in which we store the '''data'''.

Write the code as shown:

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''<nowiki>var finalResultsArrayList = ArrayList<VideoItem>()</nowiki>'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we go to '''extractJsonData method.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Un-comment'''

''//extractJsonData(response)''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Run App
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us now run the '''App'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| On the Android phone, select a FOSS and Language
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Search for a specific '''FOSS''' and language and press the '''Search '''button.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click the '''Logcat '''section at the bottom of the '''IDE'''.

Point to the output
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| This brings us to the end of this tutorial. Let us summarize.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 11:

Summary
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 12:

About Spoken Tutorial project

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The video at the following link summarises the Spoken Tutorial project.Please download and watch it.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 13:

About workshops
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The Spoken Tutorial Project Team

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 14:

Forum for specific questions:
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Please post your timed queries in this forum.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 15:

Acknowledgement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|}

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

Nancyvarkey at 10:59, 15 July 2019

Nirmala Venkat at 12:22, 26 June 2019

@@ Line 213: / Line 213: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now the next step is to make a '''string request'''.
-Write the below code after '''val url'''line, in the '''oncreate method''' as shown.
+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.