Thursday, June 27, 2013

Node, Express, and Kendo UI


For the last few months I have been getting into Kendo UI. Normally I am not a fan of other people's UI frameworks, but I like the job Telerik has done with this package and I hate writing plumbing code. I mean how many times do you want to write a grid or other control?

I was having a bit of trouble with some aspects of the DataSource and Grid controls and happened across a tutorial video showing interfacing a KendoUI DataSource with a RESTful backend.


Only problem was that the author of the video left out some parts of how the app was built. So I decided to work out the missing bits on my own. This is a demo project to show how to combine a Node/Express RESTful backend with a KendoUI frontend.

In place of a proper database this app uses a JavaScript object, this is a demo after all. There is very little data checking going on here, so be careful.

I am not a huge fan of Jade, so I used Handlebars instead as my template engine. HBS allows me to use Handlerbars on the server side. Frankly the app doesn't use templates much and everything could have been done with straight HTML, but I am probably going to expand the app in the future with templates on both the server and client sides.

I realize there isn't a lot tutorial material, but look through the code and hopefully it will all make sense.  Once I have some free time, I hope to add more functionality to the app like MongoDB and a Backbone frontend. 




Wednesday, June 5, 2013

Using a VirtualBox Android Emulator




I am now using Genymotion Emulators, 

The slowness of the Android emulator has been the butt of many a joke since it was first unveiled. While Google has done a commendable job of making each iteration of the emulator faster, it is still painfully slow. Most Android developers simply debug to a device and avoid the headache. But that is still far from an ideal solution. I for one, don't want my phone tied to my dev box. Also when I give talks, it is nice to be able to easily project my work, holding my phone in the air for the audience is not an ideal solution.

I ran across a blog post by Chris Muir of Oracle, which offered a way out of emulator hell. The solution is to use a VirtualBox VM with Android on it instead of the Android emulator. Before you go all out and start putting together your own VM, be forewarned that entails a lot of work. You have to setup an x86 VM, deploy Android O/S to it, install software, etc. A lot of work. Luckily, the good folks at AndroVM have already done this work. The difference is amazing. I have tried it on both Mac and Windows.

Assumptions
This post is not to help you with setting up your Android development environment. I am assuming that your have already done that. The Android Device Bridge, which is included in the Android Developer Tools (ADT), should be installed and available on the command line (Windows) or terminal (Mac/Linux).

To begin, we need to download VirtualBox from VirtualBox.org. This is Oracle's excellent and free virtual machine app, and yeah I know a company named Innotek originally created it, then Sun bought them and Oracle bought Sun. Once you have VirtualBox installed proceed to AndroVM and download the VMs. My recommendation is to grab the following:

  •  androVM_vbox86tp_4.1.1_r6.1-20130222-gapps-houdini-flash.ova
  •  androVM_vbox86p_4.1.1_r6.1-20130222-gapps-houdini-flash.ova
These are the tablet (tp) and phone (p) versions of Android 4.1.1 with Google apps and other stuff. You will also be able to download, assuming you have a Google account, stuff from the Play Store. Once you have the VMs downloaded as OVA files you will need to import them.



With both VMs imported into VirtualBox I would recommend that you clone each and only use the cloned version. This is just a safety precaution against accidentally screwing up one of VMs.




To clone a VM simply right click it. Choose clone. Give the new machine a name. Mine's is x86Phone and x86Tablet, for the phone and tablet respectively. Choose the Full clone.






Then click the Clone button. It shouldn't take too long for the new VM to be available. Then right click one of the new VMs and click Settings... Click the Network tab. I have only been able to get the Bridged Adapter working. Change the connection so it matches the one below. A network connection is critical, without it you won't be able to deploy and debug your apps to the VM. 




 Click the Start arrow. In just a few seconds, yes seconds, your VM should spin all the way up. Unlock it and find the AndroVM Configuration program. It is usually on the home page in the lower left hand corner. Click it. It should display your emulator's IP address in the upper left corner. If it doesn't, STOP. You may need to go back to the network settings and jiggle them. 



In order to deploy to the VM, the ADB needs to know that it exists. Simply open a command or terminal window and type the following command: 


adb connect <ip address>



Note that the ip address is the same one shown by the AndroVM Configuration app. Now that the ADB knows it is there. Let's deploy something to it. First, we need to change our configuration to point to a USB device and not the emulator.



And we have a fast emulator. And it works like any other emulator except it is really fast.

Beware. This is not a Google sponsored project, so don't expect any kind of support. Also AndroVM has recently been acquired and it will be re-released in a few months as a commercial product. So if you are at all interested in a fast emulator, go and download it now!


Debugging PhoneGap Apps with the Chrome Dev Tools

PhoneGap/Cordova is a really cool framework for making mobile apps, but there is a dark side that isn't talked about enough. How to debug your apps? If you are writing any kind of non-trivial app, you will need something more than console.log and a lot of patience to debug your app. A partial solution to this issue is the Chrome Dev Tools. I say partial because apps which rely heavily on PhoneGap features won't work in Chrome, but if your app is more like a mobilized web site, you may benefit from this info.

I am assuming that you already have an app or two that you want to debug, so I won't cover anything about building PhoneGap apps here. I am just going to cover setting things up so you can use Chrome's Dev Tools to debug your app. This is the Windows 7 version of the instructions. I will post the Mac version in a day or two.

Directory Setup
All of my PhoneGap apps share the same parent directory, "Repo". So what I propose to do is, make Repo a web site. Now, some people I've talked to prefer to make each individual app its own website. If you do too, this technique will still work for you, just change the location of the website's directory.

  1. Begin by starting Internet Information Services 7 aka IIS7.Mine's just happens to be on the start page. Normally it would be under Adminstrative Tools.


  2. On the left side, expand your computer name by clicking the disclosure triangle (my computer's name is TROYMILESF42B).
  3. Expand the Sites list too.
  4. Right click on Sites.

  5. Click Add Web Site...
  6. Give the site a name, mines is "Repos".
  7. Select an Application Pool, I chose ASP.NET v4.0.
  8. Select the path to your root folder.

  9. If your machine runs with security, you may need to give it a user account to run against.

  10. I highly recommend setting the port to something other than port 80, I am using 8088.
  11. Make sure the "Start Web site immediately" check box is set.
  12. Click OK.
  13. Using Chrome, navigate to your website.

  14. Enter Ctrl+Shift+I to open Chrome's developer's tools.
  15. Click on the Sources tab, then the click the disclosure arrow on the top left side to show the source files.

  16. Double click a file name to open it.


  17. To set a break point simply click a line number along the left side. Click it again to disable the break point. Right click it and click, Remove breakpoint, to remove it.


This is Great but...
This is all great but we still have a problem. We no longer have a "deviceready" event, so this may break your code. For example, my compass app won't work without the PhoneGap enhancements to the navigator object. But strictly HTML sites will be good to go now.

I am still working on a partial solution to the "deviceready" issue, but it is not ready yet. It is suffice to say that it just mocks the event and places some test values data into the navigator object.