This is an extension of the tutorial A login template for App Inventor published some months ago. The goal of this new version is to incorporate some wonderful ideas I’ve received since then:
- A more professional look for buttons (Erikv)
- Change resizing algorythm (Erikv)
- Direct login (Erikv)
- Fusiontable storage (Richard Lafleur)
- Multilingual (my own suggestion)
- Hyperlink from the help screen (also mine)
- Migration to Python 2.7 (Alvin , Orlando… and Google!)
Thanks for your ideas. Please keep commenting and I’ll do my best to enhance the template based on everybody’s contribution.
About this tutorial
The explanations in this post are not as extensive as they were in first part. We’ll see the goal of each new functionality and how it’s been solved, but without diving into technical details except to remark any tricky aspects.
The sources for App Inventor can be downloaded here. As usual it’s enough to upload the zip file into App Inventor and the app should work directly except for the following limitations:
- The database is stored in the default appinventor.appspot.com service which is not a good practice.
- The “Forgot password” screen won’t be able to send mails until you set up a service as explained in the tutorial How to send direct emails with App Inventor.
- The “Google login” will not work until you define the right values to the variables CLIENT_ID and CLIENT_SECRET as explained in the tutorial How to identify your user with OAuth from Pura Vida Apps.
In order to overcome the first two limitations, you can set up the AppEngine service available in the above mentioned tutorial How to send direct emails with App Inventor.
How it works
As ErikV says “default buttons in AI look childish”. The most immediate way to achieve a more professional effect is using icons. There are some good examples on the web, but I was worried about author rights and I’m not good at photoshop. Erikkv proposed this wonderful site but I was not able to produce icons that looked nice in AI buttons so I ended up with some home-made stuff. They’re definitely far from ideal but at least they enhance the previous version. If someone can contribute with a better option I’ll publish them in version 3!
The template is currently available in English and French (sorry for my limitations in both languages). The user can choose the language clicking on the top-left flags and all texts are automatically changed:
The mechanism for supporting several languages is explained in the post A multilingual & multidevice template for AppInventor. To avoid confusion with the previous code, I’ve placed the new blocks in the lower part:
As explained in the above mentioned tutorial this code needn’t be modified except for the InitConstants function where you can adapt the texts for each concrete app. Just changing the two lists listItems and LST_DEFAULT_TEXTS you should be able to modify translations, add a new language, add new texts, etc.
Erikv suggested changing the arrangements and size with the orientation, but without reshaping them. I’ve had a thought about it taking also into account my recent experience and I’ve decided it’s not realistic to define a standard behavior, because it will depend on each app, the kind of controls used, the number of devices we intend to support, etc.
So the template is currently configurable as explained in the same post A multilingual & multidevice template for AppInventor. By default, the current behavior is the same as in the previous version, i.e. only height and size of menu options are resized according to screen size and orientation. However as I say this is easily configurable. For example, if we prefer the height to be fixed we just need to leave blank the 7 constants (4 buttons + 3 spacer labels) as shown in next picture:
Erikv proposes enhancing the user experience by starting with the menu, and only prompt for a login when the user intends to use certain features. To do that, I’ve added some buttons on the top right bar, which change according to the current state: if the user is logged it’s possible to logout or change profile information, and otherwise there’s only the option of logging in:
The implementation of this behavior has consisted of some simple changes because the infrastructure was already set. It has mostly affected to the ShowScreen function which takes care of enabling or disabling the top bar buttons:
TinyWebDb is simple to use from AppInventor but managing the data from the server is not very user-friendly. In our case, it would be useful to have a list of users that could be ordered, filtered by a given attribute, etc. This is typically achieved with datasheets, so Richard proposed to store users in a fusiontable. I considered two possible approaches for the implementation:
- Server side: Modify the service in order to redirect TinyWeDb calls to a fusiontable.
- Client side: Modify the code blocks in order to use a Fusiontable component rather than a TinyWebDb
I was initially inclined towards the second option because it looked smarter, but then I realized that modifying the client is an irreversible action involving some extra requirements for the template (creating a fusiontable, managing security…). From this point of view, the first option is more flexible because the same client app can work both with Fusiontables and TinyWebDb (it depends on which service you set up). So finally I’ve decided not to modify the AppInventor but rather to set up a service that redirects to a fusiontable any tag request starting by “usr:”. To install it you need to download this main.py and replace the one you have set up for the app. Then you’ll have to modify the SETTINGS section as explained in the comments and deploy the service from AppEngine.
This solution may appear somewhat artificial but it’s practical, and it has given me the idea for a future service that extends the approach of combining the ease of use of TinyWebDB with the server side possibilities of fusiontables. Anyway, if anyone is interested in modifying the client side, it’s just a matter of including a Fusiontables component and making the following changes to the code blocks:
- Fusiontable.DoQuery instead of TinyWebDB.GetValue
- Fustiontable.GotResult instead of TinyWebDB.GotValue (and a slight adaptation to parse the result)
- Fusiontable.DoQuery with an INSERT statement instead of TinyWebDB.StoreValue
Hyperlink from help
This is just a small enhancement I had in mind. The previous template provided the skeleton of the help screens with plain text. The new version includes a hyperlink in the last line that when pressed opens the web indicated in the text:
The solution is quite simple: the text is actually a transparent button and when clicked it calls the associated URL using a Web component.
Python 2.7 migration
This suggestion came both from Alvin and Orlando, but I should rather say it was actually imposed by Google when they announced Python 2.5 is not going to be supported anymore starting from January 2014. This affects only the mail sending functionality so I’ve simply updated the mail post and included the migrated sources. If you’re interested in the steps required for the migration you can have a look at the post Python 2.7 migration demystified.