Deploying Your AppCobra Apps

Deploying Your AppCobra Apps
Deploying AppCobra Apps

This document contains several hyperlinks to online content. You can either follow the links directly, or, if you have a mobile device, use a QR Scanning app to scan the QR Codes ( provided URLs. ), and go directly to the
Read This Online at http://www.appcobra.com/dyaa.pdf.
1|Page

Before we look at deploying apps made in AppCobra, lets have a quick look at what AppCobra apps are. AppCobra creates apps in HTML5 format. This means that the app you create can be run on: iPads, iPad Minis, iPhones, and iPod Touches. Android Phones and Tablets. Desktop PC, or Mac. In Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, and any other HTML5 compatible browser. Smart TVs.
You dont have to do anything special. It will simply run on these devices. In general, it will look and act exactly the same, no matter what device it is run on.
Any Device or Browser

Let us show you what we mean. Below, we illustrate the exact same app, created in AppCobra, and run on multiple devices and browsers.
On the iPad.
2|Page
On the iPhone / iPod Touch.
On an Android Tablet.
3|Page
In Chrome, on a PC.
In FireFox, on a PC.
4|Page
In Safari, on a PC.
Internet Explorer, on a PC.
5|Page
Safari, on a Macintosh.
On an iPhone 5.
6|Page
On Galaxy S4.
In this paper, well look at the various ways your apps can be deployed or made available for your students, users, or customers.
Give it a Try
Weve created some example apps for you to look at to test this out. If you log into http://www.appcobra.com/aperture, we will determine the best app that matches your device.
http://www.appcobra.com/aperture
If you want to try something more general, and you have a tablet, or desktop device it does not matter what device you have, log into http://www.appcobra.com/aperture/apertureipad/apertureipdfs.htm.
7|Page
http://www.appcobra.com/aperture/apertureipad/apertureipdfs.htm
If you have a phone of some type, try logging directly into http://www.appcobra.com/aperture/apertureiphone4/apertureiphone4fs.htm.
http://www.appcobra.com/aperture/apertureiphone4/apertureiphone4fs.htm
8|Page
Contents
Deploying Your AppCobra Apps ................................................................................. 2 Any Device or Browser ....................................................................................................................... 2 Give it a Try ........................................................................................................................................... 7 App Stores ................................................................................................................... 10 Download an Example ..................................................................................................................... 10 Can I really run the same AppCobra app on all devices? .......................................12 App Scaling.......................................................................................................................................... 12 One App Multiple Targets ........................................................................................................... 12 The AppCobra Server .................................................................................................14 Email ...................................................................................................................................................... 14 Share on Facebook or Share on Twitter ..................................................................................... 15 URL ......................................................................................................................................................... 15 QR Code ............................................................................................................................................... 16 Advantages of the AppCobra Server Deployment Method .................................................. 16 Installable Apps...........................................................................................................17 Try It....................................................................................................................................................... 18 Message to Display ........................................................................................................................ 19 On Screen Messages ......................................................................................................................... 19 Restart App After App Has Been Installed ................................................................................. 20 Ask to Retry if Installation Fails .................................................................................................... 20 Enable Install....................................................................................................................................... 20 Disable Install ..................................................................................................................................... 20 From the Browser to the Home Screen ....................................................................21 iOS .......................................................................................................................................................... 21 Windows 8 ........................................................................................................................................... 22 Chrome ................................................................................................................................................. 23 Android ................................................................................................................................................. 25 Windows Phone ................................................................................................................................. 26 Other Browsers ................................................................................................................................... 27 Orientation Detection ................................................................................................ 28 Run at Full Screen .......................................................................................................30 Creating a Native App for an App Store ..................................................................34 Download an Example ..................................................................................................................... 34 What is PhoneGap Build? ............................................................................................................... 35 Creating Accounts with Apple, Google and Others ................................................................ 36 Exporting Your App Ready for the App Store ........................................................................... 36 Ive tested my AppCobra app in a browser on my device. Will it operate differently in an App Store? ..................................................................................................................................... 48 App Store vs. Non App Store .................................................................................... 49 Security for Browser Based Deployment .................................................................50
9|Page
App Stores
Any appropriate apps you create in AppCobra can be placed into an App Store. But before we get onto that, we are going to look at some of the other ways your apps can be deployed. Many of the deployment methods we discuss below have advantages over the App Store approach. If you want to get straight to the App Store discussion click here.
Download an Example
If you have an Android phone, you can download an example native app weve created in AppCobra:
http://www.appcobra.com/aperture.apk
If you have an Android tablet, you can download an example native app weve created in AppCobra:
http://www.appcobra.com/aperturetablet.apk
NOTE: By default, most Android devices are set so that they will only allow apps from the Google Play store to be installed. However, there is a simple change you can make to get around this. Go to your settings, and select the Security tab. In there, youll see an option called Unknown Sources. If you ensure this is ticked, external APK apps will be able to be installed on this device (this process might be a little different depending on your device and version of Android).
10 | P a g e
A native Android App you can download above created in AppCobra.
11 | P a g e
Can I really run the same AppCobra app on all devices?

