Программирование Android Настройка App Inventor Sat, May 25 2019  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Настройка App Inventor Печать
Добавил(а) microsin   

Вы можете настроить среду разработки Android-приложений App Inventor и начать создавать программы из блоков за несколько минут. Дизайнер (Designer) и редактор блоков (Blocks Editor) работают полностью в браузере (как облачное приложение). Чтобы увидеть после сборки приложения, как оно работает на Вашем устройстве (что называется "Live Testing"), нужно выполнить описанные в этой статье шаги (перевод руководства [1]).

Есть 3 варианта настройки:

1. Если Вы используете устройство Android, и имеете на нем беспроводное подключение к Интернет, то можете начать собирать приложения без загрузки какого-либо ПО на свой компьютер. Для этого Вам нужно установить на своем Android-устройстве App Inventor Companion App. Выберите Вариант 1, описанный ниже, это настоятельно рекомендуемый вариант.

2. Если нет устройства Android, то нужно установить программное обеспечение на свой компьютер, чтобы Вы смогли использовать эмулятор Android. Выберите Вариант 2, описанный ниже.

3. Если у Вас нет беспроводного подключения к Интернет, то необходимо установить программное обеспечение на компьютер, чтобы можно было подключиться к Android-устройству через USB. Для этого выберите Вариант 3, описанный ниже. Работа через USB довольно хитрая, особенно на Windows. Используйте этот вариант как последний шанс, если ничего другого уже не остается.

[Вариант 1, рекомендуемый]

Этот вариант подразумевает сборку приложений с устройством Android, подключенным к Интернет через WiFi. Если у Вас есть компьютер, устройство Android, и Интернет WiFi, то это самый простой и удобный способ тестировать Android-приложения. Приложения разрабатываются прямо в браузере на сайте ai2.appinventor.mit.edu (необходима регистрация, но достаточно учетной записи Google, что обычно есть у каждого пользователя Android-устройств). При этом не нужно ничего устанавливать на компьютер, следует только установить специальное приложение на устройство Android - MIT App Inventor Companion app. После того, как это приложение установлено, Вы можете открывать свои проекты в App Inventor on the web, и тестировать приложения на Android-устройстве после их сборки.

AI2 connection WiFi

Далее описан процесс по шагам.

Шаг 1, загрузите и установите MIT AI2 Companion App.

Запустите на своем Android-устройстве сканер QR-кода, и откройте в нем QR-код на первой картинке ниже (если у Вас нет сканера QR-кода, то установите его из Play Store, например сканер ZXing). Это приведет к переходу на Google Play Store, откуда Вы можете загрузить и установить приложение MIT AI2 Companion App. Если Вы не можете использовать Play Store, используйте второй QR-код, который содержит ссылку на загрузку установочного пакета APK, загрузите этот пакет и установите его.

Google Play Store
(рекомендуемый вариант, поддерживается автоматическое обновление)
Файл APK
(требуется обновление вручную)
ai2 companion QR store ai2 companion QR APK
Отсканируйте этот QR-код, чтобы перейти в магазин Google Play Store, и установить приложение MIT AI2 Companion App Отсканируйте этот QR-код, чтобы напрямую скачать установочный пакет APK для приложения MIT AI2 Companion App

После загрузки следуйте инструкциям по установке Companion app на своем устройстве. Вам нужно установить MIT AI2 Companion app только один раз, после чего оставьте его на своем телефоне или планшете Android всякий раз, когда используете App Inventor.

Примечание 1: если Вы не можете использовать QR-код, то все еще можно установить MIT AI2 Companion на телефон или планшет. Используйте WEB-браузер на своем устройстве для перехода на Google Play Store, и найдите там приложение MIT AI2 Companion. После этого кликните на кнопку INSTALL (Установить), и установите Companion app.

Примечание 2: если Вы не используете Google Play Store, и хотите установить Companion app напрямую из установочного пакета APK, то нужно разрешить на своем Android-устройстве вариант установки приложений из "неизвестных источников". Чтобы найти эту настройку на Android версий до 4.0, перейдите в Settings -> Applications, после чего поставьте галочку на "Unknown Sources". Для устройств, работающих на Android 4.0 или более свежей версии, перейдите в Settings -> Security" или Settings -> Security & Screen Lock, и поставьте галочку "Unknown Sources", и подтвердите свой выбор.

Шаг 2, подключите компьютер и Android-устройство к сети WiFi.

App Inventor автоматически покажет собираемое приложение, но только если и компьютер (на котором запущен App Inventor) и устройство Android (на котором запущено приложение Companion app) подключены к одной и той же сети WiFi. Подробнее см. врезку ниже.

[Что делает мое устройство Android при подключении через WiFi?]

В среду разработки AppInventor включена функция, дающая пользователям возможность подключится к устройству Android через WiFi, когда разработка приложения Android ведется на компьютере PC в окне браузера. Ниже более подробно описан этот процесс.

Чтобы использовать подключение AppInventor через WiFi, пользователь должен загрузить приложение MIT AI2 Companion App из Google Play Store (замечание: AI1 должен загрузить приложение Companion App v1, не Companion App v2), и установить его на своем телефоне или планшете Android. Есть также возможность установить Companion App из APK-пакета, но в этом случае теряется возможность автоматического обновления приложения (при необходимости обновление придется производить вручную).

