Js

Что это?

Это страница результата работы по курсу дополнительного образования ГБОПУ "НРТК" по разработке web-приложения в формате игры "крестики-нолики", используя современную программную платформу nodejs.

Краткая суть курса:

На курс приходят обучающиеся с нулевыми знаниями в области web-разработки.

Сначала их знакомят с основами HTML разметки, CSS стилей и встраивания в страницу сценариев на языке JavaScript.

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

Следующим шагом является связывание понятий интерфейса, оформленного посредством HTML/CSS, и событийной модели браузера. На чистом JavaScript обучающиеся учатся отлавливать события на странице и реагировать на них посредством выполнения функций обратного вызова JavaScript

По результатом совокупности полученных знаний обучающиеся под контролем преподавателя разрабатывают простую игру "крестики-нолики" (на чистом JavaScript/HTML/CSS)

Далее преподавателем даётся краткая инструкция по созданию серверной части приложения для запуска клиентского криложения на базе фреймворка express для платформы nodejs. В результате страница становится доступной в формате самостоятельного web-приложения. На этом заканчивается первый этап разработки

На втором этапе разработки преподаватель знакомит обучающихся с библиотеками jquery и bootstrap и начинается процесс рефакторинга кода игры и интерфейса с их использованием.

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

Ссылки

Проекты за все 10 занятий курса в хронологическом порядке: загрузить

Итоговый проект: Файл:Nodejs game.zip

Как запустить итоговую работу

Установка платформы nodejs и пакетного менеджера npm

В ОС Windows

Шаг 1: С сайта https://nodejs.org загрузить и установить файл инсталлятора с расширением msi
Шаг 2: В режиме администратора выполнить установку загруженного файла, следуя инструкциям мастера установки
Шаг 3: Загрузить архив с итоговой версией отсюда: Файл:Nodejs game.zip
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом app.js
Шаг 5: В каталоге с файлом app.js выполнить команду npm install (из cmd)
Шаг 6: После завершения работы команды npm install запустить приложение командой node app.js (не закрывать командную строку)
Шаг 7: Открыть в браузере адрес: http://localhost:3000

В ОС На базе GNU/Linux

Шаг 1: Установить из репозитория пакет npm
Шаг 2: В режиме суперпользователя выполнить команду npm install n -g (поставится менеджер версий nodejs по имени n)
Шаг 3: В режиме суперпользователя выполнить команду n lts (поставится актуальная версия nodejs с длительной поддержкой)
Шаг 3: Загрузить архив с итоговой версией отсюда: Файл:Nodejs game.zip
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом app.js
Шаг 5: В каталоге с файлом app.js выполнить команду npm install (из терминала)
Шаг 6: После завершения работы команды npm install запустить приложение командой node app.js (не закрывать командную строку)
Шаг 7: Открыть в браузере адрес: http://localhost:3000

Что можно улучшить в системе?

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

Второе: Переделать все alert-ы на красивые уведомления в стиле bootstrap

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

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

Пятое: Реализовать смену стилевого оформления (тёмная и светлая темы)

Шестое: Заменить сохранение истории с хранилища браузера на хранилище на стороне сервера

Пятое: придумать по вкусу