• Creating A Login For A ViziApps Mobile App

    Password Example

    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.

    Users Messages

    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.

    Password Example with Icons

    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.

    Command Spreadsheet

    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”.

    Password Example Login Not Ok

    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.

  • Easily Include Facebook, LinkedIn, or Twitter Social Logins in your mobile apps

    ViziApps makes it Easy to add Social Logins to your mobile apps. Quickly enable your mobile app users to register and/or login with their Facebook, Google or LinkedIn user credentials! Social Logins are an easy way for end users to register and login to mobile apps. Instead of adding a username and password fields to your app, just add a button with the action of social login and you can get the name, email and profile picture of the end user to use in your app. Then, you can store the credentials for future logins. To add Social Login to an app's Button, just open the Button Property sheet and enter the properties for your choice of Facebook, Google or LinkedIn. That's it! Social Logins in your mobile app in about a minute! Check it out today, by adding the Social Login Demo Template App to your ViziApps account.