Latest Entries »

For those facing issues with enabling pasting of items from Mac (Mavericks to be specific here) to an NTFS drive…just follow the steps mentioned at OSXFUSE Wiki about enabling NTFS-3G and hence write access on the drive. It works just perfectly.

Advertisements

Scenario

My latest adventure took me towards developing a location tracking application using PhoneGap. The goal was to continuously monitor the location of the user (obviously the user had to permit the app for doing so – Privacy alert!) and share the info with the peers. This required interacting with the iOS Location Services to get the current location coordinates of the user and then sending them over to the backend server via an ajax call, etc. While this sounds easy, I had to go thru various obstacles to reach the right solution. I am going to divide the solution in a series of blog posts to throw light on all situations faced and the good/bad solution choices then finally how the goal was achieved.

What is PhoneGap?

In case you didn’t know, PhoneGap is a framework that allows cross-platform web application development for mobiles using HTML5, JS, CSS3 and without requiring the developer to have experience with the native language of the targeted platform.

Basic Approach

Ever since PhoneGap v3+, it has become much easier to access a device’s native functionalities. PhoneGap is based on Apache’s Cordova project which is a set of APIs (adhering to W3C HTML5 specs) that enables accessing the native device features directly from javascript accomplished via “Plugins”. A plugin is a piece of native and javascript code bundled together, the native code exposes an interface i.e. methods that access the device features and the javascript code is used for enabling invocation of the exposed interface thru user-defined JS code. Depending on the platform the native language varies e.g. Objective C for iOS and Java for android, etc. In this blog, we’ll consider the strictest platform to code for iOS 7. 🙂

Getting Started

To get started, install Node.JS followed by PhoneGap module (which internally installs Cordova) as show hereI had PhoneGap 3.3.0, Xcode5 and command line tools installed on my machine while writing this blog post. Now, if you follow the documentation provided by PhoneGap like a good student you would execute the following commands:

Install PhoneGap

sudo npm install -g phonegap

Create a PhoneGap app

phonegap create MyAppFolder "com.myorg.loctracker" "My Location Tracker"

Add iOS as platform

cd MyAppFolder
phonegap build ios

Add Geolocation plugin

phonegap plugin add org.apache.cordova.geolocation
cd www
vi config.xml

Add the following lines in the file at the bottom (but as a child of widget tag) and save the file:

<feature name="Geolocation">
   <param name="ios-package" value="CDVLocation" />
   <param name="onload" value="true" />
</feature>

Thats it for the configuration part. Now lets just run the app for the first time by:

phonegap run ios

This would automatically launch the iOS simulator with the basic PhoneGap app running on it, that looks like this:

PhoneGap Basic Installation

PhoneGap Basic Installation

The code you see comes from www/index.html page hosted on a native UIWebView control. The cool thing here is you actually have a web app running on your iOS as a native app without actually requiring the code to be hosted on an external server.

Now you have the basic app running. I encourage you to explore the code added in the “plugins” folder to understand the code structure, to given an overview, the native code will be present inside the “plugins/org.apache.cordova.geolocation/src/ios” directory and javascript is at “plugins/org…/www” directory. The Xcode project is located at “platforms/ios/” directory, you’ll need this later.

Congratulations, you now officially know how to create PhoneGap app for iOS. Feel free to explore the API documentation. In the next post, I’ll cover the following:

  • Life cycle of a phonegap app
  • Getting geolocation coordinates on-demand
  • Monitoring location change in realtime

Stay tuned!

2013 in review

The WordPress.com stats helper monkeys prepared a 2013 annual report for my blog. It wasnt that bad!

Here’s an excerpt:

The concert hall at the Sydney Opera House holds 2,700 people. This blog was viewed about 20,000 times in 2013. If it were a concert at Sydney Opera House, it would take about 7 sold-out performances for that many people to see it.

Click here to see the complete report.

I recently was working on making a webpage compatible with the portable devices specifically iPhone & iPad. And when I say compatible, there are only 2 things to keep in mind:

  1. The graphical elements should maintain the layout or gracefully adjusted to remove the horizontal scroll.
  2. The functionalities are preserved – this would include all the dynamic aspects like server side calls, animations, etc.

For the first requirement, we have a really great solution – “Twitter Bootstrap”. Just add it to any page and making it responsive becomes super easy. Of course, it does require the programmer to still have a sense of a front-end designer i.e. just putting the framework in place is not going help, it requires some effort still. I am going to refrain from going into details about the styling aspect in this post and talk about the issues I dealt in terms of functionality.

