jquery mobile workshop
DESCRIPTION
Learn how to create a product searcTRANSCRIPT
JQUERY MOBILE WORKSHOP Ron Reiter
What are we going to do? • ProductShop – Product Shopping Application
• Build a List View using jQuery Mobile (codiqa.com) • Make an AJAX call and populate the List View
• http://productshoppingapi.appspot.com/search?q=digital+camera
• Upload your jQuery Mobile project to Google App Engine • Browse using your smartphone / tablet
Codiqa • Create an account at http://www.codiqa.com • Create a new project called ProductShop
Build the application screen
Build the application screen • Form
• Search button • Placeholder: Search Product… • Name: q
• Submit • Text: Search • Icon: Search • Theme: Blue
• List View • Id: products • Delete the divider
Start Working • Download the project to a working directory
Edit app.html
Build the AJAX Search • Delete the contents of the list view we created using Codiqa • AJAX endpoint - http://productshoppingapi.appspot.com/search?q=<query> • The endpoint sends CORS headers so we can use it form anywhere. The back-end is a
simple Google App Engine Python application which uses the Google Product Search API.
• Once we get the response back, iterate over the items array • Empty the #products list view • For each item, get the “product” item and create a list item: <li>
<a href=“{{ item.product.link }}”>
<img src=“{{ item.product.images[0].link }}”/>
{{ item.product.title }}
</a>
</li> • Finally, refresh using $(“#products”).listview(“refresh”).
AJAX Search Code // run this code only after initialization $(function() { // handle search form submit $("form").submit(function(event) { // prevent the default submit behavior event.preventDefault(); // prepare the query URL var url = "http://productshoppingapi.appspot.com/search?" + $(this).serialize(); // make the AJAX request, and iterate over the results $.getJSON(url, function(data) { resetProducts(); for (var i = 0; i < data.items.length; i++) { var product = data.items[i].product; addProduct(product); } $("#products").listview("refresh"); }); }); });
ResetProducts function resetProducts() { $("#products").empty();
var divider = $("<li data-role='list-divider'>Search Results</li>");
$("#products").append(divider);
}
addProduct function addProduct(product) { var productView = $("<li><a href='" +
product.link + "'><img src='" + product.images[0].link + "'/> " +
product.title + "</a></li>");
$("#products").append(productView); }
Uploading to Google App Engine • Download Python if you’re on Windows • Download the GAE Python SDK • Go to http://appengine.google.com/ and create a new app (you’ll need
to do SMS account activation) • Choose an identifier • Create a new Google App Engine app with the identifier through the
Google App Engine Launcher • Add your directory (codiqa-app) to your project directory • Add the following to app.yaml: - url: /app static_dir: codiqa-app • Upload through the Google App Engine Launcher • Access <youridentifier>.appspot.com/app/app.html through your
mobile phone or tablet • You’re done!
Reference • Download everything from here:
• https://github.com/ronreiter/productsearch