jQuery Mobile Workshop
Upcoming SlideShare
Loading in...5

jQuery Mobile Workshop



Learn how to create a product searc

Learn how to create a product searc



Total Views
Slideshare-icon Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    jQuery Mobile Workshop jQuery Mobile Workshop Presentation Transcript

    • 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"); }); });});
    • ResetProductsfunction resetProducts() { $("#products").empty(); var divider = $("<li data-role=list-divider>Search Results</li>"); $("#products").append(divider);}
    • addProductfunction 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