Creating Mobile Apps Without Coding

7/25/2019 Creating Mobile Apps Without Coding

1/186


2/186


3/186

Table of Contents

Table of Contents

Dedication

Introduction

Structure of This BookThe DIY Mobile Blog

1 - Overview of Mobile

Three Common Questions

Why Go Mobile?

How Are Apps Being Used?

Speaking the Language of Mobile

Introduction to DIY (Do It Yourself) App Authoring Tools

2 - Overview of ViziApps

Overview of ViziApps (the Company)

ViziApps Development Process

3 - Overview of DIY Hybrid App Design

Overview of DIY App Design

Features of an Effective App

App Design Pointers

Paper Prototyping

4 - ViziApps Page Elements

Design Screen

Hands-On - Create the Sample Apps Screens

5 -The Database

ViziApps Data Source Options

Google Drive Overview

Google Drive Spreadsheets As An App Database

Hands-On - Create the Google Drive Database

6 - Connecting the App to the Database

Registering and Authenticating the APIData Management Commands

Hands-On - Connect the App to the Database Using the Data Management Commands


4/186

7 - Non-Data ViziApps Features

Non-Data ViziApps Features

Alerts

Button

Camera

CheckBox

Email

Hidden Fields

HTML Panel

Image

Image Button

Label

Phone

Picker

Popup Web Page

Push Notification

Scan Bar Code or QR Code

Signature Capture

Slider

Switch

Table

Text Area

Text Field

Text Messaging8 - Publishing

Publish Screen

9 - Creating Web Apps

Introduction to Web Apps

Differences in Creating Web and Hybrid Apps Using ViziApps

Appendices

Appendix A: Sources of Information

Index


5/186


6/186

Dedication

Thanks to ViziApps co-founders George Adams and Michael Kuperstein for creating oneslick app authoring tool and giving me the opportunity to jump into the deep end of appdevelopment.

Thanks to David Asher of ViziApps for the advice and support in writing this book and

helping pull me out of the deep end on occasion.

Thanks to Dan Kalagher, Ann Hewitt, and Shyam Svai for the help and suggestions (andto Dan for not laughing at me when I made the email client error).

And as always, thanks to Connie for having the courage to come along with me asI jumped not just into a new tool but a whole new market (and a whole new world oftechnobabble).


7/186


8/186

Introduction

Welcome to this book on how to create mobile apps without needing a programmer. Ifyouve wanted to create an app for your company or organization but havent been able toustify spending tens of thousands of dollars and weeks or months of time, this book is for

you.

The purpose of this book is to explain how to create a custombusiness app quickly,inexpensively, and in a way thats responsive to user feedback or changing businessconditions.

The obvious question is, why bother when thousands of apps are available today in theApp Store and Play Store? One of them should meet your needs. Do you need to createanother app?

The answer may be no. You may find the right app in one of the stores. Download it andyoure good to go.

But you may not find the right app. None of the many apps that you find may be quiteright. If only that app could be modified to do this... A few years ago, that would havebeen impossible without a programmer.

Today, however, business users, not programmers, can create powerful apps without everseeing code. Youre not going to build the next Angry Birds tm. And even if you dont haveto work in code, you do have to be sure the app does what you need, is easy to use, andattractive, (and meeting those requirements can take a lot of work).

Nevertheless, you can create custom apps that meetyourneeds and do so quickly and

inexpensively - in days, not weeks or months. This book will show you how.

This book has two goals that youll see reflected in its structure. It provides an overviewof mobile concepts and terminology, not comprehensively but enough to lead into thesecond goal, introducing you to a class of app development tools called DIY (Do ItYourself) tools and to actually use one of them, ViziApps Studio, to create an actual app asa demonstration and to get you going on your own app.

Why ViziApps? In the interests of full disclosure, Im an independent consultant whosbeen associated with the company almost since its founding. Im a certified ViziApps

developer, created the training materials for the company, and do app development andperiodic pre-sales and technical support for people considering using the tool.

The focus on ViziApps isnt to deny the existence of competing tools, some of which Illmention or refer to in the course of the book. I just consider ViziApps to be one of themost flexible and powerful tools in the DIY category.

Structure of This Book

Chapter 1 introduces the whole concept of mobile - what it is, types of mobile that you

can create, and business justifications for creating an app. All written in non-technicallanguage with minimal jargon. If you just want to learn about mobile, you can stop here.But thats not why you bought this book

Chapter 2 introduces ViziApps Studio, the DIY tool youll use to create the practice app


9/186

and real apps if you so desire.

Chapter 3 covers app design - making sure your app is attractive and effective as well asworks programmatically.

In chapters 4-8, youll learn about ViziApps-specific features and follow exerciseinstructions to create a type of app called a hybrid that can run on iPhones, Androidphones, iPads, and tablets. Its a simple app - a lead tracker that youd use at trade showsto keep track of prospective customers - but a real app nevertheless.

Chapter 4 describes ViziApps page design features that you can use to create your appsscreens. In this chapter, youll also find part 1 of the instructions for creating the sampleapp, laying out the screens.

Chapter 5 describes ViziApps data handling options and focuses on one that can be usedby any business user familiar with Excel or other spreadsheet. Not all apps have to handledata but if you want to create an app to do inventory counts or track leads at trade shows,for example, youll have to work with data. In this chapter, youll also find part 2 of theinstructions for creating the sample app, creating the database.

Chapter 6 covers how to connect your ViziApps apps screens to data you need to makethe app work. In this chapter, youll also find part 3 of the instructions for creating thesample app, connecting app pages to the database to pass data back and forth betweenthem.

Chapter 7 covers non-data ViziApps features in addition to those described in chapter 6 -how to send an email from your app, take a picture, add images, and more.

Chapter 8 describes the steps for getting your app in the App Store and Play Store in orderto get it out to the world.

Chapters 4-8 dealt with hybrid apps. Chapter 9 looks at a different type of app called aweb app. Web apps use many of the same features as hybrid apps but work differently andcan eliminate some problems that can arise with typical hybrid apps.

If youre completely new to mobile, read the whole book in sequence. If youre familiarwith mobile concepts and design and just want to dive right into ViziApps itself, start withchapter 4.

You wont be a programmer when you finish the book but youll have a goodunderstanding of the app world and youll be able to create your own apps.

And if you enjoy technology and learning new things, its fun.

The DIY Mobile Blog

ViziApps is cloud-based software which means it can change quickly and put the book outof date. To avoid this, check for updates at the DIY Mobile blog athttp://diymobileblog.blogspot.com/. (To be notified of updates, follow me on Twitter - my

handle is NeilEric.) Updates will periodically be incorporated into a new release of theactual book.


10/186

1 - Overview of Mobile

Three Common Questions

Im not a programmer. Can I do this?

Probably, depending on what you want your app to do. There are four main tasks in

creating an app:1.

Decide what you want the app to do and mock it up, ideally on paper.

2.

Create the app pages based on the mockup.

3.

Create any required database and connect the app pages to the database inorder to be able to pass data between the app and the database.

4. Get the app into either or both of Apples App Store or Googles Play Store.

Step 1, planning, seems obvious at first, then can seem difficult until your equivalent

experience kicks in.If this is your first app, youve probably never had to turn a vagueidea for an app - keep track of prospective clients we meet at trade shows - into a formalset of tasks for the app, then turn those tasks into smoothly functioning and flowingscreens and data. But planning and designing the app isnt that different from planning anddesigning a PowerPoint presentation or breaking an operation down into a series of tasksto explain it to a new hire. And youll find that the DIY tools let you quickly create aprototype and quickly change it in response to feedback. (And youll get better at it withyour second and third apps.)

It may take you several tries before you get it right, which is why it may be a good idea to

work on paper at this stage. Youll find a discussion about design and a paper app pagetemplate in chapter 3.

You dont have to be a programmer to do planning, but you do need to understand theprocess or task that will be the subject of your app.

Step 2, creating the app pages based on the design can be surprisingly easy mechanic-ally.Youll drag and drop screen objects like labels, data entry fields, etc. onto a simulatedapp screen - the canvas. A big problem at this stage can be resisting the urge to tweakthe design incessantly.

