What your App does...

Part 2 - Scripts

Learn Create Share

1. Why visual code works2. Structure of an App3. Visual Data Flow4. Scripts5. Operations6. Data Types7. Control Flow: Blocks, Loops, & Calls8. Examples

Contents

Visual as a basis for code...

14 characters5 operations6 links4 rules=No syntax errors

52 characters7 keywords used3 assignments6 lines of code18 coding rules=50+ potential syntax errors

A/B Test: HTML5 vs Vizwik

Raw HTML 5

108 Hours

2 coders

design done

LOC: 1350

Deployment: 5hr

Status: Incomplete

Cost: $3500

Upload: 10s

Vizwik

19 hours

1 coder

1 designer

LOC: 18 scripts

Deployment: 1 min

Status: Complete

Cost: $500

Upload: 2s

A/B Test: HTML5 vs Vizwik

Raw HTML 5

108 Hours

LOC: 1350

Vizwik

19 hours

LOC: 18 scripts

App Structure

DB

FB

How it looks What it does What it stores

View Script Data

App

Web

tap

get/set

App Structure

DB

FB

How it looks What it does What it stores

View Script Data

App

Web

tap

get/set

Visual Data Flow Language

Script

0-N Inputs

0-N Outputs

Operation

Link

name

Calling operation on Source

Script

ParametersSource

operation

•••0,1 N

Script = Function

Script

0 to N Inputs

0 or 1 Outputs

ReferenceName

Create an Oper

Operator Shapes

Script

Boolean: True | False

Number: 125 , 12.34

Text: This is some text

List: (,,, ...)

Object: { name : value, ... }

Data Types

Boolean: True | False

Data Types

Number: 125 , 12.34

Data Types

Text: This is some text

Data Types

List: (a,1,23.3,Test,(a,b))

Data Types

Object: { name : value, ... }

Data Types

Event Handling: Tap

On Tap

Event Object

DnD

Event Object : {

id : ‘amXXXXXX’,

name : ‘Button’

X: 123, Y: 22

time: May 23, 2014, 2pm

}

View Item Reference

View Item Operators

View Item Reference

find menu

Operation Menu

Double-click Shift-click

click

keyboardshortcut

1. Blocks

2. Conditional Block

3. List Loop Block

4. Number Loop Block

5. Call and Return

Control Flow

Blocks

Blocks group operations to be controlled

Blocks

Can have inputs and outputs

0-N Inputs

0-N Outputs

Blocks

and can contain other blocks

Blocks

Creating a data flow control structure

Blocks

Sequential Blocks

Blocks group other blocks together to allow them to be controlled, such as sequencing

Conditional Block

Match is test to run first case if true

Run Block conditionally based on value of input

Conditional Block

2nd of 2 cases1st of 2 cases

Blocks can have any number of “cases” inside them

Conditional Block

If input does not match label, then jump to 2nd case

Jumping between cases in a block conditionally

agora mobile

List Loop Block

Execute a Block for each element in a list.

Loop Input

Looped Value (optional)

List of numbers

Numeric Loop Block

Execute a Block a specified number of times.

Loop Decrement (-)Increment (+)

Non-Looped Input/Output (optional)

Count

End Test

Call & Return

CallingScript

Call & Return

CallingScript

Call Script

Call & Return

CallingScript

Test for divide by zero

Call Script

Call & Return

Forced Return

CallingScript

Test for divide by zero

Call Script

Call & Return

Forced Return

CallingScript

Normal Return

Test for divide by zero

Call Script

Scripting Examples1. Printing Values2. Navigate between Views3. Set View Item Properties - Color, visibility, 4. Get/Set Values - calculate5. Set Image 6. Playing Audio 7. Add/Remove List Items8. Maps - add marker9. Media Upload - Gallery

10. Timers and Animation11. Collision Detection12. Prompts, Options, Menus13. Draw on a Canvas

How to reach us...

www.vizwik.com

www.facebook.com/vizwik

www.twitter.com/agoramobile

www.vizwik.com/blog

www.googleplus.com/vizwik

www.youtube.com/vizwik