апп инвертор вход по коду
With MIT App Inventor, anyone can build apps with global impact
Join the MIT App Inventor Appathon for Good 2021.
Click here to learn more.
Get Started
Follow these simple directions to build your first app!
Tutorials
Step-by-step guides show you how to create even more apps.
Teach
Find out about curriculum and resources for teachers.
Support
Get answers to your questions in our community.
Contribute
Contribute to the App Inventor system or educational resources.
Collaborate
Learn about research and affiliations with App Inventor.
Artificial Intelligence with
App Inventor
New Curriculum and Teacher Resources
Made in partnership with YR Media.
News & Events
MIT App Inventor among the 2021 EdTech Top 40!
The EdTech Top 40 represents the edtech products accessed by the most students and educators across the United States via the internet between September 1, 2020 and May 31, 2021. Findings are based on 2m+ students, 250k+ educators, 8600+ edtech products, 2800+ organizations.
Appathon 2021 Winners Take Aim at Mental Health, Traffic, Zombies, and More
Over a thousand coders built phone and tablet apps to fix problems in their lives and communities. Submissions reflected all the problems and anxieties of 2021, and a few are ready to be adopted right away to address these problems.
App Inventor open job position
MIT App Inventor has an immediate opening for an additional member of our development team. We’re looking for an experienced developer who can join us in the support and evolution of the App Inventor platform, including our new work in conversational AI. This will be a full-time MIT staff position located at MIT in Cambridge, MA. To apply, see the MIT careers announcement at https://hr.mit.edu/careers, job ID 19940.
Robert Parks to join MIT App Inventor
Please accompany me in welcoming Robert Parks to the MIT App Inventor education team.
Robert is a curriculum developer, author, designer and teacher with keen understanding of student empowerment in STEM. His 2005 publication Makers was the first book on the maker movement. He’s served as senior editor for Wired.
Программирование мобильных приложений с помощью App Inventor
Операционная система Android является одной из лидирующих ОС. Разработка мобильных приложений под ОС Android очень актуальна даже несмотря на то, что под Android разработано множество приложений самых разных форматов и жанров. Дело в том, что подчас трудно найти нужное приложение, а часто бывает и так, что у пользователя рождается идея создания собственного уникального приложения.
Для создания приложений под Android необходима определенная квалификация в программировании, что делает практически невозможным создание приложений людьми, не познавшими основы программирования.
В итоге за данную проблему взялся коллектив Массачусетского технологического института (МТИ). В его стенах была создана среда, которая позволяет каждому школьнику или домохозяйке создать приложение под ОС Android. В основе данной разработки лежит популярная среда по алгоритмике Scratch, которую также разработали в МТИ.
В данной статье мы рассмотрим алгоритм создания простого приложения под Android. В дальнейшем вы сможете повышать свой уровень в создании программ под мобильные устройства.
Массачусетский технологический институт
Создадим простейшее приложение, которое будет здороваться с нами по имени.
1 шаг: Зарегистрироваться в Google
На первом шаге необходимо зайти на сайт google.com и пройти регистрацию.
2 шаг: MIT App Inventor
IDE App Inventor находится в веб-пространстве, что сильно упрощает работу, так как ресурсы компьютера практически не используются (но для доступа к среде необходимо наличие интернета). Также не требуется знания языка программирования Java и Android SDK.
Ссылка для входа в среду программирования MIT App Inventor:
Напоминаем: при обращении на данный сайт от вас потребуется наличие аккаунта Google или Google Apps.
Вход: Google
3 шаг: Описание интерфейса пользователя
После того как мы зашли на сайт и ввели свой логин и пароль, мы попадаем на страницу с проектами (при первом заходе данная страница будет пустой).
Разработка приложений происходит в 2 этапа:
Первый этап — проектирование интерфейса пользователя;
Второй этап — программирование (создание инструкций) приложения.
Для этого в меню выбираем Проекты → Начать новый проект. Появится окно для ввода названия проекта. При создании имени проекта нужно учитывать, чтобы имя отражало суть проекта (в имени запрещено использовать пробелы и другие спецсимволы).
У нас появилась новая страница.
1 блок «Палитра» — это Встроенные модули и блоки. Данная группа блоков позволяет задавать определенные действия/функции созданным компонентам.
2 блок «Просмотры» — Модель экрана мобильного устройства для визуального отображения.
3 блок «Компоненты» — Компоненты программы инициализируемых объектов.
4 блок «Свойства» — Свойства компонентов.
Для нашего приложения нужно выбрать 3 стандартных объекта из блока 1: Текстовое окно, кнопка и надпись.
Для этого из блока 1 переместим их по очереди в блок 2.
Если вы всё сделали правильно, объекты отобразятся в блоке 3.
Следующим шагом переименуем надпись на кнопке. В блоке 2 выберем кнопку (для этого необходимо просто нажать на нее) и перейдем в блок 4 «Свойства». В блоке «Свойства» необходимо найти свойства кнопки «Текст». Заменим «Текст для Кнопка1» на «ЖМИ!» или «Ответ».
4 шаг: Программирование
Сейчас у нас готов интерфейс приложения (визуальное отображение). Если мы его запустим или скачаем его на мобильное устройство, то оно запустится, но при нажатии на кнопки или при вводе текста не будет происходить ничего. Чтобы написать программу (инструкцию), мы перейдем в режим программирования. Для этого в правом верхнем углу нажмем на кнопку «Блоки». Как вы уже поняли, до этого мы были в режиме «Дизайнер», и для перехода обратно в этот режим необходимо нажать на кнопку «Дизайнер» возле кнопки «Блоки».
Проговорим еще раз, что должна делать наша программа.
Оператор вводит свое имя в поле «Текст»: «Петя». Далее оператор нажимает на кнопку «ЖМИ!» и в надписи 1 появляется надпись: «Здравствуй, Петя!»
В 1 блоке находятся элементы и функции, их называют компоненты, которые мы можем использовать. Для этого нужно необходимый элемент перетащить в рабочую зону. Компоненты делятся на встроенные и интегрированные.
Теперь перейдем непосредственно к созданию инструкции (программы). Мы это делаем составлением разных блоков в единую картину — это очень похоже на сборку пазла.
1 элементом для нашей программы будет срабатывание события — нажатие кнопки.
Для этого выбираем компонент «Кнопка 1» и выбираем функцию «Когда Кнопка1.Щелчок» и переносим ее на середину рабочей зоны.
2 элементом для нашей программы будет элемент присваивание значений компоненту «Надпись1».
Для этого выбираем компонент «Надпись1» и выбираем функцию «Присвоить Надпись1.ЦветФона». Переносим и присоединяем к функции кнопки. Если мы сделали все правильно, прозвучит звуковой сигнал, похожий на щелчок. Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.
3 элементом нашей программы будет встроенный объект «Текст». Выбираем компонент «соединить». Этот элемент позволяет склеить текстовые фрагменты в единый текст. Этот элемент необходимо соединить с элементом «Присвоить Надпись1.Текст».
4 элемент — это текстовое поле. Изначально оно пустое. В данном блоке элементов мы пропишем статическую приветственную информацию. Для этого во встречных компонентах выбираем «Текст», далее выбираем компонент, прикрепляем к первому ярусу элемента «соединить». В этом блоке напишем наше приветствие: «Привет».
5 элемент. Нам необходимо соединить с приветствием имя, введенное в текстовое поле оператором. Для этого выберем объект «Текст1», выбираем элемент «Текст1.ЦветФона» и соединяем с блоком «соединить». Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.
Наша программа готова.
5 шаг: Тестирование приложения
Чтобы закачать нашу программу на мобильное устройство, у App Invertor есть несколько вариантов.
Мы воспользуемся самым простым.
Чтобы закачать приложение, его нужно скомпилировать в APK-файл. И этот установочный файл перенести на мобильное устройство.
В верхнем меню мы выберем раздел «Построить», в подпункте выбираем «Приложение (Создать QR-код для скачивания. apk)». Программа сама скомпилирует программу и создаст QR-код. Если мы считаем этот код, наша программа автоматически скачается на мобильное устройство. Важное замечание: QR-код действителен 2 часа.
Поздравляем! Вы создали свое первое мобильное приложение!
App Inventor — создание Android-приложений для каждого: Урок 1
Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.
App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.
Приступаем к работе
Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.
Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:
Обзор процесса разработки
В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.
Окно конструктора
Создаем метку
Многоэкранное приложение на App Inventor
После первого урока, на котором было разработано простейшее приложение по включению вспышки камеры смартфона детям предстоит написать программу, где будут меняться отображаемые экраны. Второй урок посвящен изучению дизайнерских элементов Апп Инвентор и их свойств. Дети будут многократно делать одно и тоже действие для разных объектов. Программный код пока останется на элементарном уровне. Задача второго урока адаптировать школьников к среде разработки App Inventor. В этом поможет программирование многоэкранного приложения с простейшим функционалом. Такая разработка потребует от детей многократного повторения однотипных действий и изменения свойств объектов. Представим, что вместо мобильной версии сайта, предстоит разработать информационно-рекламное приложение в App Inventor с переходом на различные информационные экраны.
ОГЛАВЛЕНИЕ:
Первое многоуровневое приложение в Апп Инвентор 2
Возьмем за основу сайт компании занимающейся производством оборудования по обработки денег — Cassida и напишем информационное приложение. На первом экране мы отобразим логотип компании и сделаем небольшое меню, при нажатии на пункты которого будет открываться другой экран разрабатываемого в App Inventor приложения. Изображения для второго урока в Апп Инвентор можно скачать в архиве к уроку.
Пошаговая инструкция для первого экрана в разделе Дизайн:
Дизайнерские работы в App Inventor закончены и требуется написать программный код для размещенных элементов. Для этих действий надо перейти в раздел Блоки и последовательно выбирая каждый элемент собрать программу из визуальных частей. Искомый раздел находится в правом верхнем углу среды разработки App Inventor. Щелкаем на него и начинаем программировать!
Пишем программный код для проекта в App Inventor
Этот урок нацелен на многократное повторение детьми однотипных действий, поэтому и код приложения будет простым, понятным и требующим многократного написания. Очень часто школьники забывают, что помимо элементов управления требуется описать последовательность действий для самого экрана. Очень важно донести до детей этот момент! Поэтому первым делом мы щелкаем по компоненту Screen1 и смотрим, что появится в открывшемся списке.
Требуется написать код для одного события — нажатия кнопки Назад на смартфоне. Перетаскиваем выделенный на верхней фотографии элемент в белое поле редактирования кода. Заострите внимание детей на событии Инициализации (запуска) приложения! Обычно в приложениях пишется много кода для этого момента. Код будет состоять из двух блоков: щелчок по кнопки назад + закрыть приложение (блок находится в разделе Управления (слева на мониторе)):
Далее пишем код для открытия нужного следующего экрана приложения при нажатии определенной кнопки в меню главного экрана (фотография увеличивается и открывается в новой закладки при нажатии на нее):
В левой верхней части монитора ищем кнопку — Добавить Экран (показана на фотографии выше). Нажимаем на нее и создаем требуемое количество окон приложения. Далее возвращаемся на главный экран программы — Screen1. Порядок действий при построении визуальных блоков в App Inventor. Вначале щелкаете по объекту, в открывшемся меню выбираете действие при нажатии кнопки, далее перетаскиваете программный блок в область программирования. Переходите в раздел управление и находите в нем блок:
Объединяете оба блока. Далее переходите в раздел левого меню Текст добавляете к соединенным блокам компонент: 
Перетащив все в зону программирования и объединив как показано на экране пишите правильное название открывающихся экранов. Пример готового проекта можно посмотреть по ссылке — http://ai2.appinventor.mit.edu/?galleryId=6199244156960768
Зайдя внутрь проекта можно посмотреть настройки для других экранов, они будут аналогичны описанному выше материалу.
Ограничения по количеству окон в appinventor
Когда ты только начинаешь работать с программой, то даже не догадываешься, что есть определенные ограничения. В среде разработки App Inventor рекомендуется создавать не более 10 экранов.На английском языке с ограничением многоэкранного приложения можно ознакомить на официальном сайте. Для русскоязычной аудитории я сделаю краткую выжимку и перевод важных значений!
Разработчики блочного языка программирования обращают внимание на то, что при добавлении большого количества экранов потребуется большая мощность и поэтому они сделали предупредительное ограничение при попытке добавления 11 экрана:
Это вовсе не значит, что вы не можете добавить 15 экранов — можете. Но вы берете на себя риски,что при компилировании может что-то пойти не так. При высоком уровне нагрузки во время компиляции готового приложения будет автоматически остановлена. Соответственно разработчику или ученику потребуется уменьшить количество экранов в приложении и сделать еще одну попытку создания apk — файла.
В качестве альтернативы создатели среды appinventor предлагают использовать настройки видимости и менять информацию на экране за счет программирования этого атрибута. С точки зрения обучения детей программированию — это абсолютно верный подход. Такое ограничение позволяет включить фантазию и простимулирует изучение программирования атрибутов для элементов на форме.
Код для программирования виртуального экрана в Апп Инвентор
Первым делом выбираем кнопку, по которой будет нажимать пользователь для перехода в новый экран приложения. Далее находим для каждого элемента обработку атрибута видимость (показано на рисунке ниже в правой части). Перетаскиваем эти значения внутрь блока и присваиваем атрибуту параметр истина или ложь. Причем: истина — объект будет виден на экране, ложь — объект исчезнет с экрана. Не забываем добавить кнопку НАЗАД для полного возврата значений отображаемых элементов при первичном переходе на экран (нажми на фотографию программного кода, чтобы рассмотреть подробнее).
Обмен данными между экранами App Inventor
Обмен данными между экранами в приложениях Android — это стандартная рутинная операция, поэтому ее надо обязательно рассмотреть в теме посвященной многоэкранным приложениям App Inventor. Обычно программируется передача нескольких параметров, но для начала рассмотрим простой код для передачи на открывающийся экран всего одного значения.
ПЕРЕДАЧА ОДНОГО ЗНАЧЕНИЯ В СЛЕДУЮЩИЙ ЭКРАН
Последовательность действий и описание всех процессов отображается на картинке ниже. Но на всякий случай я сделаю небольшое описание после размещенной фото — инструкции по переносу значения с экрана на экран в программе appinventor (для увеличения описания блок — кода нажми на фото инструкцию):
После этого переходим на второй экран приложения, тот куда нам требуется перенести информацию. На нем нужно указать в какое поле и какое значение следует подставить. Так как происходит перенос всего одного параметра, то код будет довольно простым (фотография увеличивается и открывается в новой закладки при нажатии на нее):
ПЕРЕДАЧА НЕСКОЛЬКИХ ЗНАЧЕНИЙ НА НОВЫЙ ЭКРАН
Зачастую обмен данными между экранами осуществляется по нескольким значениям. Можно использовать базу данных для приложения, но есть и еще один легкий способ запрограммировать задуманную процедуру. Для этого выбираем какое действие и какого элемента будет отвечать за передачу данных. В моем случае — это щелчок по кнопке, но может быть и переход на новый экран, и нажатие кнопки на смартфоне. Вот как будет смотреться блочный код app inventor (щелки на изображение для увеличения):
Программно блочный код на втором экране приложения прост и описан на следующей фотографии (для увеличения нажмите на фото):
Обратите ВНИМАНИЕ, что на второй экран информация попадает в момент запуска этого экрана, а вовсе не по нажатию кнопки! Программный код для обмена данными между экранами можно прикрепить к любому действию в многоэкранном приложении.
ПОЛУЧЕНИЕ ИНФОРМАЦИИ С ПЕРВОГО ЭКРАНА НАХОДЯСЬ НА ВТОРОМ
Опишу нештатную процедуру для Апп Инвентор, которая вполне работает и которая не описана в мануале на английском языку. Для написания такого программного кода придется использовать базу данных. В нашем случае — это TinyDB. Краткое описание на фотографии ниже (открывается в отдельном окне и увеличивается при нажатии на нее):
На первом экране соберем программные блоки в следующем порядке (подробнее при нажатии на фото инструкцию):
А теперь разберем подробнее:
(в стадии наполнения, извините за неудобства)
Полезные ссылки по appinventor:
Дополнительные уроки по Апп Инвентор 2: