iGurme is a demo app written with react native to test and display features of the Insider Mobile SDK. A more thorough SDK documentation can be found at mobile.useinsider.com/documentation. The UI design of the app can be found from Zeplin: iGurme Designs. This version of iGurme is developed by Ralfi Salhon. For any questions or concerns, contact rifat.salhon@tufts.edu

• Android APK Download
• iOS TestFlight Download (Coming Soon)

$ git clone https://github.com/useinsider/rn-test-app.git
$ git clone git@github.com:useinsider/rn-test-app.git

$ cd rn-test-app
$ npm install
$ react-native link

Requires working from a MacOS, and to have XCode installed

$ cd ios 
$ pod install
$ cd ..
$ react-native run-ios

Alternatively, you could open the ios/iGurme.xcworkspace file and run the project from there.

Note: You might need to perform SDK 9.0.0 update manually on iOS. See https://github.com/useinsider/mobile-ios for the SDK. If this is the case, you need to delete the Framework and Libraries folder from under RNInsider.xcodeproj on XCode and place SDK folder from mobile-ios repository under RNInsider.xcodeproj. Then rebuild.

No additional steps required for Android installation. However, you do need to have an Android emulator installed or a physical device to run the application from.

$ react-native run-android

To check if your physical device is recognized by react-native:

$ adb devices

The output will be all connected devices. React Native will build to device #1 on the list.

In the case of error: Unable to load script from assets ‘index.android.bundle’ run the following command to run on Android:

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Source: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

In the case of error: No bundle URL present close all terminal tabs, and then open one at the root of the project and run:

$ react-native start --reset-cache

In the case of error linker error on XCode, close all terminal tabs and run this command:

$ rm -rf node_modules && npm i && react-native link && react-native start --reset-cache

then try to run again.

react-navigation set up can be found at App.js. iGurme uses the createMaterialBottomTabNavigator method by react-native-material-bottom-tabs to create it's bottom tab structure. The getIcon(tintColor, iconName) method can be used to create new Icons.

The src folder contains 4 folders:

1. components Has folder names for each tab, and holds all the components for that tab.

2. database Has a single file called items.js which acts like a database. Items are exported as objects. In the future, if an actual database is used, make sure to modify files src/screens/HomeTab/Scene.js and src/components/SearchTab/VerticalVategorySlider.js to reflect these changes correctly.

3. images Has folder names for each tab, and holds all the images for that tab. Also has a shared folder for shared images.

4. screens Has folder names for each tab, and holds all the screens for that tab. The default navigation for the stack can be found at App.js . This is defined by the initialRoute key under the createStackNavigator method.

The SDK is initialized with the following default values:

const defaultPartnerName = "ibusiness";
const defaultSenderID    = "148378682679";
const defaultEndpoint    = "https://mobile.useinsider.com";
const appGroup           = "group.com.useinsider.iGurmeV3";

The partnerName, senderID, and endpoint attributes can be edited from the Developer Options screen. This screen can be accessed by scrolling down from the Profile Tab, and clicking Developer Options.

Deeplinks can be used in conjunction with push notifications to direct the user directly to a product page or the cart. For all deeplinks, the key is product. The value can be the 3-letter category name TEA, COF, CUP, or ACC, followed by a number 1-5. Alternatively, the value can be cart which directs the user to the cart page.

iGurme can utilize Advanced Push Notifications for both iOS and Android. The appGroup preference is for iOS Advanced Push Notifications set up. If you wish to change this value, refer to the General Settings --> Bundle Identifier of iGurme Project Targets --> NotificationService and NotificationContentExtensions

File: src/components/HomeTab/HorizontalItem.js Function: goToItemPage() calls the method RNInsider.tagProduct(item.id); to activate Social Proof

File: src/screens/LoginScreen.js Function: initiateRNInsider() calls the method RNInsider.startTrackingGeofence(); to activate Geofence

Please note that Location permission is not asked by default on Android. iGurme app settings need to be manually modified to enable Geofence tracking.

File: src/screens/CartTab/Scene.js Function: getButtonStyle()

RNInsider.getStringWithName("purchase_button_text",  "PLACE ORDER",  "Content", value => {
    this.setState({ buttonText: value });
});
RNInsider.getStringWithName("purchase_button_color",  "orange",  "Content", value => {
    this.setState({ buttonColor: value });
});

key: purchase_button_text value: <Any String> default: PLACE ORDER
key: purchase_button_color value: <Any Color, hex or rgb> default: orange

