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

Creating Mobile Aps without Coding






Total Views
Views on SlideShare
Embed Views



1 Embed 101 101



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.

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

    Creating Mobile Aps without Coding Creating Mobile Aps without Coding Presentation Transcript

    • Creating Mobile Apps Without Coding
    • 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.
    • 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.  …how they expect it. – Mobile devices to take top spot from PCs. – With much caution, see …Mobile Web Will Rule by 2015 »
    • 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”
    • Why Mobile?  Provide “mobilized” desktop apps: – Weather (Weather Pro) – Astronomy (Firedale’s Messier Objects) – Surveys (Surveyor)
    • 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.
    • 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.
    • 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.
    • 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 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.
    • 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.
    • Basic Terminology
    • 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.
    • 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.
    • 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.
    • App Design Basics
    •  Viziapps simplifies app dev mechanics and makes it tempting to just dive in.  Before you do, however, consider: – Goals – Design – Usability
    • 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.
    • 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.
    • 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.
    • 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 screens.
    • 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
    • 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.
    • “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.
    • “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. 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.
    • 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.
    • 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 missing if this is your first app.
    • 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 rename, duplicate, convert the app type, or delete the app. – Plus…
    • 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.
    • 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 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.
    • 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. 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.
    • 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.
    • Overview of GDocs and the Spreadsheet
    • 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.
    • 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 existing spreadsheet.  Now a closer look at the spreadsheet…
    • Sample GDocs Spreadsheet
    • 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”.
    • 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.
    • 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.
    • 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 to Edit option under Edit Access.
    • 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 – 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.
    • 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.
    • 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.  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.
    • 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
    • 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.
    • 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 displays.
    • 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 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.
    • 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.
    • Ex. 4: Preview
    • A Few Sources of Information Human Interface Guidelines – umentation/userexperience/conceptual/mob ilehig/Introduction/Introduction.html  LinkedIn Mobile Groups – Too many to list; search for “mobile” groups and skim.  iOS
    • 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
    • Hyper/Word Services Offers… Training • Consulting • Development  ViziApps  Mobile Flare • Mobile RoboHelp  Flare • RoboHelp  Mimic  Single sourcing • Structured authoring
    • Thank you... Questions? 978-657-5464 Twitter: NeilEric