How do I create a login for my mobile app? That’s a question we hear frequently from ViziApps users who want to create apps for the iPhone, iPad and Android devices. Here’s an example that addresses that question, illustrating how to add a login for a hybrid app that uses JavaScript.In this example, the app requires a user to enter a name and password and then click the login button. When the button is clicked, the app queries a Google Docs spreadsheet to access two sets of data: a list of users and a separate list of alert messages.
To prepare to build this type of app, then, you’ll need a list of users and alert messages, provided on two sheets within a separate spreadsheet. See the example below.
Each sheet in the spreadsheet can be thought of as a table within an SQL database.
The field names for the tables are in in the first row of data.
In the ViziApps Studio view of the app, shown in the image here, notice the two icons on the bottom of the screen. The circle with a squiggle is a hidden field, which I called “checkAccountStatus”. The icon on the right of the screen is an alert field that I called “loginMessage”.
Below is the Manage Data section of the sample app, completed in a way that ensures that the appropriate commands will be executed when the login button is clicked.
After connecting to the Google Docs spreadsheet, I selected the accountstatus from the user sheet and move it to the hidden field called checkAccountStatus. I did this where the username and userpassword from the Google Docs spreadsheet match the inputName and inputPassword (the internal names I assigned to the fields).
The next step is to use an IF/THEN/ELSE sequence to get the correct alert, by testing to see if the checkAccountStatus is equal to “active”.
IF it is,
THEN we select from the messages sheet, (WHERE the type is equal to “goodLogin”), the message (which would be “Good Login”) and move it to the loginMessage (an alert field), and then move the type to checkAccountStatus to clear out “active”. The user will receive a popup alert saying “Good Login”
ELSE select from the message sheet the message (WHERE the type is equal to “badLogin”), the message (which would be “Your login credentials did not match or your account is inactive”and move it to the loginMessage (our alert field). The user will receive a popup alert saying “Your login credentials did not match or your account is inactive”.
If the entered Name and Password are correct, the alert “Login OK” is displayed. If they are incorrect, or if the account is inactive, the alert “Your login credentials did not match or your account is inactive” is displayed.
These directions will help you build mobile apps with login capability whether you want to create apps for Android devices or the iPhone or iPad.