jQuery Mobile Workshop
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile Workshop

on

  • 1,382 views

Learn how to create a product searc

Learn how to create a product searc

Statistics

Views

Total Views
1,382
Slideshare-icon Views on SlideShare
1,382
Embed Views
0

Actions

Likes
1
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

    jQuery Mobile Workshop jQuery Mobile Workshop Presentation Transcript

    • JQUERY MOBILEWORKSHOPRon 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"); }); });});
    • 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