Android application without programming knowledge, you can too [Episode-04] :: Start using 'App Inventor'


In the last episode we saw how to configure your Android phone for use with App Inventor. This time we will start using App Inventor and design the first Android app of our life.

Before you start using App Inventor, make sure of the following:

* Internet connection.

* Phone or emulator.

* Must be logged in to a Gmail. Which you want to use for App Inventor. You'll get all your previous projects and work by logging in later with this Gmail.

Start using App Inventor

Now go to App Inventor's website from your browser (better if Mozilla Firefox, Opera, Google Chrome or Safari) If this is your first visit, you will see a blank project page. It's definitely like the following-


Now let's create a project:

1. Look 'New' at the very top left. Click on New.

2. A dialog box appears. Enter the project name 'Hello Purr' without any space here. And then OK.
The browser will open a page called Designer. Here we will select the component for our app and design our app's User Interface (what it will look like). It looks like the following-


In addition to the designer page we will need Block Editor . There we will fix the work of the app (i.e. what it will work if you click on any of its places or what will be the output if it is input). It will work on a different application and a different Windows outside the browser. And we have to keep these two windows (browser and block editor) running together. These two windows but one is linked to the other. This means that if you make any changes to the Designer window in the browser, it will immediately make changes in the Block Editor .

Let's start Block Editor

When you Design In the Windows window, click on Open the blocks editor and the block editor will be downloaded and run.Opening Block Editor on App Inventor

Opening Block Editor on App Inventor

Do what the PC users suggest the Automatic Installation Wizard. To open Block Editor-
          1. Click OK.
          2. Click on 'Always trust contents from this publisher' and open the file.
          3. Click on 'Run'.
It may take 30 seconds or more for the block editor to open. If the block editor is not open or there is a problem then you need to understand that your browser is not set up to run Java applications automatically. If so, find the downloaded AppInventorForAndroidCodeblocks.jnlp file and open it manually . The block editor window looks like the following-
Block Editor First Look

The large space on the right is the work area. This is where we create programs by pairing blocks with one another. On the right side you see 3 palettes.

 * Built-In.
          * My-Blocks and
          * Advanced.
Inside each palette are some drawers which have Set of Blocks inside. When you click on a drawer you will see all the block sets inside that drawer. You just have to scroll down to see more blocks.
Inside the built-in palette you will find common block sets that you can use in any app.
Inside the My-Blocks palette you will find blocks that are compatible with your components. Which come here as a suggestion as soon as you select a component.
And the blocks of Advanced Palette will help you to create intermediate and advance level apps with the help of more complex logic.

Palette on Block Editor

Components of pallete

You must have understood by now that Designer runs from your browser and Block Editor runs through JAVA. But these are linked. If you think you need to close your Block Editor, all the information in the block editor will be saved in the designer. Again when you click on 'Open the block editor' it will download and run a new .jnlp file on your PC. If you do not run, you need to run it manually Once your block editor is reopened you will find all your previously saved works here.
So far today. Our next tune will be editing the app called Hello Purr. Stay well until then. God bless you.




 

Post a Comment

أحدث أقدم