Well, technically yes. However, generally speaking, an app designed for a tablet is not going to look or function all that well on a phone. The size difference is just too great. When you start an app in AppCobra, you get to select the canvas size for your app:
As you can see, you can select a canvas size to match a specific device or platform. For example, you can select a canvas size designed for an iPhone 5.
App Scaling
AppCobra has the ability to scale output to match the target device. Regardless of the device, or regardless of the device used for playback, the app will scale to match the display size of that device (keeping the correct aspect ratio). So, unless you have a specific requirement to precisely match the display size of a specific device, we recommend you select one of the first two options Tablet / Desktop All Purpose (for tablets and desktops), or Phone All Purpose, where the app is designed to play back on a phone.
One App Multiple Targets

Lets assume you have created an app in AppCobra. One designed to run on tablet computers. And you now want the same app, but aimed at phone size devices. The technique is quite simple. Open the App in AppCobra, and choose the Apps / Save As / With New Name or Destination command. Save the app to another folder. Use the App Settings / Canvas Size command to select a new canvas size. 12 | P a g e
Select a new Canvas Size from this dialog box.
Youll then be asked if you want AppCobra to size and scale the current app to match the new canvas size.
Depending on what size you are converting the app to and from, you will have to move through the app to ensure it looks and operates correctly. But all the same logic and content will remain, and generally only small corrections will be required.
13 | P a g e
The AppCobra Server

When you create an App in AppCobra, you can use the Upload feature to immediately deploy your app on the AppCobra Server. Once this is done, there are several ways you can deploy your app to your customers, students, or users.
Use the Upload button in the main toolbar to upload your app to the AppCobra Server. After the app is uploaded, youll see the dialog box below.
This dialog box appears after you have uploaded your app.
Email
In the dialog box above, you can see the button called Send an Email to Invite Users to Run Your App. If you select this option, you can enter an email address(es) of anyone you wish to invite to run the app. You will also be able to add a custom message. 14 | P a g e
Share on Facebook or Share on Twitter

Select either one of these options to share the URL of your app on either Facebook or Twitter. Below, you can see the webpage that appears when you select the Share on Facebook button.
You have the opportunity to add a comment to the post.
And here is how it looks in your Facebook feed.
URL
The URL of your app appears in the App URL text box. You can copy this URL to the clipboard perhaps if you want to manually invite users to view your app.
15 | P a g e
QR Code
A QR code is a unique graphical code that represents the URL of your app. Most smartphones, certainly Android and iOS devices will have QR Code reader apps. If you have one of these apps, you can run the app, point the device camera at this QR Code, and it will launch the app without you having to enter the URL. If you email users to view your app using the Email option above, the QR code is included in the email.
Youll also be able to copy the QR Code to the clipboard (Copy QR Code to the Clipboard), or save it as an image (Save QR Code).
Advantages of the AppCobra Server Deployment Method

