Introduction

A grocery store is primarily a place a where food is sold in bulk which range from non-perishable food that is packaged in cans, bottles and boxes, with some also having fresh produce, butchers, delis, and bakeries. Although large grocery stores that stock significant amounts of non-food products, such as clothing and household items, are called supermarkets. As is the norm food product variety has not been the problem but prices of these food products has always been the bone of contention to customers, most people can not afford to get what or the amount of what they want from the grocery store. This dilemma has been tried to remedied by the Grocery stores themselves through the use of discount on certain food produce or even the creation of a full on discount grocery store with the lowest prices due to their store brand merchandise, this has been of great good to most people especially student who are not so buoyant.

However this brilliant and needed idea of giving out discount on products has still been meet with challenges on the part of the customers. This major challenge involves not been aware certain products are currently on discount as a result of not been very observant as customers stroll around the store to make purchases. The simplistic nature of this challenge does trickle down to cause more problems to the Grocery store retailers themselves that I will address later in the paper. The solution I propose to this problem is a mobile application that leverages the iBeacon technology to detect the location of a particular store in other to make a request to the database for data of the current products on discount at that specific store. The iBeacon itself is simply a class of Bluetooth low energy device, which broadcast an identifier to electronic devices within its proximity. Smart mobile devices or tablet are able to leverage this service when in close proximity of the iBeacons are to be able to perform certain actions. Apple introduced the standardized protocol at the Apple Worldwide Developers Conference in 2013 for which other vendors have since made iBeacon-compatible hardware transmitters. The Bluetooth low energy or Bluetooth smart is the intelligent, power-friendly version of Bluetooth wireless technology. While the power-efficiency of Bluetooth Smart makes it perfect for devices needing to run off a tiny battery for long periods, the magic of Bluetooth Smart is its ability to work with an application on the smartphone or tablet you already own.

The Aware Shopper app as the name implies endeavors to keep the user abreast with latest products available on discount within the confines of the shop the user enters. The Aware Shopper app detects the iBeacon-compatible hardware transmitters or Estimote beacon and identifies its location form the UUID, Major and Minor id supplied from the signal. The data from the iBeacon is used to make a request to the database for the data specific to that shop and then displayed to the user within app. And it is further analyzed into the various categories for easy identification.

Problem statement

The current state of grocery store shopping involves getting monthly magazines or publication of products that will be on discount for a certain period, this means until such publication the customers are unaware until they walk into the store and decide to stroll around and accidentally find out such information form the shelves. The problem therefore is how can the customers be informed of all the immediate products on discounts at that point in time they walk in to make a purchase at that store. The problem proves to shine light on an immediate need for product information as customers walk in to purchase products they need. The problem affects customers who might be in need of those products and also the store that have decided to put those products on discount for the customers and sometimes in order to quickly dispose of these products.

In perspective it affects everybody as everyone as at some point in time has walked into a neighborhood department store to purchase one thing or the other. Although you can say it fails to affect online customers. However it affects customers, as what they might need is currently discount and end up walking past it in the store only to hear from someone else or a close neighbor or flat mate who got the same product for cheap. The pain of such a revelation is unimaginable. It further compounds the problem as most of these goods could be perishable goods and end up as wasted foods if not purchased for the sole reasons of knowing it was available for cheap. Also in location where there is more than one department store, such information if present could prevent customers from going into a store where they think products will be cheaper without proper information about it.

Methods and Material

The initial step after having a full understanding of the problem was to carry a market research. The research however proved less fruitful as there was no generic application available, which offered services as this application. However what were available were platforms for which retailers could develop their application on, enabling them to take advantage of the iBeacon Technology. After the preliminary research proved a little less useful, a group of 3 people were selected and presented with the problem statement. The aim was to ask If they could relate to the problem, and how they solved the problem in their daily Grocery store running. The results from this interview were used in creation a requirement list and quality attributes for the application. This description then evolved into the conceptual model and gradually followed by the prototype, which were still presented to the same group of individuals for evaluation and hence more modification and adaptation.

