How to call APIs from my JavaScript application - javascript

I am a 55 yr old novice to API use who grew up in mainframes, scripting, and Wordpress as far as web hosting goes… and I need help. I am stuck because of my lack of knowledge: I can't figure out how to call an API from my application to make embedded checkout work in a headless store - and I want to learn how.
I've exhausted my Google searches and Youtube videos, but since I don't know what to look for when I find it.
To most this is very likely basic, simple and straightforward, for me it's like I'm sitting in a car and have no idea how to turn the engine on.
What I have/know so far:
How to make embedded checkout work:
https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial
and this is where I am lost - I have no idea where to place this code in my vercel & bigcommerce application at
https://github.com/GJB65/commerce1
I humbly acknowledge defeat and would thoroughly appreciate a mentor to help me understand how to turn my embedded checkout engine on.
So the one question I have is "how to call APIs from my application?"

if you're referring to the code on the tutorial as what you're not sure where to place -- These are API requests. To test, you can do make these request via a client (like postman - https://www.postman.com/
) or for most of them, you can make these requests directly on our API reference pages in the Test Request section at the bottom of the page. Like this one here:
https://developer.bigcommerce.com/api-reference/store-management/channels/channels/createchannel
These resources may also be helpful to you in your learning journey!
https://developer.bigcommerce.com/api-docs/storefronts/developers-guide-headless
https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-overview
https://support.bigcommerce.com/s/article/BigCommerce-for-WordPress-Checkout (if you're using WP as your headless storefront)

Related

Thymeleaf or Angular4 with Springboot

I've mostly worked with Springboot framework only with JSP to cover the things I need for the website part. Now, I've got a project to do that mostly revolves, if not all, around the website and I have a couple of questions.
Just to be clear first, I don't have experience either with Thymeleaf or Angular so whichever I pick will be the first time (I think thymeleaf syntax would be easier for me to handle).
Ok so the main goal in my mind is not to render the whole page every time I load data from the backend, so I figure I would have like a header/content/footer parts where every time I click something only the content part would change. Also, I would like the possibility for a loader to show and go away when the content part is changing. This web application will need to be secure for users that register.
I've searched the web to investigate both frameworks, but can not seem to find the right answer so I can continue with my development
I do not mind creating separate REST services in later development if some other platform needs to hook up to the service if I decide to go with Thymeleaf.What do you guys think in what direction should I go, Thymeleaf or Angular? Any help and/or discussion would be much appreciated.
I am sorry if this seems like a general question, but I just need some basic guidelines to start with. Cheers!
I think transitioning to ThymeLeaf is probably going to be the easiest for you, but Angular is a great choice as well, and from there it is up to you. Would you rather use mostly expressions similar to JSTL expressions, but in Spring's SpEL language, then use ThymeLeaf, or would you rather use JavaScript, then use Angular. It just a user's preference for what you are doing.
The fragmenting portion (header, footer, body, etc..) is native to both frameworks. It just depends on which one you want to use. Whatever you go with, to load specific sections while not rendering the others, is going to require AJAX and for you to feel comfortable with how the template frameworks work.
I would suggest reading up on both of them to figure out which one you feel more comfortable with.
Angular
Thymeleaf
Both of them have great documentation for beginners and the Baeldung and Mkyong have good walkthrus for ThymeLeaf. Angular's documentation I found good enough on its own.
For a loader, you can do with simple CSS and JS. There is a ton of demos out there on how to do full screen loaders and how to turn them on or off with JS or CSS. IHateTomatoes has a good article about how to build a full screen loader, that has a No JS fallback option and should give you a good starting point.
Your point about it needing to be secure is a whole other monster. I would look into Spring Security. It's relatively straightforward, especially when using Spring Boot. If you want it can control the users session and assist in preventing session jacking, add CSRF to prevent cross site forgery, control permissions to urls and on down the line, or not. It all just depends.
Either way, don't randomly stab at security, it will end up in something that you feel is secure but it is not, which leaves you and your users in a very bad spot. Again, Baeldung has a great walkthru on the user registration and login process that can help get you started with Spring security and how to tie everything together.
Pretty high level answer, but hopefully gave you some good starting points and some resources.
Build apps decoupling frontend from the backend.
Always build apps following the "The API-first approach"
The API-first approach involves setting up the foundation of your app, which is the application programming interface
For me the differences between Thymeleaf and Angular:
Using Thymeleaf: You don't need to create Restful/web service endpoints on your frontend side because you just need to make calls to the backend from the frontend itself.
Using Angular: Besides of your Restful/ web service endpoints on your backend side, you have to build Restful/ web services endpoints on your frontend side because you don't want to expose direct access from Javascript code to the backend.
Hope this helps and happy coding time!

Studying alternatives: integrate SCORM and LMS without frames

