Let’s Create a Coupon App [Part 1: Screen Explanation and Authentication]
If you’re considering using Monaca to develop an application, you might find it challenging to come up with ideas when the time comes. Additionally, if you’re planning to build a complex app from scratch, it can be overwhelming to know where to begin.
That’s why in this article, we will guide you through the process of developing a simple app. As a first step, we encourage you to take on the challenge.
In this tutorial, we will use NCMB (NIFCLOUD mobile backend) to develop a coupon app. Within the app, you will be able to create and manage coupons, as well as display them to users. In the first part, we will cover the app’s specifications and implement the authentication process.
Technologies and Libraries Used
We are going to use the following technologies and libraries in this application:
- Framework7
- NIFCLOUD mobile backend
- Day.js
- JsBarcode
- qrcode
JsBarcode and qrcode are libraries that display barcodes for coupons and QR codes, respectively.
For this application we will use the Framework7 Tab View template in Monaca. From the Monaca IDE, follow Framework Templates > JavaScript > Framework7 Tab View to select it.
Technical Specifications
The screens of this application are as follows.
Objective
The coupon application displays coupons for app users. There is no limit to the number of coupons that can be used, and the coupons can be used as many times as desired during the period of availability.
Login Screen
This application provides an authentication function using ID and password.
Coupon Listing Screen (for Users)
The Coupon Listing screen for users lists coupons created on the Administration screen. Only coupons that are available for use are displayed.
Coupon Usage Screen
When a coupon is selected, the coupon details will appear below inside an action sheet. At the same time, a barcode and QR code will appear, which can be used in the stores.
Coupon Listing Screen (for Administrators)
This is the coupon listing screen for the administrator. The coupons are listed using a table.
Coupon Creation and Editing Screen
This screen allows you to create a new coupon or edit an existing coupon. You can also delete coupons from here.
Data Authorization
The data can be viewed by anyone and updated only by the administrator.
Get NIFCLOUD Mobile Backend Key
Register as a user or login to NIFCLOUD mobile backend to create an app. As a result, you will get the following two keys that you will use in the application:
- Application key
- Client key
Library Installation
Add ncmb as an external library. It’s a JavaScript library, so navigate to Configure -> Add/Remove JS/CSS Components.
Don’t forget to check ncmb.min.js as the file to load.
<!-- Ncmb script -->
<script src="components/ncmb/ncmb.min.js"></script>Installing Other Libraries
Dayjs/JsBarcode/qrcode are minified and placed in the js folder and loaded at www/index.html. You can also include them in the project using CDNs.
Minified Version:
<script src="js/dayjs.min.js"></script>
<script src="js/JsBarcode.all.min.js"></script>
<script src="js/qrcode.min.js"></script>CDN Version:
<!-- Dayjs script -->
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>dayjs().format()</script>
<!-- Barcodejs script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Qrcodejs script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Coding Time
Initialization of NCMB
Open www/js/app.js and add the process to initialize the NIFCLOUD mobile backend as shown below. Apply the application key and client key introduced above.
const applicationKey = '';
const clientKey = '';
const ncmb = new NCMB(applicationKey, clientKey);Routing
Define which screen is displayed when a pseudo URL is accessed in js/routes.js.
var routes = [
{
path: '/',
url: './index.html',
},
{
name: 'List',
path: '/list/',
componentUrl: './pages/list.html',
},
{
name: 'Login',
path: '/login/',
componentUrl: './pages/login.html'
},
{
name: 'AdminList',
path: '/admin/list/',
componentUrl: './pages/admin/list.html',
},
{
name: 'AdminForm',
path: '/admin/form/',
componentUrl: './pages/admin/form.html',
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];Introduction to index.html
www/index.html, which is loaded first in the Monaca application, loads pages/list.html, the coupon list screen for users.
<div id="app">
<!-- Views container -->
<div class="views safe-areas">
<!-- Tabbar for switching views-tabs -->
<div id="home" class="view view-main view-init" data-url="/list/"></div>
</div>
</div>Transition to Authentication Screen
In pages/list.html, authentication is determined when the screen is displayed. If the user is not logged in, the user is redirected to pages/login.html. Even if it is determined that the user is logged in, it is possible that the session is invalid, so the data store is accessed to determine this.
let coupons;
// Event executed during page initialization
$on('pageBeforeIn', async (e, page) => {
// Authentication status check
if (!(await checkAuth())) {
// If false is returned, got to login screen
$f7router.navigate({ name: 'Login' });
}
}
// Function to check authentication status (in js/app.js)
// true if authentication is ok / false if not logged in or there is a session problem
const checkAuth = async () => {
// Get the current logged in user
if (ncmb == null)
console.log("ncmb is null")
const user = ncmb.User.getCurrentUser();
// If no user is logged in, return false
if (!user) return false;
try {
// Test the session validity
await ncmb.DataStore('Test').fetch();
// If valid return true
return true;
} catch (e) {
// If there is a problem with the session return true
return false;
}
}User Registration/ Login Process
The user registration/login process is performed by signInOrLogin when the user taps the button in pages/login.html. The overall flow is as follows.
// Event when you tap the login/signup button
const signInOrLogin = async () => {
// Input values are converted to an object
const params = serializeForm('form#login');
// User registration process
try {
await registerUser(params);
} catch (e) {
//Results to error if the user is already registered, ignore and proceed
}
try {
// User login process
await loginUser(params);
// Navigate back to the main screen
$f7router.back();
} catch (e) {
// If the was a problem alert the user
console.log(e);
$f7.dialog.alert('Login failed. Please check username and password.');
}
}The function registerUser, which registers a user to the NCMB, is implemented as follows. Set the input value to the user object and execute the signUpByAccount method.
// User registration
const registerUser = async (params) => {
try {
const user = new ncmb.User;
user
.set('userName', params.userName)
.set('password', params.password)
await user.signUpByAccount();
return user;
} catch (e) {
console.log(e);
}
}The login process is performed by the loginUser function. This process just executes the NCMB login process ncmb.User.login.
const loginUser = async (params) => {
// Login the user
return ncmb.User.login(params.userName, params.password);
}This completes the login process.
Administrative Functions
Flag the Administrator
Originally, in NCMB, administrators are added to the administrator group. However, it can be cumbersome to check the group information each time. Therefore, we will set a flag in the authentication data for each user. After the authentication process, the user should be created in the NCMB user management tab, as shown in the image below.
Add admin as a new field and add true with a boolean value of true. This should only be done for users you want to make administrators.
Separate display for administrators
In the coupon list screen for users, an administrator icon is displayed in the toolbar. This will only be displayed after authentication and if the logged in user has been flagged as administrator.
Modify pages/list.html.
// Event executed during page initialization
$on('pageBeforeIn', async (e, page) => {
// Authentication status check
if (!(await checkAuth())) {
// If false is returned, got to login screen
$f7router.navigate({ name: 'Login' });
}
// Change the visibility of the admin settings
changeVisible($f7.$el)
}changeVisible is implemented in js/app.js
// Function to separate display for user and admin
const changeVisible = (el) => {
// Get current logged in user
const user = ncmb.User.getCurrentUser();
// Erase both admin and user info
el.find('.admin,.no-admin').hide();
// If it's an admin
if (user && user.admin) {
// Show the admin info
el.find('.admin').show();
} else {
// Else show the user info
el.find('.no-admin').show();
}
}Then, on the HTML side, set .admin class for the information that you want to provide to the administrator.
<div class="right">
<a href="/admin/list/" class="link admin">
<i class="f7-icons">gear</i>
</a>
</div>After this process, when logged in as an administrator, a gear icon will appear on the toolbar and tapping it will display pages/admin/list.html.
Summary
The authentication and user registration/login processes have been completed. Framework 7 is easy to understand, and each screen is divided into separate processes, so it should be easy to develop the application. Please give it a try!
In the next article, we will create, update, and delete coupons as admins, and display coupons to users.
You can find the project here.
