Проект "Мой виртуальный питомец"

Цель: Создать простое приложение с виртуальным питомцем, используя несколько экранов.

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

Чему ты научишься:

  • Создавать многоэкранные приложения
  • Переключаться между экранами
  • Работать с изображениями
1
Подготовка ресурсов
2
Создание главного экрана
3
Создание дополнительных экранов
4
Программирование и тестирование

Шаг 1: Подготовка ресурсов

  • Откройте MIT App Inventor и создайте новый проект с названием "VirtualPet".
    • Создать приложение
  • Для этого проекта нам понадобятся следующие ресурсы:
    1. Изображение питомца в обычном состоянии - основное изображение для главного экрана
    2. Изображение питомца во время еды - для экрана кормления
    3. Изображение спящего питомца - для экрана сна
  • Скачайте необходимые ресурсы из нашего центра загрузок в разделе "Ресурсы и материалы".
    1. Найдите и скачайте ZIP-архив "pet_resources.zip", в котором содержатся все необходимые файлы для проекта
    2. Распакуйте архив - внутри вы найдёте файлы изображений: "pet_happy.png", "pet_eating.png" и "pet_sleeping.png"
    3. Теперь эти файлы готовы для загрузки в ваш проект MIT App Inventor
  • Загрузите скачанные файлы в ваш проект MIT App Inventor:
    1. В правой панели "Media" (Медиа) нажмите кнопку "Upload File..." (Загрузить файл...)
    2. Выберите и загрузите сначала файл "pet_happy.png"
    3. Повторите процесс для файлов "pet_eating.png" и "pet_sleeping.png"
    • Загрузка изображений
  • После загрузки вы увидите все файлы в списке медиа-ресурсов вашего проекта.
Совет: Если у вас нет возможности скачать ресурсы, вы можете использовать любые подходящие изображения питомца. Выбирайте изображения с прозрачным фоном (PNG), чтобы питомец выглядел аккуратно на любом фоне экрана.
Важно: Убедитесь, что имена загруженных файлов совпадают с именами, которые будут использоваться в проекте (pet_happy.png, pet_eating.png и pet_sleeping.png). Если имена файлов отличаются, вам нужно будет соответствующим образом изменить их при настройке компонентов.

Шаг 2: Создание главного экрана

  • Настройте первый экран приложения:
    1. В разделе Properties найдите свойство BackgroundColor экрана и выберите светлый цвет (например, светло-голубой).
    2. В разделе Properties найдите свойство Title и установите его значение в "Мой виртуальный питомец".
  • Создайте заголовок приложения:
    1. Из палитры User Interface перетащите компонент Label в верхнюю часть экрана.
    2. Настройте свойства:
      • Text: "Мой питомец"
      • FontSize: 24
      • FontBold: True
      • TextAlignment: Center
      • Width: Fill parent
    • Добавление заголовка приложения
  • Добавьте изображение питомца:
    1. Из палитры User Interface перетащите компонент Image под заголовок.
    2. Настройте свойства:
      • Picture: выберите загруженное изображение "pet_happy.png"
      • Width: 200 пикселей
      • Height: 200 пикселей
    • Добавление изображения питомца
  • Добавьте кнопки для действий:
    1. Из палитры Layout перетащите компонент VerticalArrangement под изображение.
      2. Добавление VerticalArrangement
    2. Настройте свойства:
      • Width: Fill parent
      • AlignHorizontal: Center
    3. Внутри VerticalArrangement добавьте две кнопки:
      Первая кнопка:
      • Text: "Покормить"
      • BackgroundColor: Оранжевый
      • FontBold: True
      • Width: 150 пикселей


      Вторая кнопка:
      • Text: "Уложить спать"
      • BackgroundColor: Синий
      • FontBold: True
      • Width: 150 пикселей
    • Главный экран с кнопками
Совет: Чтобы сделать интерфейс более аккуратным, добавьте пространство между элементами. Для этого между компонентами можно добавить пустые компоненты Label с небольшой высотой или настроить отступы в свойстве Margin.

