Introduction: How to Use MIT App Inventor to Make a Secret Notepad App for Android

By plus.google.com/1013049419004363

Have you ever wanted to take note of something, but you didn't want anyone else to see? Maybe you needed to write down some confidential information and didn't want anyone looking at it? Perhaps you have a nosey friend or family member and you are worried they will read your notes?


Well now you can rest easy with the DIY Secret Notepad App for Android! Along with the ease-of-mind that comes with being able to hide your notes, you also get the satisfaction of having learned some basic coding concepts and built your very own app! The notepad app features the ability to write down a note and password protect it along with delete it quickly if the need arises! It is an easy to use and timeless tool for keeping your information safe away from prying eyes. The app will only work on Android phones, unfortunately MIT App Inventor does not support iOS app creation.


Keep in mind that this Instructable can be a little difficult if you have no prior coding experience, however if you follow the directions correctly and pay close attention, you too will be able to build your own notepad app! The concepts are simplified so that they make sense more easily, even if it does take a minute longer you definitely have what it takes to build your own app! The time commitment for this Instructable is pretty short!


Materials/Tools:

The only thing you will need for this instructable is a Windows or Mac computer (laptop is fine too!), though having an Android phone on hand to test your app (and to use the app on after you have finished this Instructable) could prove useful (it is not required).

The computer will need an internet connection and access to MIT App Inventor 2 at this link: http://ai2.appinventor.mit.edu/.

MIT App Inventor is a simple "drag and drop" app creating interface. It is a good starting point for coding and is completely free.

Step 1: Creating a Project

First off you'll need to login to MIT App Inventor 2 and create a project. Once you have done this you'll be presented with a screen much like this one (you will notice mine has a few things different, I have already set up the necessary pieces for this project in my work area, we will get to that in a moment).

Click and Drag

MIT App Inventor uses a "click and drag" interface, where the things you will need to create your app are already laid out for you, all you need to do is click and drag them into your work area (the box in the center that looks like what an app).

The User Interface

Once you have your project set up, click on the "User Interface" tab on the left. Click and drag a "PasswordTextBox" on to the app (the square in the center of the screen that I mentioned earlier, it had the time in the upper right-hand corner) in the middle of the screen. Next drag in a "Button". Last of all drag in a "TinyDB" from under the "Storage" tab (this piece is not visible, but it will be handy later). You may want to change the text on the button which can be modified in the "Properties" tab on the right under "Text" (as pictured in the second image for this step). Where these pieces are on the screen is not of any relevance, so do not spend any time worrying about it unless you would like to. You are only going to see this screen once when you create your password and then again if you ever reset the password. Other than that this screen is going to stay hidden away while you use the app.

Step 2: Looking at the Code

Now we are going to begin the coding section of this screen. Click on the "Blocks" button in the top right. You will see something like this (though there will not be any blocks in the center work area quite yet, I have these set up in advance for this project). The blocks are color coded by the section they come from on the left (green blocks come from the green "Logic" tab).

Explanation

