|
33, Alexander Malinov Blvd., Sofia, 1729, Bulgaria
Phone: (+359) 2 80-99-862; Fax: (+359) 2 80-99-888
|
|
Trivia Game – Kурсов проект по „ Уеб дизайн с HTML 5, CSS 3 и JavaScript – част II" – вариант # 3
Да се проектира и реализира уеб клиентско приложение за работа с въпроси. В него потребителите могат да се регистрират, започнат нова игра с въпроси, добавят въпроси и добавят категории. Всеки регистриран потребител може да започне игра и да отговори на въпросите от нея.
Описание на системата "Trivia Game"
Посредством централен сървър потребителите в системата "Trivia Game" могат да започнат игра, при което получават 10 въпроса от дадена категория. Всеки потребител може да разгледа резултатите на всеки регистриран потребител.
Работа на системата "Trivia Game"
Работата със системата "Trivia Game" най-общо обхваща следните стъпки:
-
Посетители на системата могат да разглеждат резултатите на останалите регистрирани потребители.
-
След влизане в системата потребителите могат да започнат игра и да отговорят на въпросите от нея в рамките на 5 минути.
-
Посетителите на системата могат да разглеждат всички категории
-
След влизане в системата потребителите могат да добавят нов въпрос към вече съществуваща категория.
-
След влизане в системата потребителите могат да добавят нова категория с минимум 10 въпроса към нея.
Архитектура на системата "Trivia Game"
Системата "Trivia Game" за въпроси работи в режим клиент-сървър. Клиентите (уеб браузъри) комуникират със сървъра (не директно) чрез изпращане на REST заявки с JSON-сериализирани данни.
Комуникация със сървъра
Цялата комуникация между клиента и сървъра се извършва в REST стил чрез HTTP GET и HTTP POST команди, изпратени асинхронно като AJAX заявки от клиента към сървъра, на които сървърът отговаря с JSON-сериализиран резултат. При успех сървърът връща HTTP статус код 200, а при грешка връща трицифрен HTTP статус код за грешка. Форматът на всяка REST заявка е различен и е описан по-долу, като URL адресът на REST услугата е условно означен по следния начин:
Услугите от страна на сървъра се разработват от преподавателския екип и не са задача на курсистите. Услугите се предоставят във вид на сорс код + скрипт за създаване на базата данни и могат да се ползват локално (от хост машината на разработчика) или от Интернет. Публичната Интернет инстанция на сървърната REST услуга за проекта е достъпна от следния URL в облака на AppHarbor:
http://trivia-game.apphb.com/api/trivia
|
Всеки участник сам преценява дали да ползва публичния Интернет сървър или да инсталира собствено локално копие (ако има технически познания и желание да го направи).
Имайте предвид, че тъй като заявките и резултатите от извикване на REST услугите са стандартни JSON-сериализирани обекти, няма гаранция за наредбата на ключовете в асоциативните масиви, които се връщат или изпращат (тя може да е произволна).
Регистрация
Регистрацията в системата е отворена публично за всички посетители. При регистрация потребителят въвежда потребителско име, прякор (nickname) и автентикациoнен код. Автентикациoнният код се изчислява от приложението чрез хеширане на потребителското име и паролата (долепени един до друг) по формулата SHA1(username + password) и се изпраща като шестнайсетично число. Формат на заявката към услугата:
URL
|
http://service-url/register-user
|
Method: POST
|
Body
|
{"username":"Dodo",
"nickname":"DonchoMinkov",
"authCode":" e3adcdcff8fe40290d7bbd3c19a1e414425e5aaa "}
|
При успех услугата връща HTTP статус код 200.
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{"Message":"There is already such user"}
|
Текстът в полето Message е само информативен и не е предназначен за машинна обработка. Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
There is already such user
|
404
|
Username contains invalid characters
|
404
|
Username must start with a letter
|
404
|
Username contains invalid characters
|
404
|
Username must be atleast 4 characters long
|
404
|
Username must be atmost 30 characters long
|
404
|
Nickname contains invalid characters
|
404
|
Nickname must be atleast 4 characters long
|
404
|
Nickname must be atmost 30 characters long
|
404
|
Password should be crypted
|
500
|
User registration failed (general error)
| Влизане в системата
Влизане в системата е отворено публично за всички посетители. При Влизане в системата потребителят въвежда потребителско име и автентикациoнен код. Автентикациoнният код се изчислява от приложението чрез хеширане на потребителското име и паролата (долепени един до друг) по формулата SHA1(username + password) и се изпраща като шестнайсетично число. Формат на заявката към услугата:
URL
|
http://service-url/login-user
|
Method: POST
|
Body
|
{"username":"Dodo", "authCode":" e3adcdcff8fe40290d7bbd3c19a1e414425e5aaa "}
|
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{"Message":"Invalid Request"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
Invalid Request
|
404
|
Username contains invalid characters
|
404
|
Username must start with a letter
|
404
|
Username contains invalid characters
|
404
|
Username must be atleast 4 characters long
|
404
|
Username must be atmost 30 characters long
|
404
|
Password should be crypted
|
404
|
No such user
|
404
|
Incorrect password
|
500
|
Login failed (general error)
| Извличане на резултатите на потребител
Извличането на резултатите на потребител е публично за всички посетители на системата. Услугата приема аргумент nickname, прякора на съответния потребител. Формат на заявката към услугата:
URL
|
http://service-url/user-score?nickname=DonchoMinkov
|
Method: GET
|
При успех услугата връща HTTP статус код 200 и резултат в следния формат:
Body
|
{ "nickname" : "Doncho Minkov",
"totalScore" : 6.33,
"totalGamesPlayed" : 3,
"categoryScores" : [{ "category" : "c#",
"score" : 10.0,
"gamesPlayed" : 1 },
{ "category" : "javascript",
"score" : 5.0,
"gamesPlayed" : 1 },
{ "category" : "history",
"score" : 4.0,
"gamesPlayed" : 1 }]
}
|
Резултата съдържа общия резултат на дадения потребител, както и резултат по категориите, в които е играл.
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{"Message":"Invalid Request"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
No user with such nickname
|
500
|
Request failed (general error)
|
Извличането на всички потребители е достъпно за всеки посетител на приложението. Формат на заявката към услугата:
URL
|
http://service-url/users-all
|
Method: GET
|
При успех услугата връща HTTP статус код 200 и резултат в следния формат:
Body
|
[{ "nickname" : "Doncho Minkov", "score" : 7.5, "games" : 2 },
{ "nickname" : "DonchoMinkov", "score" : 0.0, "games" : 0 },
{ "nickname" : "Doncho_Minkov", "score" : 0.0, "games" : 0 },
{ "nickname" : "Doncho.Minkov", "score" : 0.0, "games" : 0 }]
|
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{"Message":"Invalid Request"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
500
|
Request failed (general error)
| Извличане на всички категории въпроси
Извличането на всички категории въпроси е позволено за всички потребители. Формат на заявката към услугата:
URL
|
http://service-url/categories
|
Method: GET
|
При успех услугата връща HTTP статус код 200 и резултат в следния формат:
Body
|
[{ "id" : 1, "name" : "history" },
{ "id" : 2, "name" : "literature" },
{ "id" : 3, "name" : "math" },
{ "id" : 4, "name" : "c#" },
{ "id" : 5, "name" : "javascript" }]
|
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{"Message":"Invalid Request"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
500
|
Request failed (general error)
| Добавяне на нова категория
Само регистрираните потребители могат да добавят нова категория. За да добави категория потребителя трябва да въведе и поне 10 въпроса в тази категория. Въпросите могат да са и повече от 10. Всеки въпрос трябва да има поне 3 грешки и поне 1 верен отговор. Формат на заявката към услугата:
URL
|
http://service-url/add-category
|
Method: POST
|
Body
|
{ "category" : { "name" : "New Category",
"questions" : [
{ "text" : "Question #0",
"correctAnswers" : [{"text" : "Correct #0"}],
"wrongAnswers" : [
{ "text" : "Wrong #1" },
{ "text" : "Wrong #2" },
{ "text" : "Wrong #3" }]},
{ "text" : "Question #1",
"correctAnswers" : [
{"text" : "Correct #0",
"text" : "Correct #1" }],
"wrongAnswers" : [
{ "text" : "Wrong #1" },
{ "text" : "Wrong #2" },
{ "text" : "Wrong #3" }]},
...atleast 8 More Questions... ]
},
"user" : { "username" : "Dodo",
"authCode" : "6fa9133efe05348e430bd5a4585b595f0cb6cba3" }
}
|
При успех услугата връща HTTP статус код:
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{ "Меssage":"No such user"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
Invalid Request
|
404
|
Username contains invalid characters
|
404
|
Username must start with a letter
|
404
|
Username contains invalid characters
|
404
|
Username must be atleast 4 characters long
|
404
|
Username must be atmost 30 characters long
|
404
|
Password should be crypted
|
404
|
No such user
|
404
|
Incorrect password
|
404
|
A category must contain atleast 10 questions
|
404
|
There is already a category with such name
|
404
|
Atleast three wrong answers are needed
|
404
|
Atleast one correct answer is needed
|
500
|
Request failed (general error)
| Започване на нова игра
Всеки регистриран потребител може да започне нова игра. Заявката съдържа незадължителен аргумент – идентификационния номер на категорията, в която потребителят иска да играе. Ако потребителя не подаде аргумент ще получи 10 въпроса от произволни категории. Формат на заявката към услугата:
URL
|
http://service-url/start-game/5
|
Method: POST
|
Body
|
{ "username" : "Dodo",
"authCode" : "6fa9133efe05348e430bd5a4585b595f0cb6cba3" }
|
При успех услугата връща HTTP статус код 200 и следния резултат:
Body
|
{ "id" : 28,
"questions" : [
{ "id" : 67, "text" : "javascript Question #8",
"answers" : [{ "id" : 965, "text" : "Wrong answer" },
{ "id" : 962, "text" : "The correct one" },
{ "id" : 973, "text" : "Wrong answer" },
{ "id" : 966, "text" : "Wrong answer" }]},
{ "id" : 71, "text" : "javascript Question #12",
"answers" : [{ "id" : 1027, "text" : "Wrong answer" },
{ "id" : 1022, "text" : "The correct one" },
{ "id" : 1031, "text" : "Wrong answer" },
{ "id" : 1040, "text" : "Wrong answer" }]},
{ "id" : 69, "text" : "javascript Question #10",
"answers" : [{ "id" : 1007, "text" : "Wrong answer" },
{ "id" : 1000, "text" : "Wrong answer" },
{ "id" : 992, "text" : "The correct one" },
{ "id" : 999, "text" : "Wrong answer" }]},
...7 more questions...
]
}
|
Резултата съдържа списък от 10 въпроса, всеки от които с точно 3 грешни и точно 1 верен отговори. Потребителят има 5 минути да отговори на всички въпроси. Ако 5 минути след като е започната играта, системата все още не е получила отговори, играта се прекратява и тя не може да бъде доиграна. През тези 5 минути потребителят не може да започне нова игра – когато се изпълни заявката, той ще получи същите въпроси.
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
No such category
|
500
|
Request failed (general error)
|
Потребител, който е стартирал игра, може да отговори на въпросите от нея. Заявката приема в URL аргумент, който е идентификационния номер на започнатата игра. При отговор потребителят трябва да изпрати идентификационния номер на започнатата игра, както и списък с двойки - идентификационен номер на въпрос и идентификационен номер на избрания въпрос. Формат на заявката към услугата:
URL
|
http://service-url/post-answers/123
|
Method: POST
|
Body
|
{"user":{"username":"Dodo","authCode":"6fa9133efe05348e430bd5a4585b595f0cb6cba3"},
"questions" : [{ "questionId" : 4, "answerId" : "57" },
{ "questionId" : 9, "answerId" : "114" },
{ "questionId" : 12, "answerId" : "164" },
{ "questionId" : 11, "answerId" : "137" },
{ "questionId" : 3, "answerId" : "31" },
{ "questionId" : 2, "answerId" : "12" },
{ "questionId" : 1, "answerId" : "5" },
{ "questionId" : 5, "answerId" : "67" },
{ "questionId" : 8, "answerId" : "109" },
{ "questionId" : 6, "answerId" : "77" }]}
|
При успех услугата връща HTTP статус код 200:
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{ "Меssage":"Game does not exists or is already finished"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
Game does not exists or is already finished
|
404
|
This is not your game
|
404
|
Game does not exists or is already finished
|
404
|
Game does not exists or is already finished
|
500
|
Request failed(general error)
| Добавяне на нов въпрос
Всеки регистриран потребител може да добавя нов въпрос към вече съществуваща игра. Заявката приема аргумент идентификационния номер на категорията. На заявката трябва да се подаде и текст на въпроса, както и 2 списъка от отговори – единия списък съдържа верните отговори, докато другия съдържа грешните. Въпроса трябва да съдържа поне 1 верен отговор и поне 3 грешни отговора. Формат на заявката към услугата:
URL
|
http://service-url/add-question/5
|
Method: POST
|
Body
|
{"user":{"username":"Dodo","authCode":"6fa9133efe05348e430bd5a4585b595f0cb6cba3"},
"question":{"text":"Sample Question",
"correctAnswers" : [
{ "text" : "Correct Answer #0" }],
"wrongAnswers" : [
{ "text" : "Wrong Answer #0" },
{ "text" : "Wrong Answer #1" },
{ "text" : "Wrong Answer #2" }]
}
}
|
При успех услугата връща HTTP статус код 200:
При грешка услугата връща трицифрен HTTP статус код за грешка и резултат в следния формат:
Body
|
{ "Меssage":" "No such category"}
|
Кодовете на грешките в полето Message са следните:
HTTP Code
|
Description
|
404
|
No such category
|
404
|
Atleast three wrong answers are needed
|
404
|
Atleast one correct answer is needed
|
500
|
Request failed(general error)
| Обработка на грешки
Приложение трябва да обработва евентуално възникващите грешки по подходящ начин, например да има специален екран (прозорец) за тях или да ги визуализира в специално поле или по друг начин. Грешки могат да възникнат по всяко време и по най-различни причини: прекъснат достъп до Интернет, изгубена връзка със сървъра, грешка на сървъра, изпратена невалидна команда и т.н.
Допълнителни изисквания -
Потребителският интерфейс на системата може да е на български или на английски език (по ваш избор).
-
Приложението трябва да е базирано на HTML5 и JavaScript. По желание може да се използва jQuery или друг JavaScript framework.
-
Трябва да се поддържат следните уеб браузъри: Chrome 16+, Firefox 9+, IE9+, Safari 5.1+.
-
Потребителският интерфейс може да е базиран на KendoUI, jQueryUI или на друга библиотека за UI.
-
Нямате право да използвате сървърна логика, която се различава от предоставената имплементация на услугите към проекта. Нямате право да добавяте допълнителни сървърни услуги.
Бонуси
Допълнителни точки ще се дават за:
-
Реализирана добра ползваемост – удобен, лесен за употреба и интуитивен потребителски интерфейс.
-
Коректност и правилна работа при необичайни ситуации: например при въвеждане на невалидни данни (празни полета, прекалено дълги полета, невалиден формат).
-
Качествен програмен код (HTML, CSS, JavaScript), структуриране на програмната логика в класове, функции и файлове, спазвайки утвърдените в индустрията концепции за изграждане на качествен софтуер.
-
Добър и удобен външен вид (уеб дизайн) – можете да ползвате ваш собствен дизайн или да адаптирате дизайн със свободен лиценз.
-
Реализация на потребителски настройки, с които да се конфигурира приложението.
-
Реализирането на функционалност, която не се изисква в условията на проектите не носи непременно допълнителни точки. По-важно е да се реализира коректно изискваната функционалност.
Предаване на проектите
Проектите се предават като цялостно реализирано уеб клиентско приложение. Курсовият проект изисква да бъдат предадени следните активи (пакетирани в ZIP или RAR архив):
-
HTML код на приложението
-
JavaScript код на приложението (ако използвате външни JavaScript библиотеки, може да включите техния сорс код или да ги ползвате от Интернет)
-
CSS код на приложението
-
Други незадължителни активи (Photoshop файл с уеб дизайна например, инструкции за употреба, документация и т.н.)
Проектите се предават онлайн от формата за изпращане на домашни и проекти към курса: http://telerikacademy.com/Courses/Courses/Details/10.
Краен срок за предаване на проектите: 10 февруари 2013 г.
Защита на проектите
Защитата на проектите ще се извърши в края на курса. На защитата всеки студент ще трябва да представи проекта си, да покаже каква част от изискванията са реализирани и работят и да разкаже как е реализирал функционалността, след което ще му бъде дадена задача – да реализира допълнителна функция към проекта, на място в изпитната зала.
Силно препоръчително е всеки да си носи лаптоп с подготвена работна среда, на който да работи по време на защитата или да използва отдалечена сесия до своя работен настолен компютър, тъй като конфигурирането на работна среда за разработка с PhoneGap и емулатори на мобилните устройства в изпитните зали може да създаде проблеми и да ви загуби излишно време.
|
Deliver more than expected
|
Page of
|
www.telerik.com
|
Сподели с приятели: |