Creating Mobile Aps without Coding
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Creating Mobile Aps without Coding

on

  • 668 views

 

Statistics

Views

Total Views
668
Views on SlideShare
554
Embed Views
114

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 114

http://lavacon.org 114

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating Mobile Aps without Coding Presentation Transcript

  • 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