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

From Script | Spoken-Tutorial
Jump to: navigation, search
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
Type the code in oncreate method Now the next step is to make a string request.

Write the below code after val url line, in the oncreate method as shown.

Point to error highlight >> press Alt+Enter keys >> select the appropriate option If you see your code highlighted in red color, press Alt+Enter keys.

Select the appropriate option to quick fix the error.

Point to the four arguments 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.

Highlight the commented line We have commented this line of code as of now.

Once we create the method, we will call it from the Response.Listener

Type the code after StringRequest method Write the code as shown after the StringRequest method.

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

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 >> search FOSS and language >> press Search button. Run the app.

Search for a specific FOSS and language and press the Search button.

Point to message 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 only 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.
Change the id to 26 and 22 >> Highlight the key-value pairs 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.
On the top left panel 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.

Point as per narration 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.
Point as per narration 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

Point as per narration 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.

Point as per narration 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.

Point as per narration 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Android-app-using-Kotlin/C3/URL-Request/English&oldid=48203"