KKN UNY 2021 - Tutorial Membuat Aplikasi Ebook Menggunakan MIT App Inventor

Summary

The video guide walks viewers through the process of creating a simple interactive app using MIT App Inventor. It starts by designing the first screen, where a title and image are uploaded, followed by setting up a button to navigate to the second screen. The second screen showcases images in a scrollable layout and includes a button to return to the first screen. The tutorial explains each step, such as adjusting image sizes and button placements, and concludes with saving and installing the app on a mobile device, demonstrating its functionality.

Takeaways

• 😀 Start by logging into the IDCP Inventor website and creating a new project.
• 😀 The first task is to design the initial screen for the project, which will be tested in Makkah.
• 😀 Add images by uploading files and ensure they are properly displayed on the screen.
• 😀 Use a label to create a title on the first screen, such as 'Dongeng Binatang'.
• 😀 Customize the title by adjusting the font size and other settings to make it stand out.
• 😀 Add a second label on the screen to display 'Disusun oleh...' and adjust the appearance.
• 😀 Create a button on the first screen to navigate to the second screen with the text 'Baca'.
• 😀 Adjust the button's position and font size for better visual appeal.
• 😀 On the second screen, set up a horizontal scrollable layout to display multiple images.
• 😀 Upload a series of images and adjust their size to fit the screen layout (100% width and height).
• 😀 Add a 'Back' button on the second screen to navigate back to the first screen.
• 😀 Save and download the project, then install the app on a phone to test its functionality.

Q & A

What is the first step in creating the project?

The first step is logging into the mIDCP Inventor website and starting a new project.

How is the first screen designed in the app?

The first screen is designed by uploading an image and adding labels, such as a title and author information. The labels are customized in terms of size and font.

What functionality does the first button on screen 1 provide?

The first button on screen 1, labeled 'Baca', navigates the user to screen 2 when clicked.

How is the layout of screen 2 different from screen 1?

Screen 2 uses horizontal and vertical scrollable layouts to display images, with a design that allows scrolling up and down.

How are the images added to screen 2?

Images are added to screen 2 by uploading files from a folder. The images are then displayed in horizontal layouts, and their sizes are adjusted to fill the screen.

How are the images on screen 2 adjusted?

The images are resized to 100% of their height and width to make them fill the screen.

What is the purpose of the 'Kembali' button on screen 2?

The 'Kembali' button on screen 2 allows the user to return to screen 1 when clicked.

What is the final step before the app can be installed on a phone?

The final step is saving the project and downloading the APK file. The app is then installed on the phone.

How is the app tested after installation?

Once the app is installed, it is tested by clicking on the 'Baca' button to navigate to screen 2, and the 'Kembali' button to return to screen 1.

How is the size and position of elements like labels and buttons managed?

The size and position of labels and buttons are customized by adjusting properties such as font size, width, and alignment, ensuring that elements are properly aligned on the screen.