Файл: Вопросы брифа с заказчиком с ответами.docx

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Дипломная работа

Дисциплина: Не указана

Добавлен: 06.11.2023

Просмотров: 35

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.




Введение
В наше время социальные сети являются одной из наиболее популярных форм изучения и развлечения. Целью данной дипломной работы является разработка географической мини-игры для социальной сети ВКонтакте на JavaScript и React. Главной идеей разрабатываемой мини-игры является поиск страны или региона России на карте по ее названию и флагу.

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

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

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

  1. Сбор, анализ и формирование требований к программному продукту



    1. Сбор требований к программному продукту


Для сбора требований был проведен бриф с заказчиком, в котором отражена основная информация и желаемый результат от итогового программного продукта, бриф с ответами отражен в таблице 1.
Таблица 1 – Вопросы брифа с заказчиком с ответами
Вопросы брифа
Ответы

Общая информация

1
Полное название компании
ИП Наумов Д. А.

2
Контактная информация (ФИО, должность контактного лица, электронная почта, рабочий телефон)
Наумов Денис Анатольевич, директор

Телефон: +7 (928) 296-21-28

Email: Naum@flamingo.expert

3
Планируемые сроки проекта
До 20 мая

Постановка задачи

4
Что нужно сделать? Какую задачу вы ставите перед нами?
Необходимо разработать мини-приложение ВКонтакте – GeoGame. Оно будет представлять собой казуальную географическую игру с поиском стран или регионов на карте по названию и флагу.

5
Кто является целевой аудиторией проекта? Опишите характерные черты посетителей сайта.
Пользователи ВКонтакте 14-35 лет любого пола. Они много пользуются социальной сетью и заинтересованы в использовании встроенных приложений. Им интересна география и казуальные игры.

6
Перечислите ваших прямых и косвенных конкурентов (желательно с адресом сайта).

GeoPuzzle

https://vk.com/app7440451?ref=catalog_recent

Countries - страны и столицы https://vk.com/countries_app?ref=catalog_search

Geotastic

https://geotastic.net/home

Содержание проекта

7
Опишите предварительную структуру приложения

  • Страница- меню выбора режимов

  • Игровая страница

  • Страница результа

Продолжение таблицы 1

8
Опишите основные функции приложения

  • Показ флага и названия загаданной страны

  • Постраничная навигация панелей

  • Отображение регионов на карте

  • Возможность выбора регионов на карте

  • Отображение идентификатора раунда

  • Отображение результатов после игры

  • Отображение результата между раундами

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

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


11
Опишите страницу результатов
На странице результатов должны быть выведены результаты всей игры. Каждый результат должен отображать выбор пользователя и правильный выбор. На странице должна быть кнопка «вернуться в главное меню» и «повторить игру».

12
Перечислите основные пункты навигационного меню приложения
Названия режимов и их описание:

  • Регионы России

  • Страны мира

13
В каких расцветках хотите сделать интерфейс приложения?
Интерфейс должен быть сделан с дизайн системой VK/UI и фирменными цветами ВК: #2688EB – голубой, #FFFFFF – белый.




  • провести тестирование на соответствие макету (Проверить макет на соответствие и наличие элементов (их размеры и расположение), шрифты, цвета и т.д.);

  • протестировать основной функционал (Ручное);


Таблица 7 – Тестирование функции useSubscribe

№
Название теста
Результат

1
Должен вызывать слушаетелей
Пройден


Результаты тестирования представлены на рисунке 10.


Рисунок 10 – Результаты тестирования
5 Разработка документации на программный продукт
5.1 Руководство разработчика
Системные требования к разработке продукта:

npm - выше 8 версии

node.js выше 14 версии

react - выше 18.0.2

@vkontakte/vkui - вышe 5.3.1
5.1.1 Полезная информация
Перед началом разработки приложения необходимо ознакомиться со следующим перечнем документаций:


  • документация VK/UI = https://vkcom.github.io/VKUI/;

  • документация YandexMap - https://yandex.ru/dev/maps/;

  • документация VK API= https://dev.vk.com/method;

  • документация React= https://react.dev/learn;


5.1.2 Запуск приложения
Для запуска приложения необходимо выполнить следующие действия:


        1. Выполнить в директории проекта команду «npm install»

        2. После установки модулей выполнить команду «npm run start»

        3. Дождаться выполнения работы скрипта и открыть проект на странице https://localhost:10888/

Все исходные файлы прое

Рисунок 28 – Страница игры
П = (121 342,6 × 20%) / 100% = 24 268,52 руб.

Вреал = 121 342,6 + 24 268,52 = 145 611,12 руб.
Основные показатели, учитываемые при расчете цены программного продукта (приложения) приведены в таблице 11.
напряжения, утомления зрительного анализатора, устранения влияния гиподинамии и гипокинезии, предотвращения развития позотонического утомления выполнять комплексы упражнений.

8.4 Требования безопасности в аварийных ситуациях

8.4.1 Во всех случаях обрыва проводов питания, неисправности

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

1.3 Требования к дизайну приложения


По результатам сбора и анализа требований, выявлено, что целевая аудитория проекта - люди в возрасте от 14 до 35 лет. При выборе требований к

ия в каталоге содержит следующие обязательные поля:

  • Название

  • Краткое описание

  • Скриншоты из приложения



  • динаково, ВКонтакте рекомендует продумывать название каждого экрана, чтобы пользователь не потерялся в приложении.



4.2 Требования к режиму работы


В штатном режиме функционирования Приложение должно обеспечивать следующий режим работы: доступность функций приложения в режиме — 24 часа в день, 7 дней в неделю (24х7).

4.3 Требования к сохранности информации при авариях


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

  • полным или частичным прекращением выполнения функциональных задач;

  • аномальным (нештатным) режимом работы приложения;

  • полной или частичной потерей информации;

  • нелегитимным доступом к информации в приложении и предумышленным ее искажением или уничтожением;

4.4 Требования к исходному коду


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

Исходный код программы должен сопровождаться значимыми комментариями.

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

5 Состав и содержание работ по созданию приложения

5.1 Общие требования к составу и содержанию работ по созданию Приложения


Состав и содержанию работ по созданию Приложения определяются настоящим Техническим заданием.

В рамках создания приложения разработчики должны произвести следующие работы:

  • разработка Приложения GeoGame;

  • развертывание Приложения на промышленном сервере;

  • проведение испытаний приложения.

  • Модерация приложения, для отображения в каталоге

  • Проведение испытаний приложения нагрузкой реальными пользователями


Приложение Б

//Компонент SelectRegionsMap

import React, { useLayoutEffect } from "react";

import { Map, Placemark, useYMaps } from "@pbe/react-yandex-maps";

import { useSubscribe } from "../hooks/useSubscribe";

function scheduleDrawMap(callback) {

setTimeout(callback, 100);

}

function SelectRegionsMap({ selectMapModel, height }) {

useSubscribe(selectMapModel.successMarkCoords$);

const successMarkCoords = selectMapModel.successMarkCoords$.get();

const yMaps = useYMaps(["borders", "ObjectManager"]);

useLayoutEffect(() => {

if (!yMaps) return;

selectMapModel.setYMaps(yMaps);

yMaps.borders

.load(selectMapModel.mapType, { lang: "ru", quality: 0 })

.then((geoObjects) => {

console.log(geoObjects);

scheduleDrawMap(() => {

selectMapModel.setGeoObjects(geoObjects);

selectMapModel.init();

});

})

.catch((error) => console.log(error));

}, [yMaps]);

return (


onLoad={() => {

scheduleDrawMap(() => selectMapModel.loadingMap$.set(false));

}}

width="100%"

height={height}

instanceRef={selectMapModel.setMap}

defaultState={{

center: [65.751574, 97.573856],

zoom: selectMapModel.mapZoom,

type: null,

}}

>

{!!successMarkCoords &&
}


);

}

export default SelectRegionsMap;

//Компонент Flag

import flags from "country-flag-icons/react/3x2";

const wikiHost = "https://upload.wikimedia.org/wikipedia/commons/thumb/";

