В этом уроке я покажу, как создать приложение для опросов, которое работает как пользовательский интерфейс для перечисления опросов и ответов на них. Приложение также имеет простую функцию регистрации и входа в систему. Он использует Framework7, и данные сохраняются в облачной базе данных Firebase.
Детали приложения
Приложение состоит из четырех страниц: логин, основная, опрос и отчет.
На странице входа пользователь может либо войти в систему, либо создать новую учетную запись, если она еще не существует. На главной странице есть список всех опросов в базе данных.
Анкета заполняется и отправляется на странице анкеты. Если пользователь уже ответил на опрос, его ответ обновляется. Страница отчета отображается только в том случае, если пользователь является администратором. На странице отображается сводка всех ответов на опрос.
В базе данных Firebase есть три коллекции: админы, ответы и опросы. Опросы добавляются в приложение путем создания нового документа опроса в коллекции опросов и предоставления ему необходимой информации. Наиболее важным полем является поле «страница», в котором указывается путь к HTML-документу опроса в исходном коде. Администраторов можно вручную добавить в коллекцию администраторов, сохранив их адрес электронной почты в коллекции «администраторы». Ответы сохраняются автоматически, когда отправляется ответ на опрос.
Запуск приложения
Для запуска приложения на вашем компьютере должны быть установлены Node.js и Monaca CLI. Вы можете установить Monaca CLI, выполнив эту команду в своем терминале:
npm install -g monaca
Затем вы можете клонировать проект из Github, установить npm и запустить превью приложения:
git clone https://github.com/monaca-samples/f7-internal-survey-app.git npm install monaca preview
Приложение должно открыться в вашем браузере. Если вы установили Monaca Debugger на свой телефон, вы можете протестировать приложение на своем телефоне с помощью этой команды:
monaca debug
Создание нового приложения с нуля
После того, как вы установили Node.js и Monaca CLI, создайте новый проект Monaca с помощью этой команды:
monaca create survey-app
Вы можете выбрать готовый шаблон Monaca для начала, используя Javascript и Framework7.
Настройка базы данных Firebase
Прежде чем вы сможете начать добавлять опросы в приложение, вам необходимо создать базу данных Firebase для их хранения. Сначала войдите / создайте аккаунт в Firebase. Затем перейдите в консоль Firebase, создайте новый проект и зарегистрируйте свое приложение в проекте. Вы получите код конфигурации Firebase, который нужно добавить в свой config.js-файл, в котором также инициализируется Firebase:
Чтобы установить Firebase в свой проект, запустите эту команду в своем терминале:
npm install --save firebase
Затем создайте новую базу данных firebase в своем новом проекте Firebase и добавьте в нее сборник «Опросы». Теперь вы можете добавить в коллекцию новый опрос, и он будет отображаться в приложении. Чтобы иметь возможность изменять данные в базе данных, перейдите в раздел «Правила» в представлении базы данных в консоли Firebase и убедитесь, что вам разрешено как читать, так и писать в базу данных:
Чтобы настроить логин и регистрацию пользователя, включите опцию «Электронная почта / пароль» на странице «Аутентификация» консоли Firebase:
Теперь давайте подробнее рассмотрим исходный код.
HMTL
Страница входа, главная страница и страница опроса имеют свои собственные HTML-файлы. company_meeting.html содержит HTML-код для образца опроса, и survey_template.html можно использовать для создания новых опросов.
CSS и Framework7
Есть несколько файлов CSS и Javascript для стилизации и Framework7. style.css - это файл, в который вы можете добавить свой собственный код CSS. Большинство файлов для Framework7 уже есть после создания проекта с готовым шаблоном, но значки Framework7 нужно устанавливать отдельно. Добавление иконок в проект объясняется в репозитории Github.
Основные функции приложения
Приложение инициализируется в app.js:
app.js также имеет функции для составления резюме ответов на странице отчета и его отображения.
routes.js используется для определения маршрутов к различным страницам приложения. При добавлении нового опроса не забудьте также добавить его путь и URL-адрес в файл.
company_meetings.js имеет специальный код для выборки опроса. Он показывает данные опроса, когда опрос открыт, и заполняет форму, если пользователь уже ответил на опрос.
Базовый функционал приложения довольно прост, но вы можете ознакомиться с ними поближе в исходном коде.
Вход и регистрация пользователя
database.js содержит код, связанный с базой данных Firebase. Когда пользователь входит в систему, код проверяет, существует ли уже пользователь с введенным адресом электронной почты, и создает нового пользователя, если нет. Код использует функции аутентификации Firebase fetchSignInMethodsForEmail, signInWithEmailAndPassword и createUserWithEmailAndPassword:
Определение логина и сохранение текущего пользователя происходит с onAuthStateChanged-функцией. Если ни один пользователь не вошел в систему, приложение перенаправляется на страницу входа.
Администраторы приложения определены в коллекции «admins» в базе данных Firebase. Статус администратора пользователя используется для принятия решения о том, показывает ли приложение страницу отчета пользователю или нет. Функция isAdmin проверяет, находится ли текущий пользователь в списке администраторов:
Скачивание опросов и сохранение ответов в базе данных
Опросы перечислены на главной странице функцией ShowSurveys. Сначала он сохраняет все ответы из базы данных, а затем создает HTML-код для каждого опроса. Ответы используются, чтобы проверить, ответил ли пользователь уже на опросы.
Функция answered проверяет, ответил ли пользователь на конкретный опрос:
Когда пользователь отправляет ответ на опрос, код проверяет, уже ли он ответил на опрос. В противном случае новый опрос создается с помощью add-функции Firebase. Если в базе данных уже есть ответ на опрос, он обновляется с помощью update-функции Firebase.
Вывод
В этой статье описывается, как создать простое приложение для управления опросами и ответами на них. Я объяснил наиболее интересные части кода, но если вы хотите узнать некоторые подробности, которые я не охватывал, вы можете проверить весь код в репозитории Github.
