Моё первое приложение для Android.

Сегодня мы создадим своё первое приложение для мобильного устройства. Сделаем мы это при помощи MIT App Inventor.
MIT App Inventor - это облачная среда визуальной разработки приложений для платформы  Android. Создание приложений не требует знания языков программирования так всё интуитивно понятно, и построение приложений осуществляется в визуальном режиме с использованием
блоков программного кода.
Это сегодняшняя программа управления RGB светодиодом. Включение и выключение цветов кнопками.
Сначала посмотрим, как работает созданное приложение. Справа на экране показано как приложение выглядит на телефоне, так как качество съёмки с камеры получилось не очень хорошо.
При нажатии на кнопки на экране телефона загораются такой же цвет на светодиоде. Можно включить три цвета одновременно. Для выключения светодиода используется кнопка чёрного цвета. Дальше в видео я покажу что управлять можно и из браузера.

Давайте подключимся к программе для создания приложения для мобильного телефона. Эта программа называется MIT APP Inventor. Я уже зарегистрирован в программе, поэтому я сразу приступлю к созданию проекта. Вам же сначала надо будет зарегистрироваться.
При входе в проекты вы попадаете на страницу на которой показаны созданные вами проекты. По умолчанию открывается последний проект с которым вы работали. Мы же создадим новый проект и назовём его RGB.

Вас перебросит на страницу с пустым экраном телефона. Вот его то мы и будем заполнять. Это совсем не сложно, надо всего лишь перетаскивать нужные вам формы.
Для работы нам понадобятся 6 кнопок. Три на включение и три на выключение.
Так как у нас кнопки будут расположены по две штуки в ряд, нам надо сначала создать Горизонтальное расположение, это своеобразная ячейка как в таблице в которую потом можно разместить много различных форм.

Перетаскиваем на экран и ширину выставляем как родительский объект. Это значит, что ширина будет равна ширине экрана.
Цвет заливки делаем светло серым. В конечном варианте, я вообще убрал заливку, без неё смотрится намного лучше и она не будет мешать фоновому рисунку.
Теперь добавим первую кнопку перетащив её на экран телефона. Если оставить такую кнопку, то здесь можно сделать название жирным и изменить размер шрифта.
Так как мы делаем свою кнопку из графического файла, то нам нужно загрузить кнопку из архива. Там будут лежать три кнопки которые будут отвечать за включение красного, зелёного и синего цвета светодиода и чёрные, для их выключения.

Сначала загружаем красную кнопку. Удаляем надпись на кнопке. И точно так же добавляем чёрную кнопку для выключения. И тоже удаляем надпись на кнопке. У нас теперь загружено 2 кнопки, но они прижаты друг к другу, это не совсем то что хотелось бы получить. Поэтому между ними я вставил прозрачное изображение, которое отделит кнопки на нужное мне расстояние. Вот так мы добавили кнопки включения и выключения красного цвета. Точно так же добавим оставшиеся кнопки.
Теперь нам надо установить Канал.

Каналы – это компоненты, позволяющие запустить внешнее действие из созданного приложения: другое приложения на мобильном устройстве, камеру, поиск в сети интернет или открыть веб-страницу. Выбираем Интернет и переносим на экран.
Переходим во вкладку Блоки, где мы и будем собирать свою программу. Именно собирать, а не писать код вручную.
У нас программа состоит из шести кнопок. Поэтому нам надо вывести их на рабочий стол для этого выбираем по очереди все кнопки с действием щелчок.
Теперь переходим во вкладку Интернет и выбираем блок куда можно вставить адрес URL куда мы потом вставим наш IP адрес с GET запросом. Если проще, то команду на включение и выключение цветов светодиода. Проделываем всё для каждой кнопки. У нас сегодня программа с однотипными действиями, поэтому выполнив всё для одной кнопки мы будем просто копировать это действие для оставшихся пяти кнопок.

Теперь нам надо выбрать блок для получения GET запроса. И проделать так для каждой кнопки. Понимаю, что пока не очень понятно, что мы делаем, но для тех кто захочет продолжения, с каждым новым видео, всё станет более понятно, и вы сможете сами создавать приложения для мобильных устройств. Это очень просто, а сами приложения могут быть абсолютно любыми, от простых, типа этой, до сложных, например графиков или игр на телефоне.

Теперь выбираем пустой текстовой блок, куда мы потом вставим нашу команду для включения или выключения светодиода.
Вы всегда можете переносить блоки по рабочему экрану, это никак не влияет на их работу.

