Андела спонсировала этот пост.
Жизнь — это непрерывное испытание ваших знаний. Этот учебник углубляется в том, как построить приложение для вопросов-ответов (Quiz) с Nuxt и Xata в качестве хранилища данных.
Nuxt.js-это интуитивно понятная рамка с открытым исходным кодом, созданная на VUE, которая помогает создать перформансные, производственные веб-приложения. И XATA — это база данных PostgreSQL с открытым исходным кодом, созданная для современной разработки, которая оптимизирована для надежности, масштабируемости и опыта разработчика.
В этом руководстве вы узнаете, как использовать базу данных XATA для:
Получите вопросы и ответы. Отслеживайте количество ответных вопросов и правильные ответы. Отобразить конечный результат на основе производительности пользователя.
Давайте рассмотрим и создадим что -то удивительное вместе!
Получите завершенный код Nuxt и XATA для этого руководства в этом репо.
Приложение викторины
Начиная
Прежде чем начать, выполните следующие задачи, чтобы создать новое приложение Nuxt:
Запустите команду Nuxt Command-Line Interface (CLI), которая будет объединить шаблон и его необходимые зависимости для запуска нового проекта:
nox nux@anding init xat-quiz-app 1 npx npx nux@andent init xat-chiz-app
Примите параметры по умолчанию и следуйте другим инструкциям из подсказки установки:
CD Xata-Quiz-App NPM Установка NPM Run Dev 123 CD Xata-Quiz-Appnpm InstallNpm Run Dev Dev
Приложение работает на
Создать новую базу данных
С помощью CLI XATA установите команду для подключения кода проекта к XATA и аутентификации вашей учетной записи к CLI, которая генерирует новую базу данных.
Далее запустите эту команду:
Если 1 int 1 -й
Интеграция Xata CLI с nuxt.js
Эта команда создает файлы .env, .xatarc и src/xata.ts в вашем корневом каталоге и включает в себя все необходимые учетные данные для доступа к вашей базе данных.
Обратите внимание, что данные в этих файлах автоматически генерируются.
Определите схему базы данных
Создайте новую семенную папку в корневом каталоге проекта и загрузите файл CSV.
Есть два способа добавить данные с его определенной схемой: либо вручную, через пользовательский интерфейс XATA (пользовательский интерфейс), либо с помощью CLI. Xata CLI будет обрабатывать создание таблицы и автогенерировать схему, импортируя данные из терминала в базу данных.
curl -create -dirs -o Seed/Вопросы.csv 12 curl -create -dirs -o Seed/Вопросы.csv
Выберите один из приведенных выше методов и примените его к вашему проекту. Либо вручную создайте папку, либо запустите команду, чтобы создать файл CSV в папке SEED.
Создать другую схему
Причина для этого — связать ответы Таблица (которая является примером отношений с одним ко многим) к вопросы Таблица, которая может быть невозможна путем импорта CSV в пользовательский интерфейс XATA.
На панели приборной панели нажмите Столы Чтобы добавить новую таблицу, называемую ответык ранее вопросы таблица с помощью + Добавить таблицу кнопка.
Вид схемы для добавления дополнительных таблиц
Ниже ответы Схема, нажмите + Добавить столбец Чтобы добавить следующие столбцы со следующим типом столбца:
Ответ_ Текст: текст
is_correct: Логин
вопрос: связь; под Таблица для ссылки записи от В раскрывающемся меню выберите вопросы от выпадения. Для название столбцавведите вопрос
Чтобы создать тест, вам нужно добавить записи в вопросы и ответы Таблицы в вашей базе данных XATA, как показано в этой анимации. Обязательно включите правильные и неправильные ответы на ответы таблица для каждого вопроса в вопросы стол.
С помощью схемы базы данных генерируйте код, который позволяет вам получить доступ и запрашивать данные в приложении Nuxt. Запустите эту команду, чтобы применить изменения в вашем коде:
xata тянуть основное 1 xata pult main
Это обновляет содержимое src/xata.ts на основе схемы, определенной в основной ветви вашей базы данных. Если вы внесете какие -либо изменения в схему, запустите Xata Pull
Зарегистрировать API
В кодовой базе сервер в корневом каталоге используется для регистрации API, что будет иметь жизненно важное значение при вызове API на странице вашего приложения.
В справочнике сервера создайте папку с названием API с следующими файлами:
Ответы.ts Вопросы.ts
сервер/API/answers.ts
Сервер/API/Вопросы.ts
Каждый файл импортирует функцию GetXataClient и назначает результат вызова функции с переменной с именем XATA. А сервер Использует наборы конфигурации в файле .env для чтения его данных из базы данных.
Также важно отметить, что функция DefineEventhAndler ExportEventhAndler возвращает данные в JSON.
Чтобы проверить результаты в браузере, запустите либо или
«Ответы» данные JSON
Стиль приложение
Создайте файл с именем Assets/css/main.css в корневом каталоге, чтобы содержать таблицу стилей приложения:
Активы/css/main.css
Теперь обновите файл nuxt.config.ts, чтобы принять изменения во всем мире.
nuxt.config.ts
Создать приложение викторины
Теперь вы готовы начать настройку приложения викторины. Создайте папку с именем компонентов в корневом каталоге и добавьте эти файлы: cool.vue, ovestion.vue и result.vue.
Компоненты/нижний колонтитул. Vue
Компоненты/Вопросы. Vue
Компоненты/Result.vue
Чтобы увидеть результат в браузере, создайте новую папку, называемую страницами; В нем создайте файл с названием index.vue со следующим содержимым:
Страницы/index.vue
Composable Useseometa поможет вам определить seo вашего сайта с деталями, которые можно найти в каждом современном веб -приложении или веб -сайте, таких как заголовок, описание, изображение открытого графа (OG), описание для социальных сетей и так далее.
Кроме того, массив результатов объектов будет отображаться только тогда, когда пользователь завершит тест, чтобы сообщить о количестве ответов, которые пользователь получил правильно со своим соответствующим заголовком и описанием.
Пока что страница выглядит так:
Образец приложения викторины
Представить вопросы
Прежде чем представить вопросы из базы данных, обновите домашнюю страницу:
Страницы/index.vue
Чтобы отслеживать, сколько вопросов и ответов игрок правильно, определить состояние со значением по умолчанию 0 с Usstate композитный. Кроме того, импортируйте вопросы и ответы на конечные точки API с UseFetch композитный.
В компоненте «Вопросы», используя директиву V-IF с вопросами без вопросов. В противном случае, покажите компонент результата с директивой V-ELSE. Наконец, примените атрибуты: вопросы и: ответы и свяжите их с вопросы и ответы массивы объектов.
А числа переменная считает длину вопросы множество.
Компоненты/Вопросы. Vue
Обновленный код для компонента результата принимает вопросы и свойства ответов, передаваемые от родительского компонента на макросе defineprops (). Функция GetaNswersForQuestion использует метод фильтра для создания нового массива.
Все вопросы и ответы
Показать один вопрос
На данный момент все вопросы отображаются, но лучший пользовательский опыт — показывать один вопрос за раз.
Вернувшись в файл страниц/index.vue, передайте атрибут, называемые вопросами, бездействующими в компоненте вопросов.
Страницы/index.vue
В компоненте вопросов. Пропустите реквизит следующим образом:
Компоненты/Вопросы. Vue
Проверьте, соответствует ли текущий индекс вопросов, отвеченный в цикле, индекс в базе данных, используя атрибут V-Show с QI в V-от.
Отображение одного вопроса с ответами
Слушайте клики
У вас все еще есть статическая страница, которая не является интерактивной для кликов пользователя. Чтобы отслеживать правильный ответ, вы должны передать выбранный ответ родительскому компоненту.
Обновите вопросы. Компонент.
Компоненты/Вопросы. Vue
Функция selectAnswer () передает параметр с логическим значением is_correct и получает эмит-событие с стоимостью ответа вопросом. Vue требует, чтобы вы добавили опцию EMIT, которая позволяет вам знать, какие пользовательские события будут излучены из компонента.
В домашнем компоненте, index.vue, передайте событие в компоненте вопросов с помощью вопросов, которая отвечает, что отвечает за увеличение оба значения TotalCorrect (отвечать) и вопросы безвкусно (вопросы) в клике пользователя.
Страницы/index.vue
Работайте над баром прогресса
Когда пользователь отвечает на вопрос, панель выше вопроса должна увеличиться. В файле вопросов. Vue используйте привязки стиля и передайте объект (: стиль), чтобы динамически обрабатывать изменения.
Кроме того, в элементе состояния измените статическое значение на соответствующие выражения.
Компоненты/Вопросы. Vue
Прогресс
Включить сброс викторины
Достигнув конца викторины, пользователю было бы неплохо, если бы он мог нажать кнопку «Сбросить» и вернуться к первому вопросу. В компоненте index.vue добавьте:
Страницы/index.vue
А Кнопка сброса Элемент содержит условие, в котором говорится, что если количество отвеченных вопросов равно длине вопросов в базе данных, пользователь должен быть возвращен в первый вопрос.
Рассчитайте результат
Результат викторины необходим для пользователя, чтобы узнать свой счет.
Обновите компонент index.vue и передайте следующее в компоненте
Страницы/index.vue
Далее, обновите компонент результата со следующим:
Компоненты/Result.vue
В блоке кода ResultIndex использует вычисленный объект для сравнения минимальных и максимальных значений с общим количеством правильных ответов пользователя. Если оба индекса верны, был найден результат. CurrentResult отображает результат из массива результатов, отображая значение индекса.
Наконец, вычисленное свойство titleclass изменяет цвет выражения {{currentResult.title}} на любом красный Если пользователь дает неверные ответы или зеленый Для правильных ответов.
Результаты экран
Завершая
Приложение Quiz — это забавный проект, который можно масштабировать, чтобы включить другие функции, такие как сбор данных от нескольких пользователей с аутентификацией.
Это руководство продемонстрировало возможности использования XATA в качестве базы данных бэкэнд в сочетании с технологией frontend, Nuxt и ее эффективностью для различных приложений, таких как викторины. Мы надеемся, что у вас будет столько же забавных приложений для создания викторины, сколько у ваших пользователей отвечают на вопросы.
Больше информации
Для получения дальнейшего понимания изучите ссылки ниже:
Демо -викторина приложение GitHub Repo xata Docs: Импорт/экспорт файлов CSV Nuxt Docs: seo и Meta Начало работы с документами Nuxt и Xata Nuxt: Структура каталога/сервер.
Теперь вы освоили создание приложения Quiz, прочитайте блог Анделы, Python для автоматизации API: создать файл викторины викторины викторины и узнайте, как генерировать список вопросов и ответов на CSV -викторины, используя API викторины.
Andela предоставляет крупнейший в мире частный рынок для глобального отдаленного технологического таланта, основанного на платформе с AI для управления полным жизненным циклом найма контракта. Andela помогает компаниям масштабировать команды и быстрее реализовать проекты через специализированные области: App Engineering, AI, облако, данные и аналитика. Узнайте больше последних из Andela Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Teri Eyenike — инженер -программист и член Andela Talent Network, частного мирового рынка для цифровых талантов. Имея более пятилетнего опыта, ориентированного на создание полезных веб -интерфейсов и других приложений с использованием современных технологий, … Подробнее от Teri Eyenike
