chitika

Wednesday 30 July 2014

Create Your Own First Android App Easy(No Programing)

App creation is one of the passion of today's teenagers to earn their own pocket money.I had already provided with the best android app development books here,But many of them take a back foot because of the lot of programming and technical skills to create your own app,to simplfy all these here comes MIT App Inventor.

MIT App Inventor-

According to winkipedia-
App Inventor for Android is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).
It allows newcomers to computer programming to create software applications for the Android operating system (OS). It uses a graphical interface, very similar to Scratch and the StarLogo TNG user interface, which allows users to drag-and-drop visual objects to create an application that can run on Android devices. In creating App Inventor, Google drew upon significant prior research in educational computing, as well as work done within Google on online development environments.

Things Required-

Just download the required things from here-


What are we creating?
You might be wondering what we are creating with a cat and dog,to keep it simple for beginners we are creating a small app with the photo's of cat and dog and when we touch the cat it shouts meow and when we touch on the dog,it barks and two other buttons one to pause the cat and the other to pause the dog thats all for now you can do a lot more if you want but for now i am keeping it just simple for beginners.Just follow the simple steps below.

Creating Your Own First Android App-

Step-1

GO to MIT APP INVENTOR   log in using your gmail account as it's a google service,now we will be presented with the screen as shown below

.But as i created some projects before they will not be present in your screen ,now click on new project and name the project as "My_First_Android_App" or some other thing you like.
Remember it wont allow spaces there fore i used underscores,now click ok.
You will be presented with the screen as shown below.

Step-2
A brief description of the windows
The first window Palette-It contains all the required components to be added to app.
The second window Viewer-It is the place where we add  the components to our apps.
The third window Components-it contains all the components added.
The fourth window MEDIA-it is present below components window it is to upload photo,sound.video or any other media.
The fifth window Properties-its the place where we can change the features of a component added. 
 now we are gona make a quick build our app.

Step-3
1) Drag and drop 4 button component from the Palette>User Interface to the viewer as shown below.




2)Now drag and drop 2 sound components from Palette>Media to the viewer as shown below.


3)Now select upload file in the media window and upload all the four pics,and sounds u have downloaded.

for now this are the only things required.

Step-4
1)Now select the "Button1" in the components window click rename and rename it to cat click ok

Now go to properties window click image and select cat.jpg and click ok.Then go to text in the properties window and remove the text and now select width in the properties menu and click fill parent and click ok.


Now select "Button3" in the components window same as above remame it to dog and select dog.jpg in image and remove the text and select width and click fill parent then click ok 
Select "Sound1" in components go to properties and select the source to "cat meow.mp3"

Do the same for "Sound2" select "dogbarking.mp3"
Now select button2 go to properties change the text to "press to pause cat"and same for button4 change it to "press to pause dog"
Select "Screen1" from components window and in the properties window align horizontally will be-left change it to centre.Now it looks like below.




Step-5
Now the main and also easy part begins "Block Editor" click on "blocks" on top right of the screen
You will be presented with a window as shown below.

In the left side you will be having Built in,Screen-1,Any component.For this tutorial forget about the rest we would only be using "Screen1" Now click on "cat" under screen1 you will be presented a pop up window now click and drag  the first 1 stating "when cat click do" to the working window,Now click on sound1 select and drag the second block stating "call Sound1 play" and fit it in between the first  block as shown in the figure.

Now you might have understood how to use the blocks,it forms a sentence like-"When the cat button clicks play sound1"do the same for the third button the dog click on dog and select 1st block stating when "when dog clicks do" now click on "sound2".Drag the second block stating "call sound2 play"It will appear like the below.


Step-6
Now we have to add buttons to Pause the dog and cat.click on "Button2" drag the first block stating "When Button2 click do",now again click "sound1" drag the first block "do call sound1 pause"  fit them both,Now do the same for button4 drag the first block stating "When Button4 click do",now again click "sound2" drag the first block "do call sound2 pause" fit them both now the whole blocks blocks like this.


Thats it,you have successfully created your own first android app.now time to test your android app, actuallu you can connect your phone to app builder and also see the changes taking place in your app as you are building but for that your phone and your pc must be under same wifi,Even if you don't have not a problem.

Step-7
You can download your created android app directly to your phone now just click Build>save appk to my computer.That's it you have downloaded the file to your pc transfer it to your android  phone install it that's all the fun begins.You can download the created app from here or here
Remember i have not even used 3% of the app builder features and build this app you can create wonderful apps using all the features you can see them from the help tutorials to learn more.
Take a second to like our page and In case of any queries don't hesitate to speak your mind below.
Also read-


0 comments:

Post a Comment