From AppCobra to an App Store

In this article, we’ll look at how you can turn take the app you’ve created in AppCobra to a form that can be submitted to an App Store.

We’ll be using AppCobra and PhoneGap Build to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

The AppCobra Cloud

NOTE: We are currently working on a product called The AppCobra Cloud – which will make everything mentioned here obsolete. You’ll be able to request that any app uploaded to our server be submitted to app stores – and we’ll do all the work for you (for a small fee, of course).

In the meantime, below we talk about how it can be done today.

Do I need an App Store?

Today, this is a good question. Let us consider a few points.

• When you create an app in AppCobra, it can run on any mobile or HTML5 device already. All the user needs is the URL.
• You can set up an AppCobra app so that it can download to a device and run offline if required.
• App Stores require accounts to be set up with the App Store owners, and in some cases you have to create certificates, provisioning profiles and keys. They are only a one off, but still need to be done.
• Above, we mentioned The AppCobra Cloud. This will be a complete online App Store that will make using App Stores obsolete. And it is not too far away.
• App Stores, especially the Apple App Store, may reject your app for any number of reasons.
• In the case of AppCobra apps, your apps will be run identically when directly loaded via the device browser as if they were native apps from an App Store.

I’ve 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 won’t be able to tell the difference.

How do we do it?

• There are three steps here.
• First, you create your app in AppCobra.
• The, you 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.

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.

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 and 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.

When the next dialog box appears, select the option below:

You’ll 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.

First, you’ll see the message above. It just explains a little about what is going on.

You’ll then see the normal export dialog box. Make  any required changes, and select Export. You’ll then be able to select a local folder to export this app to.

Near the end of the export, you’ll 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, we’ve filled in this dialog box.

Once you’ve 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.

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 we’ve uploaded recently.

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…

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, you’ll see your app name, the icon, and the description we entered.

Underneath the name and description of the app, you’ll 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. Let’s 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, you’ll 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.

First, we navigate to the PhoneGap Build page in our Android browser.

Once you’ve 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, you’ll be asked to confirm you want to install this app. If you select yes, it will install the app.

Once installed, it is an App on your machine like any other. below, we’ve added the App to our Android home screen.

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 you’ve downloaded can be installed on any 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.