Blogs

JQuery, HTML 5, & Smart Publish API App Walkthrough

by Nathan Curry | Dec 07, 2011

Background

The sample application discussed in this example is written using basic HTML, jQuery and jQuery mobile.

http://jquerymobile.com/

http://jquery.com/


The jQuery mobile API in conjunction with the jQuery framework provides all the essential tools to quickly create an HTML application. In this example we used Google Chrome as the web client and used Fiddler to capture the web requests and responses.

 In this example, all calls were made from Chrome and captured using Fiddler.

   

http://www.google.com/chrome 

 http://www.fiddler2.com/fiddler2/

Introduction 

API integration Type: Quick Order Process

Any image product-ordering client application consists of several basic use cases:

  • Customer Images - The user has images they would like to use in their order.
  • Product Catalog - a catalog describing available products and providing information on the product and how to order or compose it as well as presentation of the catalog to the customer for product selection.
  • Product editing – allow the user to edit the image on the product according to the specified constraints in the catalog
  • Order submission – a method to send the order information including line items, shipping, billing and payment information.
  • Upload – a method to provide the image data to the services either by uploading the image data and referencing the image from the order or referencing a URL where the image is publicly available in the order submission.

*In this example we will be providing the image assets to the service via publicly available URLs added to the line items in the order submission. Because of this uploading image data is not necessary.

Figure 1: This is a general feature composition of an image product ordering application

 The Fujifilm Developer Network Smart Publishing API (SPA) provides 4 basic service calls to get an order into the system using a “Quick Order Process”

  • GetCatalog – this is to obtain the catalog and details about how to present and compose a product
  • GetTaxRateByPostalCode – this allows the client application to show proper pricing without posting the entire order to the server.
  • CreateFullOrder –allows the client application to post a complete order to the server and get back an order id and any errors that might be in the order.
  • Checkout. – this allows the order to be confirmed for fulfillment and accepts payment information

Figure 2: This is a sequence diagram showing the basic calls made in the simple order process.

This document describes the manner in which to use these calls to place an order into the Fujifilm  Developer Network SPA services using JQuery mobile and JQuery AJAX as an example below.

Example: 

The basic application consists of a few files shown in figure 2 below.

Figure 3: The directory structure and files of the example application deployed under IIS.

The first file is an image of a checkbox used as an overlay for display when an image in the gallery is selected. The controller handles various javascript application click requests and routes the user to the right UI view based on the conditions during the click. The index.html hosts all the CSS and javascript needed for the application to work. The model.js file contains all the data objects used in the application. This includes a sample order with a billto, shipto, line item and payment object in JSON format.

Figure 4: Source code from the model.js file. The code is collapsed to show the object definitions.

First is a global variable “App.” This is essentially the namespace in which all the subsequent objects/components for the entire application reside. Lines 2-4 are some global variables for use in the editor. Line 6 creates a global reference to the controller object; a global class Utility is created here. A SpaClient is created with a URL for the services and an APIKey. This object will be reused throughout the application to access the services.  And finally a Model object is created to serve as the data model containing all the data objects such as line, order, payment, totals and catalog.

The mygallery2.js provides the code for a single select image grid for use in the UI when selecting the desired image for product ordering. The ProductEditor.js provides all the functionality to use the image template obtained from the catalog as well as the region description with the selected image presenting a view in which the user can change the position and orientation of the image with the product template, composing the product to their satisfaction. The result of the product editing is a properly formatted crop string. The spapi.js file consists of all the service calls needed to communicate with the SPA services using jQuery ajax.

Initially, a catalog is fetched from the server using the spaapi.js lib. This includes a spaclient object. The spaclient requires two properties - the root URL to the services and an APIKey. Each call in the spaapi lib requests information in a get or post HTTP format using jQuery ajax. It adds the APIKey to the header and requests the root URL as well as some additional information depending on the type of service call. If the call is a post, then data is serialized to JSON and posted to the URL. Each call also provides a call-back for a success and failure. The response can be de-serialized here. Below is an example HTTP request for the catalog.

 

