Monthly Archives: October 2013

How to reduce your Titanium Android build/install/test cycle

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

I recently had to use Appcelerator’s updated Google Maps module for a project which, if you read the documentation “Only works on Android devices. Not supported on the Android emulator.”

Which means that you can no longer user the Emulator to test your project and have to go through the long compile and installation cycle to install it on your device.

Luckily there is a way to avoid the long boot cycle and get a faster emulator at the same time (Since, let’s be honest, the standard Android emulator is *painfully* slow).

You need to install GenyMotion which will give you a blindingly quick Anrdoid install (Much quicker than my actual device in fact) and in our tests reduced the compile and installation cycle from 60 seconds to 35 seconds.

Big thanks to Joseph Burger CTO of Labor Sync for providing the detailed instructions of exactly how to set up in the accepted answer on this page: http://developer.appcelerator.com/question/154253/there-must-be-a-way-to-use-the-new-genymotion-emulator

Go there and run through the steps, it won’t take long and will save you a lot of time and stress in the long run.

It’s currently free but I wouldn’t be surprised if they start charging at some point so enjoy it while you can.

Foolproof Labs – Usability & UX Mentoring for Start-ups (Session 1)

Last saturday our friends at Curiosity invited us to give a workshop on usability to 2 local startups, ivolunteer and Dmap.  It was a pleasure to present and work with such passionate people who are working for 2 very worthy causes.

Ivolunteer aims to gather volunteers from all over the Philippines to help out others who are in need. Volunteers can choose the activities they want to participate in then sign up online.

Dmap is still in beta phase.  The concept is a web app where users can input locations of diagnosed dengue cases with the vision of being able to map outbreaks in areas.  This project really resonates with me as i have a young family, and have recently just recovered from dengue.

Initially the plan was to have a one day event where we would do live usability testing on their sites and then analyse the findings, but after several discussions we decided it would be more productive if we turned the 1 day workshop into a 4 session spanning over a 3 month period.  Here is the schedule we decided on:

  • Session 1 – Usability basics & Live Expert Review
  • Session 2 – Usability test of your products (1)
  • Session 3 – Usability test of your products (2)
  • Session 4 – Usability test of your products (3)

I started off the workshop by discussing basic usability topics so the teams had an appreciation and understand of what its all about, then workshop ended with a live expert review, performed by Christine Balatbat from Movent.

Many thanks to Curiosity for inviting Foolproof Labs to present, and to ivolunteer and dmap for attending. We’re looking forward to the next session where we will be testing the sites in the Foolproof Labs office!

presentation of the schedule for the workshop

 

How to setup A/B Testing on your site using Google Analytics

Cutting to the chase as always.  The “Why” you would want to do A/B Testing will be covered in a separate post but once you have the “Why”, here’s the “How”:

[0. Make sure you have Google Analytics installed on your site]

1. Create a separate version of your website with the variation you want to produce on a separate url e.g. if your homepage is www.example.com, you might upload a new page to your site called www.example.com/?abtest=1 or www.example.com/index2.html.  The naming convention is completely up to you.

2. Decide what goal you want your user to complete on the site, place an order? fill in a contact form? connect to live chat? etc.  You can track the goal completion by doing one of the following: 1. Have the user access a particular page (e.g. thankyou.html or ordersuccess.html etc); 2. Have the user stay on the page for a specific duration; 3. Have the user access x pages per visit; 4. Have the user perform a particular event e.g. play a video, click a button etc.  For options 2 and 3, you can let Google handle this.  For option 1, you need to have your developer setup the page with Google Analytics on.  For option 4, you need to use Google Events, here are the instructions

2. Go to http://www.google.com/analytics, login and find the data for your site.

3. On the left menu click Behaviour –> Experiments

4. Click Create Experiment and go through the setup wizard.  (NB: if your goal is not already setup in Google Analytics, you will need to set that up by clicking “Create new objective” in the setup wizard)

5. Insert to your page (just after the opening <head> tag) the code the Create Experiment wizard gives you.

6. That’s it, you’re done.  You should see data coming in within 1 – 2 days.

Free WordPress and other Training with Foolproof Labs

Hello!

We at Foolproof Labs would like to start giving back to the community and we’re really, really keen to start a series of FREE training sessions to introduce people to various topics that Foolproof Labs deals with on a daily basis.

The first one we’re looking at is a basic introduction to WordPress and will cover converting an HTML template to a WordPress theme and other basics. It will be useful for designers and HTML developers looking to take their work to the next level. It’s something you can find a lot about on the web so if you learn well by reading tutorials online then stick with that. On the other hand, if you learn better by having someone teach you face to face or you’re just curious then you could consider signing up.

The training session would probably be for just half a day and food would be provided and it would be absolutely, 100% free.

