Как создать программу анкету

Хотите узнать мнение аудитории или исследовать ее, собрать истории и анкеты, устроить голосование? Google вам в помощь.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

Один из способов получить обратную связь от читателей — создать электронную анкету на Google Формы. Инструмент — бесплатный, позволяющий расшарить ссылку с опросником в соцсетях и получить код для вставки на сайт.

Первым делом проведите подготовительную работу: выберите тему или проблему, в отдельном файле напишите название и описание, вопросы и ответы.

Составили? Проверяйте на ошибки. Проверили? Идем создавать опросник.

Чтобы работать в Google, у вас должен быть аккаунт в Google. Открывайте Google Диск. Нажимайте «Создать» (кнопка вверху боковой колонки слева) или кликайте на правую клавишу мышки.

Появилось всплывающее окно. Кликайте на «Еще», затем — на Google Формы. Вам предложат создать новую форму или использовать шаблоны. Здесь 15 вариантов шаблонов.

6.Создание анкеты клиента Анкета как основная сущность программы

Напишите заголовок опросника, добавьте описание — для чего он создан и что хотите узнать от читателей.

Чтобы добавить вопрос, нажимайте на плюсик в плавающем справа столбце. Сервис предложит создать вопрос с выбором одного ответа из списка. Но — возможны варианты. Вы можете установить вопрос со свободным ответом (в одно предложение или в абзац) либо с возможностью проголосовать за один или за несколько вариантов. Чтобы выбрать тип вопроса, нажимайте на стрелочку рядом с «Один из списка» и выбирайте из раскрывшегося меню.

• Текст (строка) — удобен, когда нужно получить электронную почту, ссылку (например, на профиль в соцсетях), адрес, цифру.
• Текст (абзац) — позволяет пользователю дать подробный ответ, высказать мнение, рассказать историю или описать ситуацию.
• Один из списка — читатель выбирает только один ответ из предложенных вариантов. Подобного типа опросы обычно создают в социальных сетях.
• Несколько из списка — вы предлагаете респондентам выбрать на поставленный вопрос несколько вариантов ответов.
• Раскрывающийся список — читатель выбирает только один ответ, но варианты «спрятаны». Такой тип помогает опроснику выглядеть более компактно.
• Загрузка файлов — читатель в качестве ответа загружает на ваш Google Диск файлы – документ или фотографию.
• Шкала — читатель оценивает какое-то явление по шкале, максимальное значение которой ровно 10 (но может быть и меньше). Только не забудьте установить метку для начала и конца шкалы.
• Сетка (множественный выбор и флажков) — пользователи выбирают один или несколько предложенных вариантов из сетки.
• Дата — позволяет указывать дату, включая год и время.
• Время — чтобы читатели могли указать время или продолжительность.

Как создать анкету в Word

Выбрали тип вопроса? Вносите в появившийся блок из заготовленного файла вопрос и варианты ответа. Если добавляете вариант «Другое» (актуально для «одного из списка» и «несколько из списка»), пользователи смогут вписать свой ответ.

Внизу блока укажите обязательный этот вопрос для читателей или нет (он не сможет отправить форму, не заполнив все обязательные вопросы).

Аналогичным образом добавляйте блоки с другими вопросами.

Внизу справа каждого блока есть три точки, нажимайте на них — здесь указаны дополнительные функции: добавить описание, выбрать только один вариант ответа, перемешать ответы.

В блоке «Текст (строка)» функция «Проверка ответов» позволяет ограничить ответ читателя указанием цифры. При текстовом варианте позволяет задать, что именно пользователь указывает: непосредственно текст, только электронную почту или только ссылку. Функция «длина» выставляет ограничения по количеству символов. Такая же функция есть у типа вопроса «Текст (абзац)».

Когда опросник собран, поработайте над его внешним видом. Для этого в верхнем меню выбирайте «Настроить тему»: установите цвет для опросника или добавьте иллюстрацию.

