Calling Alma APIs using JavaScript MELI – 11.7.2018 Ori Miller, 2018 © 2016 Ex Libris | Confidential & Proprietary Agenda • AJAX • Using JavaScript Library: e.g. jQuery • Demo: Google Chart with Alma Analytics APIs • Same Origin Policy • CORS headers • Proxy via NGINX • Proxy using the website server • JSON vs. XML • Demos: • Updating item record (JSON) • Updating bib record (XML) © 2016 Ex Libris | Confidential & Proprietary 2 Plain JavaScript © 2016 Ex Libris | Confidential & Proprietary 3 Regular JS… • Each Browser might behave differently • Long commands • Different selectors than in CSS • Sometimes different commands than in CSS • OnClick etc. inside the HTML • Hard to figure out if it is accessible © 2016 Ex Libris | Confidential & Proprietary 4 JavaScript libraries • AJILE • Dojo • GWT • JQuery • Microsoft AJAX Library • Mochikit • MooTools • Prototype • qooxdoo • Rialto Toolkit • Rico • Script.aculo.us • Spry • Yahoo! UI Library See: • http://en.wikipedia.org/wiki/JavaScript_library • http://en.wikipedia.org/wiki/List_of_JavaScript_libraries • http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks © 2016 Ex Libris | Confidential & Proprietary 5 Using a JavaScript library <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> $("p#id1").css("margin-bottom","3cm"); © 2016 Ex Libris | Confidential & Proprietary 6 https://jquery.com/ AJAX © 2016 Ex Libris | Confidential & Proprietary 7 https://www.w3schools.com/xml/ajax_intro.asp AJAX © 2016 Ex Libris | Confidential & Proprietary 8 https://www.w3schools.com/xml/ajax_intro.asp Using jQuery to run AJAX © 2016 Ex Libris | Confidential & Proprietary 9 Debugging using the browser • Always use F12 … © 2016 Ex Libris | Confidential & Proprietary 10 Google Charts https://developers.exlibrisgroup.com/blog/Alma-Analytics-Data-in-a-Google-Chart © 2016 Ex Libris | Confidential & Proprietary 11 Same Origin Policy http://en.wikipedia.org/wiki/Same-origin_policy © 2016 Ex Libris | Confidential & Proprietary 12 CORS headers Cross-origin resource sharing © 2016 Ex Libris | Confidential & Proprietary 13 Solutions using CORS • Calling the same server the JS is from, and it will call the API • Calling a proxy server which returns CORS headers • The API to return CORS headers • Alma returns CORS headers only for the Analytics APIs • Why? For the other APIs we don’t want the API-key exposed by mistake. © 2016 Ex Libris | Confidential & Proprietary 14 NGINX configuration ### proxy to Gateway, adding CORS server { listen 5555; server_name proxy_to_gw; location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Origin,Accept,Content-Type'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Origin,Accept,Content-Type'; } proxy_pass https://api-na.hosted.exlibrisgroup.com; proxy_set_header Host $host; proxy_set_header Authorization "apikey l7xx08b23ba160004847a2e95b79ca5d0cf2"; proxy_set_header Accept "application/json"; proxy_set_header X-Real-IP $remote_addr; } } © 2016 Ex Libris | Confidential & Proprietary 15 http://enable-cors.org/server_nginx.html JS calling localhost:5555 © 2016 Ex Libris | Confidential & Proprietary 16 JSON - JavaScript Object Notation Alma’s default is XML. To get JSON use: • Using header: Accept: application/json • Using query-parameter: https://api- na.hosted.exlibrisgroup.com/almaws/v1/conf/general?apikey=l7xx39575714b b6e4d4d911874693dcafb1f&format=json © 2016 Ex Libris | Confidential & Proprietary 17 JSON vs. XML { "user": [ { "primary_id": "11234", <users total_record_count="2"> "first_name": "Dina", "last_name": "Cohen", <user> "gender": { "value": "FEMALE", <primary_id>11234</primary_id> "desc": "Female" <first_name>Dina</first_name> }, <last_name>Cohen</last_name> "status": { <gender desc="Female">FEMALE</gender> "value": "ACTIVE", "desc": "Active" <status desc="Active">ACTIVE</status> } </user> }, { "primary_id": "44123", <user> "first_name": "John", <primary_id>44123</primary_id> "last_name": "Smith", <first_name>John</first_name> "gender": { <last_name>Smith</last_name> "value": "MALE", "desc": "Male" <gender desc="Male">MALE</gender> }, <status desc="Active">ACTIVE</status> "status": { </user> "value": "ACTIVE", "desc": "Active" } </users> } ], "total_record_count": 2 } © 2016 Ex Libris | Confidential & Proprietary 18 JSON vs. XML XML pros: • Displays nicely in browser without plugin • Goes hand in hand with the XSDs JSON pros: • Simple to parse • Now much more popular than XML Alma APIs which work only in XML: • Bib/Holdings (MARC-XML) • Analytics report © 2016 Ex Libris | Confidential & Proprietary 19 PUT with JS • Demo Item-editor – using JSON • Demo Bib-Editor – using XML © 2016 Ex Libris | Confidential & Proprietary 20 Read API error message • xhr.responseText • console.log © 2016 Ex Libris | Confidential & Proprietary 21 Last slide… • Questions? • https://developers.exlibrisgroup.com/blog/Self- Check-Web-Based-Application • Node.js © 2016 Ex Libris | Confidential & Proprietary 22 [email protected] © 2016 Ex Libris | Confidential & Proprietary.