{"id":5533,"date":"2025-01-01T04:05:45","date_gmt":"2025-01-01T04:05:45","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5533"},"modified":"2025-01-01T04:09:55","modified_gmt":"2025-01-01T04:09:55","slug":"customer-record-app-part-1","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/customer-record-app-part-1\/","title":{"rendered":"Customer Record App Part 1"},"content":{"rendered":"\n

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

Today, I will show you how to make database app in MIT App Inventor in which we can keep data records such as customer records.<\/p>\n\n\n\n

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

<\/a>We used the dictionary blocks when we made the GPT voice assistant app.  <\/p>\n\n\n\n

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

However, I didn\u2019t go into the details of the dictionary block as I thought that it would make the video too complicated for my viewers. <\/p>\n\n\n\n

Today, I will explain the basic concept of a dictionary. In MIT App Inventor, a dictionary block is a way to store and organize data in pairs called “key-value” pairs. <\/p>\n\n\n\n

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

It’s similar to a real-life dictionary where you look up a word (key) to find its meaning (value).<\/p>\n\n\n\n

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

For example, let’s say we want to store information about a person, such as their name, phone number, and city. In a dictionary, we can assign a unique key to each piece of information. So, “name” can be the key to the person’s name, “phone number” can be the key to their phone number, and “city” can be the key to their city. <\/p>\n\n\n\n

Using a dictionary block, we can create this collection of information and associate each key with its corresponding value. We can access or modify specific values by referring to their keys.<\/p>\n\n\n\n

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

And, we can even store this dictionary in a database such as TinyDB or cloudDB. So, you will also learn how to store multiple data or a record in the database in MIT App Inventor.<\/p>\n\n\n\n

Let\u2019s explain this concept practically using a very helpful app that you can use in your future projects. In our scenario, we have a departmental store and we want to store data about our regular customers so that we can tell them about deals and offers. Basically, we want to make a customer record system and the customer data will include the name and phone number; keeping things simple here. <\/p>\n\n\n\n

Open up MIT App Inventor and start a new project. Call it CustomerData.<\/p>\n\n\n\n

Drag and drop a vertical arrangement from the Layout<\/strong>.  Rename it to mainScreenLayout. Make align horizontal and align vertical center. Make height and width both fill parent. <\/p>\n\n\n\n

Drag and drop a horizontal arrangement from the Layout<\/strong> and put it inside the mainScreenLayout. Make align horizontal and align vertical center. Make height 10  percent and width fill parent.<\/p>\n\n\n\n

Drag and drop a label from the User Interface<\/strong> inside this horizontal arrangement. Rename it to nameLbl. Check FontBold<\/strong> and make <\/p>\n\n\n\n

FontSize<\/strong>: 18<\/p>\n\n\n\n

Width<\/strong>: 25% <\/p>\n\n\n\n

Text<\/strong>: Name. <\/p>\n\n\n\n

Drag and drop a textBox from the User Interface. <\/strong>Rename it to nameTxt. Check FontBold and make <\/p>\n\n\n\n

FontSize<\/strong>: 18<\/p>\n\n\n\n

Width<\/strong>: 60% <\/p>\n\n\n\n

Hint<\/strong>: Enter name<\/p>\n\n\n\n

Select the horizontal arrangement and duplicate it by pressing Ctrl + C and Ctrl + V on Windows OR Command + C and Command + V on MacBook.<\/p>\n\n\n\n

Rename the label to phoneLbl and make text: Phone No<\/p>\n\n\n\n

Rename the textBox to phoneTxt.<\/p>\n\n\n\n

Make the hint: Enter Phone No<\/p>\n\n\n\n

Check numbers only.<\/p>\n\n\n\n

Duplicate the horizontal arrangement again but remove the label and text from it. Drag and drop a button from the User<\/strong> Interface<\/strong> inside this empty horizontal arrangement. Rename it to addBtn. Optionally give it a black background color. Check FontBold and make<\/p>\n\n\n\n

FontSize<\/strong>: 18<\/p>\n\n\n\n

Width<\/strong>: 35%<\/p>\n\n\n\n

Shape<\/strong>: Rounded<\/p>\n\n\n\n

Text<\/strong>: Add<\/p>\n\n\n\n

And TextColor<\/strong>: White<\/p>\n\n\n\n

Duplicate this button and rename it to findBtn and make text: Find.<\/p>\n\n\n\n

Add a listView from the User Interface<\/strong> below the buttons arrangement. Make sure that it is also inside the mainScreenLayout. Make height 50%.<\/p>\n\n\n\n

Duplicate the buttons arrangement and put it below the listView. Rename addBtn to reloadBtn and change the text to Reload. Rename findBtn to deleteAllBtn and change the text to Delete All.<\/p>\n\n\n\n

Last but not least, drag and drop a TinyDB from Storage.<\/strong><\/p>\n\n\n\n

The screen design is done so let\u2019s work on the blocks section.<\/p>\n\n\n\n

Make a global variable for a record that is an empty dictionary and a global variable for a list of records that is an empty list.<\/p>\n\n\n\n

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

First, we will set our global record to a dictionary with appropriate key-value pairs.<\/p>\n\n\n\n

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

Then, we will add this record to the list of records<\/p>\n\n\n\n

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

Then, we will store data in our tinyDB with the tag customerData.<\/p>\n\n\n\n

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

Now, we need a procedure for showing this customer data in our listview so let\u2019s make it first. Go to procedures and get the first type of procedure and call it updateListView.<\/p>\n\n\n\n

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

First , we will get a local variable from the variables section and make it an empty list. Inside it, we will put a loop that will go through all the records\/dictionaries inside our list of records and get all values for the different keys and use a join to make new items for our listForShowingData. At the end of the loop, we will give this new list to the listView\u2019s elements. Now, we need to call this updateListView procedure from our addBtn so call it at the end of addBtn.click event.<\/p>\n\n\n\n

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

Now, we need to show existing data in our listview when the app is started so get screen1.initialize event and call tinyDB\u2019s getValue procedure with tag customerData and assign the result to the list of records variable and then, we call updateListView procedure.<\/p>\n\n\n\n

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

When the user clicks the delete all button, we want to delete all customer records and also empty our listview.<\/p>\n\n\n\n

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

So, the basic app is done where we can add records with multiple data i.e. name and phone number using a dictionary and save it in our tinyDB. We can also load the current status of the DB when the screen is initialized and we can delete all records. I will cover search records by name and updating and deleting a single record in part 2 of this tutorial.<\/p>\n\n\n\n

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

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

Part 2 Tutorial is now available<\/a>.<\/strong><\/p>\n\n\n\n

You can also download aia file for this project (part 1).<\/p>\n\n\n\n

Customer Record App Part 1<\/a><\/strong><\/p>\n\n\n\n

And, you can also have a look at the video tutorial here.<\/p>\n\n\n\n

\n