Опрос готов. Нажимайте на кнопку «Отправить» в верхнем меню. Сначала настройте доступ к опроснику (иначе ваши читатели его не увидят).

В появившемся окне, где указан уровень доступа, должно быть написано «Общедоступно в Интернете: найти и изменить элемент может любой пользователь». Если текст другой, нажимайте на «Изменить». И включайте доступ для всех в интернете. Сохраняйте.

Последний шаг — получить код, чтобы вставить опросник на сайт. Кликайте на значок HTML-кода. При необходимости установите ширину и высоту опросника. Копируйте код и добавляйте на сайт.

У нас получился такой опросник.

Чтобы опрос стал тестом (например, чтобы вы могли отметить правильные варианты ответов и задать начисление баллов), в правом верхнем углу нажмите на значок настроеек (в виде шестиренки), перейдите на вкладку тесты и включите режим.

Как создать опрос

Составить интересную анкету, заполнить которую будет не в тягость, а в радость, довольно просто. Но нужно знать несколько основных правил:

1. Определитесь с целью анкеты. Сфокусируйтесь на одной конкретной цели. Так вы сможете собрать релевантную информацию и не запутать пользователя.

2. Поймите, какую информацию собирать. Как только станет понятна цель, выберете, какие именно данные и в каком формате собирать.

3. Будьте объективны. Убедитесь, что задаёте только прямые вопросы, избегая наводящих конструкций.

4. Следите за порядком вопросов. Логичная последовательность вопросов важна, как для вас, так и для проходящего опрос. Самый оптимальный вариант — «от общего к частному».

5. Избегайте двойных вопросов. Один блок — один вопрос. Иначе вы получите искажённую информацию.

6. Пишите простым языком. В опросниках не стоит использовать жаргон и сложные обороты. Сделайте свою анкету простой и понятной и тогда каждый респондент наверняка дойдёт до финального вопроса.

7. Протестируйте опросник. Пришлите готовую анкету друзьям и коллегам, чтобы ещё раз проверить логику опроса и разглядеть возможные ошибки.

Источник: sdelano.media

Пилим веб-опросник как у Meduza: пошаговый гайд для начинающих

Меня зовут Егор, я Full-stack разработчик в Leader-ID. В этой статье я хочу поделиться простым рецептом по созданию красивого и удобного веб-опросника наподобие тех, что делает Meduza. Он умеет показывать статистику после ответа на отдельные вопросы, подсчитывать общий балл, выдавать комментарии, выгружать данные для анализа и шарить результаты в соцсети. Для реализации этой задачи я выбрал Django, DRF, Python и базу данных PostgreSQL.

Все детали — под катом.

Спустя час разглядывания кирпичной кладки (залипательное занятие, однако) появился первый результат в виде готовых моделей, которые спустя десять минут были описаны в Джанге.

Если ты начинающий, то советую пройти Djnago tutorial, там как раз описывается пошаговое создание опроса. И вдогонку DRF tutorial, чтобы окончательно погрузиться в тему.

Итак, в проекте я использовал:

• Django 3.0.3. Для бэкенда;
• django-rest-framework. Для создания rest-api;
• Python;
• PostgreSQL в качестве БД;
• Front-end — Nuxt.js, Axios, Element-UI.

Теперь по шагам

pip install Django — устанавливаем библиотеку.

django-admin startproject core — создаем проект на джанге.

cd core — переходим в директорию с проектом.

python manage.py startapp polls — добавляем приложение опроса.

Далее описываем модели в models.py в polls и создаем сериалайзер для DRF.

class Question(models.Model): title = models.CharField(max_length=4096) visible = models.BooleanField(default=False) max_points = models.FloatField() def __str__(self): return self.title class Choice(models.Model): question = models.ForeignKey(Question, on_delete=models.DO_NOTHING) title = models.CharField(max_length=4096) points = models.FloatField() lock_other = models.BooleanField(default=False) def __str__(self): return self.title class Answer(models.Model): user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.DO_NOTHING) question = models.ForeignKey(Question, on_delete=models.DO_NOTHING) choice = models.ForeignKey(Choice, on_delete=models.DO_NOTHING) created = models.DateTimeField(auto_now_add=True) def __str__(self): return self.choice.title

