2017년 1월 14일 토요일

Xylophone2 tutorial: Recording different inputs

I found very useful tutorial for recording and playing back sounds on this link:
After I record my notes, there is an button to play them back.
So, I want to create more buttons which will play different songs.
One of my ideas is to create listview and sort them in list.
Is this even possible with this kind of method?

If you were to use the ListPicker, you would initialize it's elements to the note names:
"CN4,CS4,DN4,DS4,EN4,ES4..." for example.
When an item in the ListPicker is picked PlayNote is called with it's ListPicker.SelectionIndex.

A more advanced approach to making a keyboard might be:

Making a Canvas taller or wider than the screen and filling it with ImageSprites for each note.
Dragging the Canvas with your finger to move the canvas to reach notes out of view using this technique.
Changing the color of the pressed note briefly.


NFC sensor on multiple screens

Hi, I made some try with nfc sensor and I came to the conclusion that it only works on apps with 1 screen.
I placed a read button, a write button and a label on the two screen of my test app, the write buttono on the first screen write "Screen1", on the second screen "Screen2".
If I stay on screen1 both read\write works ok and I can read the written text on the label.
If I switch on screen2 then, whatever I press, the app returns on screen1 (after the beeping noise of nfc) and the tag isn't written nor readed.

I guess this is how the nfc component works and I wonder if there's a way to use it on multiple screen (if I read a tag on screen2 I want the app to stay on Screen2 and shows result there) or maybe if this can be a feature to add for awesome guys of MIT.

Incorrect... It only work on the screen on which the companent is added. If you want it to work on other screens yo have to add it there and connect on each screen as well.

Is what i did. Nfc component is both on screen1 and screen2. But when i read/write a tag from screen2 it opens screen1. I attach the test app

Edit:  Your  APK file has been removed.  As per the posting guidelines, APK's are not allowed, and AIA files should only be posted if requested.  Please post screenshots of your relevant code blocks instead.

Please post some screenshots of your relevant blocks.  Show what happens on Screen1 and what happens on Screen2 so we can see what you're doing and advise you on how to proceed...  If you're not sure how to do screenshots, please see my tips below.

Screenshot and aia attached, thanks



Gabriele... You're using AI2LiveComplete, not AI2 production... please ask your questions in that forum. Hossein can answer you here:  http://amerkashi.wordpress.com/

You're right but the component isn't changed. Can you just tell me your thoughts based on the screenshots? I'll appreciate it

I do not think it is possible to use the NFC component on more than a single screen; it is similar to the Bluetooth component and the Bluetooth component ceases to work (it disconnects) if one changes screens so all the code directly related to BT needs to be on the same screen.   It is possible this is also the case with the NFC.    I do not know for sure, however it is very likely.

You might also be having issues closing screens... you are doing this simply ...here is the TribleHunter method   http://puravidaapps.com/tribblehunter.php   Note, this method works after the apk has been built...use  the browser Screen button to change screens while developing... however when this code is in placed in your app it switches perfectly.   Having the close screen part of the change screen process will prevent the device's system memory from overflowing and crashing your app.   This method is more suitable in some apps than the screen manager Taifun  frequently recommends   They both work.

You're very kind Steve, thanks, so what you're saying is exactly what i experienced. I'll try to adapt my app to using this, thanks


Open NFC settings by clicking a button

I am quite new at this, and never programmed before. 

On screen one, I want to have a button that launch the settings where the user can turn on NFC. When turned on, I want the user to be directed back to screen one. How can I fix this?

Activity starter:


A Login template for App Inventor