Figure 5: This is a screen shot taken from fiddler. An HTTP call is made using GET to retrieve the catalog from the server. The APIKey is placed in the header for authentication. The server responds with a standard status response object and the catalog in json format as specified in the Content-Type header that was posted in the GET request.

Figure 5 shows the GET request to the catalog URL with the APIKey in the header. Also note that the content-type is JSON. The response is successful and returns a collection of JSON describing the products that can be ordered. The assets collection presented in figure 5a has several key elements.

  1. Marketing – this type of asset includes a URL for a png with transparent regions where the user images can be placed for editing and composing the product. It also defines a region object that specifies the coordinates for that png template.
  2. Display - this asset supplies a URL to a graphic that shows the product with marketing images applied. This image would be good for the product selection area of the application.

Figure 5a: This is the expanded JSON response from the get catalog call. You can see the products collection and for a particular instance of a product the assets and their properties.

Once the catalog has been downloaded the first screen of the user interface is shown. Displayed to the user is the image grid so the user can select an image to add to their order.

Once an image is selected, the proceeds to the product selection page where the catalog is analyzed. Sample product images and prices are displayed along with corresponding product names so the user may make a selection.

The product list is looped through and each product in the catalog is presented in a list containing the ProductName, ProductCode, UnitPrice and an image preview. The URL for the onclick on each item is properly composed so the information is provided to the next page for presentation by the editor via the controller.

Figure 6: This code was taken from the controller file. When the user selects an image and proceeds to the next page he or she is presented with a list of products – shown here.

The editor receives the user-selected image as a URL and the ID of the user-selected product from the catalog. The ProductEditor.js lib is used to create an instance of the editor. The editor is initialized with the template image from the catalog, the user image URL, and the sizes for the desired display.

Figure 7: The information required for the editor includes a template and a definition for the locations of the regions inside the template. The code in this figure is taken from the controller.js file. When the user selects to edit his or her selected image on the product, this code extracts the template path from the catalog as well as the inset region coordinates and uses it to properly construct the editor.

To obtain the URL to the display asset and the region for which to place the image on the template, the product assets are looped through until the display asset is retrieved. This information is handed-off to the editor and presented to the user. The user can then compose a product and image. The application can extract the appropriate crop string and edits from the editor.

 

In preparation for displaying the cart with the line items and the proper totals for the order, a call is made to the GetTaxRateByPostalCode method.

Figure 7a: Snapshot of the HTTP request and response to a GetTaxRateByPostalCode call. This call is made again specifying the apikey in the header for authorization and returns the tax rate for the provided postal code.

The tax call is made using the shipping postal code.  The tax rate for the provided postal code is returned and combined with the order information to display the proper tax amount and totals.

The line-item with the edits from the editor, the image from the gallery, and the product information from the catalog are placed into a JSON order object along with the shipping and billing provided by the user. This information is presented to the user including the price of the order. The user can then review this information; update their shipping and billing, and add or delete order lines until they are satisfied with the order.

Next, the user enters payment information such as credit card number, expiration date, and the credit card security code. When the user submits the order the last two calls are made to commit the order to the system (CreatefullOrder and Checkout).

Figure 8: Expanded JSON format of an order. All parts are provided for proper placement of the order into the system. The BillTo, ShipTo, and a line with quantity and asset image with crop string are specified.

Figure 8a: This fiddler snapshot shows the HTTP POST of the order to the server. The server responds with a new order and the totals.

CreatFullOrder posts the entire contents of the JSON order properly formatted to the spa services. This call is proved in the spaapi.js lib.

Figure 9: In the controller.js file, the code handling the user’s request to submit the order for placement with payment is handled. The code is shown in this figure. First the order is submitted to the servers and then upon success the order is committed and the receipt UI is formatted and displayed to the user.

 The call is made asynchronously and a success and failure delegate is passed into the call. When the call is successful, the service responds with an order number, totals and an order URL. Immediately following this call, the Checkout call is made with the newly obtained order ID and the additional user entered payment information. The server then responds, if successful, with a status code of 200 and an estimated time of arrival (ETA) for the order. SERVER TIME ZONE and the UI is updated accordingly, displaying a receipt.

