/journey

Online Travel App

Primary LanguageDart

Journey

Introduction

  • Journey is an online travel application
  • The purpose of building this application is to learn how to use Flutter framework. For simplicity, I have choose to clone one of the famous OTA in China - ctrip.com. Converting their mobile h5 UI to Flutter UI

Demonstration

Run the App

  1. First, follow this tutorial to setup Flutter
  2. Setup your iOS emulator and open it
  3. Setup your Android emulator open it
  4. Check your available device emulators using flutter emulators
  5. To run an emulator, run flutter emulators --launch <your_emulator_id>
  6. Clone journey
  7. Follow the notes on how to setup search function with voice recognition for specific platform at here.
    Note for iOS, under journey/ios/plugin/ASRPlugin, create BDSClientLib directory, then put libBaiduSpeechSDK.a file you downloaded from Baidu iOS Native SDK's ios_sdk/BDSClientLib into it
  8. After finish setup, cd to the journey project
  9. In Terminal, run flutter packages get
  10. Start your app by running flutter run -d <deviceId> or flutter run -d all to run with all devices you launched.

Implemented UI

  • Designed for iOS & Android UI
    • Home Page (首页)
    • Search Page (搜索)
    • Travel Page (旅拍)
    • My Page (我的)

Implemented functionalities & pattern

  • Caching images locally
  • Used staggered grid layout for travel page
  • Getting data/assets from GET / POST request from ctrip h5 mobile server
  • Lazy loading for more travel pages when user slide up
  • Handle refresh when user slide down
  • Clicking on specific icon/image/post can link back to h5 mobile side and displayed as in Flutter UI using WebView
  • Implemented Baidu's voice recognition for search
  • Implement Baidu's voice recognition for both iOS & Android by integrating native and flutter code using Message Channel
  • User can manually search using keyword

Note on implement Search function with Voice Recognition

  • Setup Android Native SDK

    • Download Baidu's Android 离在线融合 SDK
    • Read Baidu's Speech Recognition Documentation for setup details
    • Download the sdk, and unzip it.
    • Open your android folder under Android Editor mode, create new module and package name
    • Copy the sdk/core/libs/bdasr_V3_xxxx_xxx.jar to your Flutter android's android/<your-plugin>/libs/bdasr_V3_xxxx_xxx.jar
    • Copy the directory from sdk/core/src/main/jniLibsto your Flutter androids's android/src/main/<jniLibs>
    • Add -keep class com.baidu.speech.**{*;} to your Flutter android's proguard-rules.pro file
    • Copy AndroidMainfest.xml settings from Baidu's Speech Recognition Documentation to your android's AndroidMainfest.xml
    • In Baidu's Cloud Baidu's Speech Recogniztion, create an application and follow the on screen instruction.
    • To setup speech recognition service, copy paste 
      <service android:name="com.baidu.speech.VoiceRecognitionService" android:exported="false" />
      to your AndroidMainfest.xml within your 
      <application></application>
    • Configure dependencies between your app and your_speech_plugin in build.gradle (Module: app)
    • Under android/asr_plugin/java/<your-package-name>, implement your plugin function
    • Setup ndk framework that flutter supports in app's build_gradle
    • Setup your dependencies between Android's & Flutter by configure asr_plugin's build.gradle accordingly.
    • Remember to configure your app's build_gradle to resolve dependencies conflicts between app & asr_plugin & libflutter.so.
      • app depend on libflutter.so & asr_plugin
      • asr_plugin depend on libflutter.so

  • Setup iOS Native SDK

    • Download Baidu's iOS 离在线融合 SDK
    • Read Baidu's Speech Recognition Documentation for setup details
    • Download the sdk, and unzip it.
    • Open your xcode workspace under <your-project>/ios/Runnerxcworkspace
    • Create a new group such as plugin under Runner
    • Copy the sdk/BSDClientLib to your Flutter iOS's plugin/ASRPlugin group directory you just created.with create groups mode.
    • Add the sdk/BDSClientResource/ASR/BDSClientResources directory to your Flutter's iOS plugin/ASRPlugin group directory with the create folder references mode.
    • Add the sdk/BDSClientResource/ASR/BDSClientEASRResources directory to your Flutter's iOS plugin/ASRPlugin group directory with the create groups mode.
    • Rename your
    • Setup / linked necessary frameworks and libraries in iOS's workspace Runner -> General tab
      • Add libz.1.2.5.tbd framework
      • Add libc++.tbd framework
      • Add CoreTelephony framework
      • Add libsqlite3.0.tbd framework
      • Add libiconv.2.4.0.tbd framework
      • Add libBaiduSpeechSDK.a found in downloaded sdk/BDSClientLib
      • Adjust your Library Search Paths in Build Settings tab if library not found
    • Setup microphone permission usage
      • Under Runner/Info.plist, add key = Privacy - Microphone Usage Description, value = <any description you like>
    • Under your Runner/plugin/ASRPlugin, create files & implement your function. Ex: AsrManager.h, AsrManager.m, AsrPlugin.h & AsrPlugin.m to integrate with Flutter's client through MessageChannel
    • Register your AsrPlugin.h in Runner/App.delegate.m

  • Setup plugin & communication channel in Flutter

    • Create a plugin directory under your Flutter's lib directory.
    • Implement asr_manager.dart to invoke MethodChannel and functions so that we can communicate with native Android & iOS

App Deployment