Thursday, September 1, 2011

Rhomobile Ipad Example- You Tube Client

We will create a Rhomobile ipad application which will search youtube videos and will playback this videos. It is just an example and our purpose is to explore Rhomobile AsyncHttp methods. We will connect to You tube search API. 


Step 1.) Create Rhodes application :
              rhogen app youtube_client
   
Step 2.)  Go to application directery:
              cd youtube_client/

Step 3.)  Create a controller Youtube

Step 4.) Create action search and search_result in youtube_controller.rb



   def search

   end

    def search_result
        you_tube_url = "http://gdata.youtube.com/feeds/api/videos?q=" + @params['name'] + "&max-results=5&v=2&alt=jsonc"
        @youtubes= Rho::AsyncHttp.get(
                                       :url => you_tube_url
                                       )["body"]["data"]["items"]
    end

 We are using AsyncHttp to call You Tube search API. And @params['name'] contain the search term.

5.) Create search.erb 


<div data-role="page">


  <div data-role="header" data-position="inline">
    <h1>Search You tube</h1>
    
  </div>


  <div data-role="content">
    <form method="POST" action="<%= url_for :action => :search_result %>">    
          <div data-role="fieldcontain">
            <label for="name" class="fieldLabel">Name</label>
            <input type="text" id="youtube[name]" name="name" />
          </div>
      
      <input type="submit" value="Update"/>
    </form>
  </div>


</div>




6.) Create search_result.erb and add following code:


<div data-role="page" data-add-back-btn="false">


  <div data-role="header" data-position="inline">
    <h1>Search result</h1>
  </div>


  <div data-role="content">
    <ul data-role="listview">
      
         <% @youtubes.each do |youtube| %>
        <li>
      <center>
            <span class="title">
<%= youtube["title"] %></span><br>
<iframe width="400" height="400" src="http://www.youtube.com/embed/<%= youtube["id"]%>" frameborder="0" allowfullscreen></iframe></center>
<span class="disclosure_indicator"></span>
      
        </li>
    
    <% end %>      
    </ul>
  </div>


</div>







7.) Link the search.erb to home page(by default it is index.erb in app folder.

8.) If you creating it for ipad add following line in build.yml under iphone.
      emulatortarget: ipad
If you creating this app for iphone or Android you can skip this step.

You can Download this code from : https://github.com/nalwayaabhishek/YouTubeClient 

2 comments:

  1. Can you tell me a way of embedding a youtube video in a rho app....
    anything..any help would be appreciated..

    thanks

    ReplyDelete
  2. That's very good... i think this information really help me...
    Very Useful information... awesome description and easy steps... Keep sharing more!!!
    Visit:- Youtube Help

    ReplyDelete