You dont have to be a programmer to create the app pages; having a background ininterface design helps but the crucial thing is to understand the workflow of the process ortask that and to be able to present it in a logical sequence for the app.

Step 3, creating the database can be daunting for a non-programmer.But many oftodays DIY app development tools either hide much of the work or try to help youthrough it.

You dont have to be a programmer to do this; having experience with databases helps, butsimply understanding how your app will use and create data may be enough to let you getthrough this step.

Step 4, getting your app into a store can be a challenge because the process isunfamiliar and can seem arbitrary.But thousands of developers have gone through the


11/186

process.

You dont have to be a programmer to publish an app although some of the tasks may bemore complex than youre used to, such as creating certain control codes needed to submitto Apples App Store. And the documentation is often written for programmers. But youllfind a lot of information on the web, including YouTube videos, that will help you throughthe process. You may also be able to find consultants who can handle the submission for

you.

In summary, even if youre not a programmer, you should still be able to create yourcustom app.

Im a Windows user and dont have a Mac. Can I do this?

Yes, with one qualification.

Many DIY authoring tools like ViziApps, the tool used in this book for the hands-on work,are cloud-based. So if you plan to create Android apps only, you can do all your work in

the cloud using a Windows PC.The qualification arises if you want to create an app for the iPhone or iPad. If so, you canstill create the app working in the cloud using your Windows PC. However, youll needuse a Mac to generate certain codes required to submit the app to the App Store. If youreust creating one app, find a friend with a Mac that you can borrow. Alternatively, buy a

used Mac or lease one. The latter two approaches can be a waste of money since youllonly need the Mac briefly, especially if your app is accepted into the App Store on the firstsubmission, but the cost should be low.

Is this going to cost a lot?It depends how you define a lot. Some of the numbers below maybe scary at first butkeep reading.

If you run a Google search for cost of developing a mobile app, youll get many hits thatmostly equate to it depends.

A good place to start is Figuring the costs of custom mobile business app development.This article distinguished between apps for the app stores vs custom apps intended for aspecific purpose within a company or organization.

For a commercial app aimed at the stores, the article suggested a range of $20,000 to$150,000, with an average of about $30,000 to $40,000 for an average app, with thecaveat that there is no such thing as an average app.

For a custom app intended for a company or organization, the article suggested thisbreakdown:

n app that extracts data from a database and displays it in a simple list can be expectedto take 4-8 weeks to create at a cost of $26,000 on a single platform.

n app with more complex server-side integration and offline data caching will probablytake 8-12 weeks and cost $71,000 to develop for two platforms.

full-scale enterprise automation app with integration to business processes will takeanything from 3-6 months and may cost over $150,000 to develop on three platforms.


12/186

