How to develop merchant browsing history feature in LINE SHOPPING App using Clean Architecture @TECHPULSE 2023

- Speaker: Ricky Hu
- Event: http://techpulse.line.me/

作為一個 TECH FRESH，如何運用有限的時間要，透過 Clean Architecture 和 Flutter Bloc 等技術來重新設計 LINE SHOPPING App 內部 Webview 的 Appbar，以及分享在開發階段如何將任務分散成多個 Sub-task 來跟團隊合作並減輕團隊成員在 Code Review 時的負擔。

Transcript

1. View Slide

2. Agenda › LINE SHOPPING App Introduction
   › Clean Architecture Data Flow
   › Feature Implementation
   2
   

   View Slide

3. › Developed with Flutter
   › Structured with Clean Architecture
   › Improve Testability & Maintainability
   LINE SHOPPING App
   3
   

   View Slide

4. Recently Viewed
   View Store
   4
   LINE SHOPPING App Introduction
   

   View Slide

5. Clean Architecture Data Flow
   BrowsingHistoryWidget
   Merchant
   BrowsingHistoryBloc
   GetBrowsing
   HistoryUseCase
   BrowsingHistory
   Repository
   BrowsingHistory
   ApiService
   ApiClient
   5
   Add Event
   

   View Slide

6. Clean Architecture Data Flow
   BrowsingHistoryWidget
   Merchant
   BrowsingHistoryBloc
   GetBrowsing
   HistoryUseCase
   BrowsingHistory
   Repository
   BrowsingHistory
   ApiService
   ApiClient
   6
   

   View Slide

7. Clean Architecture Data Flow
   BrowsingHistoryWidget
   Merchant
   BrowsingHistoryBloc
   GetBrowsing
   HistoryUseCase
   BrowsingHistory
   Repository
   BrowsingHistory
   ApiService
   ApiClient
   7
   

   View Slide

8. Clean Architecture Data Flow
   BrowsingHistoryWidget
   Merchant
   BrowsingHistoryBloc
   GetBrowsing
   HistoryUseCase
   BrowsingHistory
   Repository
   BrowsingHistory
   ApiService
   ApiClient
   8
   Dependency Inversion
   

   View Slide

9. Clean Architecture Data Flow
   BrowsingHistoryWidget
   Merchant
   BrowsingHistoryBloc
   GetBrowsing
   HistoryUseCase
   BrowsingHistory
   Repository
   BrowsingHistory
   ApiService
   ApiClient
   9
   

   View Slide

10. Clean Architecture Data Flow
    BrowsingHistoryWidget
    Merchant
    BrowsingHistoryBloc
    GetBrowsing
    HistoryUseCase
    BrowsingHistory
    Repository
    BrowsingHistory
    ApiService
    ApiClient
    10
    

    View Slide

11. Clean Architecture Data Flow
    BrowsingHistoryWidget
    Merchant
    BrowsingHistoryBloc
    GetBrowsing
    HistoryUseCase
    BrowsingHistory
    Repository
    BrowsingHistory
    ApiService
    ApiClient
    11
    Return “MerchantDto”
    

    View Slide

12. Clean Architecture Data Flow
    BrowsingHistoryWidget
    Merchant
    BrowsingHistoryBloc
    GetBrowsing
    HistoryUseCase
    BrowsingHistory
    Repository
    BrowsingHistory
    ApiService
    ApiClient
    12
    Return “Merchant”
    

    View Slide

13. Clean Architecture Data Flow
    BrowsingHistoryWidget
    Merchant
    BrowsingHistoryBloc
    GetBrowsing
    HistoryUseCase
    BrowsingHistory
    Repository
    BrowsingHistory
    ApiService
    ApiClient
    13
    

    View Slide

14. Clean Architecture Data Flow
    BrowsingHistoryWidget
    Merchant
    BrowsingHistoryBloc
    GetBrowsing
    HistoryUseCase
    BrowsingHistory
    Repository
    BrowsingHistory
    ApiService
    ApiClient
    14
    Emit State
    

    View Slide

15. ApiClient
    Frameworks & Drivers
    ApiClient
    15
    

    View Slide

16. BrowsingHistoryApiService
    Interface Adapters
    BrowsingHistory
    ApiService
    16
    

    View Slide

17. BrowsingHistoryApiService
    Interface Adapters
    BrowsingHistory
    ApiService
    17
    BrowsingHistoryApi
    ServiceImpl
    

    View Slide

18. BrowsingHistoryRepository
    Use Cases
    BrowsingHistory
    Repository
    18
    

    View Slide

19. BrowsingHistoryRepository
    Use Cases
    19
    BrowsingHistory
    Repository
    BrowsingHistory
    RepositoryImpl
    

    View Slide

20. Merchant
    Entities
    Merchant
    20
    

    View Slide

21. GetBrowsing
    HistoryUseCase
    GetBrowsingHistoryUseCase
    Use Cases
    21
    

    View Slide

22. BrowsingHistoryBloc
    Interface Adapters
    Browsing
    HistoryBloc
    22
    

    View Slide

23. BrowsingHistoryBloc
    Interface Adapters
    Browsing
    HistoryBloc
    23
    

    View Slide

24. BrowsingHistoryWidget
    Frameworks & Drivers
    BrowsingHistory
    Widget
    24
    

    View Slide

25. Summary
    Testability & Maintainability BLoC State Management
    Dependency Rule
    Interface Adapters
    Entities
    Use Cases
    Frameworks & Drivers
    25
    

    View Slide

26. Thank you
    26
    

    View Slide