In brief, what this screen does is broken down into two parts (you will notice there are two combinations of blocks separate from each other. The first set of blocks does a set of actions when the screen we just made (with the password box and the button) comes up or "intializes" and checks to see if there is already a password set up. If there is, it changes to the next screen we will make where it asks you to login. If there is not an account it moves on to the next set of blocks. The second set of blocks runs when we press the button we made earlier. When the button is pressed, it sets whatever is in the password box as the password, remembers that there is now a password made, and moves to the next screen so you can login.

Step 3: The First Block

This is the first set of blocks. You will notice a big block that looks similar to a bracket that surrounds all the other blocks. The text on it sayss "when 'Screen1'.Intialize do". This means that when the Screen selected in the pull down menu visible (the part that says "Screen1") starts (or intializes), all the other blocks inside this big block will run. This block can be found in the brown "Control" tab on the left. Drag it into the main working space and make sure the screen in the pulldown menu is set to "Screen1".

If and When

Next we are going to use an "if" block. It is the block right inside the "when" block we just made. It checks to see if something is the case (whatever is plugged into the "if" section or opening in it) and then runs the blocks plugged into the "then" section/opening. It is also found in the control tab. Now go to the blue "Math" section on the left and drag the block that looks like one opening next to an "=" sign into the opening in the "if" block we just made. Next go to the section called "TinyDB1" under "Screen1". Find the purple block that says "call 'TinyDB1'.GetValue" (it is purple and looks exactly like the one in the picture, except for the red block attached to it). Drag it into the left slot in the "=" block we made. This block checks a file or "database" on your phone to see if a value is there. We will be using this block to see if a password is already made. Drag the red block that is currently in the "valueIfTagNotThere" slot of the purple block into the "tag" slot instead. Type "accountMade" inside the red block that is in the "tag" slot. This is the name of the value in that "database" mentioned earlier. We will set what that value is in the next step. Now we need to tell the app what the value will come back as if it cannot find it in the database, that is what the "valueIfTagNotThere" slot is for. Go to the "Math" tab on the left and find the "0", it should be at the very top of the list. Drag that into the "valueIfTagNotThere" slot. Drag another into the right slot of the "=" block and type in "1" instead of "0". Lastly, go to the "Control" tab and drag out the "open another screen" block. Place it right below the blue "=" block, inside the "if" block.

Explanation

What is happening here is as follows: The screen starts and runs the "if" block. The "if" block checks what the value of "accountMade" in the database is and if it equals "1", the app switches to "Screen2". If it does not equal "1", it does nothing.

Step 4: The Second Block

In this block we are going to have the app wait for our button, named "Button1", to get pressed. While the block is brown, generally indicating it is from the "Control" tab, this time it is actually in the "Button1" section under "Screen1". Drag out the "when 'Button1'.Click" block. Next we need to grab two "call 'TinyDB1'.StoreValue" blocks from the "TinyDB1" section. They look very similar to the previous ".GetValue" blocks that we saw in the step before this one, the difference is that these blocks store a value instead of retrieving one. Put these two one after another in the "when" block. For the first one, put a text block (the one with the quotation marks around a space" from the red "text" section in the "tag" slot. In the "valueToStore" slot (this is what we will be setting the value in the "tag" slot to) we will be putting a "'PasswordTextBox1'.'Text'" block. You can find it by going to the "PasswordTextBox1" section under "Screen1". This just references the text in the password box on this screen. The next ".StoreValue" block will be setting the value of "accountMade". This is how the app will know whether or not you have already set a password. Lastly grab an "open another screen" block from the "Control" tab and plug it in below the last "call" block. Plug in a text block in the "screenName" slot and type in Screen2.

Explanation

This block of code checks sets the password to whatever is in the "TextBox", takes note that a password has been created, and moves you to the next screen when you press the button.

Step 5: Screen2

Before we start work on our second screen, we will need to create it. Click "Add Screen..." in the top left. Just like how we setup the first screen, we will need one "PasswordTextBox", one "Button", and one "TinyDB" object. There's nothing else to this step, you may want to change the text on the button which can be modified in the "Properties" tab on the right under "Text" (as pictured in the second image for this step).

Explanation

This screen serves as the "Login" screen. Once you have created a password, this is the screen you will see when you open the app.

Step 6: The Only Block

There is only one set of blocks for this screen. First drag in a "when 'Button1'.click" block from the "Button1" tab, then drag an "if" block inside it. For the "if" slot of the "if" block, plug in an "=" block. On the left of the "=" block place a "'PasswordTextBox1'.'Text'" block and on the right a "'TinyDB1'.GetValue" block. For the "tag" slot put a text block that says "password" and for the "valueIfTagNotThere" slot put a text block that says "n/a". Below the "=" block put an "open another screen" block and for the "screenName" slot put a text block that says "Screen3".

Explanation

This block set checks to see if the text in the "PasswordTextBox" matches the set password, and if it does moves you to "Screen3". If it does not, the app does nothing.

Step 7: Screen 3

Now on to the biggest part of our app, the notepad. First, create a new screen. Now we are going to need one "Textbox" and 7 different "Button"s. The textbox has specific measurements in the "properties" tab on the right, such that it fits well on the screen, which you will want to duplicate (the measurements are under "Width" and "Height" in the right tab, as picture in the second image of this step). You will also want to change the "Hint" text, which is the text that will display when nothing is written in the textbox yet.

Arrangement

Next you will need to add two "HorizontalArrangement" objects from the "Layout" tab on the left. Put them one after another succeeding the textbox. Next you will need to make 7 different buttons, with the first four being in the top "HorizontalArrangment" and second three being in the second "HorizontalArrangement". Since we are making many different buttons, you will need to name them accordingly in the "Components" bar on the right (picture in the third image of this step). For each button you will want to change its displayed text in the "Properties" bar and tghen make its name something similar in the "Components" bar so you can easily keep track of it. You can see what I named each button in the third image of this step. The order of the buttons or the placement of them in either "HorizontalAllignment" is arbitrary.

Make sure you have the buttons listed here (you can also find them in the first picture of this step) and that you have named them both in the "Properties" tab and the "Components" tab:

Save

Clear

Undo Clear

Delete

Log Out

Close App

Reset Password

Last of all you will need another "TinyDB" object.

Step 8: Initialize

There are 8 block sets to the code for this screen, but do not get discouraged! Most of them are very small pieces of code for operating the buttons and nothing more.

In this block set we need to have a "when" block for when the screen initializes. Inside that block we need a "set 'TextBox1'.'Text' to" block from the "TextBox1" section. In its "to" slot, plug in a ".GetValue" block and set its "tag" to "textBox" and its "valueIfTagNotThere" to nothing.

Explanation

This sets what is in the "Textbox" (our notpad) to whatever is stored in the database when the screen starts.

Step 9: Buttons Galore

Clear

For the first of these two blocks we just need a "when" block for when the "Clear" button gets clicked. Inside that block we need a block to set "TextBox1"'s text and in its "to" slot we plug in nothing.

Explanation

This clears the "TextBox" but not what is stored in the database.

Undo Clear

Now we need a "when" block for when the "Undo Clear" button is pressed. In it we need a block to set "TextBox1"'s text and in its "to" slot we will put a ".GetValue" block with a "tag" of "textBox" and a "valueIfTagNotThere" of nothing.

Explanation

This will restore what is in the "TextBox" to what is stored in the database.

Step 10: Just a Few More Buttons

Save

Now we need a "when" block for the "Save" button being clicked and inside it a ".StoreValue" block with a "tag" of "textBox" and in its "valueToStore" block a "'TextBox1'.'Text'" block.

Explanation

This will save whatever is in the "TextBox" to the database.

Delete

Next we need a "when" block for the "Delete" button being clicked and inside a "set 'TextBox1'.'Text'" block with a "to" of nothing. Below it a ".StoreValue" block with a "tag" of "textBox" and a "valueToStore" of nothing.

Explanation

This will delete everything in the "TextBox" and also get rid of any saved text from the "TextBox" in the database.

Log Out

Now a "when" block for the "Log Out" button being clicked and inside that block an "open another screen" block with a "screenName" of "Screen2".

Explanation

This will bring us back to the login page so that we need to type the password in again to access the notepad.

Close App

Now a "when" block for the "Close App" button being clicked and inside a "close application" block.

Explanation

This one is self-explanatory, it closes the app entirely.

Reset Password

Lastly we need a "when" block for the "Reset Password" button being clicked. Inside we need a ".StoreValue" block with a "tag" of "accountMade" and a "valueToStore" of 0. Below that we need an "open another screen" block with a "screenName" of "Screen1".

Explanation

This will get rid of our password and log us out, bringing us back to Screen1 so that we need to make a new password for our notepad.

Step 11: You Are Done!

That is all! You have successfully built your own Secret Notepad app! Now you can test it (click "AI Companion" under "Connect") through the "MIT App Inventor Companion app (https://play.google.com/store/apps/details?id=edu.... or download your app as is (click the first option under "Build" and scan the QR code to download the app to your phone).

I hope you enjoyed my Instructable and found it useful! Now that you have an understanding of how MIT AI2 works, feel free to modify my code however you like. A good challenge would be trying to save several notes at once under different names!