Submit Apache Cordova Applications for iOS and Android to the Apple App Store & Google Play

In the past, we have looked at setting up Apache Cordova mobile applications for iOS and Android with HTML5, JavaScript and how to develop for this versatile platform. In what follows we will look at how to submit your application to the app stores of the respective platforms once you have finished developing your application.

As we looked at before, you will need a computer with the SDKs of the platform(s) you want to release on. If you want to release for Android devices, you will need to grab the Android SDK. I actually recommend you install Android Studio as this will download everything you need for this and future releases. If you want to release for iOS devices, you will of course need a Mac computer with Xcode installed. Unfortunately, you cannot develop iOS applications without a Mac. So if you want to build and release for iOS you will have to find some way to get access to one.

You will also need to sign up for developer accounts for the platforms you want to release on. These developer accounts do cost money. For Google Play (Android) there is a one time developer fee of $25. For an iOS developer account the fee is $99/per year.

Once you have signed up for your developer accounts, we can build our applications for release on the iOS and Android platforms.

Submitting to Your Cordova App for iOS to the Apple App Store

Once you are satisfied with how your app functions on all of the devices that you want your application to run on, you can start the process of preparing your project for submitting your app to the Apple App Store.

To submit your Apache Cordova application for sale (or free download) on the App Store you will need to go through the normal process that all apps must go through before they are submitted to the store. Building an app for release on iOS is a fairly straightforward process. You need to compile the release file by running the following command in the root of your Cordova project…

$ cordova build --release ios

This will build your application for release. There will be a generated Xcode project in the platforms/ios directory

Next, you’ll need go to https://developer.apple.com and click on “member center.” Sign in with your developer account if you have not already.

Creating an iOS Distribution Certificate

Click on “Certificates Identifiers and Profiles” and then on the next screen click on “Certificates.”

Click on the “+” button on the certificates page and scroll down in the production section and choose the “App Store and Ad Hoc” option and click “Continue”

We will want to create a new certificate so we will need to open up Keychain Access. The easiest way to do this is in your Mac click on the search bar in the top right and search for “Keychain Access” and open this application, Click on Keychain Access in the menu in the top left, and in the dropdown hover over “Certificate Assistant” and choose “Request a Certificate From a Certificate Authority”

This will open up a modal which you can then fill out the e-mail address with your developer account e-mail and then a common name which can usually just be the same of your organization. After you have filled these out choose the “Save to disk” option and save the certificate to wherever you want on your computer.

Read More »

Create Mobile Applications for iOS and Android with HTML5, JavaScript, and Apache Cordova

Obviously at the time of this writing in the 2nd decade of the 21st century, you are no doubt well acquainted with the immense proliferation and impact that mobile apps have had in and on our world. It was not long ago that we were all sitting at our computers at our desks for the large majority of the time we spent in our various avenues of technological communications over the Internet — complete with our with our giant monitors, whirring computer fans, buzzing drives, and the garbled noise of dial-up modems. Now, mobile phones and tablets probably make up as much, if not more, of our time spent working, playing, and communicating online. Everyone has a ~$100 to $600 smartphone (i.e. computer) in their pocket. And with this rise of mobile, apps found on the popular stores — like Apple’s iOS App Store, Google Play (Android), Amazon and a host of others — have completely transformed the way that we do anything and everything because well, there is an app for anything and everything. Every single facet of life probably has an app to manage some aspect of it. Need to remember to breathe? There is an app for that! Yeah, that is a joke (probably)… but there are plenty of “real” apps out there (e.g. iBeer) that are just as pointless. Fun and goofy, yes, but pointless. And they all post their pointlessness to Facebook and/or Twitter.

Whether you want to develop an app to manage some minute aspect of life or just create a fun game, or whatever else, you can download the SDK for the platform(s) that you want to release your app on, do some tutorials, and start building. That’s all well and good, but if you want to port your application to another platform (e.g. release an iOS app also for Android), you will essentially have to try rebuild the same app using the languages in tools of a different platform. For example, iOS apps for iPhone and iPad have traditionally been developed on a Mac in the Xcode IDE using the Objective-C programming language (though Apple has recently released a new language called Swift that can also be used to build iOS apps). Android apps, by contrast are built using Java and Eclipse or the more recently released Android Studio. Native Windows Phone apps are built using C# and XAML in Visual Studio. Other platforms have their own setups. If you want to take this approach you definitely can, but it should be fairly apparent that developing and maintaining a number of different codebases for multiple platforms quickly adds up to a lot of time, effort, and often money as the sizes and complexity of your apps increase.

At the same time as the rise of mobile in the past decade, something else has occurred: the rise of HTML5 and JavaScript web applications. Beginning at around 2009 – 2010 one of the more noticeable developments was the rise of websites and web applications making use of more open technologies such as HTML5 and JavaScript to bring interactivity and 2-way communication between clients (usually browsers) and servers. With Flash on the way out due its proprietary nature, resource hogging, security issues, poor SEO — along with its being snubbed by Apple for support on iPhones and iPads for basically all these reasons — meant that something had to fill the void. HTML5 and JavaScript moved into this space and developers started turning to it for creating interactive “app-like” experiences.

Wouldn’t it be awesome if there were a way to write a single application in HTML and JavaScript with a single codebase and have a way to port this application to all of the different mobile platforms? I am so glad you asked.

Apache Cordova — also commonly known as “PhoneGap” (the only difference between the two is propriety) — allows us combine combine these open technologies together with the SDKs of the various mobile application platforms to make native mobile applications using technologies such as HTML and JavaScript. You can basically create a small static HTML and JavaScript website or web application and this code will be imported into native iOS, Android, Windows Phone projects and configured specifically for the respective platforms. Thus, you *do* still have to have the SDK of the platform installed to build, run, and release the apps. So to create an iOS app you will still need a Mac and Xcode. To create Android apps you will need to install the Android SDK (which comes with the Android Studio IDE). If you don’t want to mess around with Android Studio, you can just try downloading the old standalone SDK tools here and updating from there. But the important aspect of using Cordova is that the HTML and JavaScript that each project will pull in and build will be the same across all platforms. Want to release an update with some slick new features or fix some bugs that have been reported by your users? You need only change your code in your HTML and JavaScript. You don’t have to try and rewrite the same code and/or functionality in a different language on each platform. From there all you need to do is run a few simple commands from the command lines and your HTML and JavaScript will get built and converted into an application that can run on the platform(s) you are targeting.

In what follows we will explore what it looks like to use Cordova to create a mobile application in HTML and JavaScript that can run on a number of different platform. For our examples, we will build our app for iOS and Android, but the process is essentially the same for building for other platforms (e.g. Microsoft Windows Phone, Amazon Kindle Fire). You would just need to download the SDKs for those platforms if you wanted to run your app on those types of devices as well.

Read More »

Better List Item Grid Tiles with CSS

One of the more common ways that you see collections of items displayed on the web are tile based layouts. Usually these tiles will consist of a container with an image and some sort of descriptive text below the image or as an overlay. Accomplishing this sort of layout in HTML and CSS is not particularly difficult but in some scenarios there are some interesting challenges to tackle, especially when it comes to responsive views. We will explore some of these in what follows.

Certainly in doing a layout of tiles you could use the grid of a CSS framework like Bootstrap or Foundation to put each individual tile into a grid column. But there are, shall we say, annoyances that come with trying to do this. For one thing, because Bootstrap is on a system of rows and grids you will have to count the number of items as they come back to figure out when to close out one row and start a new one. For example, if you wanted a two column grid of items and you were returning markup from the server you would have close out the Bootstrap row on every second item. We’ll be using PHP in our example. I do realize that normally in a production-grade app you would not (or should not) mix this UI content with your server sided logic like we do below. You’d probably use a templating engine of some sort. But this is just an example for the purposes of illustration… and developers do mix these two components together at times as I am sure you are probably aware.

