Building an app during the #BuildForCovid19 Hackathon with Jetpack

Slides for my GDG Cape Town "An evening of Jetpack" talk
https://www.youtube.com/watch?v=mJYltyYZxUI

In early 2020, with the COVID-19 pandemic having plagued the world, the #BuildForCOVID19 hackathon, backed by big tech companies such as Facebook, Slack, Microsoft was created with the aim of help the issues and challenges associated with Covid-19. These slides are part of my talk I shared on how Android Jetpack was very useful in building a prototype within a very limited time of three days.

Transcript

1. Hi! Ahmed Tikiwa Android Engineer @Luno @ahmed_tikiwa
2. From the trenches: Zero to prototype, how Android Jetpack helped me build an app for a hackathon
3. Background @ahmed_tikiwa
4. 2020... • Covid-19 • Normalcy • Global lockdowns • Institutions closed • Remote work • Job losses @ahmed_tikiwa
5. 2020... • #BuildForCovid19 Hackathon ◦ Build software solutions ▪ Drive social impact ▪ Tackle Covid-19 challenges • Backed by: ◦ AWS ◦ Facebook ◦ Giphy ◦ Microsoft ◦ Slack ◦ Pinterest ◦ Twitter @ahmed_tikiwa
6. What the demo app needed to do @ahmed_tikiwa
7. Project Name: LIAM @ahmed_tikiwa • Learning platform for kids • Earn “LIAMs” for completing courses • Earn “LIAMs” for selling their digital assets • Use “LIAMs” to buy digital assets • Global team ◦ South Africa, Uganda, Canada, India & Ghana • Android prototype with: ◦ a sign up screen, a login screen, a marketplace screen, a course catalogue screen and a profile screen • 3 days dev time • Mock data
8. Project Name: LIAM @ahmed_tikiwa
9. Team approach @ahmed_tikiwa • Hackathon rules required: ◦ Production-ready or Proof-of-Concept (PoC) applications • LIAM goal: Production-ready • App needed to be performant, clean & have well-structured code
10. Android Jetpack @ahmed_tikiwa
11. Android Jetpack @ahmed_tikiwa • Components, tools and architecture guidance for development acceleration • Considered a “template” for production ready code • Answer to difficult app management as data changes • Four categories: ◦ Foundation ◦ UI ◦ Architecture ◦ Behaviour ▪ Components: Backward compatible, work together, adaptable
12. @ahmed_tikiwa Bind UI components in layouts to data sources Aware of current activity/fragment lifecycle state Observable data holder class and lifecycle aware Navigation around the app, handle deep links Store & manage UI related data while lifecycle aware Kotlin ext included in Jetpack. Concise, idiomatic Kotlin provision Multiple independent screens hosted by an Activity
13. Structuring the code @ahmed_tikiwa
14. @ahmed_tikiwa
15. Structuring the code: @ahmed_tikiwa Databinding
16. Databinding @ahmed_tikiwa • Introduced in 2015 and now part of Android Jetpack • Bind UI components in layouts to data sources • Simple to set up: android { ... buildFeatures { dataBinding true } } • Wrap layout elements with <layout> tag in layout file • Eliminates findViewById
17. Databinding converting from layout @ahmed_tikiwa
18. Databinding expressions @ahmed_tikiwa • Make data available to the layout using the <data> section • Then use it in the layout this way: <data> <variable name=”viewModel” type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel” </data> <data> <variable name=”viewModel” type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel” </data> <TextView android:text=”@{viewModel.title}” /> <TextView app:imageUrl=”@{viewModel.url}” /> <TextView app:onClick=”@{() -> viewModel.onClick()}” /> • Listener created, set on view • Lambda evaluated on event
19. Binding the data source to the layout @ahmed_tikiwa Bind layout view to architecture components e.g LiveData and ViewModel
20. Binding Adapters @ahmed_tikiwa • Make framework call to set value • Use system binding adapter e.g android:text ◦ setText() • Use custom binding adapter e.g app:imageUrl
21. Binding Adapters: System binding adapters @ahmed_tikiwa Examples: setText(), setTextSize(), setInputType()
22. Structuring the code: @ahmed_tikiwa ViewModel
23. ViewModel @ahmed_tikiwa • Part of the Android Jetpack • Storage and management of UI related data in a lifecycle-conscious way • Data can survive configuration changes for example screen rotation • Should not hold reference to UI Controllers - Activities or Fragments or their context • Can hold Application context through use of extending AndroidViewModel(application) • Connected to the UI Controller - Activity or Fragment - via ViewModelProvider utility class
24. ViewModel Lifecycle @ahmed_tikiwa ViewModel exists from when the its requestor - Android or Fragment - is finished and destroyed
25. ViewModels used @ahmed_tikiwa LoginViewModel SignUpViewModel DashboardViewModel VideoListViewModel StoreViewModel LoginFragment SignUpFragment DashboardFragment VideoListFragment StoreFragment MainActivity
26. Structuring the data @ahmed_tikiwa LiveData
27. LiveData @ahmed_tikiwa • Part of the Android Jetpack • Observable data holder class • Like ViewModel, is also life-cycle aware • Will only update active component observers ◦ Send update to observer only when observer is active ▪ In Started or Resumed state ▪ Not Paused or Destroyed state • When data changes, LiveData will post an update
28. Structuring the data @ahmed_tikiwa Implementation
29. @ahmed_tikiwa Dependencies: App-level build.gradle
30. @ahmed_tikiwa Dependencies: Project-level build.gradle
31. @ahmed_tikiwa Data binding definitions such as the ImageBindingAdapter
32. @ahmed_tikiwa ImageBindingAdapter.kt store_list_item.xml
33. @ahmed_tikiwa Data classes specific to the app
34. @ahmed_tikiwa store_list_item.xml
35. @ahmed_tikiwa store_list_item.xml
36. @ahmed_tikiwa Any classes and services pertaining to making a network request
37. @ahmed_tikiwa The source of data for the app
38. @ahmed_tikiwa LiamRepository.kt
39. @ahmed_tikiwa LiamRepository.kt I/O Dispatcher handles the execution of the coroutine
40. @ahmed_tikiwa LiamRepository.kt
41. @ahmed_tikiwa LiamRepository.kt
42. @ahmed_tikiwa The screens that will be displayed to the user
43. @ahmed_tikiwa The owner of the viewModel to be provided
44. @ahmed_tikiwa ViewDataBinding#setLifeCycleOwner() Fragment#getLifeCycleOwner()
45. @ahmed_tikiwa
46. @ahmed_tikiwa
47. @ahmed_tikiwa Interface responsible for instantiating the ViewModel Utility class to provide ViewModels
48. Structuring the data @ahmed_tikiwa Navigation
49. Navigation @ahmed_tikiwa • Part of the Android Jetpack • Collection of libraries, tooling and guidance to simplify Android in-app navigation • Use of a Navigation Graph to outline navigation information: ◦ All possible paths a user can take in-app ◦ An XML file with visual tool in Android Studio Navigation Editor • Use of NavHost: ◦ Empty container to display navigation graph destinations ◦ Default NavHost - NavHostFragment • Use of NavController ◦ Controls or manages the in-app navigation ◦ Swaps destination content as user navigates
50. Navigation, the prototype’s navGraph, Nav Editor @ahmed_tikiwa
51. Navigation, the prototype’s navGraph, XML @ahmed_tikiwa nav_graph.xml
52. NavHost @ahmed_tikiwa main_activity.xml Intercepts system Back button Known issue with using FragmentContainerView https://issuetracker.google.com/issu es/142847973
53. NavHost, adding bottom navigation @ahmed_tikiwa main_activity.xml
54. NavHost, adding bottom navigation - the menu @ahmed_tikiwa bottom_nav_menu.xml
55. NavController @ahmed_tikiwa
56. @ahmed_tikiwa
57. @ahmed_tikiwa With Navigation
58. Thank you! @ahmed_tikiwa
59. Resources @ahmed_tikiwa • “Developing apps in Kotlin” free Udacity course using Android Jetpack • https:/ /developer.google.com/jetpack • List of AndroidX Binding Adapters - https:/ /androidx.de/androidx/databinding/adapters/