В этом посте я собираюсь показать вам, как создать простую систему регистрации событий. Поскольку одной из целей является быстрое создание чего-либо, мы будем использовать Corvid для создания приложения.
Corvid — это платформа разработки от Wix, которая позволяет вам сосредоточиться на логике приложения, использующей JavaScript, а не тратить время на написание HTML / CSS для создания пользовательского интерфейса. Corvid стремится помочь командам значительно сократить время, затрачиваемое на разработку, и быстрее выпускать продукты.
Вы можете найти полную документацию, обучающие видео и примеры здесь: www.wix.com/corvid
Создание пользовательского интерфейса
Прежде всего, мы собираемся создать макет для нашей будущей страницы. Интересный факт: это займет у вас от 10 до 25 минут, в зависимости от вашего знакомства с платформой.
Предположим, у нас есть следующий поток пользователей:
- Пользователь подписывается на событие, заполнив форму =>
- Уникальный QR-код генерируется на основе их идентификатора пользователя =>
- QR-код можно сохранить в виде картинки или отправить по электронной почте =>
- В день проведения мероприятия пользователь показывает QR-код при входе =>
- Администраторы событий сканируют код и отправляют посещаемость
В редакторе Wix войдите в систему и выберите создание нового сайта ( «+ Создать новый сайт» в правом верхнем углу панели учетных записей). В этом примере я использовал пустой шаблон, но вы можете выбрать любой и настроить его в соответствии со своими предпочтениями.
Вам также может понравиться:
Моделирование событий домена .
Вам также необходимо включить Corvid Developer Tools для переименования и управления вашими элементами. Если вы не уверены, как это сделать, перейдите по этой ссылке:
https://support.wix.com/en/article/wix-code-enabling-developer-tools .
Нам нужно создать две страницы: первая будет общедоступной (для пользователей, чтобы войти в нее), а другая — для администраторов, которые будут отправлять информацию о посещаемости гостей. Я также создал два лайтбокса (всплывающих окна) для отображения сообщений об успешном завершении после заполнения формы и отправки сообщения о посещаемости. Вы можете узнать больше о том, как создавать страницы и лайтбоксы, здесь: https://support.wix.com/en/article/adding-a-pop-up.
На этом этапе ваша структура сайта должна выглядеть примерно так:
страницы «HOME» . Нам нужно создать три входа пользователя:
#name,#email, #phoneNumber, и #signUpButton. Я поместил все три входа в, #signInBoxчтобы эти элементы было легче свернуть. (Вы увидите это позже в коде.)Мы также добавим изображение по умолчанию #qrCodeImage, для нашего будущего QR-кода и #sendToEmailButtonкнопки на той же странице, чтобы избежать перенаправления (вы все равно можете поместить эти элементы на другую страницу, если у вас их слишком много, но выберите то, что работает лучше для выполнения вашего проекта). И то, #qrCodeImageи другое #sendToEmailButtonсворачивается при загрузке и показывается пользователям только тогда, когда они успешно зарегистрировались с помощью регистрационной формы.
В конце ваша страница должна выглядеть примерно так:
В правом верхнем углу вы можете увидеть галочку в поле «Свернуто при загрузке». Вот как мы свернемся #qrCodeImageи #sendToEmailButtonкогда пользователи впервые загрузят страницу.
Примечание : есть разница между «скрыть» и «свернуть». Свернутый элемент сдвигает все элементы, которые находятся ниже, когда он не виден, а скрытый элемент не влияет на соседние элементы и резервирует место для себя независимо от того, видим он или нет.
Теперь, когда мы закончили с нашей страницей «HOME», давайте создадим страницу администратора. Он будет иметь только два элемента: #guestName и #submitButton(ничего особенного).
Примечание . В этом примере я делаю все просто, но не стесняйтесь поиграть с дизайном страницы.
Не забудьте добавить сообщения об успехе в ваши лайтбоксы.
Добавление базы данных
Для хранения данных наших пользователей мы будем использовать встроенную базу данных. Давайте создадим его и назовем его « Участники » (название зависит от вас). База данных должна иметь шесть столбцов:
title: (fieldType: Text).phone: (fieldType: Number).attended: (fieldType: Boolean).userId: (fieldType: Text).qrCodeLink: (fieldType: Url).email: (fieldType: Text).
Если вы не уверены в том, как создать базу данных, проверьте эту страницу документации .
Написание кода
А теперь мы подошли к самой веселой части: кодированию. Мы собираемся использовать Corvid API и некоторый пользовательский код JavaScript для описания логики нашего сайта. Все ссылки и примеры API можно найти здесь: https://www.wix.com/corvid/reference/ .
Я собираюсь разбить его на несколько основанных на функциях частей:
- Подписываясь.
- Генерация QR-кода.
- Отправка данных в базу данных.
- Отображение QR-кода пользователю.
- Отправка его на электронную почту пользователя.
- Представление посещаемости.
Подписываясь
Давайте добавим событие к нашему #signUpButton. В этом примере я добавляю все события внутри $w.onReady()функции. Прежде всего, я импортирую четыре встроенных модуля, которые буду использовать для обработки данных: uuid(для генерации уникального идентификатора пользователя), wixData(для отправки данных в базу данных), wixLocation(для передачи URL-адреса в функцию генератора QRCode), и wixWindow(чтобы открыть лайтбокс).
Я также создаю новый объект с пользовательскими данными, которые будут переданы из входных данных позже и обязательным _idполем.
JavaScript
1
import uuid from 'uuid';
2
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
$w.onReady(function () {
8
const userId = uuid();
9
const newUser = {
11
_id: userId,
12
userId: userId,
13
title: “”,
14
email: ””,
15
phone: ””,
16
qrCodeUrl: “”
17
}
18
$w("#signUpButton").onClick(() => {
20
21
});
22
});
23
Генерация QR-кода
Corvid поддерживает некоторые встроенные пакеты npm, которые можно установить прямо из редактора. Полный список поддерживаемых в настоящее время модулей и как добавить их в ваш проект можно найти здесь (дополнительные модули будут добавлены в ближайшее время): https://www.wix.com/corvid/npm-modules .
Я использую модуль с именем «qrcode», который упрощает конвертацию URL в QR. Документация для этого модуля находится на Github: https://github.com/soldair/node-qrcode .
Мы должны импортировать все модули npm в бэкэнд , поэтому в разделе бэкэнда проекта я создал jsw-модуль с именем « createUrl.jsw».
Быстрое обновление структуры сайта:
В этом модуле я импортирую npm-пакет и возвращаю URL QR-кода:
xxxxxxxxxx
1
import QRCode from 'qrcode';
2
export function createQR(userIdUrl) {
4
return QRCode.toDataURL(userIdUrl)
5
.then(url => {
6
return url;
7
})
8
.catch(err => {
9
console.error(err)
10
})
11
}
12
Отправка данных в базу данных
Теперь давайте получим реальные данные пользователя и, нажав кнопку «Зарегистрироваться», отправим их в базу данных.
xxxxxxxxxx
1
import uuid from 'uuid';
2
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
import { createQR } from 'backend/createUrl.jsw'
9
$w.onReady(async function () {
11
const userId = uuid();
12
const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
const QRCodeUrl = await createQR(urlToPass);
14
const newUser = {
16
_id: userId,
17
userId: userId,
18
title: "",
19
email: "",
20
phone: 0,
21
qrCodeUrl: QRCodeUrl
22
}
23
$w("#signUpButton").onClick(() => {
25
newUser.title = $w("#name").value,
26
newUser.email = $w("#email").value,
27
newUser.phone = $w("#phoneNumber").value,
28
wixData.save("Participants", newUser)
30
});
31
});
33
Отображение QR-кода пользователю
Давайте вернемся к нашему «HOME» коду. wixData.save()API возвращает обещание, поэтому цепь .then() методов обработки возвращаемого результата. Я жду до конца отправки в базу данных, передавая полученный URL-адрес в качестве источника #qrCodeImage, сворачивая форму и расширяя #qrCodeImageи #sendToEmailButton. Наконец, я очищаю все значения формы.
xxxxxxxxxx
1
import uuid from 'uuid';
2
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
import { createQR } from 'backend/createUrl.jsw'
9
$w.onReady(async function () {
11
const userId = uuid();
12
const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
const QRCodeUrl = await createQR(urlToPass);
14
const newUser = {
16
_id: userId,
17
userId: userId,
18
title: "",
19
email: "",
20
phone: 0,
21
qrCodeUrl: QRCodeUrl
22
}
23
$w("#signUpButton").onClick(() => {
25
newUser.title = $w("#name").value,
26
newUser.email = $w("#email").value,
27
newUser.phone = $w("#phoneNumber").value,
28
wixData.save("Participants", newUser)
30
.then(() => {
31
$w("#qrCodeImage").src = newUser.qrCodeUrl;
32
$w("#signInBox").collapse();
33
$w("#qrCodeImage, #sendToEmailButton").expand();
34
})
35
});
36
});
37
Отправка QR-кода на электронную почту пользователя
Последнее, что мы собираемся закончить, прежде чем перейти на страницу администратора, - это отправить успешное электронное письмо с QR-кодом пользователю. В Corvid вы можете легко создавать инициируемые электронные письма, добавив свой шаблон электронной почты на вкладку «Email маркетинг» на панели инструментов.
Чтобы узнать больше, перейдите по этой ссылке: https://support.wix.com/en/article/about-triggered-emails .
Для этого запущенного электронного письма я создал две переменные: ${userName} и ${qrCodeLink} для передачи пользовательских данных.
Corvid предоставляет готовые фрагменты после нажатия кнопки « Сохранить и опубликовать » . Давайте скопируем его в наш код внутри события кнопки « Отправить на электронную почту » :
Примечание . В этом примере не требуется вход в систему Wix, поэтому перед отправкой электронного письма нам необходимо создать контакт в системе Wix CRM.
Я также открываю лайтбокс с сообщением об успехе и возвращаю страницу в исходное состояние после отправки электронного письма.
xxxxxxxxxx
1
import uuid from 'uuid';
2
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
import { createQR } from 'backend/createUrl.jsw'
9
$w.onReady(async function () {
11
const userId = uuid();
12
const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
const QRCodeUrl = await createQR(urlToPass);
14
console.log(QRCodeUrl);
16
const newUser = {
18
_id: userId,
19
userId: userId,
20
title: "",
21
email: "",
22
phone: 0,
23
qrCodeUrl: QRCodeUrl
24
}
25
$w("#signUpButton").onClick(() => {
27
newUser.title = $w("#name").value,
28
newUser.email = $w("#email").value,
29
newUser.phone = $w("#phoneNumber").value,
30
wixData.save("Participants", newUser)
32
.then(() => {
33
$w("#qrCodeImage").src = newUser.qrCodeUrl;
34
$w("#signInBox").collapse();
35
$w("#qrCodeImage, #sendToEmailButton").expand();
36
})
37
});
38
$w("#sendToEmailButton").onClick(event => {
40
wixCRM.createContact({
41
"firstName": newUser.tite,
42
"emails": [newUser.email],
43
"phones": [newUser.phone]
44
})
46
.then((contactId) => {
47
wixCRM.emailContact('RLXj7Uh', contactId, {
48
variables: {
49
userName: newUser.title,
50
qrCodeLink: newUser.qrCodeUrl
51
}
52
})
53
}).then(() => {
54
wixWindow.openLightbox("Subscription success");
55
})
56
.then(() => {
57
$w("#name, #email, #phoneNumber").value = "";
58
$w("#signInBox").expand();
59
$w("#qrCodeImage, #sendToEmailButton").collapse();
60
})
61
})
62
});
63
Представление посещаемости
Последняя часть этого пользовательского путешествия произойдет в день фактического события. Пользователь показывает загруженный QR-код на входе, сканирует его, и его посещаемость отправляется.
Давайте добавим следующую логику на страницу администратора посещаемости :
xxxxxxxxxx
1
import wixLocation from 'wix-location';
2
import wixData from 'wix-data';
3
import wixWindow from 'wix-window';
4
$w.onReady(async function () {
6
const userId = wixLocation.query.userId;
7
const guestData = await wixData.query("Participants")
9
.eq("userId", userId)
10
.find()
11
.then((result => result.items[0]));
12
$w("#guestName").text = guestData.title;
15
$w("#submitButton").onClick() => {
17
const newGuestData = Object.assign({}, guestData, { attended: true });
18
wixData.save("Participants", newGuestData)
20
.then(() => {
21
wixWindow.openLightbox("Attendance success");
22
})
23
})
24
});
25
Уникальный идентификатор пользователя передается в виде запроса в URL-адресе из QR-кода, поэтому нам нужно получить его, используя wixLocation.query.userId.
После получения этого идентификатора мы можем получать данные пользователя из базы данных, передавать их имя в текстовое поле #guestName на странице и отправлять обновленные данные с измененным значением «посещаемого» поля обратно в базу данных.
Примечание : не забудьте изменить права доступа к странице «Администратор посещаемости», чтобы она была видна только администраторам. Чтобы узнать больше, перейдите по этой ссылке: https://support.wix.com/en/article/applying-page-permissions .