export const ruIconsMap = {

"RU-AMU": `${wikiHost}7/7a/Flag_of_Amur_Oblast.svg/100px-Flag_of_Amur_Oblast.svg.png`,

"RU-ARK": `${wikiHost}1/16/Flag_of_Arkhangelsk_Oblast.svg/100px-Flag_of_Arkhangelsk_Oblast.svg.png`,

"RU-AST": `${wikiHost}8/87/Flag_of_Astrakhan_Oblast.svg/100px-Flag_of_Astrakhan_Oblast.svg.png`,

"RU-BEL": `${wikiHost}2/2b/Flag_of_Belgorod_Oblast.svg/100px-Flag_of_Belgorod_Oblast.svg.png`,

"RU-BRY": `${wikiHost}2/2b/Flag_of_Bryansk_Oblast.svg/100px-Flag_of_Bryansk_Oblast.svg.png`,

"RU-VLA": `${wikiHost}2/2d/Flag_of_Vladimir_Oblast.svg/100px-Flag_of_Vladimir_Oblast.svg.png`,

"RU-VGG": `${wikiHost}3/35/Flag_of_Volgograd_Oblast.svg/100px-Flag_of_Volgograd_Oblast.svg.png`,

"RU-VLG": `${wikiHost}a/af/Flag_of_Vologda_oblast.svg/100px-Flag_of_Vologda_oblast.svg.png`,

"RU-VOR": `${wikiHost}6/64/Flag_of_Voronezh_Oblast.svg/100px-Flag_of_Voronezh_Oblast.svg.png`,

"RU-IVA": `${wikiHost}5/5b/Flag_of_Ivanovo_Oblast.svg/100px-Flag_of_Ivanovo_Oblast.svg.png`,

"RU-IRK": `${wikiHost}1/14/Flag_of_Irkutsk_Oblast.svg/100px-Flag_of_Irkutsk_Oblast.svg.png`,

"RU-KGD": `${wikiHost}e/e4/Flag_of_Kaliningrad_Oblast.svg/100px-Flag_of_Kaliningrad_Oblast.svg.png`,

"RU-KLU": `${wikiHost}e/ed/Flag_of_Kaluga_Oblast.svg/100px-Flag_of_Kaluga_Oblast.svg.png`,

"RU-KEM": `${wikiHost}e/e3/Flag_of_Kemerovo_Oblast.svg/100px-Flag_of_Kemerovo_Oblast.svg.png`,

"RU-KIR": `${wikiHost}4/41/Flag_of_Kirov_Oblast.svg/100px-Flag_of_Kirov_Oblast.svg.png`,

"RU-KOS": `${wikiHost}2/2c/Flag_of_Kostroma_Oblast.svg/100px-Flag_of_Kostroma_Oblast.svg.png`,

"RU-KGN": `${wikiHost}9/92/Flag_of_Kurgan_Oblast.svg/100px-Flag_of_Kurgan_Oblast.svg.png`,

"RU-KRS": `${wikiHost}7/70/Flag_of_Kursk_Oblast.svg/100px-Flag_of_Kursk_Oblast.svg.png`,

"RU-LEN": `${wikiHost}6/66/Flag_of_Leningrad_Oblast.svg/100px-Flag_of_Leningrad_Oblast.svg.png`,

"RU-LIP": `${wikiHost}3/36/Flag_of_Lipetsk_Oblast.svg/100px-Flag_of_Lipetsk_Oblast.svg.png`,

"RU-MAG": `${wikiHost}2/29/Flag_of_Magadan_Oblast.svg/100px-Flag_of_Magadan_Oblast.svg.png`,

"RU-MOS": `${wikiHost}4/48/Flag_of_Moscow_oblast.svg/100px-Flag_of_Moscow_oblast.svg.png`,

"RU-MUR": `${wikiHost}3/3b/Flag_of_Murmansk_Oblast.svg/100px-Flag_of_Murmansk_Oblast.svg.png`,

"RU-NIZ": `${wikiHost}0/04/Flag_of_Nizhny_Novgorod_Region.svg/100px-Flag_of_Nizhny_Novgorod_Region.svg.png`,

"RU-NGR": `${wikiHost}6/68/Flag_of_Novgorod_Oblast.svg/100px-Flag_of_Novgorod_Oblast.svg.png`,

"RU-NVS": `${wikiHost}3/39/Flag_of_Novosibirsk_oblast.svg/100px-Flag_of_Novosibirsk_oblast.svg.png`,

"RU-OMS": `${wikiHost}6/60/Flag_of_Omsk_Oblast.svg/100px-Flag_of_Omsk_Oblast.svg.png`,

"RU-ORE": `${wikiHost}d/d6/Flag_of_Orenburg_Oblast.svg/100px-Flag_of_Orenburg_Oblast.svg.png`,

"RU-ORL": `${wikiHost}0/05/Flag_of_Oryol_Oblast.svg/100px-Flag_of_Oryol_Oblast.svg.png`,

"RU-PNZ": `${wikiHost}d/da/Flag_of_Penza_Oblast.svg/100px-Flag_of_Penza_Oblast.svg.png`,

"RU-PSK": `${wikiHost}e/ef/Flag_of_Pskov_Oblast.svg/100px-Flag_of_Pskov_Oblast.svg.png`,

"RU-ROS": `${wikiHost}d/d9/Flag_of_Rostov_Oblast.svg/100px-Flag_of_Rostov_Oblast.svg.png`,

"RU-RYA": `${wikiHost}8/8c/Flag_of_Ryazan_Oblast.svg/100px-Flag_of_Ryazan_Oblast.svg.png`,

"RU-SAM": `${wikiHost}1/13/Flag_of_Samara_Oblast.svg/100px-Flag_of_Samara_Oblast.svg.png`,

"RU-SAR": `${wikiHost}f/f5/Flag_of_Saratov_Oblast.svg/100px-Flag_of_Saratov_Oblast.svg.png`,

"RU-SAK": `${wikiHost}5/57/Flag_of_Sakhalin_Oblast.svg/100px-Flag_of_Sakhalin_Oblast.svg.png`,

"RU-SVE": `${wikiHost}e/ef/Flag_of_Sverdlovsk_Oblast.svg/100px-Flag_of_Sverdlovsk_Oblast.svg.png`,

"RU-SMO": `${wikiHost}f/fa/Flag_of_Smolensk_Oblast.svg/100px-Flag_of_Smolensk_Oblast.svg.png`,

"RU-TAM": `${wikiHost}3/39/Flag_of_Tambov_Oblast.svg/100px-Flag_of_Tambov_Oblast.svg.png`,

"RU-TVE": `${wikiHost}6/60/Flag_of_Tver_Oblast.svg/100px-Flag_of_Tver_Oblast.svg.png`,

"RU-TOM": `${wikiHost}5/50/Flag_of_Tomsk_Oblast.svg/100px-Flag_of_Tomsk_Oblast.svg.png`,

"RU-TUL": `${wikiHost}6/69/Flag_of_Tula_Oblast.svg/100px-Flag_of_Tula_Oblast.svg.png`,

"RU-TYU": `${wikiHost}4/4e/Flag_of_Tyumen_Oblast.svg/100px-Flag_of_Tyumen_Oblast.svg.png`,


"RU-ULY": `${wikiHost}d/d8/Flag_of_Ulyanovsk_Oblast.svg/100px-Flag_of_Ulyanovsk_Oblast.svg.png`,

"RU-CHE": `${wikiHost}c/ce/Flag_of_Chelyabinsk_Oblast.svg/100px-Flag_of_Chelyabinsk_Oblast.svg.png`,

"RU-YAR": `${wikiHost}b/ba/Flag_of_Yaroslavl_Oblast.svg/100px-Flag_of_Yaroslavl_Oblast.svg.png`,

"RU-AD": `${wikiHost}1/16/Flag_of_Adygea.svg/100px-Flag_of_Adygea.svg.png`,

"RU-BA": `${wikiHost}3/3d/Flag_of_Bashkortostan.svg/100px-Flag_of_Bashkortostan.svg.png`,

"RU-BU": `${wikiHost}6/68/Flag_of_Buryatia.svg/100px-Flag_of_Buryatia.svg.png`,

"RU-DA": `${wikiHost}c/c3/Flag_of_Dagestan.svg/100px-Flag_of_Dagestan.svg.png`,

"RU-IN": `${wikiHost}0/00/Flag_of_Ingushetia.svg/100px-Flag_of_Ingushetia.svg.png`,

"RU-KB": `${wikiHost}d/d8/Flag_of_Kabardino-Balkaria.svg/100px-Flag_of_Kabardino-Balkaria.svg.png`,

"RU-KL": `${wikiHost}9/9f/Flag_of_Kalmykia.svg/100px-Flag_of_Kalmykia.svg.png`,

"RU-KC": `${wikiHost}5/59/Flag_of_Karachay-Cherkessia.svg/100px-Flag_of_Karachay-Cherkessia.svg.png`,

"RU-KR": `${wikiHost}6/69/Flag_of_Karelia.svg/100px-Flag_of_Karelia.svg.png`,

"RU-ME": `${wikiHost}a/a7/Flag_of_Mari_El.svg/100px-Flag_of_Mari_El.svg.png`,

"RU-MO": `${wikiHost}2/2f/Flag_of_Mordovia.svg/100px-Flag_of_Mordovia.svg.png`,

"RU-AL": `${wikiHost}f/ff/Flag_of_Altai_Republic.svg/100px-Flag_of_Altai_Republic.svg.png`,

"RU-KO": `${wikiHost}5/54/Flag_of_Komi.svg/100px-Flag_of_Komi.svg.png`,

"RU-SA": `${wikiHost}e/eb/Flag_of_Sakha.svg/100px-Flag_of_Sakha.svg.png`,

"RU-SE": `${wikiHost}1/1c/Flag_of_North_Ossetia.svg/100px-Flag_of_North_Ossetia.svg.png`,

"RU-TA": `${wikiHost}2/28/Flag_of_Tatarstan.svg/100px-Flag_of_Tatarstan.svg.png`,

"RU-TY": `${wikiHost}7/77/Flag_of_Tuva.svg/100px-Flag_of_Tuva.svg.png`,

"RU-UD": `${wikiHost}c/c7/Flag_of_Udmurtia.svg/100px-Flag_of_Udmurtia.svg.png`,

"RU-KK": `${wikiHost}e/ec/Flag_of_Khakassia.svg/100px-Flag_of_Khakassia.svg.png`,

"RU-CE": `${wikiHost}1/13/Flag_of_the_Chechen_Republic.svg/100px-Flag_of_the_Chechen_Republic.svg.png`,

"RU-CU": `${wikiHost}d/d7/Flag_of_Chuvashia.svg/100px-Flag_of_Chuvashia.svg.png`,

"RU-ALT": `${wikiHost}4/4b/Flag_of_Altai_Krai.svg/100px-Flag_of_Altai_Krai.svg.png`,

"RU-ZAB": `${wikiHost}b/b8/Flag_of_Zabaykalsky_Krai.svg/100px-Flag_of_Zabaykalsky_Krai.svg.png`,

"RU-KAM": `${wikiHost}a/a7/Flag_of_Kamchatka_Krai.svg/100px-Flag_of_Kamchatka_Krai.svg.png`,

"RU-KDA": `${wikiHost}a/a7/Flag_of_Krasnodar_Krai.svg/100px-Flag_of_Krasnodar_Krai.svg.png`,

"RU-KYA": `${wikiHost}2/2d/Flag_of_Krasnoyarsk_Krai.svg/100px-Flag_of_Krasnoyarsk_Krai.svg.png`,

"RU-PER": `${wikiHost}b/b5/Flag_of_Perm_Krai.svg/100px-Flag_of_Perm_Krai.svg.png`,

"RU-PRI": `${wikiHost}3/38/Flag_of_Primorsky_Krai.svg/100px-Flag_of_Primorsky_Krai.svg.png`,

"RU-STA": `${wikiHost}b/b4/Flag_of_Stavropol_Krai.svg/100px-Flag_of_Stavropol_Krai.svg.png`,

"RU-KHA": `${wikiHost}4/4f/Flag_of_Khabarovsk_Krai.svg/100px-Flag_of_Khabarovsk_Krai.svg.png`,

"RU-NEN": `${wikiHost}1/15/Flag_of_Nenets_Autonomous_District.svg/100px-Flag_of_Nenets_Autonomous_District.svg.png`,

"RU-KHM": `${wikiHost}7/70/Flag_of_Yugra.svg/100px-Flag_of_Yugra.svg.png`,

"RU-CHU": `${wikiHost}a/a0/Flag_of_Chukotka.svg/100px-Flag_of_Chukotka.svg.png`,

"RU-YAN": `${wikiHost}c/c7/Flag_of_Yamal-Nenets_Autonomous_District.svg/100px-Flag_of_Yamal-Nenets_Autonomous_District.svg.png`,

"RU-SPE": `${wikiHost}c/c9/Flag_of_Saint_Petersburg_%28digital_version%29.svg/100px-Flag_of_Saint_Petersburg_%28digital_version%29.svg.png`,

"RU-MOW": `${wikiHost}0/03/Flag_of_Moscow%2C_Russia.svg/100px-Flag_of_Moscow%2C_Russia.svg.png`,

"RU-YEV": `${wikiHost}0/0e/Flag_of_the_Jewish_Autonomous_Oblast.svg/100px-Flag_of_the_Jewish_Autonomous_Oblast.svg.png`,

"RU-SEV": `${wikiHost}1/14/Flag_of_Sevastopol.svg/100px-Flag_of_Sevastopol.svg.png`,

"RU-KRY": `${wikiHost}a/aa/Flag_of_Crimea.svg/100px-Flag_of_Crimea.svg.png`,

};

function Flag({ iso3166, style, className }) {

const FlagIn = flags[iso3166];

const FlagRussiaIn = ruIconsMap[iso3166];

if (FlagRussiaIn)

return ;

if (FlagIn) return ;

return
;

}

export default Flag;




Смотрите также файлы