AngularJS 1.x how-to implement an API to extend service implementations - javascript

I am working with AngularJS 1.x on a web application which should be extended to provide a sort of API to customize some of its behavior by third-party developers. Obviously these developers cannot modify directly the source code of the application but must use the API I provide to extend it.
I provide you an example of the type of extension I want to provide with the API.
I have a page which displays a form. This form is dynamic and it is described by a JSON. There is an engine in the AngularJS page which read the JSON and render the form. There is also an AngularJS service, let's call it formService, which has the following methods:
getForm: using a REST API, get from the back-end the JSON describing the form structure to be rendered front-end side.
loadData: using a REST API, loads from the back-end the user data to be displayed.
saveData: using a REST API, saves into the back-end the data provided by the user in the form.
I need to provide an API that permits to third-party developers to customize this service. The third-party developer could:
load a different JSON to be displayed in the front-end. He/she can, for example, use a different REST call from the one I provide or build the JSON locally, inside the service.
load a different set of data to be displayed in the form. For example, his/her form could have different fields from the one I provide and so it could need other data.
save different set of data. Same as above.
My question is: how can I provide this kind of extensibility to the app?
The only option I found was to use the AngularJS decorator to let the third-party developer to decorate the formService and provide his/her own version of the methods. In this way the developer can extend or change implementation of specific methods or substitute the whole service implementation.
I made a lot of research and I think this is the best "angular style" solution to extend an existing service from a third party.
Do you know any other good solution to enable third-party developers to customize the behavior of an existing service?

