JQuery, HTML 5, & Smart Publish API App Walkthrough

by User Not Found | Dec 02, 2011

Background

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


JQuery Logo

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

2323 comments

Leave a comment
  1. nanny | Feb 25, 2020
    This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here!Pro Music Marketing
  2. nanny | Feb 25, 2020
    Thanks for the best blog. it was very useful for me.keep sharing such ideas in the future as well.night vision rifle scope
  3. nanny | Feb 25, 2020
    latest Ghana Music downloads!Africa music
  4. Hibbah | Feb 25, 2020
    Nice knowledge gaining article. This post is really the best on this valuable topic.   http://199.30.55.59/cebanqq
  5. evan tyler | Feb 25, 2020
    the best place on all your queries regarding cannabis like how long does it take to grow weed
  6. abdul wahab | Feb 24, 2020
    That's look into you ought to special groundwork ahead of when authoring. Shall be likely that will even more alluring blog post through this industry. 123 movies
  7. AJ | Feb 24, 2020
    I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material. . . . . hotmail
  8. abdul wahab | Feb 24, 2020
    This process will be creatively actually the best option. Every single one regarding infinitesimal shows are usually designed through several traditions expertise. I would recommend the application a lot. diamond rings
  9. digitinc | Feb 23, 2020

    This post is very informative on this topic. I feel strongly that love and read more on this topic. I just tripped upon your blog and wanted to say that I have really enjoyed reading your blog stations. Thanks for sharing.

    https://toto-connect.com/

  10. vidmate | Feb 23, 2020
  11. digitinc | Feb 23, 2020
    You have done a great external DVD drives job on this article. I have just stumbled upon your blog and enjoyed reading your blog posts very much. Thanks for the useful info.
  12. nanny | Feb 22, 2020
    This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here!csgo prime accounts
  13. max | Feb 22, 2020

    I am unquestionably making the most of your site. 

    Cut Mix 150 for Sale with Shipping

  14. Hibbah | Feb 22, 2020
    Great survey, I'm sure you're getting a great response.   signage company Kenya
  15. Sukanya Samriddhi Yojana | Feb 22, 2020
    About SSY Scheme: Sukanya Samriddhi Yojana is a small deposit scheme of the Government of India mean exclusively for a girl child and is launched as a part of Beti Bachao Beti Padhao Campaign.  Sukanya Samriddi Yojana CHECK IT.  usually i never comment in site but your article is so convincing me to say something about it It's really a nice and helpful piece of info. I'm happy that you simply shared this useful information with us. Thanks for sharing. I posted some helpful link can you check it for a second ??? HamdardFranchise  HaldiramFranchise  DaburFranchise  AmulFranchiseContactNumber OnlineShoppingLuckyDraw OnlineShopping LuckyDrawShopclues LuckyDrawSnapdealLuckyDraw Homeshop18LuckyDraw FlipkartLuckyDraw  hmnt......//
  16. delkon | Feb 22, 2020
  17. AJ | Feb 21, 2020
    I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. cricfree sx
  18. Iliyan Bob | Feb 21, 2020

    Very helpful info specifically the last part

    Cleaning Services Ashford

  19. nanny | Feb 21, 2020
    Thanks for the best blog. it was very useful for me.keep sharing such ideas in the future as well.NetShop
  20. nanny | Feb 21, 2020
    Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks.ux design agency
  21. CSC Registration | Feb 21, 2020
    Great information, i was searching of this kind of information, thank you very much for sharing with us. i also like to share some useful links here. can you check it for a second ?? Mobile No Tracker Mobile location Tracker IMEI Tracker Mobile Phone Tracking Best Mobile Number Tracker with Google Map   Avishek
  22. Webroot.com/safe | Feb 21, 2020
    The more we are becoming tech-savvy, the more we need the cybersecurity. It becomes important to remain protected against all the existing and emerging online threats as they can damage your system and can also steal your data. For getting protection, you must need a comprehensive and ultimate security solution. Webroot.com/safe is one such software that can provide world-class security solutions to provide you and your device with outstanding protection Webroot.com/safeWebroot Internet Security Plus
  23. Linksys Router Login | Feb 21, 2020
    The Linksys router web interface is the place where all the router settings are stored for example connectivity, wireless, security, etc. For making changes to the default settings, you need to login to your Linksys router. Also, you can change your router password after signing into your account. Once you have logged in, you will be able to adjust all the available settings according to your preference.Linksys Router LoginExtender.linksys.comLinksys Login Linksys Router Login
  24. Garmin.com/express | Feb 21, 2020
    The software gives you desktop notifications and step-by-step instructions so that you can update your devices with ease. Even if your application is not open or the device is not connected to your system, it will give you alerts on a regular basis. So for garmin.com/express setup, you need to follow all the full-proof steps given below. Garmin.com/express
  25. Garmin Express | Feb 21, 2020
    Garmin Express is an extremely versatile software application available for both Windows and Mac devices. However, you are required to check the specified requirements and ensure your system conforms to it. This is extremely important for flawless setup and unmatched performance.Garmin Express
  26. Hulu Login | Feb 21, 2020
    Entertainment can be more fun with Hulu as here you get access to a world full of your favorite TV shows. Here will get the opportunity to enjoy the latest content that you can stream in any of your devices supporting the app. Get your free trial and access to your device in theHulu LoginHulu Plus LoginHulu Sign InHulu AccountHulu Customer ServiceHulu Phone NumberHulu Activatehulu.com/activatewww.hulu.com/activatewww.hulu.com/accountHulu Login
  27. Beti Bachao Beti Padhao | Feb 21, 2020
  28. Archit Goyal | Feb 21, 2020
    The information you have posted is very useful. I really enjoy reading and also appreciate your work. Please keep inspiring more readers! Read my latest blog: Travel Agency Software Benefits
  29. AMK | Feb 20, 2020
    Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.    Custom Screen Printed T-shirts Bangladesh
  30. nanny | Feb 20, 2020
    Thanks for the best blog. it was very useful for me.keep sharing such ideas in the future as well.backup in cloud
  31. nanny | Feb 20, 2020
    Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks.Soft Large Dog Bed
  32. nanny | Feb 20, 2020
    Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks.Soft Large Dog Bed
  33. nanny | Feb 20, 2020
    Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks.Cute Fishbone Winter Sweater for Cat & Dog
  34. reti | Feb 20, 2020
    Nasi padang Mengapa Nasi Padang Banyak Digemari adalah makanan yang sangat populer di Indonesia. Sejak dulu kala, makanan asal Minang ini menjadi primadona karena menu dan rasanya yang khas. Jadi, gak heran kalau nasi padang Model Trendy Busana Muslimah Cadar Terbaru sangat pas dan cocok nyaris di lidah semua kalangan. Bagi yang tinggal di daerah tropis dengan intensitas Tips Memilih Body Lotion untuk Kulit Kering sinar matahari yang tinggi dapat membuat kulit lebih mudah kering. Anda bisa Jilbab Instant yang Sedang Trend melakukan perawatan Busana Muslimah untuk Acara Kondangan kulit kering dengan menggunakan body lotion. Tukang Taman Jogja, Jasa Taman Jogja Buat / Bikin / Perancang Tukang Taman Jogja Taman dan Kolam Minimalis Murah Provoder Outbound Training di Malang tukang taman Jogja - jasa taman Jogja. Menjadi YouTuber Gaming tentu saja kalian membutuhkan alat pendukung dalam pembuatan videonya, Daftar Peralatan Youtuber Gaming untuk Pemula. judiayambangkok.net maincasinoslotonline.net Digimart.co.id  merupakan Digimart Situs Freelancer Indonesia Terpercaya Marketplace Produk dan Jasa Digital Terpercaya Di Indonesia.
  35. HARRY | Feb 20, 2020
    Everything has its value. Thanks for sharing this informative information with us. GOOD works! zadrot.name/zadrot/brat-i-sestra/
  36. HARRY | Feb 20, 2020
    i was just browsing along and came upon your blog. just wanted to say good blog and this article really helped me. zadrot.name/zadrot/krasotki/
  37. edwar | Feb 19, 2020
    Excellent website you have here, so much cool information!.Can You Run It
  38. patter | Feb 19, 2020
    What a good blog you have here. Please update it more often. This topics is my interest. Thank you. . . sizegenetics
  39. nanny | Feb 19, 2020
    2,Well Drilling is a method used to drill a hole in the ground surface to extract natural resources such as water, natural gas, brine, and injection of fluid from the surface to the subsurface reservoir.water pump service
  40. Asad | Feb 19, 2020
    Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! website Development
  41. biknunurde@enayu.com | Feb 19, 2020
    Pretty good post. I have just stumbled upon your blog and enjoyed reading your blog posts very much. I am looking for new posts to get more precious info. Big thanks for the useful info. faper.online/faper/vk/
  42. HARRY | Feb 19, 2020
    Wow, What an Outstanding post. I found this too much informatics. It is what I was seeking for. I would like to recommend you that please keep sharing such type of info.If possible, Thanks. xxx777.tv/xxx777/mama-i-syn/
  43. HARRY | Feb 19, 2020
    Thank you so much as you have been willing to share information with us. We will forever admire all you have done here because you have made my work as easy as ABC. xxx777.tv/xxx777/iznasilovanie/
  44. HARRY | Feb 19, 2020
    You will find dissertation online sites via internet settle purchase not surprisingly well-known while in the web pages. xxx333.tv/xxx333/kazahskoe/
  45. HARRY | Feb 19, 2020
    I appreciate this article for the well-researched content and excellent wording. I got so interested in this material that I couldn’t stop reading.  Your blog is really impressive. xxx333.tv/xxx333/mama-i-syn/
  46. powder | Feb 19, 2020
    Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part   I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck.why is pop art famous
  47. HARRY | Feb 19, 2020
    This kind of seems totally best. Every one of these little information are manufactured together with lots of backdrop information. I prefer that a whole lot Alaska Background Check
  48. HARRY | Feb 19, 2020
    This really is additionally an excellent publish that we truly loved reading through. It's not daily which i possess the likelihood to determine some thing. Alaska Background Check
  49. HARRY | Feb 19, 2020
    Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include. smart repair Manchester
  50. ZaxZCXVCB | Feb 19, 2020

    Leave a comment