Develop Android app – Without Programming

 

Earlier this month, I received my invitation of App Inventor for Android from Google. This web based tool makes it easy for anyone to create Android applications without having to know how to write in a programming language. Instead of writing code, you design the application visually by solving puzzles!

According to the principle, it reminds me a WYSIWYG-editor. While registration is available only with the permission of Google. App Inventor frees you from writing code, instead you are using a kind of block designs.

Lets create an app.

For better understanding let’s look at creating application “HelloPurr”. This appendix will show the image of the cat and the button for her feeding, after clicking a cat is meowing. We will create an application from scratch, considering all the development steps presented below:

• Create a new application on the website App Inventor
• Add components as well as a label containing «Pet the Kitty»
• Add a button with a picture of a cat
• Add audio component for playback meow
• The event handler that triggers the sound when you press the button

Getting Started

Initially set up your computer to work with App Inventor, don’t worry about phone setup(will directly install on phone). Then, create a new project and name it HelloPurr. The browser should be opened on the page designer, which looks like this:

 

Review of the development

In App Inventor application to build a united standard components. Components are the basic elements of Android-applications as ingredients in the recipe. Some components are very simple, such as Label(label), which simply displays the text on the screen, or Button, which implements a button. Others are more complex components: Canvas, which have an image or animation, accelerometer (Motion) sensor, which acts as the controller of the Wii, and determines when you shake or turn the phone, the components that send messages, play video receiving data from sites and many others.

Designer window

Looking at the design window you will see that it consists of several areas:

• In the middle – the white area called the Viewer(viewer). This is a place where you work with components. This area shows how your application will look like on your phone.
• On the left is Palette(palette), which shows the available components. Palette is divided into sections.
• The right of the Viewer – the list of components, which shows the components used.
• Under components – Media, which shows the used pictures and audio.
• More to the right – Settings components: color, text size, font, and so on.

You will need a kitten image and sound “meow”.

Create a label

1. Go to the palette and click on the Label, and drag it to the pager window. Next, enter the label text.
2. Look in the preferences window, there is shown setting the label. The parameter «Text», you can specify the label text, write it «Pet the Kitty» and press Enter. The text will change as the browser window and on the phone.
3. Change BackgroundColor tags, which are not specified. Can also change the color of the text in the parameter TextColor, in the end, change the FontSize of 20. 

 

Add button

Go to the palette and drag the Button in the browser window under the label. Then you will see there a rectangular button. You can click on it, but nothing happens, so we need to define the action by pressing a button.

1. In the Settings window shows all the options button, if it is not so, then click on the button in the browser. Click on the area under the Image.
2. Click Add … and then select the file and namite OK.
3. After downloading the images in the preview window you can see a button with a picture of a cat.
4. If you carefully look at the button, you’ll see “Text for button 1” on it, you can write there «Pet Me» (“fed me”) or leave blank.

 

To add a sound, drag the component from the palette Sound, then it will appear at the bottom, like an invisible component. Click on Sound1, and select the source file with a meow in the parameter Source.

Playing sound when you press

Now make a cat meow when pressed.

Click “Open the Blocks Editor” button to launch Block Editor window.
After this you see a downloaded file “AppInventorForAndroidCodeblocks.jnlp”. Launch that file, Java logo will appear and within minutes Input windows appear then click on Cancel.

Then in next window click on OK button. Then Block Editor window will appear in seconds. We did this step because we had not connected the mobile phone to the computer.

• Look at the Editor window units. Now we must make sure that when you click play a sound.
• Above you see a button Built-in and My Blocks, click on the My Blocks, below you will see a column that contains the tabs for each component: Button1, Label1, screen1, and Sound1.

 

• Click on Button1, then select the block when Button1.Click top.
• Drag the block when Button1.Click on workspace.

• Click on Sound1 in My Blocks and move the block call Sound1.Play inside a block When Button1.Click.

 

Now from the app inventor window click on Package for Phone then Download to this computer. It will take some time to pack and after this you will get .apk file. Transfer that file to your phone, install,run and congratulations! Click on the kitty, and you will hear a meow.

Hope you would have enjoyed creating the app- easiest way. If you would like to have an invitation, or would like to learn more about this tool, then complete the form at http://appinventor.googlelabs.com/about/