You do not need to create developer accounts with Apple, Google, Microsoft, or anyone else. You do not need to create security keys, or provisioning profiles. You do not have to compile your app into a device or platform specific format. You do not have to wait for any approval to list your app. App deployment is essentially instantaneous. Immediate deployment to social media sites. You can update your app at any stage, and update it on the AppCobra server in minutes. Your App can be set to download, or install on the user device.
16 | P a g e
Installable Apps
A new and exciting feature of AppCobra is the installable app feature. Essentially, this feature allows an App to be downloaded, and installed on a user device. Once installed on the user device, it remains until removed, and in future requires no Internet access to run. This technique works if you upload to the AppCobra server, or upload to your own server. Using this technique, when the user browses to the URL where you app can be accessed, the first time they run the app (or if the app has already been installed, but an update was found), they will see the screen below.
Above you can see how an app might look as it installs to a local device.
Let us be clear that this is not an install quite like an install from, say, the App Store, but it represents a clear alternative, with many advantages over the App Store approach.
17 | P a g e
Try It
Want to give this a try? Log into http://www.appcobra.com/installable.
http://www.appcobra.com/installable
Each time an installable app is run on the users device, the app checks the server where it was installed from to see if there are any new updates, and only downloads these updates if required. If no changes have been made, the app launches virtually immediately, as it is running on the users device. If there is no Internet available when the App is launched on the user device, it simply loads from the local device, in seconds. Sadly, most devices, and browsers, do not allow the AppCobra app to install an icon on the Home Page of that device. It is up to the user to perform this task or up to you to remind them. For example, in the App Settings / App Settings command, youll see this option:
If you set this Show Warning if not App option is selected, you can display a warning on iOS devices (iPads, iPhones, and iPod Touches) to help the user add the app to the Home Screen. The default image that is displayed appears below (only on iOS devices, and only when the App is launched from a browser, rather than the Home Screen).
18 | P a g e
To use this Install feature, before you upload or export your App, use the App Settings / Make This App Installable command. Youll see this dialog box.
Message to Display
On the left of the dialog box, you can add some text (optional) to display in a Message Box after the app installs. Youll note there are two text boxes one is used if the install is successful, and one is used if the Installation fails.
On Screen Messages
In this section, you can enter the text youd like to appear on screen as the App installs, as well as when the install completes successfully or not. This text differs from the text on the left of the screen in that this text only displays on screen not in a Message Box.
19 | P a g e
Restart App After App Has Been Installed

If this option is selected, the app will restart after a successful installation. It is not really required.
Ask to Retry if Installation Fails

Fairly self-explanatory the user will be asked if they wish to retry if installation fails.
Enable Install
Select this option to ensure your App is exported with the install feature.
Disable Install
Select this option to ensure your App does not use the install feature.
20 | P a g e
From the Browser to the Home Screen

Once an app created in AppCobra is added to the device Home Screen (or equivalent), it will look, run, and operate almost exactly like an app from an app store. How far this goes does depend on the device or browser being used.
iOS
iPads, iPhones, and iPod Touches really do this well. Once the user follows the instructions you may show them:
The icon for your app will appear in the iOS Home Screen, something like below:
21 | P a g e
Deploying Your AppCobra Apps Your App is then launched in exactly the same way as any App from the App Store. The icon on the Home Screen is touched, your startup screen displays, and the app then loads and runs. A user will not be able to tell the difference.
Windows 8
Windows 8 or more specifically, Windows 8.1 (which may or may not be available as you read this) also does this well. The user launches your app in Internet Explorer, and it will look something like this:
The user can add this page to their home screen:
Where it looks something like this: 22 | P a g e
Again, it will look and operate exactly like any commercial app.
Chrome
Other browsers do have different techniques and methods of doing the same thing. Chrome, for example, allows you to create application shortcuts, using the Tools / Create Application Shortcuts command.
First, the app is launched in a browser.
23 | P a g e
The user then selects the Tools / Create Application Shortcuts command and sees this dialog box.
An icon is then added to the Desktop.
24 | P a g e
And when the icon is used to start the app, it runs like an app all browser title bars and toolbars are not available
Android
Android is also quite simple.
The user navigates to your App URL in a browser, and then selects the Settings button (which may differ from device to device), and selects Add shortcut from the menu that appears.
25 | P a g e
The App Icon is then added to the Android Home Screen.
Windows Phone
On a Windows Phone, simply navigate to the URL;
26 | P a g e
Deploying Your AppCobra Apps Use the menu button to bring up the browser menu, and select the pin to start option; the app now becomes a tile on the phone home screen.
Other Browsers
Other browsers will have a similar sort of feature perhaps termed as Add Bookmark, Add Favorite, Add to Home Screen, or something very similar.
27 | P a g e
Orientation Detection
A native app can set device orientation but an app launched from a browser, as described above, cannot. So, if youve created an app that is designed for vertical, or portrait view, you can ensure the user is reminded to rotate their device if they a reviewing the app in landscape, or horizontal mode.
Here, we are running an App on an Android phone and it looks perfect because it was designed to be run with the phone oriented vertically.
Here, the user has rotated the phone to a horizontal view. A message appears reminding the user to rotate the device to view the app correctly. They can, however, view in this orientation if they wish.
28 | P a g e
The optional, but default orientation warning.
Use the App Settings / App Settings command to enable or disable this orientation warning.
29 | P a g e
Run at Full Screen

