Estimote Ionic Starter App
Build an Ionic App with Estimote Beacons "ranging"
- iOS, Android
- 3 years ago
- 3 years ago
Update March 2, 2018: I changed the instructions a bit, because previously the ZIP was too large and therefore corrupted - sorry for the inconvenience. Note: For this Starter app to work, you need the Estimote Ionic Plugin from here: https://market.ionicframework.com/plugins/estimote-ionic-plugin
This Estimote Starter app is the right starting point if you want to build an Ionic app that uses the "ranging“ functionality of iBeacons of Estimote Beacons. Please see: https://developer.estimote.com/ibeacon/tutorial/part-3-ranging-beacons/
Beacon ranging provides fine-grained data about beacons detected nearby, as opposed to monitoring’s coarse-grained “inside region” and “outside region.” The data includes exact UUID, major, and minor values of ranged beacons, as well as proximity estimations.
Proximity estimations are based on received signal strength, and are good to roughly determine if the device is close to or far away from a beacon. Beacons are not meant to provide distance estimations!
Ranging works only when the app is running, and only requires the “when in use” authorization to access Location Services.
If you need a Starter app for the Estimote "Monitoring" functionality, please let us know.
This Starter app works for iOS and Android.
To get it running:
- Order some Estimote Proximity Beacons from Estimote (http://www.estimote.com)
- Log into your Estimote Cloud at https://cloud.estimote.com, go to "Apps" , klick "Add New App"
- Click "Proximity for Multiple Beacons" and click "Use this Template", then choose either "Android" or "Objective-C"
- Choose at least 3 of your beacons from the list, click "Download Template". This downloads a template, but you will not need this template. The most important thing is that you now have an App ID and an App Token (you can view this in your Estimote Cloud Account under Apps.
- Create a new Ionic app according to the ionic instructions: ionic start EstimoteIonicStarterApp Then, choose „tabs“; Would you like to integrate your new app with Cordova to target native iOS and Android?: y; Install the free Ionic Pro SDK and connect your app?: n
- cd EstimoteIonicStarterApp
- Rename the current "src" directory to „srcOld“ and copy the downloaded starter app src dir to this location
- To edit the code, it’s best to use „Visual Studio Editor“ (free), after you installed this editor you can simply, „code .“ (Without quotes)
- Add ios and android platform - type in the terminal in the main directory of this starter app: "ionic cordova platform add android" Afterwards add ios (if needed): "ionic cordova platform add ios"
- Add the Estimote Ionic Plugin: Download it from here https://market.ionicframework.com/plugins/estimote-ionic-pluginThen add it with: "ionic cordova plugin add /path_to_your_plugin/EstimoteSDKPlugin"
- Use these values in the Starter App (downloaded from here) in src/app/app.component.ts and modify line 32 with your own values: EstimoteSDKPlugin.initialize("
", " ".
For Android, you need to specify Java 7: open platforms/android/build.gradle - go to line 225 and 226 and change
sourceCompatibility JavaVersion.VERSION_1_6 targetCompatibility JavaVersion.VERSION_1_6
sourceCompatibility JavaVersion.VERSION_1_7 targetCompatibility JavaVersion.VERSION_1_7
(otherwise you will get a compilation error in the next step)
- Add the globalisation plugin: ionic cordova plugin add cordova-plugin-globalization
- And then run: npm install --save @ionic-native/globalization
- Compile your app for Android by entering "ionic cordova build android" and install the app on your device. (for Android)
- To detect your first beacon, use the Estimote App to configure your Beacons: set one Beacon to: iBeacon, major: 1, minor: 1
Run the app on an Android Device - you Beacon should be detected!
To start developing: In src/assets/data/data.json you can specify you own Beacons and app data. Even in multiple languages - depending on the phone language.
References: This Starter app has been used to create a museum app for iOS and Android: Search for "DomQuartier" in the Google Play and IOS App Store.
If you have any question or you get stuck during these initial steps, please send an email to email@example.com - You'll get an answer within hours. If you need development support, we can also help you!