Actually your question is too broad and I dont think your idea is so good in general, but nvm. You can use $injector:
.directive('strangeForm', ...
link : function() {
formCfg = $injector.get(attrs.formService).get();
data = $injector.get(attrs.dataService).get();
onSave = $injector.get(attrs.saveService).onSave;
}
<form strange-form form-service="service1" data-service="service2" save-service="service3"

Related

Wordpress site: What is the flow to get MySQL data as a Javascript variable safely?

I have a Wordpress site and I need to access data from one of my databases in some javascript/jquery.
Conceptually, what is the best way to do this? I considered installing a plugin to allow PHP in the Wordpress "Custom HTML Element", but would that be just as unsafe as accessing the MySQL database with Javascript? Should I make an event handling php script that lives elsewhere?
This will be used for user-specific sensitive data so it needs to be as secure as possible.
Not asking for any code, just not sure what a secure data flow would look like here. Thanks!
WordPress has a handy REST API that's pretty easy to extend. This is exactly what APIs are for in general - accessing data stored on another domain. Remote MySQL connections are totally possible and sometimes necessary, but for simply display a little data, using or building a simple JSON API is often the preferred method.
Depending on what information you're adding/pulling via the API (either the native WP REST API, or custom one), you may want to authenticate the requests with a key of some sort - and it sounds like this is something you'll need to do based on your concerns of viewing data.
Using an API like the WP Rest api lets you get just about any information you want, typically as a JSON string, which you can then display/modify with JavaScript, PHP, etc.

Is there a api or way to hook into SSRS with a MVC application

I know this is a general question, but not sure if I am googling it incorrectly, or if what I am wondering isnot possible. Our compny already has a report server running with many SQL reports on it. I am wanting to see if I can make a front end using MVC and JS to coomunicate with the report server and allow a user to run reportts using a web application MVC interface. Does SSRS allow this type of functionality, or would it be as lame as just calling the URL of each report,and then designing it how ever i would like in my MVC project? So if i add a new report to the report server, i would then have to update the MVC front end project the end users in the company use, to now have the new report. I am hoping there is a way to sort of call the SSRS services, and return reports so i can then use templates or something along those lines in my MVC web app. That way it is dynamically getting the reports from the report server as we build or change it.
So once again, super sorry this is a general question and i have searched google n this from SSRS with MVC to many other combos, but cannot seem to find what i am looking for. I guess in short, does SSRS have a API interface i can use for a MVC front end application to make it nicer, and better public facing for those who will use the report services?
Thanks in advance, and just hoping for some direction on where i can then myself get the answer. No holding hand wishing here. Thanks!
There are a couple ways of doing this, depending on how you want to build your application.
SSRS has a built-in SOAP API. You can easily use a SOAP client package to make requests to the web service, and get back formatted data from your reports. This is the way to do it if you actually want to display the data as HTML.
There are several ways to do this by generating a PDF (I used this approach in building my application). This blog article outlines how to build your own .net endpoint which returns a PDF. You could then call thus custom API from your MVC. You can also just use a query string, depending on the level of customization which is needed.
Obviously I don't know a lot about your particular usecase, but my tendency would be to suggest building a separate API outside of SSRS for you to access. This would add to the security of your application (as you can limit the types of reports generated per user) and limit the overhead of the application in having to interact with SSRS.

is DjangoRestFrameWork really needed for a website

Is it worth it to use DRF+Ajax+bootstrap to build a website where no app is needed, or is it better to stick to the normal django template language without even Ajax? I want to avoid using angular since I don't want things to get complicated.
I want to create a website where a user or an admin logs in and accesses a different set of views and performs different actions.
Sorry for my primitive question, I'm a newbie in web development and Django.
Django REST Framework is only necessary if you're building a RESTful API; An HTTP service that reads and writes data, usually as JSON payloads.
Services are typically created to allow external clients such as mobile apps, single page applications (React, Angular, etc.) or 3rd parties to gain access to your data.
It is not necessary to create a service if you just want a traditional "form-based" web application. What you're describing in your question is totally possible with the standard Django implementation. User logins, user access levels, database access via the ORM and templating are all built in. All without any need for a REST service.
You can always add Django REST Framework later when you know you'll need RESTful services since DRF uses the same models that the normal views do, it just wraps them in serializers.
You can accomplish what you're suggesting easily without any special additions or changes to Django. Just because a certain way of development is popular does not mean it works in every situation.

Sending data SAP Fiori launchpad webapp/SAPUI5 webapp from client side javascript

This is a general question I have as I am exploring the world of automating some tasks in my workplace.
We have a portal/launchpad environment on our businesses website which has apps shown as tiles.
One of these apps when opened has a homepage that has a bunch of search fields and selectors to interface with (I assume) SAP data.
Ultimately my goal is to be able to send a number to a specific search field on a client-side local webapp (just plain old HTML/jquery stuff) and execute a search for that number in the sapui webapp.
I am getting to an competent level with javascript/HTML/CSS but am completely lost as to where to start with this type of issue as the MVC stuff is completely alien to me.
All my experience has been in creating completely client-side web apps with mostly interface with a local MS Access database.
Is what I am suggesting even possible?
So far I can open the homepage by executing the following code that someone else in the organization used:
window.open('https://fiori.mycompany.com/sap/bc/ui5_ui5/sap/z_cs_ch/index.html
Is it possible to add some form of string after a ?.... at the end of the url?
Again I am completely new to this and looking at the development guides in sapui website isn't shedding any light on it either. Possibly because I don't really know exactly what I am looking for!
Any help /guidance is greatly appreciated.
EDIT:
After comments below I can see the request sent to server is in the following format:
Request GET /sap/opu/odata/sap/someotherlocation/SearchTerm('<variable to search for>')?$format=json HTTP/1.1
Am I right in thinking I could potentially send an ajax request to do something similar? If so, how do I go about it?
Thanks again
There are possibilties to achieve that but i think it's not a real good solution, to fill fields in another web application and to trigger the search.
It would be better if you know the backend service which is used by this Fiori App, and to integrate directly the service. If it's an Fiori App i might be an OData /REST Service. Odata/REST Service also can be called by HTML/jquery JavaScript stuff too.
In order to determine the Service URL and the payload which is used by the web app with the search field, just use Chrome Debugger Tools (or other Browser Debug Tools) and check under Network which server address and which payload parameters are sent to the server, when you trigger the search manually. Hope that helps you little bit.
In the whole Fiori concept, it is definitely possible to have applications to call other applications and to get them to open up exactly at the point the user expects it. E.g. from a order click on a product to be brought to the material master, and have the material master app exactly show the product the user clicked on.
As you mentioned, this would indeed require the target application (that is navigated to) to support some parameters. You mentioned in your question already that you wondered if it would be possible to add a "?...." section to the URL. Fiori apps definitely support this concept, but how it is implemented depends very much on the app itself. In my previous example it could be as easy as e.g. adding ?product_id=abcde though.
Fiori also has very nice extensibility concepts built-in. So if your target app doesn't exactly support the parameters you intend to pass, you could easily extend the app to support it, without having to rewrite of copy the entire app (which would be a disaster when you receive updated from the original developer).
To navigate from one Fiori app to the other, it is advised to use the toExternal method of the CrossApplicationNavigation service, which comes with the Fiori launchpad. This service allows you to specify parameters such as the app you'd like to navigate to, the intent (display, create etc), parameters (such as product ID) and a app specific route (e.g. /supplierdetails to see the supplier details of a product).
The CrossApplicationNavigation service is officially documented in the SAPUI5 SDK, but I'm afraid that the SDK doesn't contain a very elaborate description. However, if you Google for it, you'll find extensive information and examples on SCN and Stackoverflow on this topic as well.
As promised here is what I got to work - actually got the overall method from an answer on here somewhere else.
This will send back enough detail that I can at least show the user some updates however after searching around I believe what I really need to be able to do is batch requests... I'm looking into Apache Olingo to see if that's possible.
function orderSmmary(SO) {
var uri = "https://fiori.<company>.com/sap/opu/odata/sap/<environment>/Details('"+ SO + "')?$format=json";
var http_request = new XMLHttpRequest();
http_request.onreadystatechange = function() {
if (http_request.readyState == 4 ) {
var data = JSON.parse(http_request.responseText);
// Do lots of awesome stuff with response
}
}
http_request.open('GET',uri, true);
http_request.setRequestHeader("Authorization", "Negotiate");
http_request.send();
}
Again this is an entirely clientside solution from completely outside any flori environment so I am hoping to stay completely javascript based.

Create a plugin to add my website functionalities on another website

I have a website A with a database and a search engine of some object, user can create account on my website then add comment for these objects.
I need to create an api with something like a plugin, it will result on having the seach engine on another website B.
I have planned to do like fb or twitter plugins : the dev who want to use my api will just need to add a line of js, and a line of html on website B, then it will load the plugin. But I'm wondering how to organize it.
Here it what I've guessed : I create a page on my website A, put the search engin on it. I create a js that will load this page whithin an iframe, on the dev's page (website B), under the div he added to have my plugin. Then I implement OAuth 2 (with a provider and so, so people can do post requests to alter my db), and people who is one the website B will have the ability to post comment on the objects of the search engine on website B.
Actually it seems to be the same as fb comment plugin process, but it seem too complicated to do all that stuff. Is it the right way? Can anyone detail the problems that I should face during implementation?
You need to develop a decent API which can return search result in JSON (and XML if you want to please everyone). That already would offer other developer the ability to use your site functionalities, that's mostly back end work tho. So they can develop their own widget.
To develop your own widget as a search widget you don't need that much, you just need either a set target (maybe a required element) or/and an initialization method (more flexibility for the dev) to which you pass a target.
Bind the search button, grab terms search, call your API and when you get your result display them or/and execute a custom callback pass the result as an argument, flexibility)
If you do your javascript well you can create a little API there too which facilitate the usage of your API via javascript. And then even easily port it to a jQuery plugin or something similar.
When serving JSON always remember to set your headers for your API to allow for crossdomain or go for jsonp instead.
Your question implies an architectural direction, but the requirements are too broad for such a choice. I would narrow down your requirements first. OAuth 2.0 could potentially help satisfy your needs, but ask yourself at least the following:
What user data needs to be protected?
What 3rd-party data access is needed? What functionality?
If you go with OAuth 2.0, are you prepared to follow a spec which is still changing? Are you willing to be the authentication provider?
What server-side languages/platforms are acceptable?
What other security considerations are important to you? (Such as social sharing, level of 3rd-party app trust...)
How much are you willing to rely on 3rd-party tools? Or write your own?
I agree that modeling your design off FB or Twitter or Google is not a bad idea, as they have done this sort of thing.
You might have a look at the new book Getting Started with OAuth 2.0.
Here are two simple ways of making custom search available to users.
The simplest option is to do what Google does - the search on your site would follow a simple, well defined API - so that
www.mysite.com/search?q=keyword1+keyword2
returns a list of results in HTML.
Then you'd tell your users to include a snippet of HTML:
<form action="http://www.mysite.com/search" method="get">
<input name="q" type="text" value="Search">
</form>
That would do, though at this juncture you may want to improve things with better search options, a javascript wrapper for the search form, a JSON or XML format for the data returned, security, a better worked out API that takes all these into account.
Another way is to use javascript and provide the data with a callback facility, so the URL:
www.mysite.com/js-search?q=keyword1+keyword2&callback=someHandle
will return a javascript file containing JSON data and a call to "someHandle" when it is loaded. The developer using your API have to write their own way of making the request and the handler. Bear in mind that because of XSS, the queries would probably come from your partners' servers. The simplest is probably to make your own search offer simple and well-documented so others can exploit it.
OAuth 2 could be helpful just if you would allow the website B to make POST request to the website A in background.
Instead if you want allow the users that visit the website B to post a comment then the iframe with a form that point to the website A is enough.
The easier bet, yet not necessarily the wisest, is to create some JS which calls on your website using JSONP.
iFrames are not W3C standard, try avoiding them if possible. Code a Javascript with some events that will do some JSONP calls into your own server and return the results in Javascript accordingly, so it would be able to interact with the page.

Categories