feat(examples): New Ionic demo app - Appointments (#499)

This is a demo combining Electric with Ionic - a simple
Appointment/Booking app.

The Ionic CLI was used to start an Ionic app, I then manually added the
scaffolding from our starter. This process can be seen in the first two
commits.

It now uses the latest Electric with the proxy, and exercises the new
`uuid`, `timestamp` and `bool` type support.

examples/ionic-demo/.browserslistrc

@@ -0,0 +1,6 @@
+Chrome >=79
+ChromeAndroid >=79
+Firefox >=70
+Edge >=79
+Safari >=14
+iOS >=14

examples/ionic-demo/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:react/recommended', 'eslint:recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+}

examples/ionic-demo/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+/.vscode/*
+!/.vscode/extensions.json
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Optional eslint cache
+.eslintcache
+
+# Generated ElectricSQL client
+src/generated/
+
+# wa-sqlite files
+public/wa-sqlite-async.mjs
+public/wa-sqlite-async.wasm

examples/ionic-demo/.prettierignore

@@ -0,0 +1,10 @@
+*.log
+.DS_Store
+dist/
+node_modules/
+.tmp/
+build/
+.tool-versions
+.github/
+src/generated/
+wa-sqlite-async.mjs

examples/ionic-demo/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

examples/ionic-demo/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ionic.ionic"]
+}

examples/ionic-demo/README.md

@@ -0,0 +1,115 @@
+<a href="https://electric-sql.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)"
+        srcset="https://raw.githubusercontent.com/electric-sql/meta/main/identity/ElectricSQL-logo-light-trans.svg"
+    />
+    <source media="(prefers-color-scheme: light)"
+        srcset="https://raw.githubusercontent.com/electric-sql/meta/main/identity/ElectricSQL-logo-black.svg"
+    />
+    <img alt="ElectricSQL logo"
+        src="https://raw.githubusercontent.com/electric-sql/meta/main/identity/ElectricSQL-logo-black.svg"
+    />
+  </picture>
+</a>
+
+# Electric Appointments: An ElectricSQL & Ionic Example
+
+This is an example showing how to build an Ionic Framework app using ElectricSQL, including packaging if for iOS and Android using Capacitor.
+
+The app is a simple appointment scheduling app, the type a company would use to schedule appointments with clients. It's split into two workflows, one for the customer to schedule an appointment, and one for an employee to view and administer their calendar.
+
+When built for the web it uses the wa-sqlite driver, for iOS and android it uses the capacitor-sqlite driver.
+
+## Prereqs
+
+You need Docker, Docker Compose v2 and Nodejs >= 16.14.
+
+For building the Capacitor iOS and Android targets you need to follow the environment setup instructions here: https://capacitorjs.com/docs/getting-started/environment-setup
+
+## Install
+
+Clone this repo and change directory into this folder:
+
+```sh
+git clone https://github.com/electric-sql/electric
+cd electric/examples/ionic-demo
+```
+
+Install the dependencies:
+
+```shell
+npm install
+```
+
+## Backend
+
+Start Postgres and Electric using Docker (see [running the examples](https://electric-sql.com/docs/examples/notes/running) for more options):
+
+```shell
+npm run backend:up
+# Or `npm run backend:start` to foreground
+```
+
+Note that, if useful, you can connect to Postgres using:
+
+```shell
+npm run db:psql
+```
+
+The [database schema](https://electric-sql.com/docs/usage/data-modelling) for this example is in `db/migrations/create_tables.sql`.
+You can apply it with:
+
+```shell
+npm run db:migrate
+```
+
+## Client
+
+Generate your [type-safe client](https://electric-sql.com/docs/usage/data-access/client):
+
+```shell
+npm run client:generate
+# or `npm run client:watch`` to re-generate whenever the DB schema changes
+```
+
+## Run the webapp
+
+The app is a React application, to run it:
+
+```bash
+npm run start
+// or this if you have the ionic cli installed:
+ionic serve
+```
+
+The app displays the port on localhost where you can view the app.
+
+## Build and run the iOS app
+
+To build and run the app on an iOS device follow the prerequisites above and run:
+
+```
+ionic capacitor build ios
+```
+
+Xcode should open ready for running in the simulator or on a tethered device.
+
+When testing in the iOS simulator, the device can see the Electric sync service on your `localhost`, however when running on another device you will need to build with an accessible `ELECTRIC_URL`. Note that as the app connects to the sync service with a web socket, when running on a different host you may have to use SSL (wss://). The easiest way to do this is with a service such as [ngrok](http://ngrok.com). For example:
+
+```
+ngrok http 5133
+```
+
+Then in another terminal with the url provided by ngrok
+
+```
+ELECTRIC_URL=https://abcdef123456.ngrok.app ionic capacitor build ios
+```
+
+## Build and run the Android app
+
+To build and run the app on an iOS device follow the prerequisites above and run the following command, note you may have to expose your sync service on a an SSL enabled endpoint (see iOS instruction for an example with ngrok).
+
+```
+ELECTRIC_URL=https://hostname.of.sync.service ionic capacitor build android
+```

examples/ionic-demo/android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

examples/ionic-demo/android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

examples/ionic-demo/android/app/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace "io.ionic.starter"
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.ionic.starter"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

examples/ionic-demo/android/app/capacitor.build.gradle

@@ -0,0 +1,23 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_17
+      targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-community-sqlite')
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-haptics')
+    implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-status-bar')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}