Android Development with Kotlin, Part 2 - Internet Services and JSON

St. Pölten University of Applied SciencesSt. Pölten University of Applied Sciences
Platzhalter für möglichen
Bildeinsatz
Android Development with Kotlin, Part 2
Internet Services & JSON
Andreas Jakl
Digital Healthcare
FH St. Pölten
Platzhalter für möglichen
Bildeinsatz
Version 1.3

Andreas Jakl
▪ Focus areas
▪ AR / VR, mobile apps, sensors, interaction
technology, software architecture, open source
developer (NFC, Bluetooth Beacons)
▪ Microsoft MVP (Most Valuable Professional)
▪ mobility.builders community: Mobile Developer
After-Work Events
▪ Previous Experience
▪ Tieto, Start-up (Mopius), Nokia (Finland),
Siemens Mobile (Munich), FH Hagenberg
(Mobile Computing)
Android Development with Kotlin, Part 2 | 2018 | Andreas Jakl | FH St. Pölten
https://www.andreasjakl.com/
@andijakl
andreas.jakl@fhstp.ac.at
2

Contents
▪ Language Understanding Services (Microsoft LUIS)
▪ Android Menus
▪ Web Service Client / REST & HTTP Request
▪ Threads & Multitasking
▪ AsyncTask
▪ Permissions
▪ JSON Parsing
▪ Dynamic Lists
▪ RecyclerView & Adapter
▪ Click Handling
Android Development with Kotlin, Part 2 | 2018 | Andreas Jakl | FH St. Pölten 3

LANGUAGE UNDERSTANDING SERVICE
Control Computers using Natural Language

Natural Language Understanding
▪ Identify information from conversations
▪ Train scenarios you want to differentiate simply by supplying examples
▪ Extract information from free-form sentences: dates, locations, numbers & more
▪ Reinforcement learning for continuous improvement
▪ Usage
▪ Chat bots, speech, analyzing text, smart speakers
▪ Services
▪ Microsoft LUIS, Amazon Comprehend, Facebook NLP, Google Cloud Natural
Language, Watson Natural Language Understanding

LUIS Architecture
client (phone) cloud (LUIS)
1. Client sends request to cloud.
Query contained in URL.
https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/<appid>
?subscription-key=<key>&q=Turn on lights
HTTPS connection /
GET request (REST)

LUIS Architecture
HTTPS connection /
JSON response (REST)
2. AI analyzes request, responds
with results in JSON

LUIS Architecture
2. AI analyzes request, responds
with results in JSON
{
"query": "turn on lights",
"topScoringIntent": {
"intent": "HomeAutomation.TurnOn",
"score": 0.990858853
},
"entities": [
{
"entity": "on",
"type": "HomeAutomation.Operation",
"startIndex": 5,
"endIndex": 6,
"score": 0.553411
}
]
}

Create LUIS Service
▪ Follow instructions at
▪ https://www.andreasjakl.com/using-natural-language-understanding-part-
3-luis-language-understanding-service/
▪ Create your own vocabulary!
▪ If you like, additionally test “Home Automation” prebuilt domain:
https://docs.microsoft.com/en-us/azure/cognitive-services/luis/luis-get-
started-create-app

ANDROID MENUS
User Interaction, in a different way

Exercise: Create SmartHomeClient
▪ Create new project
▪ Empty Activity, Kotlin support
▪ Layout
▪ Change from ConstraintLayout to LinearLayout
▪ Add EditText, ScrollView + nested TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
tools:context="com.andresjakl.smarthomeclient.MainActivity">
<EditText
android:id="@+id/et_query_text"
android:layout_height="wrap_content"
android:hint="Enter your command"
android:inputType="text"/>
<ScrollView
android:layout_marginTop="16dp">
<TextView
android:id="@+id/tv_results"
android:layout_width="wrap_content"
tools:text="Results" />
</ScrollView>
</LinearLayout>

