Expected output :

<ul>
  <li>
    iPhone
  </li>
  <li>
    Samsung Galaxy
  </li>
  <li>
    Nokia  Lumia
  </li>
</ul> 

We use foreach to loop through a section of markup for each entry in an array.

<ul data-bind="foreach: products">
  <li data-bind="text: product_name"> </li>
</ul> 

Here is the script to update values in the html.

<script type="text/javascript">

var ProductViewModel  = { self.products = ko.observableArray([]) }
ko.applyBindings(ProductViewModel);

</script>

So when the page loads we are not assigning any values to the products, we just keep it as empty array.
When we run this in browser we can see a single list with no values.
Okay so let’s hide that list if the products array size is not greater than 0

  data-bind="visible: products().length > 0

The item will be visible only if “products().length > 0″
This is how the actual html will look like.

	

<ul data-bind="foreach: products, visible: products().length > 0">
  <li data-bind="text: product_name"> </li>
</ul> 

Now try it in the browser, oh nice the list isn’t appearing.
Our next job would be filling up a list of products with observable array.
We can have a products_list array of hashes which has the “product_name” as the key and a value for it.

<script type="text/javascript">
   var products_list = [{product_name : "iPhone"},
                        {product_name : "Samsung Galaxy"},
                        {product_name : "Nokia Lumia"}]
</script>

Let’s have a link, once we click on the link we will fill the products.

<a href="#">Fill Products</a>

We are adding a click event for this link which will call the fillProducts products method, where we gonna update the products UI

So the final js code would look like this

<script type="text/javascript">
var products_list = [{product_name : "iPhone"},
                     {product_name : "Samsung Galaxy"},
                     {product_name : "Nokia Lumia"}];
var ProductViewModel  = {
			 products : ko.observableArray([]),
			 fillProducts : function() { this.products(products_list); }
                        }
ko.applyBindings(ProductViewModel);
</script>

Now run this in the browser, Wow.
You will see the products list filled with values.My next blog would be about nested observablearray.

So, you want to integrate your eNom reseller API ? Create your reseller account . and the steps you need to follow as,

1. IP Registration
In order to use the Enom API, you must first contact them and let them know the server IP address. This is part of Enom’s security to prevent unauthorised users being able to submit registration requests to your account.

2. Test Mode
eNom offers to demonstrate all API call in test mode. see the API interface setup here
Note : actually no domain will be registered and you will not be charged for test interface.

3. Run a demo API call
Make sure that you Add/Edit/Delete public IP addresses that are allowed to access your account on the test servers. To find your public IP click here

Construct a URL by appending the key/value pairs as a query string to enom API Interface URL. Then make a simple HTTP request and That’s it!

1. To Check specific domain name available ( CHECK )

    URL http://resellertest.enom.com/interface.asp?command=check&
                                     uid=resellid&
                                     pw=resellpw&
                                     sld=example&tld=com&responsetype=xml

2. To list available domain names ( NAMESPINNER )

    URL http://resellertest.enom.com/interface.asp?command=NameSpinner&
                                     UID=resellid&
                                     pw=resellpw&
                                     SLD=example&TLD=com&
                                     UseHyphens=true&UseNumbers=true
                                     &MaxResults=10&ResponseType=XML

3. To bill and register a domain name ( PURCHASE )

     URL http://resellertest.enom.com/interface.asp?command=Purchase&
                                      uid=resellid&
                                      pw=resellpw&sld=resellerdocs104
                                      &tld=com&ResponseType=XML

4. To get domain status information ( GETDOMININFO )

     URL http://resellertest.enom.com/interface.asp?command=GetDomainInfo&
                                      UID=resellid&
                                      PW=resellpw&sld=resellerdocs&
                                      tld=com&ResponseType=XML

5. To set domain name server (DNS)

      URL http://resellertest.enom.com/interface.asp?command=UpDateCusPreferences&
                                       uid=resellid&
                                       pw=resellpw&
                                       usedns=0&dns1=ns1.name-services.com&
                                       dns2=ns2.name-services.com&responsetype=xml