The initial ideas were drawn on paper with simple sketches, before they were transferred into a suitable Mock up application to capture the requirements and quality attributes of the application. Hence the first prototype was developed using the swift language in the iOS application environment using the xcode IDE. The first prototype was however modified once more before the final application was developed. The application was implemented using the Model, View and Controller (MVC) architectural style.

Conceptual Design

The Aware Shopper project can be broken down into three modules, which include the Database Server, The Webserver and the Mobile App. The database server is hosted on a cloud based hosting service called MongoLab. The database itself is of type NoSql in which MongoDB was chosen. The Webserver which was setup with a REST API architectural style to handle request and return JSON, was written using NodeJS which is basically JavaScript that runs on Google V8 script engine enabling run smoothly on the server, The Webserver application is hosted on Heroku. The Mobile App itself was written in Swift 2.1, which makes request to the webserver to get the data in a JSON format. However since Swift is very strict about types, it can be a hassle working with JSON because it’s naturally implicit about types therefore a special library was implemented in the project called SWIFTYJSON.

n-tier-architecture-3

The diagram above gives a basic architectural overview of the Aware Shopper project with the exclusion of the Beacons. The mobile devices make request to the webserver, which in turn requests for the specific data from the Database server and hence returns the data in JSON format to the Mobile device. Hence this setup make extremely easy for the mobile to consume the data from the database server depending on the request. The Webserver can be accessed from any browser by the following link.

http://mobileappserver1.herokuapp.com/

The mobile app is a composition of various classes, which handle different task to bring about the visualization of the data needed by the user as they enter into the Grocery store. The classes can be separated into the data handling and data visualization, as the name implies the data handling class is called the RestApiManager class handles all request the webserver for specific data and returns JSON, which in turn the App is able to use thanks to the SwoftyJSON Library. The request are made through the use of the NSURLsession function which gets an NSObject data response which is easily converted to JSON by the SWIFTYJSON library earlier implemented.

func makeHTTPGetRequest(path: String, onCompletion: ServiceResponse) {
        let request = NSMutableURLRequest(URL: NSURL(string: path)!)
        
        let session = NSURLSession.sharedSession()
        
        let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
            let json:JSON = JSON(data: data!)
            onCompletion(json, error)
        })
        task.resume()
    }

 

The data visualization involves the implementation of two table views with one which segue into the other to display the list of products available in that store at that point in time. In terms of detecting the Beacons and determining the location, the next step would be to include the CoreLocation framework as the iBeacon Technology is part oft the framework. Hence through the CLLocationManager instance and its delegate methods the app will able to locate and report findings of the iBeacons.

locationManager.delegate = self;
        locationManager.requestWhenInUseAuthorization()
        if(CLLocationManager.authorizationStatus() != CLAuthorizationStatus.AuthorizedWhenInUse){
            locationManager.requestWhenInUseAuthorization()
        }
        
        locationManager.startRangingBeaconsInRegion(region)


func locationManager(manager: CLLocationManager, didRangeBeacons beacons: [CLBeacon], inRegion region: CLBeaconRegion) {
        let knownBeacons = beacons.filter{ $0.proximity != CLProximity.Unknown }
        if (knownBeacons.count > 0) {
            let closestBeacon = knownBeacons[0] as CLBeacon!
            let minor = closestBeacon.minor.integerValue as Int
            if let val = self.stores[minor]{
            presentStore = val
            }
        }
        
    }

 

 

The initial prototype created for this project displayed the products and prices of a store in a Table View and constantly refreshed it self as the app detected Beacons. This initial prototype made a single request to the webserver at the launch of the app in other to populate the various arrays, which were used to populate the tables view by the user. Hence by this action data is not stored on the mobile device permanently on for the period of the app launch or continued usage.