Create Menu Resource
▪ Add title for menu action to strings.xml
▪ Create new menu:
▪ Right-click res > New > Android Resource File
<string name="send">Send</string>
Android
MainActivity.kt
onOptionsItem
Selected()

Add Menu Item
▪ Use designer to create “Menu Item”
▪ Handle menu item in MainActivity.kt
▪ Override onCreateOptionsMenu()
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.main, menu)
return true
}

Handle Tapped Menu Item
▪ Override onOptionsItemSelected()
▪ Show toast
▪ Test!
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
val selectedMenuItem = item?.itemId
if (selectedMenuItem == R.id.action_send_command) {
// TODO: Show toast!
return true
}
return super.onOptionsItemSelected(item)
}

WEB SERVICE CLIENT
REST & More – access URLs

Build Uri
▪ Uri.Builder (Android API)
▪ Creates well-formed URI
▪ Takes care of particulars (encoding invalid characters, ? or & query codes, …)
▪ Configure parameters & URLs
▪ Best practices for securely using API keys
▪ https://developers.google.com/console/help/api-key-best-practices
private val ENDPOINT = "https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/xxx";
private val APPKEY = "yyy";

Uri -> URL
▪ Create build function
▪ Add query parameters to base URL
▪ Convert Android Uri to Java URL
var builtUri = Uri.parse(ENDPOINT).buildUpon()
.appendQueryParameter("subscription-key", APPKEY)
.appendQueryParameter("q", queryText)
.build()
return URL(builtUri.toString())
private fun buildUrl(queryText : String) : URL { }

Make Search Query
▪ Create function to make search query
▪ Call from menu item handler
private fun makeSearchQuery() {
var queryCommand = et_query_text.text.toString()
var queryUrl = buildUrl(queryCommand)
Log.d(TAG, queryUrl.toString())
}

HTTP Request
▪ Add helper
function to
your class
/**
* This method returns the entire result from the HTTP response.
*
* @param url The URL to fetch the HTTP response from.
* @return The contents of the HTTP response.
* @throws IOException Related to network and stream reading
*/
fun getResponseFromHttpUrl(url: URL): String? {
val urlConnection = url.openConnection() as HttpURLConnection
try {
val inStream = urlConnection.inputStream
val scanner = Scanner(inStream)
// Using pattern a (beginning of the stream) - force scanner to read
// the entire contents of the stream into the next token string
// -> buffers data, different data sizes are allowed, converts
// from UTF-8 to UTF-16
scanner.useDelimiter("A")
val hasInput = scanner.hasNext()
return if (hasInput) {
scanner.next()
} else {
null
}
} finally {
urlConnection.disconnect()
}
}

Extend makeSearchQuery()
▪ Call new function after Uri conversion
▪ Test app!
android.os.NetworkOnMainThreadException
var queryResults : String?
try {
queryResults = getResponseFromHttpUrl(queryUrl)
tv_results.text = queryResults
} catch (e: IOException){
e.printStackTrace()
}

THREADS AND MULTITASKING
Keeping the UI responsive

Multi-Threading

Single User Interface Thread

Networking Takes Seconds
Loading …
App freezes
No user interaction
possible!

After ~ 5 Seconds
Loading …
App freezes
No user interaction
possible!

Multi-Threading Within Your App
Perform work on secondary execution thread
UI stays responsive
Background
thread:
UI
thread:
progress and results

AsyncTask
Main / UI Thread Background Thread
onPreExecute
AsyncTask.execute()
publishProgress… doInBackground
onPostExecute
Variable types
(in AsyncTask definition)

Create AsyncTask
onPreExecute
AsyncTask.execute()
onPostExecute
Variable types
inner class WebQueryTask :
AsyncTask<URL, Void, String?>() {
}

Create AsyncTask
onPreExecute
AsyncTask.execute()
onPostExecute
Variable types
inner class WebQueryTask :
AsyncTask<URL, Void, String?>() {
}
Kotlin: inner class may access
members of outer class

Set Up AsyncTask
▪ Override doInBackground()
▪ Move getResponseFromHttpUrl() into WebQueryTask class
override fun doInBackground(vararg params: URL): String? {
}
Kotlin: vararg = variable
number of parameters
Note: change URL? to URL

Implement AsyncTask
▪ Similar to previous web service call
▪ Update UI when finished
override fun doInBackground(vararg params: URL): String? {
var queryUrl = params[0]
var queryResults : String? = null
try {
queryResults = getResponseFromHttpUrl(queryUrl)
} catch (e: IOException){
e.printStackTrace()
}
return queryResults
}
override fun onPostExecute(result: String?) {
tv_results.text = result
}

Test!
▪ Start thread!
▪ Test app!
java.lang.SecurityException: Permission denied (missing
INTERNET permission?)
android_getaddrinfo failed: EACCES (Permission denied)
private fun makeSearchQuery() {
var queryCommand = et_query_text.text.toString()
var queryUrl = buildUrl(queryCommand)
Log.d(TAG, queryUrl.toString())
WebQueryTask().execute(queryUrl)
}

PERMISSIONS
Access sensitive data

Permissions
▪ Each app gets its unique Linux user ID
▪ Runs within its own instance of an Android runtime
▪ -> completely sandboxed
▪ -> request access to resources + data outside of sandbox
▪ Permission list
▪ https://developer.android.com/guide/topics/permissions/index.html
▪ Why not just request all permissions?
▪ Users get suspicious!
▪ Think of alternatives: using camera app through Intent
-> no camera permission needed for your app

Network Permissions
▪ Add permission to AndroidManifest.xml
▪ Device: Android 6+ (API level 23+) & targetSdkVersion = 23+
▪ Dangerous permissions acknowledged while app is running
▪ Normal permissions: granted automatically at install time, no prompts
▪ https://developer.android.com/guide/topics/permissions/normal-
permissions.html
▪ Granted permissions can be revoked
▪ < 23: install-time permissions
<uses-permission android:name="android.permission.INTERNET"/>

Final Test!

Network Libraries
▪ More powerful libraries
▪ Include caching, compression, etc.
▪ Volley (Google)
▪ OkHttp
▪ Retrofit

Exercise
▪ Repetition: save state of TextView to survive screen rotation!

JSON PARSING
Data Formats

JSON Parsing
{
"query": "turn on lights",
"topScoringIntent": {
"intent": "HomeAutomation.TurnOn",
"score": 0.990858853
},
"entities": [
{
"entity": "on",
"type": "HomeAutomation.Operation",
"startIndex": 5,
"endIndex": 6,
"score": 0.553411
}
]
}
val parsedJson = JSONObject(result)
tv_top_intent.text = parsedJson.getJSONObject("topScoringIntent")?.getString("intent")
val entitiesArray = parsedJson.getJSONArray("entities")
if (entitiesArray != null && entitiesArray.length() > 0) {
tv_top_entity_type.text = entitiesArray.getJSONObject(0)?.getString("type")
}

Exercise
▪ Add additional TextViews
▪ Parse JSON and extract information
▪ Check that your app doesn’t crash if
entering strange text

DYNAMIC LISTS
Populating better lists

Scrolling TextView?
Handle tap events
on items?
More complex
layouts per item?
Different fonts &
images?
Performance:
keeping everything
in memory?
Animations &
effects?

RecyclerView
Android Development with Kotlin, Part 2 | 2018 | Andreas Jakl | FH St. Pölten 45Image credits: Google, https://developer.android.com/training/material/lists-cards.html
Ali Connors
Brunch this weekend?
I’ll be in your neighborhood doing errands…
15m
Layout instance
1. Layout instance scrolls out of view
queue
TextView
TextView
TextView
TextView
Image
Layout instance
2. Placed in queue
Lorem ipsum
dolor sit amet
consectetur adipiscing elit…
17h
Layout instance 3. Filled with new content &
scrolls in again

RecyclerView
RecyclerView Flow
Data source
Adapter
Provides new data to RecyclerView
when needed
Adapter binds data from
data source to views
ViewHolder
Used to send views to RecyclerView
LayoutManager
Tells RecyclerView how to layout
views

