Backand Real Time Map Ionic 2 Example App

An example app for Back& AngularJS SDK with CRUD and real-time update. For the full source code, see the GitHub repo. It fetches a collection of markers from the backend. Any update to the backend generates a real-time update via Socket.io to the app.

The app construction was fast and easy being based the excellent tutorials of Josh Morony on Ionic 2. Thanks you, Josh! ( tutorials referenced at bottom of this post).

The Frameworks

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

Back& is a Backend As A Service (BAAS) providing a relational database with a CRUD REST API, together with AWS Lambdas, Email and additional services.

The second release of Ionic (which is the current release) is based on Angular JS 2.

Back& SDK for Angular.js 2 enables Angular apps to use Back&. The SDK provides to the developer on JavaScript promises for the various CRUD actions.

App Screens

Map

Show a map with markers from the database. The markers are fetched per the current visible region of the map.

Clicking a marker, opens the card screen.

Card

Show marker details. User can update the marker details and save the marker to the database

Create Marker

Fill in a new marker.

Sign Up

Sign up

Login / Logout

  • Login
  • Log out

Login Authentication

  • Email and password
  • Facebook

Dynamic Update of Screens

The side menu updates its content based on authentication events. The login screens becomes the logout screen when the user is logged in.

Ionic Native Plugins

Geolocation Plugin

ionic plugin add cordova-plugin-geolocation

Cordova Network Information Plugin

ionic plugin add cordova-plugin-network-information

InAppBrowser

Needed for Facebook authentication

ionic plugin add cordova-plugin-inappbrowser

Working with Backand

Provider

We construct a provider BackandDB that wraps the Backand Angular JS 2 SDK. In the provider constructor we initialise the SDK,

this.backandConfig = {
    appName: <your backand app name>,
    signUpToken: <your sign up token>,
    anonymousToken: <your anonymous token>,
    runSocket: true,
    isMobile: platform.is('mobile'),
    useAnonymousTokenByDefault: true
};
backand.init(this.backandConfig);

Model

We have a single object markers whose model is:

{
    "name": "markers",
    "fields": {
      "userId": {
        "type": "string"
      },
      "loc": {
        "type": "point"
      },
      "timestamp": {
        "type": "datetime"
      }
}

Observables

The SDK works with promises and in the provider we make it into an observable, like this:

getMarkers(options): Observable<any> {      
    return Observable.fromPromise(this.backand.object.getList('markers'));
}

and subscribe to it in other providers or in pages, like this:

this.backand.getMarkers(options).subscribe(
        markers => {
            console.log(markers);
        },
        err => {
            console.log(err);   
        });

Authentication

The provider has a flag isUserLoggedIn.

We listen to authentication events, and construct a merged observable:

let obs: Observable<any> = Observable.merge(
    Observable.fromEvent(window, this.backand.constants.EVENTS.SIGNIN),
    Observable.fromEvent(window, this.backand.constants.EVENTS.SIGNOUT),
    Observable.fromEvent(window, this.backand.constants.EVENTS.SIGNUP)
);

listen to it, and update the flag.

We provide the observable via the function listenAuthenticationEvents, to components such as pages that would like to modify their presentation and behavior on such events.

Socket

Create a real time action in Backand.
If such an action, for instance, emits the event 'markersCreate', then we can listen for the event with:

this.backand.on('markersCreate', function(data){
    // do something with data
});

As in the function on in src/providers/backand-db.ts. In such a case, we fetch the updated list of markers from the backend.

References

Ionic 2: How to Use Google Maps & Geolocation

Dynamically Loading Markers with MongoDB in Ionic 2 – Part 1

Dynamically Loading Markers with MongoDB in Ionic 2 – Part 2

Creating an Advanced Google Maps Component in Ionic 2