Skip to content

JeckOnly/Pokemons

Repository files navigation

神奇宝贝图鉴·Pokedex

🔥A Pokedex ​fully based on Jetpack Compose, with Coroutine, Flow, Retrofit, Jetpack(Hilt, WorkManager, ViewModel, Room, DataStore)and other MAD Kits be recommended by Google.

📌 MVI ➕ Repository Pattern ➕ Recommed Architecture ➕ Modularization.

Download

Go releases to download the latest apk.

Teck-stack

  • min SDK 23, compile SDK 32.
  • 💯Kotin based, Coroutine and Flow for asynchronous.
  • Jetpack Compose: For UI, no xml anymore.
    • Compose Navigation: Navigation between Composables
    • Compose ConstraintLayout: ConstraintLayout is a layout that allows you to place composables relative to other composables on the screen
    • Material: This is the higher level entry point of Compose, designed to provide components that match those described at www.material.io.
  • Acompanist: Accompanist is a group of libraries that aim to supplement Jetpack Compose with features that are commonly required by developers but not yet available.
    • systemUIController: A library that provides easy-to-use utilities for recoloring the Android system bars from Jetpack Compose.
    • pager: A library that provides utilities for building paginated layouts in Jetpack Compose, similar to Android's ViewPager.(In fact, it has some bugs right now, but it' s ok)
  • Jetpack
    • Lifecycle: Observe Android lifecycles and handle UI states upon the lifecycle changes.
    • ViewModel: Manages UI-related data holder and lifecycle aware. Allows data to survive configuration changes such as screen rotations.
    • Room: Constructs Database by providing an abstraction layer over SQLite to allow fluent database access.
    • Proto DataStore: A data storage solution that allows you to store key-value pairs or typed objects with protocol buffers
    • Hilt: for dependency injection.
    • WorkManager: WorkManager is the recommended solution for persistent work
  • Splash Screen: Compatible with Android12 default splash screen.
  • Coil: Load image from network.
  • Palette: Extract representative color palettes from images.
  • Retrofit2 & OkHttp3: Construct the REST APIs and paging network data.
  • Sandwich: Construct a lightweight and modern response interface to handle network payload for Android.
  • Gson: Used to convert network response to Java objects.

Modularization

Pokedex is modulized, and I learn how to do it form NowInAndroid by Google.This is my project module structure diagram:

image-20221025141602694

Architecture

Priciples

Separation of concerns

Programming with jetpack compose naturally applies this principle

Drive UI from data models

Another important principle is that you should drive your UI from data models, preferably persistent models. Data models represent the data of an app. I apply domain specific models in this project. There are dto models(from network), entity models(save in database) and UI models(show in UI).And use a mapper file that contains some functions to transform between them.

Single source of truth

When a new data type is defined in your app, you should assign a Single Source of Truth (SSOT) to it. The SSOT is the owner of that data, and only the SSOT can modify or mutate it.

Unidirectional Data Flow

The single source of truth principle is often used in our guides with the Unidirectional Data Flow (UDF) pattern. In UDF, state flows in only one direction. The events that modify the data flow in the opposite direction.

More info about recommended best practices., I just copy form here.

UI Layer

Navigation

image-20221025135936027

UI and StateHolder Arch

image-20221025140144101

More Infos

It is highly recommended that you learn from the official documentation and make your hands dirty.

Data Layer

Data Layer contains Repository and Data Source.It is generally accessible only by the UI layer.

This is the official diagram:

image-20221025140557633

And in this project, data sources constains: remote, database, datastore(Jetpack), and repo constains: PokemonRepo, UserPrefsRepo.

image-20221025140741042

Domain Specific Model

ApiModels match the API schema. They are immutable (because they’re just used for one-time communication) and nullable (since we might request a subset of fields).

DbModels match the DB schema. They are mutable (because of OrmLite) but provide more non-null property guarantees. (In an ideal, non-ORM world, they would be immutable as well.)

UiModels match whatever the UI needs. They are immutable and their properties are generally non-null.

Between each of these models are converters. We send a network request to the server and get back an ApiModel; that’s converted into a DbModel for insertion into the database. Then the UI queries the database, which converts the DbModel into whatever UiModels the UI requires.

image-20221025142605107

You can learn more in here

Reference

The idea to make a pokedex app in jetpack compose comes form skydoves pokedex, he make his app in views, and i decide to make a fully Compose app, and i learn a lot from him.

UI design inspiration comes from dribble.

License

Pokedex to show Pokemons
Copyright (C) 2022  JeckOnly

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.