Your SlideShare is downloading. ×
0
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
jQuery Mobile Workshop
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

1,002

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
1,002
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

×