Creating Mobile Apps
Without Coding
Who Am I?
 Neil

Perlin - Hyper/Word Services.

– Internationally recognized content creation and
delivery consultant.
– ...
Contents
– Overview
 2 – Pages and Page Elements
 3 – Creating the Database
 4 – Connecting App to Database
1
1 – Overview
 Market

and ViziApps
 Basic Terms
 App Design Basics
Market and
ViziApps
Market – Why Mobile?
 Provide

information when users want it.

– Now.
 …where

they want it.

– Where they are now.
 …...
Why Mobile?
 “Mobilize”

online doc or help
for use in the field.
– Create using tech comm tools like
Flare and RoboHelp....
Why Mobile?
 Provide

“mobilized” desktop apps:

– Weather (Weather Pro)
– Astronomy (Firedale’s Messier Objects)
– Surve...
Why Mobile?
 Provide

–
–
–
–
–
–
–
–

novel new apps:

Document scanning
Sports bar (“footie bar”) locators
Card-swipe, ...
Why ViziApps
 Custom

mobile apps cost between $5,000
and $50,000.
 Average time to market is 12 weeks.
 Modifying mobi...
Viziapps’ Approach
 Replaces

traditional dev with a GUI model.

– No coding.
– Uses familiar concepts, Google Docs sprea...
Business App Use Cases
Employee Productivity
Example App: Real Estate Capture and Listing

ViziApps Inc., 2011

12
Business App Use Cases
 And

more…
The ViziApps Workflow
 In

a nutshell…
The ViziApps Workflow
visually – no coding.
 Preview live, as well as in an emulator, by
using a preview app from ViziApp...
Why ViziApps Specifically?
 One

of a larger class of GUI app dev tools.

– Includes AppInventor, appmakr, IBuildApps,
ot...
Basic
Terminology
Why Terminology Matters
 Affects

choice of authoring tools, hardware
and software delivery “mechanisms”.
 Terminology p...
Basic Terms
– Short for application, typically used
re mobile devices – “iPhone app”.

 App

– Typically highly focused o...
Basic Terms
 And:

– Hybrid apps:
» Can appear in an app store and can access device
resources, like a native app.
» Can ...
App Design
Basics
 Viziapps

simplifies app dev mechanics and
makes it tempting to just dive in.
 Before you do, however, consider:
– Goal...
Goals
 Define

and limit the app’s goals.

– Too many goals can make the app “fuzzy”.
– Can’t fit too many options on tin...
Functional Design
 Determine

what platform features you need.

– On-device only?
– Data input, retrieval, and processing...
Aesthetic Design
 Design

for the small screen.

– Keep it simple and ruthlessly minimize:
» “Typing.”
» Scrolling.
» Int...
Design for a Small Screen
 This…

or this…

or this…
Aesthetic Design
 Group

related elements
on one screen, within
screen size limits.
 Provide clear transitions
between s...
Usability
 Consider

physical context:

– Number of hands available.
– Range of motion of hands – effect
on button and fi...
Usability
 Provide

feedback for user actions.
 Consider adding “help” for complex apps.
– Usually assumed that apps are...
“Programmatic” Design
 Font,

size, color, button color, background
color, etc.
 Define conventions based on O/S limits…...
“Programmatic” Design
 Consider

O/S differences…

– Such as picker in iOS
vs. Android equivalent,
a drop-down.
“Programmatic” Design
 Define

terminology conventions before
starting app dev, such as…
– Consistent element names – e.g...
Viziapps Dev Process
 Four

major steps:

– Design the app using paper or a wireframe tool.
– Start a new app or select a...
2 – Page and Page Elements
 ViziApps’

Interface
Design Screen – Overall
Design Screen

 To

open your last app or create a new one
(from a template or from scratch).
– Most of these options are...
From a Template…
 Lets

you start a new app using a Viziappssupplied template, vs. from scratch.
New App Dialog Box

 Fields

are self-explanatory.
Design Screen – Existing Project
Design Screen Options
options – List of
all field options and
various actions.

 Field
Design Screen Options
 Various

options
and features.
 Current App –
