This is an updated version of the Demo app for the "Build Offline-Enabled Mobile Apps With Ionic and Couchbase Lite" talk at Couchbase Connect 2021. The app allows users to search and bookmark hotels using data loaded from a Couchbase Lite database.

This app is build on Capacitor 6 - and it's recommended you have a basic understanding of Capacitor and Ionic before running this app.

Capacitor docs Ionic docs

Features

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

• Plugin is 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 Android apps from the same codebase.

Tech Details

• UI: Ionic Framework 8 and Angular 17
• Native runtime: Capacitor 6
• Database: Couchbase Lite v3.x using CBL-Ionic

How to Run

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

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

Setup cbl-ionic plugin

• Clone the following repos into the same folder

    git clone git@github.com:biozal/cbl-ionic-hotels-angular.git
    git clone --recurse-submodules git@github.com: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 demo app

• Install the dependencies for the demo app

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

• Build the app:

  npm run build
  npx cap sync

• Run the app on your device from Xcode:

   npx cap open ios

or

• Run via capacitor (recommended) iOS

  ionic capacitor run ios -l --external 

Android

  ionic capacitor run android -l --external