The second requirement is tricky and get really annoying at times. Some components required replacing, tweaking while somethings were not supported at all. Below, I’m going to mention all the challenges I faced:

  • Custom scrolling solution like jquery.slimScroll had some rendering/processing issues, though iScroll is a good replacement.
  • If you are using text controls than the virtual keyboard can create mayhem for your user experience, the primary reason is when the keyboard opens, the page automatically scrolls up but the original position fails to restore when the keyboard is closed.
  • Sounds & Videos – while on the desktop you can play these as and when required i.e. on page load, based on an event, the iOS web engine only allows the playing of these files as consequence of a user action ONLY. This can totally ruin your UX if you have a auto-playing media files.
  • If the user puts the browser in the background or is working with multiple tabs, then in pre-iOS 7 devices, the pages state will be lost i.e. when the user goes back to the page it’ll open up like you hit refresh. While the query string params in the URL are retained, the post params are lost. In iOS7, I guess there’s a better handling of this particular case where the page is kept in memory but maybe its only for a limited time.

One good thing is jQuery works nicely and the socket.io also is not blocked although Apple only wants to use APNS for their push notifications but then again when the browser is in the background, the page is dead and no processing is done.

How do we handle these cases where we dont want to create a Native App due to lack of time, resources, experience, etc? Well one solution can be PhoneGap, it allows you convert your existing web app into a iOS installable application. Please see that it doesnt cover all the cases mentioned above directly, you would still have to write some native code as an hybrid solution but it reduces a lot of pain. Also, you’ll have to go thru Apple Developer Program and App publishing guidelines to ensure the app is available at the AppStore. It sounds like more of a mess but its a one time investment, for a solution that works!

 

The new Apple Mac Pro

So, it was brought into my attention from a colleague of mine that Apple is building a server-like hardware which I was complete oblivious about. But apparently they have been doing it for pretty long time now. The product I am talking about is the upcoming Apple Mac Pro. This beautiful thing is best described in this caption:

Apple Mac Pro

 

Now, I am not really a big apple fan as my friends know it but when it comes to innovative technology…there’s no barrier for brands in my mind. Considering what I saw on the website…I have only two things to say:

1. This piece of hardware is a kind of a masterpiece. I mean can you imagine having one machine which is brilliantly designed with latest state of the art techonologies in a amazing innovative yet simple design? I am so excited here that I am already contemplating what I can do with this amazing hardware? Use it as a single shared computing hardware among a complete development team that includes designers, developers and testers, etc and it not only hosts the development sandbox but also the staging and product enviroments thanks to virtualization and what not at the same time?

2. Apple is always know to have that UX oomph factor in their UIs…but the website design for this particular page is totally out of the box! I kind of spent 2 hours just admiring it! What would be the best way to design a page like that? Any ideas?

I am definitely adding this amazing machine in my wishlist and if apple prices it nicely, I might actually end up buying it! Or maybe not because to buy a machine like that and not respect it by heavily using it would be an insult to the bright minds who created it! Kudos guys.

 

One of my most recent adventures have been around exploring Ruby on Rails. And the first step towards learning any language is ‘Environment Setup’…and trust me it isn’t as easy as it sounds. There are multiple options available depending on the settings you are looking for and not all of them worked for me. I tried setting the environment for the target project on Windows but failed since some of the gems were localized to Linux based environment i.e. would work only for Mac or Ubuntu, etc. So, I installed Ubuntu 12.04 LTS on my machine and started installing rails and guess what roadblocks – some dependencies not met or in conflicted state, make errors, etc….totally bizarre things and ended up in re-installing the OS again (may be due to my limited knowledge of the free platforms). And this how I felt after this!

frustration-baby

Anyway, gathering my composure after a while, I investigated more on the different frameworks etc. I mean this couldn’t be rocket science, right? So, I came across 2 environments – rbenv and rvm. While rbenv didn’t really provide a fruitful result for me, rvm on other hand was much better. And I finally opened the Pandora box.eureka

So, then I thought like a boss and realized how many innocent noobs like me 😉 would have gone thru the same situation and how many more would do the same. So, to save the effort I chalked down a script that would work with minimal customization. The script does the following:

  1. Prepares the OS with the required packages e.g. LAMP, etc.
  2. Installs Ruby using RVM. This script is currently configured to install Ruby version 2.0.0-p247 but of course you can customize it.
  3. Installs the ruby gems (including the Rails framework).

