TECH TIPS : Changing from Web Game to Android 1

A little background – we have been building our games to run on the web and school computer labs (Mac and Windows) so that we can easily have the educational and game content tested by hundreds, sometimes thousands, of teachers and students. You can buy any of those games here. The difficulty of game testing in schools on iPads is a whole other blog post. For a short version, look up ‘supervised iPad’  – then try not to shoot yourself in despair.

Now that we have a pretty good handle on the content we’re going into apps for Android and iPad. We actually have these installed on our devices in the office for testing and these should be up in the App Store and Google Play within the next few weeks. We’ve found that the shift from web-based to apps is not nearly as smooth as advertised. As evidence, here are some notes from developer Gonzalo Serrano

DAY 1
I started out to discover all of the things that I am going to have to change for the app. The app I’ve been building is very basic. I will build something with basic log in and webview capabilities for the making camp site by Monday and I can demo that. It would be more of a prototype that I would want feedback on.

DAY 2
I did more research into the android builds. I made a Cordova build and pushed it to the repository. I talked to Dennis about it and I’m not sure what he will decide but it sounded like we were going to go with something else. The Cordova build isn’t bad but it seems like it is going to take the same amount of effort whether we build it with or without Cordova.

Note: Cordova previously named PhoneGap is a supposedly (but not really) super-simple way to make your apps run on iOS and Android operating systems. We are testing it in-house now and the jury is still out.

DAY 3
I fixed a couple of issues I was having with the android app as well as made some changes to the standard version that I was working on. I fixed the issue with the app where if you change the orientation it causes the entire app to reload the index page. All of these changes were made on the new branch android_localized NOT the master branch.

Note 2: Also at this time we were experimenting with separate branches of the project for development on different operating systems. It turned out to be more trouble than it was worth and we ended up just making separate directories in the same branch.

I also looked into formatting the HTML page so that it looks good on mobile. I think we should have a discussion about how to be setting up the html pages because I thought it was pretty confusing how some elements seemed duplicated but weren’t. The other issue I saw was that we have the bootstrap css but aren’t using it. Bootstrap makes a lot of the formatting problems for mobile easier to fix and we might be able to reduce the number of different css files that we have, just some food for thought.

Note 3: If you run into this problem with some elements seeming duplicated but not, it is probably because an element with that same ID was on a previous page. One quick way to solve it – look up data-ajax=’false’. Add it to your link, as show below. That will be the topic for a later tech tip. 
<a href=’http://www.7generationgames.com/trading.html’ data-ajax=’false’><img id=’wigwam’ src=’http://www.7generationgames.com/wigwam_icon.jpg’ alt=’wigwam’ /></a>”

DAY 4

I worked on the HTML for the android app by removing the bootstrap libraries and implementing jQuery mobile and experimenting with the styling. Specifically the grid system that is used, which is similar to bootstrap but the naming conventions are different. They function similarly and I was testing different sizes for both desktop and mobile.

DAY 5
I worked on applying more of the jQuery CSS to the pages in the web demo. I also made a change to the app where landscape orientation is forced so that it eliminates the need to format for both orientation since the content we have looks better in landscape anyway.

DAY 6
 Ready for testers! I installed the android app on all the devices we have in the office.

DAY 7
I worked on fixing the redirection issues that I found where some links went directly to a page on the web rather than within the app. I also found some pages that were using bootstrap and I wanted to change them but removing bootstrap completely changed the layout so I reverted them back and will be looking at how bootstrap is used and translating that to jQuery mobile.

DAY 8
While changing the CSS of the files in the android folder I ran into an android error where the player was not playing the video at all and the app would crash. I didn’t understand why this was causing an issue but I was able to trace the bug to the  embedded js which was returning an error with the use of the symbol ‘$’. I had to add in the links for the jQuery which had somehow been removed from the head. I want to continue researching about the android webview which might be at the core of my layout problems.

In short, moving your app from the web to Android (or iOS, for that matter), is not nearly as fail-safe as you might have been led to believe. Once you have all of the content developed and tested, it is nowhere near as time-consuming as creating an app from scratch, but there are a lot of issues to address, from layout to mobile libraries to fitting the app development into your existing version control system. Just some things to think about.