Code Monkey home page Code Monkey logo

journey's Introduction

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

journey's People

Contributors

ngchwanlii avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.