Please see the script is targeted for Ubuntu Linux and is tested on version 12.04 LTS x64. During the span of the script execution your machine should be connected to internet at all times.

To use the script, follow the steps below precisely:

  1. Open the script in an editor and modify rvm lines of code to install your preferred version of ruby. I assume you would know the version of Ruby you would want to install. Please note, you have to modify all the 3 lines of rvm in the script to use the same ruby version. Currently the lines look like this:
    rvm install 2.0.0-p247
    rvm use 2.0.0-p247 --default
    
    
  2. Save your changes and open terminal.
  3. Go to the location where the script file is saved e.g. cd /home/akshaya/
  4. Give executable permissions to the file: chmod uog+rwx RoREnvSetup.sh (name of the script you create)
  5. Execute the script by: sudo ./RoREnvSetup.sh (NO MATTER WHAT DON’T RUN THE SCRIPT AS ROOT USER i.e. DON’T DO “sudo –i” before, unless you are the root user and plan to do all your work as the root user!)
  6. During the installation, it’ll ask prompt you after password you want to set for MySQL DB, etc., please provide it.
  7. Thats it! You have Ruby and Rails installed on your machine.

The RoREvnSetup.sh script is shown below:


sudo apt-get update -y
sudo apt-get upgrade -y
sudo apt-get dist-upgrade -y

echo "gem: --no-rdoc --no-ri" > ~/.gemrc
echo "export RAILS_ENV=development" >> ~/.bashrc

sudo apt-get install curl -y
\curl -L https://get.rvm.io | bash -s stable
source /etc/profile.d/rvm.sh
echo "export rvm_trust_rvmrcs_flag=0" >> /etc/rvmrc
rvm requirements

sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev libc6-dev ncurses-dev automake libtool bison subversion ncurses-term mercurial exuberant-ctags libnotify-bin curl autoconf make ssh openjdk-6-jdk git-doc imagemagick libpq-dev pgadmin3 vim vim-rails vim-gnome lamp-server^ mysql-client libmysqlclient-dev libgdbm-dev libncurses5-dev libffi-dev nodejs -y

rvm install 2.0.0-p247
rvm use 2.0.0-p247 --default
gem update --system
rvm gemset use global
gem update
gem install rails

The future of phones

 

Perfect guide to install sharepoint server 2010 on Windows 8 without AD and using full SQL Server. Check it out!

 

Xaml Spy usage problem

XAML Spy (previously known as Silverlight Spy) is quite famous with Silverlight development groups to investigate into existing XAML based applications. It provides quite an insight to the developer if not the exact solution for a given scenario. I have used the older version ‘Silverlight Spy’ multiple times in the past to get the details of how the Pivot Viewer control works, etc. But with XAML Spy released, I felt a need to have a hands on experience to see the changes. So, I downloaded the tool, added my application (built in Silverlight 5) but the XAML Spy didn’t detect the application…I tried checking the app for errors but nothing, the app was running perfectly in Visual Studio. So, I thought about using the older version of Silverlight Spy and to my amazement, the app was detected and I was able to explore the XAML as well! Now, whats going wrong?

I was about to send a mail to the support but I thought to doing what us developers are not used to or just don’t want to do…Read the Tutorials :), I stumbled around the page Manually connect a Silverlight app (having no idea what it means), but followed it and Eureka…XAML Spy now detected my application.

Although its working, my question to the First Floor Software team is why such a requirement? Why does the customer require to modify their codes? What to do when the app is not really yours and you cant modify it?

In the past, many times I have come around a situation where I want to load a completely different set of facets in the Pivot Viewer without really instantiating a new instance of it! While in the Pivot Viewer’s first version it was relatively simpler (by just loading a different cxml) but in the second version it didn’t work right, when I was using the client-side loading of items. There was always something that didn’t work example the filter pane wouldn’t show the facets of the new collection, etc. But, there’s a very simple solution for this (actually it was too simple to be believable for the first time…at least for me), so here it is…before you set the new PivotProperties and the Templates, just write down the following 3 lines:

ItemPivot.ItemsSource = null;
ItemPivot.PivotProperties.Clear();
ItemPivot.ItemTemplates.Clear();

Thats it! And you’ll never face a problem in loading a new set of items following a different structure again! Kapish? 🙂