Your SlideShare is downloading. ×
jQuery Mobile Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQuery Mobile Workshop

948
views

Published on

Learn how to create a product searc

Learn how to create a product searc


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
948
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQUERY MOBILEWORKSHOPRon Reiter
  • 2. 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
  • 3. Codiqa•  Create an account at http://www.codiqa.com•  Create a new project called ProductShop
  • 4. Build the application screen
  • 5. 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
  • 6. Start Working•  Download the project to a working directory
  • 7. Edit app.html
  • 8. 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”).
  • 9. 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"); }); });});
  • 10. ResetProductsfunction resetProducts() { $("#products").empty(); var divider = $("<li data-role=list-divider>Search Results</li>"); $("#products").append(divider);}
  • 11. addProductfunction addProduct(product) { var productView = $("<li><a href=" + product.link + "><img src=" + product.images[0].link + "/> " + product.title + "</a></li>"); $("#products").append(productView);}
  • 12. 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!
  • 13. Reference•  Download everything from here: •  https://github.com/ronreiter/productsearch