1. Creating Mobile Apps
Without Coding

2. 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.

3. Contents
– Overview
 2 – Pages and Page Elements
 3 – Creating the Database
 4 – Connecting App to Database
1

4. 1 – Overview
 Market
and ViziApps
 Basic Terms
 App Design Basics

5. Market and
ViziApps

6. 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/

7. 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”

8. Why Mobile?
 Provide
“mobilized” desktop apps:
– Weather (Weather Pro)
– Astronomy (Firedale’s Messier Objects)
– Surveys (Surveyor)

9. 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.

10. 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.

11. Viziapps’ Approach
 Replaces
traditional dev with a GUI model.
– No coding.
– Uses familiar concepts, Google Docs spreadsheets 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.

12. Business App Use Cases
Employee Productivity
Example App: Real Estate Capture and Listing
ViziApps Inc., 2011
12

13. Business App Use Cases
 And
more…

14. The ViziApps Workflow
 In
a nutshell…

15. The ViziApps Workflow
visually – no coding.
 Preview live, as well as in an emulator, by
using a preview app from ViziApps.
 Develop
– 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.

16. 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.

17. Basic
Terminology

18. 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.

19. Basic Terms
– Short for application, typically used
re mobile devices – “iPhone app”.
 App
– Typically highly focused on one task (“microtasking”) 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.

20. 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.

21. App Design
Basics

22.  Viziapps
simplifies app dev mechanics and
makes it tempting to just dive in.
 Before you do, however, consider:
– Goals
– Design
– Usability

23. 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 understand 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.

24. 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.

25. 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.

26. Design for a Small Screen
 This…
or this…
or this…

27. Aesthetic Design
 Group
related elements
on one screen, within
screen size limits.
 Provide clear transitions
between screens.

28. 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

29. 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.

30. “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.

31. “Programmatic” Design
 Consider
O/S differences…
– Such as picker in iOS
vs. Android equivalent,
a drop-down.

32. “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.

33. 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.

34. 2 – Page and Page Elements
 ViziApps’
Interface

35. Design Screen – Overall

36. 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.

37. From a Template…
 Lets
you start a new app using a Viziappssupplied template, vs. from scratch.

38. New App Dialog Box
 Fields
are self-explanatory.

39. Design Screen – Existing Project

40. Design Screen Options
options – List of
all field options and
various actions.
 Field

41. Design Screen Options
 Various
options
and features.
 Current App –
The app being
worked on and
its type.
– Also to rename, duplicate, convert the app type,
or delete the app.
– Plus…

42. 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 management window.

43. App Background Screen
 To
set the app background.

44. Storyboard

45. 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.

46. Design Screen
 Field
insertion buttons.
 Click
a button to open its properties screen.

47. Sample Properties Screen
 For
example, for an image…

48. Element Notes
 Requires
a unique “internal” name.
 Has appearance controls.
 May have action controls.

49. Element Notes
 Every
element that can invoke an action has
various action controls.

50. Ex. 1: Create the Pages

51. 3 – Create the Database
 Overview
of GDocs

52. 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.

53. 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.

54. Overview of
GDocs and the
Spreadsheet

55. 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 realtime with other users.
– Runs under any modern commercial browser.
 Business
sub-text is to undercut MS Office.

56. GDocs (Redirected to Drive) –
Main Screen

57. 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…

58. Sample GDocs Spreadsheet

59. 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”.

60. 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.

61. 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.

62. Access Control
 The
Sharing
Settings
dialog box
displays.

63. 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.

64. Ex. 2: Create the Database

65. 4 – Connecting the App to GDocs

66. Viziapps
Spreadsheet
 Viziapps
can pass data between an app and
a spreadsheet using four operations:
– Select from – Insert field values from a spreadsheet 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.

67. A Five-Step Process…
1.
2.
3.
4.
5.
6.
Open the Manage Data page and register
the data source API for a new project.
Connect your app to the spreadsheet.
Select the app operation to define.
Specify the command(s) to apply to the
operation.
Specify any conditions for the command.
Repeat 3-5 for the next operation or page.

68. 1 – Register the Data Source API

69. 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.

70. 2 – Connect App To Spreadsheet
 After
registering the data source API, select the
desired spreadsheet.
click Save, wait for the “Your database
info has been saved” message, and click Close.
 Then

71. 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.

72. 3 – …Working Area Displays

73. 4 – Specify the Commands
 Click
 The
the Add Command button.
command line displays.

74. 4 – Specify the Commands
 Select
 And
the specific data command.
worksheet.

75. 4 – Specify the Field Mapping
 Click
the Add a Field icon to start the first
field mapping.
 The
first mapping line displays.

76. 4 – Specify the Field Mapping
 Drag
the desired field from the storyboard
to the command line field.

77. 4 – Specify the Field Mapping
 And
select the corresponding worksheet
field.

78. 5 – Specify Any Conditions
 Specify
any conditions to apply to the
command.
 And
repeat as needed…
 For example…

79. Manage Data Page of Exercise
 For
save_info.

80. Ex. 3: Connect App To the Data

81. Preview and
Publishing

82. 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.

83. 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.

84. Ex. 4: Preview

85. A Few Sources of Information
Human Interface Guidelines –
http://developer.apple.com/library/ios/#doc
umentation/userexperience/conceptual/mob
ilehig/Introduction/Introduction.html
 LinkedIn Mobile Groups – Too many to
list; search for “mobile” groups and skim.
 iOS

86. 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

87. Hyper/Word Services Offers…
Training • Consulting • Development
 ViziApps
 Mobile Flare • Mobile RoboHelp
 Flare • RoboHelp
 Mimic
 Single sourcing • Structured authoring

88. Thank you... Questions?
978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
Twitter: NeilEric