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

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

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

Рис. 3.10. Главная страница сайта Bootstrap

Для правильной работы фраемворка необходимо подключить таблицу стилей (Листинг 1):

Листинг 1

<link href="css/bootstrap.min.css" rel="stylesheet">

JavaScript и JQuery, для правильной работы стандартных функций (Листинг 2):

Листинг 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min. js"></script>

<script src="js/bootstrap.min.js"></script>

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

Для хранения данных используется база данных MySQL 5.2. На рисунке 3.11 показана главная страница СУБД phpMyAdmin.

Рис. 3.11. Главная страница СУБД phpMyAdmin

Для хранения данных была создана база данных ukr_db. Структура базы данных ukr_db показана на рисунке 3.12.

Рис 3.12. Структура БД ukr_db

Как видно из структуры в БД создано 10 таблиц. Каждая таблица содержит данные, которые используются в мобильном веб-приложение.

Таблица author содержит такие поля, как:

1) id [int] – уникальный идентификатор автора;

2) name [text] – имя автора;

3) lastname [text] – фамилия автора;

4) cat [text] – категория, к которой относится автор.

Данная таблица предназначена для хранения сведений об авторе.

Таблица composition содержит:

1) id [int] – уникальный идентификатор книги;

2) name_comp [text] – название книги;

3) text_comp [text] – текст книги, который хранится в виде ссылки на pdf-документ;

4) id_author [text] – уникальный идентификатор автора, для того, чтобы связать таблицу author и composition.

Данная таблица предназначена для хранения сведений о книге.

Таблица facts:

1) id [int] – уникальный идентификатор факта;

2) name [text] – заголовок факта;

3) fact [text] – текст факта.

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

Таблица message:

1) id [int] – уникальный идентификатор сообщений;

2) author [varchar] – имя пользователя, отправившего сообщение;

3) polucahtel [varchar] – имя пользователя, которому адресовано сообщение;

4) date [date] – дата отправки сообщения;

5) text [text] – текст сообщения.

Таблица message предназначена для хранения сообщений пользователей, а так же вывода этих сообщений на странице профиля пользователя.

Таблица reg:

1) id [int] – уникальный идентификатор автора;

2) login [varchar] – логин пользователя;

3) password [varchar] – пароль пользователя, зашифрованный с помощью функции md5;

4) name [varchar] – имя пользователя;

5) lastname [varchar] – фамилия пользователя;

6) point [int] – очки, которые набирает пользователь, проходящий задания в приложении;

7) status [text] – статус пользователя (administrator или user).

Таблица reg предназначена для хранения сведений о пользователях, которые зарегистрированы на сайте.

Таблица test:

1) id [int] – уникальный идентификатор вопроса для теста;

2) ques [text] – вопрос, который задается в тесте;

3) ans1 [text] – первый вариант ответа;

4) ans2 [text] – второй вариант ответа;

5) ans3 [text] – третий вариант ответа;

6) otvet [text] – правильный вариант ответа;

7) cat [text] – категория, к которой относится данный вопрос;

8) podskazka [text] – подсказка, для тех, кто не правильно ответил на впорос.

Таблица test предназначена для хранения вопросов с вариантами ответов, которые используются на странице «Упражнения».

Таблица test-test:

1) id [int] – уникальный идентификатор пользователя, который прошел тест;

2) cat [text] – категория, которую прошел пользователь;

3) author [text] ­– имя автора, который прошел тест.

Таблица test-test предназначена для хранения пользователей, которые прошли тест определенной категории, во избежание прохождения теста повторно.

Таблица text:

1) id [int] – уникальный идентификатор правила;

2) zagolovok [text] – заголовок правила;

3) text [text] – текст правила;

4) cat [text] – категория, к которому относится правило.

Таблица text предназначена для хранения правил украинского языка, и вывода их на страницу «Для учеников».

Таблица voc:

1) id [int] – уникальный идентификатор слова в словаре;

2) ukr_word [text] – украинское слово;

3) rus_word [text] – российской слово;

4) cat [text] – категория, к которой относится слово.

Таблица voc предназначена для хранения украинских слов и российского перевода. Данные с таблицы voc выводятся на страницу «Словарь».

Таблица vocabulary:

1) id [int] – уникальный идентификатор слова, которое выставляется на голосование;

2) ukr_word [text] – украинский вариант слова;

3) trans [text] – перевод украинского слова на русский язык;