This post shows how to create a login system using App Inventor. The objective of the post is twofold: on the one side to provide the sources of a working template that can be reused in further applications, and on the other side to explain the fundamentals of its development.
You may be interested in this template if you intend to develop an app that requires the user to identify himself. This is useful for example in a game where you want to record the results and provide a classification of best scorers, or in general whenever you intend to enhance the user experience by tracking its history and remembering some of its decisions about configuration, look&feel, etc. Moreover, user identification is a great way to create a community around your apps. I’d rather say it’s a must.
On the other hand, user identification has some drawbacks. For example it can imply an entry barrier to your app, as some spontaneous users will be reluctant to identify themselves and hence renounce to log in. This is not a concern for me because I prefer having a small set of really interested users than lots of downloaders who uninstall the app after their first trial. Anyway, the template provides a “login as guest” functionality that allows users to have a look at the app before registering.
When I realized I needed to provide user identification for some of my AppInventor apps I started looking for a solution on the web. There are several posts related and some ideas for a solution (the closest one this server side solution), but none of them matched completely with what I had in mind, so I decided to develop the functionality on my own, assembling parts from those clever ideas into a cohesive module supporting all my requirements. The job was slower than expected, but I’m satisfied with the results and I’m sure it will save me a lot of work from now on because it can be reused as a template for any future app. In particular, I’ve recently publisehd an app to Google Play that uses the template we’re going to see.
01/08/2013: There’s a new version of the template available in this post. If you’re just interested in the sources you can go there directly, but otherwise I recommend you to have a previous look at the remainder of this tutorial because it has more extensive explanations about the template goals and behaviour.
26/07/2014: New sources for AppInventor 2. Indeed the post was initially published for AppInventor classic, but currently sources are available for both versions. The tutorial is also updated, but only with minor changes since the app is roughly the same.

About this tutorial

The format of this post is somewhat different from the two kinds of the tutorials most frequently found on the web:

◾ Step by step: very detailed instructions that fully guide you to develop the application. For a matter of space, they use to be basic and avoid some aspects (e.g. user entry verification) which are not necessary for a prototype but need to be taken into account for real applications. Good examples of this kind are the official AI tutorials.
◾ Tips and tricks: ideas to solve specific problems. There is usually the full code and some explanations, but also for a matter of space they don’t use to be full applications. A good example of this kind are Puravida snippets.
So both kinds of tutorials fail to cover the nuts and bolts for passing from a prototype to a production application. This tutorial will try to do so, since as I said we’re creating a template that I intend to reuse in all my apps with as little adaptations as possible. This broader scope comes at the cost of less detailed explanations, but my goal is to provide enough information for an intermediate reader to understand the module and be able to build or adapt it on his own. However sometimes it’s difficult to find the right balance so if anyone is interested in any further detail please leave a comment or contact me and I’ll be pleased to answer. Also remember that any detail omitted in the explanation can be discovered by inspecting the sources.
Therefore my recommendation is not to try to develop the full application from scratch, but rather download the sources and try them to see the app working. Then read through the tutorial and use the sources to review some details that may not be clear.

What are we going to build

The main functionalities provided by the template are:
◾ Login dialog: The entry point to the application. Requests the user to identify himself if he’s already registered and allows new users to register. It optionally remembers the previous username/password thus allowing users to log in with a simple click.
◾ Register: The user provides at least a username and password, as well as some additional information (that can be customized for each application). This information is stored in a database, with password encrypted.
◾ Forgot password: If the user had provided an email, the password is sent to the address. Otherwise it’s shown on the screen.
◾ Google login: The user can identify himself using his Google account. This way he needn’t remember yet another password. In this case, the user is also created in our database in order to store the information specific from our app, but we don’t record its password and email.
◾ Profile screen: Allows user to change his register information once within the app.
◾ Initial menu: The skeleton for the initial screen integrated with the login dialog.

Some screenshots

Initial screen Register Forgot password
Google account loginMenu  Help


Choose one of the following versions:
1.0 (AI Classic): This is the version explained in this postDownload
2.0 (AI Classic): This version contains some enhancements explained in this postDownload
3.0 (AI2): This version has the same functionalities as v2.0. It’s just an adaptation for AI2Download

How to install the app

Download any of the versions above and upload it as a new project into AppInventor. This should work directly except for the following limitations:

◾ The “Forgot password” screen won’t be able to send mails (it will show the password as a message). For this to be possible you need to enable a service as explained in the tutorial How to send a direct mail.
◾ The “Google login” will not work until you set the variables CLIENT_ID and CLIENT_SECRET with the values that the API Console has given to your application, as explained in the tutorial How to identify your user with OAuth from Pura Vida Apps.
◾ The database is stored in the default appinventor.appspot.com service which is not a good practice. Please consider enabling a specific service as explained in the tutorial Creating a Custom TinyWebDB Service.