File: src/screens/HomeTab/Scene.js Function: getBannerImages()

RNInsider.getStringWithName("banner_images", "tea", "Content", value  =>  {
    if (value == "coffee") { <change banner images to Coffee> }
});

key: banner_images value: tea or coffee default: tea

File: src/screens/LoginScreen.js Function: getProfileStyle()

RNInsider.getStringWithName("testStringVariable", "default", "Content", value => {
    this.setState({ profileStyle: value});
});

key: testStringValue value: default or alternate default: default

File: src/screens/CartTab/Scene.js Function: placeOrder() calls the method RNInsider.trackPurchasedItems(<params>); for Tracking Revenue

File: src/screens/HomeTab/ItemClicked.js Function: addToCart() calls the method RNInsider.itemAddedToCart(<params>); for Cart Reminder

File: src/screens/CartTab/Scene.js Function: deleteItem() calls the method RNInsider.itemRemovedFromCart(<params>); for Cart Reminder

File: src/screens/CartTab/Scene.js Function: placeOrder() calls the method RNInsider.cartCleared(); for Cart Reminder

iGurme does not currently utilize the GDPR Compliance method, the value is sent as true by default. This feature will be added in a future update.

iGurme does not currently utilize the Message Center. This feature will be added in a future update.

iGurme does not currently utilize the Recommendation Engine. This feature will be added in a future update.

RNInsider.tagEvent() is used on various instances throughout iGurme. You can find the implemented Events and Attributes here: Google Spreadsheet

iGurme does not currently utilize the App Tracker. This feature will be added in a future update.

The iGurme app icon can be changed with a push notification. By passing birthday as the App Icon preference on Campaign Settings, the icon will be replaced with a blue iGurme logo.

iGurme app has a secret Developer Options screen. This screen can be accessed by scrolling down on the Profile tab. This page is split up to 5 parts:

This collapsible offers the following options:

• Start app on this page?
  • Allows the app to automatically redirect to the Developer Options screen when it is relaunched
• Location enabled?
  • This option manually notifies the SDK of the user's location preference. Please note that the user still needs to have their Location privacy settings enabled in addition to this option being turned on for Geolocation to work.
• Push enabled?
  • This option manually notifies the SDK of the notification preference. Please note that the user still needs to have their Notification settings enabled in addition to this option being turned on for Push Notifications to work.
• Partner Name
  • This option allows for dynamically changing the partnerName parameter which gets passed to the RNInsider.init() function. Please note that updating this option requires the app to be relaunched for it to take effect. Also, since the URL Bundle and appGroup parameters cannot be dynamically changed, the email test device adding and advanced push notifications may not work as expected after modifying this option.
• FCM Sender ID
  • This option allows for dynamically changing the senderID parameter which gets passed to the RNInsider.init() function. Please note that updating this option requires the app to be relaunched for it to take effect.
• Open App Settings
  • This option when clicked redirects the user to the native iGurme app settings on iOS and Android.

• This option is used to switch between endpoints, mainly for testing purposes. 2 options are available:

1. https://mobile.useinsider.com
2. http://mobile-staging.useinsider.com

Please note that updating this option requires the app to be relaunched for it to take effect.

• Use this section to manually set attributes on the app. Once a successful communication is made with the Webpage, its result will be logged to the Console Log section.

• Use this section to manually tag events (+ with parameters if wanted) on the app. Once a successful communication is made with the Webpage, its result will be logged to the Console Log section.

• This section logs the results of the requests made from General Settings, Set Endpoint, Set Attribute, and Tag Event. Please note that this isn't an actual console log, but rather manually prints results based on try/catch blocks.

For iOS, make sure to build the app for release, as this will store the images on the device and also will cause the app to perform a lot better. To change the build type from Debug to Release, press: Shift + Command + < on XCode. Now, change Build Configuration To update TestFlight build, select build device as Generic iOS Device then from top navigation select Product-->Archieve. You will need the credentials of Evren Baykan to send the build.

For Android, after getting a build, app-debug.apk can be located from android/app/build/outputs/apk/debug/app-debug.apk. If release build is needed for whatever reason, follow the instructions here to obtain one: Android Release Build Instructions

The app icon, google services files, and development certificate can be found from here: Google Drive (Requires @useinsider email login to view)

Please refer to the Mobile App show case App - iGurme for additional information and pictures.