Kotlin: Data Class
▪ Only contains data, no operations
▪ Auto-created utility functions
▪ Generates properties (no more getters and setters)
▪ equals(), hashCode(), toString(), copy()
▪ https://kotlinlang.org/docs/reference/data-classes.html
▪ Comparison to Java: https://antonioleiva.com/data-classes-kotlin/
data class PartData ( val id: Long, val itemName: String)
Data source

Creating Demo Data
▪ Create some demo data in onCreate() of MainActivity
Data source
var partList = ArrayList<PartData>()
partList.add(PartData(100411, "LED Green 568 nm, 5mm"))
partList.add(PartData(101119, "Aluminium Capacitor 4.7μF"))
partList.add(PartData(101624, "Potentiometer 500kΩ"))
// ...

Create List Item Layout
▪ New layout xml file:
part_list_item.xml
▪ Layout: LinearLayout (vertical)
▪ Width: match_parent
▪ Height: wrap_content
▪ Padding: 16dp
▪ Child: 2x TextView
▪ Id 1: @+id/tv_part_item_name (larger
text size)
▪ Id 2: @+id/tv_part_id (smaller text size)

Add RecyclerView
▪ Add RecyclerView to dependencies in build.gradle of app
▪ compile 'com.android.support:recyclerview-v7:26.1.0’
RecyclerView
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:recyclerview-v7:26.1.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

ViewHolder
▪ Create class PartAdapter
▪ Create child class ViewHolder inside PartAdapter
▪ Describes item view
▪ Stores metadata about its place within RecyclerView
class PartViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
// bind() = Custom function. Copies items from supplied instance of our
// "PartData" data class to the "itemView" we got through the constructor
fun bind(part: PartData) {
itemView.tv_part_item_name.text = part.itemName
}
}
ViewHolder
Kotlin: this is actually the primary constructor. Declares and
initializes properties (here: itemView).
https://kotlinlang.org/docs/reference/classes.html

Adapter Tasks
Adapter
1. Return information, e.g., about the number of items
getItemCount()
2. Create new view instances
onCreateViewHolder()
3. Populate view items with data
onBindViewHolder()

Adapter
AdapterRecyclerView Data source
1. Return information, e.g., about the number of items
getItemCount()
2. Create new view instances
onCreateViewHolder()
ViewHolder
3. Populate view items with data
onBindViewHolder()
id itemName
100411 LED Green 568 nm, 5mm
101119 Aluminium Capacitor
4.7μF
101629 Potentiometer 500kΩ

Create Adapter
▪ Extend PartAdapter
▪ Derive from RecyclerView.Adapter<RecyclerView.ViewHolder>
▪ Let Android Studio write required member implementations
▪ Add parameter to PartAdapter:
Adapter
(val partItemList: List<PartData>)

Implement PartAdapter
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
// LayoutInflater: takes ID from layout defined in XML.
// Instantiates the layout XML into corresponding View objects.
// Use context from main app -> also supplies theme layout values!
val inflater = LayoutInflater.from(parent.context)
// Inflate XML. Last parameter: don't immediately attach new view to the parent view group
val view = inflater.inflate(R.layout.part_list_item, parent, false)
return PartViewHolder(view)
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
// Populate ViewHolder with data that corresponds to the position in the list
// which we are told to load
(holder as PartViewHolder).bind(partItemList[position])
}
override fun getItemCount() = partItemList.size

Add RecyclerView to MainActivity
▪ Update activity_main Layout
▪ Delete “Hello World” text
▪ Add RecyclerView
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_parts"
android:layout_height="match_parent" />

Wire Up RecyclerView
▪ 1. Assign LinearLayoutManager
▪ Measures and positions item views
▪ Linear list layout (default: vertical)
▪ 2. Optional optimization
▪ View contents do not change RecyclerView size
rv_parts.layoutManager = LinearLayoutManager(this)
rv_parts.hasFixedSize()