How it works

In order to keep this post to a reasonable extension I’ve moved some contents to separate posts. Concretely the solution to some specific challenges I faced when developing the module and that were not trivial to solve (at least for me):

◾ How to send a direct mail
◾ An “optimal” way to manage multiple screens
◾ How to redirect to the Google login (from Pura Vida Apps)
◾ A simple way to encrypt and decrypt texts in App Inventor
◾ How to adapt to screen orientation
Also for extension sake, all the coding stuff is explained separately in the second part of this post

User interface

Notice there are only two screens even though the template consists of seven windows. The reason is that six of these windows are implemented as table arrangements in the first screen (see the red square in the Components tree-view) which are hidden/shown by code in order to simulate the windows transitions. The reasons for using this mechanism rather than the multiscreen facility now available in AI are explained in the tutorial An “optimal” way to manage multiple screens.
The following chapters are devoted to each of the seven arrangements, and a final chapter covers the remaining components of the app.


logintutorial_11logintutorial_12This is a thin bar that will appear on top of the screen for all windows. It contains the following components:

◾ ButtonProfile (Button): menu option used to open the Profile window
◾ ButtonHelp (Button): menu option used to open the Help window
◾ LabelTopBar(Label): Will show the username (width: Fill parent)
◾ LabelTopBarSpacer(Label): used to separate slightly the two buttons (width: 5 pixels)


Login arrangement interface
Login arrangement components
This is the window displayed initially and the most complex one. It contains several arrangements which provide the desired layout for the following components:

◾ TextboxUser, TextboxPwd: Contain the username and password to be filled by the user
◾ ButtonLogin: Opens the menu after validating the username and password indicated
◾ CheckboxRemember: Indicates whether the data entered in the screen is recorded for next time (using Tinydb)
◾ ButtonRegister: Opens a new window (TableArrangementRegister) allowing user registration
◾ ButtonForgotPwd: Opens a new window (TableArrangementSendPwd) where the password will be reminded interactively or by email
◾ ButtonGoogle: Opens a new window (TableArrangementGoogle) that shows Google’s interface for login
◾ ButtonGuest: Opens the menu without validation


This is the application menu, which is accessed upon successful login. The template contains 4 generic options but it can obviously be adapted for each app.
The components are very simple. No secrets with buttons: one for each option and an additional one for “Exit”. Labels are somewhat trickier because they’re used to leave some space between buttons. The TableArrangementMenu1 has 4 columns and 5 rows and the labels are positioned in:

◾ Label1_3: Row 1, Column 3
◾ Label_3_1: Row 3, Column 1
◾ Label_5_3: Row 5, Column 3

To achieve the layout required, you can specify the desired height and width for these labels. However, these attributes will be overridden by code (see the Screen Orientation tutorial).


This is the window where the user registers into the app. After introducing its identification data and pressing the Ok button a new record is stored in the database (validating previously that the username does not already exist).
◾ LabelName_REG, LabelPassword_REG, LabelPassword2_REG, LabelMail_REG: Identifying labels. The prefix “*” indicates mandatory fields (this will be validated by code)
◾ TextboxName_REG, Password_REG, Password2_REG, TextboxMail_REG: The fields where the user enters his information
◾ CheckBoxSendMail_REG: Indicator of whether the user will receive email notifications
◾ ButtonOk_REG: Stores data and closes the screen
NOTE: There is no “Cancel” button, because Android style guide orients towards using the device back button instead


This window notifies about the password stored for a given username. If user’s email is informed the notification is sent to that address. Otherwise it’s shown as a screen message.
◾ LabelName_SEND, TextboxName_SEND, ButtonOK_SEND: No secrets
◾ LabelSep1_SEND: Spacer label to leave some space at the top. Inform the required height
◾ HiddenMail_SEND, HiddenPassword_SEND: These are auxiliary fields used to store the mail and password retrieved. They MUST NOT be shown in the screen, so mark the “Visibility” attribute as Hidden


