Using serverStorage to save data on the Volt Server

AppStudio 6.1 brings a new Volt feature: serverStorage. It lets you save and retrieve data on the Volt server. Here are a few uses:

  • As a backup: Keep critical data in the server, so if the phone gets lost or damaged, information is not lost.
  • Multiple devices: If the user runs your app on multiple devices (desktop included), your app can pick up where it left off with the same data.
  • Support: As the owner of the app, you can examine what is in your user’s serverStorage.
  • Data Sharing: The owner of the app can read and write to users’ serverStorage using a different app. Use this to send specific information to users, or to get data the user has collected.

It’s easy to use. You save and retrieve values using a named key. The values can be of any data type: numbers, strings, arrays or objects. There are no limits on the number of values you keep, nor how big the values can be, other than that they be reasonable. If you need to use a lot of data, check with us at support. Here are some examples:
Continue reading “Using serverStorage to save data on the Volt Server”

Using the Clipboard

ClipboardData lets you access the data on the Clipboard. You can:

  • Use and modify the data cut or copied to the clipboard
  • Use and modify data pasted from the clipboard.

It can be used in Input, Textarea and Textbox controls in all frameworks. It controlled by the oncopy, oncut and onpaste events. The information about the clipboard is passed as a parameter to these events.
Continue reading “Using the Clipboard”

The manifestFile property and online apps

In Project Properties, there is a property named ‘manifestFile’. The setting of this property can have a big effect on how your app works, online and offline.

The default setting is appcache. This causes AppStudio to collect the names of the files in your project and put them in a special file called OfflineApp.appcache. When your app is downloaded to a device, this file is checked by the browser. The files named are stored in the browser’s persistent storage on the device. This allows your app to run even without an internet connection, since all the files needed are present.

Each time a cached app is started, the browser checks to see if the OfflineApp.appcache file has been updated on the server: if so, the new version of the app is downloaded. If it can’t reach the server (perhaps because the device is offline), it does nothing and runs normally.

If the OfflineApp.appcache file has been deleted on the server, the app is deleted from the device.

The manifestFile property can also be set to no caching. The OfflineApp.appcache file won’t be created, and the app will not work in offline mode. It’s worth doing if your app will only work if the device is online: for example, if it has a lot of Ajax calls which are necessary for operation. A side benefit is that you won’t get any “Cache Error” messages.

If you change an app from appcache to no caching, be sure to clear your browser’s cache. Otherwise, it will still think it’s a cached app.

The final choice for this setting is manifest. It’s an obsolete setting. When the standard was first set, it specified .manifest as the ending for the file. Microsoft pointed out that it already was using .manifest for something else. Oops. The standard was revised to call it .appcache instead. Some early AppStudio projects were created in the .manifest days – changing the file suffix now could cause cache errors.

AppStudio 6: Positioning Controls (II)

In our last post on positioning, we discussed the different ways of arranging controls on a form. This time, we’re going to have a closer look at static positioning and how you can get your controls to the proper place on your form.

You might want to open a new project in AppStudio and play along. Start a new form with position set to static. Add three Bootstrap buttons:

screen-shot-2016-11-22-at-9-38-39-am

Notice how they position themselves? They automatically go to the left side of the screen, below the previous button. Let’s see what ways we have to put them on the same line.
Continue reading “AppStudio 6: Positioning Controls (II)”

Using Adsense with Volt

search-1Adsense is Google’s web ad service. If you agree to display Google’s ads on your site, you’ll collect money each time someone clicks on an add.

To do so, add the AdSense control to your app. Choose the size (320×50 up to 300×250) and position it. AdSense will automatically display ads in the space. You’ll need to set Client number and Adsense slot number.

Get the Client and slot numbers from Google Adsense when you sign up. Follow Google’s instructions for the rest: they are pretty good.

One of the requirements is to list the name of the site your app is hosted on. If you don’t have a site, no problem. You can use Volt. Simply supply the URL to your app on Volt:

screen-shot-2016-11-21-at-3-52-32-pm

Here’s an ad in an app:

screen-shot-2016-11-22-at-5-10-10-am

And here’s a link you can try yourself: https://adsense-wets-correctly.volt.live/

Now tell people about your app and watch the money roll in!

Make your own Bootstrap Theme

