This article will guide you step-by-step to building a Free Android App with an App Inventor website on your PC without an Android cell phone.
(Note: In my article I have use the word, Google App Inventor for Android Page, Actually Google have retired their app inventor, so this is joners inventor appspot.)
App Inventor for Android Page offers a free tool where you can build and customize your own free Android application. The good thing is you don’t even need to have a cell phone! Of course, you can use your Android phone to make the application but Google offers a free emulator which allows you to create your Application. App building is accessible on normally common platforms including Windows XP, Linux, and Macintosh. Indeed, almost anyone can create an Android App. All that is required downloading some other tight stuff. But if you follow these steps then you will have your own customized android app built on your pc without using android cell phone.
Go the Android App Inventor Page
First you have to open the App Inventor for Android Page where you will find some steps on how to set up the app. You must watch the video which shows what we will be doing. Then click the “Get Started” green button under the video.
Set Up Your Computer
Click the first and foremost link for ‘Setting up your computer.’ Check the platforms to make sure your computer is able to integrate the app making software. Then scroll lowered the web site and click the links for Java to be positive the fresh Java is up and running on your browser. If not, you can download it there. After you experience established which you suffer a suitable platform and are totally Java enabled, scroll at a low level and click the ‘Instructions for installation,’ selecting your pc platform.
Installation
Administrative privileges are needed before going to the next step which is to download and install the App Inventor Setup software package. It is very simple, download onto your desktop then after downloading is complete, click to install. You can just keep continue to clicking “Next” button during the installation as there are no extra tool bars included in the setup.
The Emulator
At the end of the page where you have downloaded the App Inventor Setup software package, there is a link for “Build your first app with the emulator.” Click that link. You also can build your first app on your cell phone by clicking the link “Set up your Android Phone.” Also please note: this tutorial is only for creating an android app with the emulator. The emulator application that you downloaded and extracted will be automatically saved under your directory: C:\Program Files\AppInventor.
On the Build your first app with the emulator page, you can watch the tutorial video again or just download the Kitty picture (kitty.png) and Meow sound (meow.mp3) used in the video to create your first Android App.
Sign into Google Account
Go to the App Inventor Web site. If you are front of the login window, you need to sign into your Google Account. If you do not have a free Google Account, you may need to sign up. On the App Inventor Web site page is where you create your new project, as was shown in the video. You can call it whatever you like but the demo uses “HelloPurr.”
For adding the buttons and sounds you will need to execute the emulator by clicking the silver colored “Open the Blocks Editor” on the upper right hand side of the page. The program should pop up an install box, click on “Run” and “Open” for the pop-up boxes. Your spyware software may ask if ‘adb.exe’ and ’emulator.exe’ may run, you should click “Yes” as this is for the emulator.
Also, the browser’s security bar on the top of the page (yellow drop down box at the top) may appear asking you to give permission for the program to start. You can click the yellow security box and then click on “download file.”
This will all take a little time so you should wait. It may look like nothing is happening, that is all right. The software is running in the background and it takes a while the first time you set it up. As long as your computer is not freezing up, then its mean all things are working well so hold on. Your computer should not hibernate or sleep at any point of this process. If it does, you may need to reboot your computer and process will start from the beginning.
Blocks Editor
After a moment, a new low green box will pop up. This is your Blocks Editor for the cell phone emulator and with it you can create and edit your first Android App on your pc. Click the “New emulator” if the cell phone graphic does not appear within a few cycles of time. You may receive a message stating that it take a few minutes or longer the first time you set up your emulator. You will get familiar it is done when the cell phone picture appears on your screen.
Unlock the Emulator Cell Phone
The next hard task is unlocking the virtual phone. Put your mouse on the green lock button, over the arrow, and drag it to the right-side. It should look like a long green line being dragged over and will automatically “unlock” the emulator phone after you have done it successfully. This will change the screen from the left picture to the right one.
The Emulator
Now there are two windows open for the cell phone emulator. One is a black DOS based window and the other is phone. If you accidentally close one of them, just click “New Emulator” on the light green screen (Block Editor) to get it re-open.
Recap
For go back to the App Inventor Web page. Recap what you have done, following the video presentation,( If you need to watch the video again, open it up a separate browser window). Click the “New Project” and enter a project name “HelloPurr”
Then put your mouse click on the silver button “Open the Blocks Editor” on the top right hand side of the page, the new light green (Blocks editor) screen opens. Put the green screen aside for now and go back to the App Inventor Web page
Create Button
Just click on the “Basic” menu and Drag a ‘Button’ to the white Viewer space in the middle, as was presented in the video.
Upload Kitty Picture and Meow Sound
After you have dragged the Button into the Viewer space with all success, go to the ‘Properties’ column along the right side of the web page. Scroll lower to the “Image” selection, click on it, choose ‘Add’ and a browser screen opens up for you to upload the cat picture that you have downloaded before called “Kitty.png” Click on the “Browse” and find it on your computer. Then open and click ‘ok’ to get the cat picture. This will take a few seconds to upload. After it is done, you will see the cat’s eyes on the button that you dragged into the Viewer area the button may look strange with just the cat’s eyes, but it is correct. After that the whole cat picture will show on the cell phone emulator.
Add Sound to the Button
Go back to your AppInventor Web page. On the left side, scroll down to the “Media” menu and drag a Sound box into the white Viewer area. Then under the “Properties” column select “Source” and upload the .mp3 file like you did earlier with the kitty picture but choose the “Meow.mp3” this time.
Last Final Step: Add Button and Sound in Blocks Editor Window
On the light Green screen (Blocks editor) let’s choose “My Blocks” drag a “Button click” block and then drag a “Sound Play” block into the viewer area as it was shown in the video. Be sure you are hearing sound the “click”, when you add the Sound1.Play into the Button1.Click box on the screen like it does in the video.
The final step is to select the “Connect to Device” on your green screen (Blocks editor). In the video it showing a woman clicking the “Package for Phone” button but since there is no cell phone, this will not be an option for you. You can select “Download to this Computer” to save your work.
View New App on Emulator Cell Phone
To check the app on the emulator phone click “Connect to device” on the Blocks Editor and it shows a drop down choice of a phone, it is your emulator phone, scroll down and select it (it should be the only option).
After few moments, you should see your emulator cell phone showing the cat picture. Click on the cat picture and it will Meow. Again this may take few seconds if you are using it for the first time.
Congratulations! You have done a first Android application at your own end. You have got a new skill by just following this tutorial based article for creating Android apps.
You may also like
