creating mobile aps without coding
TRANSCRIPT
![Page 1: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/1.jpg)
Creating Mobile Apps Without Coding
![Page 2: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/2.jpg)
Who Am I?
Neil Perlin - Hyper/Word Services.– Internationally recognized content creation and
delivery consultant.– Help clients create effective, efficient, flexible
content in anything from print to mobile.– Working with mobile since Windows CE and
WML/WAP c. 1998– Certified – Viziapps, Flare, Mimic, RoboHelp.
![Page 3: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/3.jpg)
Contents
1 – Overview 2 – Pages and Page Elements 3 – Creating the Database 4 – Connecting App to Database
![Page 4: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/4.jpg)
1 – Overview
Market and ViziApps Basic Terms App Design Basics
![Page 5: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/5.jpg)
Market and ViziApps
![Page 6: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/6.jpg)
Market – Why Mobile?
Provide information when users want it.– Now.
…where they want it.– Where they are now.
…how they expect it.– Mobile devices to take top spot from PCs.– With much caution, see …Mobile Web Will
Rule by 2015» http://mashable.com/2010/04/13/mobile-web-stats/
![Page 7: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/7.jpg)
Why Mobile?
“Mobilize” online doc or help for use in the field.– Create using tech comm tools like
Flare and RoboHelp. Reduce or eliminate paper.
– Airline boarding passes. Brand differentiation.
– “They’re not mobile, we are” – i.e. “we’re cool, hire us”
![Page 8: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/8.jpg)
Why Mobile?
Provide “mobilized” desktop apps:– Weather (Weather Pro) – Astronomy (Firedale’s Messier Objects)– Surveys (Surveyor)
![Page 9: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/9.jpg)
Why Mobile?
Provide novel new apps:– Document scanning– Sports bar (“footie bar”) locators– Card-swipe, NFC-based payment– Inventory data entry in the field– Contact lead tracking at trade shows– Concrete calculator with contractor referral– For tech comm, perhaps – SnapGuide, iFixit– Apps aren’t the entirety of “mobile” but they’re
the focus of this workshop.
![Page 10: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/10.jpg)
Why ViziApps
Custom mobile apps cost between $5,000 and $50,000.
Average time to market is 12 weeks. Modifying mobile apps costs $2,500 to
$15,000.
– From Viziapps.
![Page 11: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/11.jpg)
Viziapps’ Approach
Replaces traditional dev with a GUI model.– No coding.– Uses familiar concepts, Google Docs spread-
sheets as a database for “simple” apps.» SQL and web services
for heavy duty work.
– This app, with the underlying voting page and database, took me 4 hours.
![Page 12: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/12.jpg)
Business App Use Cases
ViziApps Inc., 2011 12
Employee Productivity
Example App: Real Estate Capture and Listing
![Page 13: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/13.jpg)
Business App Use Cases
And more…
![Page 14: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/14.jpg)
The ViziApps Workflow
In a nutshell…
![Page 15: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/15.jpg)
The ViziApps Workflow
Develop visually – no coding. Preview live, as well as in an emulator, by
using a preview app from ViziApps.– Without the delay and uncertainty of getting it
into a store.– A more realistic test involving real processor
power, live data, and network latency. Iterate until done. Publish, subject to vendor judgment.
![Page 16: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/16.jpg)
Why ViziApps Specifically?
One of a larger class of GUI app dev tools.– Includes AppInventor, appmakr, IBuildApps,
others. IMO, ViziApps is the least template-bound
and most visually flexible for design and offers the most options for data handling.– Which is why I’m also certified in it.
![Page 17: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/17.jpg)
Basic Terminology
![Page 18: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/18.jpg)
Why Terminology Matters
Affects choice of authoring tools, hardware and software delivery “mechanisms”.
Terminology problems can = disaster.– Just saying “mobile” is an invitation to buy the
wrong tools or hire the wrong developer.– Like being unclear re Web Help vs. WebHelp.
![Page 19: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/19.jpg)
Basic Terms
App – Short for application, typically used re mobile devices – “iPhone app”.– Typically highly focused on one task (“micro-
tasking”) vs. PC-style applications.– Three categories:
» Native – Follow a platform standard – e.g. “iPhone app” or “Android app”, access device resources directly.
» Web (“mobile web”) – Run via a browser on any device – the browser is the app – but can’t access device resources directly.
![Page 20: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/20.jpg)
Basic Terms
And:– Hybrid apps:
» Can appear in an app store and can access device resources, like a native app.
» Can run in a browser, like a web app.» Can operate cross-platform.» Can be extended with custom Javascript or HTML.» Make heavy use of HTML5 and CSS3.» Emerging.
![Page 21: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/21.jpg)
App Design Basics
![Page 22: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/22.jpg)
Viziapps simplifies app dev mechanics and makes it tempting to just dive in.
Before you do, however, consider:– Goals– Design– Usability
![Page 23: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/23.jpg)
Goals
Define and limit the app’s goals.– Too many goals can make the app “fuzzy”.– Can’t fit too many options on tiny screens.
Define the app type, whether users under-stand the concept and task flow.– Mobilized desktop app, like weather – yes.– True mobile app, like sports bar finder – no.
Know the app’s context, and test.
![Page 24: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/24.jpg)
Functional Design
Determine what platform features you need.– On-device only?– Data input, retrieval, and processing locally or
in the cloud – e.g. need internet access.– GPS, camera, orientation, etc.
![Page 25: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/25.jpg)
Aesthetic Design
Design for the small screen.– Keep it simple and ruthlessly minimize:
» “Typing.”» Scrolling.» Internet access that can eat up battery.
Make it attractive/compelling.– Remember what your competition is and what
users will compare you to.
![Page 26: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/26.jpg)
Design for a Small Screen
This… or this… or this…
![Page 27: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/27.jpg)
Aesthetic Design
Group related elements on one screen, within screen size limits.
Provide clear transitions between screens.
![Page 28: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/28.jpg)
Usability
Consider physical context:– Number of hands available.– Range of motion of hands – effect on
button and field position.– Distractions.– Ambient light.– Size of fingertips vs. mouse pointer.– Need for internet access.
» From iPhoneGuide.com
![Page 29: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/29.jpg)
Usability
Provide feedback for user actions. Consider adding “help” for complex apps.
– Usually assumed that apps are simple enough to not need help, but...» May need “assistance” or domain knowledge.» Multi-key or multi-touch controls may also need
user assistance.
– Can connect web app to native app to use the former as context-sensitive help for the latter.
![Page 30: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/30.jpg)
“Programmatic” Design
Font, size, color, button color, background color, etc.
Define conventions based on O/S limits…– For example, can’t resize picker
in iOS.
![Page 31: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/31.jpg)
“Programmatic” Design
Consider O/S differences…– Such as picker in iOS
vs. Android equivalent, a drop-down.
![Page 32: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/32.jpg)
“Programmatic” Design
Define terminology conventions before starting app dev, such as…– Consistent element names – e.g. object_label
for field labels vs. object_field for entry fields.– Consistent name prefixes, like btn for buttons.– Element names in lower case, no spaces in
multi-word element names.» Use consistent app and database element names to
avoid confusion or ambiguity in data management phase of app dev.
![Page 33: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/33.jpg)
Viziapps Dev Process
Four major steps:– Design the app using paper or a wireframe tool.– Start a new app or select an existing app to edit,
then create the app interface and flow – Design pane.
– Define data handling – Manage Data pane.– Publish – Publish pane.
![Page 34: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/34.jpg)
2 – Page and Page Elements
ViziApps’ Interface
![Page 35: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/35.jpg)
Design Screen – Overall
![Page 36: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/36.jpg)
Design Screen
To open your last app or create a new one (from a template or from scratch).– Most of these options are missing if this is your
first app.
![Page 37: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/37.jpg)
From a Template…
Lets you start a new app using a Viziapps-supplied template, vs. from scratch.
![Page 38: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/38.jpg)
New App Dialog Box
Fields are self-explanatory.
![Page 39: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/39.jpg)
Design Screen – Existing Project
![Page 40: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/40.jpg)
Design Screen Options
Field options – List of all field options and various actions.
![Page 41: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/41.jpg)
Design Screen Options
Various optionsand features.
Current App – The app being worked on and its type.– Also to rename, duplicate, convert the app type,
or delete the app.– Plus…
![Page 42: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/42.jpg)
Design Screen Options
Select… for test… – To run this app thru ViziApps’ previewer app.
Validate… – Check for dupe field names. App page options:
– The page to display on the canvas.– Add, duplicate, rename, resequence, etc., pages.– Save and Undo – Self-explanatory.– Manage Page Data – Opens the data manage-
ment window.
![Page 43: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/43.jpg)
App Background Screen
To set the app background.
![Page 44: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/44.jpg)
Storyboard
![Page 45: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/45.jpg)
Storyboard
Shows mockup of pages, elements and their code names, and links between pages.– Hover over an element code name to highlight
it in red on the screen mockup.– Hover over an element code name that links
two pages, like a button, to highlight it in red and draw a line to the target page.
– Click a page to open it on the canvas. Download… – To output the storyboard to
PDF for review or markup.
![Page 46: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/46.jpg)
Design Screen
Field insertion buttons.
Click a button to open its properties screen.
![Page 47: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/47.jpg)
Sample Properties Screen
For example, for an image…
![Page 48: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/48.jpg)
Element Notes
Requires a unique “internal” name. Has appearance controls. May have action controls.
![Page 49: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/49.jpg)
Element Notes
Every element that can invoke an action has various action controls.
![Page 50: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/50.jpg)
Ex. 1: Create the Pages
![Page 51: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/51.jpg)
3 – Create the Database
Overview of GDocs
![Page 52: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/52.jpg)
Data Handling Options
Multiple app data management options:– Web services.– Quickbase.– Salesforce.com.– ODBC (Open DataBase Connectivity) –
compatible db like MySQL and SQL Server.– Google Docs (GDocs) spreadsheets.
Can apply a different data source to each page in your app.
![Page 53: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/53.jpg)
Manage Data Options
We’ll focus on the GDocs spreadsheet for two reasons.– Concepts are familiar to anyone in business and
easiest option for non-techie developers.– Ties into the de facto standard spreadsheet –
MS Excel.
![Page 54: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/54.jpg)
Overview of GDocs and the Spreadsheet
![Page 55: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/55.jpg)
Overview of GDocs
Free, web-based suite with spreadsheet, word-processing, presentation, drawing, forms, and data storage modules.– Now redirecting to Google Drive – similar idea.– Lets users work online and collaborate in real-
time with other users.– Runs under any modern commercial browser.
Business sub-text is to undercut MS Office.
![Page 56: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/56.jpg)
GDocs (Redirected to Drive) – Main Screen
![Page 57: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/57.jpg)
Overview of GDocs
Notice the two controls on the main page. They let you create a new spreadsheet
or upload an existing spreadsheet.
Now a closer look at the spreadsheet…
![Page 58: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/58.jpg)
Sample GDocs Spreadsheet
![Page 59: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/59.jpg)
Spreadsheet Details
A spreadsheet can have 1+ worksheets. Each worksheet’s name appears and is
managed on a tab at the lower left.– Give worksheets real
names, not “sheet1”.
![Page 60: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/60.jpg)
Spreadsheet Details
For Viziapps interfacing:– A column in a spreadsheet is a field.– Field names are in the first row of each column.
» Must be lower case, no spaces in multi-word labels.
– Field values are in rows 2 and down.
![Page 61: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/61.jpg)
Access Control
A GDocs spreadsheet is initially restricted to you.
To use it with Viziapps, you must make it publicly viewable and writeable.– Click the Share button on the
spreadsheet page.
![Page 62: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/62.jpg)
Access Control
The Sharing Settings dialog box displays.
![Page 63: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/63.jpg)
Setting Access for ViziApps
Click Change. Change the Private option to Public on the
Web. Select the Allow Anyone to Edit option
under Edit Access.
![Page 64: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/64.jpg)
Ex. 2: Create the Database
![Page 65: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/65.jpg)
4 – Connecting the App to GDocs
![Page 66: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/66.jpg)
Viziapps Spreadsheet
Viziapps can pass data between an app and a spreadsheet using four operations:– Select from – Insert field values from a spread-
sheet into app fields.– Insert into – Insert app field values into 1+ rows
in the spreadsheet.– Update – Change 1+ rows of values in the
spreadsheet based on some condition.– Delete From – Delete 1+ rows of values in the
spreadsheet based on some condition.
![Page 67: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/67.jpg)
A Five-Step Process…
1. Open the Manage Data page and register the data source API for a new project.
2. Connect your app to the spreadsheet.
3. Select the app operation to define.
4. Specify the command(s) to apply to the operation.
5. Specify any conditions for the command.
6. Repeat 3-5 for the next operation or page.
![Page 68: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/68.jpg)
1 – Register the Data Source API
![Page 69: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/69.jpg)
1 – Register the Data Source API
This is a scary but straightforward process that uses Google Docs/Drive for security.
Need to fill in the Data Source ID, Client ID, and Client Secret fields.
Only need to do this once. Can re-use the values later if necessary. Process documented in Exercise 4. Note – May change due to Google changes.
![Page 70: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/70.jpg)
2 – Connect App To Spreadsheet
After registering the data source API, select the desired spreadsheet.
Then click Save, wait for the “Your database info has been saved” message, and click Close.
![Page 71: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/71.jpg)
3 – Select the Operation to Define
Select the data source and the operation to define on the selected page.
The working area displays, shown next.
![Page 72: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/72.jpg)
3 – …Working Area Displays
![Page 73: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/73.jpg)
4 – Specify the Commands
Click the Add Command button.
The command line displays.
![Page 74: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/74.jpg)
4 – Specify the Commands
Select the specific data command.
And worksheet.
![Page 75: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/75.jpg)
4 – Specify the Field Mapping
Click the Add a Field icon to start the first field mapping.
The first mapping line displays.
![Page 76: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/76.jpg)
4 – Specify the Field Mapping
Drag the desired field from the storyboard to the command line field.
![Page 77: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/77.jpg)
4 – Specify the Field Mapping
And select the corresponding worksheet field.
![Page 78: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/78.jpg)
5 – Specify Any Conditions
Specify any conditions to apply to the command.
And repeat as needed… For example…
![Page 79: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/79.jpg)
Manage Data Page of Exercise
For save_info.
![Page 80: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/80.jpg)
Ex. 3: Connect App To the Data
![Page 81: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/81.jpg)
Preview and Publishing
![Page 82: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/82.jpg)
Overview of Preview
Try the app on your phone often during dev to be sure it looks and works as you want.– You’re previewing live on the phone, not in an
emulator.– This is more realistic since the app is running
live on the phone. When you finish, you’ll have to get it to the
vendor’s store.
![Page 83: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/83.jpg)
Publishing
Depends on the vendor, the client, and the app, but, in general:– Get a ViziApps account.– Get the vendor’s developer license.
» Get the “organization” license for Apple.
– Select the data handling method.
![Page 84: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/84.jpg)
Ex. 4: Preview
![Page 85: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/85.jpg)
A Few Sources of Information
iOS Human Interface Guidelines – http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html
LinkedIn Mobile Groups – Too many to list; search for “mobile” groups and skim.
![Page 86: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/86.jpg)
A Few More…
Mobile Design and Development, Fling, O’Reilly, 2009
Beginning Smartphone Web Development, Frederick and Lal, Apress, 2009
iPhone Application Development for Dummies, Goldstein, Wiley, 2010
Tapworthy, Clark, O’Reilly, 2010
![Page 87: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/87.jpg)
Hyper/Word Services Offers…
Training • Consulting • DevelopmentViziAppsMobile Flare • Mobile RoboHelpFlare • RoboHelpMimicSingle sourcing • Structured authoring
![Page 88: Creating Mobile Aps without Coding](https://reader036.vdocuments.us/reader036/viewer/2022062418/554e41f5b4c905f4478b5112/html5/thumbnails/88.jpg)
Thank you... Questions?
www.hyperword.comTwitter: NeilEric