Connect your Phone or Tablet over WiFi
To test your app as you create it, follow these steps to install the MIT App Inventor Companion app on a phone or tablet:
Step 1: Download and install the MIT App Inventor Companion app on your Android or iOS device.
Open the Google Play store or Apple App store on your phone or tablet, or use the buttons below to open the corresponding page:
After downloading, step through the instructions to install the Companion app on your device. You need to install the MIT App Inventor Companion app only once, and then you can leave it on your phone or tablet for whenever you use App Inventor. Note: There are some differences between the Android and iOS versions. Please review this page for more details.
Alternatively, you can scan the following QR codes to get either the iOS or Android app:
- For iOS, scan this code to go to the Companion app on the Apple App Store.
- For Android, scan this code to download the Android .APK file for the Companion app directly to your device. (Using an .APK file requires sideloading the app on your device and updating the app manually in the future.)
Step 2: Connect both your computer and your device to the SAME Wi-Fi network
App Inventor will automatically show you the app you are building, but only if your computer (running App Inventor) and your device (running the Companion) are connected to the same Wi-Fi network. See a more detailed explanation of this here.
Step 3: Open an App Inventor project and connect it to your device
Go to App Inventor and open a project (or create a new one — use Project > Start New Project and give your project a name).
Then Choose “Connect” and “AI Companion” from the top menu in your browser:
A dialog with a QR code will appear on your PC screen. On your device, launch the MIT App Companion app just as you would do any app. Then click the “Scan QR code” button on the Companion, and scan the code in the App Inventor window:
Within a few seconds, you should see the app you are building on your device. It will update as you make changes to your design and blocks, a feature called “live testing.”
If you have trouble scanning the QR code or your device does not have a scanner, type the code shown on the computer into the Companion’s text area on your device exactly as shown. The code is directly below where the screen on your PC shows “Your code is” and consists of six characters. Type the six characters and choose the orange “Connect with code.” Do not type an Enter or carriage return: type just the six characters followed by pressing the orange button.
Troubleshooting:
If your app does not appear on your device, the most likely problems are:
- You may have an outdated version of the App Inventor Companion App. Download the latest Companion App above.
- Your device may not be connected to Wi-Fi. Make sure you see an IP address at the bottom of the AI Companion App screen on your phone or tablet.
- Your device may not be connected to the same Wi-Fi network as your computer. Make sure both devices are connected to the same wifi network name.
- Your school or organization may have network protocols in place such that the wifi connection is not allowed. If this is the case, you can still use App Inventor with the emulator, or you can use a USB cable to connect your device. Go back to the main setup page for these options.
Курс Создание приложений в MIT App Inventor
Создание приложений для мобильных устройств является одним из популярных и востребованных направлений программирования в современном мире.
Среды визуального программирования позволяют научить создавать мобильные приложения учеников с разными навыками в области алгоритмизации и программирования. Вместо текстового языка программирования, в таких средах используются визуальные логические блоки с уже готовыми действиям, функциями для работы с социальными сетями, веб-сайтами или сенсорами устройства и др.
Визуальная среда разработки позволяет обрабатывать мультимедийный контент, распознавать речевые команды и синтезировать речь.
В рамках занятий ученики познакомятся со средой визуального программирования MIT APP Inventor и, научатся создавать мобильные приложения для Android, протестируют эти приложения на своих мобильных устройствах и по окончании обучения смогут разработать собственный итоговый учебный продукт — мобильное приложение.
Заявка на подключение
Укажите населенный пункт и адрес подключения. Мы проверим возможность подключения к сети «АВИЭЛ» и перезвоним Вам.
Отправить заявку
Заказать звонок
ДБ «Экспресс»: г.Раменское, ул. Советская, д. 2, этаж 5, офис 502
Совместное использование App Inventor и web-технологий
Cуществует несколько способов расширить функциональность App Inventor и увеличить эффективность создания приложений в этой среде разработки: при помощи расширений, внешних приложений или использования web-технологий.
Создавать расширения для MIT App Inventor 2, возможно, не так и сложно, но при этом возникает справедливый вопрос, а для чего это делать, если можно найти готовую и более функциональную технологию? Писать расширения имело бы смысл, если исходный движок поражал своими возможностями и производительностью. Но здесь этого нет, а из велосипеда, как известно, автомобиль не сделать.
Использовать возможности сторонних приложений является неплохой идеей, но это чаще происходит на уровне каких-то общих сервисов, а хотелось бы увеличить функциональность на более низком уровне, например, компонентов. В таких случаях стоит обратить внимание на использование возможностей web-технологий, которые становятся доступными при использовании компонента WebView. В самом простом случае взаимодействие может быть таким: приложение передаёт скрипту, находящемуся в html-файле, данные для обработки, после которой они передаются обратно приложению.
Использование web-технологий выходит за рамки визуальной разработки без написания кода, но знаний работы с App Inventor будет вполне достаточно для написания простых скриптов. Если вы никогда не программировали на JavaScript, то рекомендую ради интереса познакомиться с этим простым, но универсальным языком программирования, который имеет огромную область применения в IT.
В использовании App Inventor совместно с другими технологиями нет ничего удивительного. Не существует универсального языка разработки, который позволил бы эффективно решать любые задачи на любой операционной системе при любом уровне доступных для этого ресурсов. Значит, для решения той или иной задачи практичнее использовать ту технологию, которая позволяет решить её быстрее и проще. В любом случае у вас есть выбор, либо упереться и всё делать при помощи блоков, либо что-то передавать на обработку web-технологиям, которые могут осуществить её проще и быстрее.
Рассмотрим пример сортировки списка строк.
Рис. 1. Сортировка списка без возвращения результата приложению.
При помощи выражения «javascript:» включается режим выполнения кода скрипта, в адресной строке браузера. Проверить это легко. Откройте любой браузер и в адресную строку введите «javascript: var hello=’Привет, мир!’; alert(hello);». Появится сообщение с приветствием.
В примере выше данные только передаются скрипту, чем и объясняется его простота. Если данные нужно получить из скрипта, то в таком случае необходимо использовать таймер для отслеживания возвращаемого скриптом значения (рис. 2).
Рис. 2. Сортировка списка с возвращением результатов в приложение.
Для выполнения скрипта требуется некоторое время. Если поставить блок свойства CurrentPageTitle сразу после вызова скрипта, то скрипт не успеет выполниться к этому моменту и свойство CurrentPageTitle вернёт своё начальное значение.
Обратите внимание на то, что данные в скрипт передаются в одном свойстве — WebViewString, а возвращаются в другом — CurrentPageTitle. Это необходимо для развязки входных и выходных параметров, так как параметры в скрипт передаются по ссылке, а не по значению.
Скрипты можно поместить в отдельный html-файл и вызывать их из блоков (рис. 3).
Рис. 3. Использование внешнего html-файла, содержащего скрипт.
Код файла скрипта AppInventor.html.
В этом примере выполнение скрипта происходит однократно при загрузке страницы. Вызов функций в уже загруженном скрипте производится при помощи рассмотренного выше выражения «javascript:».
В показанных примерах приложение App Inventor являляется основным компонентом (при помощи него создаётся интерфейс и основная функциональность), а web-технологии — вспомогательным (используются для выполнения команд приложения). Но в программировании существует и противоположный подход, когда интерфейс и основная функциональность реализуются при помощи web-технологий (HTML, CSS и JavaScript), а доступ к системе — через вспомогательную библиотеку для работы с системными ресурсами. Может ли App Inventor 2 работать в таком режиме? Может, но практичнее для этого использовать PhoneGap, DroidScript и др.
На этом занятии мы познакомились с совместной работой App Inventor и JavaScript. Таким же образом можно работать и с другими web-технологиями — PHP, MySQL, Python, а также различными фреймворками.
App Inventor/Переменные и процедуры
Набор повторяющихся блоков выделяют в процедуру, чтобы затем многократно к ней обращаться.
Есть два вида процедур:
- procedure ‒ ничего не возвращают,
- procedureWithResult ‒ возвращают какое-то значение.
Обе процедуры могут менять значения глобальных переменных, описанных в следующем разделе.
Имена процедур и переменных должны быть уникальными в программе. При создании процедуры ей присваивается некоторое уникальное имя (TODO рисунок), которое затем можно изменить на что-то осмысленное. Были и будут священные войны (холивары, holly wars), посвящённые вопросу, как лучше именовать функции и переменные (Naming conventions): по-верблюжьи (camelCase) или по-змеиному (snake_case). В чём разница?
Переменные править
- David Wolber. Android Programming with App Inventor for Android. 2010 ‒ фрагмент учебника
- Урок второй курса Teaching App Inventor — четыре вида переменных:
- переменная
- свойство компонента
- параметр функции
- параметр события
Ссылки править
- PaintPot Worksheet: Conceptualize and Customize — введение, общие понятия и вопросы.
- Variables: How does an app remember things?, переменные, как приложения что-то «помнят»
- Check Internet Connection In App Inventor ‒ пример присвоения значения аргументу процедуры
- www.appinventor.org