This is the window that shows the Google login interface. All the magic is performed by code, so it has simply two components:

◾ TableArrangementGoogle: Used to achieve a full screen layout. Inform Height and Width to Fill parent
◾ WebViewer1: The component used to show Google’s web interface. Inform Height and Width to Fill parent


This is the window that appears when the user presses the “Help button”. We reuse the same interface for all windows despite each one has a specific text help. This is achieved by code (i.e. the right text is loaded according to the window from which the help is invoked).
Therefore the window has a general structure consisting of a header (VerticalArrangement3), a body (VerticalArrangement2) and a footer (LabelLogo). After creating these arrangements we can simply drag into them the appropriate labels. In our case:

◾ LabelHead: The title. Mark the Bold attribute and inform a slightly bigger text size (e.g. 16).
◾ LabelHeadSpacer: Just a spacer. Leave the text blank and inform a small height (e.g. 10)
◾ LabelHelp1, LabelHelp2, LabelHelp3, LabelHelp4: The labels that will contain the help body. Place one above the other in the VerticalArrangement2 and inform their width as Fill parent.
◾ LabelHelpLink: A text that can show a web address as the last line of the text help. Inform the attribute TextColor = blue.
NOTE: This label looks like a hyperlink but it has no real behavior. To provide a real hyperlink we should use a button instead of a label, add a WebViewer component and program the button click event to open the web viewer with the address specified in the button label. This is implemented in version 2.
◾ LabelLogo: A logo to be shown in the footer. You’ll probably prefer to use an image rather than a label. In this case you’ll probably require a HorizontalArrangement to center the image

Other Components

Finally here are the non-visual components
logintutorial_25◾ TinyDB1: Used to store locally the username and password entered by the user, in order to offer them as a defaul next time
◾ TinyWebDB_LOGIN: Reads information from the user’s database in order to validate the credentials
◾ TinyWebDB_SEND: Reads user’s mail and password from the database
◾ TinyWebDB_REG: Reads and writes user’s information the database
◾ TinyWebDB_PROFILE:er1: Similar TinyWebDB_REG but with different behaviour. Actually we could have used a unique TinyWebDB for the whole screen but it’s separated for clarity sake
◾ WebGetToken, WebGetGoogle, ActivityStarter, Clock1: Used for the google login, as explained in the tutorial How to redirect to the Google login)
◾ WebMailSend: Used to send mails (the service is provided via a Web component as explained in the tutorial How to send direct mails)
◾ Notifier1: Used to show notifications
◾ SoundClick: Plays a sound when a button is pressed
NOTE: By default the ServiceURL attribute of all TinyWebDB components will be set to appinvtinywebdb.appspot.com. This will work but it’s not a good practice for the final application. You should set up a specific service for tinywebdb as explained in the tutorial Creating a Custom TinyWebDB Service and then inform the service URL to all the TinyWebDB components

Main screen

Finally here is the template’s second screen, i.e. the one that will be opened when user presses any menu option. If you use this template in a real app, this is the screen that will necessarily have to be adapted.
At the level of this template we simply include the header bar (which shows the logged user), a generic help window and a label (which shows the selected option). Both the header bar and the help window have the same interface we’ve already seen for Screen1 so we’re not going to explain them again.
And that’s all regarding the graphical interface. The app is designed and now it’s time to program its behavior. This will be explained in part 2.

BLE update

Is there any news regarding the BLE functionality?

next time just check the release notes here to find out, if there are news

In previous release notes BLE functionality was announced as completed. Later, the announcement was deemed a mistake but would be released in a few weeks. Searching through the posts it seems like BLE functionality has been a few weeks away for almost a year. I was hoping that someone involved in development could give more insight into the current state of BLE. 
Here in Costa Rica there are dozens of high schools students who use App Inventor for their science fair projects and are eager to experiment with BLE.


Is it also possible to store data as a chart form

Hi , i would like to store data and save it into a chart form. Is it possible ? 