I would like to know more about SCORM.
Ive beeing studying moodle module and the SCORM.com documentation but im not arriving to an aproach myself. As far i can tell steps are:
Upload to LMS a SCORM package
Develop a player that contains some controlls to browse the package
Provide a javascript API, called API for SCORM1.2 and API_1484_11 for SCORM2004. Implement then "at least" some basic calls to the API: Terminate, Commit, Intialize, etc. These functions will be called from the packet.
On the player open the package using a frame. ¿Any alternative?
Ive done this all but im not able to make it work. Im just writing this to make sure these are the correct steps for an LMS-SCORM integration.
So, basically my situation is that by the point of view of an LMS, how to show the packet without frames, and how to retrieve data from packets using PHP and javascript.
Maybe im pretending too much but better thing would be to make all types of SCORM packets to work.
Thanks all in advance!
Those are the basic steps, but the devil is in the details. It isn't really enough to only implement '"at least" some basic calls' unless you are producing all of the content that you will play. This is because you can't really know which of the runtime API calls will be made by a given piece of content. Also note that SCORM2004 has a whole sequencing implementation that is needed in order for the course to display and load the proper SCOs, etc.
Generally you can't really implement SCORM without frames (iframes do work), short of popping up new windows for all content which isn't ideal. This is because there is a pre-defined search algorithm the content will be using to locate the SCORM JS API(s) and that algorithm is designed to walk the tree of windows in the browser to locate it. Without frames (or separate windows) this algorithm won't work.
As far as the data, the "packet" (or SCO) is communicating via the JS runtime API so the data is being provided to the player via those calls. It is up to the implementer to decide what to do with that data so that the LMS can make use of it.
Writing a SCORM implementation, particularly a 2004 one, is a non-trivial pursuit.

Creating a printable/downloadable PDF of a web application

I have been searching for an answer to this problem now for several weeks. I also previously tried to research this a few years ago to no avail.
Problem Summary:
My company has developed a web-based data analytics suite for a major beverage distributor. They have recently asked for a feature that allows the user to print or download a visually pleasing version of the rendered app as a PDF. I have had no luck in finding a solid, controllable, or reliable method to do this. I was hoping the stack community might be able to point me in the right direction.
Current Tech Stack:
Plack servers
Perl base on the Dancer framework
Standard web dev front-ends: HTML5, CSS3, Javascript, Jquery/UI
Client is using IE9/10 and Chrome.
Attempted Solutions Summary:
Obviously I started with the window.print() and tried to control what printed using classes and a specialized print.css but the output was still awful.
I looked in to pdfmachine and pdfbox and even contacted Adobe's acrobat development team directly to see if they had an out of the box solution our company could purchase. I was informed that such a product would be counter intuitive to their desired business model of putting an acrobat subscription on each client computer rather than a single server side application.
I have extensively searched the stack articles but did not feel that the articles I found covered what I was looking for.
At present, I am all out of ideas and am hoping somebody out there has had better luck at this than I have.
tl;dr = I need a pdf version of the rendered output of a complex reporting app.
Thanks for your time stack, I appreciate it.
A solution I have used in the past is to use PhantomJS running on a server to generate the PDF for download/email. Usually if the content is sensitive the server (that handles authentication) would provide a single use viewing token that is then passed to a PhantomJS process. It loads the URL with the viewing token then saves as a PDF.
Further info on Phantoms screen cap API can be found here on GitHub.
https://github.com/ariya/phantomjs/wiki/Screen-Capture
Is it something you can create in Perl using PDF::API2 or PDF::Create? You can load and modify and existing PDF (handy if you want standard headers and footers), and then insert the relevant content. The learning curve can be a bit steep, but simple reports should be easy enough.
See PDF::TextBlock and PDF::Table too - they are great little helpers.
Consider this service http://pdfmyurl.com/ . I try to use many perl modules, but they dont satisfy my problems.

Unable to see complete scraped web page in Google Apps Script logs

A few weeks ago I started learning Javascript and the Google Apps Script API, specifically in regard to spreadsheets. I have been trying to make a spreadsheet that fetches web pages and pulls stats about my friends for the game League of Legends. However, I have been running into a problem with the site I want to use, which is basically the only free LoL stats site that updates frequently. I'm not familiar at all with web development, but it seems when I try to access a page on lolking.net, for example http://www.lolking.net/summoner/na/60783 with Google's UrlFetchApp.fetch() it does not load the dynamic page. So instead of the final source, I get this which doesn't help me. Is there an easy way around this or would I simply have to use another website?
Thanks for thie info! Although it turns out I was mistaken. The UrlFetchApp was indeed returning the full source code, but I was using GAS's Logger to view the text. It seems the Logger has a length limit, so when I searched for the stats I wanted they weren't there simply because the source code got truncated. So, due to an oversight on my part, I never had a problem in the first place. For other people reading this question, in the end I have no idea how UrlFetchApp works with dynamic pages using clientside js (you'd probably want to talk to the poster below or post a new question).
You are getting fhe raw html page with clientside js included. That wont work from any system not just gas. You need to debug that page js and find where it does an ajax call to get the data you want.
Then do the same from your gas. Might not work if the call is authenticated etc.

Tell me why I shouldn't do this: Sinatra API with Full JS/HTML Frontend

I'm about to be designing a social website that must be able to handle a high volume of users.
Here's how I want to design it:
Sinatra on the backend with a full REST api to do all of the operations on the website
JQuery/HTML front end web app that communicates exclusively with the REST API
In this way, I only have to make one central API that other apps (iPhone, Android) app will communicate with.
Also, it seems like it will be less load on the server, since the server only has to serve the minimum amount of info and everything else is done client side.
How come more sites aren't done this way?
Why wouldn't I want to do this? It seems like a good idea to me...
Because it is fragile and search engines won't index your content.
37signals are working on a framework called Cinco for this kind of architecture:
http://thinkvitamin.com/code/javascript/37signals-cinco-framework-to-be-open-sourced/
But if you stick to just jQuery I think you'd miss a lot things you take for granted when using a framework, which you might have to re-implement. But it really depends on your app.
It's not too hard to get basic functionality without JS, and after add Ajax stuff to your application. For example - you can create your API to respond as plain html markup and to respond JSON.
I like idea to do all stuff around API with JS\ajax, it maybe easy and more elegant with new technologies, it giving you more capabilites, but even google can't indexing full ajax sites now.
Read:
http://www.google.com/support/webmasters/bin/answer.py?answer=81766

Categories

Resources