Если вы планируете использовать Monaca для разработки приложения, вам может быть сложно придумать идеи, когда придет время. Кроме того, если вы планируете создать сложное приложение с нуля, может быть сложно понять, с чего начать.
Вот почему в этой статье мы проведем вас через процесс разработки простого приложения. В качестве первого шага мы призываем вас принять вызов.
В этом уроке мы будем использовать NCMB (мобильный сервер NIFCLOUD) для разработки приложения купонов. В приложении вы сможете создавать купоны и управлять ими, а также показывать их пользователям. В первой части мы рассмотрим характеристики приложения и реализуем процесс аутентификации.
Используемые технологии и библиотеки
В этом приложении мы собираемся использовать следующие технологии и библиотеки:
- Фреймворк7
- Мобильный сервер NIFCLOUD
- День.js
- JsBarcode
- QR код
JsBarcode и qrcode — это библиотеки, которые отображают штрих-коды для купонов и QR-коды соответственно.
Для этого приложения мы будем использовать шаблон представления вкладок Framework7 в Monaca. В Monaca IDE выберите Framework Templates > JavaScript > Framework7 Tab View, чтобы выбрать его.
Технические характеристики
Экраны этого приложения следующие.
Цель
Приложение купонов отображает купоны для пользователей приложения. Количество купонов, которые можно использовать, не ограничено, и купоны можно использовать столько раз, сколько необходимо в течение периода доступности.
Экран входа в систему
Это приложение предоставляет функцию аутентификации с использованием идентификатора и пароля.
Экран списка купонов (для пользователей)
На экране «Список купонов» для пользователей перечислены купоны, созданные на экране «Администрирование». Отображаются только те купоны, которые доступны для использования.
Экран использования купона
Когда купон выбран, сведения о купоне появятся ниже на листе действий. При этом появится штрих-код и QR-код, которые можно будет использовать в магазинах.
Экран списка купонов (для администраторов)
Это экран списка купонов для администратора. Купоны перечислены в таблице.
Экран создания и редактирования купона
Этот экран позволяет вам создать новый купон или отредактировать существующий купон. Вы также можете удалить купоны отсюда.
Авторизация данных
Данные могут просматриваться кем угодно и обновляться только администратором.
Получить серверный ключ NIFCLOUD Mobile
Зарегистрируйтесь как пользователь или войдите в мобильный сервер NIFCLOUD, чтобы создать приложение. В результате вы получите следующие два ключа, которые будете использовать в приложении:
- Ключ приложения
- Ключ клиента
Установка библиотеки
Добавьте ncmb в качестве внешней библиотеки. Это библиотека JavaScript, поэтому перейдите в «Настроить» -> «Добавить/удалить компоненты JS/CSS».
Не забудьте проверить ncmb.min.js как файл для загрузки.
<!-- Ncmb script --> <script src="components/ncmb/ncmb.min.js"></script>
Установка других библиотек
Dayjs/JsBarcode/qrcode минимизируются, помещаются в папку js и загружаются по адресу www/index.html. Вы также можете включить их в проект с помощью CDN.
Минимизированная версия:
<script src="js/dayjs.min.js"></script> <script src="js/JsBarcode.all.min.js"></script> <script src="js/qrcode.min.js"></script>
Версия CDN:
<!-- 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>
Время написания
Инициализация NCMB
Откройте www/js/app.js и добавьте процесс инициализации мобильного бэкэнда NIFCLOUD, как показано ниже. Примените ключ приложения и ключ клиента, представленные выше.
const applicationKey = ''; const clientKey = ''; const ncmb = new NCMB(applicationKey, clientKey);
Маршрутизация
Определите, какой экран будет отображаться при доступе к псевдо-URL в 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',
},
];
Введение в index.html
www/index.html, который загружается первым в приложении Monaca, загружает страницы/list.html, экран списка купонов для пользователей.
<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>
Переход к экрану аутентификации
В страницах/list.html аутентификация определяется при отображении экрана. Если пользователь не вошел в систему, он перенаправляется на страницы/login.html. Даже если будет определено, что пользователь вошел в систему, возможно, что сеанс недействителен, поэтому для определения этого осуществляется доступ к хранилищу данных.
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;
}
}
Процесс регистрации пользователя/входа
Процесс регистрации/входа пользователя выполняется с помощью SignInOrLogin, когда пользователь нажимает кнопку в Pages/login.html. Общий поток выглядит следующим образом.
// 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.');
}
}
Функция RegisterUser, которая регистрирует пользователя в NCMB, реализована следующим образом. Установите входное значение для объекта пользователя и выполните метод SignUpByAccount.
// 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);
}
}
Процесс входа в систему выполняется функцией loginUser. Этот процесс просто выполняет процесс входа в систему NCMB ncmb.User.login.
const loginUser = async (params) => {
// Login the user
return ncmb.User.login(params.userName, params.password);
}
На этом процесс входа в систему завершен.
Административные функции
Пожаловаться на администратора
Изначально в NCMB администраторы добавляются в группу администраторов. Однако каждый раз проверять информацию о группе может быть затруднительно. Поэтому мы установим флаг в данных аутентификации для каждого пользователя. После процесса аутентификации пользователь должен быть создан на вкладке управления пользователями NCMB, как показано на рисунке ниже.
Добавьте администратора в качестве нового поля и добавьте true с логическим значением true. Это следует делать только для пользователей, которых вы хотите сделать администраторами.
Отдельный дисплей для администраторов
На экране списка купонов для пользователей на панели инструментов отображается значок администратора. Это будет отображаться только после аутентификации и если вошедший в систему пользователь помечен как администратор.
Измените страницы/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 реализован в 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();
}
}
Затем на стороне HTML установите класс .admin для информации, которую вы хотите предоставить администратору.
<div class="right">
<a href="/admin/list/" class="link admin">
<i class="f7-icons">gear</i>
</a>
</div>
После этого процесса при входе в систему с правами администратора на панели инструментов появится значок шестеренки, и при нажатии на него отобразятся страницы/admin/list.html.
Сводка
Процессы аутентификации и регистрации/входа пользователя завершены. Framework 7 прост для понимания, каждый экран разделен на отдельные процессы, поэтому разрабатывать приложение должно быть легко. Пожалуйста, попробуйте!
В следующей статье мы будем создавать, обновлять и удалять купоны от имени администраторов, а также отображать купоны пользователям.
Найти проект можно здесь.