Шаг 3: Создание дополнительных экранов

  • Создание экрана кормления:
    1. В верхнем меню выберите Add Screen... и создайте новый экран с названием "FeedScreen".
      2. Добавление экрана кормления
    2. В разделе Properties найдите свойство Title и установите его значение в "Кормление питомца".
    3. В разделе Properties найдите свойство BackgroundColor и выберите светло-оранжевый цвет.
  • Настройте экран кормления:
    1. Добавьте заголовок:
      • Из палитры User Interface перетащите компонент Label
      • Text: "Покормить питомца"
      • FontSize: 24
      • FontBold: True
      • TextAlignment: Center
      • Width: Fill parent
      2. Добавление заголовка экрана кормления
    2. Добавьте изображение питомца, который ест:
      • Добавьте компонент Image под заголовок
      • Picture: выберите загруженное изображение "pet_eating.png"
      • Width: 200 пикселей
      • Height: 200 пикселей
      3. Добавление изображения питомца
  • Добавьте варианты еды (для визуального оформления):
    1. Из палитры Layout перетащите компонент HorizontalArrangement под изображение.
      2. Добавление HorizontalArrangement
    2. Настройте свойства:
      • Width: Fill parent
      • AlignHorizontal: Center
    3. Внутри HorizontalArrangement добавьте три кнопки с названиями разных типов еды (например, "Морковка 🥕", "Яблоко 🍎", "Лакомство 🍪").
    • Экран кормления с кнопками еды
  • Добавьте кнопку возврата на главный экран:
    1. Из палитры User Interface перетащите компонент Button в нижнюю часть экрана.
      2. Добавление кнопки возврата
    2. Настройте свойства:
      • Text: "Вернуться к питомцу"
      • FontBold: True
      • Width: Fill parent
  • Создание экрана сна:
    1. В верхнем меню выберите Add Screen... и создайте новый экран с названием "SleepScreen".
      2. Добавление экрана сна
    2. В разделе Properties найдите свойство Title и установите его значение в "Сон питомца".
    3. В разделе Properties найдите свойство BackgroundColor и выберите тёмно-синий цвет, чтобы создать эффект ночи.
  • Настройте экран сна:
    1. Добавьте заголовок:
      • Из палитры User Interface перетащите компонент Label
      • Text: "Питомец спит"
      • FontSize: 24
      • FontBold: True
      • TextAlignment: Center
      • Width: Fill parent
      • TextColor: White (чтобы текст был виден на тёмном фоне)
      2. Добавление заголовка экрана сна
    2. Добавьте изображение спящего питомца:
      • Добавьте компонент Image под заголовок
      • Picture: выберите загруженное изображение "pet_sleeping.png"
      • Width: 200 пикселей
      • Height: 200 пикселей
      3. Добавление изображения спящего питомца
    3. Добавьте декоративный элемент:
      • Из палитры User Interface перетащите компонент Label
      • Text: "💤 Zzzz... 💤"
      • FontSize: 20
      • TextAlignment: Right
      • Width: Fill parent
      • TextColor: White
    • Экран сна питомца
  • Добавьте кнопку возврата на главный экран:
    1. Из палитры User Interface перетащите компонент Button в нижнюю часть экрана.
    2. Настройте свойства:
      • Text: "Вернуться к питомцу"
      • FontBold: True
      • Width: Fill parent
    3. Добавление кнопки возврата на экран сна
Важно: Не забудьте добавить кнопки возврата на главный экран на обоих дополнительных экранах. Без них пользователь не сможет вернуться к своему питомцу!

Шаг 4: Программирование и тестирование

  • Переключитесь на вкладку Blocks (Блоки):
    Нажмите на кнопку "Blocks" в правом верхнем углу экрана.
    • Переход на вкладку Blocks
  • Программирование кнопки "Покормить":
    1. Перейдите к экрану Screen1 (в выпадающем списке экранов).
    2. В списке компонентов найдите Button1.
    3. Добавьте блок when Button1.Click do
    4. Внутри этого блока добавьте блок open another screen screenName (из раздела Управление)
    5. В качестве параметра screenName укажите "FeedScreen"
    • Программирование кнопки Покормить
  • Программирование кнопки "Уложить спать":
    1. В списке компонентов Screen1 найдите Button2.
    2. Добавьте блок when Button2.Click do
    3. Внутри этого блока добавьте блок open another screen screenName
    4. В качестве параметра screenName укажите "SleepScreen"
    • Программирование кнопки Уложить спать
  • Программирование кнопки возврата с экрана кормления:
    1. Выберите экран FeedScreen в выпадающем списке.
    2. В списке компонентов найдите Button4.
    3. Добавьте блок when Button4.Click do
    4. Внутри этого блока добавьте блок open another screen screenName с параметром "Screen1"
    • Программирование кнопки возврата
  • Программирование кнопки возврата с экрана сна:
    1. Выберите экран SleepScreen в выпадающем списке.
    2. В списке компонентов найдите Button1.
    3. Добавьте блок when Button1.Click do
    4. Внутри этого блока добавьте блок open another screen screenName с параметром "Screen1"
    • Протестируйте ваше приложение:
      Чтобы увидеть ваше приложение в действии, воспользуйтесь руководством по тестированию приложений в нашем введении в MIT App Inventor.
      • Тестирование приложения
  • Проверьте работу приложения:
    1. Убедитесь, что все три экрана отображаются корректно
    2. Проверьте, что кнопка "Покормить" открывает экран кормления
    3. Проверьте, что кнопка "Уложить спать" открывает экран сна
    4. Проверьте, что кнопки "Вернуться к питомцу" на обоих дополнительных экранах корректно возвращают на главный экран
Поздравляем! Вы успешно создали приложение "Мой виртуальный питомец" с несколькими экранами! Теперь вы знаете основы создания многоэкранных приложений в MIT App Inventor.
Идеи для улучшения: Вы можете расширить функциональность вашего приложения:
  • Добавить звуковые эффекты при переходе между экранами
  • Добавить анимацию питомца с помощью нескольких изображений
  • Создать экран с играми для питомца
  • Добавить возможность выбирать разных питомцев

Скачать проект

Если у вас возникли сложности, вы можете скачать готовый файл проекта в нашем центре загрузок:

Перейти в центр загрузок