7 Lessons from 3 Years of HTML5 Mobile Application Development

7 Lessons from 3 Years of HTML5 Mobile Application Development

I built my first mobile application in 2012 using the Sencha Touch framework and PhoneGap Build . Since then mobile applications have become my full time focus, and I have experimented with a few different frameworks like Famo.us , Phaser and more recently Ionic . I’ve been building HTML5 mobile applications for around three years now, and am confident in the skills I have and the tools I use, to build mobile applications that look and perform just as well as native… continue reading.

Automatically Generate Icons and Splash Screens for PhoneGap Apps

Automatically Generate Icons and Splash Screens for PhoneGap Apps

If you’ve ever submitted an application to either the Apple or Google app stores, then you would know the pain of creating all the necessary splash screen and icon sizes . If you’ve been following my recent Learning Ionic as a Sencha Touch Developer series then you would also know I’ve been getting into the Ionic framework lately. One of the coolest things about Ionic is the resources tool they provide for automatically generating all the splash screens and icons… continue reading.

HTML5 Mobile App Spotlight: Tap and Learn English

HTML5 Mobile App Spotlight: Tap and Learn English

Welcome to the second post of the new HTML5 App Spotlight series. This series will bring attention to the the cool mobile applications developers are building with HTML5 technology. If you think your mobile application would be a good fit for this spotlight series, please contact me and tell me about your app. Learning to build a mobile application is a tough gig, and actually getting it onto the app stores is just as hard. It’s a massive accomplishment to get your… continue reading.

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 5

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 5

In the last part of this series we looked at how to make use of native API’s in an Ionic application using Cordova . In this part – which will be the final part in this series – we will discuss how to build Ionic applications for both iOS and Android . I’ll also provide a “mini analysis” of Sencha Touch vs Ionic based on my experience so far. Although this is the end of this particular series, there will still be plenty more Ionic content to come in the future. There… continue reading.

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 4

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 4

In the last post I gave you a detailed introduction to using AngularJS with Ionic . It may take a bit of practice for these new concepts to stick, but we’ve already gone over most of the things we need to know about how to use Ionic. So far we’ve covered: What is Ionic? How to install Ionic How to create a basic Ionic application How to use AngularJS with Ionic Although there’s certainly plenty more to learn, there’s two major concepts that stand out to me now that still… continue reading.

Creating a Shop with Purchasable Items in a Phaser Game

Creating a Shop with Purchasable Items in a Phaser Game

It is quite common in mobile games to provide a shop where players can purchase items and upgrades for the game. It might sometimes be called a store, upgrade center, barracks or something else but the general idea is the same: a screen where users can purchase things that affect their experience in the game some way . A lot of the time this is integrated with In App Purchases , which allows you to charge real money for items that are purchased in the shop. It is also… continue reading.

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 3

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 3

In the last post we started looking into how to create our first application in Ionic by following along with the example in Ionic’s  documentation . We saw how to build a simple Ionic application, but everything was laid out for us – we weren’t doing much more than copy and pasting. In order to start building our own applications we need to really understand how the technology works, and since Ionic is built on AngularJS  we need to understand how _that _works. I’ve… continue reading.

What Is Sencha Space and What Is It Used For?

What Is Sencha Space and What Is It Used For?

I recently met up with Stefan Stölzle , a Senior Solutions Engineer at Sencha , on his first trip to my home town of Adelaide at a local Irish Pub. We talked about many things, but one particularly interesting conversation focused on Sencha Space . I know of Sencha Space but I only had a vague idea that it was some kind of ” app platform for internal enterprise mobile apps ”. I’ve never really got a good grasp of what it is exactly and what its use case is. Stefan has a… continue reading.

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 2

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 2

In the last post we installed Ionic and generated our first application . We also looked at creating an ionic.io account and uploading the application to it (with that done you can test your applications on your device right away by downloading the Ionic View app). Now we need to learn how to start using Ionic. As always, the best place to start is the documentation . Ionic’s documentation is especially user friendly, and you can see at a glance all the different topics… continue reading.

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 1

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 1

As you may know, there are a lot of options when it comes to HTML5 mobile application frameworks . In my opinion the two big players in the space have been, and still are, Sencha Touch and Ionic . Sencha Touch is perhaps the more mature of the two frameworks, but Ionic is gaining a lot of traction. If you’ve followed this website for any length of time you will know I’m a heavy Sencha Touch user and have been using it for over two years. I’m yet to get past surface… continue reading.

HTML5 Mobile App Spotlight: A Minimal Arcade Game Made with Phaser and PhoneGap

HTML5 Mobile App Spotlight: A Minimal Arcade Game Made with Phaser and PhoneGap

