DEVTOME.COM HOSTING COSTS HAVE BEGUN TO EXCEED 115$ MONTHLY. THE ADMINISTRATION IS NO LONGER ABLE TO HANDLE THE COST WITHOUT ASSISTANCE DUE TO THE RISING COST. THIS HAS BEEN OCCURRING FOR ALMOST A YEAR, BUT WE HAVE BEEN HANDLING IT FROM OUR OWN POCKETS. HOWEVER, WITH LITERALLY NO DONATIONS FOR THE PAST 2+ YEARS IT HAS DEPLETED THE BUDGET IN SHORT ORDER WITH THE INCREASE IN ACTIVITY ON THE SITE IN THE PAST 6 MONTHS. OUR CPU USAGE HAS BECOME TOO HIGH TO REMAIN ON A REASONABLE COSTING PLAN THAT WE COULD MAINTAIN. IF YOU WOULD LIKE TO SUPPORT THE DEVTOME PROJECT AND KEEP THE SITE UP/ALIVE PLEASE DONATE (EVEN IF ITS A SATOSHI) TO OUR DEVCOIN 1M4PCuMXvpWX6LHPkBEf3LJ2z1boZv4EQa OR OUR BTC WALLET 16eqEcqfw4zHUh2znvMcmRzGVwCn7CJLxR TO ALLOW US TO AFFORD THE HOSTING.

THE DEVCOIN AND DEVTOME PROJECTS ARE BOTH VERY IMPORTANT TO THE COMMUNITY. PLEASE CONTRIBUTE TO ITS FURTHER SUCCESS FOR ANOTHER 5 OR MORE YEARS!

MIT App Inventor Guide

Note: For full resolution images, visit the category “TheDischarger → ai” in http://devtome.com/lib/exe/mediamanager.php

Introduction

One of the things I've noticed nowadays with programming is how easy it is for someone to learn a programming language. Now, I mean that in a very basic sense, of course that the point of learning to program is not to learn the actual syntax, but writing efficient code with a clever structure. However, sites like http://www.codecademy.com/ and http://teamtreehouse.com/ offer user friendly ways to code in a stress-free environment. There are plenty of sites to learn how to program either individually, or with a tutor (paid of course).

MIT App Inventor is yet another friendly way to get people into programming without the same environment you'd usually expect from an IDE (Integrated Development Environment). The IDE is entirely web based with little requirements to installing a program at all. This means that the environment is completely utilizing cloud based services to allow the user to create their own Android Apps, as well as store their resources used by the app onto their server. Like online Google Applications, everything you do in that environment is synced between your client and MIT's server. The user can work anywhere they want as long as they have a functional, up to date computer with working a working internet connection. The language that App Inventor uses is mostly Java (which is most of Android Applications), but with a combination of Kawa Scheme in order to utilize their 'block' programming portion of development.

Instead of an environment where the user has to type in code, the actual programming is done in a 'blocks editor' environment. These blocks are treated as puzzle pieces, where specific ones can only be connected to logical parts of other code. This eliminates the need of having the user remembering where not to place code and making petty mistakes that they will later regret when the code is upon pages of pages. Speaking of organization, the blocks editor provides a nice view of different blocks, or methods the user has created in a 2D, drag and drop view. Rather than having clustered and clunky code in which a beginner can easily create, the blocks editor offers a nice view of the 'code' and offer auto-arrangement options. It should be obvious by now that MIT's App Inventor program was specifically geared towards people with no or some intention of learning how to program. While it still is a nice concept and great way to get beginners into the technology bandwagon, keep in mind that an experienced coder will find traditional environments far better.

The style of this tutorial will be about explaining what the basis of the program will allow you to do, and then showing you examples of what you can do. This means that you are to be encouraged to either build off of the shown examples or create a different version of it. As long as you're able to create your own app without looking at another person's code (of course, references and documentation are allowed), you're able to build anything you want to this program's limits!

Setting up the emulator

While you're building your app, you have two different ways to test it, using your phone or your computer. If you have an Android phone, and only an Android phone, you can connect it through two ways. One being the MIT AI Companion App on Google Plus which syncs up your project to your phone wirelessly (has to be under the same router), or through a USB. However, if you don't have an Android phone, you'll need to use the Emulator program provided. The guide is at http://appinventor.mit.edu/explore/ai2/setup-emulator.html which is compatible for Macs, Windows and GNU/Linux devices (note that the emulator is tremendously buggy and might require further troubleshooting if you cannot get it to work. Remember that google is your friend). After you've done all the setup, you can test out a program when you're done creating it!