So let’s say we have an associative array $data that has a “text” property as one of its keys. We could print the value of each item in our set in a Bootstrap grid layout like so…

$count = 0;

foreach ($data as $item) {
    if($count == 0) {
        $markup .= '<div class="row">';
    }

    $markup .= '<div class="col-md-6">'. $item["text"] .'</div>';
    
    if ($count++ %2 == 0) {
        $markup .= '</div>'
        $count = 0;
    }

}

Which might give us something like what we see here.

This works but it seems a bit awkward and weird. Because we are using a 2 column grid we have to count every other item and close out the row before starting a new row. If we wanted a 3 column grid we’d have to count every 3 items and so on. This might work okay in some scenarios, but in others we may not have the luxury of being able to use the Bootstrap grid with ease and consistency. What if, say, these results that we currently have could also be appended to via AJAX calls? You see a lot of this sort of thing on sites like Pinterest or Instagram and their infinite scrolling capabilities. As you scroll to the bottom more content gets loaded dynamically from the server from client side calls made in JavaScript.

The point is if you use Bootstrap and want to keep the layout consistent you’re going to have to always be keeping track of how many items you have and where you are in the Bootstrap row closing and opening phase. It’ gets a bit messy and awkward to maintain as functionality gets a bit more dynamic and complex. There probably is, for lack of a better term, a “cleaner” implementation we can take a look at.

Read More »

Local Search with RegEx

I was developing an HTML5 mobile app for an organization. The app was very simple and essentially consisted of a number of different chapters with a lot of text in each. So the homepage of the app was just a list of the chapters and each list item linked to a chapter page. All the text was in a single page (HTML document) and the app framework would just show/hide the relevant portions of it when needed. A lot of mobile HTML5 frameworks do this implementation and it essentially amounts to a simple single page application. None of the content for this app was stored on a server.

However, one of the features requested was search in that they wanted the ability to search for a term and link to the term from a search page. This is usually pretty easy if content is stored in a database because all the infrastructure to run queries against content in said database is there for you. However if all the text is in a single page application, how would you 1. find it and 2, link to it? What follows is essentially my approach in what amounts to essentially a local search functionality in a single page application.

For starters, say we had the following HTML document…

<!doctype html>
<html>
  <head>
    <title>App</title>
  </head>
<body>
    <div id="home" class="page">
        <ul id="menu" class="page">
            <li><a href="#search">Search</a></li>
            <li><a href="#chapter1">Chapter 1</a></li>
            <li><a href="#chapter2">Chapter 2</a></li>
            <li><a href="#chapter3">Chapter 3</a></li>
        </ul>
    </div>
    <div id="chapter1" class="page">
        <p>The quick brown fox jumped over the lazy dog.</p>
        <p>How now brown cow?</p>
        <p>Something else</p>
    </div>
    <div  id="chapter2" class="page">
        <p>Chapter 2 text here...</p>
        <p>More text here...</p>
    </div>    
    <div  id="chapter3" class="page">
        <p>Chapter 3 text here...</p>
        <p>More text here...</p>
    </div> 
    <div id="search" class="page">
        <input id="search-box" type="search" />
        <ul id="search-results"></ul>
    </div>   
</body>
</html>

Each div with the class “page” would be loaded into the main view when a user clicked on a link to the id of the <div> as can be seen in the menu page. For brevity, I’ve kept the content of each <div> really small but imagine that there were a number of chapters and each paragraph in each chapter had large amounts of text.

What I ended up doing is I added a class called “indexed” (to say that the content of this element is going to be indexed in the search functionality) and some “data-reference” attributes to each paragraph of text to be able to tell where in the application I was. If we were going to have for text *with links*, we’d need to have a way to tell “where we are” so that when we load that page we could scroll to the div that had the text that was searched for.

