darahayes / ionic-showcase

Ionic GraphQL/DataSync/Web Push reference application

AeroGear Showcase Application

Example application using AeroGear Mobile Services.

Implementation

Implementation includes:

• Integration with AeroGear Mobile Services

• Ionic 4 Angular frontend backed by Cordova

• A Node.js GraphQL Server that implements a sample Tasks workflow

• Authentication provided by Keycloak integration on the server and client side

• GraphQL Subscriptions backed by an MQTT broker

GraphQL Client

The mobile application uses Voyager Client to provide additional offline capabilities on top of Apollo GraphQL.

GraphQL Server

The GraphQL server uses Voyager Server to provide GraphQL capabilities along with security, monitoring and tools to simplify GraphQL API development.

Getting Started

Requirements:

• Docker

• Node.js 8.x or above to run server

• (optional) access to a running OpenShift instance

Running the server

1. Start the Postgres database and the MQTT broker

   cd ./server
   docker-compose up

2. Start the server

   npm install
   npm run dev

   Note	If Keycloak integration is enabled on the server, and the Keycloak server is running using self-signed certificate, please make sure set this environment variable before running the server: export NODE_TLS_REJECT_UNAUTHORIZED=0

Running the Server with the Keycloak Integration

Follow these instructions to set up Keycloak for Authentication/Authorization.

1. Start Keycloak Server

   cd keycloak
   npm run keycloak

2. Configure the Keycloak Server

   npm run keycloak:init

This command creates the necessary resources in Keycloak and prints instructions you must follow to enable the integration.

Follow the instructions and copy the JSON configurations to the appropriate location. The showcase app and server will read these configurations and the integration will be enabled when they are started.

By default, two users that can log into the application are created.

• username: developer, password: developer

• username: admin, password: admin

Running the Server on OpenShift

1. Log into your OpenShift instance with the oc login command.

2. Deploy the Server with PostgreSQL Templates can be found in https://github.com/aerogear/datasync-deployment repository.

   git clone https://github.com/aerogear/datasync-deployment
   cd datasync-deployment
   oc new-app -f openshift/datasync-showcase.yml

3. To deprovision all of the resources from the template, run

   oc delete all -l app=ionic-showcase-server \
   && oc delete secret -l app=ionic-showcase-server \
   && oc delete pvc -l app=ionic-showcase-server

Running the Client

1. Install Cordova & Ionic 4

   npm install -g cordova ionic@4

2. Install dependencies

   npm install

3. Browse Ionic 4 app

   npm run start

4. Alternatively - Run as a mobile application in the Android emulator.

   npm run ionic:android

5. Or run as a PWA app

   npm run ionic:pwa

Note	To connect to the local GraphQL server, when the app is running in the Android emulator, change url in`src/assets/config/config.js` from localhost to 10.0.2.2. Note that Push notifications do not work in an emulator.

Adding integrations to the client

Client side is being configured dynamically by assets file located in src/assets/config/config.js. Making changes in config can point client side application to remote server and add additional integrations for Push and Auth

Example config:

window.showcaseConfig = {
  "backend": {
    "serverUrl": "http://yourserver/graphql",
    "wsServerUrl": "ws://yourserver/graphql"
  },
  "auth": {
    "realm": "<your realm>",
    "url": "https://your-server/auth",
    "clientId": "<your-client>"
  },
  "push": {
    "pushServerURL": "http://localhost:9999/",
    "android": {
      "senderID": "test",
      "variantID": "b7522eb7-5b73-464c-8a2b-b249ec1bd18b",
      "variantSecret": "60de4619-03b5-4536-a17c-bd13aa574e6a"
    }
  }
};

Note	When running in cloud, developers can swap this file dynamically using config-map or openshift secret