Session 4 Logic Design. >_ {Code4Loop}; Roochir Purani

Transcription

1 Session 4 Logic Design >_ {Code4Loop}; Roochir Purani

2 RECAP from last session - Computers Overview Homework Review /Questions Understanding of Logic and Logical Thinking for Programming Why should we think about instructions? Roles of User, Programmer, Computer Writing Code in Scratch.Mit.Edu tool Understanding Input Statements and Output Statements (Input from user, Output to screen) Understanding Repeat function Playing sound and setting up for environment with Images/Sprites Online Programming environment of Python*

3 SESSION 4 Topics CODING AFTER DESIGN Before begin to code an app, game, or program, We MUST have a DESIGN ready. Design includes: Flowchart Sketches about the idea Screen layout Functionality Functional Flow for the user Information flow from User to Computer to application and back to the user Requirements : Expectations of the program what is it supposed to do?

4 What is a Flow Chart? An organized combination of shapes, lines, and text that graphically illustrates a process or structure A pictorial representation showing all of the steps of a process

5 Why use Flowchart? It helps understand the requirements or the objective of the program Clarifies requirements Helps Analyze process Helps Define process current process and future process Example: User Registration process sign up something via . Sign up for class or sports activity Effectively communicate ideas between people who may differ in knowledge, education, and position Without flowcharts, you can spend a ton of energy explaining how the process is to be done!

6 Flowcharts can be used for: Training Troubleshooting, Bug Fixing Testing Understanding the overall process FLOW Chart Symbols may not be consistent but as long as they are consistent in ONE Flow chart, and stay consistent with their meaning, it would convey the message.

7 Generally Accepted Meanings The Process Symbol represents any process, function, or action and is the most frequently used symbol in flowcharting

8 Generally Accepted Meanings The Document Symbol is used to represent any type of hard copy input or output (i.e. reports)

9 Generally Accepted Meanings Off-page Connector Symbols are used to indicate the flow chart continues on another page. Often the page number is placed in the shape for easy reference

10 Generally Accepted Meanings The Input/Output Symbol represents data that is available for input or resulting from processing (i.e. customer database records)

11 Generally Accepted Meanings The Decision Symbol is a junction where a decision must be made. A single entry may have any number of alternative solutions, but only one can be chosen

12 Generally Accepted Meanings The Connector Symbol represents the exit to, or entry from, another part of the same flow chart. It is usually used to break a flow line that will be continued elsewhere.

13 Examples of a Flow Chart Turn on the Computer Log on to the Network Retry No Login OK? Yes Yes Start Program No LOCK account Notify User

14 Making Popcorn Turn on the kettle and the warmer Insert The Ingredients: One cup of popcorn oil Two cups on popcorn One half tablespoon of popcorn salt Let ingredients heat up and start popping Once popping has slowed to a couple of pops every few seconds then dump kettle out. Repeat Process

15 Gooto: Drive.Google.com Select New drop down And use Drawings Drawings in Google Applications

16 In Class Exercise Or Output

17 In class Programming from Flowchart Program: Odd and Even Test

18 Screen Design and Prototyping Draw pictures and boxes to show user flow Buttons and Text boxes for input and submit and other process actions Show Screen and frames for output Message boxes and result boxes for output

19 Flowchart and Screen flow examples

20 Detail example of an App Design and Flow

21 Prototyping in Power Point

22 Other prototyping Tools For App design and creation Free Invisionapp Proto.Io Good for starting Wireframing and app design Balsamiq.com Easy to use for programming any applications

23 Homework Exercise Project Idea for Game/Application High Level Flowchart for your game/application Sample Topics Game that can be coded in Tools like Code.Org, Scratch and Python Single User or Single user vs Computer (e.g. Ping Pong, checkers, tic-tac-toe) Programming Puzzles Applications that require input from sensors sound/microphone, motion sensor, or other input devices Application that uses cloud as input or output device e.g. getting automatic notification to the phone about weather or notification to cell phone about detected motion at home!!

24 Class Example Can be updated by anyone

25 Additional resources and references - FREE Drawing application for design and flow charts Example in class: Scratch.mit.edu Python.ORG Online Python IDE Python Documentation Website :