4) mark [int] – оценка, которую поставили пользователи для данного перевода;

5) sender [text] – имя пользователя, который предложил перевод;

6) id_sender [int] – уникальный идентификатор пользователя, который отправил слово;

7) cat [text] – категория, к которой относится слово.

Таблица vocabulary предназначена, для хранения слов, которые были вынесены на голосование. Данные слова выводятся на страницу «Словарь».

Для подключения БД к веб-приложению был создан файл, который называется db.php. Код данного файла представлен в листинге 3.

Листинг 3

<?php // открытия php-кода

header("Content-Type: text/html; charset=UTF-8"); // определение кодировки данных, которые будут передаваться из БД. Важно, чтобы в БД кодировка была такая же, как и в этом файле.

$connect = mysql_connect(localhost,'root','') or die(mysql_error()); // подключение к phpMyAdmin. Если подключение не удалось, то выводим ошибку

mysql_select_db('ukr_db'); // подключение к БД ukr_db

?> // закрытие php-кода

Для работы PHP кода с данными которые хранятся в БД используются SQL-запросы. Например, при регистрации на странице reg.php данные, методом POST, отправляются в файл save_user.php, где и происходит процесс записывания данных в БД (листинг 4).

Листинг 4

if (isset($_POST['login'])) { $login = $_POST['login']; if ($login == '') { unset($login);} } // проверяем, получили ли мы логин с формы

if (isset($_POST['password'])) { $password=$_POST['password']; if ($password =='') { unset($password);} } // проверяем, получили ли мы пароль с формы

$password=md5($password); шифруем наш пароль функцией md5

$result = mysql_query ("INSERT INTO reg (login, password) VALUES ('$login', '$password')"); // с помощью mysql_query и с помощью функции INSERT вставляем наши данный в таблицу БД

$result1 = mysql_query ("SELECT * FROM reg"); // с помощью функции SELECT можно выбрать все данные с таблицы reg

$myrow1 = mysql_fetch_array($result1); // с помощью функции mysql_fetch_array мы превращаем наши запрашиваемые данные с таблицы в массив с которыми в дальнейшем можем производить действия

Пример использования языка программирования JavaScript представлен в листинге 5.

Листинг 5

<script type="text/javascript"> // объявление скрипта

$(document).ready(function(){ // проверка на готовность документа

$('.open-close').click(function(){ // функция нажатия на тег с идентификатором open-close

$(this).parent().children('div.block-links').toggle('normal'); // если функция сработала, то методом toggle выводится блок с текстом, который имеет идентификатор block-links

return false; // возвращение значения ложно

});

});

</script> // закрытие скрипта

Пример выполнения данного скрипта показан на рисунке 3.13 и 3.14.

Рис. 3.13. Страница, на которой находится скрипт

При нажатии на ссылку «Розрізнення фонем О та У», срабатывает скрипт, который выводит правило, под заголовком (рисунок 3.14).

Рис. 3.14. Работа скрипта написанного на JavaScript

Так же, при разработке веб-приложения использовалась таблица стилей CSS. На рисунке 3.15 представлена кнопка, которая используется в краудсорсинговом мобильном веб-приложении для изучения украинского языка.

Рис 3.15. Кнопки «Українська мова» и «Українська література»

Данные кнопки были сделаны с помощью каскадной таблицей стилей, а код данных кнопок приведен листинге 6.

Листинг 6

a.button8 { // объявления класса в CSS

display: inline-block; // свойство, которое позволяет определить, как будет отображаться элемент на странице

color: #868585; // цвет кнопки

font-weight: 700; // размер шрифта для текста, который использется в кнопке

text-decoration: none; // оформления текста для кнопки

padding:.5em; // отступы кнопки

outline: none; // отображение внешней границы

border: 0; // толщина границы элемента

box-shadow: 0 0 5px rgba(0, 0, 0,.19); // тень вокруг элемента

border-radius: 1px; // радиус границы элемента

transition: 0.2s; // задержка при анимации

width: 100%; // размер элемента по горизонтали

text-align: center; // расположения элемента на странице

}

a.button8:hover { background: rgba(0,0,0,.2); } // класс, отвечающий за наведения на кнопку. При наведение на кнопку, кнопка увеличивает тень вокруг кнопки, на то значение которое указано в этом классе

a.button8:active { background: #868585; } // класс, отвечающий за оформление активной ссылки. Когда кнопка становится активной, то она меняет свой цвет.

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