The MIT App Inventor team accepted the Council’s Distinguished Leadership Award for working to make application development universally accessible.
Congratulations to the team! Well done! Well deserved!
All posts by coldstreams
Appy Builder: Using the BatteryStatus component #AppInventor #AppyBuilder #STEM #Programming
A reader asked if there is a way to determine the status of the Android device battery in MIT App Inventor. Unfortunately, App Inventor does not provide a way to check the battery status … but Appy Builder does!
To answer that question, our first Appy Builder app is a simple tutorial showing how to use the BatteryStatus component in Appy Builder.
User Interface
The output is displayed after pressing the Start button and shows that my phone’s battery is at 99% and was plugged in to the AC power charger.
In this screen shot, the phone was unplugged from the battery charger and the “plugged in” status has changed to UNKNOWN.
Designer View
I created this screen by adding a Button control, and then adding six HorizontalLayouts. Inside each layout, I dragged two Label controls, setting one to the descriptive text (such as “Battery level:” and the second to be used to display the status for that property).
Blocks View
The BatteryManager has several properties that describe aspects of the battery.
Before the properties may be used you must activate the BatteryManager by setting the .StartMonitoring property to true; this must be done separately as shown below. Errors occurred when I put that code inside the button’s .Click handler. Instead, I moved the StartMonitoring assignment to the Screen1.Initialize event handler and everything worked fine.
- BatteryLevel – the battery’s current level in percent
- BatteryTemperature – the temperature of the battery in degrees Celsius
- BatteryPresent – true (my phone does not permit me to remove the battery)
- BatteryPlugged – returns “AC” if the device is connected to a charger, or UNKNOWN if the device is not plugged in. This might also return “WIRELESS” if the device is currently using a wireless charger (based on Android BatteryManager API).
- BatteryVoltage – battery voltage. A typically value will be near 4 volts plus or minus for most phones.
- BatteryHealth – GOOD. I presume this returns a value corresponding to the Android BatteryManager API, which includes COLD, DEAD, GOOD, OVERHEAT, OVER_VOLTAGE, UNKNOWN and UNSPECIFIED_FAILURE.
Download Source
Right-click (or Ctrl-click on Mac OS X) and use your browser’s feature to save this file to your computer: BatteryStatus.aia
Then, use Projects | Import selected project (.aia) from my computer … to load the file into Appy Builder
What is Appy Builder? Why should App Inventor programmers be interested?
Appy Builder is an independent and enhanced version of MIT App Inventor that builds upon App Inventor by adding many new features.
For the most part, Appy Builder’s interface is nearly the same as that of MIT App Inventor. If you have been programming apps with App Inventor, switching over to Appy Builder is very easy.
More Features
Appy Builder is built upon the App Inventor base but expands by adding new features and components:
- Appy Builder adds components that enable you to earn money with your apps by adding paid advertising within your apps or by offering items for sale from within your apps
- Appy Builder adds enhanced data storage features including SQL Lite
- Access to more “sensor” controls on your Android device, including Battery Status information. Access to some WiFi connection information (Is WiFi currently connected?)
- More components and properties (the User Interface Palette in Appy Builder has 22 components while MIT App Inventor has 14)
- Many components have more features. For example, a Label in MIT App Inventor has six properties but in Appy Builder, a Label has 16 properties that you can set.
- Improved Google Mapping capabilities.
- You can control the use of the camera flash in Appy Builder but not in MIT App Inventor.
- Appy Builder has an online forum for asking questions, answering others’ questions
The above is only a general summary to give you an idea of the enhancements available at Appy Builder.
MIT App Inventor showed the world that programming can be made easier by using a graphical user interface programming model. Further, App Inventor demonstrated that remarkably powerful apps can be created using this simplified approach to programming.
Appy Builder takes the App Inventor ease of use model and extends that to add more capabilities. Clearly, drag and drop programming makes programming accessible to more people. Appy Builder is an important contribution to the continually improving and evolving world of app development.
How to Use Appy Builder?
Go to: http://appybuilder.com
And sign in for a free account or a paid account. Paid accounts offer more features and capabilities.
Try it out! In addition to the generic “Free” account, you can also get 30 days free access to their Gold account to learn about their more advanced features and decide if those features are right for you.
More Coming
I will be publishing tutorials on some Appy Builder features – I know that many readers are already looking for solutions that are provided by Appy Builder.
New web address Learn2c.org
To make accessing this web page easier, I created a new web address for my App Inventor “how to” web site:
The name is short for “Learn to Code”. A short URL makes it easy to visit the web site!
I duplicated the old web site at the new address and everything looks the same. The new web site is “live” now although I will still be posting here for a bit.
I will keep you updated on the switch over, perhaps later in the week. But go ahead – check out the new web site – it is up and running now!
By creating a new web site, the two older web sites will remain online. All links from Facebook, Twitter, Google+, Tumblr and personal pages will still work and point back to the original articles from when they were first posted.
MIT App Inventor “cheat sheet”
I prepared a PDF file that presents a quick look at all the App Inventor blocks. I posted this a long time ago but its still available and very useful! This can help you find specific blocks in the Blocks view editor.
Download: AppinventorCheatSheet.pdf
An App Inventor recommended way of handling multiple similar screens
MIT App Inventor supports apps having multiple screens, but due to the way that App Inventor is implemented, they recommend that apps have no more than 10 screens total – or risk running out of memory or seeing the Blocks editor crash or hang!
They have a page of information about this issue and you should look at that if you are writing an app with more than about 10 screens.
They suggest it may be possible to simulate multiple screens using just one extra screen, depending on the application. They provide hints as to how to do those hints may be insufficient for new App Inventor programmers.
A reader asked for help on this so I created this tutorial.
Since this app has two screens, this tutorial is split into two sections, one for each screen, and then a third section discussing optional modifications.
The basic app is called ManyScreens. The optional modifications are in ManyScreens2_Buttons (source code links at end of this post)
User View
This demonstration app features 4 buttons – the first button displays “Screen 1”, the second button displays “Screen 2” and so on. These buttons could have any label on them appropriate for your application, such as “Register Account”, “Reserve a space”, “Display reservations” or what ever make sense for your app.
Pressing Screen 1 displays this screen – note the label at the top and the photo on the page.
This screen appears when pressing Screen 3. Note that the text label references Screen 3.
The button Do Something! is a placeholder for adding code to do something unique for this screen. For this application all it does is close the screen and return to the main app screen, Screen1.
Continue reading An App Inventor recommended way of handling multiple similar screens
How to center an image on the screen using App Inventor
A reader asked, “How can I center an image on the screen in an App Inventor app?”
There is an easy way to do this and there is a more complicated method (using the Canvas and other graphics objects). In this tutorial, we show the easy way to center an image on screen!
Our app uses the camera to take a photo and then displays that photo on screen. A secondary feature of the app demonstrates how the “image object” in App Inventor is the filename where the image is stored. In this way, the “image object” can be stored in TinyDB – its not really the binary data representing the photo or image – it is, in fact, just the filename. (TinyDB only stores text).
User Interface View
To demonstrate image centering, we use the camera to take a photo (creating the image) and then a Show pictures button to display the image on screen.
When you press Take a picture, the app launches the Android camera app to take the photo. When done taking the photo, click on the “check mark” (as it appears on my Android 7 phone) at upper right of the screen. The camera app returns to our app, which displays the file name and location on our Android device where the JPG image file has been stored.
Press “Show pictures” to display the photo. The default image size is small – but centered! We will see how to show the photo at a larger size.
Designer View
Continue reading How to center an image on the screen using App Inventor
Can App Inventor have a button or control that rotates on screen?
A reader asked: Is there is a way to have a control, such as a button, rotate on the screen?
With a simple trick, the answer is Yes!
The trick is to use ImageSprites that are made to look like buttons. Then, instead of .Click event handler, as used on a Button, we use one of the “touch” events defined for the ImageSprite class. To rotate the sprite, change the sprite’s Heading property. Easy!
If you would like to learn more about ImageSprites, please read my online tutorial “Using ImageSprites for animated App Inventor Graphics”.
I’ve also written an inexpensive 227 page e-book all about graphics, animation and charts available from many online e-book outlets. You may find that text helpful to you as well.
Tutorial Video
The tutorial is shown here as a video – or page down for a written version of the tutorial.
User View
Watch this video to see what a rotating button looks like:
Designer View
Creating the user interface is the same as creating other App Inventor user interfaces – except we use a graphical drawing area called the Canvas and add an ImageSprite to the Canvas.
Continue reading Can App Inventor have a button or control that rotates on screen?
Interesting questions :)
I am back after having been traveling for over 2 weeks (and some travel before that too); during most of that time, I had no Internet or cell phone access.
While I was away, readers sent me questions about how to do various things in App Inventor and I will start working on creating tutorials to answer their questions. I think others will find their questions and possible solutions to solve the problems of interest!
Another reader indicates their’s been a change to the Google Fusion tables API and I will try to look into that and see what’s up.
Google introduces Blockly 1.0 for Android, iOS and web
If you have used MIT App Inventor (and of course you have!), you can quickly adapt to using Blockly for programming. Blockly is basically a “Drag and Drop” code editor (like in App Inventor), providing a visual programming system. It uses the same ideas as MIT App Inventor.
To see it in operation, visit MIT’s Scratch project to create a simple program.
Google has released code libraries that, when combined with other tools, enable use of Blockly to create code for the web, for iOS and Android. For iOS you also need XCode and for Android you need Android Studio. Blockly is not a programming language itself; it outputs code in JavaScript, Python, Lua and other formats.
Source: Google Developer’s Blog
WATCH THIS VIDEO!
(FYI I am half way through my period of traveling too much and not getting much programming done!)
App Inventor 2 - Learn to Code (Learn2c.org) 