App Inventor Startup Screen

There's actually very little to do with setting up beforehand. MIT's Cloud Based applications requires the user to have a google account, in which keeps all of your programs synced to that account. This is a very useful feature so that you wouldn't have to rely on the same computer. I will now begin to explain what certain parts of the Startup screen, going through step by step with a picture with the corresponding number to which I am explaining. If you are unable to view the picture, please read the note at the beginning of the page but know that it isn't needed.

From the 'Projects' drop down context menu:

  1. Context selection 'Start New Project' will allow you to create a new project
  2. Context selection 'Import project (.aia) from my computer …' will allow the user to import an 'App Inventor' project file from their computer in the account
  3. Context selection 'Import project (.aia) from a repository …' will allow the user to import an 'App Inventor' project file from a web repository (i.e. github)
  4. Context selection 'Delete Project' will allow you to delete the selected project
  5. Context selection 'Save project' will allow you to manually save the project you currently have open. This is slightly useless since App Inventor autosaves every change (something to note about)
  6. Context selection 'Save project as …' allows you to save the project as an entire new one
  7. Context selection 'Checkpoint' allows you to save the project as an entire new one, very similar to 'Save project as …'
  8. Context selection 'Export selected project (.aia) to my computer' allows you to download the current project you're in as a App Inventor project file onto your computer

For now, we're going to create a new App Inventor project. You can either click the context selection 'Start new project' from the 'Projects' drop down or click the 'Start new project' button below the 'MIT App Inventor 2: Beta' logo. After this, a prompt will show allowing you to name the project, this can be anything but for our tutorial, we chose 'DevToMeApp'. You should now be in the 'Design' view of the your project, I will explain how to manage and utilize all of this in the next chapter of my MIT App Inventor tutorial.

The Designer View

Whenever you launch up the App Inventor creator, you will automatically open the last project you were working on. You're confronted with the 'Designer' view, which allows you to add elements to your program, either with a visual function (buttons, labels, sliders) or background elements (bluetooth, tiny databases). I will now begin to explain what certain parts of the 'Designer' view, going through step by step with a picture with the corresponding number to which I am explaining. If you are unable to view the picture, please read the note at the beginning of the page but know that it isn't needed.

  1. The 'Palette' allows you to add different elements from different labeled categories to your program with a simple drag and drop. This can range from simple buttons and text to interacting with bluetooth and internet servers.
  2. The 'Viewer' is a representation and editor of what the app will look like when it's built. This is the place where you can organize and 'drop' elements in from the Palette
  3. The 'Components' is where the elements are listed. You can rename or delete elements from here anytime. It should be noted that you are suggested to rename elements as you build more advanced applications. This 'will' save time and ease readability as you code your program (Unless you are a wizard!)
  4. The 'Screen' menu is a new feature in App Inventor 2. This allows the programmer to add in multiple screens to interact with, but can be very buggy and annoying if using so. Currently, there is no way to rename the first screen that you start off with (Screen1)
  5. These two buttons allows you to switch from 'Designer' view to the 'Blocks' editor (which is where you will do the coding)
  6. The 'Properties' menu allows you to change the in-depth functions of a component depending on the one you've selected. For Example, the properties menu of a textbox allows you to change the text in it while a image component allows you to change what picture it can display. I am going to list the following important properties of the Screen component. The lesser important ones are not mentioned, but should be obvious
  7. This aligns all the components on the screen towards the Center of the screen, this is merely a visual property and has no effect on the code
  8. This changes the color of the screen's background color, this is merely a visual property and has no effect on the code
  9. Whenever you close this screen, the animation will always be depending of the operating system of the phone, this is merely a visual property and has no effect on the code
  10. This specifies if the screen should keep the screen in a fixed portrait or landscape view, this is merely a visual property and has no effect on the code
  11. This specifies if the user can scroll down their screen if there are components offscreen, this is merely a visual property and has no effect on the code
  12. This specifies the title (displayed top left) of the screen, this is merely a visual property and has no effect on the code
  13. This specifies the 'version' of the entire app, this is merely a visual property and has no effect on the code