If you would be interested in this, please leave your name and email address in the following form so that we can contact you when we finalise the date and location: https://docs.google.com/forms/d/1koLBMWU0Fzpg44Mx5O7_IeacyRFzXj4VEOdkXWl8g1Y/viewform

Other topics we are considering in future are: Symfony2, Magento, User Experience, SEO, PPC, Titanium, Drupal.

How to upload your PHP application to Google’s App Engine in 3 steps

The Google Tutorials are so good for this, anything we write here would only add to the noise so here are Google’s 3 steps you need to upload your Application to Google’s PHP App Engine:

1. Follow this: https://developers.google.com/appengine/docs/php/gettingstarted/introduction

2. To be able to push to code live via GIT follow this: https://developers.google.com/appengine/docs/push-to-deploy

Now your app will be hosted on an appspot.com subdomain and can be updated by pushing code to the GIT server, great!

3. To get rid of the appspot.com subdomain, follow this: https://developers.google.com/appengine/docs/domain [make sure you click the Sign up for Google Apps link on the right if you haven’t already]

And you’re done! There now, that was easy wasn’t it?

SOLVED: How to fix unlicensed modules detected error in Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

If you see an the “unlicensed modules detected” error and all of your plugins are free.  Here’s a solution that worked for us (thanks to Matt Perkins’ comment here http://developer.appcelerator.com/question/126870/unlicensed-modules-detected-on-plus-modules#264492):

1. Open Terminal and run “uuidgen”

2. Copy the code you see on the terminal

3. Open tiapp.xml, replace what’s in the “guid” tag with the the code you copied.

4. In Titanium Studio, do Project –> Clean

5. Run

Further Reading: http://developer.appcelerator.com/blog/2011/09/module-verification.html

NavigationWindow: Add custom back button and label title in Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

1. Create a custom button in your controller.  NB: If you want your “color” property to be applied, you have to include “backgroundImage: ‘none'”

var btnBack = Ti.UI.createButton({
 title: '< Back',
 color: "white",
 backgroundImage: "none"
 });

2. Add an event listener on your back button and use the global reference to your navigtionWindow (that you set in your parent controller) to close the current window:

btnBack.addEventListener('click', function(){
var nav = Alloy.Globals.navLanding;
nav.closeWindow($.setupRegistration);
});

3. Set the leftNavButton property of your current window to the instance of the new button that we just created (i.e. btnBack):

$.setupRegistration.setLeftNavButton(btnBack);

4. Set the titleControl property of the current window to a new Label:

$.setupRegistration.titleControl = Ti.UI.createLabel({
 text: L('title_create'),
 color: 'white',
 font: {fontFamily: 'Bond4F-Medium', fontSize: 18}
 });

 

 

Custom Paging Control with Alloy, Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Thanks to this Gist from Raúl Riera: https://gist.github.com/raulriera/2417902 which we forked here: https://gist.github.com/philsmithsonuk/6791373

Our specific requirements were a custom pagingcontrol element (which is unsupported by Titanium) with different designs for active and inactive pagingcontrols.

Here’s a simplified implementation of what we did:

1. Index.xml:

...
<Window id="window1">
 <View id="view_slider_container">
  <ScrollableView id="sview_slider">
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
  </ScrollableView>
 </View>
</Window>
...

2. Index.js

...
require('PagingControl');
var sViewPagingControl = new PagingControl($.sview_slider);
$.window1.add(sViewPagingControl);
...

 

iOS Multi-level Navigation with Titanium and NavigationWindow (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

I’m sure it’s in the documentation but I couldn’t see how to handle navigation with more than one level using Alloy. The key point is that I had to store a reference to the navigation menu from the index.xml as a global variable (skip to step 4 to see that).

Here’s a simplified version of what I implemented:

1. index.xml:

<Alloy>
   <NavigationWindow id="navMenu" platform="ios"> 
     <Window id="window1" class="container"> 
        <Label id="lbl_one">First window</Label> 
     </Window>
   </NavigationWindow>
</Alloy>

2. window2.xml:

<Alloy>
  <Window id="window2" class="container">
     <Label id="lbl_two">Second window</Label>
  </Window>
</Alloy>

3. window3.xml:

<Alloy>
  <Window id="window3" class="container">
     <Label id="lbl_three">Third window</Label>
  </Window>
</Alloy>

4. index.js:

$.lbl_one.addEventListener('click', function(){
    var win = Alloy.createController("window2").getView();    
    $.navMenu.openWindow(win,{animated:true});
    Alloy.Globals.navMenu = $.navMenu; //set a global reference to the navmenu that we will use in child windows	  	
});

5. window2.js:

$.lbl_two.addEventListener('click', function(){	
     var win = Alloy.createController("window3").getView();
     Alloy.Globals.navMenu.openWindow(win);		
});