Господин Идѕко
Кордова, JavaScript, npm
О программе
Цели
- изучите основы работы с фреймворком Cordova
Контент
Окружающая среда
На первом этапе давайте подготовим инструменты и среду, в которой мы будем создавать проект.
Хашлоха
Установите инструмент npm в своей среде.
npm — это менеджер пакетов для JavaScript . Пришло время установить инструмент Node.js . Поэтому, если мы хотим установить npm в систему, мы должны установить в систему Node.js .
Если вы используете ОС Windows и у вас установлен менеджер пакетов chocolatey , установите его из командной строки следующим образом:
Если вы используете один из дистрибутивов linux , вы устанавливаете Node.js непосредственно из пакетов распространения. Если вы являетесь пользователем, например, дистрибутива Fedora , введите в командной строке:
В случае установки из дистрибутивов проверьте, соответствует ли устанавливаемая версия вашим требованиям. Он может быть таким же старым, как тот, который доступен непосредственно на домашней странице проекта. Таким образом, вы всегда можете установить последнюю версию Node.js прямо с веб-сайта проекта www.nodejs.org.
Хашлоха
С помощью инструмента npm установите Cordova и проверьте успешность установки.
После успешной установки инструмент Cordova будет доступен из командной строки. Проверьте успешность установки, запустив ее с ключом -v, который отобразит версию инструмента:
Хашлоха
С помощью инструмента Cordova создайте новый проект с именем MrIlko , который будет находиться в пакете sk.tuke.smart.mrilko и поместите его в папку mrilko_project/..
Чтобы создать проект, используйте глобальную команду инструмента Cordova с именем create . У него есть несколько параметров (по порядку):
- причины проекта
- пакет проекта
- название проекта
Чтобы получить дополнительную информацию об использовании команды создания, вы можете использовать команду справки в форме:
Хашлоха
В файл confix.xml добавьте описание приложения вместе с информацией о вас как об авторе приложения.
Хашлоха
Добавьте в проект платформы Android и браузеры.
Просмотреть платформы, включенные в проект, можно с помощью команды:
Хашлоха
Запустите приложение Mr IĐčko на обеих платформах.
Запустите приложение командой:
где платформа — это название платформы, на которой вы хотите запустить приложение. Таким образом, запуск приложения на платформе Android будет выглядеть следующим образом:
После запуска вместе с запуском эмулятора создается пакет приложения для ОС Android , на котором впоследствии будет запущено это приложение. Если этого не произошло, проверьте системные настройки.
Запущено новое приложение в эмуляторе Android
После запуска приложения на платформе браузера создается веб-сервер и запускается браузер по адресу http://localhost:8000/index.html.
Новое приложение запущено в браузере
Хашлоха
Удалите файлы css/index.css и js/index.js из папки www/.
Хашлоха
Замените файл index.html в папке www/ этим файлом.
Хашлоха
Загрузите файл app.css в папку css/.
Хашлоха
В папке js/ создайте пустой файл с именем app.js .
Поисковая активность
На этом этапе мы подготовим задание, котороеотвечает за получение информации с openweathermap.org.
Хашлоха
После загрузки страницы (загрузка или статус документ готов ) скрыть элемент
В настоящее время на странице отображаются оба действия (элементы
Хашлоха
Убедитесь, что после нажатия кнопки поиска прогноз погоды для указанного города получен из сервиса openweathermap.org.
Запрос можно получить по адресу http://api.openweathermap.org/data/2.5/weather?units=metric&q=QUERY&appid=APPID, где: * QUERY — содержит название города для которого пытаемся получить прогноз погоды, а *APID — это ссылка на openweathermap.org для получения данных о погоде
Если у вас нет собственного ключа, вы можете использовать ключ 08f5d8fd385c443eeff6608c643e0bc5 .
После получения данных от службы выведите их на консоль.
Не забудьте отключить поведение по умолчанию, при котором страница перезагружается после нажатия кнопки формы.
Хашлоха
Убедитесь, что элемент
отображается после успешного получения данных
Хашлоха
Визуализация данных, полученных с сайта openweathermap.org.
Хашлоха
Проверьте правильность реализации.
Дополнительные задачи
- Если во время поиска возникает ошибка, отобразить диалоговое окно с предупреждением, не отображая окно сведений.
Дополнительные ссылки
Temps — Temps — это современное приложение с минимальной строкой меню, основанное на Electron, с актуальной информацией о погоде и прогнозом для Windows, Mac и Linux.
Курс, посвященный разработке приложений для интеллектуальных устройств с использованием программной среды React Native, в первую очередь для платформы Android.
