Documente Academic
Documente Profesional
Documente Cultură
1|Page
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.
On the iPad.
2|Page
On an Android Tablet.
3|Page
In Chrome, on a PC.
In FireFox, on a PC.
4|Page
In Safari, 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
11 | P a g e
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.
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
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
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).
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
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
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:
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.
23 | P a g e
The user then selects the Tools / Create Application Shortcuts command and sees this dialog box.
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
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
Use the App Settings / App Settings command to enable or disable this orientation warning.
29 | P a g e
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
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
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
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.
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
42 | P a g e
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
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
49 | P a g e
50 | P a g e