Заполняем пустой блок командами для светодиода. Ip адрес вам надо установить свой, или прошить плату с фиксированным IP адресом как у меня. Тогда вам ничего не придётся менять, и вы сможете сразу загрузить приложение, которое будет в архиве. В архиве кроме скетча, будут картинки, и два типа файлов. Один с исходником программы, а второй с уже готовой программой, которую вы сможете сразу установить.

Ну вот и всё. Мы написали приложение которое будет выглядеть вот так, ну или почти вот так, так как я уже после записи видео сделал несколько изменений. Добавил фон, иконку для приложения и текст на главной странице. Эти все изменения будут в приложении которое вы скачаете, так что не переживайте.
Теперь осталось скомпилировать приложение и загрузить на свой телефон. Существует два способа это сделать. Первый просто скачать приложение на свой компьютер и установка его на телефон, и второй скачать сразу на телефон с помощью qr-кода.

Сначала попробуем первый способ, скачаем на телефон. Этот процесс занимает некоторое время, которое зависит от загруженности платформы MIT APP Inventor, и чем загруженнее он будет, тем дольше будет время компиляции.

После компиляции файл будет сохранён с файл с расширением apk. Это стандартное расширение для файлов на платформе android. Теперь вы можете установить его на телефон подключив его к компьютеру и перенеся в папку с приложениями.

А сейчас я покажу как установить приложение с помощью qr-кода. Для этого нажимаем на нужный пункт меню и ждём когда программа скомпилируется и создаст qr-код. Действие кода ограничено по времени и он будет работать в течении двух часов. Так что особо не задерживайтесь.
Посмотрите процесс установки приложения с помощью qr-кода. Запускаем программу для сканирования кода и она сама определит, подходит ли этот код для установки приложения.
Нажимаем загрузить, затем так же нажимаем установить и ждём когда приложение установится.

Конечно вы получите предупреждение, что разработчик неизвестен и оно не безопасно, но так как вы сами сделали его, то вам и бояться нечего, тем более это приложение не делает ничего с вашими данными, оно только запускает ваше web приложение и управляет светодиодом.

По этому смело жмём Всё равно установить и ждём когда приложение установится. Нажимаем открыть и приложение готово к работе.
Возможно вам выскочит вот такое сообщение, можно смело нажимать, не отправлять, а если хотите можете и отправить. Если честно, я никогда не отправлял, и придёт ответ или нет, я не знаю.
Теперь давайте выведем иконку нашего приложения на экран, чтобы было проще им пользоваться. Здесь всё как обычно, находим приложение и вытягиваем его на нужный экран. У меня здесь уже есть одно приложение, теперь будет два. И я надеюсь, что если вам понравится эта тема, скоро здесь будет много разных иконок.
А теперь мы снова вернёмся в приложение MIT APP Inventor и я покажу какие изменения не вошли в видео и какие изменения я внёс уже потом.
Если вы хотите загрузить свою иконку, то можете это сделать вот здесь. А здесь можно загрузить фон приложения.
Теперь давайте немного познакомимся со вкладкой Проекты. Нам сегодня понадобятся Импорт и экспорт проекта.
Экспорт это мне, так как я экспортирую этот проект, чтобы вы могли повторить его не набирая всё сначала, а только изменили IP адрес на свой.

Для вас же я покажу как вам импортировать проект для дальнейших изменений и усовершенствований.
Я сначала удалю свой проект, а потом импортирую его с компьютера.
Теперь нажимаем импортировать проект и переходим в то место куда вы сохранили скаченный файл. Файл с исходным кодом имеет расширение а и а. Выбираем его и устанавливаем.
Заходим в проект и видим, что нам доступны любые изменения и редактирования. Теперь вы можете изменить картинки кнопок , тексты и фон на свои.
И не забудьте в блока изменить IP адрес на свой, а то у вас не будет работать этот пример.

Как я уже говорил, для работы с этим примером надо создать точку доступа в вышей WIFI сети. Я создал точку с именем RGB и паролем от 1 до 8. 8 – это минимальное количество символов для пароля.
Заходим в созданную сеть и загружаем наше приложение. В начале видео я показывал как оно работает, поэтому этот момент мы пропустим, а посмотрим как код из скетча выглядит в браузере.
Включать цвета можно как в приложении на телефоне, так и в браузере. Можно включать в браузере, а выключать в приложении. Они полностью совместимы.
Ну вот закончилось ещё одно видео. Если вам интересна эта тема, то я могу создать серию уроков про создание приложений для мобильных телефонов. Это очень интересная тема. Я делал приложения для работы с блютуз и подходя к машине, я получал всю интересующую меня информацию, но есть ещё много способов применять такие приложения.
Спасибо, что смотрите мои видео и остаётесь на канале. До встречи в новых видео.