Visual Programming week # 01 Overview & Setup Outline Course Outline 1. Why Visual Programming ? 2. Computer-like Systems 3. Programming and Visual Programming(VP) 4. VP environment : App Inventor 5. Google Account, Local Folder, Submission Site
6. Terminologies, Actions 7. Setup YOUR OWN COMPUTER VP Lecture Note by Dr. Hanh Pham 2 Why Visual Programming ? 1) Learn problem solving techniques (which may not be included or not explicitly taught in a math course). For examples, techniques for solving problems : involving different scenarios/situations (conditional
statements: if-then-else) Involving repeated steps such as iterations (for-each, while loops) and recursions (recursive procedures) using solutions of previously solved problems (procedures, functions) VP Lecture Note by Dr. Hanh Pham 3 Why Visual Programming ? 2) Deal with real life problems (like "word problems, rather than pure math problems).
How to analyze the problem requirements How to build/design the solutions using the incremental approach How to test the solution step-by-step to see if it is correct, be able to fix the incorrect solution. Overall: improve logical/math problem solving ability & critical thinking. VP Lecture Note by Dr. Hanh Pham 4 Why Visual Programming ?
3) Obtain basic COMPUTER software concepts & other IT Technologies: Understand software development & test process Can design & build APP for tablets & phones Experience with CLOUD computing & Google AppInventor VP Lecture Note by Dr. Hanh Pham 5 Why Visual Programming ?
1) Improve logical/math problem solving ability: APP (program or software) contains steps to solve a problem Learning programming techniques such as: + conditional statements (If-then-else) + iterations (For-Each loop) + subprograms (procedures,functions) will add advanced skills in problem solving & critical thinking 2) Obtain basic computer software concepts & other IT technologies: + understand software development & test process + can design & build APP for tablets & phones
+ experience with CLOUD computing & Google AppInventor VP Lecture Note by Dr. Hanh Pham 6 Computer-like Systems TV, CAR, HOUSE, VP Lecture Note by Dr. Hanh Pham
7 Inside Computer-like Systems VP Lecture Note by Dr. Hanh Pham 8 Computer-like Systems Organization of a Computer System HARDWARE VP Lecture Note by Dr. Hanh Pham
9 Computer-like Systems Users / Programmers SOFTWARE APPLICATIONS (interact with users) OPERATING SYSTEM (manage hardware & software)
HARDWARE (CPU, Memory, I/O Devices) VP Lecture Note by Dr. Hanh Pham 10 Computer-like Systems HARDWARE
Processor (CPU) Memory(RAM) Storage(Hard disk, CD, Floppy disk, USB flash drive, memory card, ) I/O devices: Output: monitor, speaker, Input: keyboard, microphone, camera, Network Card/Wi-fi (to connect to a Network/Internet) SOFTWARE Operating system (OS), exp: Windows, Linux, Mac OS,
Applications (App), exp: Microsoft Word, Games, VP Lecture Note by Dr. Hanh Pham 11 Smartphone System Organization of a Smartphone HARDWARE VP Lecture Note by Dr. Hanh Pham 12
SMARTPHONE System HARDWARE Processor (CPU) Memory(RAM) Storage(Hard disk)
I/O devices: Both I/O: touchable monitor, connection to a PC, Dialer & Accepter Output: speaker Input: keyboard, microphone, camera, Sensors: - AccelerometerSensor: detects shaking, movement LocationSensor: provides the phone location, using GPS or cellular towers OrientationSensor: determines the phone's spatial orientation. Network Card/Wi-Fi (to connect to a computer Network/Internet) Telephone Network (connect to a phone network, exp: AT&T, Verizon, Sprint, )
SOFTWARE Operating system (OS), exp: Android, iOS, Applications (App), exp: Angry Birds, Word Lens, Skype VP Lecture Note by Dr. Hanh Pham 13 Programming Program (software) = a letter to tell a computer(computer-like device) what to do Computer hardware = a giant with no thinking ability We must tell computer what to do ( via software)
Programming Language(PL)/Platform = a language (like English, Spanish, ) used to write a program (letter to computers) Programs (letters) can use: Words Diagrams/Blocks (VISUAL) Programming = constructing a program for a given task VP Lecture Note by Dr. Hanh Pham 14
Stages in Building a Program 1. Write Source Code (SC) = letter (set of instructions in a PL) 2. Translate SC with a Compiler (software, translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, ready to run but cant edit 4. Run/Execute the program (EC) on a computer VP Lecture Note by Dr. Hanh Pham
15 Stages in Building a Program 1. Write Source Code (SC) = letter (set of instructions in a PL) 2. Translate SC with a Compiler (software, translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, ready to run but cant edit 4. Run/Execute the program (EC) on a
computer VP Lecture Note by Dr. Hanh Pham 16 Stages in Building a Program 1. Write Source Code (SC) = letter (set of instructions in a PL) 2. Translate SC with a Compiler (software, translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code,
ready to run but cant edit 4. Run/Execute the program (EC) on a computer VP Lecture Note by Dr. Hanh Pham 17 Stages in Building a Program 1. Write Source Code (SC) = letter (set of instructions in a PL) 2. Translate SC with a Compiler (software, translator) from a PL to Machine
Language 3. Get Executable Code(EC) = binary code, ready to run but cant edit 4. Run/Execute the program (EC) on a computer VP Lecture Note by Dr. Hanh Pham 18 Run/Execute a Program Programmer = a person who writes/builds a program/software
Source Code User = a person who uses the program/software Executable Code VP Lecture Note by Dr. Hanh Pham 19
Run/Execute a Program Programmer = a person who writes/builds a program/software Source Code User = a person who uses the program/software Executable
Code VP Lecture Note by Dr. Hanh Pham 20 Visual Programming Visual Programming : make it EASIER for programming Use graphics, blocks, diagrams (instead of words) What You See is What You Get (WYSWYG) a Visual Program (software): is a set of blocks & diagrams
to tell a computer(cellphones, ) what to do in certain situations Visual Programming Language/Platform = a system which allows programmers to build their programs with clicks, drags, and drops instead of writing words. Examples: Microsoft Visual Basics Google App Inventor VP Lecture Note by Dr. Hanh Pham 21 Programming Platform/Environment
App Inventor is a visual programming platform for building applications (programs) for ANDROID smartphones developed by GOOGLE & a MIT professor will become open-source in 2012 makes it EASY for learners to create mobile apps use blocks like puzzles, so programming now is like playing puzzles VP Lecture Note by Dr. Hanh Pham
App X App Z App Inventor language ANDROID operating system SMARTPHONE hardware
22 App Inventor Environment VP Lecture Note by Dr. Hanh Pham 23 Whats needed ? Set up your computer: http://appinventor.mit.edu/explore/ai2/setup-emulator.html
Google Account: Create/Access your APP INVENTOR account at: http://ai2.appinventor.mit.edu Local Folder: Know where is the Downloaded folder Create and know your VP folder / Campus disks , exp (C:) > VP Submission Site: where to submit your Homework Exam
Project http://cs.newpaltz.edu/~phamh/avp/sub/ VP Lecture Note by Dr. Hanh Pham 24 APP INVENTOR terminologies
App Inventor account (at My Projects on the CLOUD) Project (a program, app, software) Design Window (via Browser connecting to your account) Block Editor (a window to edit blocks in your app)
Emulator (a pretend phone, in a window) Connect (to run the app on the phone/emulator) Save (record changes in your project/app) Checkpoint (save the current version of your project) Download (get the files for your project/app to your PC) Upload (put your project files to your account) Packaging (create executable code for your project/app) Bar Code: each app has a bar code to download to phone VP Lecture Note by Dr. Hanh Pham 25
Setup YOUR OWN COMPUTER To set up your own computer: http://appinventor.mit.edu/explore/ai2/setup-emulator.html 1. Test Java & update it if needed: http://www.java.com/en/download/testjava.jsp 2. Download & Install APP INVENTOR software: http://appinventor.mit.edu/explore/ai2/windows.html (for Windows) http://appinventor.mit.edu/explore/ai2/mac.html (for MAC)
3. Test with your FIRST project: http://ai2.appinventor.mit.edu (login your account and open the DESIGN, the BLOCK EDITOR, and the EMULATOR windows) To set up your smartphone (LATER): http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html VP Lecture Note by Dr. Hanh Pham 26 TEST to see if AppInventor WORKS ?
LOGIN to your account at http://ai2.appinventor.mit.edu CREATE a NEW project: click on New Project Then, open: (i) the DESIGN; (ii) the BLOCK EDITOR; and (iii) the EMULATOR window VP Lecture Note by Dr. Hanh Pham 27
DESIGN window VP Lecture Note by Dr. Hanh Pham 28 Open EMULATOR window Open EMULATOR window: Click on Connect and then select Emulator VP Lecture Note by Dr. Hanh Pham
29 Open EMULATOR window VP Lecture Note by Dr. Hanh Pham 30 Open EMULATOR window Sometimes, in the beginning you may have problems of not updated AI components.
Then, follow the steps bellow: Open EMULATOR window Just WAIT Open EMULATOR window Open EMULATOR window Open EMULATOR window Open EMULATOR window
Open EMULATOR window Open EMULATOR window Open EMULATOR window Open EMULATOR window Open EMULATOR window: Click on Connect and then select Emulator VP Lecture Note by Dr. Hanh Pham
40 References These slides contain materials from many sources including the following: http://www.appinventor.org/ http://appinventor.mit.edu/ App Inventor: Create Your Own Android Apps by David Wolber, Hal Abelson, Ellen Spertus, Liz Looney, Publisher: O'Reilly App Inventor for Android: Build Your Own Apps - No Experience Required, Jason Tyler VP Lecture Note by Dr. Hanh Pham
41