Welcome to the first post of the new HTML5 Mobile App Spotlight series. This series will bring attention to the the cool mobile applications developers are building with HTML5 technology. I’m looking for well executed mobile applications that use any HTML5 mobile framework . Ideally these will be applications in production that are available on app stores. It doesn’t have to be exciting or novel, just a solid example of what your chosen framework can do. If you think your… continue reading.

Making App Store Preview Videos on Windows and Mac

Making App Store Preview Videos on Windows and Mac

Mobile App Stores now allow you to submit a video of your application in action along with the screenshots that are displayed. This can be a great way to demonstrate what your application can do to potential downloaders, especially for games or particularly complicated apps. If you’re developing HTML5 applications for iOS on a Windows computer you won’t have access to the device emulators that are available on a Mac. You could potentially run the application through… continue reading.

How to Take App Store Screenshots for HTML5 Games without 100 Devices

How to Take App Store Screenshots for HTML5 Games without 100 Devices

One of the most frustrating parts of submitting an application to app stores is creating all the different sized screenshots that are required. If you’re submitting to the Apple App store you will need at least 1 screenshot of your application for all of the following : iPhone 4 iPhone 5 iPhone 6 iPhone 6 Plus iPad Maybe you own all of these devices and can take a screenshot on each (which is a task in itself), but I don’t know many people who do. In the past I’ve typically… continue reading.

How to Integrate Game Center into a PhoneGap Build App

How to Integrate Game Center into a PhoneGap Build App

PhoneGap isn’t the most popular choice for mobile game development, but with the ever increasing power of JavaScript it’s certainly possible to create games powered by a browser and PhoneGap . If you’ve played a few games on the iOS platform you will have likely run into Game Center by now. Game Center provides a method of maintaining centralised leaderboards and achievements , so players can see all their accomplishments in one place. This is great news for developers… continue reading.

How to Create iOS In App Purchases with PhoneGap Build

How to Create iOS In App Purchases with PhoneGap Build

One of the most common ways to monetise a mobile application is to offer In App Purchases . An In App Purchase is something the user buys within your application after already having downloaded it. Typically an app that utilises In App Purchases will be free to download, and the user will be charged for premium content like the removal of mobile advertisements , unlocking more features or extra game items. Apple has users credit cards on file, so when a user wants to make… continue reading.

Monetizing Your PhoneGap Build App with AdMob

Monetizing Your PhoneGap Build App with AdMob

With the recent changes to PhoneGap Build we now have access to use all plugins that are listed on plugins.cordova.io as well as the plugins on the PhoneGap Build website . This means that we now have access to the AdMob plugins , which will allow us to integrate AdMob with PhoneGap Build applications. AdMob will allow you to display advertisements to users of your mobile application, and earn revenue from displaying them – similar to how AdSense works for… continue reading.

Announcement: Sencha Touch and PhoneGap Consulting Services

Announcement: Sencha Touch and PhoneGap Consulting Services

Over the years I’ve helped many mobile developers with the tutorials I write for this blog, and with my various eBooks . As my audience grows, a growing number of people are emailing me to ask for advice or for help with a problem they are having. I **love ** this and I don’t want it to change – I want you to keep emailing me and I want to keep helping you as best as I can. Introducing: Consulting Packages It has got to the point where I can’t respond to everybody as I… continue reading.

How to Create Complex Layouts with Sencha Touch

How to Create Complex Layouts with Sencha Touch

Sencha Touch has a powerful and adaptable layout system, but it’s also quite simple to use (if not a bit confusing at first). This tutorial will focus on explaining a little bit about how the Sencha Touch layout system works and then we will walk through building a specific complex layout . 1. A Quick Introduction to Layouts in Sencha Touch Sencha Touch uses web technologies, so one might assume that are layouts would be created with HTML and CSS , this is not the case… continue reading.

Tips for Keeping Your Sencha Touch Projects Organised

Tips for Keeping Your Sencha Touch Projects Organised

Sencha Touch is a great choice in framework for creating complex HTML5 mobile applications – but that doesn’t mean you can’t make a royal unmaintainable mess of your code base if you don’t make an effort to keep things tidy. You should always follow best practices as best you can, but I want to share a few specific tips that help me keep my codebase clean and easy to manage . 1. Split up large items into separate files It is common in Sencha Touch to use arrays of… continue reading.

Is Sencha Touch Still a Strong Choice for HTML5 Mobile Development?

Is Sencha Touch Still a Strong Choice for HTML5 Mobile Development?

TL;DR: At an enterprise level or if you plan on being employed as a Sencha Touch developer, absolutely yes . If you’re a single freelance developer, yes although there is some uncertainty around the support for single developers. Sencha Touch is currently free to use commercially and it seems unlikely that will change, but it is possible. The CEO of Sencha has openly stated that support for the Sencha Touch framework will be a priority moving forward . Is Sencha Touch… continue reading.