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 4.) Create action search and search_result in youtube_controller.rb
5.) Create search.erb
Step 1.) Create Rhodes application :
rhogen app youtube_client
Step 2.) Go to application directery:
cd youtube_client/
Step 3.) Create a controller Youtube
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.
<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>
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
No comments:
Post a Comment