As a recap, designer view allows the programmer to insert components of their program as well as layout the visual design of such. It's recommended that you finish everything you should have done in the Designer view so that you'll want have to come back to this view as often

Using The Designer View

Now, we're going to start adding components from the Palette into our program's 'Viewer'. Realise that we cannot start to code unless if we have something to code off of, afterall, we can't make a sandwich without the bread (or for all I know at least). We'll want our Screen to be all nice and tidy, this is called Formatting. If you would, copy the settings from the properties of Screen1 from the last section of this tutorial. Now, we'll add layouts to our screen. Arrangements are what lays out the format of the components on our screen. We can have a Table Arrangement to have multiple buttons in a 3×3 grid, a Vertical Arrangement to have buttons stacked upon each other or a Horizontal Arrangement so that buttons can be side by side. For this demonstration, I use a Horizontal Arrangement which allows me to lay visual components side by side (I use the term 'visual' because you can't really see a bluetooth component). In case you still didn't know, in order to insert a component, you will need to drag and drop the component of your choice into wherever you would like that component to be in the Viewer. I will now begin to go in depth of the properties of not only the Horizontal Arrangement, but also proper component organization and the common properties of most component you're going to come across. This will be another step by step picture, so pay attention to the numbered list with the corresponding number on the picture. If you are unable to view the picture, please read the note at the beginning of the tutorial but know that it isn't needed.

  1. There a few things to know about an Arrangement. All it simply does is specify the layout of how visual components are arranged. This can go a long way when it comes to the visual appease of an application. By default, it's size will change depending on the size of the components inside it. For example, two buttons with the width of 80 pixels each will automatically resize the Arrangement to 160 pixels wide
  2. A Horizontal Arrangement will allow components to be in a side by side arrangement, where components cannot go vertically
  3. A Table Arrangement will allow components to be in a grid-like arranged. There are property settings defining how many components can be in a row and columns
  4. A Vertical Arrangement will allow components to be stacked upon each other. You cannot arrangement components side by side with this
  5. Under the 'Components' menu, this is where all of your components are shown. In my demonstration, I have the arrangement renamed to 'arrngButtons' where 'arrng' is shortened from the word Arrangement. As a programmer, it's recommended that you should keep to abbreviations in names. Take note that the first word in the name is uncapitalised, while the second is. This style is called 'Camel Case', where the capitals of the name resembles the humps of a camel
  6. Under the properties, the Align property will tell the arrangement how to align the components in it. This will only be configurable if Width is either set to a custom size or 'Fill Parent…'
  7. 'Visible' is a common property among all visual components. This specifies if the component is shown on screen. Having disabled will make the component disappear from the screen completely and non-interactable
  8. 'Width' is a common property among all visual components. This specifies the width of the component with three settings, automatic (where the component will automatically resize if needed), Fill Parent (uses all the space it's given) and a custom size.

While it's definitely not going to affect the functionality of your program, keep in note that you'll want to have a nice looking GUI (graphical user interface). I would highly suggest that you keep all of your components in an arrangement for easy formatting for the future. Until then, we'll start building a program in the next chapter!

'HelloPurr'

'Hello, World' is a simple computer program just to show how a programming language works in terms of functionality and syntax. We're going to do something remotely similar here. We'll have a picture of a cat who will play the sound of a cat purring. There are a few things to note though when I say 'a picture of a cat'. It's not really a picture, but a button component with it's visibility set to the picture of a cat. When we tap the button, it will play a sound file named 'meow.mp3'. The files can be found at http://appinventor.mit.edu/explore/ai2/hellopurr.html along with the actual tutorial this section is portraying.

  1. Remember that Horizontal Arrangement we've created earlier? Now we're going to put it to use. Drag and Drop the 'Button' component inside the arrangement under the viewer. Doing this will connect the component into the arrangement, changing around it's position inside the arrangement
  2. Here we have the properties, this 'FontBold' format option will render all text inside to a bold formatting. Because we want a picture for a button without text, this will be useless to us
  3. This 'FontItalic' format option will render all text inside to an italic styled formatting. Because we want a picture for a button without text, this will be useless to us.
  4. This 'FontSize' format option will change all text inside to the inputted font size. Because we want a picture for a button without text, this will be useless to us
  5. This 'FontTypeFace' format option will render all text inside to the inputted font type. Because we want a picture for a button without text, this will be useless to us
  6. Here, we can change the image of the button (by default, it's none). Assuming you've already uploaded the 'kitty.png' file, you are to change the image into the 'kitty.png' selection (note that all media uploaded will display here, so don't make a mistake by selecting 'meow.mp3'). If you look at your viewer, you will now see that the button is now the picture of the cat you've just uploaded
  7. This 'Shape' option changes the shape of the button. Because we have a picture for a button, this option is virtually useless to us
  8. This 'ShowFeedback' option lets us know if we have tapped the button by slightly fading itself out. It's up to you if you would like to change this
  9. By default, you will have 'Button#' inside the 'Text' property box. This displays text inside the button. You would want to get rid of any text inside this you wish to eliminate any floating text inside your image
  10. 'TextAlignment' changes the alignment of the text to its left, middle or right
  11. This component is a 'Sound' media component. This will initialize a sound to be used later. To set this, drag and drop the 'Sound' component anywhere on your viewer (because this is a non-visual component, it doesn't matter where it gets placed, as long as it's in the viewer). Under the properties menu of this component, there will be a 'Source' property, set this to 'meow.mp3' and you're ready to go

Look at the picture in this section and see if you have exactly what I have (discounting names and formatting options). Now that you've set everything up in your Designer, it's time to start programming!

Blocks Editor (The actual coding)

One of the beautiful things of programming is being able to learn new things as you go on. Throughout this guide, you'll obviously learn things i'll teach you directly, but it's up to you to find even more stuff you can do. In this code, we're only focusing on tapping a button to play a sound effect. This is very simple without question, but with more exploring and you'll be able to realize that you can do so much more than just that. Over here, we have the Block Editor. Our 'Blocks' are arranged into categories named depending to their function. I'll go through with what the categories are mostly meant for and the where you can find the basic functions to any program.

  • The 'Control' category is responsible for the decision making within your program. All of the 'if' statements are located here
  • The 'Logic' category is responsible for 'True' and 'False' statements (booleans) and contains boolean comparators.
  • The 'Math' category is responsible for math operations like Adding, Subtracting, Multiplying, Dividing, Modulo (dividing two numbers and returning the remainder), Sine, Cosine, etc. You can find number comparators here (>, <, ⇒, =<, =)
  • The 'Text' category is responsible for 'string' (text) based operations like joining text, getting the number of characters, comparing texts or even making all of them uppercase.
  • The 'Lists' category is responsible for creating and managing arrays (multiple values)
  • The 'Colors' category is responsible for creating and managing colors (based on a RGB color scheme, 0 to 255)
  • The 'Variables' category is where you can initialize, set and call variables.
  • The 'Procedures' category is responsible for creating functions that usually would make repetitive jobs easier

Hopefully that gave you a good insight of what you can do here. You'll also notice that these puzzle pieces either have a arrow protruding from the bottom or from the right. These can help you identify which goes which. Arrows protruding from the bottom are meant to have other pieces of code executed along with it. Arrows protruding from the right are meant to 'get' data, which usually is in the form of a variable. The task in mind is to be able to have button interaction along with sound, so you would search for your button component. Each component has different functions, and with different functions comes with different programming. Because buttons are meant to be tapped upon, they will have a 'on-click' function, executing any piece of code you place into it if the button is clicked. Go ahead to drag and drop 'When btnCat.Click, do' onto your Blocks space. Then, open up the blocks from your sound component and drag out 'call sndPurr.Stop' and 'call sndPurr.Play'. There's a reason why we called (to execute) the sound component to stop and play the sound. Remember that programs are in a procedural order, anything above the first code will be executed and then the one below it. In our version of the program, if we already have the the sound playing, then it will stop it and play it again. If we didn't have the 'call sndPurr.Stop' statement, then we would have overlapping sounds if one were to rapidly tap on the button. Go ahead and test it with the 'call sndPurr.Stop' and without it. By the end, you should have an app that upon tapping the kitty, it will purr. It wasn't so bad, now was it? Notice that there's going to be a lot more information that you would need to build a simple app, but it's all for the best if you wish to learn programming. Until then, we'll go on to create an animal soundboard!

Programming


QR Code
QR Code mit_app_inventor (generated for current page)
 

Advertise with Anonymous Ads