Wire Up RecyclerView
▪ 3. Assign PartAdapter to RecyclerView
▪ Supply test data we created earlier
rv_parts.adapter = PartAdapter(testData)

Final Test!

RECYCLERVIEW & CLICK HANDLING
Advanced Topics for the Pros

RecyclerView
RecyclerView & Click Listener
Data source
Adapter
Click Listener
ViewHolder
ViewHolder
ViewHolder
bind() function assigns data &
click handler callback to view holder instances
Click event executes registered
click handler callback function

Higher-Order Functions
▪ Function that
▪ Takes another function as parameter, or
▪ Returns a function
▪ Lambda
▪ Surrounded by { }
▪ Parameters -> Return type

Experiments I: Class with Parameters
▪ Create a class that has parameters
▪ Note that you can use the parameters as properties
/**
* Defines a class with a constructor. Its parameters are automatically available
* as properties in the class. Note that the keyword "constructor" is optional
* and could be stripped.
*/
class ClassWithConstructorProperties constructor (var a: Int, var b: Int) {
fun calculate() : Int {
return a + b;
}
} // Create new class instance
var calcTest = ClassWithConstructorProperties(10, 20)
// Print calculation results
Log.d("Tests", "Calculation result: " + calcTest.calculate())

Experiments II: Function Parameters
▪ Define a function with a function parameter
▪ Specify structure the supplied function must fulfil
▪ Parameter performCalculation is of type: (parameter types) -> return type
▪ When calling:
▪ Supply a function as lambda expression that matches the parameter
▪ Return type is inferred automatically if not Unit (= void in Java)
private fun testFunctionParameters(performCalculation: (Int, Int) -> Int) {
Log.d("Tests", "Calculation result: " + performCalculation(1, 2))
}
testFunctionParameters( {a : Int, b : Int -> a + b } )

Adapter with Click Listener
▪ 1. Add 2nd parameter to PartAdapter constructor
▪ Function parameter
▪ Reqiures PartData as parameter, no value is returned (“Unit”)
class PartAdapter (val partItemList: List<PartData>, val clickListener: (PartData) -> Unit) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {

View Holder with Click Listener
▪ 2. Assign click listener in PartViewHolder
▪ Assigned to the whole view, not just a Button / TextView / …
▪ Supply click listener as 2nd parameter of bind() function
class PartViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(part: PartData, clickListener: (PartData) -> Unit) {
itemView.tv_part_item_name.text = part.itemName
itemView.tv_part_id.text = part.id.toString()
itemView.setOnClickListener { clickListener(part)}
}
}

Assign Click Listener
▪ 3. When Adapter binds ViewHolder, assign click listener
▪ clickListener part of constructor in PartAdapter
▪ -> automatically available as property in the PartAdapter class
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
// Populate ViewHolder with data that corresponds to the position in the list
// which we are told to load
(holder as PartViewHolder).bind(partItemList[position], clickListener)
}

Handle Clicks in MainActivity
▪ 4. Write function in MainActivity to handle clicked items
▪ 5. Extend construction of PartAdapter, supply function parameter
private fun partItemClicked(partItem : PartData) {
Toast.makeText(this, "Clicked: ${partItem.itemName}", Toast.LENGTH_LONG).show()
}
rv_parts.adapter = PartAdapter(testData, { partItem : PartData -> partItemClicked(partItem) })

Final Test!

Exercise: Detail Page
▪ Create a DetailActivity
▪ Shows part details
▪ Extend click handler in
MainActivity
▪ Launch second activity
▪ Pass data via Intent Extras

THANK YOU!

Android Development with Kotlin, Part 2 - Internet Services and JSON

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Similar a Android Development with Kotlin, Part 2 - Internet Services and JSON

Similar a Android Development with Kotlin, Part 2 - Internet Services and JSON (20)

Más de Andreas Jakl

Más de Andreas Jakl (20)

Último

Último (20)

Android Development with Kotlin, Part 2 - Internet Services and JSON