View source for Android-app-using-Kotlin/C3/URL-Request/English-timed


{| border=1
|  <center>'''Time'''</center>
| <center>'''Narration'''</center>
|-
| 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.

|}