Our Geek Space » web 2.0

Ruby on rails for mobiles

sebastian.sassi — Fri, 06 May 2011 22:25:45 +0000

Time ago, one of our customers asked us to implement a new web project with support for smartphones. The objective was to support the most common operating systems: iOS, android, blackberry, symbian, with the possibility of using the phone capabilities (gps, sound and vibration).
After researching on different frameworks and technologies we have arrived to some conclusions that I would like to share with people who have had the same dilemma of choosing a good framework to use.
I must say that this research was based on data taken from different sources (both official and unofficial), and also having taken some particular decisions while evaluating the alternatives, that do not have to match with your own criteria.

First of all, we classified the available options into two different categories:

‘Native’ Development frameworks: Rhodes, NimbleKit, Titanium (this is new to the list), PhoneGap
Javascript libraries: Sencha, JQTouch, JQuery mobile

Rhodes

According to the official description, The Rhodes application framework allows developers to create native mobile applications with portability of editing HTML templates and the power of the Ruby programming language. Applications written in Rhodes exhibit the performance and richness of apps written to the native device operating systems with local data but enable developers to have the productivity of web interfaces in HTML. Developers write their applications once and they then run on all major mobile device operating systems: iPhone, Windows Mobile, Blackberry and more.

Advantages:

Programming in Ruby
Full access to the Device API (Application looks different in each device)
Several devices supported: IPhone, BlackBerry, Android, Windows mobile
RhoSync: RhoSync retrieves data via web services (REST or SOAP) from backend enterprise applications for distribution to downstream mobile devices.

Disadvantages:

Licensing: It is a commercial product. Costs arround U$S 500 per project.

NimbleKit

NimbleKit says that it is a framework to create applications for iPhone and iPod touch fast. Programmers do not need to know Objective-C or iPhone SDK. All they need is to know how to write an HTML page with Javascript code.

Advantages:

HTML, CSS & Javascript

Disadvantages

It only works for iphone, ipods & ipads.

Titanium & PhoneGap

From architectural standpoint, these two frameworks are very similar. Titanium and PhoneGap expose the smartphone features through a set of Javascript APIs, while the application’s logic (html, css, javascript) runs inside a native WebView control. Through the javascript APIs, the “web app” has access to the mobile phone functions such as Geolocation, Accelerometer Camera, Contacts, Database, File system, and so on.

The differences:

PhoneGap does not expose the native UI components to javascript. Titanium, on the other hand, has a comprehensive UI API that can be called in javascript to create and control all kinds of native UI controls. Utilizing these UI APIs, a Titanium app can look more “native” than a PhoneGap app. Second, PhoneGap supports more mobile phone platforms than Titanium does. PhoneGap APIs are more generic and can be used on different platforms such as iPhone, Android and Blackberry. Titanium is primarily targeting iPhone and Android. Some of its APIs are platform specific (like the iPhone UI APIs). The use of these APIs will reduce the cross-platform capability of your application.
If your concern for your app is to make it more “native” looking, Titanium is a better choice. If you want to be able to “port” your app to another platform more easily, PhoneGap will be better.

Advantages:

Multi device
Programming in HTML, CSS & Javascript
MIT License

Disadvantages:

Some devices native features are not exposed in the API

Sencha

According to the official documentation, Sencha Touch is the first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. They make specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. They have made extensive use of CSS3 in our stylesheets to provide the most robust styling layer possible.
Altogether, the entire library is under 80kb (gzipped and minified), and it is trivial to make that number even smaller by disabling unused components or styles.

Advantages

Great UI Controls
Multi device

Disadvantages

Commercial license (U$S 1.800 for 5 developers)

JQTouch
It is “A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.” [1]

Advantages

Great UI Controls
Multi device
MIT License

Disadvantages

Is focused on small screen devices
It’s a jquery plugin
It was created in 2009 by David Kaneda and has been relatively quiet until release of beta 3 (April 24th 2011).

JQuery Mobile
It is a unified user interface system across all popular mobile device platforms, built on jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Advantages