6. To set host records ( SETHOSTS )

       URL http://resellertest.enom.com/interface.asp?command=SetHosts&
                                        uid=resellid&
                                        pw=resellpw&sld=resellerdocs&tld=com&
                                        HostName1=@&RecordType1=A&Address1=66.150.5.189
                                        &HostName2=photos&RecordType2=CNAME&Address2=photos.msn.com.&
                                        HostName3=yahoo&RecordType3=URL&Address3=204.71.200.72&
                                        HostName4=msn&RecordType4=FRAME&
                                        Address4=http://www.msn.com&responsetype=xml

See more catalog enom provides http://www.enom.com/APICommandCatalog/index.htm

Sample code using ruby to search availability of doeazy.com domain using eNom API

check_url = "http://resellertest.enom.com/interface.asp?
command=check&uid=resellid&pw=resellpw&sld=doeazy&tld=com&responsetype=xml"
@available_domain_list =[]
reader = Nokogiri::XML(open(check_url))
reader.search("interface-response").each do |node| 
  node.search("RRPText").each { |att|  @status = att.content }
  node.search("DomainName").each { |att| @available_domain_list << att.content }
end
if @status == "Domain available"
  available = true
  response = "Congratulations! <br/> #{@available_domain_list} is available." 
else
  response = "#{@available_domain_list} is not available."
  @available_domain_list = []
end
return response

Typhoeus took 0.99148906 seconds
Httparty took 3.370132528 seconds
You can find the gist at https://gist.github.com/spritle/5261906

Read more at http://typhoeus.github.com/articles/getting_started.html#installation

Credit goes to Paul and https://github.com/i0rek

Requirements:
1. Setup: Two Rackspace Cloud server running Ubuntu or your own VPS server.
2. Smile

Unison is a file-synchronization tool for Unix and Windows. It allows to replicate a collection of files and directories between two servers (or different disks on the same host), modified separately, and then brought up to date by propagating the changes in each replica to the other.

inotifywait is an Linux utility to notify file changes.

Now, lets use both of them

Install unison on both servers

$ apt-get install unison openssh-server ssh

Unison requires password less ssh-key authentication between servers. Lets set them.
Server1:

Generate public/private key on server1.

$ ssh-keygen -t rsa

Copy the ssh keys and paste it into server2 authorized_keys which would be typically located at ~/.ssh/authorized_keys. (if not create it)

To make sure SSH working with password try login to server2 from server 1, it should connect without asking password.

Server1:

$ ssh root@server2_ip_address

Install inotifywait on both servers

$ sudo apt-get install inotify-tools

Now unison and inotifywait are ready to use. Run the unison to listen for folder between two servers.

$ unison /var/www/proj1/images ssh://192.168.0.5//var/www/proje1/images/

Open server1 terminal and try to create some file inside /var/www/proj1/folder on server1. Unison will detect the file and prompt to user to enter.
To skip prompting use -batch option.

$ unison -batch /var/www/proj1/images ssh://192.168.0.101//var/www/proje1/images/

Once file synchronized with server2 unison will stop. To make unison to listen always for file changes create small shell script that you can run in background.

$ nano sync_file.sh
  #!/bin/bash
   LOCATION="/var/www/proj1/images/"
   RSYNC_OPTIONS=...
   while true
   do
    inotifywait -r $LOCATION
    unison -batch $LOCATION ssh://<IP ADDRESS>///$LOCATION
   done</pre>

Run the shell script

$ sh sync_file.sh

Run the shell script in background(add & symbol at the end).

$ nohub sh sync_file.sh &

It should work fine if not please post your issue as a comment.

When I worked for a single pager cross platform mobile application, there were lot of UI need to be updated very frequently, Initially I did that using Jquery which is an awesome js library, but still I need to write lots of code to find and update the element every time there is a change in the UI.

So I was looking out for some JavaScript libraries to simplify my work and came through Knockout js library, which is a dynamic JavaScript library using MVVM pattern.