Приложение MIT AICompanion служит мостом для соединения между устройством Androd и компьютером PC через MIT RendezVous Server.

Устройство Android должно использовать Wifi, чтобы компьютер PC и устройство Android получили IP-адреса в одной и той же локальной подсети (подключение к Internet через сотового оператора для AI2 работать не будет).

Как работает MIT RendezVous Server:

1. Ваш компьютер PC проверяет 6-символьный код, сгенерированный приложением MIT AICompanion.

2. MIT RendezVous Server записывает IP-адрес Вашего PC.

3. Ваше устройство Android регистрируется с 6-символьным кодом.

4. MIT RendezVous Server records the IP записывает IP-адрес Вашего телефона Android.

5. MIT RendezVous Server сообщает устройству и компьютеру IP-адреса противоположной стороны общения.

6. Устройство и компьютер обмениваются друг с другом данными через полученные значения IP.

В идеале соединения по сети выглядят примерно так:

AI2 NetworkDiagram1

 

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

[Устранение проблем с подключением]

Попробуйте выполнить следующее, когда не получается реализовать беспроводное соединение:

1. Попробуйте открыть ссылку http://rendezvous.appinventor.mit.edu на компьютере PC.

2. Попробуйте открыть ссылку http://rendezvous.appinventor.mit.edu на устройстве Android.

3. Если оба этих шага работают, попробуйте на компьютере выполнить команду "ping", чтобы определить доступность IP-адреса устройства Android (IP-адрес отображается в приложении MIT AI Companion на его стартовом окне). На операционной системе Windows команда ping + *IP address of the phone* запускается в окне интерпретатора команд cmd.exe. На операционных системах Mac или Linux та же самая команда выполняется в окне терминала.

4. Если все эти 3 шага завершаются успешно, но беспроводное подключение App Inventor все еще не работает, то возможна ситуация, когда файервол (это может быть файервол компьютера, или роутера, который раздает Интернет) блокирует порты 8001 и 9987. Если у Вас есть программа telnet, то попробуйте выполнить подключение telnet с компьютера на эти порты. Если соединение не произошло, то скорее всего в цепочке соединений находится файервол, блокирующий нужный трафик.

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

AI2 NetworkDiagram2

В такой сети обмен между устройствами может быть запрещен на маршрутизаторе, не пропускающем прямые соединения между отдельными устройствами сети. Устройства могут передавать и принимать пакеты только при общении с внешними устройствами и серверами, но пакеты между устройствами в сети блокируются.

Множество сетей имеют файерволы, защищающие локальные сети от нежелательного трафика, и такой файервол может блокировать соединения до телефона Android. Вы можете обойти эту проблему, используя свой собственный компьютер в качестве роутера WiFi, или купив для организации своей локальной сети отдельный WiFi роутер. После этого компьютеры с AppInventor и устройства Android, на которых ведется разработка, подключите к этому новому роутеру, чтобы они находились в одной локальной подсети. Подробные инструкции по настройке компьютера в качестве роутера можно получить на страничке [6].

AI2 NetworkDiagram3

В этой сети один компьютер, работающий как роутер (или выделенный роутер) имеет подключение к Интернет, и создает внутреннюю локальную сеть, раздавая абонентам этой сети Интернет и разрешая прямые соединения между устройствами.

Что может быть, если с моим телефоном Android все еще нет связи? Проверьте, что устройство подключается к Интернет именно через Wifi, а не через сеть сотового оператора. На некоторых устройствах и в некоторых случаях может быть даже при разрешенном WiFi телефон продолжает подключаться к Интернет через сотового оператора. Если это произошло с Вами, то попробуйте запретить сетевые мобильные подключения (disable mobile networking, т. е. активизировать запрет получение сетевого Интернет-трафика от сотового оператора), что делается в настройках устройства Android.

Шаг 3, откройте проект App Inventor и подключите его к Android-устройству.

Перейдите в App Inventor и откройте проект, или создайте новый, используя ссылки Project -> Start New Project, после чего дайте новому проекту имя. После этого выберите в меню Connect -> AI Companion. Все эти действия доступны в браузере на сайте AI2.

AI2 connectSnapshot2

На экране компьютера появится QR-код. На устройстве Android запустите приложение MIT App Companion app, как это делаете с любым другим приложением. Затем кликните кнопку "Scan QR code" в приложении Companion, и отсканируйте код в окне App Inventor:

AI2 Six Character Code

Через несколько секунд Вы увидите на устройстве собранное приложение. Оно будет обновляться при изменениях в дизайне и блоках приложения, и эта функция называется "live testing" (живое тестирование).

Если Вы не можете отсканировать QR-код на своем устройстве, то на Android-устройстве введите код, показанный на компьютере в области текста Companion. Этот код состоит из 6 символов, и он показан на компьютере под надписью "Your code is:". После ввода шести символов кликните на оранжевую кнопку "Connect with code". Не вводите Enter или carriage return (возврат каретки): нужно ввести только 6 символов, после чего ткнуть на оранжевую кнопку.

Устранение проблем. Возможные проблемы, из-за которых приложение не появляется на Вашем устройстве Android:

• Возможно, что на Android-устройстве установлена устаревшая версия MIT App Inventor Companion App. Загрузите последнюю  версию Companion App для App Inventor.
• Возможно, что Android-устройство не подключено к беспроводной сети WiFi. Убедитесь, что в нижней части экрана AI2 Companion App Make отображается IP-адрес.
• Ваше Android-устройство не подключено к той же самой сети, что и компьютер. Убедитесь, что IP-адреса и компьютера, и устройства Android принадлежат одной и той же локальной сети.
• Ваша школа или организация могут использовать сетевые протоколы, запрещающие полноценную работу соединения WiFi (или вообще подключение WiFi недоступно). В таком случае Вы все еще можете использовать App Inventor вместе с эмулятором Androd, или можете использовать кабель USB для подключения к своему Android-устройству.

[Вариант 2, установка и запуск эмулятора Android]

Если нет в руках телефона или планшета Android, то Вы все еще можете использовать App Inventor. App Inventor предоставляет Android-эмулятор, который работает так же, как и Android, рисуя свое окно на экране компьютера PC. Таким способом можно тестировать приложения и распространять их, даже через Google Play Store.

AI2 connection emulator

Для использования эмулятора Вам сначала нужно установить на компьютере некоторое ПО (что не требуется при наличии WiFi подключения, см. Вариант 1 выше). Следуйте инструкциям, описанным во врезках ниже, в зависимости от версии операционной системы на Вашем PC.

Важное замечание: если Вы обновляете предыдущую установку ПО App Inventor, см. ссылку [2]. Вы можете проверить, работает ли на компьютере последняя версия ПО, путем посещения странички App Inventor 2 Connection Test [3].

Шаг 1, установка App Inventor Setup Software.

1. Загрузите инсталлятор.

Version 3.0: для macOS 10.10 (Yosemite) и более свежих версий macOS. Если у Вас ранее был установлен эмулятор, то может понадобиться жесткий сброс.

Version 2.3Version 2.3: для более старых версий macOS.

2. Двойным кликом на загруженный файл запустите инсталлятор. Вам возможно понадобиться найти, где находится папка загрузок браузера, и как называется файл. Имя файла инсталлятора должно быть наподобие AppInventor_Setup_v_X.X.dmg, где X.X номер версии. Если Вы получаете сообщение, что нельзя установить приложение от не идентифицированного разработчика, кликните на иконку приложения с удерживанием Control, затем выберите Open из всплывающего меню.

3. Кликните Continue.

AI2 macinstaller1

4. Прочитайте и примите соглашение о лицензировании (software license agreement).

5. На экране стандартной установки кликните Install. Не меняйте папку, куда будет происходить установка.

AI2 macinstaller2

6. Если будет запрошен пароль для подтверждения установки, введите его, кликните OK.

7. Инсталлятор выведет сообщение, что пакет App Inventor Setup был установлен.

AI2 macinstaller3

8. Если Вы обновили ранее установленную версию ПО, выйдите из системы (log out) и снова войдите в неё (log in), или перезагрузите систему перед тем, как продолжить использовать App Inventor.

1. Установка программного пакета App Inventor Setup. Этот шаг такой же и для всех Android-устройств, и одинаковый для операционных систем Windows XP, Windows Vista, Windows 7, Windows 8.1 и Windows 10.

2. Если Вы для подключения к устройству Android используете кабель USB, то еще понадобится установить драйверы Windows для Вашего телефона Android.

Примечание: App Inventor 2 не работает в Internet Explorer. Для пользователей Windows разработчики рекомендуют использовать Chrome или Firefox в качестве браузера для работы в среде App Inventor.

[Установка программного пакета App Inventor Setup]

Вы должны выполнить установку под учетной записью с привилегиями системного администратора Windows. Установка не под учетной записью администратора в настоящий момент не поддерживается.

Если у Вас установлена предыдущая версия инструментов App Inventor 2, то понадобится деинсталлировать их перед установкой последней версии. Следуйте инструкциям, как обновить ПО App Inventor Setup [2].

