Завдання з кодування 1: Створити слайд-шоу

Створити Slideshow

Завдання : Створити додаток, який дозволяє користувачу клікати по slideshow ваших улюблених картинок!

Завантажте наш навчальний додаток на Google Play store тут. Під час цього завдання ви навчитесь, як змінювати екрани в додатку, завантажувати власні картинки. Якщо у вас виникнуть труднощі, нижче будуть вказані шляхи їх вирішення. Спробуйте разом з командою спершу їх вирішити, або порадьтесь з ментором перед тим, як читати наші поради!

Дизайн вашого екрану

Пояснення: Для цього додатку ви створюєте slideshow, надаючи можливість користувачу здійснювати навігацію серед картин. Коли ви робите дизайн екрану, вам потрібно не картинки, а й кнопки “попередні”, “наступний” для користувача.

  1. Додайте картинки до вашого екрану.
    • Адаптуйте їх до розширення вашого екрану, поредагувавши ширину та висоту!
    • Ми вирішили зробити зображення “fill parent”. При виборі “fill parent” ви кажете, щоб зображення заповнило весь простір. Image1 знаходиться всередині екрану, а кнопки – всередині контейнера горизонтально. Ви можете побачити, що знаходиться всередині інших речей, як вони перераховані в меню компонентів.
  2. Додайте горизонтальне меню на екрані внизу зображення.
  3. Додайте дві кнопки на меню.
    • Натисніть на кнопку в меню компонентів
      • Відредагуйте текст і зробіть кнопки “попередній” і “наступний”.
      • Вам також потрібно змінити назви кнопок, натиснувги на “rename” під компонентами.
  4. Завантажте картинку, яку ви хочете використовувати для slide show!
  5. Оберіть картинку, яка буде першою з’являтись на екрані вашого slide show.
    • Натисніть на “Image1” в “Components” меню і потім “Picture” у властивостях меню. Ви потім можете обирати картинку, яку завантажили.
  6. Додайте як мінімум два екрани. Для нашого slideshow ми використовуємо три екрани, але ви можете додати стільки, скільки хочете.
    • Поки вам не потрібно нічого робити з цими екранами, але після того, як ви запрограмуєте блоки, ви будете додавати кнопки і зображення до них так само, як ви зробили для цього екрану.

designer

Програмування блоків

Пояснення: Після того, як ви налаштували екран, вам потрібно щоб він щось робив. Коли користувач натискає на кнопки, ви хочете, щоб ваш додаток відкрив інший екран, який має інше зображення. Для цього ви будете використовувати обробку подій натискання кнопок.

  1. Натисніть на кнопку, яку ви назвали ‘попередній’, щоб побачити всі обробки подій, які можна використовувати. Візьміть when button.click обробка подій і перетягніть її в робочу область.
  2. Натисніть на “control” і знайдіть блок open another screen screenName.
  3. Перейдіть на пусте текстове поле і натисніть на нього в блоці open another screen screenName. Введіть ім’я останнього екрану, який буде знаходитися в слайд-шоу. Для нас це було SCREEN3.
  4. Натисніть на наступну кнопку і візьміть обробник події when button.click.
  5. Візьміть ще один блок open another screen screenName з системи управління.
  6. Візьміть порожній текстовий блок і введіть в наступному вікні, яке з’явиться в слайд-шоу. (Для нас це було Screen2.)

blocks

Перевірка!

Перш ніж рухатися далі, давайте переконаємось, що код, який ви тільки що створили, працює. Це хороша звичка перевіряти біти коду, перш ніж писати повністю додаток, щоб переконатися, що він працює. В іншому випадку ви можете зробити всі програми, які мають багато функцій, але не працюють (буває важко з’ясувати, чому це не працює)!

Під’єднайте App Inventor з телефоном, планшетом чи емулятором. Чи працюють кнопки, як ви очікуєте? Наші кнопки працювали: “попередній” привів нас до порожньої SCREEN3 і “наступний” привів нас до порожньої screen2. Якщо кнопки не працюють так, як ви очікуєте, спробуйте повернутись на крок назад і переконатись, що код правильно прописаний.

Підказка: Тому що немає нічого на Screen 2 або Screen 3 екран, ми все ж повернулися на Screen 1, переміщуючись назад до нього за допомогою App Inventor на нашому комп’ютері. App Inventor дозволяє переміщатися по різних екранам на вашому підключеному телефоні або емуляторі за допомогою комп’ютера. Це буде хороша можливість для тестування.

Завершення вашого додатку

Пояснення: Після того, як ви успішно створили один екран і запрограмували його, ви можете кодувати інші екрани! Ви можете додати більше екранів, якщо ви хочете, щоб в слайд-шоу було більше зображень, але переконайтеся, що у вас завжди є принаймні три. На діаграмах нижче зображено, навіщо це потрібно.

  1. Повторіть кроки 1-12 для кожного екрану вашого slideshow. Переконайтесь, що кнопка “наступний” (next) завжди веде до наступного екрану, а “попередній” (previous) – повертає до попереднього екрану.


3screen-diagram
4screen-diagram

Фінальна перевірка!

Переконайтесь, що ваш додаток працює. Випрбуйте кожну “Next” і кожну “Previous” кнопку. Чи вони ведуть на новий екран? Якщо ні – перевірте правильність написання назв ваших екранів.

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

Застрягли? Не забудьте завантажили наш додаток-приклад з google play store, щоб побачити, як він працює.

Тут інструкції щодо того, як завантажили і використати наші коди (англ).


скачати вихідний код