Create Your Own App With No Programming Knowledge
Today we are going to be creating a simple ‘Hello World’ app (using ai2.appinventor.mit.edu) where the user presses a button and the words ‘Hello World’ appear on the screen. Simple right, so lets get to it.
I recommend that next you get yourself familiarised with everything. Find your way to the screen in the following image and make sure that you know what all of it does. Most of the properties and tools here will be fairly self explanatory but if you’re not to sure what one of the tools does specifically normally they will have a question mark on there right hand side which when scrolled over will tell you a bit about the tool.
That being the case we don’t need to worry about all of the tools for now as today we’re just going to be making something simple.
It is also important that when creating apps in App Inventor (ever if its your first time or even if you’ve been programming for years) to keep our programming practices height. One of these being the use of Camel case, camel case looks something like the following: “exampleOfCamelCase”. As you can tell from this example camel case starts with a lowercase letter and then every subsequent word after that will be joined but will start with an uppercase letter. We will be using this for our variable names in a later tutorial but for now we will be using them to name our objects as you can see in the following image.
As you can probably guess one of the main things we need for this app is both a button for the user to press and a label for the words “Hello World” to show up in. A label is simply a way of putting characters and strings of text onto the screen and can be repositioned like anything else in App Inventor. That being the case they shouldn’t be confused with Text Boxe’s which are used in App Inventor to allow users to enter text. You can change the text displayed on the button and the text displayed in the label using the options to the right, these will be the settings that the app will launch with and can be change at any time the app is running although if they are changed and the app is closed if a database (Of which we will talk about in a later article) or something similar isn’t being used then the app will restart using these properties.
After you have found this new page locate the button (it will be on the leftmost panel) and click on it. Just like everything on app inventor once you have done this you will be able to see a huge range of things that you are able to do with that object. Here we are going to choose the button click event and drag it onto the page. After this we are going to look into our labels properties and choose the text property that allows us to change the contents of the label. Once we have done this do the same again but click on the ‘Text’ option. This will bring up a wide range of text related properties and tools that can be used in a whole lot of different ways. For now lets just choose the text field and drag it onto our blocks.
After you have done this your app if ready to test. You can do this in one of two ways. The first and prefered of these is to download the App Inventor Companion app for Android. To use this download the app and open it ready (make sure that it is connected to the same network as your main workstation) then click ‘Connect’ and ‘Ai Companion’. Here you will be presented with a QR code. Once you have reached it simply click the can button on the app, scan the QR code and the app will start to launch (This may take some time).
The second option is to use an Android emulator although using the free service of this only allows for 10 uses a month. You can do this by clicking the ‘Build’ button and saving the .APK file to your computer. Once you have done this sign up for a free account on the website linked above and upload your APK file.