No Other JS Library Dependencies

It has dynamic bindings, automatic ui refresh, dependency tracking and templating. The good thing is that it is not dependent on any JavaScript libraries like jQuery or Prototype. Just knockout.js library is enough in your app.

They have a very good interactive tutorial on their website which can help you to get started quickly. You can try it out at Knockout Tutorial.

External Templating Engines

Knockout has bindings for almost all the elements with text, values and events as well. Templating is also available.
I am a big fan of Underscore.js and Knockout also allows us to integrate some external string based templating engine like Jquery template and underscore templating engine.

Simple Code Snippet

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<div>Name: <span>Samsumg Grand</span></div>
<div>Price:<span>22,000</span></div>

Step 1 : add “data-bind” attribute

<div>Name: <span data-bind="text : product_name">Samsumg Grand</span></div>
<div>Price:<span data-bind="text : product_price">22,000</span></div>

Step 2 : apply bindings

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function updateValues() {
    this.product_name= "Apple iPhone 4s";
    this.product_price= "35,000";
}

// Activates knockout.js
ko.applyBindings(new updateValues());
</pre>

Output :

Name: Apple iPhone 4s
Price: 35,000

I am almost done with one of my one pager mobile application with Knockout js, will share more about my experience with knockoutjs and code samples in my next blog.

Now let see how to perform basic CRUD operation using backbone.js in rails.

First let create a sample app named “Inspection”

rails new Inspection

In your Gemfile, add this line

gem "rails-backbone", '0.9.10'

rails-backbone gem makes our task easier to use backbone in our rails application

Run the following commands from terminal

bundle install
rails g backbone:install

This command creates the basic structure for our backbone files

Now lets create a scaffold for Checklist

rails g scaffold Checklist title:string comments:string 
rake db:migrate

The above usually generates rails server side crud scaffolding.

We can generate backbone.js crud scaffolding to perform simple single page crud operation using

 
rails g backbone:scaffold Checklist title:string comments:string

Now finally we have to edit app/views/posts/index.html.erb with following

<div id="checklists"></div>

<script type="text/javascript">
  $(function() {
  window.router = new Inspection.Routers.ChecklistsRouter({checklists: <%= @checklists.to_json.html_safe -%>});
  Backbone.history.start();
  });
</script>

This creates a new instance of our Router which will handle the whole CRUD.

Now starting our server, we can access fully functioning single page crud app for Checklist models. The interesting part is to deal with file uploads. File upload in rails can be done easily with paperclip gem

But if in case we are dealing with backbone.js, we have to approach another way to send attachment to server. In that case we can use jquery-fileupload-rails gem.

To achieve file-upload in our backbone rails application, some additional steps are

Add below lines to your Gemfile

gem 'jquery-fileupload-rails','0.3.0'
gem 'paperclip','3.4.1'

and run

bundle install

Now In order to upload images to our model,we will run Paperclip generator command to save our images.

rails generate paperclip Checklist photo

Add below line to application.js

//= require jqueryfileuploadbackbone

Add below lines to Checklist.rb file

attr_accessible :photo
has_attached_file :photo

Edit your new.jst.ejs template as

<form id="new-checklist" name="checklist" method="post" enctype="multipart/form-data" action="/checklists" accept-charset="UTF-8">
  ....
 <input type="file" id="photo" name="photo">
</form>

Edit your new_view.js.coffee file to attach file using fileupload gem as

save: (e) ->
   	@$el.fileupload
     add: (e, data) ->
       data.submit()

     done: (e, data) =>
       window.location = "/"

Now in the checklist_controller.rb file, change the params in create method the following way

@checklist = Checklist.new(:photo=> params["photo"],:title => params["title"],:comments => params["comments"])
@checklist.save

Now the image will be saved in public folder. In general, paperclip uses helper(Model.attribute.url) to get the full path of image but it will not work in backbone.js view

We will modify the index action to get the full path of the image. Replace the following line in index action

