Building Mobile Apps with Rhodes

Adam Blum - CEO, Rhomobile

Rhomobile’s Mission “ To mobilize enterprise apps… cost-effectively with a great user experience”

Provide the high level productivity and portability of web programming

Device optimization and offline capability of “native mobile apps”

Open source for rapid adoption by developers

Background

Smartphones sales are exploding

Five major smartphone operating systems: iPhone, BlackBerry, Windows Mobile, Symbian, Android

Growth leaders are installed base laggards

“ native apps” have won the day

500 million iPhone app downloads on a platform with great browser installed

But …how do you write an app for all popular devices?

A Better Way… Rhomobile

Build the app quickly in HTML and Ruby

Write it once and it runs on all smartphones

Work with synced local data

Exploit device capabilities (GPS, PIM data)

Available open source: http://www.github.com/rhomobile

The Rhomobile Components

Rhodes

“ microframework” for building locally executing natively optimized mobile apps

Developers run app generator for their objects of interest and then edit HTML templates

Contains first mobile Ruby implementation

RhoSync

Sync focused on web service data (needed in the age of SaaS)

Handles keeping your data local on the device

Rhodes Architecture RhoSync Server synced data (SQLite) Rhodes app RhoSync client web server ORM (Rhom) Rhodes runtime browser control Ruby interpreter HTML (ERB) templates model controller model HTML (ERB) templates controller Backend app mobile device source adapter Backend app model model We provide: Third party components: source adapter You write:

Rhodes Apps

Rhomobile provides sample apps

SugarCRM

Siebel Field Service

Lighthouse

Third party apps

TrailGuide (Basecamp) - Carry the Day

Mobile Lighthouse – VDG Group

Building a Rhodes App

Get your data (RhoSync)

Create a sync source

Define your sync source adapter code

Test it from the RhoSync web interface

Generate your app (RhoGen)

Generate an app (in the Rhodes apps subdirectory)

Generate scaffold code for the model

Develop your app (Ruby/HTML editor of choice)

Edit your model controllers

Edit your HTML templates (ERB file)

Build, test, deploy (development environment for device)

Build your app

Test your app

Make available for download (or submit to an AppStore)

RhoSync Architecture RhoSync Server Rhodes runtime your app Other app backends SugarCRM Siebel SalesForce BaseCamp SOAP SOAP SOAP REST REST

Defining a Rhosync Source

Provides a Source Adapter class with

login- authentication code for the backend

query - retrieve or read objects from the backend source

sync - take apart these objects and put them into a "property bag”

create

update

delete

logoff

Generated Source Adapter Class

class <%=name%> < SourceAdapter

def initialize(source)

super

end

def login

#TODO: Write some code here

end

def query

# TODO: write some code here

end

def sync

# usually the generic base class sync does the job

super

end

def create(name_value_list)

#TODO: write some code here

end

def update(name_value_list)

#TODO: write some code here

end

def delete(name_value_list)

#TODO: write some code here if applicable

end

def logoff

#TODO: write some code here if applicable

end

end

Generate Your Rhodes App

Generate your app

rhogen app accountapp

Creates…

application.rb

index.html

Generate your model

cd accountapp

rhogen model account http://rhosync.rhohub.com/sources/1name,industry

Creates…

controller.rb

config.rb

index.erb

new.erb

edit.erb

Edit A View <form title="Edit Account" class="panel" id="account_edit_form" method="POST" action="<%=url_for('update')%>"> <fieldset> <input type="hidden" name="id" value="<%=@account.object%>"/> <div class="row"> <label>Name: </label> <input type="text" name="account[name]" value="<%=@account.name%>"/> </div> <div class="row"> <label>Industry: </label> <select name="account[industry]"> <%@industries.each do |i|%> <option value=<%=i%> <%if @account.industry==i%> selected<%end%>><%=i%> </option> <%end%> </select> </div> </fieldset> <input type="submit" value="Update"/> </form>

Platform Status