On mobile devices, like Windows, Android and iOS phones and tablets, almost any app that runs, runs at full screen. On a Windows PC, or a Macintosh, this is not always the case. Running an app in a browser will, by default, leave browser title bars, menu bars, and/or bookmark bars visible. Windows 8 Modern Interface is an exception as is Chrome when you save the app as described above as an application shortcut. There is no way that a browser based app can automatically force a browser to run in full screen mode. The security built into these browsers simply do not allow it.
By default, running an AppCobra app in a desktop browser will leave browser title bars, menu bars, bookmark bars, and/or status bars visible.
However, you can request that the browser based app run at full screen.
30 | P a g e
Above, we added a button to our app, and gave it the caption Run in Full Screen mode
Then, using the Interact / (View) All Events command, we selected Run at Full Screen from the Perform This Action listbox.
31 | P a g e
Here, weve loaded the app directly into FireFox.
If we select the Run in Full Screen mode button, the question we added above is asked
32 | P a g e
And if the user selects OK, the browser may (depending on the browser) pose this question for the user. It enables to the user to allow or disallow this action to take place.
If they select Allow, then the app runs at full screen. All browser bars are hidden.
Note that not all browsers will support this option. If the app is launched in a browser, the app queries to the browser to determine whether the browser supports this feature. If it does not (or the app is launched on a mobile device), this button weve added will not display at all.
33 | P a g e
Creating a Native App for an App Store

There are three steps in creating a native app, one that may be able to go into any of the App Stores. First, you create your app in AppCobra. Then, export the app. Third, you upload the app to PhoneGap Build. PhoneGap Build will convert the AppCobra app to a form that is required for submission to a range of App Stores.
Download an Example
If you have an Android phone, you can download an example native app weve created in AppCobra:
http://www.appcobra.com/aperture.apk
NOTE: By default, most Android devices are set so that they will only allow apps from the Google Play store to be installed. However, there is a simple change you can make to get around this. Go to your settings, and select the Security tab. In there, youll see an option called Unknown Sources. If you ensure this is ticked, external APK apps will be able to be installed on this device (this process might be a little different depending on your device and version of Android).
34 | P a g e
A native Android App you can download above created in AppCobra.
What is PhoneGap Build?

PhoneGap Build is an online service, designed to take HTML5 apps (as created by AppCobra) and convert them to a range of native formats that can be submitted to App Stores.
35 | P a g e
Deploying Your AppCobra Apps As you will see shortly, AppCobra will create your app, along with all the information that PhoneGap Build requires to build your app ready for an App Store. This includes startup screens and icons, and metadata that describes your app, including things like category, keywords, author, etc.
Creating Accounts with Apple, Google and Others

Note: Before you can submit any apps to any app stores, you will have to first create accounts with the App Store operators which in most cases is Apple and Google. This article assumes that you have done this. With Google, this is a fairly straightforward exercise. You will need to create a security key, but this is not that difficult. And your apps can be submitted to Google from your PC. Apple, however, has much stricter rules and guidelines. You must generate keys and provisioning profiles, apply for certificates, and of course, enter into a developer agreement with Apple. For many, non-technical users, this initial step which only needs to be done once, may be better done with the help of a consultant or company specializing in this area.
Exporting Your App Ready for the App Store