<!doctype html>
<html>
  <head>
    <title>App</title>
  </head>
<body>
    <div id="home" class="page">
        <ul id="menu" class="page">
            <li><a href="#search">Search</a></li>
            <li><a href="#chapter1">Chapter 1</a></li>
            <li><a href="#chapter2">Chapter 2</a></li>
            <li><a href="#chapter3">Chapter 3</a></li>
        </ul>
    </div>
    <div id="chapter1" class="page">
        <p class="indexed" data-reference="1-1">The quick brown fox jumped over the lazy dog.</p>
        <p class="indexed" data-reference="1-2">How now brown cow?</p>
        <p class="indexed" data-reference="1-3">Something else</p>
    </div>
    <div  id="chapter2" class="page">
        <p class="indexed" data-reference="2-1">Chapter 2 text here...</p>
        <p class="indexed" data-reference="2-2">More text here...</p>
    </div>    
    <div  id="chapter3" class="page">
        <p class="indexed" data-reference="3-1">Chapter 3 text here...</p>
        <p class="indexed" data-reference="3-2">More text here...</p>
    </div> 
    <div id="search" class="page">
        <input id="search-box" type="search" />
        <ul id="search-results"></ul>
    </div>   
</body>
</html>

So as the user types into the search box if we use some jQuery and some RegEx we can 1. search through every “indexed” element for the text that was searched for and 2. populate the search results <div> with links to the various elements. It would look a little bit like this…

jQuery(document).ready(function(){

    function search(searchedText) {
        if(searchedText.trim() === ""){
            jQuery('#search-results').empty().text('No results...');
            return;
        }

        var res = jQuery(".indexed:contains('"+searchedText+"')").each( function() {
            var current = jQuery(this).closest('div[class="page"]');
            var regex = new RegExp(".{0,20}" + searchedText + ".{0,20}", "i");
            var str = jQuery(this).text().match(regex);
            var ref = jQuery(this).closest('[data-reference]');
            jQuery('#search-results').append('<li><a href="#'+ current.attr('id') +'?reference='+ ref.attr('data-reference') +'">... '+ str +' ...</a> - '+ current.find('h1').text() +'</li>');
            return; 
        });

        if(res.length === 0) {
            jQuery('#search-results').empty().text('No results...');
        }
    }

    var searchResults = jQuery('#search-results'), searchTimeout;

    jQuery('#search-box').on('keyup', function(){
        var el = jQuery(this);
        searchResults.empty();
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            search(el.val());
        }, 1000);
    });

});

So basically what we are saying here is that while we type into the search box, we will wait until the user is finished typing and then we will check each “indexed” element for the text we are searching for. If we find it we will create a link to that text to the chapter and append a query string value to the “data-reference” value of the element that contains the text. We can then use the event that fires every time the page changes (as a lot of mobile frameworks have) to check for this reference parameter in the url. If it is there we can do something like the following to scroll to the paragraph that contains the text we were searching for. We call the following scrollTo function on each change/load of a page.

function getParameter(name){
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function scrollTo() {	
    if(getParameter('reference')) {
        jQuery('html,body').animate({
            scrollTop: jQuery('[data-reference="'+ getParameter('reference') +'"]').prev().offset().top -20
        }, 100);            
    }
}

The way things are set up at the moment, the regular expression will search for the exact text entered into the search box. Thus, search is case-snesitive at the moment. No matter. If we wanted to incorporate case-insensitivity into things we could simply add the following method…

// make :contains case insenstive for search
jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

By implementing these sorts of techniques and methods, you can incorporate local search and linking into a single page application with a relatively small amount of code. You could take this and expand upon it pretty easily. So even within the perceived limitations of a single page application, you can find ways to implement dynamic functionality that you would expect from any other application. Until next time, happy searching!