Multi device (See http://jquerymobile.com/gbs/) (supports much more devices than JQTouch)
Very simple to use
John Resig, JQuery’s founder is one of the main developers and it is a high activity project
It is not a jquery plugin, it is a new framework
Dual licensed under MIT and GPL Version 2

Disadvantages

It is still in Alpha version

CONCLUSION
After evaluating the different frameworks, we arrived at the next conclusions:
We should use a framework that generates html + css + js, because this technology guarantees a long term support on different devices
We should use a framework that supports access to devices specific capabilities (i.e. sound, gps, camera, vibration, data, etc.) in case we need them in a near future
Because we prefer unrestrictive licenses (MIT, BSD, LGPL and others) our options are reduced to: PhoneGap, Titanium & JQTouch.

Finally, we choose PhoneGap + JQuery mobile because they are open technologies and support multiple platforms. Also, resulting interfaces are similar across different devices and that is a desired feature for our users.
JQTouch and JQuery mobile are awesome frameworks to develop mobile applications, but we prefer to choose JQuery Mobile since it support much more devices (altough it is in alpha version), has high activity and is not just optimized for WebKit as jQtouch does.
We also think that JQuery Mobile is pretty easy to use, the resulting interfaces are usable and has many components to use.

The rest of the story is pretty easy ( just because we use Ruby on Rails ), you should create some helpers that adds the JQuery Mobile features to the pages, or use some existent plugin, you can find a starting guide here: http://goo.gl/5Soyq.

I hope you find this post useful, have a nice coding!

[1]: forward-thinking: Someone who is forward-thinking is thinking progressively and possesses the ability to look beyond the “now” and formulate strategies for future success. They are constantly asking “what’s next?”.

Sources:

Sass why is useful

Pablo Ifran — Fri, 26 Nov 2010 18:52:04 +0000

Sass is used for generating css files based on his own syntax, it’s very useful because allows you to avoid repeating code across the different scss files using import (allows you to import code from other scss file), or mixins(scss functions). Also, allows you to write varibles, for using in different scss, this makes easier to do different templates based on colors or images for example.

_sprites.scss

@mixin sprite_for($image_class, $x, $y, $image: "/images/sprite_image.png") {
  .sprite_image.#{$image_class} {
    background: transparent url($image) no-repeat scroll $x $y;
    height:16px;
    width:16px;
  }
}
_images.scss

$my_sprite_image_path: "/images/my_sprite_image_path.png";

default.scss

@import "sprites", "images";

@include sprite_for("my_image", 0, 0, $my_sprite_image_path);

That generates

default.css

  .sprite_image.my_image {
    background: transparent url(/images/my_sprite_image_path.png) no-repeat scroll 0 0;
    height:16px;
    width:16px;
  }

So, this is best sorted using this method, because you have the image path in a single file and you use it in other files only by importing the file with the images path, it’s also simpler to remove an image because you only need to find the references to that variable and delete them.

The sass framework also allows you to use the DRY principle because you can write nested selector, I’ll show you with an example:

default.scss

.some_class {
  width: 100px;
  .some_other_class {
    display: block;
  }
}

default.css

.some_class {width:100px;}
.some_class .some_other_class {display:block;}

Doesn’t affect the performance because it generates a css file at development time.

It also allows you to benefit from some of the advantages of css 3 right now.

Juggernaut: Chat on Rails

ivan.etchart — Fri, 19 Nov 2010 14:01:52 +0000

To implement chat on Rails we need the Juggernaut gem. The newest version of Juggernaut is build upon nodeJS.

1. Install Juggernaut:

First, install nodejs (http://nodejs.org), redis (http:/code.google.com/p/redis/) and Juggernaut gem (gem install juggernaut).

Then download server git clone …

2. Integrate with Rails to implement chat!

After Juggernaut gem is installed, add it to environment.rb:

config.gem "juggernaut"

Suppose you have a system with user authentication, the idea is to generate an environment where you’re able to chat with other users and see to what extent features can be added in order to create an awesome chat!

Note: Providing a step by step guide to create a working chat isn’t the idea of this tutorial. It’s to show different possibilites to develop on

Juggernaut.

Connecting to Juggernaut from Rails

It’s necessary to add the file WebSocketMain.swf to the public folder. This hasn’t to be exactly this way, you can change its location, but if you do, then you’ll have to change the WEB_SOCKET_SWF_LOCATION, due to an issue with Firefox (… for further information visit juggernaut git page).

Juggernaut serves every file necessary for running by default, so you can leave them on the server where Jaggernaut is installed and configure everything in your client (mainly due to Firefox) in order to avoid adding extra files to your project.

Add to your view this line:

Note : you can add this file in another way or eventually add it to your project if you want.

Inside another script tag:

var jugger = new Juggernaut;

** Connection events provided by Juggernaut

Juggernaut provides you with three different events : Connect, Disconnect o Reconnect.

jugger.on("connect - disconnect - reconnect", callback)

You can use this events to implement whatever function you want to execute, i.e. alerting when a client has connected:

jug.on("connect", function() {alert("I'm connected!!");});

At this point you have the connection of your client ready, you can test it, you have to start Juggernaut. * First run redis :

./redis-server redis.conf

(whereever you have installed it) *

Then go to the folder where you’ve downloaded the server to and run juggernaut:

node server.js

Let’s chat!

Now that we have everything going, would be a good time to start chatting.

First you need to subscribe to a channe. Inside the channel you’ll be able to connect and user messages scope is restricted to channel.

Then :

 jug.subscribe("name_or_channel_id", function(data) { .. here you'll handle all messages coming from channel ... })

Clarifying a bit… with this function we subscribe to the channel and can pass a function as a parameter to handle data coming from it, i.e. any user’s messages, let’s give an example:

First you need to have a div tag with an id (id_div), what you want is to append a list element containing message content to the div element everytime someone sends a message.

jug.subscribe("name_or_channel_id", function(data){
var li = $("");
li.text(data);
$("#id_div").append(li);
});

You can have a div or textearea element, adding text to a textarea element is relatively simpler, it’s enough to do

textarea.value += (data + "\n");

but you’ll lose customizing power. li elements can be enriched with style, making the chat more attractive.

You’ve received data and added to a div element, but you’re still unable to send data. Let’s setup a form:

<% form_remote_tag(:url => path_to_send_message_method, :success => "$('#msg_body').value=''" do >
<= text_field_tag 'msg_body', '', :size => '50' >
<= submit_tag 'Send Message' >
<% end %>

And the method :

def send_message
Juggernaut.publish("name_or_channel_id", parse_chat_message(params[:msg_body], current_user))
end

parse_chat_message? … Yes, before publishing data, you can process it and why not modify it a bit.

def parse_chat_message(msg, user)
return "#{user.login} says: #{msg}"
end

We are sending information to Juggernaut with this format : ‘usuario says: something’

Done!, you have your server up and running, and know how to send and receive data, there’s nothing else to try.

Extras:

Private chat case :*

You can’t call a chat a chat if you can’t have a private conversation with someone. A good way of implementing this, is subscribing your users to a particular chatroom identified by user’s id. Simple add another subscribe:

 jug.subscribe("name_or_channel_id", function(data){ .. handle private message .. }

The receiving user must be able to subscribe to your chat and send messages to you.

To achive that, you should write a function that when you click on the user you want to send a private message to, subscribes to its chatroom and allows you to send messages to the user. This can be implemented in many different ways! You’ll have to simply make your choice according to your needs!

moove-iT was selected to develop the social network for the Ceibal project !

Martin Cabrera — Fri, 25 Jun 2010 20:44:38 +0000

This past june 24 Moove-it won the contest “Best ideas for Ceibal 2010” organized by Rayuela and the Ceibal Plan (One laptop per child), presenting its idea “Together with Ceibal”.

Follow this link to read the official information (spanish) Rayuela Web site of Best ideas

Moove-it was selected by the Ceibal Plan as the company who will develop the first social network for more than 400.000 students of primary and high school.
The idea is to build a web-based tool which will allow students and teachers to interact inside and also outside the classroom. The platform will provide virtual classrooms where teachers can work directly with their groups using all the benefits of the Web, Internet and XOs. Students will also be able to use the tool to meet each other, share their interests or even play together.

This video shows a brief idea of what the “Ceibal Plan” is.

It feels really good to be part of something like this!

blahsports & marketing campaign of Maradona

Martin Cabrera — Tue, 22 Jun 2010 20:07:27 +0000

Currently we are the developing team of blahsports. Since January 2010 we have been developing several new functionalities and administrating the whole Site.

Blahsports – www.blahsports.com

Blahsports is a social content website. As a user, you participate in determining all site’s content by providing, selecting, sharing, and discussing articles, pictures and videos that you like and feel that would be interesting to other people.

see the site …

Blah and technology

This project is based on PHP, codeigniter (www.codeigniter.com), Python and MYSQL.
It uses RSS and Web crowller application developed in Python to share all the sports content of a hundred sites.
We create a tag module which searches and identifies the language, sports and a set of tags for each content. For instance, if the content is “Forlan plays very well against Mexico” then the module will find out that the text is about Soccer, Forlan, Mexico and that the main language is English.

blah and a marketing campaign

We are making a marketing campaign to acquire and activate users. We have a Maradona t-shirt as a prize for the winner among all the registered users … see the site … http://maradona.blahsports.com

This application was developed based on rails.

Game for the “Plan Ceibal” // Children managing a neighborhood

Martin Cabrera — Tue, 16 Mar 2010 17:43:01 +0000

We showed the first prototype of the game developed for the “Plan Ceibal” (www.ceibal.org.uy). The game is web based and specially designed for children using a XO computer.

Plan Ceibal

The One Laptop Per Child Association, Inc. (OLPC) is a U.S. non-profit organization set up to oversee the creation of an affordable educational device for use in the developing world. Its mission is “to create educational opportunities for the world’s poorest children by providing each child with a rugged, low-cost, low-power, connected laptop with content and software designed for collaborative, joyful, self-empowered learning.”

“Uruguay is the first country in accept the challenge”

Worldbank.org – Uruguay’s Plan Ceibal: The world’s most ambitious roll-out of educational technologies?

The Game

Moove-IT and El Abrojo (a Uruguayan Social Organization who works with poor children) are working in the development of an online game for the XO computers.

This game is financed by the IMM (Government of Montevideo) and his main objective is promote good habits between children. This tool is an online game in which the children works with themes relative to the daily environment care. Each child works in groups with their classmates and also with other schools in any location of the country.

They will be able to: build houses, create commercial areas, create rural areas, maintain clean the neighborhood, and manage parks, among others things.

The points are generated by answering simple questions and doing simple tests. The tests and the answers are validated by the collective. This means that players themselves determine whether an answer is correct or not.

Here you have an initial slide of the game with some screenshots. (The slide is in Spanish)

Presentación Juego para el plan ceibal

We will put this Game on production in April 20, 2010

World Usability Day in Uruguay

Augusto Guido — Wed, 11 Nov 2009 12:03:44 +0000

In order to conmemorate the Worl Usability Day the Intendence of Montevideo is inviting every to participate of an event at “Sala Zitarroza” here in Montevideo.

We are proud to say that Moove-iT will be opening the event with me and Damian Moretti talking about “Usability in Social Networks: Facebook vs Twitter”. After us there’s a talk about “New tendencies in the Interaction Design” and the last one is about “Developments and Adaptations for the inclusion of childred with disabilities at the Plan Ceibal”. Plan Ceibal is “one laptop per child” applied here in Uruguay.

Hope you can join us, but if you can’t we’ll tell how it went anyway

Rails & iPhone Applications: Simple Mix

Augusto Guido — Fri, 09 Oct 2009 19:01:30 +0000

As Rails developers we are all in love with keeping things simple. As Einstein said: “Make everything as simple as possible, but not simpler”. You may not agree with the theory of relativity, but you should really agree on this one.

A couple of months ago I started my final major project: an iPhone based application. It’s been a really great journey so far and I’ve learned so many amazing things about iPhone development. I found it very similar in some ways with Rails, being the biggest one the way they both keep things as simple as they should be. Well they both use the MVC architecture, but right now I’m talking beyond that stuff. It’s more about an ideology on how to build stuff, web and mobile applications in this case.

As an idea here at moove-it we thought of having an iPhone application for our faltauno.com project, kinda like facebook does. So the research began on how this could be done, the first (and probably definitely) answer appeared quickly. The guys at iphoneonrails.com have developed ObjectiveResource.

“ObjectiveResource is an Objective-C port of Ruby on Rails’ ActiveResource. It provides a way to serialize objects to and from Rails’ standard RESTful web-services (via XML or JSON) and handles much of the complexity involved with invoking web-services of any language from the iPhone.”. What’s not to love in that sentence? I won’t get into it since I haven’t used that much, and who could explain better than themselves?. In case you are thinking it will be too complex to get started, you can download the whole package with an example application that does all the basic stuff you are probably thinking on trying to do right now.

The example is a typical Rails application that can be handled using an iPhone application, which is also inside the example, you should of course have installed XCode. You then start the rails app and the iPhone simulator running the other one, and something kind of magic starts happening. What amaze me the most is the simplicity of the code you’ll need to write (of course ). Really try it out it’s worth it.

Don’t forget to tell us about your experience!

software is not everything in life – championships in faltauno.com “Copa CUTI”

Martin Cabrera — Tue, 07 Jul 2009 17:41:55 +0000

Hello everyone … in moove-iT we develop and management faltauno.com.
It is a social network specializes in organizing matches, managing a team and administer and manage a championship.

On August 1 begins the first championship was organized by faltauno.com “Copa CUTI” (www.cuti.org.uy).
This championship brings together all the software companies of uruguay.

We invite everyone to visit and see what are the best !

Using Facebooker to make a Rails site with Facebook Connect (Part 2)

Augusto Guido — Wed, 29 Apr 2009 16:49:44 +0000

Hey, thanks for coming back for part 2. I know it took some time to start writing this second part, it’s just that facebook keeps getting better and keeps taking my time away (don’t tell Conrado).

If I remember correctly in Part 1 we ended up with facebooker installed, configured and running. We even added the facebook connect button and explained how to use some of the great facebooker helpers. As promised in my last post we are going to explain a bit how the magic happens with XFBML, invite friends and publish feed items.

XFBML

Facebook uses XFBML as a way for you to incorporate FBML (Facebook Markup Language, an extension to HTML) into an HTML page on a Facebook Connect site or an iframe application. read more here.

This is a typical XFBML tag, it brings up the profile picture of the user with the uid=”12345″.

What’s happening here? Facebook is turning this into a typicall HTML tag. They do this using a Javascript cross-domain communications library. You can read more here if you are interested. This is all done for you when using Facebooker.

Boring right? Let’s invite some friends to our connect site to keep things more interesting.

Inviting Friends

If you went through the facebooker helpers you are probably thinking about using fb_multi_friend_selector to select friends. Well you are right! We’ll be using that helper, but we will need it inside another helper that is fb_request_form. There’s also another helper that could help us that is fb_multi_friend_request, which is basically the first two together, but we are going to use the first option. Here’s the resulting code:

<% fb_serverfbml do %>

<% end %>

I don’t want to explain something that’s already out there in many places, I will just describe a bit what’s going on. We put things inside a fb_serverfbml, because we are in a facebook connect site and need users interaction with facebook directly (that is when selecting their friends). The content_for(“invite_user”) is the content that will be show in the fb_request_form. The fb_request_form is a facebook form used when we need to submit information to facebook.

And the fb_multi_friend_selector is the nice facebook like friend selector. You can choose condensed => true to show an ugly smaller one. The exclude_ids => facebook_session.user.friends_with_this_app.map(&:id).join(“,”) is pretty great, it makes the friend selector not to show the friends who are already using our facebook connect site.

Anyway, you can get much more things done, here are some of the facebooker helpers to do anything you like with them . And of course the facebook developers wiki is a great place for starting and becoming a guru. I will add in other post the publishing feeds part.

Enjoy!