Making Android Application for Small Business Using MIT APP and Google Fusion Table

Have you ever wanted to make your own Application which can be available at google play store!!! If you are having a business then this tutorial will change your life. After reading this carefully you will be able to make your own Application. Before starting with this Instructable you need to read two more Instructables. Link of these two are given below. These Instructables are the basic tutorials of App development.

https://www.instructables.com/id/How-to-Use-MIT-Ap...

https://www.instructables.com/id/Course-on-MIT-App...

So for making an Application we assumed that we are having a small Tea shop with 20 numbers of Tea variety, then with the help of your own application customers can order the tea before arriving at your tea shop or for home delivery.

This tutorial assumes you are familiar with the basics of App Inventor, including using the Component Designer to build a user interface, and using the Blocks Editor to specify the app's behavior. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Before making this Instructable we have gone through so many different ideas Like we will make app for Medicine shop, Restaurant, Cosmetic, automobile parts, Books store etc . Finally we have decided to make a App for Tea shop. The name for this App is decided to be "TeaCelebration".

Same Application can be used for all type of businesses with almost zero investment. So lets start it.

Step 1: Gathering of Tools

Main tool to build this project is to be familiar with MIT APP Inventor, Google Fusion Table, Google Console, Google Play store.Small knowledge of these is sufficient, No need to go in deep with these topic. However we have covered all the necessary steps to build this Project in a easy manner.

Other things required before starting this project is :-

1. Internet Connectivity.
2. MIT Inventor app installed in mobile.
3. Gmail Account
4. Fusion table- A Fusion Table is a Google service to support the gathering, managing, sharing, and visualizing of data. Data is stored in Google's cloud. All of the data are stored in a public table (or tables) that can be accessed via Google Drive, and allows different users to add information to the tables.

Step 2: Creating Screen of TeaCelebration

The TeaCelebration app makes use of several other types of components. It is assumed that you have learned how to use these in previous mentioned tutorials. Use the designer window to create the interface for the TeaCelebration. When completed, the designer should look like the attached figure named Screen1.

I hope you will be familiar with the component used to make this screen and how they are working. If you are having any problem regarding this screen then please see figure :- Component1 & Component2.

Step 3: How to Create a Service Account for Fusion Tables With the Google Developers Console

Fusion Tables are a great cloud-based way to hold data for your App Inventor app. Before you can use Fusion Tables, you need set up several things.

1. Open console.developers.google.com

Click on “Create New Project” or select the project from dropdown list if you are already have a project. Google will ask you for a project name. Choose a name that does not include spaces.Here we selected project name TeaCelebration. Which can be seen in the attached figure.

2. After creating project click the menu in the upper left corner of the developers console (three horizontal lines).

3. click API manager

4. If you’re not already looking at it, click on the API Manager from the Developer's Console menu.

5. search for "Fusion Tables" in the list of API and click on Fusion Tables API

6. Click on “Enable”

After it is enabled, the button will change, and it will prompt you create credentials.
(The API is only enabled for the currently selected project. If you only have one, no problem)

7. Click the "Go to Credentials" button to continue.

8. If you came from the “Go to Credentials” button (7), then find the sentence that says "If you wish you can skip this step and create an API key, client ID, or service account." Click on "service account".

8.1 (Alternative to 8) If you didn’t come from the “Go to Credentials” button, select “Credentials” after selecting the API Manager in the Developer's Console menu. Then click on “New credentials” then “Service account key”

9. Click “Create service account”

10. Give it a simple name without spaces, like TeaCelebration.

Check "Enable Google Apps Domain-wide Delegation" Type in your Product name, which is the name of the app you're building! Then click Create. After a moment, it will report "Service account created." Click "close"

11. Service Account ID - You should now see a page entitled “IAM & Admin” that shows the service accounts for your project. It should look like below, with the new service account listed and a (long) email address, entitled “Service account ID”. You will need that email address later in App Inventor.