@checklists = Checklist.find(:all)
@checklists.map{|k,v| k.photo_file_name = k.photo.url }

In above, we are replacing the photo_file_name with full path.

Finally, we have done with all necessary changes needed to upload an image to rails backbone using paperclip and jquery fileupload gem.

The output of Inspection application looks like this

I hope this blog will be helpful for understanding backbone fileuplaod concept. Source code of inspection application is available at https://github.com/Dhepthi/inspection. Please feel free to improve and send me a pull request. Any suggestion or comments are welcome.

require 'base64'
product= Product.new(params[:product])
product.save
if product.image_file_name != nil
product.update_attributes({:encoded_image => Base64.encode64(open(product.image.path,"rb") { |io| io.read })})
end

Rhodes part:
Enabled the camera capability to upload picture or take new picture.

capabilities:
  - camera

Sample Take picture code from Rhodes controller

def take_picture
    width =100
    height =100
    settings = {:desired_width => width, :desired_height => height }
    Camera::take_picture(url_for(:action => :camera_callback), settings)
    redirect :action => :wait
end

Sample Choose picture code from Rhodes controller

def choose_picture
    width =100
    height =100
    settings = {:desired_width => width, :desired_height => height }
    Camera::take_picture(url_for(:action => :camera_callback), settings)
    redirect :action => :wait
end

Now the key thing is to encode the image and store it in image_uri attribute while camera_callback is called

require 'base64'
def camera_callback
    imagebase64= Base64.encode64(open(Rho::RhoApplication::get_blob_path(@params['image_uri'])) { |io| io.read }).gsub(/\r/,"").gsub(/\n/,"")
    @product=Product.create({:image_uri => imagebase64})
end

RhoConnect part
Generate the RhoConnect model called Product which by default have several methods.

The code snippet from query method (check the image_uri hash)

def query(params=nil)
    @products=JSON.parse(RestClient.get("http://localhost:3000/products.json").body)
    @result={}
    @products.each do |product|
      @result[product["id"].to_s] = {:name => product['name'],:image_uri => product['encoded_image']}
    end if @products
    @result
end

The code snippet from create method

def create(create_hash)
    url = "http://localhost:3000/products.json"
    product = RestClient.post( url, create_hash.to_json, :content_type => 'application/json')
end

Let me know if you want me to publish a simple Android app on Google Play so that you can actually play with the whole application.

Whenever a subscribed change occurs, Facebook makes a HTTP POST request to a callback URL that we specify by sending list of changes happened. Facebook app will generally receive notification of the change within a couple of minutes of its occurrence.

We can get updates for following objects with certain fields in it:

• User
• Page
• Permissions
• Payments
• Errors

Let me share my experience on implementing real time updates for user object in a Rails app. There are two steps to set up a subscription for Realtime Updates:

1. Set up a public endpoint URL that receives both HTTP GET (for subscription verification) and POST (for actual change data) requests from Facebook.
2. Set up subscriptions for the updates we want to receive for Facebook app.

Step 1: Handle GET and POST requests from Facebook in Rails app.

• Added a method in rails controller to handle both GET and POST requests.

  def subscription
      if request.method == "GET"
       if params['hub.mode'] =='subscribe' && params['hub.verify_token'] =='stringToken' 
         render :text => params['hub.challenge']
       else 
         render :text => 'Failed to authorize facebook challenge request'
       end
      elsif request.method == "POST"
       updated_obj = JSON.parse(request.body.read)
       puts updated_obj
       render :text => "Thanks for the update"
      end
  end
  

  Also updated the routes.rb as

  match "facebook/subscription", :controller => :facebook_realtime_updates, :action => :subscription, :as => 'facebook_subscription', :via => [:get,:post]
  

Step 2: Set subscriptions for user object in Facebook app developer dashboard.

• We need to create an app in Facebook app developer dashboard https://developers.facebook.com/apps
• After the app was created, go to the Settings -> Realtime Updates
  
