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