Кроссплатформенная разработка ПО
Лекции
- Лекция 1. Введение: организация курса, JavaScript.
- Лекция 2. Платформа NodeJS: пакетный менеджер NPM, особенности платформы NodeJS.
- Лекция 3. Введение в Electron JS. Первое приложение на Electron JS. HTML и CSS: основные понятия и принципы использования.
Лабораторные задания
-
Лабораторная работа 0. Установка платформы, настройка окружения, запуск первой программы.
- При использовании в разработке студенческого сервера кафедры ИМО kappa или ОС Linux в компьютерных классах (241, 237, 341, 337, 435) университета необходимо установить nodejs с помощью команды:
:> guix install node
- Обратите внимание, что guix устанавливает пакеты локально, что означает, что при входе с другого компьютера в систему, необходимо установить пакет заново.
- При использовании личных компьютеров или ноутбуков воспользуйтесь инструкцией для установки по ссылке.
-
Создайте директорию для проекта, перейдите в нее и инициализируйте проект:
:> mkdir lab0
:> cd lab0
:> npm init
-
Инициализация проходит в форме вопросов, на большинство из которых можно ответить по умолчанию:
package name: (lab0)
version: (1.0.0)
description: My First NodeJS Lab
entry point: (index.js)
test command:
git repository:
keywords:
author: Vyacheslav Dimitrov
license: (ISC) MIT - Если инициализация успешно завершилась, то в директории появится файл package.json.
- Все программы, написанные в рамках данного курса должны придерживаться JavaScript Standard Style (правила стиля кодирования).
-
Установите пакет для проверки кода на соответствие стандарту:
:> npm install standard --save-dev
После установки появится директория node_modules, которая содержит и будет содержать все устанавливаемые пакеты -
Запустите проверку кода:
:> npx standard
Так как на данном этапе у нас нет кода, то команда не должна выдать никаких сообщений. -
Откройте файл index.js и добавьте простейший код:
let i = 0;
if (i == 0) {
console.log("i is zero");
} - Запустите проверку кода, посмотрите вывод команды, исправьте все найденные ошибки.
- Если вы все же хотите использовать точку с запятой в качестве разделителя конструкций, то вместо пакета standard установите и используйте пакет semistandard.
-
В package.json файл найдите (или добавьте) секцию scripts и ключ test
и добавьте туда команду проверки стандарта:
"scripts": {
"test": "npx standard"
}, -
Теперь проверка кода будет выглядеть следующим образом:
:> npm test
-
Запустите вашу программу на выполнение:
:> node index.js
-
В отдельном файле реализуйте функцию разбора файла package.json и возвращение значения по ключам scripts->test.
Для реализации используйте понятие модуля.
- Выберите один из фрейморков (MochaJS, Jasmine, AVA, JEST, Karma или подберите самостоятельно) для тестирования и протестируйте ваш код.
-
Тесты должны выполняться по команде
:> npm test
- При использовании в разработке студенческого сервера кафедры ИМО kappa или ОС Linux в компьютерных классах (241, 237, 341, 337, 435) университета необходимо установить nodejs с помощью команды:
-
Лабораторная работа 1. Используя платформу Node.js, разработать web-сервер, который по запросу пользователя возвращает заданный курс валют из документа, размещенного по ссылке: http://www.cbr.ru/scripts/XML_daily.asp
- Для создания сервера используйте пакет express, пример.
- Пользователь совершает запросы при помощи HTTP протокола. Пример запроса с помощью команды curl:
curl http://<host>:<port>/get_exchange_rate?char_code=BYN - Необходимо корректно обрабатывать переданные пользователем параметры и возвращать соответствующий ответ.
- Приложение должно быть протестировано.
- (*) Добавьте на сервере кэширование: результат запроса к сайту cbr.ru хранить локально на сервере, считать, что данные в течение суток не изменяются и если запрос выполняется в рамках одной и той же даты, то возвращать результат из кэша.
- (*) Добавьте ведение статистики по запросам от пользователей по коду валюты (в рамках работы сессии сервера, без использования баз данных). Статистику также возвращать на GET HTTP запрос от пользователя.
- (*) Добавьте возможность определения пользователем формата возвращаемого ответа от сервера (JSON, XML, TEXT).
-
Лабораторная работа 2. Используя систему Electron, разработать графическое приложение конвектора валют. В качестве сервера использовать web-сервер из лабораторной работы №1, модифицируя его при необходимости.
-
Установить electron пакетом из NPM:
:> npm install electron
- В package.json в секцию "scripts" прописать ключ start со значением "electron .".
- Следуя инструкции по ссылке запустить первое приложение-пример.
- Приложение должно содержать два текстовых поля ввода для ввода пользователем валюты из которой и в которую переводить.
- Пользователь может вводить как код валюты, так и имя.
- На поле должно работать автодополнение.
- Приложение должно поддерживать хранение истории запросов пользователя.
-
Установить electron пакетом из NPM:
-
Лабораторная работа 3. Используя систему Electron, разработать графическое приложение, позволяющее построить график изменения курса заданной пользователем валюты за заданный период (текущий месяц, предыдущий месяц, текущая неделя, произвольный период).
- Получение данных за заданную дату осуществляется при помощи добавления параметра date_req. Пример получения данных за 22 января 2007 года: http://www.cbr.ru/scripts/XML_daily.asp?date_req=22/01/2007
-
Лабораторная работа 4 (*). Используя платформу ReactNative, портировать приложение из лабораторный 3 под платформу Android.
Литература и ссылки
- JavaScript Standard Style
- Стиль кодирования
- Node.js: https://nodejs.org/
- Build cross platform desktop apps with JavaScript, HTML, and CSS URL: https://electronjs.org/
- Enyo JavaScript Application Framework URL: https://enyojs.com/
- React Native Build native mobile apps using JavaScript and React URL: https://facebook.github.io/react-native/