The Official App for DroidKaigi 2021

Overview

DroidKaigi Logo DroidKaigi 2021 official app

Guides

Development

Features

Now this app has the Feed feature. We will deliver Feed and events related to DroidKaigi.

Home Drawer

Design

Android

iOS

Try it out

The builds being distributed through mobile app distribution services.

  • Production (TBR)
  • Try the latest staging through Download to device
  • and more... (tbw)

Contributing

We always welcome any and all contributions! See CONTRIBUTING.md for more information

For Japanese speakers, please see CONTRIBUTING.ja.md

Requirements

Latest Android Studio BumbleBee and higher. You can download it from this page. Xcode version is 12.5.1 (If you do iOS development)

Tech Stacks

Kotlin Multiplatform

TBD

Jetpack Compose

Modern Development

  • Jetpack Compose
  • Kotlin Coroutines & Flows
  • Dagger Hilt
  • DataStore
  • Kotlin Multiplatform

Architecture

Unidirectional data flow

Compose processing and ViewModel processing are performed by Unidirectional data flow.

Compose unidirectional data flow

By performing State hoisting(pass the value and receive the event), Jetpack Compose displays with unidirectional data flow.

/**
 * stateful
 */
@Composable
fun FeedScreen(
    onNavigationIconClick: () -> Unit,
    onDetailClick: (Feed) -> Unit,
) {
...

    val (
        state,
        effectFlow,
        dispatch,
    ) = use(feedViewModel())

    val context = LocalContext.current
    effectFlow.collectInLaunchedEffect { effect ->
        when (effect) {
            is FeedViewModel.Effect.ErrorMessage -> {
                scaffoldState.snackbarHostState.showSnackbar(
                    effect.appError.getReadableMessage(context)
                )
            }
        }
    }

    FeedScreen(
        // ...
        FeedContents = state.filteredFeedContents,
        onFavoriteChange = {
            dispatch(FeedViewModel.Event.ToggleFavorite(Feed = it))
        },
        // ...
    )
}

/**
 * stateless
 */
@Composable
private fun FeedScreen(
    // ...
    FeedContents: FeedContents,
    onFavoriteChange: (Feed) -> Unit,
    // ...
) {
    Column {
        BackdropScaffold(
            backLayerBackgroundColor = MaterialTheme.colors.primarySurface,
            scaffoldState = scaffoldState,
            backLayerContent = {
                BackLayerContent(filters, onFavoriteFilterChanged)
            }
// ...
        )
// ...
    }
}

ViewModel unidirectional data flow

This app handles the ViewModel with an MVI-like interface.

Compose

    val (
        state,
        effectFlow,
        dispatch,
    ) = use(feedViewModel())

    val context = LocalContext.current
    effectFlow.collectInLaunchedEffect { effect ->
        when (effect) {
            is FeedViewModel.Effect.ErrorMessage -> {
                scaffoldState.snackbarHostState.showSnackbar(
                    effect.appError.getReadableMessage(context)
                )
            }
        }
    }

    FeedScreen(
        // ...
        FeedContents = state.filteredFeedContents,
        onFavoriteChange = {
            dispatch(FeedViewModel.Event.ToggleFavorite(Feed = it))
        },
        // ...

This state, effectFlow and dispatch are created from ViewModel.

state represents the state that the UI should display.

effectFlow represents a one-time event such as a Snackbar display.

And dispatch represents a change of state.

ViewModel Interface

interface UnidirectionalViewModel<EVENT, EFFECT, STATE> {
    val state: StateFlow<STATE>
    val effect: Flow<EFFECT>
    fun event(event: EVENT)
}

use(viewModel) function

@Composable
inline fun <reified STATE, EFFECT, EVENT> use(
    viewModel: UnidirectionalViewModel<EVENT, EFFECT, STATE>,
):
    StateEffectDispatch<STATE, EFFECT, EVENT> {
    val state by viewModel.state.collectAsState()

    val dispatch: (EVENT) -> Unit = { event ->
        viewModel.event(event)
    }
    return StateEffectDispatch(
        state = state,
        effectFlow = viewModel.effect,
        dispatch = dispatch
    )
}

Testable & Previewable & Faster debug

Jetpack Compose is still a new technology. We are thinking of best practices. We will try to improve testing, preview and build by using Fake. For example, this app allows you to interact with the Android Studio Preview as if it were a real app.

preview

This is possible by creating a Fake ViewModel and making it reliable.

How to make Fake's ViewModel reliable

Do the same test for Fake and the real thing by testing against the interface. This makes Fake's ViewModel reliable. This technique of doing the same test against Fake was introduced in "Build testable apps for Android" session(Google I/O'19).