• Select -> Add a Subscription to Get Started. This will show a dialog to choose which object we need realtime updates.
  
• Select -> Confirm. Then fill the Fields, Callback and Verify token.
  Here we added “likes,checkins,feed” fields for user object. So any of these fields get updated by user of this app will get POST call specified in the callback field. This should not be localhost/ Heroku(btw i learnt an interesting fact in Heroku that it is fully multi-threaded to support fb realtime). Verify token field is for verification that we specified in the callback server.
• After adding the required fields, click “Test”. This will generate a GET request for the callback url when we add/modify a subscription. This GET request contains a query string with following parameters.
  • hub.mode – The string “subscribe” is passed in this parameter
  • hub.challenge – A random string
  • hub.verify_token – The verify_token value we specified when created the subscription

  Now, the rails app should then echo just the hub.challenge value back, which confirms to Facebook that this server is configured to accept callbacks, and prevents denial-of-service (DDoS) vulnerabilities.

• If everything handled successfully, following dialog will appear with hub.challenge value.
  
• After these steps, the Facebook app is now ready to receive realtime updates. For each update of user using this app, Facebook will make POST request to the callback server within a couple of minutes. The response we get for any updates in subscribed fields will have the following format.

  {
      "object": "user",
      "entry": [
          {
              "uid": "100003239436215",
              "id": "100003239436215",
              "time": 1362240615,
              "changed_fields": [
                  "feed",
                  "likes"
              ]
          }
      ]
  }
  

  In this response, the uid and id fields are same which is the id of user. The changed_fields represents two field changes were batched together. Note that this response does not include the actual data values (either from before or after the update). To obtain those, our app can request via GET request to Graph API.

Hope you found this blog useful. If you are looking for live demo please let me know via the comments so that I can host for you.

The information that is sent from the server to the device has to be accessible even when the device is offline, large amount of data has to sent back to the server in secured way as well. In general, majority of the business data comes from the back end, resides in the device and sent back to the servers via the cloud like platform.

So the first thing would be processing the data in the device and loading them in the device database, so that the user can access those datas even when there is no proper network connectivity.

In my perspective, the most important thing to be analysed while developing enterprise Tablet and Mobile applications were

1. Processing large set of data
2. Offline access to the data
3. Data security during lost and theft

Processing large set of data :

Enterprise applications needs more data to be shipped to the device every day. A business analytics needs large data of set datas that he/she would analyse before making a decision. He/She may plot those data over several charts to make a decision. He/she may also process those datas by applying specific algorithms predefined by the application.

Sending a chunk of data to the device may take some time and not sure how reliable it would be.There comes the Synchronization server platforms like Motorola RhoMobile providing good solutions to solve these kind of problems. RhoConnect which is a part of the RhoMobile suite, gets the data from the Enterprise servers and constructs sql dump, archive it and send the dump file to the device. The device then can download, un-archive, populate the data in to the device database. In this way the processing speed would be decent even when the data size is big (how big can be big will be analysed as part of my next blog posts).

Offline access for data analytics:

There are several chances of not having network connection while using a business applications in smart phones. Example: The CEO/CXO is on flight.
The truck driver carrying Bill of lading documents inside an underground levels/floors.
Chief Doctor in a surgery room.
In such cases, the logical actions taken by the users should be stored in the mobile database and then sync when network is available again.

Data security during lost and theft :

The information in the device should not be accessible to other people in case of theft or lost. For instance Dropbox wipes its data if someone tries to enter wrong password thrice.
Mobile Banking analytics applications should wipe the data itself when accessed incorrect users.
External applications should not override the sandbox used by Company applications and so on.
So the data that is stored in the device has to be encrypted and even in the case of theft or lost the data won’t be accessible to the outside world or atleast hard to decrypt. RhoMobile (Rhodes) provide such encryption features out of the box.

IBM Worklight has taken Mobile Security Measures to achieve a high level of data security, like “Encrypted Offline Cache” that helps to protect sensitive information from malware attacks or device theft.