The app being
worked on and
its type.
– Also to ren...
Design Screen Options
 Select…

for test… – To run this app thru
ViziApps’ previewer app.
 Validate… – Check for dupe fi...
App Background Screen
 To

set the app background.
Storyboard
Storyboard
 Shows

mockup of pages, elements and their
code names, and links between pages.
– Hover over an element code ...
Design Screen
 Field

insertion buttons.

 Click

a button to open its properties screen.
Sample Properties Screen
 For

example, for an image…
Element Notes
 Requires

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

element that can invoke an action has
various action controls.
Ex. 1: Create the Pages
3 – Create the Database
 Overview

of GDocs
Data Handling Options
 Multiple

app data management options:

–
–
–
–

Web services.
Quickbase.
Salesforce.com.
ODBC (Op...
Manage Data Options
 We’ll

focus on the GDocs spreadsheet for
two reasons.
– Concepts are familiar to anyone in business...
Overview of
GDocs and the
Spreadsheet
Overview of GDocs
 Free,

web-based suite with spreadsheet,
word-processing, presentation, drawing,
forms, and data stora...
GDocs (Redirected to Drive) –
Main Screen
Overview of GDocs
 Notice

the two controls on the main page.
 They let you create a new
spreadsheet or upload an
existi...
Sample GDocs Spreadsheet
Spreadsheet Details
A

spreadsheet can have 1+ worksheets.
 Each worksheet’s name appears and is
managed on a tab at
the...
Spreadsheet Details
 For

Viziapps interfacing:

– A column in a spreadsheet is a field.
– Field names are in the first r...
Access Control
A

GDocs spreadsheet is initially restricted
to you.
 To use it with Viziapps, you must make it
publicly ...
Access Control
 The

Sharing
Settings
dialog box
displays.
Setting Access for ViziApps
 Click

Change.
 Change the Private option to Public on the
Web.
 Select the Allow Anyone t...
Ex. 2: Create the Database
4 – Connecting the App to GDocs
Viziapps

Spreadsheet

 Viziapps

can pass data between an app and
a spreadsheet using four operations:
– Select from – I...
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.
C...
1 – Register the Data Source API
1 – Register the Data Source API
 This

is a scary but straightforward process
that uses Google Docs/Drive for security.
...
2 – Connect App To Spreadsheet
 After

registering the data source API, select the
desired spreadsheet.

click Save, wait...
3 – Select the Operation to Define
 Select

the data source and the operation to
define on the selected page.

 The

wor...
3 – …Working Area Displays
4 – Specify the Commands
 Click

 The

the Add Command button.

command line displays.
4 – Specify the Commands
 Select

 And

the specific data command.

worksheet.
4 – Specify the Field Mapping
 Click

the Add a Field icon to start the first
field mapping.

 The

first mapping line d...
4 – Specify the Field Mapping
 Drag

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

select the corresponding worksheet
field.
5 – Specify Any Conditions
 Specify

any conditions to apply to the
command.

 And

repeat as needed…
 For example…
Manage Data Page of Exercise
 For

save_info.
Ex. 3: Connect App To the Data
Preview and
Publishing
Overview of Preview
 Try

the app on your phone often during dev
to be sure it looks and works as you want.
– You’re prev...
Publishing
 Depends

on the vendor, the client, and the
app, but, in general:
– Get a ViziApps account.
– Get the vendor’...
Ex. 4: Preview
A Few Sources of Information
Human Interface Guidelines –
http://developer.apple.com/library/ios/#doc
umentation/userexper...
A Few More…
 Mobile

Design and Development, Fling,
O’Reilly, 2009
 Beginning Smartphone Web Development,
Frederick and ...
Hyper/Word Services Offers…
Training • Consulting • Development
 ViziApps
 Mobile Flare • Mobile RoboHelp
 Flare • Robo...
Thank you... Questions?

978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
Twitter: NeilEric
Upcoming SlideShare
Loading in...5
×

Creating Mobile Aps without Coding

651

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
651
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating Mobile Aps without Coding

  1. 1. Creating Mobile Apps Without Coding
  2. 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. 3. Contents – Overview  2 – Pages and Page Elements  3 – Creating the Database  4 – Connecting App to Database 1
  4. 4. 1 – Overview  Market and ViziApps  Basic Terms  App Design Basics
  5. 5. Market and ViziApps
  6. 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. 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. 8. Why Mobile?  Provide “mobilized” desktop apps: – Weather (Weather Pro) – Astronomy (Firedale’s Messier Objects) – Surveys (Surveyor)
  9. 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. 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. 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. 12. Business App Use Cases Employee Productivity Example App: Real Estate Capture and Listing ViziApps Inc., 2011 12
  13. 13. Business App Use Cases  And more…
  14. 14. The ViziApps Workflow  In a nutshell…
  15. 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. 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. 17. Basic Terminology
  18. 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. 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. 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. 21. App Design Basics
  22. 22.  Viziapps simplifies app dev mechanics and makes it tempting to just dive in.  Before you do, however, consider: – Goals – Design – Usability
  23. 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. 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. 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. 26. Design for a Small Screen  This… or this… or this…
  27. 27. Aesthetic Design  Group related elements on one screen, within screen size limits.  Provide clear transitions between screens.
  28. 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. 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. 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. 31. “Programmatic” Design  Consider O/S differences… – Such as picker in iOS vs. Android equivalent, a drop-down.
  32. 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. 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. 34. 2 – Page and Page Elements  ViziApps’ Interface
  35. 35. Design Screen – Overall
  36. 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. 37. From a Template…  Lets you start a new app using a Viziappssupplied template, vs. from scratch.
  38. 38. New App Dialog Box  Fields are self-explanatory.
  39. 39. Design Screen – Existing Project
  40. 40. Design Screen Options options – List of all field options and various actions.  Field
  41. 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. 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. 43. App Background Screen  To set the app background.
  44. 44. Storyboard
  45. 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. 46. Design Screen  Field insertion buttons.  Click a button to open its properties screen.
  47. 47. Sample Properties Screen  For example, for an image…
  48. 48. Element Notes  Requires a unique “internal” name.  Has appearance controls.  May have action controls.
  49. 49. Element Notes  Every element that can invoke an action has various action controls.
  50. 50. Ex. 1: Create the Pages
  51. 51. 3 – Create the Database  Overview of GDocs
  52. 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. 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. 54. Overview of GDocs and the Spreadsheet
  55. 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. 56. GDocs (Redirected to Drive) – Main Screen
  57. 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. 58. Sample GDocs Spreadsheet
  59. 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. 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. 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. 62. Access Control  The Sharing Settings dialog box displays.
  63. 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. 64. Ex. 2: Create the Database
  65. 65. 4 – Connecting the App to GDocs
  66. 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. 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. 68. 1 – Register the Data Source API
  69. 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. 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. 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. 72. 3 – …Working Area Displays
  73. 73. 4 – Specify the Commands  Click  The the Add Command button. command line displays.
  74. 74. 4 – Specify the Commands  Select  And the specific data command. worksheet.
  75. 75. 4 – Specify the Field Mapping  Click the Add a Field icon to start the first field mapping.  The first mapping line displays.
  76. 76. 4 – Specify the Field Mapping  Drag the desired field from the storyboard to the command line field.
  77. 77. 4 – Specify the Field Mapping  And select the corresponding worksheet field.
  78. 78. 5 – Specify Any Conditions  Specify any conditions to apply to the command.  And repeat as needed…  For example…
  79. 79. Manage Data Page of Exercise  For save_info.
  80. 80. Ex. 3: Connect App To the Data
  81. 81. Preview and Publishing
  82. 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. 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. 84. Ex. 4: Preview
  85. 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. 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. 87. Hyper/Word Services Offers… Training • Consulting • Development  ViziApps  Mobile Flare • Mobile RoboHelp  Flare • RoboHelp  Mimic  Single sourcing • Structured authoring
  88. 88. Thank you... Questions? 978-657-5464 nperlin@nperlin.cnc.net www.hyperword.com Twitter: NeilEric
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×