Project Mom and Pop Gift Card Detail and Redeem Mobile Front End and Services

HTML5Node.jsAngular.js (1.0)Other
Register
Submit a solution
The challenge is finished.

Challenge Overview

1.     Project Overview

1.1     System Description

The client for this project has decided to build a platform that will support the sale, exchange, and redemption of gift cards between businesses and individuals.  The goal of this platform is to help small businesses expand, using both web and mobile layouts, by giving them a simple way to raise capital and acquire new customers using gift cards.

The client needs to create a high quality platform that is easy-to-use even for business owners that don’t have a lot of technical expertise.  Many business owners are not technologically sophisticated, so creating a platform that is simple to understand and navigate is also a top priority.

The main function of the platform will be to allow business to post virtual gift cards for sale on the platform.  Individual users will be able to browse and buy these gift cards, as well as resell or trade gift cards they own.  Using the mobile layout, users will be able to redeem their gift cards at the business, and the business will be able to process gift card redemption at their point of sale.

This assembly is responsible for implementing gift card detail and redeem related functionalities of the front end mobile application, related angularJS service and integrate the REST APIs, including HTML5 pages, AngularJS Service and AngularJS controllers.

1.2     Competition Task Overview

A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at:

http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials

Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.

Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.

1.2.1     Scope

This challenge is responsible for the following parts in the Front End Mobile Class Diagram:

  • app.js

  • ChampionGiftCardRedeemCtrl

  • GiftCardDetailCtrl

Implementation details are provided at TCUML class documentations.

Related pages are also in scope.

This challenge is responsible for the following parts in the Front End AngularJS Class Diagram:

  • GiftCardOfferService
  • GiftCardService

Fix following issues in user and security APIs and use the Real APIs in this challenge:

  • GiftCardService.js#redeem
    giftCardRedeem.save(function(err, rt) {
      if (err) {
        callback(err, null);
      } else {
        giftCard.save(callback);
      }
    });

    If second save fails, it will cause improper data in database.

    Due to the lack of transactions in MongoDB, we need some work around on the issue, because single-document operations are atomic with MongoDB, we can make GiftCardRedeem as an embedded document of GiftCard. so the update are:
    change GiftCardRedeem as embedded document of GiftCard
    1) add +giftCardRedeems:GiftCardRedeem in GiftCard
    2) remove +giftCardId:String in GiftCardRedeem 
    3) we can get gift card by qrCode via GiftCard.findOne({'giftCardRedeems.qrCode'}, callback), then iterate giftCard.giftCardRedeems to check the qrCode to get the giftCardRedeem, update the giftCard and giftCardRedeem, finally save the giftCard.

    Note: prepareForRedeem should also updated accordingly, firstly get the giftCard by id, then push the created reddeem to giftCard.giftCardRedeems

    here is some reference:
    https://coderwall.com/p/6v5rcw/querying-sub-documents-and-sub-sub-documents-in-mongoose

  • Add REST service for GiftCardOffer.getGiftCardOffers to get offers of given ids.
  • Add amount parameter to GiftCardService.redeem.
  • Add description parameter to GiftCardService.resell.
  • GiftCard, when save the QRCode, please generate unique name for each request.
  • Add authentication for GiftCardService#redeem
  • GiftCardService#redeem, it should compare the passed amount with giftCard.quantity, not giftCardRedeem.amount
  • Please make sure the REST APIs follow the API Specification. For any other bugs not in the above list, please fix it in your submission.
  • The Entities Class Diagram just shows the objects structure, they doesn't need to be implemented.

1.2.2    General AngularJS Implementation Guide

The services are AngularJS services, they use $http service to communicate with the back end REST services.
During this assembly, a simple basic app.js may be implemented to run and test the services.

Some services require authorization, they expect a session token set in sessionStorage.sessionToken field, if not, they will call callback with error message.

Below we take the UserService.updateMyUserProfile as example, other services are implemented similarly.

angular.module('services').factory('userService',
    ['$http', '$log',
    function ($http, $log) {
        var service = {};
        service.updateMyUserProfile = function(user, callback) {
            $http({
                // it may be 'GET', 'DELETE' etc for other REST services
                method:'PUT',
                // replace this url for other REST services
                url: config.REST_SERVICE_BASE_URL + '/users/me',
                // request body may be different for other REST services
                data: JSON.stringify(user),
                // authorization header depends on REST service,
                // some needn't it,
                // some needs other authorization header, e.g. the Login
                headers: {
                    'Authorization': 'Bearer' + sessionStorage.sessionToken
                }
            }).success(function(data){
                callback(null, data);
            }).error(function(data, status, headers, config) {
                callback(data);
            });
        }

        ... // other functions

        return service;
}]);

1.2.3    Services Mapping

When implementing an AngularJS service method, see its TCUML method documentation, it provides the corresponding REST service.
Then open the REST_API_Specification.docx, locate the referred REST service. In the "Request Syntax" section, there is HTTP method and URL for the REST service. The "Request Headers" item contains authorization header details. And the Response section contains response details.
For the red methods in TCUML, these indicate new REST services, the details are just in the TCUML method documentation.
Assemblers should follow these REST contract, and follow above sample code to make the REST calls.

1.2.4     /#/details/{id}

Controller: GiftCardDetailCtrl

This page shows gift card details.

1.2.5     /#/redeem/{id}

Controller: ChampionGiftCardRedeemCtrl

This page performs champion gift card redeem.

This page should have an additional button “Display QR Code”, when this is clicked, it calls the displayQRImage function.

This just prepares the redemption; after displaying the image, the founder side will scan it and actually performs the redemption.

When it is done, it redirects to champion home page.

1.2.6  QRCode

We will use jsqrcode (https://github.com/LazarSoft/jsqrcode) to detect QR code from image. Its README contains usage instructions, its src/test.html contains an example.

For Android, we will follow its src/test.html to use webcam; But for IPhone, because it doesn't support getUserMedia (WebRTC) capability, we need to use other approach. We will directly use the camera, see http://www.wufoo.com/html5/attributes/20-accept.html, we can use

<input type="file" accept="image/*;capture=camera">

To access the camera.

For both Android and IPhone, the code to extract QR code is similar:

var imageFile = assume this is image file;

qrcode.callback = function(qrCode) {

    // QR code is obtained here

}

var reader = new FileReader();

reader.onload = function(e) {

    qrcode.decode(e.target.result);

}

reader.readAsDataURL(imageFile);

This QR code extraction process continues until a QR code is successfully extracted, or user cancels it.

1.3     Technology overview

1.5     Existing Documents

  • Class Diagrams
  • Sequence Diagrams
  • Application Design Specification
  • Assembly Specification


Final Submission Guidelines

  • Source code and configuration files.
  • Deployment guide to configure and verify the application.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

Challenge links

ID: 30048908