Below, you can see an example app we created in AppCobra. We will be using this as the example for this exercise.
Once your app is ready, select the Export App command from the Apps menu.
36 | P a g e
When the next dialog box appears, select the option below:
Youll see shortly why this differs from the normal export or upload options. Your app will then export as normal but there will be a few extra steps.
37 | P a g e
First, youll see the message above. It just explains a little about what is going on.
Youll then see the normal export dialog box. Make any required changes, and select Export. Youll then be able to select a local folder to export this app to.
38 | P a g e
Near the end of the export, youll see the dialog box below.
This dialog box allows you to fill in information about your app. This information is required by PhoneGap to be able to successfully process your app, and is generally required by the App Stores so they know how to categorize your app. They are reasonably straightforward options. Below, weve filled in this dialog box.
39 | P a g e
Once youve filled in these details, the lesson completes the export, and the following dialog box appears.
Ensure you choose the second option (Submit App Manually), and select the Select button. Windows explorer will open, and show you the resulting file that has been created.
40 | P a g e
You will see a file called myapp.zip in this folder. This is the file that is uploaded to PhoneGap Build, and contains everything required including the details you filled out earlier. Now, we log into PhoneGap Build.
Below, you can see our PhoneGap Build page. It contains a history of the other apps weve uploaded recently.
41 | P a g e
We then select the New App button. We can then upload the file that was created by AppCobra a few minutes ago (myapp.zip). Below, you can see a button that reads Upload a zip file. We select this
and then we select our myapp.zip file created by AppCobra
42 | P a g e
And the zip file then begins to upload.
Once uploaded, PhoneGap Build goes about converting your apps. It generally only takes a few minutes. Below, this is how your screen will look. At the top of the list, youll see your app name, the icon, and the description we entered.
43 | P a g e
Underneath the name and description of the app, youll see six icons. Each one represents the app in a different format for different destinations. The first icon is for iOS, and the second is for Android. Others include Windows Phone, Blackberry, and more. Each app is ready to download, and ready to submit to an App Store. Lets have a look how we would get this app onto our Android device. NOTE: By default, most Android devices are set so that they will only allow apps from the Google Play store to be installed. However, there is a simple change you can make to get around this. Go to your settings, and select the Security tab. In there, youll see an option called Unknown Sources. If you ensure this is ticked, external APK apps will be able to be installed on this device (this process might be a little different depending on your device and version of Android.
44 | P a g e
First, we navigate to the PhoneGap Build page in our Android browser.
Once youve loaded this page, you select the Android icon under the description of your App. It will then download to your device. In the case of an Android app, this is a single file with an APK extension. Once downloaded, youll be asked to confirm you want to install this app. If you select yes, it will install the app.
45 | P a g e
Once installed, it is an App on your machine like any other. Below, weve added the App to our Android home screen.
46 | P a g e
And when we run the app, it looks and operates exactly as it did as we were testing it from AppCobra.
In the case of an Android device, the file that is created has an APK extension. If you have an account with Google, you can use this APK to submit your app to the Google Play store. Once again, the Google APK format is much better to deal with than the Apple format. This is because the APK file youve downloaded can be installed on any 47 | P a g e
Deploying Your AppCobra Apps compatible Android device. You can even email the APK to a user, and they can download it directly from their email program. With Apple apps, this cannot be done.
Ive tested my AppCobra app in a browser on my device. Will it operate differently in an App Store?
No, it will be virtually identical. You simply wont be able to tell the difference.
48 | P a g e
App Store vs. Non App Store

Below, we list some of pros and cons of getting your app into one of the commercial App Stores. In this section, we refer to the feature of uploading to the AppCobra server as browser based deployment. App Stores generally require developer accounts, security keys and possibly provisioning profiles to be created and maintained. None of these are required for browser deployment. Submitting to the Apple App Store will require at some stage a Macintosh computer. Not required for browser deployment. When an App is submitted to an App Store, it may need to be reviewed by the App Store owners. Your App may be refused if it does not meet the particular requirements of that app store in terms of content. While uploading an app to the AppCobra server is essentially review free, there are some guidelines that need to be followed. Nothing pornographic, defamatory, and other common sense conditions do apply. Generally speaking, it can take around two weeks from submitting an app before it appears in an App Store. Browser deployment is immediate. Updates to your app may also require several weeks before they are available in the App Store. Updates to browser deployed apps is immediate. App Stores at this stage provide the best method to monetize your app.
49 | P a g e
Security for Browser Based Deployment

When you use browser based deployment, your app is available to anyone who has the URL of that app. However, you can add some security, by requiring the user to enter a password before the app will run. Using the App Settings / App Security command, you can set a password that must be entered by the user each time the app is run.
50 | P a g e

Deploying Your AppCobra Apps

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Deploying Your AppCobra Apps

Uploaded by

Copyright:

Available Formats

Deploying Your AppCobra Apps

Deploying AppCobra Apps

Read This Online at http://www.appcobra.com/dyaa.pdf.