Figure 10: The commit call is made with the credit card payment information using an HTTP POST. The server responds with a standard status object and an ETA(estimated time of arrival) for the ordered items.

Finally, the receipt is presented to the user.

 

Figure 11: Screen shots from each page in the example applications flow. The following features are shown: image selection, product selection, image and product edit, cart with payment and receipt.

 Conclusion

Presented here is one example of how to develop an image product ordering application and submit products to the Fuji developer Network Smart Print API. There are a variety of ways to compose and acquire images to submit orders to the Fuji services. Please send feedback to feedback@fujifilmapi.com

70 Comments

  1. 1 jhonAlbret 24 Apr
    This is an extremely accommodating Learn English online post; I was searching for this data. So hopefully you know I found your website when I was doing exploration for sites of article and I like it, so please look at my webpage at some point and leave me a remark to tell me what you think. Buy Electronic Cigarettes
  2. 2 jhonAlbret 24 Apr
    Wow! Such an amazing and helpful post this is. I really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also click here Voyance Par Telephone Gratuit | Voyance Gratuite Par Telephone
  3. 3 cbseresults.nic.in 24 Apr

    The Central Board of Secondary Education has recently held the CBSE 10th Board exams and is all set to announce the cbseresults.nic.in

  4. 4 ts ssc results 2017 23 Apr
    <a href="http://www.10thsscresults2017.in/2017/03/telangana-ts-ssc-10th-results-2017-grade-wise-declared.html">ts ssc results 2017</a>
    <a href="http://www.10thsscresults2017.in/2017/03/telangana-ts-ssc-10th-results-2017-grade-wise-declared.html">ts 10th results 2017</a>
    <a href="http://www.10thsscresults2017.in/2017/03/telangana-ts-ssc-10th-results-2017-grade-wise-declared.html">ts 10th result 2017 name wise</a>
    <a href="http://www.10thsscresults2017.in/2017/03/telangana-ts-ssc-10th-results-2017-grade-wise-declared.html">ssc results 2017 telangana grade wise</a>
    <a href="http://www.10thsscresults2017.in/2017/03/telangana-ts-ssc-10th-results-2017-grade-wise-declared.html">TS 10th class result 2017</a>
  5. 5 Web design 22 Apr
    I enjoyed your article and it is quite interesting too. I love to learn more web design techniques to impress others.
  6. 6 jonn 19 Apr
    Good Post, I am a true believer in posting comments on sites to let the blog writers know that they have added something advantageous to the World Wide Web! lovemyecig.co.uk | https://lovemyecig.co.uk

  7. 7 jhon 17 Apr
    Good Post, I am a true believer in posting comments on sites to let the blog writers know that they have added something advantageous to the World Wide Web! increaseverticaljumpblog
  8. 8 jhon 17 Apr
    This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this.. naturalweightlosstipsonline


  9. 9 jhon 17 Apr
    Wow! Such an amazing and helpful post this is. I really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also nutrifire

  10. 10 jhon 17 Apr
    This is an extremely accommodating Learn English online post; I was searching for this data. So hopefully you know I found your website when I was doing exploration for sites of article and I like it, so please look at my webpage at some point and leave me a remark to tell me what you think. sport-nutrition

  11. 11 jhon 17 Apr
    I enjoyed reading your post and found it to be informative and to the topic. Thank you for not rambling on and on just to fill the page. Thanks the-parents-zone
  12. 12 jhon 17 Apr
    This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you. allnaturalsupplements
  13. 13 jhon 17 Apr
    Wow! Such an amazing and helpful post this is. I really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also. annemiekish
  14. 14 jhon 17 Apr
    Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. best-buy-supplements
  15. 15 jhon 17 Apr
    Thanks for the amazing content on your blog I am very interested in this article and you have really helped me. I have just told a few of my friends about this on FaceBook and they love your content just as much as I do build-own-list
  16. 16 jhon 17 Apr
    I enjoyed reading your post and found it to be informative and to the topic. Thank you for not rambling on and on just to fill the page. Thanks. buyaccomplix
  17. 17 keralaresults.nic.in 14 Apr
    The Directorate of Government Keralaresults State Board has recently held Kerala SSLC Examination
  18. 18 Testex 13 Apr
    Bursting Strength Tester, To determine the bursting strength of fabric, woven or knitted fabrics, non-woven, paper and board by the Application of hydraulic load under a rubber diaphragm of a specific area.
  19. 19 pizarro 13 Apr
    Owesome informations 
    3 week diet
  20. 20 pizarro 13 Apr
    awesome informations
    <a href="http://www.fitnesstips-4u.com/the-3-week-diet-review-by-someone-change-his-life">3 week diet</a>
  21. 21 jhon 12 Apr
    Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene. Voyance Qualité | Voyance Sans CB
  22. 22 jhonsan 12 Apr
     This website has been sharing much informative posts on this blog that can be used to take necessary steps to improve the ways to make our investments in different safe sectors. Thank you so much! Voyance Par Telephone Serieuse | Voyance Sans Cb
  23. 23 jhon 10 Apr
    0892 22 20 22 Voyance par Téléphone : Amour, Travail, Finance, voyance par téléphone de QUALITÉ et GRATUITE. A la rencontre de votre avenir. Voyance Tel | Voyance Par Telephone Gratuite
  24. 24 jhon 10 Apr
    0892 22 20 33 votre Voyance Gratuite au Téléphone. Votre avenir amoureux ou professionnel, ici et maintenant au 0892 22 20 33. Voyez enfin au-delà du temps. Voyance Gratuite Par Telephone | Voyance Par Telephone Gratuite
  25. 25 Sam 07 Apr
  26. 26 jhon 06 Apr
    Bitcoin to real money like paypal bank transfer western union US dollars payza Skrill payoneer,Credit Card,MoneyGram.Click this link Instant Exchange Bitcoin to Western Union Money.
  27. 27 jhon 31 Mar
    Unlike larger San Diego Exterminator pest control companies, Allied Services is locally owned and family operated with a cornerstone of personalized attention. Our team is committed to giving you the best service possible and eliminating your unwanted pests. Locals have relied on us since 1986 and you will quickly see why.
  28. 28 jhon 31 Mar
    Allied Services has been providing San Diego Pest Control Services since 1986. From the beginning, we have offered our clients unsurpassed service providing the best value price. We offer proven, environmentally conscious, affordable, yet EFFECTIVE solutions for your bed bug and common pest problems. Call us today for a service you can trust.
  29. 29 Laboratory Equipment Repairs 21 Mar
    Refrigerated containers are also produced and hired out to the pharmaceutical industry. Though not freezer containers, pharmaceutical containers are still tightly specified in that they carry goods… Visit for more information please visit this link -  Laboratory Equipment Repairs
  30. 30 Equipment Repair 21 Mar
    A laboratory freezer is a critical part of many hospitals, blood centers, labs, pharmacies, clinics, research facilities and more. It is important to purchase a blood bank freezer that is high… Visit for more information please visit this link Equipment Repair
  31. 31 Rental Dumpsters 21 Mar
    When you start to do a house restoration task or run at a construction website, one concern emerges right away that starts little bit however rapidly grows in size: exactly what to do with all of… Visit for more information please visit this link Rental Dumpsters
  32. 32 jhon 21 Mar
    Renting a dumpster, appears relatively easy right? Well, prior to you area your dumpster purchase there are a number of issues you require to know.  For beginners, consider the dimension. Generally,… Visit for more information please visit this link Dumpsters
  33. 33 jhon 20 Mar
    Renting a dumpster, appears relatively easy right? Well, prior to you area your dumpster purchase there are a number of issues you require to know.  For beginners, consider the dimension. Generally,… Visit for more information please visit this link - <a href="http://marylanddumpsters.weebly.com/why-rent-a-dumpster.html/">Dumpsters</a> | <a href="http://marylanddumpsters.weebly.com/why-rent-a-dumpster.html/">Rental Dumpsters</a> | <a href="http://marylanddumpsters.weebly.com/why-rent-a-dumpster.html/">Dumpster Rental</a>
  34. 34 cbse results 2017 class 10 20 Mar
  35. 35 Ellen Smith 16 Mar
    I think this post will be a reference to all computer science students.
    Expecting more source codes like these. I would like to thank the author
    for sharing this source code. Your post helps me to understand more on
    JQuery, HTML 5, & Smart Publish API App. elmer t lee
  36. 36 tobaccoeliquid 15 Mar
    Here, we offer the best Kangertech UK. LOVE MY ECIG helps consumers to make more informed decisions when choosing e- cigarettes and Eliquids. Buy Electronic Cigarettes online from the collection of LOVE MY ECIG.
  37. 37 hoxtonsms 09 Mar
    Send Online Free Branded Sms with Android App in Pakistan | Hoxton Sms
    HOXTON Sms is best online sms sender website in Pakistan You can Send Bulk Free Branded Sms from website Android App and messenger with cheapest sms package
    http://www.hoxtonsms.com

  38. 38 sastipro 09 Mar
    DHA | Bahria Town Lahore Karachi Islamabad | Sasti Property
    Sasti Property Provide Real Estate Services Land Home House Plot for Sale or Rent in DHA Lahore DHA Karachi DHA Islamabad DHA Multan DHA Peshawar and Bahria Town Lahore Bahria Town Karachi Bahria Town Islamabad
    more info: http://www.sastipro.pk

  39. 39 minecraft apk 28 Feb
    minecraft apk
    Minecraft Download: Minecraft is a combination of exploration, creativity, and survival.
  40. 40 Jams 25 Feb
    Used to do encounter looking at content articles or even evaluations discussed right here. They're merely outstanding you will find a lot of beneficial understanding.  does doggy dan work
  41. 41 Ellen Smith 21 Feb
    The jQuery framework that you shared in this site is very helpful for
    me. This blog is very informative and I got the details about many
    important topics that are very helpful in my studies from this blog.
    Expecting more blogs like these. paris sightseeing tours
  42. 42 Sam 21 Feb
    Nice blog. Found this while searching through google
  43. 43 mary 13 Feb
  44. 44 Assignment help online 13 Feb
    It is a well-maintained site where people can learn about various
    topics. I am looking forward to read more blogs from here. Students finding it
    tough to write an assignment can try our online assignment help and can get
    their coursework written by assignment experts. https://www.allassignmenthelp.com
  45. 45 kerala hse results 2017 06 Feb
    <a href="http://www.keralaresultsnicc.in/">kerala hse results 2017</a>
  46. 46 Cole Rush 04 Feb
    Make like plainly analyzing your current blogs. purathrive liposomal turmeric review
  47. 47 Eliza 03 Feb
    I had attended training in Java after my B.Tech and had learned these basic terms. The jQuery framework was very important in order to build the site and to store the values in the database. We should be very careful while coding in this language because a small error can put the site down. garage door springs Fountain Valley

  48. 48 Seo Company Jaipur 03 Feb
    thanks for share the post
  49. 49 Harper Manning 02 Feb
    Your site fantastic, superior quality succeed... Most probably various should realize others despite that they don't take time to advise you. 
    myvenusfactorguide.com
  50. 50 Cole Rush 31 Jan
    That could function short-term, however it’s not really a practical long-term answer with regard to men who wish to end up being with this 1 unique woman these people can’t cease considering.  phenq weight loss
  51. 51 Harper Manning 28 Jan
    Superb web site you've right here, a lot awesome info!..  3 week diet pdf
  52. 52 Harper Manning 26 Jan
    Your blog is fabulous, superior give good results... Seen a large number of definitely will understand everybody even in the event they do not take the time to reveal. ez battery reconditioning method review
  53. 53 Harper Manning 25 Jan
    Amazing put up i must assert not to mention thanks a lot for ones advice. Coaching is definitely a sticky topic area. But, continues associated with the prominent articles our instance. I just understand a put up not to mention await further. phen375 review
  54. 54 Harper Manning 24 Jan
    Your website is this one-stop buy everything educative crafting. Thanks a ton for any superb deliver the results. I actually tested out among the list of web pages you actually advisable plus Available this best-dissertation. crazy bulk stack reviews 
  55. 55 best gaming keyboards 2017 24 Jan
    check out our in depth keyboard buying guide for the best gaming keyboards 2017
  56. 56 Mike Jason 19 Jan
    The setup tab will be the lay you set up your dexterity connector and ability sanction, by means of oaths. The skill connector interprets between Alexi’s abilities and your gadget's exclusive control frameworks, http://www.BestassignmentService.com as the means to hand-off disclosure and run orders from Alexi to your thingamabob control cloud.
  57. 57 I Need an Essay 18 Jan
    Yes, its very smart api and useful for every one. I truly appreciate that effort because i like fujifilm thing but also handle the institute of Professional Essay Editor . Thanks for that posting ..

  58. 58 TS SSC Results 2017 07 Jan
    <a href="http://www.allbharathresults.com/ts-ssc-results-2016-telangana-10th-class-results-2016/">TS SSC Results 2017</a>
  59. 59 NAGA 07 Jan
    http://dailynewupdate.com
  60. 60 HR Research Papers 06 Jan
    As it were, you would charge me and drop send the prints straightforwardly to my clients. As of now all I'm offering are 4x6 polished prints and no extra customization is permitted on the prints. Yes, later on I might want to offer HR Research Papers other print items, yet my most imperative is the 4x6 photograph print. It would be ideal if you let me know whether this is something I can do with your API. Shown here is one instance of how to develop a photo thing asking for application and submit things to the Fuji build Network Smart Print API.
  61. 61 free mail 30 Dec
    great post bro...it's very useful

    freemail szimpla
    freemail
  62. 62 osmania university results 2017 22 Dec
    Junior & Senior Diploma in German & French November, 2016 results ... of UG (CBCS) Semester-I Inernal Marks for the academic year 2016-2017
    osmania university results 2017

  63. 63 safari for windows download 15 Dec
    Safari is faster and more energy efficient than other browsers. ... Safari was the first browser to block these cookies by default
    safari for windows download

  64. 64 gerry 09 Dec
    it is really good to read ypur article 
    http://kapilsharmashowfans.com
  65. 65 Collien Paul 07 Dec
    Exhibited here is one case of how to build up a picture item requesting application and submit items to the Fuji engineer Network Smart Print API. 
    Yamaha Yellow Leather Jacket Buymoviejackets
  66. 66 Sara 16 Nov
    Hey what a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. aesthetic surgery dubai
  67. 67 Claudia 24 Oct
    This blog is very informative and I got the details about many important topics that are very helpful in my studies from this blog. The jQuery framework that you shared in this site is very helpful for me. Expecting more blogs like this don julio 1942

  68. 68 Arabella 20 Oct
    I am starting to learning JQuery, HTML 5 if i need some help may you do my help in this problem? Now anyone Write My Assignment Cheap Online because I urgently need it for submit my project in school because soon my paper is starting.
  69. 69 Growwway Solution 20 Jun
    Dear Sir,

    Could you please guide me how to use your API for my website and what are the terms & conditions, How to make payment, etc.

    Regards
  70. 70 Emilio Rod 25 Jan
    Hi. I am building a website that uses it's own shopping cart. My customers order and pay me for 4x6 glossy prints. I want to be able to use an API to submit my orders to a printer like you. Can I submit my customers' orders (URLs of images, and quantities of each) and their shipping info? The billing info will always be mine. In other words, you would charge me and drop ship the prints directly to my customers. At this time all I'm selling are 4x6 glossy prints and no additional customization is allowed on the prints. Yes, in the future I would like to sell other print products, but my most important is the 4x6 photo print. Please let me know if this is something I can do with your API. Thank you.

Comment

  1.