Код текстом тут

from rest_framework import serializers from .models import Answer, Question, Choice class ChoiceSerializer(serializers.ModelSerializer): percent = serializers.SerializerMethodField() class Meta: model = Choice fields = [‘pk’, ‘title’, ‘points’, ‘percent’, ‘lock_other’, ] def get_percent(self, obj): total = Answer.objects.filter(question=obj.question).count() current = Answer.objects.filter(question=obj.question, choice=obj).count() if total != 0: return float(current * 100 / total) else: return float(0) class QuestionSerializer(serializers.ModelSerializer): choices = ChoiceSerializer(many=True, source=’choice_set’, ) class Meta: model = Question fields = [‘pk’, ‘title’, ‘choices’, ‘max_points’, ] class AnswerSerializer(serializers.Serializer): answers = serializers.JSONField() def validate_answers(self, answers): if not answers: raise serializers.Validationerror(«Answers must be not null.») return answers def save(self): answers = self.data[‘answers’] user = self.context.user for question_id, in answers: # тут наверное лишняя запятая , ошибка в оригинальном коде question = Question.objects.get(pk=question_id) choices = answers[question_id] for choice_id in choices: choice = Choice.objects.get(pk=choice_id) Answer(user=user, question=question, choice=choice).save() user.is_answer = True user.save()

Затем пишем две вьюшки DRF в views.py, которые отдают все вопросы с вариантами и принимают все ответы от пользователя.

Код текстом тут

from .serializers import QuestionSerializer, AnswerSerializer from rest_framework.permissions import IsAuthenticated from rest_framework.generics import GenericAPIView from rest_framework.response import Response from .models import Question class GetQuestion(GenericAPIView): permission_classes = (IsAuthenticated,) serializer_class = QuestionSerializer def get(self, request, format=None): questions = Question.objects.filter(visible=True, ) last_point = QuestionSerializer(questions, many=True) return Response(last_point.data) class QuestionAnswer(GenericAPIView): permission_classes = (IsAuthenticated,) serializer_class = AnswerSerializer def post(self, request, format=None): answer = AnswerSerializer(data=request.data, context=request) if answer.is_valid(raise_exception=True): answer.save() return Response()

Теперь описываем ссылки в urls.py:

urlpatterns = [ path(», GetQuestion.as_view()), path(‘answer/’, QuestionAnswer.as_view()), ]

Добавляем модели в admin.py:

Код текстом тут

from django.contrib import admin from .models import Question, Answer, Choice class QuestionAdmin(admin.ModelAdmin): list_display = ( ‘title’, ‘visible’, ‘max_points’, ) class ChoiceAdmin(admin.ModelAdmin): list_display = ( ‘title’, ‘question’, ‘points’, ‘lock_other’, ) list_filter = (‘question’,) class AnswerAdmin(admin.ModelAdmin): list_display = ( ‘user’, ‘question’, ‘choice’, ) list_filter = (‘user’,) admin.site.register(Question, QuestionAdmin) admin.site.register(Choice, ChoiceAdmin) admin.site.register(Answer, AnswerAdmin)

Следующим шагом добавляем в settings.py (в директории core) в INSTALLED_APPS наше приложение polls. И выполняем команды запуска:

• python manage.py makemigrations — создаем миграцию для созданных моделей
• python manage.py migrate — выполняем миграцию в БД
• python manage.py createsuperuser — создаем суперюзера (админа)
• python manage.py runserver — запускаем сервер