The constant challenge involved finding a tutorial online that was not already outdated or even deprecated, which made most process and continuous back and forth. However the greatest challenge was making use of JSON within Swift which proved quite hassle free after implementation of the SWIFTYJSON library although prior to that making use of JSON within swift was painful task. However the detection of the Beacons and data request to the webserver were implemented.

func getShops(){
        RestApiManager.sharedInstance.getShops{json -> Void in
            let numberOfShops = json["shops"].count as Int
            for count in 1...numberOfShops{
                var location2 = "Aldi"
                location2 += "\(count)"
                self.shopsAvailable.append(location2)
            }
        }
    }

 

The navigational prototype involved the use of the Table View. The Aware Shopper app requires two table views in which one would segue into the other. The initial consist of both textLabel and imageView, which would display the Product category and Product category image representation. This required the creation of two classes one of a sub class of UITableViewController and the other of UITableViewCell. The other table would segue into would display the product name, product price and discounted price and hence follow the same procedure.

IMG_0117

IMG_0120

The creation of table views was fairly easy and stress free, as they were simple as creating new classes but with a subclass of either tableView tableViewCell. And again the issue of solution online been always outdated still persisted here but was later a norm easily managed.

Use Case Diagram

The use diagram shown below depicts a situation where the user enters the Grocery store in the hope of purchasing an item. On entry the user consults the mobile app, which displays the various categories of products available, within the initial table view. At this point the beacon has already been detected and the location of store is now known. Therefore based on the product category selected the app make a request for the products available with original price and their discounted prices.usecase123

Object Diagram

         The object diagram depicts the communication between the object of the various classes, which facilitate the beacon detection, and data request to the webserver as can be seen below.

objectDiagram

Functional Requirements

Detect beacons: The mobile app shall detect the available closest beacons at regular intervals

Data request: The mobile shall make request to the database of the product price discount price base on the location of the beacon.

Implementation

The Aware Shopper app makes use of the Core Location framework and SWIFTYJSON library in its implementation. The Core Location framework lets you determine the current location or heading associated with a device. The framework uses the available hardware to determine the user’s position and heading. The Core Location framework provides several services that you can use to get and monitor the device’s current location:

  • The standard location service offers a highly configurable way to get the current location and track changes.
  • Region monitoring lets you monitor boundary crossings for defined geographical regions and Bluetooth low-energy beacon regions. (Beacon region monitoring is available in iOS only)
  • The significant-change location service provides a way to get the current location and be notified when significant changes occur, but it’s critical to use it correctly to avoid using too much power.

 

The region is however the Universally Unique Identifier string that all estimote iBeacons share, hence in order to make proper distinction amongst the iBeacon, the Major and Minor value are used. Swift is very strict about types, it can be a hassle working with JSON because it’s naturally implicit about types. SWIFTYJSON is an open source library that helps you use JSON in Swift. As all that is needed is to create a JSON constant via the JSON() init method and your data object. SWIFTYJSON then converts this data into a JSON object using NSJSONSerialization.

The bonus here is that SWIFTYJSON takes care of all the optional validation that you previously had to code by hand. You only need to know which keys and indices you want to access and you can leave the rest to SWIFTYJSON.

Model View Controller  

The design pattern implemented in the Aware Shopper application in line with the key methodologies associated with the overall architecture of iOS application was the Model View Controller. The design pattern clearly defines how your application should be designed and implemented in terms of the code structure. However the Model View Controller (MVC) design pattern assigns objects in an application one of three roles: model, view, or controller. The pattern defines not only the roles objects play in the application; it defines the way objects communicate with each other. Each of the three types of objects is separated from the others by abstract boundaries and communicates with objects of the other types across those boundaries. The collection of objects of a certain MVC type in an application is sometimes referred to as a layer—for example, model layer.

MVC is central to a good design for a Cocoa application. The benefits of adopting this pattern are numerous. Many objects in these applications tend to be more reusable, and their interfaces tend to be better defined. Applications having an MVC design are also more easily extensible than other applications. Moreover, many Cocoa technologies and architectures are based on MVC and require that your custom objects play one of the MVC roles.

