Couchbase Lite Hotels Demo App

In spirit of the original demo app for the "Build Offline-Enabled Mobile Apps With Ionic and Couchbase Lite" talk at Couchbase Connect 2021, this app allows users to search and bookmark hotels using data loaded from a Couchbase Lite database.

You can find the original demo app here

Created with modern React and the new Couchbase Lite integration in Ionic.

Features

• Data from a Couchbase Lite database: The database is embedded into the Android and iOS apps.

• Couchbase Lite Plugin designed using Capacitor

• UI components powered by Ionic Framework: search bar, bookmarks, icons, list items, and more.

• Bookmarked hotels: Saved in a Couchbase Lite database.

• Cross-platform: Create iOS and Androids apps all from the same codebase with standard web technologies.

Tech Details

• UI: Ionic Framework 7 and React 18
• Native runtime: Capacitor 5
• Database: Couchbase Lite v3.x powered by Couchbase Lite integration

Development Requirements

• Javascript
  • Node 18
• Capacitor
  • Capacitor v5 cli
  • Understanding on Capacitor Plugins Development
• IDEs
  • Visual Studio Code
    • Visual Studio Code Ionic Extension
  • IntelliJ IDEA
• iOS Development

  • A modern Mac

  • XCode 14 or higher installed and working (XCode 15 installed is preferred)

  • XCode Command Line Tools installed

  • Simulators downloaded and working

  • Homebrew

  • Cocopods

  • A valid Apple Developer account and certificates installed and working

• Android Development
  • Android Studio installed and working
  • Android SDK 34 >= installed and working (with command line tools)
  • An Android Emulator downloaded and working

How to Run

Note: Installing and running this app, which uses Couchbase Lite Enterprise edition , which requires a license.

• Install the Ionic CLI: npm install -g @ionic/cli

Setup cbl-ionic plugin

• Clone the following repos into the same folder

    git clone [email protected]:biozal/cbl-ionic-hotels.git 
    git clone --recurse-submodules [email protected]:Couchbase-Ecosystem/cbl-ionic.git
    cd cbl-ionic
    git submodule update --remote --recursive

• Setup cbl-ionic by installing the dependencies and building the plugin

  npm install
  cd ios
  pod install
  cd ..
  npm run build
  cd ..

Setup the demo app

• Install the dependencies for the demo app

  cd cbl-ionic-hotels
  npm install
  cd ios/App
  pod install
  cd ../..

• Build the app:

  npm run build

• Run the app on your device from IDE:

   ionic cap sync ios

or

• Run via capacitor (recommended) iOS

  ionic capacitor run ios -l --external 

Android

  ionic capacitor run android -l --external