{"id":5498,"date":"2024-12-31T16:58:07","date_gmt":"2024-12-31T16:58:07","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5498"},"modified":"2024-12-31T16:58:08","modified_gmt":"2024-12-31T16:58:08","slug":"get-or-read-data-from-google-sheet-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/get-or-read-data-from-google-sheet-in-mit-app-inventor\/","title":{"rendered":"Get or Read Data from Google Sheet in MIT App Inventor"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n\n

In today\u2019s MIT App Inventor tutorial, I will teach you a simple and easy way of reading data from a Google sheet and showing it in an MIT App Inventor App.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Create a new project in App Inventor and name it ReadStudentData.<\/p>\n\n\n\n

Make align horizontal center for screen1.<\/p>\n\n\n\n

Now, add Listview from the user interface. Make the width 90% and the text color yellow.<\/p>\n\n\n\n

Add a Button from the user interface. Rename to loadDataBtn. Make the background color yellow. Font bold, font size 20, shape rounded and text color black.<\/p>\n\n\n\n

Add a Web component from connectivity.<\/p>\n\n\n\n

Now, either create a Google Sheet if you don\u2019t have one already by clicking on the plus button and writing the data.<\/p>\n\n\n\n

https:\/\/docs.google.com\/spreadsheets\/u\/0<\/a><\/p>\n\n\n\n

I am going to use the same sheet that we used in a previous tutorial for sending data to a Google sheet from MIT App Inventor.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Click on the blue share button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

A dialog will open up. Choose \u201cGeneral access\u201d and in the options, choose \u201cAnyone with the link\u201d. <\/p>\n\n\n\n

Now, press copy link button and press the done button to close this dialog.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Paste the link in some text file. It will look something like this:<\/p>\n\n\n\n

https:\/\/docs.google.com\/spreadsheets\/d\/1tLlr0ps7-gxNV1-NCTMS4fYvynvUPu8Cxkz8\/edit?usp=sharing<\/a><\/p>\n\n\n\n

Replace edit?usp=sharing by export?format=csv<\/p>\n\n\n\n

Make sure that it is exactly this: export?format=csv<\/p>\n\n\n\n

Now copy this entire changed link (don\u2019t use below link and use the one from your own google sheet):<\/p>\n\n\n\n

https:\/\/docs.google.com\/spreadsheets\/d\/1tLlr0ps7-gxNV1-NCTMS4fYvynvUPu8Cxkz8\/export?format=csv<\/a><\/p>\n\n\n\n

Go back to your app inventor project and its designer view, and choose web1 component in your project. In its properties, paste the entire link with the updated export part in its Url property.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, go to the blocks section.<\/p>\n\n\n\n

Make a global variable.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Get the button click event for loadDataBtn and call the web component\u2019s Get procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, this procedure Get will trigger the GotText event of Web1 component. So get that event from Web1.<\/p>\n\n\n\n

First of all set the sheetData variable to list from csv table block from the lists section: the text coming in from our google sheet is the responseContent.<\/p>\n\n\n\n

Remove the first row from this sheetData as it will contain headings: timestamp, name, and age and we don\u2019t want that to show. You don\u2019t need to do this if your sheet doesn\u2019t have column headings.<\/p>\n\n\n\n

Next, make a local variable and assign it to an empty list. Now, we will go through our sheetdata which is actually in rows and columns form (table form) using a for loop from control. Each item in this sheetData is actually a row from our actual Google sheet so it has 3 pieces of info: timestamp, name, and age. Hence, it is actually a list too. So, for each item, we are going to get the value inside it for index\/column 2 (name) and index\/column 3 (age) and join them together and add it as an item to our local list: datatobeshown.<\/p>\n\n\n\n

Once we are done, we will set our listview elements to our local list.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Think about why I am using a local variable and not a global variable for dataToBeShown list. I would love to hear your answers in the comments.<\/p>\n\n\n\n

I hope you liked this tutorial and found this method of reading data from a Google Sheet super easy.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

You can have a look at the video tutorial here:<\/p>\n\n\n\n

\n