If you need to get back to this IAM & Admin page, you can find it by going to developer console https://console.developers.google.com and selecting IAM & Admin from the three horizontal lines menu at the upper left. Then select either Service Accounts or Permissions to see the email address (service account id).

12. Get your Key- With a service account now set up, you can get a key to bring into App Inventor.From the API Manager Credentials page select your service account. click “Create Credentials”. Choose that you want a service account key. Choose which account you want a key for (you probably only have one, the one we just created -- select it from the dropdown list, and select Key type: P12. Click “Create.”

You will immediately download a new file that ends in .p12. This is the file you will need to upload into App Inventor.
If this file has any spaces in its name, rename the file to remove the spaces. App Inventor will reject the file if it has spaces or strange characters in the name, so you might as well check it now.

You’ll also be given the option of creating a password for the key, with the initial password “notasecret”. You can leave this as it is, unless you want to make your service account App Inventor app.

Whew! That was a long process. At the end of all this, you should have a service account, together with an account id (email address) and a p12 service account key.

Step 4: How to Create Tables to Share.

You now have the ability to share Fusion tables. Here we discuss how to create tables to share.

Open Google Drive at drive.google.com

1. “Connecting” Fusion Tables to Drive

Click “NEW”, then “More”, then “Connect more apps”.
(Fusion Tables may already be available in this menu, in which case, you can skip this step.)

Search for “fusion tables” and click the “CONNECT” on the Fusion Tables card.

2. Create a new Table

Click “NEW” in Drive, select “More” and click “Google Fusion Tables”.

It will ask you if you want to import an existing data file, or to start with a completely empty new table. The choices here are yours, and yours alone! Afterwards, it will bring you into your new Fusion Table.

How to set up the table’s data and structure depends on your app.

3. Share the Table with Service Account.

For App Inventor to be able to access this table, it must be shared with the Service Account email you created.
In the Fusion Table, click "Share" Under "Invite people" enter your service account email, from the Developer Console (e.g. [e-mail]) Ensure "Can Edit" is selected. Unclick "notify people" (the service account isn't a real person so it doesn't care about the notification) Click "OK", and when it says "skip sending notification?" click "OK". Click “Done”

Step 5: Determining Your Fusion Table URL and Table ID

In the blocks editor, you will set the WebViewer component's HomeURL property to point to the URL of your table. To find your Fusion Table's URL:

1. In your browser, navigate to the Fusion Table you just created.

2. Go to the menu and select Tools > Publish.

3. You'll see a notice saying: "This table is private and will not be visible".

4. Click the blue link that says "Change Visibility".In the list of "Who Has Access", click the blue "Change..." link next to "Private - Only people listed below..."

5. Choose"Public on the Web" or "Anyone with the link". Either of these settings will work for this tutorial. In the future, you should decide this setting based on the sensitivity of your data.

6. Click the green Save button, then the blue Done button.

7. Back on the Fusion Table page, go to the menu bar and select Tools > Publish. Select the URL from the top text box (labeled "Send in an email or IM"), copy the URL and return to App Inventor. You will paste the URL into the definition block for the TABLE_URL.

8. You can find the Table ID by browsing to your table, then selecting File > About this table in the menu.

Upload your .p12 key file

In the designer, upload the the key file you downloaded from the Developer Console. Upload it under Media, the same way you would upload an image file.
Click on the FusiontablesControl1 component, and find the KeyFile property. Click where it says "none" under KeyFile, and select the .p12 file you previously uploaded.

Step 6: Making Blocks in MIT APP.

Open the Blocks Editor so you can program the app's behavior. Before reading this step please view all attached Screenshot because I am sure that you can easily make blocks as shown in Screenshot without reading below Procedure.

1. It is important to perform some initialization steps whenever the app is started. These are done in the "Screen1.Initialize" block. For this app we need to set the initial values for the FusionTable component's service account property (set to global SERVICE_ACCOUNT_EMAIL) and the WebViewer component's HomeURL property (set to global TABLE_URL). Please refer attached screenshot for better understanding.

2. Set up the "resetForm" procedure as shown below. After recording an entry, this procedure resets the interface back to the original state.

3. List Picker Blocks

In the designer, you set the choices for the Tea and Snacks types by filling in the "Selection" property with comma separated lists. These pre-programmed choices will be displayed on the user interface so the user can select their Tea and Snacks. Their selections are stored in the Tea and Snacks variables.

4. Inserting Data into the Fusion Table

The FusiontablesControl component is used to send the data to the Fusion Table. This action will create a new row in the Fusion Table, setting the values of the various columns involved. App Inventor makes this easy to do, but you have to be careful that the insert query is formatted correctly.
First there is a list of column names, followed by a list of values. The order of the column names and value names must be in the same order so that they match up. An example of what this might look like is attached. First, setup a new Procedure With Result that takes a string as an argument and returns that same string surrounded by single quotes. The procedure quotify is used in the InsertDataInTable procedure to place quotes around all of the values in the query. It also takes care of "escaping" any single quotes or apostrophes that are input by the user. You can send single apostrophes as part of a value in the query, so the "replace all" block adds an extra single quote. Two single quotes in a row are interpreted as one single quote. The figures below show how to make the procedure. Notice that you have to tell the procedure block to add a parameter. You do this with the blue icon that pops up a small window where you specify how many items you need to act as parameters. In this case, you just need one. App Inventor will automatically name the parameter "x" but you can rename it to "str" by clicking on the x and typing directly into the block. Similarly, you can rename the procedure from "procedure" to "quotify" by typing directly into the block.

Use the Fusion Table component's InsertRow block. To construct the list of values, we use App Inventor's join text block.

For this app, the column names must match the column names of the table we created earlier. Their respective values are taken from the procedure's global variables. Note: If you did not use these exact words for your table's columns, then be sure to use your table's column names when you build your query.

5. Once the user has entered their name, Tea choices, and comments, they will click the Submit button. The app tests to make sure that the name, Tea, and Snacks fields have values in them, and prompts the user to try again if any of the required answers are missing. Notice that the compare texts block is used (find it under Built-in palette, Text drawer). This block compares two strings of text to see if they are equal. If all required information is present, it calls the procedure InsertDataInTable(see attached figure).

6. Handling the Response from the Fusion Tables Service

The FusiontablesControl.GotResult event will be fired when the app receives a response from Google's Fusion Tables Service. For an insert query, the service will return the rowID of the new row that was inserted or an error message if something went wrong. In this simple example, we use the "contains" block (find it under Built-in palette, Text drawer) to check whether the result string has the rowID in it. If so, then we know that the rowID was received, and we then invoke the WebViewer.GoHome procedure, which reloads the "HomeURL" as specified in the WebViewer's properties. Note that this set of blocks also calls the resetFormprocedure. After recording an entry, it resets the interface back to the original state.

You're done! Package the app by going to Package for Phone on the Designer. You can now test the app for the purposes of the TeaCelebration. Once you understand this tutorial, you'll be ready to make new Fusion Tables and modify the app to collect different types data from users.

Step 7: Uploading the App in Google Play Store

It is very easy to upload the app on Google play store. Simply google "How to upload App on Google Play Store" and you will get all information from google itself. Below is the link of google:-

https://support.google.com/googleplay/android-deve...

Only you need to upload the APK file in Play Console.

To save APK file go to Build in MIT App and select the option " Save .apk to my computer".

Finally after doing all this things your Application is ready to use. If you don't want to upload the app on Google Play store then simply share the app to your friend's/ Customers etc.

This is only for learning purpose and you are now having so many options to increase, Decrease , Show hide the Fusion Table.

This instructable is very Unique. Now its up to you to use the procedure. Will meet in Next Instructable.

Thanks for Reading.