Deleting app data from Android 313 Storing data online with TinyWebDB. You will learn step-by-step according to the sequential structure of the book's chapters, the topics and functional areas covered, and the examples of projects we develop, which usually build on the knowledge gained in previous chapters.
Preparing Your First App
These parts are not so much devoted to different topics, but rather reflect the intended progression of the reader from the beginner working with App Inventor for the first time to the developer of advanced and complex apps – which we certainly hope will happen as you read this book and work through the chapters. This structure emphasizes the tutorial nature of this text; therefore we recommend reading and working through the chapters in order.
Easy Projects as a Warm-Up
If you take a quick look at the table of contents, you'll see that this book is divided into five parts. Even if you have prior knowledge and experience with App Inventor, you should at least skim through the first few chapters to ensure you have the knowledge base that is essential to understanding the topics covered in later chapters.
On the Way to Becoming an App Developer
Developing Attractive Apps
First you will be asked to integrate a module for speed dial telephone calls under an ergonomic multi-screen interface. With an e-mail module you can inform potential passengers about your current location and the time you will pick them up.
Useful Things for the Developer
Once access was finally granted (see Figure I.2), a new phase of intensive testing of the development environment, functions and capacity of App Inventor began. In this chapter, you will get a chance to develop your first own Android application with App Inventor.
Inserting the “Label” Component
We will place the label in the Viewer first, although we can move the components at a later stage if necessary. Grab a label in the palette by clicking on the name or icon of the "Label" component, then hold down the mouse button and drag the label into the viewer. If you drop the label in the Viewer by releasing the mouse button, the label automatically moves just below the title bar.
Assigning Component Names
Setting Properties
You can also choose whether the label or the text it contains should be "Visible". Finally, the label also has a text field ("Text"), where you can enter the actual label text. Here you need to replace the default text "Text for Label1" with our message "Please print the bag!" If you check the new message in the Viewer or on the smartphone, it won't look very spectacular yet.
Adding the Interactive Component “Button”
The button receives a user action (an event), such as the touch of the button, and the application processes the event and reacts with a result (laughter). Again, you can see the default setting for the Button component as you drag - namely, a button with the text "Text for Button1". While dragging the button in the Viewer, the screen area also shows a narrow blue horizontal bar (see Figure 3.7, below the label). For our app, you need to drag the component below the label to place the button below it.
Uploading and Integrating Media Files
Click Laugh Button Properties in the "Image" box to open the picklist shown in Figure 3.9. The name of the image file now assigned to the button is shown in the LaughButton properties in the "Image" field. The image file laughbag.jpg is still available for general use in the current LaughBag project, as indicated by the appropriate list item in the Media panel.
Optimizing the App Design
For example, if you decide to assign the same image file to another button, the image file appears in the "Images" dropdown list. Select it and change the Width property to “Fill parent”. Since the bottom image has a smaller width than the now increased screen width button in the viewer and on the smartphone, the image plus tag is automatically centered on the screen thanks to the default "center" alignment setting. Unfortunately, with many different computer systems and Android smartphones, it sometimes happens that the image is displayed only in the viewer, or only on the smartphone, or not at all.
Non-Visible Component “Sound”
Now you will access the functions of these objects (component-specific blocks) in the AI Blocks Editor and use them to design some or all of the application's functionality (block structure). If you have not yet started the Blocks Editor, please do so now by clicking on the button labeled “Open Blocks Editor” in the AI Designer. Now you can see the components with their component names that you dragged to the viewer and renamed with a memorable name in the AI designer (see Figure 3.14).
Create Interactive App Logic
By connecting these two blocks, you have sufficiently described the functionality of the LaughBag app. You don't have to write a program routine where you monitor the touch screen area of the graphical button for touches and then combine this event with the audio player. You will later see for yourself what is already possible with AI, even if this is only the 'tip of the iceberg'.
Implementing Functional Block Structure
Conversely, if you have a specific requirement that cannot be implemented with even a creative use of the AI components, then you will have to accept the need to put in more effort and become familiar with Java programming. Open the box selection of "Laughter" and find the right box—to make the search easier, you can use the scroll bar on the right side of the selection menu to scroll up and down the selection. You can "temporarily" drop the Lag function block. Play anywhere in the Editor and later drag it somewhere else or connect it directly to the instruction block LagButton. Click to form the desired block structure.
Save Project Locally
You can find all project files from this book on the companion website in the /PROJECT directory (see the link in the Introduction). If you want to edit the project later under a different account, you can upload it to the respective provider's server. LaughBag.zip in your File Manager and view the contents of the project archive.
If There Is No Laughter
Click the "Connect to Device" button in the AI Blocks Editor with your smartphone connected and try the app again. Restart your smartphone by turning it off completely (not just going to standby) and then restarting it. The next few sections will show you how to download the LaughBag project to your smartphone as a standalone app.
Direct Installation on a Smart phone
Before you can now search for the application on your smartphone, you must first close the still active AI development environment or display of the application project on your smartphone. Now you can go to the app overview of your smartphone and search for the app titled "LaughBag". Figure 3.27 shows an example of the application on the LG P500 smartphone, where we used the manufacturer-specific option to place our LaughBag application in a separate category "AI Applications" (which will hold our future AI projects). , just to make things clearer. If you now select the “LaughBag” app, it will launch just like any other app on your smartphone.
A Matching Icon for Your App
In the first step we selected the outline of the bag with the "Magic Wand" and colored the background green with a. In the uninstall dialog shown in Figure 3.31, the file size shown for our LaughBag application is an impressive 4.10 MB. In addition to the application icon in the application overview (Application menu), you can create a widget (switch icon) directly on the home screen or the other panels for it.
Online Installation via a Barcode
If you have met the requirements for a mobile internet connection and have a barcode reader installed on your smartphone, you can begin the online installation of the LaughBag app. Once you successfully log in, the LaughBag app will start downloading to your smartphone. The progress of the download is indicated by the corresponding download icon in the status bar of the smartphone.
Downloading an APK File
Now your smartphone—or, more correctly, its SD card—should appear as a separate drive in the file manager. Once you have copied the file LaughBag.apk to the SD card of your smartphone, you can disconnect the smartphone from the computer. But how can you find the file LaughBag.apk, which you copied with the file manager to the /downloads directory on your smartphone's SD card.
Google Play and other Android Markets
To keep Google Play attractive to consumers as well as developers, Google is trying to limit the proliferation of apps. Against this background, it should come as no surprise to discover that for a long time, AI-powered apps were not officially intended or allowed to be distributed on Google Play. With these tools, you're supposed to still be able to sign AI-generated APK files relatively simply and convert them into compatible APK files, which you can then upload to Google Play with a valid registration.
Since the release of AI version 125 (see http://beta.appinventor.mit.edu/ . ReleaseNotes.html) on May 6, 2012, AI-generated apps can be uploaded to Google Play. The MIT AI documentation sites have a full description of how to port your AI apps and upload them to Google Play.