AppStudio lets you manipulate many of the features of the Bootstrap controls. Essential to their appearance, however, is the theme they use. By changing the theme, you can affect the color and appearance of all your Bootstrap controls. AppStudio includes 18 Bootstrap themes: bootstrap, bootstrap-enhanced, cerulean, cosmo, cyborg, darkly, flatly, journal, lumin, paper, readable, sandstone, simplex, slate, spacelab, superhero, united and yeti.

But what if you want to make your own theme? It’s surprisingly easy to do using the Bootstrap Theme Customizer. You start it from http://getbootstrap.com/customize/ or AppStudio’s Tools menu. It includes full documentation – we just present an overview here.

Continue reading “Make your own Bootstrap Theme”

AppStudio 6: Positioning Controls

Web design is constantly evolving. Each year, new features are introduced to HTML, CSS and JavaScript. New page design trends emerge along with new style guides. AppStudio 6 has a number of changes to bring AppStudio development up to date with current best practices.

Responsive Web Design allows your apps to change how they display depending on screen size. Most new web development is based on RWD. AppStudio 6 has enhancements to better use RWD.

The position property, in Form Properties, is key to this. Its setting determines how controls are positioned on a form.

There are three useful settings: absolute, static and relative. (fixed is included for completeness, but not currently used by AppStudio).

Let’s discuss the differences and advantages of each.

Continue reading “AppStudio 6: Positioning Controls”

AppStudio 6: Accessing Google Drive

searchGoogle Drive is a convenient way to store documents in the cloud and access them on any of your devices. It’s also an easy way to share documents. Millions of people use Google Drive – recent statistics show Google Docs to be as much as 5 times more popular than Microsoft Word.

The great news is that you can access the data in Google Drive from your AppStudio app. For example, you can read the data in a Google Sheet, modify it, and write it out again. This effectively turns the spreadsheet into a database for your app.

Volt makes this possible for everyone to use. To use Google Drive, your app needs to be deployed to a server. For security purposes, you have to give Google Drive the name of the server before it will authorize it to access your files. You can set up your own server for this or simply use Volt. After you deploy your app to Volt, enter the path which Volt gives you (something like “https://googlespreadsheet-signs-smoothly.volt.live”) and update the credentials.
Continue reading “AppStudio 6: Accessing Google Drive”

AppStudio 6: New Header control

AppStudio 6 brings a new Header control. It’s a Common control, which means it will work with all frameworks.

Header puts a simple header bar at the top of your app:

screen-shot-2016-10-26-at-11-40-29-am

You can customize the colors, font and size. It’s a simple useful control if used for just this.

What makes it special is that it can be used as a container for other controls. Add a couple of Buttons named Left and Right to a project with a Header. Now, drag them onto the Header:

screen-shot-2016-10-26-at-11-46-46-am

Now it looks like this:

screen-shot-2016-10-26-at-11-53-59-am

Change margin-all for both buttons to 3, and change the style of the Right button from float:left; to float:right;

Here is our final Header with buttons:

screen-shot-2016-10-26-at-11-56-24-am

Of course, controls other than buttons can be used to create interesting headers.

AppStudio 6: Updated Error Messages

In Version 6, we’ve changed a couple of error messages. One you saw too often, and the other you never saw at all. Both these changes will make you more productive.

New Version Warning

How many times have you seen this message when testing an AppStudio 5 app?

screen-shot-2016-10-24-at-3-50-46-pm

It warns you that you are about to overwrite the current version of your app. There isn’t any need to get this message every time your change your app when you’re developing. In AppStudio 6, there is a new setting in Project Properties called ‘newVersionWarning’. If set to false (the default!), this message will not show.

When your app goes into production, you might want your user to be warned if a new version is available, and give them the choice not to update. In that case, change ‘newVersionWarning’ to true and it will work just as it did in AppStudio 5.

Stop on Error

In AppStudio 5, the only way to find out if your app had a runtime error was to open the Chrome Debugger and look at the console. In AppStudio 6, errors are reported in a message box which appears over your app:

screen-shot-2016-10-24-at-3-57-28-pm

It will tell you the filename of the error (code.js), the line number and even the position in the line.

This catches most runtime errors. It doesn’t catch syntax errors, where the code is not properly formed. You’ll still need to use the Chrome Debugger for that. With this feature, I’ve found errors in code which I thought was working properly – it’s very handy.

You can turn off this feature in Project Properties by setting ‘stopOnError’ to False.