What the Heck is Checkpoint?

At some point, all of us computer users have experienced the pain, frustration and anxiety of losing some amount of work due to an application that has “unexpectedly quit”. Losing your work to a system error needs to only happen once before one becomes more vigilant about saving work or creating a backup. When creating apps in App Inventor, it is easy to forget to “save” because the platform does it for you (every 5-30 seconds). In theory, there is no need to save a project that is already being saved. But, in reality, I would recommend to save, save, save.

Given that advice, what are the App Inventor saving options?

You can save projects in App inventor and to your computer. All of the options are under the Projects Menu (in both the Designer and Blocks Editor). You will find Save project, Save project as… and Checkpoint along with Export selected project (.aia) to my computer and Export all projects.

Checkpoint 1Save project is the manual version of the automatic save feature. It merely reassures you that your project is saved and you continue working in the same version of your project. Use Save project for peace of mind.

Save project as… works similarly to a Save As in Microsoft Word. It allows you to save the project with a different name and afterwards, begin working in the new version of the project. Your previous version is saved in My Projects. Use Save project as… for peace of mind.

Checkpoint also makes a copy of your current project, but allows you to keep working in the original project. Creating a Checkpoint, essentially takes a snapshot of your project at a point in its development and saves it in My Projects. You may want to create many Checkpoints along the course of building your app as it grows in complexity. For example, if you create a Checkpoint before you add a database then encounter a problem or a bug that you are not sure how to fix, you can always re-open the Checkpoint that did not contain the database and start anew.

When you create a new Checkpoint, App Inventor shows you a list of previous Checkpoints and the time/date they were saved. Checkpoint 2

Once you have completed your app, you always have the option to delete or keep your Checkpoints. Use Checkpoint for peace of mind.
Checkpoint 3

In addition to saving your projects within the App Inventor platform, you can also export your projects.

Export selected project (.aia) to my computer is a feature I cannot recommend enough. It’s easy, easy, easy to save an .aia file to a location on your computer and/or to an online storage system like Google Docs or Dropbox. And if you ever need to open that .aia file, just select Import project (.aia) from my computer… to bring it into your projects list in App Inventor. Use Export selected project (.aia) to my computer for peace of mind.

Tip of the day: For complete peace of mind, save your work within App Inventor and export your work to your computer.



Hue New?

One only has to read a few tweets about the Uber or Instagram icon re-design to know how passionate people feel about mobile app design. Creating a Color blog 1user-friendly (and pleasing) interface is as important as creating code that functions properly. Many App Inventor users assume that all UI features are found in the Designer. However, this is not the case in terms of colors. Over and over, I hear people reveal their frustration about the limited amount of colors available in App Inventor. At first glance, the Designer does seem to only offer a list of 8 saturated colors, along with white, black and a few grays. But really there are a multitude of color options if you know where to look. All you need to do is head over to the Blocks Editor.

Notice in the left menu, under “Built-in” there is an item called: Colors. Clicking on it reveals a list of color blocks that would once again lead you to believe that saturated colors are indeed the only options. Don’t be fooled.Color blog 2.png

Once you click on a color block, it will appear in the Viewer and clicking again on the actual color inside the block reveals a 7 x 10 grid of color hues! Hue new? Now you can select pastels, deeps and a range in between.

Color blog 3.png
What can you do with all of these color options? Well, since they are housed in the Blocks Editor, you can incorporate them into your code. For example, you can change the color of a component, (a button, a label, a screen background, a layout) by using the screen initialize block.

Color blog 4When your app launches or when you make a change in the Designer, the components will receive their newly hued instructions and your previously boring grey buttons will come to life!

Color blog 5.png

AppInventor.org updates

AppInventor.org has been updated with the following:

1. Conceptual roadmap — find what you want to learn! This page should be helpful to students and teachers designing courses.

2. App Inventor 2  tutorials and video screencasts.
The first batch is ready, many more to come…

  • “I Have a Dream” soundboard app tutorial for beginners. video text
  • Paintpot, the classic tutorial now in App Inventor 2  video text
  • Math Blaster, an app that generates and checks arithmetic, lots of iteration! text

3. Course-in-a-box updatesDesigning an App Inventor course? Make use of the materials here, including these additions:

In the next few weeks we’ll be rolling out more new content, especially for App Inventor 2, and we’ll have a new design!

App Inventor has a new Component: the WEB

The App Inventor team just released a new component, and its a whopper: the WEB. Before this component, you had to create and deploy server code, using Python, Java, etc,  in order for your app to get data from the web. Now you can call APIs directly from your App Inventor blocks!  Suddenly, App Inventor programmers have a lot more power to create web-enabled apps that mash data from various sources.

As a first example, check out this App Inventor app that accesses stock quotes from the Yahoo Finance API:

stock quote app in emulator

Designer view for stock quote app

The blocks for stock quote app (click to enlarge)

The app just sets the Web component’s Url property to the base URL of Yahoo Finance, then adds on the stock symbol input by the user in the StockSymbolTextBox.

The call to Web1.Get then invokes the web request. The event Web1.GotText is triggered when the data arrives back from the Yahoo Finance. The data, in this case the stock info in comma-separated form, is returned in the argument responseContent. The app uses the list function listfromcsvrow to get the csv values into list form, then grabs the second item which is the stock’s current value.

The Yahoo Finance API is especially easy to use because it doesn’t require any password or key. You can get different information out, such as the one-day change in the stock, and you can send different parameters in the URL to ask for different data. Check out this site for a nice spec of the Yahoo Finance API.

There are lots of APIs out there, some of which have simple interfaces like Yahoo Finance, and some which require more work. I’ll be exploring more of these in future posts.

This app is a simple one, but if you want to download it to your phone, just scan the following QR code:

Storing Multiple Timestamps in TinyWebDB

Here are a couple of question from a reader of my appinventorapi.com blog, which focuses on app inventor apps that store/retrieve data from a web database or API. The second question specifically asks about storing multiple timestamps, e.g., if you were tracking your user’s activity or location. In general, it asks about how to store lists of data in a web database:

1. How can I check if a value is already stored in a TinywebDB ?

The only way to check for a value in the web db is to call TinyWebDB.getValue(tag). If there is no data value for the tag you send, the result in TinyWebDB.GotValue will be the empty string. You can check this by checking if the length of result is greater than 0.

2. Is it possible to store multiple arguments for one Tag at different time intervals ?(e.g.I save TAG 1, 2 and 3 right now it saves as an argument the current time of the system, then a few minutes or hours later I Save TAG 1,2 and 3 again and it puts a new a timestamp without overwriting the previous stored valued is this possible ? so at the end of the day if I check the Database I can have something like this Tag 1 (Time1, Time2, Time3, etc) for each stored value

Tinywebdb only stores one value for each tag. You can store a list as a value, however. So you could store different timestamps in a list, and store the entire list as a value of some tag. To implement this scheme, you need to load the list into your app using GetValue. Then call add item to list to add a new item (time stamp) to the list, then remember to call TinyWebDB.StoreValue to put the updated list back into the database.

For examples of storing lists of data using tinywebdb, check out the MakeQuiz/TakeQuiz sample chapter (ch 10), as well as the Database chapter (ch 22)