$30 off During Our Annual Pro Sale. View Details »

Building an app during the #BuildForCovid19 Hackathon with Jetpack

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.

Ahmed Tikiwa

August 12, 2020
Tweet

More Decks by Ahmed Tikiwa

Other Decks in Technology

Transcript

  1. Hi!
    Ahmed Tikiwa
    Android Engineer @Luno
    @ahmed_tikiwa

    View Slide

  2. From the trenches:
    Zero to prototype, how Android Jetpack helped me build an app
    for a hackathon

    View Slide

  3. Background
    @ahmed_tikiwa

    View Slide

  4. 2020...
    ● Covid-19
    ● Normalcy
    ● Global lockdowns
    ● Institutions closed
    ● Remote work
    ● Job losses
    @ahmed_tikiwa

    View Slide

  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

    View Slide

  6. What the demo app needed to do
    @ahmed_tikiwa

    View Slide

  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

    View Slide

  8. Project Name: LIAM
    @ahmed_tikiwa

    View Slide

  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

    View Slide

  10. Android Jetpack
    @ahmed_tikiwa

    View Slide

  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

    View Slide

  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

    View Slide

  13. Structuring the code
    @ahmed_tikiwa

    View Slide

  14. @ahmed_tikiwa

    View Slide

  15. Structuring the code:
    @ahmed_tikiwa
    Databinding

    View Slide

  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 tag in layout file
    ● Eliminates findViewById

    View Slide

  17. Databinding converting from layout
    @ahmed_tikiwa

    View Slide

  18. Databinding expressions
    @ahmed_tikiwa
    ● Make data available to the layout using the section
    ● Then use it in the layout this way:

    name=”viewModel”
    type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel”


    name=”viewModel”
    type=”com.ahmedtikiwa.app.ui.dashboard.DashboardViewModel”



    viewModel.onClick()}” />
    ● Listener created, set
    on view
    ● Lambda evaluated
    on event

    View Slide

  19. Binding the data source to the layout
    @ahmed_tikiwa
    Bind layout view to
    architecture components
    e.g LiveData and
    ViewModel

    View Slide

  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

    View Slide

  21. Binding Adapters: System binding adapters
    @ahmed_tikiwa
    Examples: setText(),
    setTextSize(),
    setInputType()

    View Slide

  22. Structuring the code:
    @ahmed_tikiwa
    ViewModel

    View Slide

  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

    View Slide

  24. ViewModel Lifecycle
    @ahmed_tikiwa
    ViewModel exists from
    when the its requestor -
    Android or Fragment - is
    finished and destroyed

    View Slide

  25. ViewModels used
    @ahmed_tikiwa
    LoginViewModel SignUpViewModel DashboardViewModel VideoListViewModel StoreViewModel
    LoginFragment SignUpFragment DashboardFragment VideoListFragment StoreFragment
    MainActivity

    View Slide

  26. Structuring the data
    @ahmed_tikiwa
    LiveData

    View Slide

  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

    View Slide

  28. Structuring the data
    @ahmed_tikiwa
    Implementation

    View Slide

  29. @ahmed_tikiwa
    Dependencies: App-level build.gradle

    View Slide

  30. @ahmed_tikiwa
    Dependencies: Project-level build.gradle

    View Slide

  31. @ahmed_tikiwa
    Data binding definitions
    such as the
    ImageBindingAdapter

    View Slide

  32. @ahmed_tikiwa
    ImageBindingAdapter.kt store_list_item.xml

    View Slide

  33. @ahmed_tikiwa
    Data classes specific to
    the app

    View Slide

  34. @ahmed_tikiwa
    store_list_item.xml

    View Slide

  35. @ahmed_tikiwa
    store_list_item.xml

    View Slide

  36. @ahmed_tikiwa
    Any classes and services
    pertaining to making a
    network request

    View Slide

  37. @ahmed_tikiwa
    The source of data for the
    app

    View Slide

  38. @ahmed_tikiwa
    LiamRepository.kt

    View Slide

  39. @ahmed_tikiwa
    LiamRepository.kt
    I/O Dispatcher handles
    the execution of the
    coroutine

    View Slide

  40. @ahmed_tikiwa
    LiamRepository.kt

    View Slide

  41. @ahmed_tikiwa
    LiamRepository.kt

    View Slide

  42. @ahmed_tikiwa
    The screens that will be
    displayed to the user

    View Slide

  43. @ahmed_tikiwa
    The owner of the
    viewModel to be provided

    View Slide

  44. @ahmed_tikiwa
    ViewDataBinding#setLifeCycleOwner()
    Fragment#getLifeCycleOwner()

    View Slide

  45. @ahmed_tikiwa

    View Slide

  46. @ahmed_tikiwa

    View Slide

  47. @ahmed_tikiwa
    Interface responsible
    for instantiating the
    ViewModel
    Utility class to provide
    ViewModels

    View Slide

  48. Structuring the data
    @ahmed_tikiwa
    Navigation

    View Slide

  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

    View Slide

  50. Navigation, the prototype’s navGraph, Nav Editor
    @ahmed_tikiwa

    View Slide

  51. Navigation, the prototype’s navGraph, XML
    @ahmed_tikiwa
    nav_graph.xml

    View Slide

  52. NavHost
    @ahmed_tikiwa
    main_activity.xml
    Intercepts system Back
    button
    Known issue with using
    FragmentContainerView
    https://issuetracker.google.com/issu
    es/142847973

    View Slide

  53. NavHost, adding bottom navigation
    @ahmed_tikiwa
    main_activity.xml

    View Slide

  54. NavHost, adding bottom navigation - the menu
    @ahmed_tikiwa
    bottom_nav_menu.xml

    View Slide

  55. NavController
    @ahmed_tikiwa

    View Slide

  56. @ahmed_tikiwa

    View Slide

  57. @ahmed_tikiwa
    With Navigation

    View Slide

  58. Thank you!
    @ahmed_tikiwa

    View Slide

  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/

    View Slide