You can also prevent forgetting to update by forcing the implementation with interface and . Also, by forcing the implementation with interface and " Exhaustive ", it is possible to prevent forgetting to update Fake's ViewModel.

override fun event(event: FeedViewModel.Event) {
    coroutineScope.launch {
        @Exhaustive
        when (event) {
            is FeedViewModel.Event.ChangeFavoriteFilter -> {

How to make it previewable and testable

This app uses fake's ViewModel to enable preview.

@Preview(showBackground = true)
@Composable
fun FeedScreenPreview() {
    Conferenceapp2021FeedTheme(false) {
        ProvideFeedViewModel(viewModel = fakeFeedViewModel()) {
            FeedScreen {
            }
        }
    }
}

How to debug fast?

If you want to check the UI display, you can check it in the Preview of Android Studio. In that case, the required task is :uicomponent-compose:main:compileDebugKotlin. Therefore, there is no need to build the data module that contains the definitions such as API and the build of Android dex, so you can quickly build and check. Also, changes to the data layer do not affect the ui module, so you can build faster.

Overall architecture

Thanks

Thank you for contributing!

Contributors

GitHub : Contributors

Designer

nontan
nobo

Trouble Shooting

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.X

JDK 1.8 is a requirement to build an Android project basically, but AGP 7.0 requires JDK 11. Please make sure you are using Java 11. Please note that the java version of Gradle Daemon is determined at the launch-time, so ./gradlew --stop might be required for you.

The option 'android.enableBuildCache' is deprecated.

android.enableBuildCache is REMOVED in AGP 7.0. android.enableBuildCache=false has no issue but builds randomly succeed with true value. This may affect to those who declare android.enableBuildCache=true in their $GRADLE_USER_HOME/gradle.properties.

Comments
  • [iOS] Create xcframework with Gradle

    [iOS] Create xcframework with Gradle

    Issue

    • close #459

    Overview (Required)

    • Create XCFrameworks of KMM module with gradle.
      • @takahirom told me about this https://github.com/DroidKaigi/conference-app-2021/issues/459#issuecomment-853481869, but I couldn't create with that. šŸ˜¢
      • So I used plugin.
    • Add target in Package.swift about KMM module

    Links

    Screenshot

    Before | After :--: | :--: |

    opened by ry-itto 28
  • Proposal about the design for the iOS app

    Proposal about the design for the iOS app

    Kind (Required)

    Proposal / Discussion

    Overview (Required)

    Is there any chance that we can have another design for the iOS app?

    We can indeed use material-components-ios, but we cannot use it directly since it's implemented by UIKit which is different from our current layout frameworkā€“SwiftUI. It's possible to make it work in SwiftUI, but it will take many unnecessary efforts and face unexpected issues.

    So I think it may be a good idea to have another design for iOS. It's not only for the development cost but also for the iOS users.

    If it's possible, I would like to try to invite a designer to help us. It would be helpful to have the information below:

    • Where can we find specification documents that the designer needs to refer to?
    • Is there any schedule for design products?
    • Is there any universal guideline for design?

    Links

    • An issue about using material-components-ios in SwiftUI
    need_to_decide 
    opened by myihsan 27
  • Timetable item detail screen

    Timetable item detail screen

    Kind (Required)

    • Improvement

    Overview (Required)

    • The title says everything
    • Probably we should use database cache. https://github.com/DroidKaigi/conference-app-2021/issues/628 If you can please implement by FakeViewModel. image

    Links

    welcome_contribute 
    opened by takahirom 18
  • Keep selected tab through rotation at FeedScreen

    Keep selected tab through rotation at FeedScreen

    Issue

    • close #127

    Overview (Required)

    • Tab selection returns to Home every time when the screen is rotated, so it is now keeped in the ViewModel.

    Links

    Screenshot

    Before | After :--: | :--: |

    opened by Index197511 16
  • [iOS/Android] language setting implementation

    [iOS/Android] language setting implementation

    Issue

    • close #524

    Overview (Required)

    • Implementation of language setting

    Links

    • https://github.com/DroidKaigi/conference-app-2021/issues/524

    Screenshot

    Before | After :--: | :--: |

    Other

    I haven't checked how it works after the conflict is resolved yet, so I will check later. It seems that the action after catchToEffect() is not called as well as the addFavorite part. I only added the main thread specification once because it was crashing if I didn't process it in the main thread, but if anyone knows the cause of the problem, it would be great if you could advise me.

    opened by yuukiw00w 13
  • Apply

    Apply "Navigation Drawer" screen design

    Overview (Required)

    The title says everything. Make it previewable(Prease add @Preview methods) and try to implement it paying attention to state hoisting.

    Links

    https://www.figma.com/file/IFlrbfmBSdYvUz7VmSzfLV/DroidKaigi_2021_official_app There are some parts where the design size is not accurate. Use 4dp * x size and similar Material components. Please log in to see the size on the design.

    welcome_contribute 
    opened by takahirom 13
  • Add night mode preview for FeedScreen

    Add night mode preview for FeedScreen

    Issue

    • close #249

    Overview (Required)

    • Add ConferenceAppFeederTheme for FeedItemRow

    Links

    Screenshot

    I'm sorry. The preview did not work well due to a machine spec issue.

    opened by BokaDaiki 11
  • Fix/hierarchy structure support

    Fix/hierarchy structure support

    Issue

    • close #69

    Overview (Required)

    • Add flag to gradle.properties
    • Fix the configuration of the model module

    Links

    • https://kotlinlang.org/docs/migrating-multiplatform-project-to-14.html#try-the-hierarchical-project-structure
    • https://kotlinlang.org/docs/mpp-share-on-platforms.html#share-code-on-similar-platforms

    Screenshot

    šŸ‘ ć‚¹ć‚ÆćƒŖćƒ¼ćƒ³ć‚·ćƒ§ćƒƒćƒˆ 2021-03-06 20 38 38

    opened by watanavex 11
  • Switch status bar transparent when navigation drawer open

    Switch status bar transparent when navigation drawer open

    Kind (Required)

    • Improvement

    Overview (Required)

    • Currently, we use always semi-transparent background.
    • But navigation drawer of material component android switch transparent and semi-transparent when open drawer.

    image

    Links

    welcome_contribute 
    opened by takahirom 11
  • [iOS] Create setting screen

    [iOS] Create setting screen

    Issue

    • close #449

    Overview (Required)

    • Create SettingFeature module.
    • Create SettingScreen and SettingToggleItem to display each setting item.
    • Create NavigationBarConfigurator to change NavigationBar color easily and restore the previous color when dismissed.

    Links

    Screenshot

    Before | After :--: | :--: | | |

    opened by fummicc1 10
  • Modify scale type of feed image in the FeedItem from center crop to center inside

    Modify scale type of feed image in the FeedItem from center crop to center inside

    Issue

    • close #88

    Overview (Required)

    • This is the feed screen image after changing the scale type from center crop to center inside. Please consider which is better.

    Links

    Screenshot

    Before (center crop) | After (center inside) :--: | :--: | |

    opened by maho-ya 10
  • Feeds API starts to support filtering by date

    Feeds API starts to support filtering by date

    Kind (Required)

    • Improvement

    Overview (Required)

    • feeds/recent api now has the ability to filter by date
    • Client needs to request until it is empty or paging feature

    Description of Feeds/Recent API

    • API returns 10 items on each section, if it is less than 10, there are no more items
    • When request with query publishedAtBefore(ISO8601), API returns results before query parameter
    curl https://ssot-api-staging.an.r.appspot.com/feeds/recent?publishedAtBefore=2020-07-30T07:03:35.466Z
    
    welcome_contribute 
    opened by RyuNen344 0
  • [Security] Workflow ios-test.yml is using vulnerable action eskatos/gradle-command-action

    [Security] Workflow ios-test.yml is using vulnerable action eskatos/gradle-command-action

    The workflow ios-test.yml is referencing action eskatos/gradle-command-action using references v1. However this reference is missing the commit 6ff2065a1233a621be482a67cf97261047133d35 which may contain fix to the some vulnerability. The vulnerability fix that is missing by actions version could be related to: (1) CVE fix (2) upgrade of vulnerable dependency (3) fix to secret leak and others. Please consider to update the reference to the action.

    opened by fockboi-lgtm 0
  • [Security] Workflow ios-commit-snapshots.yml is using vulnerable action eskatos/gradle-command-action

    [Security] Workflow ios-commit-snapshots.yml is using vulnerable action eskatos/gradle-command-action

    The workflow ios-commit-snapshots.yml is referencing action eskatos/gradle-command-action using references v1. However this reference is missing the commit 6ff2065a1233a621be482a67cf97261047133d35 which may contain fix to the some vulnerability. The vulnerability fix that is missing by actions version could be related to: (1) CVE fix (2) upgrade of vulnerable dependency (3) fix to secret leak and others. Please consider to update the reference to the action.

    opened by Ale0x78 0
  • Try using molecule

    Try using molecule

    Issue

    • close #ISSUE_NUMBER

    Overview (Required)

    • Try to use molecule
    • I use it for creating the state in ViewModel

    Links

    Screenshot

    Before | After :--: | :--: |

    opened by takahirom 0
  • Introduce FeedScreenState to separate UI related logic, state and UI

    Introduce FeedScreenState to separate UI related logic, state and UI

    Issue

    • close #ISSUE_NUMBER

    Overview (Required)

    • I separate UI related logic, state, and UI by introducing FeedScreenState
    • This shortened the FeedScreen by about 30 lines and succeeded in extracting the logic from Compose. šŸŽ‰

    Links

    • https://www.youtube.com/watch?v=rmv2ug-wW4U

    Screenshot

    Before | After :--: | :--: |

    opened by takahirom 0
Owner
DroidKaigi
DroidKaigi is a developer-first Android conference.
DroidKaigi
Clean Code and Reactive Programming PlayGround for Bangkit 2021

Clean Code and Reactive Programming PlayGround for Bangkit 2021 Hello! This repo contains the IntelliJ project that I use to present my talk, "Clean A

raditya gumay 3 May 16, 2021
CleanArchitecture is a sample project that presents a modern, 2021 approach to Android application development.

CleanArchitecture is a sample project that presents a modern, 2021 approach to Android application development. The goal of the pro

Shushant tiwari 0 Nov 13, 2021
Name of your app is an android app that allows building a todo list

Project 1 - SimpleToDo Name of your app is an android app that allows building a todo list and basic todo items management functionality including add

Javier Nazario 0 Nov 23, 2021
Crunch-Mobile - A Food Delivery Mobile App which uses Modern App Architecture Pattern, Firebase And a Simple Restful Api

Crunch-Mobile This is a Food Delivery Mobile App which uses Modern App Architect

Bright Ugwu 1 Jan 1, 2022
Matches-simulator-app - App Android Nativo de SimulaĆ§Ć£o de Partidas

Matches Simulator App App Android Nativo de SimulaĆ§Ć£o de Partidas. Este repositĆ³rio foi organizado em algumas branches que representam as implementaƧƵ

DIO 127 Dec 28, 2022
MVIExample - A sample app showing how to build an app using the MVI architecture pattern

MVIExample A sample app showing how to build an app using the MVI architecture p

Yasser AKBBACH 0 Jan 8, 2022
Notes-App-Kotlin - Notes App Built Using Kotlin

Notes-App-Kotlin Splash Screen Home Page Adding New Notes Filter Feature Search

Priyanka 4 Oct 2, 2022
This is a demo android app representing implementation of SE principles in android app development

Articles Demo This repository contains a sample Android App that shows most popular articles data from NY Times API. This is a sample app that shows h

Waesem Abbas 2 Jan 20, 2022
Matches-simulator-app - App Android Nativo de SimulaĆ§Ć£o de Partidas de Futebol

Matches Simulator App App Android Nativo de SimulaĆ§Ć£o de Partidas de Futebol - E

Glaucio Coutinho da Silva 1 Jan 18, 2022
A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

Puncz 87 Nov 30, 2022
Android library that creates app shortcuts from annotations

Shortbread Android library that generates app shortcuts for activities and methods annotated with @Shortcut. No need to touch the manifest, create XML

Matthias Robbers 1.8k Dec 30, 2022
Android To-Do MVVM Architecture App written in Kotlin.(ViewModel, ROOM, Livedata, Coroutines)

MVVM-To-Do-App A To-Do application written in kotlin using Android Architectural components What's new? Room + Coroutines - Upgraded Room to v2.1. Roo

Naveen T P 77 Dec 8, 2022
Android News app developed using Clean + MVVM architecture

Clean-MVVM-NewsApp An Android application built using Clean + MVVM architecture. Featured in Components used in the app. Kotlin - As a programming lan

Naveen T P 52 Jun 17, 2022
Make a cool intro for your Android app.

AppIntro AppIntro is an Android Library that helps you build a cool carousel intro for your App. AppIntro has support for requesting permissions and h

AppIntro Team 10.3k Jan 2, 2023
Android News Reader app. Kotlin Coroutines, Retrofit and Realm

News Reader Android News Reader app Code that follows Packt Publishing Kotlin in Practice Video Course Example of Kotlin Coroutine usage, with Realm a

Marko Devcic 22 Oct 3, 2022
Open source Crypto Currency Tracker Android App made fully in Kotlin

CoinBit CoinBit is a beautiful CryptoCurrency app, completely open sourced and 100% in kotlin. It supports following features Track prices of over 300

Pranay Airan 50 Dec 5, 2022
Andorid app which provides a bunch of useful Linux commands.

Linux Command Library for Android The app currently has 3203 manual pages, 1351 one-line scripts and a bunch of general terminal tips. It works 100% o

Simon Schubert 276 Dec 31, 2022
šŸ€ An Android app for dribbble.com

Mango Mango is an Android application for Dribbble. Inspired by Resplash, Plaid and Protein. Features āœØ Kotlin and RxKotlin: Yes, fully written in Kot

Li Zhao Tai Lang 657 Dec 22, 2022