1. Загрузите инсталлятор (http://appinv.us/aisetup_windows).

2. Найдите в папке Загрузки или на рабочем столе файл инсталлятора наподобие MIT_App_Inventor_Tools_2.3.0_win_setup.exe (имя в зависимости от версии может поменяться, файл будет размером около 80 мегабайт). Место, куда попадет файл после загрузки, зависит от того, как сконфигурирован браузер.

3. Запустите файл, пройдите шаги, предлагаемые инсталлятором. Не меняете папку назначения установки, но запишите путь до неё, потому что она может понадобиться позже для проверки драйверов. Путь до папки может меняться в зависимости от версии Windows, и от того, как Вы вошли на компьютер - как администратор, или как обычный пользователь.

4. Может появиться запрос, разрешаете ли Вы программе из неизвестного источника вносить изменения на компьютере? Кликните Yes.

AI2 windows installer unknown yes

[Место размещения ПО]

В большинстве случаях App Inventor должен сам найти свою папку. Но если он запрашивает её место нахождения, то введите путь C:\Program Files\Appinventor\commands-for-Appinventor. Если у Вас 64-битная система Windows, то вместо Program Files введите Program Files (x86). Также если Вы не установили программу под администратором, то установка возможно была в другую папку, не в C:\Program Files. Тогда понадобится поиск (F3), чтобы найти правильный путь до папки.

Для установки нужны sudo-привилегии.

Примечание: программа установки 32-битная. Если у Вас 64-битная система, то возможно понадобится установить дополнительные библиотеки, чтобы система могла запустить 32-битное ПО. Один из способов установки - запустить команду sudo apt-get install lib32z1, но это может не сработать на всех дистрибутивах GNU/Linux, так что возможно понадобятся некоторые исследования, чтобы установить библиотеку на конкретной системе.

sudo apt-get install lib32z1

Если у Вас ранее был установлен пакет App Inventor, то нужно удалить эти файлы перед установкой новой версии:

sudo rm -rf /usr/google/appinventor
sudo rm -rf ~/.appinventor

[Инструкции для систем, которые могут устанавливать пакеты Debian]

Используйте эти указания для систем, которые могут устанавливать пакеты Debian (например Debian или Ubuntu).

Примечание: если Вы ранее установили пакет для App Inventor Classic, то должны удалить его, потому что он будет пересекаться с новой установкой. Удалите этот пакет командой sudo apt-get remove appinventor-setup.

1. Загрузите пакет Appinventor Setup installer Debian. Это будет файл наподобие appinventor2-setup_2.3_all.deb, пакет инсталлятора Debian. Место, куда попадет файл после загрузки, зависит от того, как сконфигурирован браузер, обычно это папка Downloads.

2. Если Ваша система может устанавливать пакеты, то просто кликните на файл пакета, чтобы началась установка.

3. Если Ваша система не поддерживает запуск пакетов кликами, то найдите папку, где находится файл пакета, и запустите команду:

sudo dpkg --install appinventor2-setup_2.3_all.deb

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

4. ПО установится в папку /usr/google/appinventor.

5. Вам может также понадобиться сконфигурировать систему для детектирования нового (Android) устройства. См. результаты поиска Setting up Android device for development site:appinventor.mit.edu для указаний по настройке телефона, и настройке Linux по детектированию устройств Android ("set up your system to detect your device", "If you're developing on Ubuntu Linux").

[Инструкции для других систем GNU/Linux]

1. Загрузите tar-файл инсталлятора Appinventor Setup (http://appinv.us/aisetup_linux_other). У файла имя будет наподобие appinventor2-setup_2.3.tar.gz, это tar-архив, сжатый Gzip.

2. Установите файлы с использованием метода, подходящего для Вашей операционной системы. Проверьте, что команды для директории Appinventor оканчиваются под /usr/google/appinventor.

[Запуск aiStarter]

Программа aiStarter управляет обменом данными между браузером (когда Вы программируете в среде App Inventor) и устройством Android. Она должна быть запущена, когда используется эмулятор или кабель USB; если обмен с Android осуществляется через беспроводное соединение WiFi, то запускать aiStarter не нужно. Таким образом, всякий раз, когда произведен вход в App Inventor с использованием эмулятора Android или кабеля USB для подключения к устройству Androd, необходимо запускать aiStarter. Это можно сделать командой:

/usr/google/appinventor/commands-for-Appinventor/aiStarter &

Для удобства Вы можете настроить эту команду для автоматического запуска всякий раз, когда входите в систему, или когда система загружается. Точный метод, как это нужно сделать, зависит от дистрибутива GNU/Linux, который Вы используете, проконсультируйтесь с соответствующей документацией.

[Путь до директории установки]

В большинстве случаев App Inventor должен быть в состоянии сам найти папку, куда была произведена установка. Если он спрашивает об этом, то введите путь:

/usr/google/appinventor/commands-for-Appinventor

Шаг 2, запуск aiStarter.

Использование эмулятора или кабеля USB требует программы на компьютере, которая называется aiStarter. Эта программа является помощником для браузера, который осуществляет обмен с эмулятором или с Android-устройством через кабель USB. Программа aiStarter устанавливается, когда Вы устанавливаете пакет App Inventor Setup. Программа aiStarter не нужна, только если Вы используете беспроводное подключение к Интернет на устройстве Android (см. Вариант 1 выше).

• На Mac программа aiStarter запустится автоматически, когда Вы заходите в свою учетную запись на компьютере (логин), и работает невидимо в фоновом режиме.

• На Windows появится ярлык на Рабочем Столе (Desktop), в меню Пуск (кнопка Start) и в папке Автозагрузка (Startup Folder). Если Вы хотите использовать эмулятор вместе с App Inventor, то возможно понадобится запустить aiStarter вручную на компьютере. Это можно сделать кликом на иконке aiStarter, находящейся на Рабочем Столе или в меню кнопки Пуск.

aiStarter icon

После успешного запуска aiStarter будет отображаться окно наподобие следующего:

aiStarter successful1

• На GNU/Linux программа aiStarter появится в папке /usr/google/appinventor/commands-for-Appinventor, и Вам надо запустить её вручную. Это можно сделать из командной строки терминала следующей командой:

/usr/google/appinventor/commands-for-appinventor/aiStarter &

Программа aiStarter устанавливается на Ваш компьютер, когда установлено ПО пакета App Inventor Setup. Эта программа обеспечивает канал связи между средой программирования App Inventor, работающей в браузере, и другими частями App Inventor. Всякий раз, когда Вы хотите использовать эмулятор Android или кабель USB для подключения к Android-устройству, нужно предварительно запустить программу aiStarter. Если она не работает, то появится сообщение о том, что aiStarter не запущен. На Windows программа aiStarter запускается ярлычком на рабочем столе или в каталогах кнопки Пуск. На операционной системе Mac программа aiStarter должна запускаться автоматически, так что об этом не следует беспокоиться. В случаях, когда aiStarter почему-то нужно запустить вручную, найдите его с помощью Spotlight, или в проводнике Finder перейдите в каталог /Applications/AppInventor/commands-for-App, и двойным щелчком запустите aiStarter.

Программа aiStarter запущена корректно, если происходит соединение с эмулятором Android (или с реальным устройством Android, подключенным кабелем USB). Если Вы хотите диагностировать проблему с aiStarter, попробуйте запустить aiStarter из консоли. Затем, когда Вы пытаетесь подключиться к эмулятору, вывод в консоли должен показать последовательность попыток подключения в форме:

127.0.0.1 - - [01/Dec/2013 11:28:30} "GET /replstart/emulator-5554 HTTP/1.1" 2000

Здесь можно обнаружить сообщения, показывающие блокирование портов, или проблемы с утилитой отладчика adb. Для случая блокированных портов проверьте, какая программа на компьютере использует заблокированный порт.

Программа adb (Android Debug Bridge) работает на Вашем компьютере, и управляет подключенными устройствами Android. Эта программа может испытывать трудности, особенно если есть другие проблемы с подключениями. Если Вы подозреваете наличие проблемы, откройте консоль команд в директории App Inventor, запустите программу adbrestart и посмотрите, может ли это чем-то помочь.

Шаг 3, откройте проект App Inventor и подключитесь к эмулятору.

В App Inventor и откройте свой проект, или создайте новый через меню Project -> Start New Project, дав новому проекту имя. Затем в меню App Inventor перейдите по ссылке Connect -> Emulator. Все вышеописанные действия осуществляются в браузере с открытой страницей App Inventor.

AI2 connectSnapshot Emulator

Вы увидите сообщение о соединении с эмулятором. Запуск эмулятора процесс не быстрый, может занимать несколько минут. Вы можете увидеть обновления экрана в процессе запуска эмулятора:

AI2 connecting emulator

AI2 emulator connect progress

В эмуляторе сначала появится пустой черный экран (картинка №1 ниже). Подождите готовности эмулятор, когда экран станет цветным (картинка #2). Даже после этого экрана Вам нужно подождать несколько минут, пока эмулируемый телефон подготавливает свою карту SD: процессе подготовки карты в верхней части экрана телефона будет иконка, информирующая о подготовке карты. После соединения и подготовки эмулятор запустит и покажет приложение, которое Вы открыли в App Inventor.

AI2 emulator screen01 AI2 emulator screen02 AI2 emulator screen03 AI2 emulator screen04
№1 №2 №3 №4

[Вариант 3, подключение через кабель USB]

Некоторые шлюзы и сетевые экраны школ и организаций не позволяют осуществить тот тип соединения WiFi, который необходим (например, блокируются некоторые порты, или WiFi вообще не предоставляется). Если WiFi не работает или недоступен, попробуйте подключение к Android-устройству через кабель USB.

AI2 connection USB

Когда Вы отлаживаете приложения App Inventor на Android-телефоне или планшете, Android-устройство обменивается данными с программным обеспечением App Inventor, работающим в окне браузера на компьютере. Этот обмен осуществляется под управлением приложения MIT AI2 Companion App, работающим на Android-устройстве. Ниже на шаге 2 приведены инструкции по установке этого приложения. MIT AI2 Companion App может осуществлять обмен данными через сетевое беспроводное беспроводное соединение. Это самый удобный, настоятельно рекомендуемый метод, не нужно устанавливать на компьютер никакого дополнительного ПО (см. выше описание Варианта 1).

Однако в некоторых случаях это беспроводное подключение не работает. Например, некоторые отели, конференц-залы, школы и другие организации предоставляют ограниченное подключение через WiFi. Они конфигурируют свою сеть так, чтобы запретить двум устройствам в локальной сети, одно из которых подключено по радио, обмениваться данными друг с другом (см. выше врезку "Как работает через WiFi приложение MIT AI2 Companion"). Некоторые пользователи App Inventor решают эту проблему покупкой беспроводного роутера, позволяющего настроить свою частную локальную сеть (также некоторые компьютеры Mac и некоторые PC Windows могут работать как WiFi-роутеры, предоставляя подключения к Интернет небольшому количеству сетевых устройств). Однако в случаях, где такое решение невозможно, Вы все еще можете использовать App Inventor с телефоном или планшетом Android, соединив его с компьютером кабелем USB.

Настройка соединения через USB может быть неудобной, особенно на машинах с современной операционной системой Windows, которая требует специальный драйвер для подключения устройствам Android (это не относится к Mac или Linux, которым не нужен специальный драйвер). К сожалению, разные устройства Android могут требовать для себя разные драйверы, и за исключением нескольких стандартных моделей устройств компании Microsoft и Google оставляют реализацию и предоставление этого драйвера на совести производителя Android-устройства. Как следствие возможно Вам понадобится поискать в Интернете нужный драйвер для своего телефона. App Inventor предоставляет тест-программу, которая проверяет, может ли Ваше Android-устройство обмениваться данными с компьютером через кабель USB. Вы должны запустить этот тест и устранить проблемы с соединением перед тем, как попробуете использовать App Inventor с этим устройством на подключении через USB.

Выполните следующие шаги, чтобы начать использовать App Inventor с подключением к Android-устройству через кабель USB:

Шаг 1, установка App Inventor Setup Software.

Чтобы подключиться через USB, сначала Вам нужно запустить инсталлятор App Inventor на компьютере (это не требуется, когда для Android-устройство доступно подключение к Интернет через WiFi, см. Вариант 1 выше). На этом шаге устанавливается программа aiStarter, которая работает как промежуточное звено между App Inventor в браузере и MIT AI2 Companion App, работающим на Android-устройстве. В зависимости от того, на какой системе работает компьютер - Mac, Windows или Linux, процесс установки происходит по-разному. Инструкции по установке см. во врезках выше в описании Варианта 2, "Шаг 1: установка App Inventor Setup Software".

Важное замечание: если Вы обновляете предыдущую версию ПО App Inventor, см. ссылку [2]. Вы можете проверить, работает ли на компьютере последняя версия ПО, по ссылке [3].

Шаг 2, загрузите и установите MIT AI2 Companion App.

Действия на этом шаге совпадает с действиями первого шага Варианта 1, см. Вариант 1 "Шаг 1, загрузите и установите MIT AI2 Companion App".

Шаг 3, запуск aiStarter.

Действия на этом шаге совпадают с описанием Варианта 2, "Шаг 2, запуск aiStarter".

Шаг 4, настройка Adroid-устройства для подключения USB (включение отладки через USB).

Убедитесь, что на устройстве Android в системных настройках разрешена возможность отладки через USB (USB Debugging ON). Эта функция находится в опциях разработчика, и называется "Отладка USB".

На большинстве Android 3.2 или более старых эту опцию можно найти в меню Настройки (Settings) -> Приложения (Applications) -> Разработка (Development). На Android 4.0 или более свежей версии, это находится в меню Настройки (Settings) -> Разработчик (Developer).

Примечание: на Android 4.2 или более новых операционных системах опции разработчика по умолчанию скрыты. Чтобы сделать их доступными, перейдите в Настройки (Settings) -> Об этом устройстве (About phone) и ткните на номер сборки (Build number) семь раз. Вернитесь в предыдущий экран, чтобы найти опции разработчика, где находится галочка "Отладка USB" (USB Debugging).

Шаг 5, соединение компьютера и устройства.

Соедините компьютер и Android-устройство кабелем USB, и при этом убедитесь, что устройство подключилось как флешка (mass storage device), но не как мультимедийное устройство (media device), и при этом она не смонтирована как диск на компьютере. Это означает, что надо будет перейти в Finder (Проводник на Mac) или в My Computer (Проводник на Windows), и отключить любой диски (диски), которые смонтировались при подключении Вашего Android-устройства.

На Android 4.2.2 и более новой операционной системе, устройство отобразит всплывающее окно с вопросом "Разрешить отладку USB?" (Allow USB Debugging?) при первом подключении к компьютеру. Нажмите "OK". Это идентифицирует компьютер на устройстве, позволяя компьютеру обмениваться данными с ним. Это нужно делать при каждом соединении с другим компьютером, но на каждом конкретном компьютере это делается только один раз.

Шаг 6, проверка соединения.

Перейдите на страничку [3] (открыв эту ссылку в новой закладке браузера) и посмотрите, есть ли подтверждение о том, что компьютер может обнаружить устройство. Если тест окончился неудачно, просмотрите советы по решению проблем на страничке [4]. Вы не сможете использовать App Inventor через кабель USB, пока не устраните проблему с соединением.

[Системные требования App Inventor]

Внимание: Internet Explorer не поддерживается App Inventor, разработчики рекомендуют Chrome или Firefox.

Компьютер или операционная система:

Macintosh (на процессоре Intel): операционная система Mac OS X 10.5 или более свежая.
Windows: операционная система Windows XP, Windows Vista, Windows 7.
GNU/Linux: операционная система Ubuntu 8 или более свежая, Debian 5 или более свежая (замечание: GNU/Linux live development поддерживается только для WiFi-соединений между компьютером и Android-устройством).

Браузер:

Mozilla Firefox 3.6 или более свежий. Замечание: если Вы используете Firefox с расширением NoScript, то это расширение нужно выключить (см. страничку по решению проблем [5]).
Apple Safari 5.0 или более свежий.
Google Chrome 4.0 или более свежий.
Телефон или планшет (или используйте эмулятор).
Операционная система Android 2.3 ("Gingerbread") или более свежая.

Microsoft Internet Explorer не поддерживается.

После того, как Вы настроили компьютер и устройство Android, кое-что прочитали про Designer и Blocks Editor work, можно попробовать создать свою первую программу HelloPurr. В настоящее время у Вас должен быть открыт в браузере Designer или Blocks Editor, и подключен к компьютеру или эмулятор Android, или реальное устройство (см. выше инструкции, как настраивается такое подключение).

[Первое приложение: HelloPurr]

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

Чтобы собрать HelloPurr, понадобится файл картинки с котом и звуковой файл "meow". Загрузите эти файлы по ссылкам ниже. При загрузке поместите эти файлы на рабочий стол или другое известное место, чтобы их можно было легко найти позже.

kitty.png картинка кота
meow.mp3 звук "мяу"

Выберите компоненты для приложения. Компоненты App Inventor (Components) находятся в левой части окна Дизайнера под заголовком Palette (палитра).

AI2 basic palette Button

Компоненты это базовые органы управления приложением на телефоне Android. Некоторые компоненты очень простые, наподобие меток текста на экране. Компонент Button предназначен для создания кнопки, на которую пользователь тыкает, чтобы запустить какое-нибудь действие.

Другие компоненты более сложные: рисующий изображения Canvas (холст) может показывать изображения или анимации, компонент сенсора движения Accelerometer работает наподобие контроллера Wii, определяя перемещения и тряски корпуса телефона, есть компоненты для отправки текстовых сообщений, для воспроизведения музыки и видео, получения информации с Web-сайтов, и так далее.

Для использования компонента в будущем приложении нужно схватить и перетащит его мышью в среднюю часть окна просмотра формы Дизайнера. Когда Вы добавляете компонент в Viewer (картинка 1 ниже), он также добавляется в список компонентов, находящийся в правой части Viewer.

У компонентов (картинка 2 ниже) есть свойства, которые можно настроить, чтобы поменять вид компонента, или поменять его поведение в приложении. Чтобы просмотреть и поменять свойства компонента (картинка 3 ниже), Вы должны сначала выбрать нужный компонент в списке компонентов.

AI2 Viewer Components Properties

Выбор компонентов и установка свойств. У приложения HelloPurr есть компонент Button, который показывает картинку кота, которую Вы загрузили ранее. Чтобы создать такую кнопку, выполните следующие шаги:

Шаг 1a. Из палитры User Interface перетащите и бросьте компонент Button на форму Screen1 (картинка 1 ниже).

Шаг 1b. Чтобы добавить на кнопку картинку кота, на панели Properties в свойстве Image кликните на текст "None...", и кликните на "Upload New…" (картинка 2). Появится всплывающее окно для выбора файла изображения. Кликните "Browse", и найдите файл kitty.png, который был загружен ранее (картинка 3). Кликните на файл kitty.png, кликните "Open" и затем "OK".

AI2 Upload sound

Шаг 2. Поменяйте свойство Text у кнопки: удалите "Text for Button1", оставив пустым свойство текста, чтобы никакой текст не появлялся на морде кота.

Если картинка не появляется в Дизайнере формы, можно исправить это настройкой свойств Height и Width кнопки в значение "Fill Parent". Чтобы выполнить это, кликните на компонент кнопки, перейдите в панель свойств Properties, прокрутите свойства вниз до Width и кликните на слово "Automatic..." для активация выпадающего списка. Выберите "Fill Parent". Сделайте то же самое для свойства Height.

AI2 kitty

Шаг 3. В палитре User Interface перетащите и бросьте на форму Viewer компонент метки текста Label (картинка 1 ниже), разместив метку ниже кнопки с картинкой кота. Новая метка появится в списке используемых компонентов с именем Label1.

В панели Properties поменяйте свойство Text метки Label1 на текст "Pet the Kitty" (картинка 2). Вы увидите, что текст метки в Дизайнере и на телефоне поменяется. Поменяйте свойство размера текста FontSize метки Label1 на 30 (картинка 3). Попробуйте поменять цвет фона метки BackgroundColor кликом на область цвета фона (картинка 4) и цвет текста TextColor (картинка 5). В этом примере цвет фона изменен на синий, и цвет текста на желтый.

AI2 Label set Properties

Шаг 4. В панели Palette разверните раздел Media, и перетащите на Viewer компонент Sound (картинка 1). Это "невидимый" компонент. Всякий раз, когда Вы перетаскиваете такие компоненты в программу, они появляются в нижней части Viewer помеченные как "Non-visible components". В панели Media кликните Upload New... (картинка 2), выберите файл meow.mp3, и выгрузите его в проект (картинка 3). В панели Properties найдите свойство Source компонента Sound1, где пока стоит None..., кликните на слово None..., чтобы поменять значение свойства Source у Sound1 на meow.mp3 (картинка 4).

AI2 Sound component

[Программирование в Blocks Editor]

До этого мы настраивали внешний вид и ресурсы приложения, помещая в него компоненты. Чтобы начать программировать поведение приложения, надо перейти в редактор блоков (Blocks Editor). Для этого кликните на кнопку Blocks.

AI2 Blocks Editor butt

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

Шаг 5. В левой части окна Blocks Editor кликните на секцию Button1 (панель Blocks, раздел Screen1), чтобы открыть её. Перетащите и бросьте в рабочую область редактора (его правая часть) обработчик события Button1.Click.

AI2 buttonblocks

Блоки горчично-желтого цвета называются блоками обработки событий (event handler blocks). Они отвечают за то, как телефон должен ответить на определенные события: нажатие на кнопку, сотрясания телефона, перемещение пальцев пользователя по экрану, и т. п. Горчично-желтые блоки event handler содержат в себе слово when (когда) и слово do. Например, "когда клик на кнопке, делать ..." (when Button1.Click do ...).

Шаг 6. Кликните на секцию Sound1 (панель Blocks редактора, раздел Screen1), и перетащите блок Sound1.Play, подключив его в секцию "do" блока when Button1.Click. Блоки будут сцепляться друг с другом как паззл, и Вы услишите характерный звук при их соединении друг с другом.

AI2 soundblocks

Фиолетовые блоки называются блоками команд (command blocks), они встраиваются в тело блоков обработчиков событий. Когда запускается обработчик события, он запустит последовательность команд в своем теле. Команда это блок, который задает какое-либо выполняемое действие (например, проигрывание звука), когда происходит событие (например нажатие на Button1).

В настоящее время блоки должны выглядеть так:

AI2 button1 click

Можно увидеть, что блок команды находится в обработчике события. Этот набор блоков означает следующее: "когда произошел клик на кнопку Button1, будет воспроизведен звук Sound1" (when Button1 is clicked, Sound1 will play). Обработчик события представляет категорию действия пользователя (например клик на кнопке), и команда задает подробности выполняемого действия (например проигрывание указанного звука).

Подробнее про блоки можно почитать в статье "Understanding Blocks in App Inventor 2".

Попробуйте, как Ваша первая программа работает. При клике на кнопку Вы услышите мяуканье кота.

Примечание: есть известная проблема с компонентом Sound на некоторых устройствах. Если Вы видите сообщение об ошибке "OS Error" и звук не проигрывается, или проигрывается с большой задержкой, перейдите обратно в Дизайнер и попробуйте использовать компонент Player (находится в той же категории Media) вместо компонента Sound.

[Создание установочного пакета]

Когда устройство Android (эмулятор или телефон/планшет) подключен к App Inventor, Ваше приложение запускается в реальном времени на этом устройстве. Если Вы отключите эмулятор (или телефон, или планшет) от Blocks Editor, приложение закроется. Вы всегда можете снова запустить его, повторно подключившись к устройству. Чтобы создать автономное приложение, которое работает без подключения к App Inventor, Вы должны "упаковать" его, создав так называемый установочный пакет (application package, файл с расширением apk).

Пакет позволит установить приложение на телефон, или можно отправить его кому-нибудь еще. Для этого кликните на закладку Build в верхней части интерфейса App Inventor. Здесь есть 2 варианта сборки на выбор:

AI2 package variants

App (provide QR code): можно сгенерировать баркод (так называемый QR-код), который можно использовать для установки приложение на телефоне или планшете, у которого есть камера и сканер QR-кода, наподобие ZXing barcode scanner (этот сканер свободно доступен в магазине Google Play).

Примечание: этот баркод работает только на Вашем устройстве, потому что связан с Вашей учетной записью Google. Если Вы хотите предоставить свое приложение другим пользователям с помощью баркода, то нужно загрузить apk-файл на компьютер и использовать дополнительное стороннее ПО для преобразование файла в баркод. Дополнительную информацию см. по ссылке [8].

App (save to my computer): можно загрузить приложение на компьютер как apk-файл, который Вы можете передать кому-нибудь, или предоставить в общий доступ, чтобы его можно было установить вручную на других устройствах (иногда такая установка называется "side loading", т. е. "загрузка из других источников").

[Улучшение HelloPurr]

Добавим функцию вибрации телефона, когда кот мяукает. Откройте Blocks Editor, откройте Sound1 и перетащите блок Sound1.Vibrate под блок Sound1.Play.

AI2 Vibrate component

У блока Sound1.Vibrate есть открытый слот, который подразумевает, что в него надо что-то вставить, чтобы получить нужное поведение вибрации. Здесь мы можем задать длительность вибрации, вставив блок числа.

AI2 selectnumber

Число для длительности указывается в миллисекундах, кликните на число 0 и введите 500.

AI2 change0to500a

AI2 change0to500b

Теперь подключите телефон к App Inventor, ткните пальцем на картинку кота на телефоне. Телефон должен завибрировать и одновременно должен быть звук мяукания. Если Вы упаковали свое приложение на телефон, то это может не произойти, хотя может происходить, когда телефон подключен, но не в реальном времени. Чтобы заново подключить телефон, кликните на кнопку Connect в верхней части экрана App Inventor, и выберите Reset Connection. Если это не работает, то закройте приложение на телефоне и перезапустите соединение.

Вы можете загрузить готовый проект этого приложение в виде aia-файла HelloPurr.aia.

Чтобы продолжить дальше знакомиться с App Inventor, изучите следующее:

Базовые руководства для начинающих
Обзор библиотек App Inventor 2
Пользовательский форум
Описание встроенных блоков App Inventor
Дополнительные руководства

[Ссылки]

1. Setting Up App Inventor site:appinventor.mit.edu.
2. How to Update the App Inventor Setup Software site:appinventor.mit.edu.
3. MIT App Inventor 2 Connection Test site:appinventor.mit.edu.
4. General Connection Help site:appinventor.mit.edu.
5. Troubleshooting for App Inventor 2 site:appinventor.mit.edu.
6. How to Set up a Wireless Network (WiFi) Connection site:wikihow.com.
7. MIT APP INVENTOR SUPPORT FORUM site:groups.google.com.
8. Sharing and Packaging Apps site:appinventor.mit.edu.
9181225AI2-HelloPurr.zip - установочный пакет эмулятора AI2, проект HelloPurr.

 

Добавить комментарий


Защитный код
Обновить

Top of Page