Use Axure to design the app, use Webstorm development (5) – Achieve page functionality

Series Articles

Use Axure to design apps, use Webstorm development (1) – Describe requirements with axure

Use Axure to design apps, use Webstorm development (2) – Build page schemas

Use Axure to design apps, use Webstorm development (3) – Build page schemas

Use Axure to design apps, use Webstorm development (4) – Implement page UI

Use Axure to design the app, use Webstorm development (5) – Achieve page functionality

Real-life use of axure design app, using Webstorm development (6) – Towards the backend

After a series of articles, in this article, will be further to implement the page function. To implement the input page function, QR code scanning function. Complete the app's front-end work.

Enter page

When the dispatch clerk entered the order number, first check whether the ticket is valid, if the effective direct access to the Order Details page, if invalid, prompt the order invalid, prompting the user to re-enter.


The result of the final finish



Scan QR code page

First install Barcode Scanner support http://ngcordova.com/docs/plugins/barcodeScanner/

Cordova Plugin Add Https://github.com/wildabeast/BarcodeScanner.git

Then install Ng-cordova https://github.com/driftyco/ng-cordova/releases Download the JavaScript file, put the file under Lib/angular, and introduce it in index References to Ng-cordova


Inject Ngcordova into the app


Finally, the $cordovaBarcodeScanner objects are used to handle the successful and failed operations of the scan respectively.


Since the scanning function opens a separate camera page, the scanning function can be done on this page, so the scanned page of the previous design can be used.
The scanning function needs to connect the actual machine to test, the simulator is not good to test the scanning function.


Here all the basic features of the page are completed, in the next section will be connected to the backend service, the user login function, and remove the front-end mockdb, the use of server-side data.
This phase of code can be downloaded to the https://github.com/zhangsichu/DeliveryApp/releases/tag/PageFunctions. You can also git checkout pagefunctions

git checkout pagefunctions

Original link: http://zhangsichu.com/blogview.asp?Content_Id=159

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use Axure to design the app, use Webstorm development (5) – Achieve page functionality