Making Twitter mobile client with Ruby using Rhodes & Rhosync (Part 2)

13Feb09

What we have done at previous tutorial.

At the previous post, we created an Rhosync adapter to fetch public timeline of Twitter. Take a note of the url where you displayed the record, because you will need it when you build rhodes app.

In my case, the url is like this.

http://localhost:3000/apps/6/sources/11

“6” is id for the application(Tweeter), and 11 is id of the source(Public Timeline). The numbers very in your environment.

Setup

As specified at Rhomobile tutorial, let’s download the latest Rhodes from github.

  git clone git://github.com/rhomobile/rhodes.git rhodes

Before building new app

When I first played with SugarCRM sample which rhomobile provided, I really struggled running it on my iPhone emulator. You can see the full detail at this thread, but I will also summarize it again with some visual aid.

Unify source url into one.

You will notice that there are lots of sample application directories (Lighthouse, SugarCRM, etc) under “apps” directory. I recommend that you either remove them, move to different directory, or edit “config.rb” files of every single models under every single probjects pointing source url from “http://rhosyncdev.rhohub.com” to “http://localhost:3000” . This is because Rhodes try to connect to each url at login and fails if it fails to connect to any url specified at the config file.

  $cd rhodes
  $cd apps
  $grep source */*/config.rb
  Basecamp/People/config.rb:#Rho::RhoConfig::add_source("People", {"url"=>"http://rhosyncdev.rhohub.com/apps/1/sources/6", "source_id"=>6})
  Lighthouse/LighthouseSettings/config.rb:Rho::RhoConfig::add_source("LighthouseSettings", {"url"=>"http://rhosyncdev.rhohub.com/apps/4/sources/10", "source_id"=>10})
  Lighthouse/Milestones/config.rb:Rho::RhoConfig::add_source("Milestone", {"url"=>"http://rhosyncdev.rhohub.com/apps/4/sources/6", "source_id"=>6})
  Lighthouse/Project/config.rb:Rho::RhoConfig::add_source("Project", {"url"=>"http://rhosyncdev.rhohub.com/apps/4/sources/5", "source_id"=>5})
  Lighthouse/Ticket/config.rb:Rho::RhoConfig::add_source("Ticket", {"url"=>"http://rhosyncdev.rhohub.com/apps/4/sources/7", "source_id"=>7})

  $mv  Basecamp/ Lighthouse/ RhoSiebel/ RhoSugarCRM/ Phonebook/ ..

Do a clean build in xcode.

sqlite local db holds session information unless you completely wipe
out app from the simulator. Here are the steps to wipe out completely.
Make sure you do this every time you modified your code under rhodes directory
(not just when you are tweaking rhodes framework itself, but also when you write your code under “app” directory)

  1. Do “reset content and settings” then from the iphone simulator
    menu

  2. Remove iphone/build/Debug-iphonesimulator director from Rhodes
    project directory.

  3. “Build” => “Clear all targets” on Xcode.

  4. “Build” => “Build and Go” from xcode.

The steps are quite tedious. I’d love to know if there are any other ways to simplify the steps. This is when I miss the simplicity of scripting environment…

Log out /login from simulator.

For some reason, rhodes thinks I was logged in at iphone simulator. If
first login did not work, cancel the login page, go back to main page,
click “Logout”, then login again (This used to happen at 0.2.0, but seems fixed at 0.3.0).

Make sure port 8080 is not in use.

The iphone simulator uses http://localhost:8080 for it’s internal web server to render user interface. I was once running Tomcat at port 8080 for my work related product, and my mobile app window at the simulator was showing this message. Took a few minutes figuring out why it was showing such a message.

rhogen app

You must remember that you used “rhogen” to create an adapter at Rhosync.
You will use the same command, but now with different option.

$rhogen app Twitter
Generating with app generator:
     [ADDED]  Twitter/application.rb
     [ADDED]  Twitter/index.html

Before moving to the directory, please insert a link to the app page at “apps/index.erb” like below.

<h4>Sample Apps</h4>
    <a href="Twitter">Twitter</a></br>

rhogen model

Now is the time to create a controller which sync with the resource model you created at Rhosync.

  $cd Twitter 
  $rhogen model PublicTimeLine "http://localhost:3000/apps/6/sources/11" 11 text,user_screen_name,user_name,user_profile_image_url,source
  Generating with model generator:
  [ADDED] PublicTimeLine/config.rb
  [ADDED] PublicTimeLine/index.erb
  [ADDED] PublicTimeLine/edit.erb
  [ADDED] PublicTimeLine/new.erb
  [ADDED] PublicTimeLine/controller.rb

The syntax should be straightforward. it specify controller name (PublicTimeLine), resource url(http://localhost:3000/apps/6/sources/11), resource id(11, actually I feel this is duplicated info as resource url contains the resource id itself), and all the attributes(text,userscreenname,username,userprofileimageurl,source).
Make sure you put no space between commas.

You don’t really need to touch the controller you just created for now, as rhogen made controller with basic CRUD. Just insert link to the “PublicTimeLine/index” page at at “Twitter/index.html” like below.

  <ul id="home" selected="true" title="Twitter">
    <li>Something interesting here...</li>
    <li><a  href="PublicTimeLine"> Public Tweet</a></li>

View

Last part is a view. The below is PublicTimeLine/index.erb created by rhogen.

  <ul id="PublicTimeLines" title="PublicTimeLines">
  <%@PublicTimeLines.each do |x|%>

  <li><%=link_to "#{x.text}", "edit", x.object%></li>

  <%end%>
  <li><font color="blue"><%=link_to "New PublicTimeLine", "new"%></font></li>
  </ul>

Let’s change it to show all the info we fetched from rhosync.

  <ul id="PublicTimeLines" title="PublicTimeLines">
  <%@PublicTimeLines.each do |x|%>
    <li class ="row">
      <img src=<%= x.user_profile_image_url %> alt=<%= x.user_screen_name %> />
       <%= x.text %>
       <%= x.user_name %> <%= x.created_at %> via <%= x.source %>
    </li>
  <%end%>
  </ul>

Displaying on Emulator

Now it’s time to open the project at Xcode.

Before running “Build & Go”, I recommend that you go through the clean up process I explained earlier.

Once build is complete, iPhone simulator will popup, and Rhodes application will launch itself. Also, make sure you Rhosync Rails server is up and running.

It’s good time to open up console, as well as displaying script/server log, so you can see what’s going on at the backend.

Rhodes on iPhone Simulator

Finally we managed to display public tweet on our iphone simulator!!

The view is rendered by iui css and javascript. It will show like normal iPhone UI, as long as you specify each tweet within <li class="row">. I also made other view changes such as displaying date in time distance (eg: 3 hours ago), but I will cover that at later time.

Next

At next post, I will go through similar step we did at Part 1 and 2, but we will display your own friend feed, as well as being able to post tweet from iphone simulator.

Advertisements


8 Responses to “Making Twitter mobile client with Ruby using Rhodes & Rhosync (Part 2)”

  1. 1 ryan

    Hey,

    A lot has changed since the .2 frame work. Could you republish/update this for the 1.0 or 1.1 framework?

    Thanks,

  2. 2 Muni

    Makoto, Its very helpful to understand the basic framework. But i think its not working with the latest version. It would be great if you can actually update the code. Looking forward for your post.

    Thanks,
    Muni.

  3. 3 inouemak

    Hi, Thank you for your comment. Yes, lot’s have been changed since 0.2 and I am also in the middle of upgrading to 1.1. I will update my article once all my code’s functionality. For the time being, please refer to my github code for the latest.

    http://github.com/rhomobile/rhodes/tree/master
    http://github.com/makoto/rhosync-twitter-adapter/tree/master

  4. 4 jayaprakash

    hai thankyou in advance

    iam facing a problem having connect to my local host using authentication
    the parameters are sending perfectly but it cannot show the contents

  5. Hello, every time i used to check website posts here early in the morning, because i love to find
    out more and more.

  6. It worked for my Samsung ML-1210. Many thanks.
    I will purchase a new printer as a result of Windows 8.

  7. I’m excited to discover this web site. I wanted to thank you for your time due to this
    fantastic read!! I definitely enjoyed every part of it and
    i also have you saved to fav to check out new information on your web site.

  8. What i don’t understood is in reality how you are now not really much more neatly-appreciated than you may
    be now. You’re so intelligent. You realize therefore considerably when it comes to this subject, made me individually imagine it from numerous various angles.
    Its like men and women don’t seem to be interested unless
    it’s something to do with Girl gaga! Your individual
    stuffs outstanding. At all times maintain it up!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: