VP- week # 01 - New Paltz

VP- week # 01 - New Paltz

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

Recently Viewed Presentations

  • Salient Report from Breast/GYN EDRN Team EDRN SC

    Salient Report from Breast/GYN EDRN Team EDRN SC

    Infrastructure and funding for early detection studies across multiple cancer sites - far more cost-effective to screen for multiple cancer sites with one blood draw than screening for individual cancer sites (similar in concept to proposed study in cancerSEEK Nature...
  • 13 - Dr. Jerry Cronin

    13 - Dr. Jerry Cronin

    Projection motor pathways send information to lower motor neurons and keep higher command levels informed of what is happening ... Example: Stepping barefoot on broken glass causes injured foot to quickly withdraw and opposite leg to support sudden shift in...
  • Land Development Division Engineer Forum

    Land Development Division Engineer Forum

    LAND DEVELOPMENT DIVISION ENGINEER FORUM February 23, 2012 Conference Room D Today's Agenda 2009 SCDHEC's Audit Findings 2010 Woolpert's Internal Audit Findings Results from Summer 2011 Survey Proposed Changes EPA and SCDHEC Regulation Forecast Status and expected contents of our...
  • Green Growth and Fossil Fuel Fiscal Policies

    Green Growth and Fossil Fuel Fiscal Policies

    Consumption of coal, gas and petroleum is increasing. Viet Nam will become a net importer of fossil fuels in near future. Increased exposure to international fossil fuel prices will require increasing transfers to energy SOEs or to consumers if domestic...
  • E-01: Setting the Stage An Overview of a

    E-01: Setting the Stage An Overview of a

    Software-Centric Solutions Are Rapidly Approaching Mainstream, As More Than Half Of Global Businesses Will Have Embraced This Approach By Two Years From Now. ... SMB And Mid-Market Customers Expressed The Most Support For Blending Premise- And Cloud-Based Capabilities, But Small...
  • OCR GCSE Geography B (Geography for Enquiring Minds) Learner ...

    OCR GCSE Geography B (Geography for Enquiring Minds) Learner ...

    OCR Resources: the small printOCR's resources are provided to support the teaching of OCR specifications, but in no way constitute an endorsed teaching method that is required by the Board, and the decision to use them lies with the individual...
  • Brand Equity Assessment Study September 2nd 2005 September

    Brand Equity Assessment Study September 2nd 2005 September

    Umbrella brand (e.g., Autodesk Civil 3D) Product brand (Civil 3D) The print ad allows us to estimate the potential ROI of advertising in brand equity enhancement Print Ad Example: Civil 3D Conjoint Dial Lesson 1: Autodesk has a superior brand...
  • OHS & Workers Compensation Developments Changes to the

    OHS & Workers Compensation Developments Changes to the

    Unions and trade union training improve safety Unions NSW trained 20,000 workers in OHS over 2 years under the trade union training clause Trade Union Training Leave for OHS WORKCHOICES ACT SAYS: PART 8 WORKPLACE AGREEMENTS Division 7.1 Prohibited content...