Model

Model objects encapsulate the data specific to an application and define the logic and computation that manipulate and process that data. For example, a model object might represent a product in a product category or a branch in a type of store. A model object can have to-one and to-many relationships with other model objects, and so sometimes the model layer of an application effectively is one or more object graphs. The model object does not contain any information about the user interface. In the Aware Shopper application the RESTAPIMANAGER class takes this responsibility as it posses a TYPEALIAS and static declaration of the class for easy access to it methods which contain the logic for the data request and manipulation throughout the application. The most important method is the makeHTTPGetRequest method, which creates the NSURLsession to make the data request, and hence other methods to make specific call the specific data in demand by the user.

//
//  RestApiManager.swift
//  AwareShpperv2
//
//  Created by Umoru Joseph on 11/17/15.
//  Copyright © 2015 Umoru Joseph. All rights reserved.
//

import Foundation
import SwiftyJSON

typealias ServiceResponse = (JSON, NSError?) ->Void

class RestApiManager: NSObject {
    static let sharedInstance = RestApiManager()
    
    let baseURL = "https://mobileappserver1.herokuapp.com/products/productTypes"
    
    func getPaperGoods(onCompletion: (JSON) -> Void) {
        let route = "https://mobileappserver1.herokuapp.com/products/Paper_Goods"
        makeHTTPGetRequest(route, onCompletion: { json, err in
            onCompletion(json as JSON)
        })
    }
    func getBeverages(onCompletion: (JSON) -> Void) {
        let route = "https://mobileappserver1.herokuapp.com/products/Beverages"
        makeHTTPGetRequest(route, onCompletion: { json, err in
            onCompletion(json as JSON)
        })
    }
    func getBreadBakery(onCompletion: (JSON) -> Void) {
        let route = "https://mobileappserver1.herokuapp.com/products/Bread_Bakery"
        makeHTTPGetRequest(route, onCompletion: { json, err in
            onCompletion(json as JSON)
        })
    }
    
    func getDairyProducts(onCompletion: (JSON) -> Void) {
        let route = "https://mobileappserver1.herokuapp.com/products/Dairy"
        makeHTTPGetRequest(route, onCompletion: { json, err in
            onCompletion(json as JSON)
        })
    }
    
    func getShops(onCompletion: (JSON) -> Void) {
        let route = "https://mobileappserver1.herokuapp.com/products/shops"
        makeHTTPGetRequest(route, onCompletion: { json, err in
            onCompletion(json as JSON)
        })
    }
    
    func makeHTTPGetRequest(path: String, onCompletion: ServiceResponse) {
        let request = NSMutableURLRequest(URL: NSURL(string: path)!)
        
        let session = NSURLSession.sharedSession()
        
        let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
            let json:JSON = JSON(data: data!)
            onCompletion(json, error)
        })
        task.resume()
    }
}

View

A view object is an object in an application that users can see. A view object knows how to draw itself and can respond to user actions. A major purpose of view objects is to display data from the application’s model objects and to enable the editing of that data. Despite this, view objects are typically decoupled from model objects in an MVC application. The views of Aware Shopper consist primarily of the Table Views from which the data is displayed through the ProductTabelViewCell class and ProductDetailTabelViewCell class. The code snippet below show the delegate methods for the table view controller.

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {        return productCatgories.count
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        let cell =
            self.tableView.dequeueReusableCellWithIdentifier(
                "ProductTableCell", forIndexPath: indexPath)
                as! ProductTableViewCell
            
            let row = indexPath.row
            cell.productLabel.font =
                UIFont.preferredFontForTextStyle(UIFontTextStyleHeadline)
            cell.productLabel.text = productCatgories[row]
            cell.productImage.image = UIImage(named: productCatImages[row])
            return cell
        
    }

