- Welcome to App Inventor!
- App Inventor Designer
- App Inventor Blocks Editor
- Integrate Android Phone
- Using the Emulator
- Start-Up Problems
This chapter is from the book
This chapter is from the book
This chapter is from the book
Integrate Android Phone
In addition to the AI Designer and the AI Blocks Editor, your Android smartphone forms the third area of your development environment. As described in the section on AI Designer, the Viewer panel provides only an approximate representation of the user interface of the Android app you are developing. To see how the app will really appear on your smartphone, you can integrate this device into the AI development environment. Each change in the visible components can then be immediately checked in the real Android environment of your smartphone. In addition, you can test and make immediate use of the functions modeled in the block structures behind the input and output components under real conditions and, if necessary, by using the existing smartphone hardware, such as sensors. Integrating the smartphone into your development environment clearly offers an invaluable advantage over working with the emulator, where a large part of the real operating conditions must be simulated with not-always-perfect fidelity. Of course, testing the app on your own smartphone does not yet give any reliable indication of how the app will appear and behave on other Android devices, but testing on multiple Android platforms is considered part of the advanced app development process.
To integrate the smartphone into the AI development environment, the device be physically connected to your development computer. If you have not already done so, please connect the smartphone to your computer via the USB cable supplied while you have the AI Designer and Blocks Editor open. We assume that you successfully adjusted and checked the settings as described in Chapter 1—for example, ensuring that your smartphone is correctly connected to the computer in debugging mode. Make sure your setup is correct before you continue, to rule out problems arising from incorrect smartphone settings right from the start. Unlock the display so you can follow the processes on your smartphone.
Connecting the Smartphone to Blocks Editor
If the smartphone is properly connected to the computer with a USB cable and all the settings are correct, you can now connect the phone to the AI development environment by clicking on the connect button (“Connect to Device”) in the AI Blocks Editor; this button is found in the green function bar to the left of the smartphone icon with the question mark in the display. Clicking it opens a pop-up menu showing your smartphone with its specific device identifier (see Figure 2.26 at the back). If you have connected several smartphones via USB, all connected devices are shown here if they are detected correctly. When you select one of the smartphones by clicking on it, the button text changes to “Connect to Device”; a pulsating yellow arrow, pointing at the smartphone icon, indicates that a connection is being established between the AI Blocks Editor and your smartphone (see Figure 2.26 at the front). If another smartphone was previously actively connected, you will first be asked if you want to end the connection to the previous device and connect to the new device.
){kind=link}
)
Figure 2.26. Establishing a connection between AI Blocks Editor and an Android smartphone
After some period of time, the connection is established and the display on your smartphone changes to confirm the connection (see Figure 2.27). The start screen appears, which you will recognize from when you first started the AI Designer in the Viewer panel (see Figure 2.6). Below the smartphone’s status bar containing the icons for signal strength, battery charge, and time (here, these values are real), you can see the original app title of the starting component “Screen1”; below it is the app window with the default background color set to white. A message in the bottom part of the app window says “Listening to App Inventor ...” to inform you that the connection or loading process is not yet finished.
){kind=link}
){kind=link}
Figure 2.27. Intermediary status message on the smartphone while a connection is being established
After the basic connection between the AI Blocks Editor and your smartphone is established and the start screen described above appears on the cellphone screen, any components and blocks you may have added in the AI Designer and Blocks Editor, together with their settings, are automatically loaded and displayed, provided they are visible objects. Depending on the number of components and block structures, this loading process may take a while before the current status of your active app appears on the smartphone screen (see Figure 2.28).
){kind=link}
Figure 2.28. Displaying the current app development stage on the smartphone
Up to now, we have not added any components and blocks to our example app. In fact, we have changed only two of the properties of the obligatory starting component “Screen1” in this chapter (see Figure 2.10): the BackgroundColor from white to blue and the app Title from “Screen1” to “Hello Android World!” Precisely these changes are now visible on the smartphone screen as well, as shown in Figure 2.28. The phone screen is now practically identical to the representation in the AI Designer’s Viewer panel (see Figure 2.29).
){kind=link}
){kind=link}
)
Figure 2.29. Displaying the connection status in AI Blocks Editor
Restart in Case of “Freezes”
The AI Blocks Editor now confirms that a connection to the smartphone has successfully been created by changing the symbol next to the smartphone icon in the green function menu from a question mark to a static green arrow (see Figure 2.29). The connect button now still has the label “Connect to Device.” If you reselect the same smartphone from the drop-down menu, however, the window “Please choose” appears. In this window, you can restart the existing connection to the smartphone by choosing “Yes” (restart). Thus it is possible to force reloading of the currently active app on the smartphone. This step is necessary if, for example, the connection freezes and the changes are not automatically displayed on the smartphone screen.
If the connection between the smartphone and the computer should be disrupted while you are developing your app—for example, because you disconnected the USB cable—it is not a problem. Simply use the connect button and the drop-down menu to reconnect your phone.
Finishing a Session
Suppose you need to interrupt your development for a while. In that case, you have several options for terminating the connection between your smartphone and the AI Blocks Editor. You can press the Android operating system’s menu key on your smartphone to show the option “Stop this application”; you can then confirm this choice with a finger touch. You also have to confirm the following security check by selecting “Stop and exit” (see Figure 2.30).
){kind=link}
)
Figure 2.30. Stopping the app
Alternatively, you can simply disconnect the USB cable to safely terminate the connection between the smartphone and AI Blocks Editor. The app will be closed properly on your smartphone and can be started anew once the USB connection is restored. If you now want to stop your development work, you can simply close the Web Start application AI Blocks Editor. The button in AI Designer then changes its text back to “Open the Blocks Editor.” If you want to exit AI Designer, you should click the link “Log out” at the upper-right corner of the screen, next to your login name. That way you can be sure that your project is properly closed and saved. If you are in a hurry, simply log out here even if the AI Blocks Editor is still open and connected to the smartphone and the app itself is still active on your cellphone. Both the app and the Blocks Editor are then closed automatically before AI Designer logs off, closes, and returns to the start page, ready for your next session.
With the integration of your smartphone into the Blocks Editor and Designer interfaces, you have become familiar with the AI development environment and gained a first impression of your future work as app developer. Even if the AI project “HelloAndroidWorld” is not yet a proper app, you now know the path that your app project will take—from the initial creation in AI Designer to the processes of adding components, changing properties, adding blocks in the AI Blocks Editor, integrating the smartphone, and finally viewing the app project on the smartphone. Armed with this information, you are well prepared to begin developing your first fully functioning and independent Android app for your smartphone.