Visual Programming week 01 Overview Setup Outline Course

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 App. Inventor 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 App. Inventor 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: - Accelerometer. Sensor: detects shaking, movement – Location. Sensor: provides the phone location, using GPS or cellular towers – Orientation. Sensor: 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, i. OS, … – 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 Source Code (SC) (set of instructions in a PL) 2. Translate SC with a Compiler (software, SC Compiler translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, Executable Code(EC) ready to run but can’t edit 4. Run/Execute the program (EC) on a Run/Execute computer VP Lecture Note by Dr. Hanh Pham 15

Stages in Building a Program 1. Write Source Code (SC) = letter Source Code (SC) (set of instructions in a PL) 2. Translate SC with a Compiler (software, SC Compiler translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, Executable Code(EC) ready to run but can’t edit 4. Run/Execute the program (EC) on a Run/Execute computer VP Lecture Note by Dr. Hanh Pham 16

Stages in Building a Program 1. Write Source Code (SC) = letter Source Code (SC) (set of instructions in a PL) 2. Translate SC with a Compiler (software, SC Compiler translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, Executable Code(EC) ready to run but can’t edit 4. Run/Execute the program (EC) on a Run/Execute computer VP Lecture Note by Dr. Hanh Pham 17

Stages in Building a Program 1. Write Source Code (SC) = letter Source Code (SC) (set of instructions in a PL) 2. Translate SC with a Compiler (software, SC Compiler translator) from a PL to Machine Language 3. Get Executable Code(EC) = binary code, Executable Code(EC) ready to run but can’t edit 4. Run/Execute the program (EC) on a Run/Execute 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 User 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 User 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

What’s needed ? • Set up your computer: http: //appinventor. mit. edu/explore/ai 2/setup-emulator. html • Google Account: Create/Access your APP INVENTOR account at: http: //ai 2. 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/ai 2/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/ai 2/windows. html (for Windows) http: //appinventor. mit. edu/explore/ai 2/mac. html (for MAC) 3. Test with your FIRST project: http: //ai 2. 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/ai 2/setup-device-wifi. html VP Lecture Note by Dr. Hanh Pham 26

TEST to see if App. Inventor WORKS ? LOGIN to your account at http: //ai 2. 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: 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: 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