Also was the prepare for segue method which facilitates the data transfer among the two views.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        
        if segue.identifier == "ShowProductDetails" {
            let detailViewController = segue.destinationViewController
                as! ProductDetailTableViewController
            
            let myIndexPath = self.tableView.indexPathForSelectedRow!
            let row = myIndexPath.row
            detailViewController.webSite = goods[row]
            print(presentStore)
            detailViewController.presentStore1 = presentStore
        }
    }

 

 

Controller

A controller object acts as an intermediary between one or more of an application’s view objects and one or more of its model objects. Controller objects are thus a conduit through which view objects learn about changes in model objects and vice versa. Controller objects can also perform setup and coordinating tasks for an application and manage the life cycles of other objects. The controllers within the Aware Shopper app include the ProductTableViewController class and the ProductDetailTabelViewCell class, which controls the data flow into model object and updates the table view cells.

import UIKit

class ProductDetailTableViewCell: UITableViewCell {

    @IBOutlet weak var productLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    @IBOutlet weak var discountPriceLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

 

Results

The results from the brainstorm were although fulfilling as all that was needed was readily available and so coming to conclusion on the technology to choose for the location services to leverage and also the data that was required from the vendors and user were very useful in fine tuning out solution as we proceeded with plan. Although there was a problem finding competitors to that was quite difficult as all that were available were theories explaining the usefulness of such idea but no clear commercial presence. This begs to show if such a technology is very viable in the Market or not but however in view of the services it will offer to the user, it is definitely recommended.

The conceptual design proved a little difficult as setting up the webserver to communicate properly with mobile as the setup had hindrances of security and authentication which quickly resolved as soon as I moved all the project their respective host sites and launched the project. The Aware Shopper worked smoothly to consume whatever data was necessary. The next best thing was the amount that was required to setup the iBeacon detection within the mobile app was surprisingly smaller than I thought. Also there was the regular challenge of finding a solution online only to find it was been deprecated or outdated which only comes as a result of Swift been a very new language hence it is subject constant updates and changes. The views seemed very restrictive as the initial design was have both a table view and a separate view altogether in other to achieve a little space at the top to display the Store details proved very evasive and hence had to be forfeited. The result is however a minimalistic design. A different kind of view was considered like the split view was considered but only proved to be an over kill to the problem.

IMG_0117

IMG_0120

 

A demo video of the application can be found below

The implementation was relatively straight forward as the design structure and goals are all clearly stated, the hiccups experienced came from dealing with JSON within swift and whole idea of wrapping and unwrapping accustomed to the language. The Core Location framework was however well stated all required feature were all easily accessible proving very impressive.

Discussions

         The Aware Shopper project as explained in the introduction is suppose to be sigh of relief to everyday shoppers at Grocery stores. This app through the use of the iBeacon technology was able to give user a true taste of the possibility of been of products on discount in a store while shopping. In honesty a better part of the project goal was executed, as the aim was to be able detect the user and inform the user of the current prices an d their discount in which the app does that properly, therefore a greater part of the objectives were completed successfully. In the aspect of the users evaluation it mostly applauded as innovative idea that would really help a lot most especially from the students. Shortcoming of this project can be seen in area of implementing more a visual experience for the user as a situation where even while using the App if it detects more beacons within the store it should have pop ups to alert the user of the presence of more discount as the user navigates the store. And also an implementation of a tracking system to monitor the user’s movement, which could be useful in rearranging products on both shelves and aisles within the store. A good thing would be Model object as it handles task properly with its request to the backend. The bad things I would say would be probably the coding styles as its can be said to be fully DRY proof and hopefully with further such issues can be successfully tackled. As it was observed earlier most of completion were companies with start up ideas and but no clear commercial application handling this problem in specific. In conclusion the AwareShopper app was an interesting venture to have partook in as it gives you the expeience to experimenting with the iBeacon Technology and swift language in general. The project will be extended and some of future that would be included are the ability to track user movement while they are shopping to see aisles that are regularly visited. To also include push services about upcoming discount while the user is not within the store and also a possible checkout mechanism for the products that taken into the users shopping bag.

 

The complete code of the implementation can be found on Github

Leave a Reply