you can store images or store the chart data and next time display the chart using the data again, see also

But i want to have the database where user enter data and it will transform this data to bar graph form . Is it possible ? I'm sorry but im new to app inventor . Thank you for your kind help.

yes, you might want to follow the mentioned example and adjust it to your needs


how to buld a question and answer form

I am looking to build a question and answer from.  There will be two levels of users.  The higher level, 1, will be able to enter questions.  The lower level user, 2, will be able to read the questions and write answers.  Form and answers will be stored in the level 2 users phone only, like a quiz with questions that the user answers as time permits.  There will be 10 to 20 questions with space (a text box?) for answers.  Every time the form is opened the answers to date will populate the text boxes.

This sounds like the TakeQuiz MakeQuiz tutorial.


Global variables don't work

In the title there is all the problem:

I've initialized a global variable in the screen 1 with a name and a value,then all ok,it works for that screen but when I tried to get that variable in another screen I cant see it,this problem is current with all global variable and all screens .-.

Global variables are not passed from one screen to another. Use the block Open Another Screen with Value or TinyDB to pass values between screens.


web component and header parameters

two weeks ago I wrote searching help to solve a issue to a resumable youtube upload...the answer at request is a html page with a parameter, named Location, placed in the header. Unfortunatley with web.GotText we can take only responseContent that is in the body.
I don't know java...so to me is not a good solution use the extension, so now I was thinking if web component can send a post request, not based on web.PostText  block, in order to take the answer (header and body) in a file.  In this way I can read the file and take Location field in the header.
Till now I've used "call PostText" and web.GotFile without success (the received file is empty), someone know if is there another call to take a no empty file?



Cannot download .apk

probably too many assets like images, audio files or videos? how much do you have?
how many screens does the app have?


Is it possible to turn the Wifi of the smartphone off?

i want to creat a button to turn off the phones wifi if i click on it.
Is this somehow possible with appinventor?

you can do that using my WiFi extension https://puravidaapps.com/wifi.php

The App Inventor Extensions are currently in testing. See the announcement for more information about how to use an App Inventor Extension. 


Why application stops when you click on a picture button?

My app crushes by saying the app has stopped anytime i click on a button to open another screen with images on it.

you should switch screens correctly...


Help with image uploading and retreiving

hello guys mine is quiet i think odd but I have searched i think all over the forum but i cant seem to get what i want exactly.

i have built an up i have made it work it sends and retrieve data from the fusion table. it does literally what i want it to do that is access web pages send sms and get sms too but there is one problem and that is when I want to upload an image to allow someone browsing the database to see what is described in the content that was uploaded.

i have seen tutorial on how to download the php compact package but that needs me to have a server which i dont I only have wampserver i even tried using XAMPP server but still no avail. the google drive options seems to not work since this file will be randomly uploaded from different location and can only be viewed under a certain category.

please advice on the best way to use app inventor to store data(images, text and numbers) online and that can easily be viewed using the app from the mobile device.

or is there a way of working with Wampserver that i can even if it means just for local testing with the server. its for my final school project and deadline is soon so am under pressure.

Attached are some of the blocks i am working with and layout of the application.

upload blocks.png 표시 중

image.png 표시 중

image pick.png 표시 중
category view blocks.png 표시 중

 Category Select Page.png

app you can store images 
1. in your web server, see example here https://puravidaapps.com/postfile.php
2. in your Google Drive, see example here  https://puravidaapps.com/drive.php
3. in your Dropbox, see example here https://puravidaapps.com/dropbox.php
there might be other possibilities...

then us a database (for example a fusiontable) to store your data incl. a link to the uploaded image

Taifun just wanted to ask is it possible to use the drive for pictures when you have already synchronized the app to using the fusion table in the drive coz am following this tutorial but i cant seem to follow, not sure what to do next please advice. and thanks for the previous advice. still checking out the different options you gave me.

sorry, I do not understand
 am following this tutorial but i cant seem to follow, not sure what to do next please advice
you will need the source code of the example, how to get it see the green box on the bottom of that page here https://puravidaapps.com/drive.php