(From Figuring the costs of custom mobile business app development athttp://www.formotus.com/ 14018/blog-mobility/figuring-the-costs-of-custom-mobile-business-app-development.)

Remember too that the initial development cost isnt the only cost. There will becontinuing costs to debug the app or extend it to meet new business needs or userfeedback. The same article says this about on-going costs Forrester estimated in 2012

that the average amount spent on a typical customer mobile app ($50,000 to $150,000)turns out to be just 35% of the true two-year cost.

Note also that theres nothing in the article that talks about rapid app development - whatto do if you find out today that you need an app tomorrow.

Before throwing up your hands in dismay, read on.

The rationale for DIY authoring tools is to reduce the cost and time needed to create anapp. To see how, lets look at the four phases of app development mentioned earlier. Theapps youll create using a DIY tool probably wont be as elegant as an app done by aprogrammer, but theyll be much cheaper and quicker to create.

1.

Decide what you want your app to do and design a mockup, ideally onpaper.

This can be surprisingly hard to do because we take so much knowledge forgranted, but a few days should be enough to work out your apps flow and designlargelyright.

2. Create the app pages based on the mockup.

This involves dragging and dropping objects on a simulation of the app screensbased on the design and flow you worked out in step 1. This shouldnt take morethan a few days, even just one in some cases.

3. Create the database and connect it to the apps pages in order to be able topass data between the app and the database.

This step has two parts, creating the data and connecting the app to the data.

Creating the data is easy if its already in database form, such as an Excelspreadsheet (and if youre using a spreadsheet as your database as ViziApps cando) since you can just import the data into the database. If you have to create thedata from scratch or modify existing data to use in the app, its harder to gaugethe time but assume anywhere from days to a week.

Connecting the app screens to the data is quick and mechanical once you get thehang of what youre doing. In a small custom app, this might take less than a

day.

As an extreme example, I created this app with and for a Boston-area companycalled Nowlytics (www.nowlytics.com). The purpose of the app was allow


13/186

voting for best-of-show in four categories of startup company at a technologyincubator show run by MIT in Cambridge, MA in the spring of 2013

The app had three pages, the title page shown here, a voting page, and a creditspage. Designing the app, creating the pages using ViziApps, creating thedatabase (a Google Drive spreadsheet), and linking the voting page to thedatabase took under eight hours. It was an unusual app but the DIY tool let uswork that quickly.

For arguments sake then, assume that you can create a custom app in 40 - 80hours. That time at your fully-loaded hourly rate is far less than the figures givenin the earlier article.

One alternative is to contract for professional services from the DIY tool vendor,ranging from letting the vendor create the app for you to contracting for supporton an as-needed basis while you build the app yourself. These options obviouslycost more than doing the app entirely on your own but will still be far cheaper

than the programmer-driven approach.4.

Getting the app into one of the online stores - Apples App Store and/orGoogles Play Store.

Here, the costs get more predictable although they still vary depending on thetool. For ViziApps, for example, youll have to get a developers license for eachplatform on which you want to publish the app. As of January 2014, thats$99/year for Apple and a flat $25 for Android. (Those figures may change.)

Youll then have to pay some processing fee for the DIY tool vendor to run theapp through the store submission process and a maintenance fee for hosting orother services. Different tool vendors will obviously charge differently but, as agauge, ViziApps charges a maximum of $149 per month for a developer fee,


14/186

with various other fees that come in only when youre ready to publish. So thetotal cost of step 4 for a year may only be a few thousand dollars.

One further consideration If you currently have a web site that youvecontracted out to a developer, you may not have as much control as youd likeover updates, and the updating process can be expensive and involve significant

delays. DIY tools like ViziApps give you, the app owner, control over changes.

With these costs, or reduction in costs, creating your own custom app maysuddenly seem affordable and feasible.


15/186


16/186

Why Go Mobile?

If youre reading this book, youre considering going mobile. (Well look at what thatmeans shortly.) But cute slogans aside - theres an app for that - why go mobile? Hereare some reasons to consider, ranging from cultural to business.

Provide information where and when users want it

Modern life is fast-paced; people dont want to wait for things. Mobile lets people findinformation where they are now rather than waiting until they get back to the PC in theiroffice or home.

Lets say youre out shopping and see some item that looks like what you want, but youwant to look for the reviews first. You couldgo home, turn on your PC, read the reviews,decide you want the item, and go back to the store. But thats inconvenient - you have tomake two trips - and the item might be sold out by the time you return to the store.Instead, you can find reviews while in the store on your smartphone.

Or consider traveling with a toddler who needs to go potty now! Being able to find a guideto nearby public toilets when you need it is invaluable.

Or consider a more business-like application. Youre a scrap metal dealer. Your agentsvisit scrap yards looking for metal that your company might want to buy. The typicalprocess is for agents to take pictures of piles of scrap with a digital camera, go back to anoffice area, start their laptops, connect the cameras, and send the pictures to the office asemail attachments. The process works but its cumbersome. What if you could use an appthat has the smartphone camera built in, plus a Save button that can instantly upload thephotos to a database back in the office for analysts to examine and bid on. Its the sameprocess as with the digital camera and laptop, but more convenient, simpler, and faster.

Provide information how users expect it

Pundits have predicted for years that mobile devices will outsell PCs and it finally seemsto be happening. See http://www.smartinsights.com/mobile-marketing /mobile-marketing-analytics/mobile-marketing-statistics/#comments-section, for example. Or, just surveyyour customers to see whether they have mobile devices and which ones. As mobiledevices spread, users expectations are likely to increase.

Personal vs. Business AppsI spent two years of my association with ViziApps running online demonstrations of theViziApps software for people who were interested in creating apps. I soon learned that Icould categorize prospects as personal or business-related and accurately predict whetherthey would follow through with their idea.

Personal Apps

Personal app ideas included high school science fair projects, art education, and its cooland I want to try it. People with these ideas were universally intelligent and well-meaning

but not a single one ever followed through. There were two reasons for this.

First, even without having to code the app, it still has to be designed. Good design isharder than it seems, enough to deter many prospective developers.


17/186

Second, finishing the app isnt the end of the work. It has to be made available through thestores, a task that required some work in unfamiliar surroundings, and that cost money forhosting.

These two issues were enough to deter every casual prospective app builder.

Business Apps

Business app ideas included such things as the scrap metal app mentioned earlier, acalculator app that would compute the amount of concrete needed for a slab or foundationand then automatically contact the nearest concrete dealer, an app that would inventoryand print packing labels for orange crates, an app for a garage that would use GPS tobroadcast a dollars-off coupon for the first ten truck drivers who came in on a given dayfor an oil change, or an app that puts a companys latest product pricing and availabilityinformation right in the hands of mobile sales and service people. Whatever the ideathough, they all had one of three business-related benefits. They could either:

Raise revenue- Like the oil change app.

Lower expenses- Like the packing labels app

Offer some other, non-dollar business benefits- Like the faster response of the scrapmetal app, which might indirectly increase revenue, or the branding (we have an app -were cool - buy from us) of the concrete app, which might again indirectly increaserevenue.

If one of more of these three characteristics applied to the proposed app, it was far morelikely that the app would have a measurable benefit. That would make the prospect more

likely to follow it through.If youre considering creating an app, ask whether it will do one of those three things -increase revenue, reduce costs, or provide some immediate but non-dollar benefit. (Forexample, will the app improve productivity so that employees can work more quickly orefficiently, like the scrap metal example? Or will the app improve customer satisfactionand thus encourage repeat business or work-of-mouth adoption?) If it will, your app maysucceed. If not, your app will likely fail because youll find better things to do with yourtime and resources.


18/186


19/186

How Are Apps Being Used?

To get ideas as to how apps are being used and even spring some ideas as to how youmight use apps in your company, look at Apples App Store or Googles Play Store. Moregenerally though, here are some large scale ideas as to the types of apps you might needand perhaps create using ViziApps.

Mobilized Desktop AppsMobilized desktop apps are app versions of software that may be familiar from your PC,such as weather reporting. Apps like Weather Pro are conceptually similar to Weather.comon the PC. This similarity lets users easily and quickly understand how to use the appbecause they already know what its doing.

Unusual New Apps

These apps dont have PC analogs so users have no mental model of what the app isdoing. This makes these apps a little harder to learn. Yet these apps can be very creative

because they use features that arent available on PCs. For example:

Footie bar locators (sports bar locators in American English)- These apps arose inthe UK during World Cup soccer a few years ago. Using the phones GPS and a databaseof local bars, these apps can detect a users location and give directions to the nearest bar.

Remote credit card payment- These apps appeared in 2010 when Square(https://squareup.com/) put out a credit card reader that plugged into the iPhones audioack; buyers just swiped a credit card through the reader. Since then, competing swipe

units have been released by Intuit (http://intuit-gopayment.com/) and PayPal

(https://www.paypal.com/ us/webapps/mpp/how-paypal-works). In the meantime, theemerging technology of NFC (Near Field Communication) adds a twist by eliminatingswipe units completely. Buyers can simply touch an NFC-enabled credit card to an NFC-enabled device and make the payment. Not all devices support NFC; Apple does not andinstead has released iBeacon, so NFCs status is still up in the air. But taking credit cardcharges in the field opens new app ideas.

Document scanning- These apps let users capture documents, checks, contractsignatures, and other writing in the field without a copier or scanner.

Inventory- If you need to check inventory, you may still do so using paper and pencil andput the data into a spreadsheet or database later. But you can create an app for use on atablet or smart phone that can enter the data right into a database, speeding up the workand eliminating transcription errors.

Lead tracking by sales staff for use at trade shows - Similar for to inventory tracking. Avariant of this is an app for voting for exhibitors at a techno-logy incubator exhibition, likethe one shown below which I developed with and for Nowlytics(http://www.nowlytics.com/) for the 2013 InNOWvation exhibition at MIT in Cambridge,MA.


20/186

Other Types of Mobile

Most of the discussion in most of the book focuses on apps. But there are other types ofmobile, one of which, the web app, is also supported by ViziApps. Youll find adiscussion of the different types of mobile later in the book (Speaking the Language ofMobile on page 30).


21/186


22/186

Speaking the Language of Mobile

Before going further, this section defines the terms used in the rest of this book.

The first is the word mobile itself. It seems obvious - mobile as in smartphones andtablets. But the term can have several meanings; get them wrong and you might startdeveloping the wrong product or hire the wrong person. So what does mobile mean?

This was once mobile.

This still is:

And now this.


23/186

And were heading toward this.

Because of these options, Ill use the term mobile to mean portable devices with smallerscreens than desktop or laptop PCs. In other words, smartphones and tablets today, otherdevices tomorrow.

Whats an app? The term was originally shorthand for application in general but itsnow largely used in reference to mobile devices like smartphones or tablets - e.g. iPhoneapp.

Apps vary widely but tend to be focused on one task, such as providing weather forecasts,

checking the price of a book on Amazon, showing photographs, etc. This focus issometimes referred to as micro-tasking and is an important aspect of app design. Keepyour apps focused on their major tasks and avoid feature-creep.

There are three types of apps.

Native appsfollow (are native to) platform standards like iOS or Android. This meansthese apps run well on their native platforms but dont run on others - an iPhone app wontrun on an Android phone, for example. Native apps can also easily run on-deviceresources like the GPS, camera, and the accelerometers that control screen rotation. Sonative apps are very efficient.

One drawback to native apps, especially on Android devices, is the fact that the nativeapps are sensitive to versions of a platform. In other words, an Android app designed forone version of the Android operating system may not run on an earlier version. Thiscomplicates app planning and QA, especially in a fragmented market like Android wheredifferent vendors, sometimes even the same vendor, run different versions of the operatingsystem across their product lines.

Web appsrun in a browser so theyre not native to a specific platform standard. Forexample, a web app will run in whatever mainstreambrowser is on your mobile device.This eliminates the version problem found in native apps.

Note- Web apps are what is often called the mobile web. ViziApps can create web apps,but you can also create web apps using anyauthoring tool that can format web pages for


24/186

display on mobile devices. This includes technical communication software like MadCapFlare (www.madcapsoftware.com), Adobe RoboHelp (http://www.adobe.com/products/robohelp.html), and web-to-mobile tools like DudaMobile (http://www.dudamobile.com/)and Mobify (http://www.mobify.com/).

One drawback to web apps is that they cant run the on-device resources withoutadditional coding.

Hybrid appsare a fairly recent phenomenon, emerging in the last few years as acombination of the best of native and web apps to solve the problems of both thoseformats. Hybrid apps can access the on-device resources and appear in an app store (whichaids distribution) like a native app, and can run in a browser, like a web app. They can alsobe extended by adding custom Javascript or HTML. (ViziApps lets you do this through itsHTML panel feature and by letting you add custom Javascript to run before or after themain action assigned to a feature.) In effect, hybrid apps are an advanced form of nativeapps.

ViziApps can create hybrid apps and web apps.

Introduction to DIY (Do It Yourself) App Authoring Tools

In the early 1990s, creating web sites required that you know HTML and work in the code.This was a slow, tedious job that lead to many coding errors.

In 1994, SoftQuad Software of Toronto released HoTMetal, which added a GUI (graphicuser interface) on top of the coding. You still needed to know what you were doing, butHoTMetal and tools like it simplified web site development by removing the need to workdirectly in code.

Later tools made web site development simpler still, to the point where almost anyone cancreate a web site today with no programming skills or knowledge.

That same simplification path has manifested itself in almost every aspect of hightechnology since those early internet days; were now seeing it with regard to mobile apps.You still need to know MIME types, Objective C, Javascript, and other technologies tocreate complex, high-end apps or games. But many business apps dont need this level ofcomplexity and power and can be created instead by non-technical business users usingGUI tools that hide the code and let you concentrate on elements like task flow andusability. These tools are referred to as DIY (Do-It-Yourself) authoring tools.

Overview of DIY Tools

The DIY tools space is very young. The first such tool was Google App Inventor, releasedby Google publically in December 2010. (Google later passed it to MIT. The tool is nowavailable through the MIT Center for Mobile Learning under the name MIT App Inventor(http://appinventor.mit.edu/). Google App Inventor led to similar tools like appmakr,iBuildApp, and ViziApps Studio (initially called MobiFlex.)

Note -For a more comprehensive list of app development tools and features, seehttp://www.markus-falk.com/mobile-frameworks-comparison-chart/. The page is inGerman, so go to the home page at http://www.markus-falk.com/index_en.html and clickthe en link in the upper right to translate to English.


25/186

Here are some highlights of these tools:

Free or very low cost- Theres no big upfront investment. Most of the tools are free. Afew, like NSB/AppStudio, cost $99 and up - nearly free. The vendors generate revenue byproviding app development services on a consulting basis, charging fees for hosting andtraining, and various other mechanisms. But the use of the tool itself is often free, so itseasy to try different tools. (Trying many tools is also a good way to waste time so do some

upfront research, including using the matrix, to narrow your tool options.)

GUI interface driven- You can get to the underlying codes if necessary, but most if not allof the app page creation can be done through a drag and drop interface. The realcomplexity lies in setting up the apps data handling, if any.

Template driven- In order to allow DIY authoring, most of these tools provide fixedtemplates to limit your options (and limit the confusion that leads to calls to tech support).

Rapid development You can create apps in days or a few weeks rather than months inorder to quickly respond to business needs. And quickly modify the apps to meet changingbusiness needs or respond to user feedback.

In other words, these tools offer an inexpensive, flexible way to enter the mobile appworld without needing to hire or be a programmer. Apps created using these tools wontcompete with apps or games created by professional programmers but they will meet yourneeds.

With this introduction to mobile out of the way, lets start the process of actually creatingan app. The next chapter introduces ViziApps Studio, the DIY tool that youll use to createan app. Chapter 3 describes app design concepts. After that, youll be creating the app.

Have fun


26/186


27/186

2 - Overview of ViziApps

Overview of ViziApps (the Company)

ViziApps was founded in August 2010 by George Adams and Michael Kuperstein. Georgeand Michael met in the fall of 2009 at an IEEE ENET (Entrepreneurs NETwork) meetingnear Boston. Michael had created several apps for the iPhone. He had also used his MIT

PhD engineering skills to create methodologies for creating IVR (Interactive VoiceResponse) applications with no coding. George had just left his CEO role at the Internetsecurity company he had started and built to an IPO, and was looking at issues in the newwave of mobile devices triggered by Apples launch of the iPhone.

From their software and mobile industry experience, they believed that smartphoneswould become the de facto user device for business processes. They also knew thatbusinesses would have trouble creating all the needed apps with the traditionalengineering project method. That method doesnt scale well and businesses wouldnt find

enough app developers to create the many apps theyd need.Emerging products were easing the creation of mobile web sites and web apps. But thereal need for business was a no-coding, flexible, graphical user interface and back enddata management, with support for native mobile device features like GPS, camera, barcode & QR code reading, signature capture, and audio and video that make user-location-driven, event-driven, and context-driven mobility so powerful for improving businessworkflow processes.

In early 2010, Michael hit on the innovative concept of using his IVR code generationtechnology for faster and easier iPhone and Android app creation. He began developingthe ViziApps authoring tool and the ViziApps iOS and Android Player Apps. By thesummer of 2010, they were in beta. ViziApps, the company, was born in August, 2010,and the first version of ViziApps launched in December 2010.

Knowing that 75% of mobile app development is in the backend data management,ViziApps developed easy to use drag-and-drop, no-coding connectors for leading webaccessible databases and data sources Google Drive spreadsheets as flat file databases,SQL databases, Intuit QuickBase, and Salesforce.com. For backend data needs beyondthose, ViziApps built in support for RESTful web services as well.

During 2011 and 2012, ViziApps received over $1.2 Million in revenue and engineeringproject funding from large customers and IT software/hardware strategic partners tointegrate no-coding support for key technologies into ViziApps and build ViziApps into afull, enterprise-grade scalable platform/solution. By late 2012, new industry standards andplatforms allowed ViziApps to enable its users to create HTML5-based hybrid apps andweb apps. These ViziApps hybrid apps are automatically cross-platform, easily updated,but with full access to the native mobile device features so essential for agile businessprocess mobility.

ViziApps now includes key innovations like a free-form GUI page designer so users arenot constrained to look-alike templates, no-coding backend database connections todatabases that represent over 80% of all the database interfaces used by businesses,including SQL, Intuit QuickBase, Salesforce.com, and Google Drive spreadsheets, and


28/186

modular design for easy partner extensions. And although most apps can be created usingViziApps with no coding, IT users can seamlessly integrate JavaScript and HTML5extensions in their apps. From the extensive 2011/2012 engineering development andtuned from feedback from over 14,000 business users that have signed up to use it by early2014, ViziApps is now a highly scalable, cloud-based enterprise grade product stress-tested with millions of app users.

ViziApps foresees that user awareness and Viziapps capabilities will continue to evolvefor direct ViziApps use by office workers, what Gartner calls Citizen Developers, tocreate many of the mobile apps they need for their mobile users.

The company continues to innovate, its latest development being the January 2014addition of Smart Pages - pre-built, data-ready, and reusable mobile app pages based onbest-practice user experience design to help users create robust apps faster.


29/186


30/186

ViziApps Development Process

ViziApps lets you create mobile apps by following a standard process of creating the apppages, linking the pages to data in a database, and previewing the result. But ViziApps letsyou do most of the work visually, with no coding.

Create the app pages in ViziApps Design pane, shown below.

Youll drag and drop page objects like fields, buttons, and images on the canvas, thesimulated app screen, to lay out the apps pages.

Youll then define the properties of the page objects by using dialog boxes, like the oneshown below for a button.

Create the database for the app.You can do so in various ways including web services,

QuickBase, SQL databases, and the simple but powerful Google Drive spreadsheet, shownbelow.


31/186

Connect various objects on the app pages to the database to define how the objectscontrol the flow of data for the app.For example, youd want to specify what happens tothe data when a user adds an entry in an app and taps a Save button, as shown below onthe Manage Data screen.

By using mostly drag and drop, youll end up with a finished database link like theexample below.

Theres no coding unless you want to add Javascript to a button or other object tocustomize its behavior, but this is often not necessary.

Each time you make a change to a screen or modify the data handling, youll want topreview the result. You can do this by using the built-in previewer, but this previewer has

a limitation. Youre probably using ViziApps Studio on a desktop PC that has a morepowerful processor and more memory than a real mobile device and doesnt slow downbecause of network traffic. So this preview displays your screens accurately but doesntrealistically simulate their operation. To fix that, ViziApps adds another option that


32/186

provides a more realistic preview liveon your mobile device.

After downloading a free ViziApps preview app from the App Store or Play Store to yourmobile device, you can run your actual app in preview mode on your phone or tablet.Heres the ViziApps screen showing an app in development.

And heres the same previewed live on the phone.

The beauty of this preview is that youre actually running the app live - adding entries,reading entries out of the database, sending emails, taking pictures, and whatever other

features you used in the app - all live with realistic processing times, network delays, andso on.

This live preview offers an additional benefit. Without it, the only way to see your apprunning realistically is to get it into the App Store or Play Store. However, it can take up toten days to get your app into the App Store so thats not a feasible way to do a live test.The live preview solves that problem. You can easily download it from the App Store at:https://itunes.apple.com/us/app/viziapps/id500576230

and Google Play at:https://play.google.com/store/apps/details?id=com.viziapps.viziapps

So the overall process is to create the app, add and modify pages and features and previewlive after a change, then go back into the development screens and tweak, then previewagain, until youre satisfied. At that point, youre ready to submit the app to the vendorsapp stores.


33/186


34/186

3 - Overview of DIY Hybrid App Design

Overview of DIY App Design

Youll find many books and resources on app design. The appendix lists some that Ivefound most useful and youll find more. However, these resources tend to assume that youhave a lot of time to devote to getting the design right.

Thats a good goal but the reality of DIY (Do It Yourself) app development is that youwant to create as good an app as you can as quickly and cheaply as you can. The last partof that sentence is the crux - get the app up and in use as fast as possible. Youll nevercreate the next Angry BirdsTMor Fruit NinjaTMbut you will create an app that meets theneeds of your company or organization.

With that goal in mind, the design discussion in this chapter and throughout this bookfocuses on creating a good app quickly rather than a perfect app slowly.


35/186


36/186

Features of an Effective App

An effective DIY app meets several criteria.

It does the intended task.That not as simple as it sounds; you have to clearly define thetask and the capabilities needed to perform it and then stop. Dont add extra features, nomatter how cool they are, if theyll confuse the task. (You canadd features, like a link to

the app developers site as in the screen below - the Created by link at the bottom -but they should be visually low-key.)

Its design is attractive and inviting. It simply looks good.

Its workflow is as obvious as possible.Using a DIY app may not be as obvious or simpleto users as it is to the apps developer whos often intimately familiar with the businessprocess and the task for which the app was developed.

It has a mobileness.Its not a web site that was reformatted to fit on a phone screen orust squeezed on a phone screen. If an app lacks that mobileness - e.g. if its just a

regular web site on a tiny screen, users will try it a few times and then may return to theregular web site because its easier to use.

Note- You canview a regular web site on a phone screen and have it work well, ifthe siteis redesigned to take the screen space limitations and other issues into consideration. Thisfalls into the category of web apps, covered in the last chapter of this book(Introduction to Web Apps on page 251).


37/186


38/186

App Design Pointers

DIY app tools simplify app development so much that you may be tempted to just dive inand start creating screens. That approach is known as the ready, fire, aimoops model.Try it and youll soon find that you went down the wrong path and have to start over.

Instead, before you start developing, consider three issues - goals, design, and usability.

This section discusses these issues and relates them to specific examples when possible.For more references about design, see Appendix A.

Goals

This should be simple. Define what you want the app to do, period. Avoid feature-creep,where more and more features get piled onto the initial design. (One odd side benefit ofusing DIY app tools is that development can be so quick that there may not be time forfeature-creep.)

Aside from avoiding feature-creep, you want to limit the apps goals during the design

phase. Too many goals can produce an app thats:

Confusing to use. There are so many options that users just get lost.

Confusing to navigate.The more the goals, the more the menus and submenus that usershave to navigate to get to the feature they need.

Visually cluttered.Its hard to fit too many options on a screen the size of a sticky notewithout looking busy or cluttered.

Exceeding an internal limit on the platform.A few years ago, I created a motorcycle

maintenance record tracking app that could fit the history of a bike in the owners pocket.It was a big app that wound up with thirty-nine screens, a lot to download. It downloadedslowly but acceptably on the iPhone but exceeded a download time limit on Androidphones. Users got an error message and the download would stop. That problem killed theapp.

Todays technology is better and a thirty-nine screen app shouldnt be a problem unlessthose screens are full of high-resolution images, for example. Remember that mobilebandwidth is still more limited than what youre accustomed to on your desktop PC.

As you define the apps goals, youre also defining its type. This can be a mobilizedversion of a desktop app or something unique to mobile. If its the former, like a mobileweather app, users are likely to understand its concept and task flow from past experienceon their PC. If its the latter, however, such as performing a task based on the userslocation found by the phones GPS, users may not be familiar with the apps concepts andtask flow and get confused.

Defining the apps goal(s) also defines the context in which it will be used. This affects itsdesign and how you test its usability. For example, a restaurant re-view app is likely to beused indoors under low light, which makes contrast important. More about context later in

this section.

So define your app as specifically and tightly as possible and stop.

Design


39/186

Design falls into several sub-categories, starting with functional design.

Functional Design

The apps goals determine what features it will need.

For a real estate app, for example, you might decide to use the camera (to photographproperties to be listed in a database), GPS (to keep track of where a particular property is

located and access it via a mapping function), text entry (to let users make notes about aproperty as they view it), and database access (to hold and retrieve all this information).

For a conference app, you might decide to use the camera (to let users photograph peoplethey meet who have only been names in email or social media), text entry (to let usersmake notes about the people they photograph), database access (to hold and retrieve allthis information), and push notification (to send late breaking announcements toattendees).

For a field service app, you might decide to use the camera (to take photos of questionable

parts and send them back to the office for review), QR code scanning (so that service techscan scan QR codes printed on parts of the machine theyre working on to jump to webpages with repair information for those parts), and so on.

Some additional things will emerge from the function list, such as the need for internetaccess if you have to get data into a database, and the need for the app development tool tosupport local storage in cases where theres no internet access. (Local storage stores dataon the mobile device when theres no internet access, then transfers the data to thedatabase when internet access becomes available).

Aesthetic DesignA DIY app may not be an artistic masterpiece - there probably wont be time to make itone - but it should be attractive to look at and pleasant to use because users may compareit to other apps. Take time to look at apps in the App Store and Play Store that are similarto the app you want to create to see what aesthetic aspects of those app you like and dontlike.

Remember that you have about the same amount of space as a big sticky note. (Butremember to consider the differences in aesthetics and screen space if your app will on

tablets as well as phones.) Keep the interface simple and minimize:Typing- Virtual keyboards are hard to use if people have large hands. The keyboard canalso cover other objects on a page.

Scrolling- Minimize it. Group related items on one page and use clear page transitions ifrelated items scroll or extend onto another page. The page below, for example, is from themotorcycle record maintenance app mentioned earlier. This page let users enterinformation about tire and brake servicing.


40/186

The app let users enter a lot more tire and brake servicing information. It waspossible tofit all the additional entries on one page in portrait (vertical) mode, but the formatting

would have been cramped at best and ruined if a user rotated the phone to landscape(horizontal) mode.

The solution was to add a second page and split the tire and brake service entries betweenthe pages. Users could tap the Continue Entry button at the bottom of the first page todisplay the second page, shown below, where they could make the rest of the entries.

Excess space usage due to wrong assumptions- The three screens below show this.The first shows a data entry page with a Home button at the bottom of the screen, belowthe Save button. The assumption is that users will make one entry on this page andreturn to the Home page, so the Home button should be below the Save button since thatsthe direction in which the users eyes are moving.

Note- The next three images show a feature that looks different in the latest version ofViziApps. However, I used the older look because it so nicely illustrates the point that Immaking here.


41/186

But users might want to make a second entry on this page, so having the Home buttonwhere it is may not be appropriate. The space used for a standard take me home featuremight also be better used for other things. Based on that, the screen below shows therevised page with the Home button moved to the upper left corner of the screen.

Thats better; it frees up space at the bottom of the page. But theres still a problem withthis approach - the need to translate the word Home if the app will be used by non-Englishspeakers. Instead, you can replace the word Home with a graphic that implies home, likethe example below.


42/186

Usability

Consider the physical context in which users will use the app. Its hard to get too specificbecause apps are so different but, for example, consider these issues:

Number of hands available- Will users have two hands free to use the app or one? Iftheyll have two, your range of design options is open. However, if theyll only have onehand free, buttons will have to be larger than they will for a two hands-free app and placeddifferently on the screen to take into account range of motion.

Distractions- What distractions might people face as they use the app? Will they havelong periods of time to use the app or just a few seconds, like an app used in a car but onlywhile stopped at a red light.

Size of fingertip vs. mouse pointer- Will your app be used on its own or might it be usedinterchangeably with full-sized web pages? If the latter, might your users have troublewith small buttons and virtual keyboard keys? Will buttons or fields have labels orcaptions that fit nicely on a full-sized web page but have to be shortened to fit onto or nextto the same button on the app page?

Provide feedback for user actions- If the user makes some entry in the database, providefeedback using an alert (a feature) to return a message saying Message received.Without that feedback, users wont be sure whether the entry was received unless theycheck it in a separate step.

Consider adding help for complex apps- Its usually taken for granted that apps areso simple as to not need help but this may not always be true. For example, an app may bemechanically easy to use but require users to have some background knowledge, calleddomain knowledge, to use the app correctlyor effectively. You might add that

knowledge to the app in separate pages or create it as a separate app or even a separateweb app (Introduction to Web Apps on page 251) to which the main app is linked by aHelp button on each pages title bar.


43/186


44/186

Paper Prototyping

Before launching your DIY tool and starting to create your app, prototype the app first.You may think that youve worked out the flow and design in your mind, but creating aprototype can reveal overlooked holes and unwarranted assumptions.

Prototyping can be a complex and iterative process, but DIY app creation should be rapid

and so should the prototyping. In this section, Ill introduce rapid prototyping on paper.Why not prototype using your DIY app tool? Because youll go through several designpasses during the first stage of roughing out the app and paper is cheap and can be thrownout without guilt or remorse.However

There isa school of thought that says to use your DIY tool itself as a prototyping tool.This will be slower than paper, especially if you get bogged down in nitpicky color andfont selection, but the results will certainly be better looking. There doesnt seem to be ananswer to this question other than your own preferences.

You can simply grab a pad and start prototyping, but the results can be messy becausethere are no constraints on things like the number of buttons or fields you put on a page orthe size of the text. A template can help. You can easily create a template in Word, or copyand use the one on the next page, which I created in Word. Its purpose is to force you towork in roughly the same amount of room that youd have on an iPhone or Android phoneand to help you lay out the page objects by providing the grid lines.

If you copy the template page, use the white space to write down the object names,navigation information, and other details needed to lay out the app. You can also copy thetemplate pages, cut out the simulated page sections, and use them to simulate the actualuse of the app.


45/186

Paper prototyping isnt a complete answer but it is a cheap and fast technique and thusperfect for DIY apps.


46/186


47/186

4 - ViziApps Page Elements

Design Screen

The Design screen is where youll do much of your ViziApps work. Youll use this screento create and manage your apps and create and lay out your apps pages. The image belowshows the entire design screen. Later sections in this chapter discuss specific parts of this

screen in more detail.

Heres a summary of the elements of the Design screen.

In the upper left is a Select App Properties dropdown that lets you set properties like pagetransitions, add a background image, add a navigation bar at the top or bottom of eachpage, setup push notification properties, and more. Youll find more information in theApp Properties section (Select App Properties on page 71).

Below the Select App Properties dropdown are the canvas editing options that let you

copy, paste, and delete fields, change their stacking order on the canvas, and invoke asnap-to-grid to help position objects on the canvas. Youll find more information in theCanvas Editing Options section (Canvas Editing Options on page 84).

To the right of the canvas editing options are the canvas field options that let you addfeatures like labels, text boxes, images, buttons, tables, charts, a camera, and more. Youllfind more information in the Canvas Field Options section (Canvas Field Options onpage 87).

To the right of the canvas field options is the canvas itself. This is where youll lay out the

fields that make up the screens in your app. Youll find more information in the Canvassection (Canvas on page 90).

In the upper right are the app selection, preview, validation, and testing options. Theseoptions let you create a new app, select an existing one to work on, validate your appsfields, open the app in a preview mode on the screen, or send the app to the ViziApps appfor live preview on your phone. Youll find more information in the App Selection,Validation, Preview, and Testing section (App Selection, Validation, Preview, and TestingOptions on page 92).

Below the app selection options are the app page options. These options let you manageindividual app pages, move between pages, save changes to a pages fields, and access thedata management options for a page. Youll find more information in the App PageOptions section (App Page Options on page 97).


48/186

Below the app page options is the storyboard. This feature lets you view a storyboard ofall the pages in the app and identify fields, navigate between pages, and print thestoryboard for review offline. Youll find more information in the App Storyboard section(App Storyboard on page 100).

Select App Properties

The Select App Properties dropdown lets you define major app properties and global

features and predefine elements of other features like NFC (Near Field Communication)and push notification.

App Description

This option displays the Set App Description dialog box, shown below, where you can

type a description of the apps purpose.

Set the Page Transition Type for the App


49/186

This option displays the Set Page Transition Type for App dialog box, shown below,where you can select from nine different transition effects to run as users move betweenpages in the app.

Set Main Design Type for App

This option displays the Set Main Design Type for App dialog box, shown below, whereyou can select a primary device type for the app.

This setting configures the canvas for the device. For example, heres the canvas for thedesign type set to iPhone.

And heres the same app with the type set to iPad.

Warning- You canchange the primary design type from small to large, such as fromiPhone to iPad. However, you cant change from large to small, such as from iPad toiPhone, because larger layouts may not scale well on small screens. Also, if you change


50/186

the design type from small to large, you cant change back. If you do change the designtype from small to large and want to revert, you have to select a backup by clicking theRestore Archived App button and selecting the most recent archived version before youchanged the design type. If you know that you may want to change the design from smallto large, make a copy of the app, give it a unique name that indicates its target (such asmyapp for phones), and make that one your not-to-be-changed master.

App Background Image

This option displays the Set ViziApps Background dialog box, shown below, where youcan set your apps background color from a predefined set of options or upload your owncustom image.

To select from the predefined options, drag the slider until the desired design is centeredon the screen and click on it.

To upload your own image, click the Upload button and select the image on your PC.Custom images must be in JPG with dimensions of 320 px wide by 460 px high.

Tip- Its easy to switch the background image at any time during a project. Because ofthis, you may want to use a grid image to help position screen fields but dont want to usethe built-in snap-to-grid feature because you want to position fields manually. If so, youcould create a grid background image like the one shown below.

You could then make it the background image during development while you position thefields and replace it with the real background image at the end of the project.

App Navigation Bar


51/186

This option displays the App Navigation Bar dialog box, shown below, where you candefine a navigation bar to appear on some or all pages of your app. Heres the AppNavigation Bar dialog box.

Before getting into the details of this dialog box, lets see what a navigation bar looks like.Heres a page without a navigation bar:

Heres the same page with two controls on a navigation bar at the top of the screen. Itworks but the page title is interfering with the buttons

so heres the same page with the navigation bar at the bottom.


52/186

Heres the App Navigation Bar dialog box again.

Bar Position icon- Clicking this icon moves the bar between the top or bottom of thescreen.

Add a Navigation Item button- The dialog box opens with the necessary fields foradding one item to the navigation bar. If you want to add additional items, click the Add aNavigation Item button to add another set of fields for the new item.

List Pages- To exclude the navigation bar from certain pages, type their names in thisfield. Separate multiple names with commas.

Navigation Bar Items- For each bar item, type an ID. (The ID must begin with a letter. Itcan contain any letter or number, but no punctuation or spaces. Use underscores instead ofspaces for greater readability.) Type a title (that displays on the bar so keep it short). Clickthe Pick button to select an icon from the built-in palette or click the Upload button to useone of your own (30 px high by 30 px wide, GIF, JPG, or PNG format). The icon willdisplay in the Icon box.

Save- To save your settings.

Remove Nav Bar- To delete your navigation bar.

Custom HTML HeaderThis option displays the Set Custom Header HTML dialog box, shown below, where youcan add custom HTML code or Javascript to your apps page to add functionality. (Thescreen is so wide that its shown here split into left and right portions.)


53/186

Clicking the Help icon, the question mark, in the upper right corner of the screen, opens aweb page that introduces the use of Javascript in the app header and gives a range ofpredefined examples of features that are not in the ViziApps Studio interface itself, such asrunning Google Analytics or controlling a users phones accelerometers, and otherfeatures that you might not even have realized you could do, such as converting a GPSvalue to a street address or making the users phone vibrate.

Clicking the Reference button below the Help icon opens a web page with syntaxinstructions to incorporate your own custom Javascript into a header.

Note- Javascript isnt necessary for many apps. If you want to incorporate Javascript inyour app, you can work with a programmer or read any of a wide number of booksavailable on the subject.

Setup Push Notifications

This option displays the Setup Push Notifications dialog box, shown below.

Youll find more information in the Push Notification section (Push Notification on

page 218).

Setup Near Field Communications

This option displays the Setup Near Field Communications dialog box, shown below.

See http://diymobileblog.blogspot.com/ for information.


54/186

URL Account Identifier

This option displays the Set Account Identifier dialog box, shown below. If yourecreating a web app, your app will be hosted by ViziApps under a ViziApps-generatedURL. This dialog box lets you customize that URL to make it more friendly or business-specific, such as bestbbq. If youre creating a hybrid app, ignore this feature.

Canvas Editing Options

The image below shows the canvas editing options.

Most of the options, like copy, paste, and delete, will be familiar fromWord or, like Bring To Front and Send To Back, familiar fromPowerPoint. Edit Field opens the properties dialog box of whateverfield youve selected on the canvas, equivalent to double-clicking onthe field.

The Snap to Grid option merits a few more words.

When you add fields to the canvas to create an app page, you need to get them in the rightposition. You can do so by eye, or by creating a graphic of a grid and using it as thebackground image during development (see App Background Image on page 75). Butyou still have to align the fields to the grid lines by hand in the latter case.

Snap to Grid is similar to the grid background option except that it snaps the fields to thegrid lines automatically. You can set the size of the grid line spacing, such as defining a 10px grid, 5 px, etc. Heres an example with the snap feature off.

The button caption on the left reads Snap to Grid, indicating that the feature is notselected. The Add New buttons properties popup shows an X value of 83 and a Y value of114.

If you turn the snap to feature on, heres the result.


55/186

The button caption reads No Snap, indicating that the feature is on. The Add Newbuttons properties popup shows an X value of 70 and a Y value of 120. In other words,the snap feature is using a 10 px grid, the default.

To change the grid size, click the grid size control icon on the right side of the Snap ToGrid/No Snap button. This opens the Edit Grid Size dialog box, shown below, where youcan change the grid spacing.


56/186


57/186

Canvas Field Options

The field options let you add features to an app page. All except HTML Panel, GPS, Alert,and Hidden Field are visible to users. Those four are more programmatic.

The table below introduces each field. For full details about each field and other features,see the More ViziApps Features chapter.

Use this

field

To add

HTML Panel Web page-like content to an apps pages.

Label A static text label, such as a page title or text entry field title.

Text Field A one-line text entry area.

Text Area A multi-line text entry area.

Image A graphic.

Button A button with a text label.

Image

Button

A graphic as a button

Switch An on-off, yes-no control in the form of a sliding switch.

CheckBox An on-off, yes-no control in the form of a check box,


58/186

Table A table with 1+ columns.

Note- These are not true columns. Instead, each column 2 item displays below its corresponding

column 1 item.

Picker A rolling barrel with 1+ drums.

Note - The picker is an iPhone feature. If you add a picker to a page but generate Android output, the

picker renders as a dropdown list.

Slider A slider that users can drag to select a value between a minimum and maximum set by the developer.

Camera A camera that users can tap to take a photo.

GPS A latitude/longitude setting that you can then use with other features.

Alert A message when some task has been completed, such as a thank you for your entry message. Users tap

an OK button on the alert message to close the message.

Hidden Field A field used to store a value for further processing by another ViziApps feature.


59/186


60/186

Canvas

The canvas is the Design screen working area where you lay out the fields for pages in theapp. The image below shows the upper part of the canvas (the lower part is empty exceptfor a simulated iPhone home button).

Two notes about the canvas.

When you hover over a field on the canvas, ViziApps shows the coordinates of its upperleft corner and its dimensions, both in px. For example, in this image:

The Add New buttons upper left corner is at 86 x 118 and its width and height are 144and 25. This information is useful if youre creating several buttons and want to makethem the same size or want a standard alignment and separation for several buttons.

Moving and resizing a field is Windows standard. To move a field, put the pointer on the

field. When the pointer turns into a four-headed arrow, drag. To resize a field, put thepointer on any edge or corner of the field. When the pointer turns into a two-headed arrow,drag.


61/186

App Selection, Validation, Preview, and Testing Options

These options, shown below, let you select an app to work on, validate the fields in theapp, or test the app on your PC and liveon a smartphone. Live testing is unique toViziApps in this market segment.

The Current App field lists the app youre working on. Clicking the pulldown lists all theapps created under your login and password. Just select the app that you want to work onfrom the dropdown.

The options to the right of the Current App field let you create a new app based on atemplate, create a new app from scratch, rename or duplicate the current app, convert the

current app from hybrid to web mode or the reverse, and delete the current app.

If you select the Add a Template App option, the Add a Template App window opens,shown below.

You can pick from various predefined templates that use various combinations of

ViziApps features. You can also refer to a template to see how a particular feature wasimplemented.

If you select the Create a New App option, the New App dialog box, shown below, letsyou create the new app from scratch.


62/186

The fields are self-explanatory except for the hybrid and web app type options. TheSpeaking the Language section explains the differences (Speaking the Language ofMobile on page 30).

The Select App for Testing and Preview App buttons provide two ways to test your app.

The Preview App button runs the app in a window on your PC, shown below,that cansimulate most features in the app.

Clicking the Show App Design button takes you back to the regular Design screen.

The PC-based preview is quick and reliable but has three drawbacks common to suchpreviewers. First, it cant run features that require having a real phone. Second, it uses thefull power of your PC - a more powerful processor and more memory than a real phone.Finally, it doesnt suffer from network delays. So its fast but not entirely realistic. Thesolution to these problems is the Select App for Testing button.

The Select App for Testing feature lets you run your app live on a real iOS or Android

phone or tablet by running it in a ViziApps app that acts as a previewer. You see the apprunning, with live features and real network delays, for a realistic preview. To use it, justdownload and install the free ViziApps app on your phone. (Go to the App Store or PlayStore and look for the ViziApps app, with the icon below.)

Once you click the Select App for Testing button and launch the ViziApps app, youll seea ViziApps splash screen followed by your full app, live.

The Validate References button checks for duplicate field names.


63/186


64/186

App Page Options

The app page options, shown below, let you display, edit, and save pages, access the datamanagement features for each page, and, restore an archived app.

The App Page field dropdown lets you select a page to edit. (You can also select a page toedit by clicking on it in the storyboard.)

The options to the right of the app page field let you create a new page, rename orduplicate an existing page, display the next or previous page, move the currently displayedpage up or down in the stack of pages, and delete the currently displayed page. Theseoptions should be straightforward except for the option to move a page up or down thestack. The top page in the stack is the one that displays when a user opens the app. Thepositions of the other pages have no effect on the processing so you can put them inwhatever order helps you understand the structure of the app.

Note- You can declutter your app pages by creating pages that are not accessible by theusers - orphan pages - and whose purpose is to hold hidden fields. There are two schoolsof thought about this idea. See the section on hidden fields (Hidden Fields on page 185).

The Two Smart Page options are a new addition since the book was written. Look forinformation about them in the blog.

The Save button saves any changes to the currently displayed page. Youre working in thecloud, so save often.

The Manage Page Data button displays the Manage Page Data screen for the currentlydisplayed page. This means that each app page can use data from a different source. Thisis covered in detail in the chapter on Connecting the App To the Database.

The Restore Archived App button lets you go back to an earlier version of the app if youmake a major mistake or the app gets corrupted for some reason. ViziApps creates an

archived version of the app when you click the Save button.


65/186


66/186

App Storyboard

The storyboard, shown below, lets you see all pages in your app, display a page on thecanvas, find the internal (programmatic) name of a field, see how a field connects to adifferent page, and output the storyboard as a PDF for review or annotation.

To see all the app pages, scroll down the storyboard.

Note - If you have many pages, youll have to scroll down the ViziApps Studio windowitself as well.

To select a page to display on the canvas, click on it on the storyboard. This is equivalentto clicking on the page on the App Page field dropdown.

To find the internal name of a field, display its page on the storyboard and hover over thefield names to the right of each screen image. As you hover over a field name, that field isoutlined in red on the storyboard, as shown below where the page title field Lead Manageris outlined in red.

Note - Field names on a beige background have a programmatic function in the app. Fieldnames on a blue background are static.

To see how a field connects to another page, hover over the field name. Its highlighted inred, the target page is highlighted and a red line connects the field and the target page, as


67/186

shown below for the Add New button on home_page that links to add_prospect_page.

To output the storyboard to PDF, click the Download App Design as PDF File button andsave the PDF.

Hands-On - Create the Sample Apps Screens

This is the first of three hands-on sections where you will create the pages for a new app, asales prospect tracking app for use at trade shows. Trade shows are a distractingenvironment so the app must be easy to use. The app will have three pages:

1. A home page.

2. An add a prospect page where you can enter basic lead information.Office staff can review the information by opening the database.

3.

A show all prospects page where you can see the new leads on the phonerather than having to open the database like the office staff. You wont have asmany options for processing that information, but accessing the information onthe phone is convenient if youre on the road.

When you finish this three-part exercise, youll have a working app thats complete exceptfor being published to the App Store or Play Store and that could be used in the real world.

Note- ViziApps is cloud-based software and uses Google Drive for this exercise, whichmeans that some of the steps may go out-of-date. Every effort will be made to keep the

steps up-to-date and publish corrections in the blog, but the occasional change may sneakthrough. Please contact [email protected] if you find an inaccurate step.

Hardware/Software Requirements


68/186

A PC or Mac running an up-to-date browser.

An iPhone 5, 4S, or 4 running iOS 5 or higher, or an Android phone running Android4.0.4 or higher.

Note Contact me at [email protected] if you need help determining what OS youhave.

Create a Google Account

If you dont already have one.

1. Start your browser and go tohttp://drive.google.com/.Youll go to a Google Drive page.

2.

Click the button to sign up. The Create an Account page displays.

Note- If you created a GMail account recently, you may already havea Drive account since Google creates one automatically with a GMailaccount.

3. Follow the on-screen instructions. (Make a note of what emailaddress and password you used.)

Create a Gmail Account


1. Open another browser window and go tohttp://mail.google.com/mail/help/open.html.

Youll go to a Welcome page.

2. Click the Create an Account button. The Create a New Google

Account page displays.

3. Fill out the fields. Make a note of your username and password.

4. When you finish, your account should be created immediately.

Create a ViziApps Account


1. Start IE9+, Firefox, or Chrome, typewww.viziapps.comin the URL field, and press Enter. The Viziapps page opens.

2. Click the Create Account button in the top right corner of the page. The

Create My Account page opens.

3.

Type your first and last name, with no spaces, in the Username field. This isyour Viziapps user name. Make a note of it somewhere prominent.


69/186

4.

Type a 6+ character password in the Password field. This is your Viziappspassword. Make a note of it somewhere prominent.

5. Retype the password in the Confirm Password field.

6. Fill out the other fields and follow the instructions on the screen to createyour account.

Install the Viziapps App

Its free.

1.

Start your smartphone and go to the App Store (iPhone) or Play Store(Android).

2. Find and install the Viziapps app, with this icon

These instructions are accurate as of January 2014 but software changes. Contact

[email protected] if any instruction is incorrect.

Note that youll perform some of the tasks that follow on your PC and others on yourphone, as indicated by the instructions.

On your PC Start ViziApps

Try to do this exercise in one pass and time yourself to start working out metrics for howlong you might need to create your real app.

1.

Open a browser and go to www.viziapps.com.

2. Click the Login link at the upper right corner of the screen.

3.

Type your username and password in those fields and click the Loginbutton. The Design screen opens.

On your PC Create the raw pages for the new app

1.

Click the Create New App icon at the right of the Current App field. TheNew App screen opens.

2. In the Application Name field, type Lead Manager.

3. Open the Designed For pulldown and select iPhone 5 or 4 or AndroidPhone, depending on which one you have.

4.

Open the App Type pulldown and select Hybrid App.

5.

In the Application Description field, type Expo leads.

6.

In the First Page Name field, type home_page.

7.

Click the Save button. You return to the Design page.

Add the second and third pages1. Click the New Page icon to the right of the App Page field. The New Pagedialog box opens.


70/186

2.

Click in the field, type add_prospect_page, and click Save.

3.

Click the Save button to the right of the canvas.

4.

Click the New Page icon to the right of the App Page field. The New Pagedialog box opens.

5. Click in the field, type view_prospect_page, and click Save.

6. Click the Save button to the right of the canvas.

Lay out the home_page

1. Click the App Page pulldown and select home_page.

2.

Click the Label button. Its Properties dialog box opens.

3.

In the Internal Label Name field, type app_title.

4.

In the Label Text field, type Lead Manager.

5. Change the text size to 20 px.

6.

Open the Font Color picker and select the yellow chip sixth down in the firstcolumn value #FFFF00.

7. Click the Insert Label button to add the label.

8. Hover the mouse pointer over the label until a box appears around the label,move the pointer to the lower right corner of the label box until the pointer arrowturns into a diagonal arrow, and drag left to narrow the field.

9. Drag the label on to the black title bar at the top of the page and roughlycenter it.

10.


11.

Click the Image button. Its Properties dialog box opens.

12. In the Internal Image Name field, type company_logo.

13. Click the Choose Stock button. The images display.

14. Click the file card image in the sixth row. You return to the Image

Properties dialog box.

15.

Click the Insert Image button on the dialog box.

16.

Drag and center the image below the label you just added.

17.


18.

Click the Button button. Its Properties dialog box opens.

19.

In the Internal Button Name field, type add_prospect.

20.

Click the Choose Button Color button, then click the dark blue button baron the second line.

21.

In the Button Label field, type Add New.


71/186

22.

Open the Font Color picker and select the same yellow.

23.

Open the Select action pulldown, click Go To Page, click the Go To Pagepulldown, and select add_prospect_page.

24. Click the Insert Button button on the dialog box.

25. Position the button below the file card image and centered.

26. Click the usual Save button.

27. Click the Button button again. Its Properties dialog box opens.

28. In the Internal Button Name field, type view_prospect.

29.

In the Button Label field, type View Prospects.

30.

Open the Font Color picker and select the same yellow.

31.

Open the Select action pulldown, click Go To Page, click the Go To Page

pulldown, and select view_prospect_page.32. Click the Insert Button button on the dialog box.

33. Position this button below the first button and centered.

34. Click the usual Save button. Finally

35. You decide to change the background. Click the Select App Propertypulldown and select App Background Image. The Set ViziApps Backgroundwindow opens.

36. Drag the slider left to number 15, the blue image with the title bar, andclick it to make it the new app background.

37.

Click the usual Save button.

Define the second page

1. Click the App Page pulldown and select add_prospect_ page.

2. Click the Label button. Its Properties dialog box opens.

3. In the Internal Label Name field, type prospect_info_title.

4. In the Label Text field, type Prospect Info.

5. Change the text size to 20 px.

6. Open the Font Color picker and select the same yellow.

7. Click the Insert Label button on the dialog box.

8. Narrow the label box like you did in the previous section.

9.

Move and center the label on the dark blue title bar.


11.

Click the Label button. Its Properties dialog box opens.

12.

In the Internal Label Name field, type prospect_name_label.


72/186

13.

In the Label Text field, type Name.

14.

Open the Font Color picker and select the yellow.

15.

Click the Insert Label button on the dialog box.

16.

Narrow the box and position the label below the title and near the leftmargin.

17. Click off the label to deselect it.

18. Click the Text Field button. Its Properties dialog box opens.

19. In the Internal Name field, type prospect_name_field.

20.

Leave the Select Type of Field set to Text.

21.

Click the Insert Text Field button.

22.

Position the new text field to the right of the Name label.


24.

Click off the text field to deselect it. If not, you may accidentally overwriteit.

25. Click the Label button. Its Properties dialog box opens.

26. In the Internal Label Name field, type phone_label.

27. In the Label Text field, type Phone.

28. Open the Font Color picker and select t

Creating Mobile Apps Without Coding

Documents

Transcript of Creating Mobile Apps Without Coding