Заходим в админку через браузер по ссылке, которая указана в консоли (http://127.0.0.1:8000/admin по умолчанию), и создаем вопросы и ответы к ним, проставляем баллы.

Мне было важно отдавать нашим партнерам списки людей, прошедших опрос, и их ответы. Но для этого недостаточно просто связать ответы с вопросами. Поэтому я добавил еще одну таблицу — «Варианты». Так образовалась связь между ответами юзера на вопросы с несколькими вариантами ответов. Это позволяет нам выгружать данные в том виде, в котором партнеры могут их легко интерпретировать.

В итоге структура БД получилась вот такой:

Теперь подключаем фронт.

В нем забираем список вопросов и ответов, проходимся по каждому элементу до последнего. В зависимости от типа вопроса меняем компонент со своей логикой и стилем. Соответственно, когда вопросов в списке не осталось, отправляем результат на бэк и получаем ответ с количеством баллов. После получения количества баллов открываем страницу результата, в случае наличия баллов вопросы более не показываем.

На данном этапе у нас уже готов опросник, который умеет все, что должен: задавать вопросы, получать и собирать варианты ответов, выдавать результат в виде баллов и комментариев.

Добавляем плюшки

Во-первых, мне было необходимо периодически выгружать данные. Для этого я просто добавил management command.

Во-вторых, хорошо бы еще реализовать шаринг результатов опроса в социальные сети. ОК. Пилим функционал, который позволит поделиться картинкой с баллами ВКонтакте и Facebook.

Генерим сто вариантов картинок, отражающих баллы, для ВК и Facebook отдельно (разные разрешения). Теперь подключаем передачу ссылки на картинку в социальном компоненте фронтенд части. С ВКонтаке все оказалось просто: передаем параметр image с прямым URL-адресом нужной. А вот с Facebook пришлось повозиться.

Оказалось, что они не принимают медиа по API, и если я передавал image или picture с URL картинки, то в посте показывалось большое пустое поле. Как потом оказалось, берет он картинку из метаинфы (og:image) самого сайта, которым поделились (передаем в ссылке параметр u). А ее, ко всему прочему, нужно было динамично менять.

Мне не хотелось делать лишних редиректов и механик на бэке, и я решил переделать SPA (single page app) на SSR (server-side render) на фронте, чтобы в зависимости от запроса менялся url картинки с баллом в head-meta до запуска JavaScript в браузере. Благо, взятый за основу фреймворк Nuxt.js позволяет сделать это простым переключением режима. Теперь осталось набросать client-only теги и добавить логику смены head от наличия query балла.

Дополнительно на сервере понадобилось запустить daemon сервис, чтобы отдавать сформированные страницы, а статику оставить так же nginxу. Все, профит!

Оживляем опросник

Для того, чтобы поддерживать уровень интереса участников в процессе заполнения опроса, я добавил динамический показ статистики к каждому отдельному вопросу. Ответив на вопрос, пользователь видит, как ответили другие. Иногда человеку бывает непонятно, зачем ему задают эти вопросы. Поэтому я дополнил каждый вопрос забавными пояснениями. Ну и самый главный трюк по оживлению моего опросника провернули дизайнеры нашей компании.

Итоги

Такие медийные опросы достаточно просты в реализации и, главное, они очень нравятся пользователям. Их можно использовать и в хвост и в гриву: для социологических исследований, информирования/проверки знаний или создания интерактивных элементов на сайтах и сервисах. Я постарался подробно описать процесс их создания, но если остались вопросы, welcome в комментарии. Примеры реализации опросов на этом движке можно посмотреть по этим двум ссылкам: healthcare.leader-id.ru и covid.leader-id.ru.

• Блог компании Leader-ID
• Разработка веб-сайтов
• Python
• Программирование
• Django

Источник: habr.com

Как создать опрос удовлетворенности сотрудников с Angular и сохранить его результаты в коллекции MongoDB

Опросы удовлетворенности полезны как для самих сотрудников, так и для работодателей.

В первом случае они показывают, что начальство принимает во внимание интересы подопечных и ценит их. Таким образом, повышается моральный дух и растет удовлетворенность работой.

Во втором случае опросы удовлетворенности могут предоставить ценную информацию как о том, с чем у компании все в порядке, так и о проблемных моментах, нуждающихся в исправлении. В результате работодатель принимает обоснованные решения, касающиеся поддержки своих сотрудников и улучшения общей рабочей атмосферы.

Удовлетворенные сотрудники отличаются высокой продуктивностью. Они по-настоящему вовлечены в работу, что приводит к повышению создаваемой коммерческой ценности. И наоборот, если в организации есть неудовлетворенные сотрудники, прибыльность бизнеса будет падать. Так что полезно всегда быть в курсе, и в этом помогут внутренние опросы работников.

В этой статье мы расскажем, как создать подобный опрос. Но прежде рассмотрим технологии, которые будем использовать.

• Angular: фреймворк для проектирования приложений и платформа для создания одностраничных приложений.
• SurveyJS: бесплатный конструктор форм на JavaScript с открытым исходным кодом (ссылка на Github), который упрощает создание форм на собственном сервере.
• MongoDB: документная база данных. Классифицируется как база данных типа NoSQL. MongoDB использует JSON-подобные документы с опциональными схемами.

Кто-то может возразить: хоть Angular и является предпочтительным корпоративным фреймворком, с его помощью разработчику не так-то легко создавать анкеты, которые хорошо масштабируются при наличии в них множества вопросов. Но в этой статье мы покажем элегантный способ разработки корпоративного опроса с помощью Angular, в котором не нужно использовать пары ngIf и ng-template для каждого вопроса, а также лишние привязки.

На помощь нам придет SurveyJS. С помощью этой библиотеки с открытым исходным кодом можно упростить создание форм и работу с ними в динамическом режиме. Рассмотрим это более подробно ниже, а пока разберемся, какие вопросы мы поместим в анкету.

Они подробно указаны в таблице ниже:

Анкета удовлетворенности сотрудников будет включать различные вопросы. Так мы определим, удовлетворены ли сотрудники работой в компании, а если нет, то почему.

В следующем разделе мы рассмотрим, почему используем SurveyJS в качестве инструмента для создания опроса.

Почему именно SurveyJS?

Следующие доводы красноречиво показывают, почему стоит использовать SurveyJS в сочетании с Angular для решения этой задачи, вместо того чтобы разрабатывать формы/опросы вручную с помощью примитивов Angular.

• Создание опросов на собственном сервере. Мы можем защитить данные и хранить их в выбранной базе данных, а не использовать сторонние онлайн-сервисы, как, например, Google Формы, которые хранят результаты в файлах Google Таблиц.
• Возможность легко создавать сложные опросы, включающие условную логику и ветвление. Мы также можем делать формы более развернутыми и адаптированными ко многим случаям использования без необходимости встраивать дополнительный JavaScript.
• Создание динамических форм, которые легко обновлять. Формы SurveyJS основаны на принципе data-first, поэтому нужно просто обновить модель JSON-формы.
• Включение различных компонентов ввода с валидацией, таких как многострочные вводы, чекбоксы, выпадающие окна, матричные анкеты, загрузка файлов и многое другое, что дает большую гибкость при разработке форм и опросов.
• Создание многоязычных опросов. Мы можем просто создать один общий опрос вместо множества анкет для каждого отдельного языка.

И это еще не все преимущества. SurveyJS дает возможность либо использовать имеющиеся компоненты форм, либо настроить все с помощью CSS, чтобы эти компоненты были более индивидуальными и отвечали корпоративным интересам.

Теперь приступим к самому процессу.

Создание опроса

Шаг 1. Настройка проекта Angular

Сначала необходимо убедиться в том, что у нас установлена последняя версия Angular CLI.

Узнать больше об Angular CLI и найти подробную информацию об установке можно здесь.

После установки Angular CLI создаем приложение Angular с помощью команды ng, как показано ниже:

ng new employee-satisfaction-survey-app

Эта команда создаст приложение со следующей структурой:

Шаг 2. Установка и настройка SurveyJS

Теперь, когда мы создали приложение, установим библиотеку SurveyJS (для получения более подробной информации об установке обратитесь к официальной документации) с помощью приведенного ниже кода:

npm install survey-angular-ui — save

После установки SurveyJS приступаем к настройке.

Шаг 2.1. Ссылка на таблицы стилей пользовательского интерфейса SurveyJS в файле angular.json

SurveyJS поставляется с 2 таблицами стилей: Modern и DefaultV2 (см. на рисунке ниже).

Шаг 2.2. Применение в компоненте приложения темы, на которую дана ссылка

Для этого воспользуемся методом StyleManager.applyTheme(theme-name); и передадим название темы в качестве параметра ( “modern” или “defaultV2” ).

import < StylesManager >from “survey-core”;

StylesManager.applyTheme(«modern»);

Шаг 2.3. Создание модели опроса

Вот что говорится в документации SurveyJS:

Модель описывает макет и содержимое опроса. Простейшая модель опроса содержит один или несколько вопросов без модификации макета.

Модель состоит из объекта JSON, в котором объявлены вопросы и их типы. Этот объект JSON называется схемой.

Например, эта простая схема содержит один вопрос, объявленный в массиве элементов:

const surveyJson = elements: [ // каждый элемент содержит вопрос
name: ‘Name’,// имя поля
title: ‘Enter your full name:’,// название поля
type: ‘text’,// тип поля
>,
],
>;

Затем создадим модель, передав схему в конструктор Model, как показано в приведенном ниже коде:

Шаг 2.4. Добавление модуля SurveyJS в app.module.ts

Чтобы отрендерить опрос, нужно импортировать модуль библиотеки форм SurveyJS в app.module.ts .

Потом просто добавим элемент в шаблон компонента и передадим экземпляр модели, который создали выше, в качестве атрибута model :

Шаг 2.5. Запуск приложения

Наконец, запустим приложение:

npm run start

Если вы правильно следовали вышеуказанным шагам, на выходе у вас получится следующее:

Шаг 3. Создание опроса удовлетворенности сотрудников

Теперь сосредоточимся на схеме опроса и посмотрим, как можно использовать различные типы компонентов в соответствии с каждым вопросом, содержащимся в нем.

Если мы внимательно взглянем на опрос, то увидим, что нужно 4 типа компонентов.

• Простое текстовое поле: text .
• Простое поле текстовой области: comment .
• Поле компонента RadioGroup: radiogroup .
• Матрица компонентов RadioGroup: matrix .

Если хотите получить более подробную информацию о различных компонентах, предоставляемых SurveyJS, ознакомьтесь с API библиотеки форм.

Итак, мы знаем, какие компоненты нам нужны. Обновим схему JSON:

const surveyJson = title: ‘Your opinion counts!’,
description: ‘Please express what you think about your job?’,
pages: [
elements: [
name: ‘Name’,
title: ‘Enter your full name:’,
type: ‘text’,
>,
name: ‘OverallSatisfaction’,
title:
‘How would you describe your overall level of job satisfaction?’,
type: ‘radiogroup’,
isRequired: true,
choices: [
‘Very satisfied’,
‘Satisfied’,
‘Neutral’,
‘Dissatisfied’,
‘Very dissatisfied’,
],
>,
name: ‘Quality’,
title: ‘How would you rate the following?’,
type: ‘matrix’,
isRequired: true,
columns: [
value: 1,
text: ‘Very poor’,
>,
value: 2,
text: ‘Poor’,
>,
value: 3,
text: ‘Average’,
>,
value: 4,
text: ‘Good’,
>,
value: 5,
text: ‘Excellent’,
>,
],
rows: [
value: ‘Salary’,
text: ‘Salary’,
>,
value: ‘OverallBenefits’,
text: ‘Overall benefits’,
>,
value: ‘HealthBenefits’,
text: ‘Health benefits’,
>,
value: ‘PhysicalWorkEnvironment’,
text: ‘Physical work environment’,
>,
value: ‘TrainingOpportunities’,
text: ‘Training opportunities’,
>,
value: ‘WorkingTimeFlexibility’,
text: ‘Working time flexibility’,
>,
],
>,
name: ‘ValuedAtWork’,
title: ‘Do you feel valued at work?’,
type: ‘radiogroup’,
isRequired: true,
choices: [‘Yes’, ‘No’],
>,
name: ‘Explanation’,
title: ‘If no please explain’,

visibleIf: “=’No’”,
type: ‘comment’,
>,
name: ‘Feedback’,
title: ‘Please Provide Any Additional Feedback’,
type: ‘comment’,
>,
],
>,
],
>;

Примечание:

• Чтобы пометить вопрос как обязательный, добавьте свойство isRequired .
• Чтобы задать тип вопроса, используйте свойство type .
• Чтобы показать поля при выполнении условия, применяйте свойство visibleIf .

Затем сохраните и обновите приложение, чтобы увидеть изменения в браузере:

Чтобы обработать опрос после того, как пользователь его заполнит, нужно использовать обработчик событий onComplete. В качестве примера запишем (выведем) результаты в консоль браузера.

Добавьте следующий код в app.component.ts :

Сохраните, обновите и откройте консоль браузера, чтобы увидеть результаты, отображаемые в ней после завершения опроса:

Опрос готов. Теперь перейдем к настройке базы данных для хранения его данных.

Шаг 4. Настройка базы данных MongoDB

При работе с реальными приложениями результаты в консоль не выводятся, но мы будем использовать эти результаты в других веб-сервисах. Фактически, нам нужно отправить результаты на сервер, где они будут храниться в базе данных и обрабатываться системой.

Для полноты картины создадим простой API с помощью Express и MongoDB. Этот API будет получать результаты опроса и хранить их в базе данных.

Сначала установим node, npm и MongoDB (можете скачать их отсюда).

$ node -v
$ npm -v
$ mongo -v

Затем создадим приложение Node.js и установим необходимые пакеты. Вот что мы будем использовать.

• Express: минималистичный фреймворк для веб-приложений Node.js, предоставляющий набор функций для веб- и мобильных приложений.
• Nodemon: инструмент, помогающий разрабатывать приложения на базе Node.js, автоматически перезапуская приложение node при обнаружении изменений файлов в каталоге.
• Mongoose: инструмент моделирования объектов MongoDB для Node.js.

$ mkdir employee-satisfaction-survey-api
$ cd employee-satisfaction-survey-api
$ npm init
$ npm install express nodemon mongoose — save

Затем создадим следующую структуру приложения:

• package.json :

“name”: “employee-satisfaction-survey-api”,
“version”: “1.0.0”,
“description”: “Employee satisfaction survey api”,
“main”: “index.js”,
“scripts”: “start”: “nodemon index.js”
>,
“author”: “Sihem BOUHENNICHE”,
“license”: “ISC”,
“dependencies”: “express”: “⁴.18.2”,
“mongoose”: “⁶.7.4”,
“nodemon”: “².0.20”
>
>

• index.js — точка входа API, содержащая приложение Express и объявление маршрутов:

// Импорт зависимостей
const express = require(“express”);
const database = require(“./initdb.utils”);

// Создание экземпляра приложения
const app = express();

// Определение JSON в качестве типа возвращаемого значения
app.use(express.json());
app.use(express.urlencoded(< extended: true >));

// Настройка заголовков
app.use((req, res, next) => res.setHeader(«Access-Control-Allow-Origin», «*»);
res.setHeader(«Access-Control-Allow-Methods», «GET, POST, PUT, DELETE»);
res.setHeader(«Access-Control-Allow-Headers», «Content-Type»);
res.setHeader(«Access-Control-Allow-Credentials», true);
next();
>);

// Определение маршрутов
app.use(«/hello», (req, res) => res.status(200).json(< message: «Hello world !» >);
>);
app.use(«/surveys», require(«./survey.routes»));

// Этот маршрут будет обрабатывать все запросы, которые
// не обрабатываются никаким другим обработчиком маршрутов. С
// помощью этого обработчика мы перенаправяем пользователя на
// страницу ошибки с сообщением NOT FOUND и кодом
// состояния 404 (код состояния HTTP для NOT found).
app.all(«*», (req, res) => res.status(404).json(< error: «End point not found» >);
>);

// Обработка ошибок базы данных
database.on(«error», (error) => console.log(«Connection error: — — — — — — — — — — — — — «);
console.log(error);
console.log(» — — — — — — — — — — — — — — — — — — — — — — «);
>);

// Запуск приложения после подключения к базе данных
database.once(«connected», () => console.log(«Database Connected»);

const PORT = 3001;
app.listen(PORT, () => console.log(«Server ready at 3001»));
>);

• initdb.js содержит конфигурацию соединения с базой данных:

const mongoose = require(“mongoose”);

const MONGO_HOST = «localhost»;
const MONGO_PORT = 27017;
const MONGO_DB_NAME = «surveydb»;
const MONGO_URL = `mongodb://$:$/$`;
const connectOptions = useNewUrlParser: true,
>;

mongoose.connect(MONGO_URL, connectOptions);
const database = mongoose.connection;

module.exports = database;

• survey.model.js содержит схему модели опроса:

const mongoose = require(“mongoose”);

const SurveySchema = mongoose.Schema(
Name: String,
OverallSatisfaction: String,
Quality: Array,
ValuedAtWork: String,
Explanation: String,
Feedback: String,
>,
timestamps: true,
strict: false,
>
);

module.exports = mongoose.model(«Survey», SurveySchema);

• survey.controller.js содержит веб-сервисы. В этом примере мы создадим только 2 сервиса — для сохранения и получения результатов.

const Survey = require(“./survey.model”);

// Создание и сохранение нового опроса
exports.create = (req, res) => const surveyData = req.body;

// Создание запроса POST
const survey = new Survey(surveyData);

// Сохранение запроса POST в базе данных
survey
.save()
.then((data) => res.send(data);
>)
.catch((err) => res.status(500).send( message:
err.message || «Some error occurred while creating the survey.»,
>);
>);
>;

// Находим все опросы
exports.findAll = (req, res) => Survey.find(<>)
.then((data) => res.send(data);
>)
.catch((err) => res.status(500).send( message: err.message || «Some error occurred while retrieving data.»,
>);
>);
>;

• survey.routes.js содержит маршруты API:

const surveyController = require(“./survey.controller”);
const router = require(“express”).Router();

//CRUD
router
.post(«/», surveyController.create)
.get(«/», surveyController.findAll);

module.exports = router;

Теперь запустим API, выполнив следующую команду:

npm run start

Если вы перейдете по адресу http://localhost:3001/hello, то увидите сообщение “hello world!”.

Если попробуете перейти по адресу http://localhost:3001/surveys, то получите пустой ответ, поскольку опрос еще не сохранен.

В следующем разделе посмотрим, как сохранить результаты с помощью API.

Шаг 5. Сохранение результатов в коллекции MongoDB

Итак, мы располагаем API. Обновим app.component.ts и, вместо того чтобы просто записать результаты опроса, отправим их с помощью HTTP-запроса в API.

Если мы нажмем на кнопку завершения опроса, то после заполнения всех полей данные будут отправлены в API:

И если вы сейчас попробуете зайти на http://localhost:3001/surveys, то увидите результаты:

Полный код этого проекта можно найти по следующим ссылкам.

• GitHub-репозиторий приложения Angular.
• Репозиторий Express API на GitHub.

• Собеседование по Angular: ответы на часто задаваемые вопросы
• 15 идей для вашего приложения. Часть 3
• Типы операций обновления в MongoDB с использованием Spring Boot

Читайте нас в Telegram, VK и Дзен

Источник: nuancesprog.ru