Page tree
Skip to end of metadata
Go to start of metadata

 

 

Most mobile apps need a strong scalable backend infrastructure for security, content editing, rest-services and integration. Magnolia solves all these problems in an excellent way. 

We created a mobile blueprint project for you to showcase how mobile apps and IoT are integrated with magnolia.

We used Cordova/IONIC for our blueprint as hybrid mobile framework in which we implemented most of the use cases described in: 

http://dev.magnolia-cms.com/blog/2015/05/the-iot-retail-and-beacons-how-they-all-tie-together/

Step-by-step guide

To start please git clone https://git.magnolia-cms.com/git/services/IoTSmartShop.git . Note that you need a partner or enterprise git account for the checkout.

You will get the following folders:

IOTProject which contains the magnolia project 

IOTShopApp which contains the mobile app

 

 

Building the magnolia project

Import the maven projects located under: IOTProject into Eclipse or IntelliJ

Follow the usual steps as described for example in https://documentation.magnolia-cms.com/display/DOCS/Exercise+1+-+Eclipse+and+bundle

Make sure that you set your WebApps path to '/' so you can reach magnolia under: yourIP/:yourPort

 

You will get the following apps in addition to the standard magnolia apps: a Beacon Management app, a Coupon app and a Mobile Messages app

Coupons: The app allows you to manage coupons to discount products. Every coupon generates an QR code that can be used on the register to discount the purchase. The QR code could be exchanged to barcode or any other format by changing the SaveCouponFormAction class.

 

 

The coupon edit dialog gives you the following fields:

Coupon name: Sets the name of the coupon. This name is displayed in the mobile apps collected coupon retrieval dialog. 

Coupon Photo: Specifies the image that is going to be displayed to the user if he comes near a coupon beacon.

Coupon Code: This string is used to generate the QR code.

Display massage: This text is displayed to the user additionally to the image if he comes near to the coupon.

 

Mobile Messages: Allows you to manage messages for the mobile shop landing page

 

The message location indicates the place where the message should appear

The message content takes the text that is displayed in the target location

 

 

BeaconManagement: This will allow you to manage beacons and attach events to the configured beacons.

The fields UUID major and minor configure your beacon.

The field range specifies how close the mobile phone should be to the beacon to trigger the beacon event. Please note that the distance is only an estimate as object around the beacon can damp the beacons signal. 

Event type specifies which event type should be triggered if the user comes in range.

Serve content:  Serves the content from an magnolia page

Display message: Sends a message to the user

Coupon: Offers a coupon which can be claimed at checkout.

Understanding iBeacons

It is important to understand that a standard iBeacon is not aware about any device or about its intended usecase. All it does is sending a signal that can be picked up by a mobile phone to detect proximity to the beacons location. The The actions that should be triggered when the mobile is near the beacon must be configured in Magnolias iBeacon app.

Getting UUID, major and minor numbers

Every beacon has a UUID as well as an major and minor number. This number is supplied by your beacon vendor. If you got your beacons on the magnolia conference then go to https://www.magnolia-cms.com/magnolia/use-cases/internet-of-things/beacon-registration to get your beacon identifier.

 

Products: This will allow you to configure products that are displayed in your mobile app.

 

 


Building the mobile App

To build and run the mobile app please download and install:

http://ionicframework.com/getting-started/

https://cordova.apache.org/

If you are planning to build for android then download the Android-SDK: http://developer.android.com/sdk/index.html 

If you plan to build for IOS then please download apple tools and Xcode > 4.5.x. Of course this needs a Mac.

 

It is highly recommended that you take the time and have a look at a starter tutorial to learn the basics of angularjs to understand the program code if you hadn't have the time yet to learn angular https://www.codeschool.com/courses/shaping-up-with-angular-js is a great starter.

It also makes sense to follow http://ionicframework.com/getting-started/ on the first step to get a basic understanding of IONIC.

Please use proper tooling as it speeds up your development a lot. For example the IntelXDK https://software.intel.com/de-de/html5/tools is a great free tool for mobile development.

 

Edit the file: www/js/app.js and change the variable MGNL_URL to your IPAddress to ensure proper communication between backend and mobile app

Rest url

Please note that the MGNL_URL must also include your webapps url eg: http://192.168.10.133:8081/magnoliaPublish if you are NOT using the context root

 

 

Go to the IOTShopApp folder

If you start freshly then you have to specify the platform that should be supported.

Therefore type cordova platform add android is you are developing for android and cordova platform add ios if you are developing for IOS. 

To test the actual build on your phone type: cordova run android --device for android or cordova run ios --device for IOS

 

 

 

The landing page shows the Navigation tab to navigate to Product categories as well as home.

The Info panels show recent updates and announcements which are served from Magnolias mobile message app.

Your Coupons shows a dialog with all claimed coupons. Those can be used on checkout to claim the discount via QR-Code

The Products tab shows all product categories managed in magnolias products app.

 

If a product is selected then the product data is displayed in the product view 

 

Under the hood:

Mobile:

The mobile smart shop app builds on Cordova/Ionic. To integrate the iBeacon functionality the com.unarin.cordova.beacon plugin is in use.

To keep things simple all functionality is kept in app.js controllers.js and services.js

app.js keeps the app configuration, as well as the routes configuration.

controllers.js keeps the controllers for the views

services.js is used for rest access

 

 

Magnolia:

The main functionality is built in the two Magnolia-modules: 

IOTModule and Magnolia SmartShopApps

IOTModule brings the rest services for  beacon management as well as the beacon management content app.

Probably you need custom events for your project. As always we made it easy for you extend the app. Just edit: /modules/IOTModule/apps/beacons/subApps/beaconDetail/editor/form/tabs/beaconDetail/fields in the config app.

To get your new configured data out via rest simply add your new field name to /modules/IOTModule/config/IOTRestParameter and you are all set.