Embedded Files
http://www.chansir.net
Introduction to Visual programming and Working environment of App Inventor
Key points:
A visual programming language (VPL) is any programming language that lets users create programs by manipulating program elements graphically rather than by specifying them textually. Example: App Inventor, Scratch, Visual Basic.
App Inventor is a web based development tools for writing android applications.
Java run time and App Inventor are needed to install in the computer before writing apps.
Working Environment of App Inventor includes App Designer, App Inventor Blocks Editor (Build-in, MyBlocks), Android Emulator.
App Designer is the place for designing the layout.
Blocks editor is the place for building the 'Program'.
Android emulator is the place for testing the program.
Practical 1: Build your first apps
Program (Apps) Requirements:
Ø The program consists of a label and a button.
Ø When the button is clicked, the label “This is my first android apps” will show up.Instructions:
A. Login the web based platform, AppInventor.
1. Go to http://appinventor.mit.edu and click "INVENT"
2. Login with the Google Account provided by School.
username: rhs_XXXXXX@rhs.edu.hk XXXXXX is your student ID
Initial password: your login computer password
B. Design the layout of your apps with App Designer.
3. Click "new" and you will be in the App Designer page.
The App Designer divided into four regions: Palette, Viewer, Components and Properties.
Change the title of Screen1 (Screen1.title) to “MyFirstApps”
4. Drag a button from the palette to the viewer.
Change the properties of Button1 as follows:
Button1.text: “Send”.
5. Drag a Label from the palette to the viewer.
Change the properties as follows:
Label1.text: “My first Android Apps”
Label1.TextAlignment: “Centre”
Label1.Visible: “hidden”
Label1.Width: “Fill parent”
C. Build your program with Block Editor.
6. Open the Blocks Editor by clicking “Open the Blocks Editor” button.
7. In the Block Editor, click “My Blocks” – “Button1” and Drag Button1.Click to the right side.
8. Click “Label1”, Drag “Set Label1.Visible to” to the right side.
9. Click “Build-In” – “Logic”, drag “True” to the right side.
10. Build the block as follows:
D. Test your apps with emulator
11. Start the emulator (click “New emulator”) and unlock the emulated phone.
12. Click “Connect to Device”, Select emulator. Then you can try out your first apps.
E. Package the phone apps for submission.
13. Go to “App Designer”, click “Package for phone” – “Downloads to this computer”.
14. Submit the Downloaded file, “Myfirstapps.apk”, in eclass.
The file can be used as installation file in Android device.
.
In Room 510, File is download to your D:\
Classwork:
1. The App Designer divided into 4 main regions: _______________, ______________, ____________ and ________________.
2. To build program in App Inventor, we use the tool called _____________________.
3. Write down 5 components in “Palette”.
_________________________________________________________________
4. Other than Button1.Click, write down 2 other events of button1.
_________________________________________________________________
5. Name the two software needed to install before using App Inventor
_________________________________________________________________
Page updated
Report abuse