mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2679] Reviewed latest tutorial content (#3371)
* [ADF-2679] Initial review of new tutorial content * [ADF-2679] Reviewed the latest tutorials * [ADF-2679] Initial review of new tutorial content * [ADF-2679] Reviewed the latest tutorials
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
89ede1514b
commit
081f865647
@@ -1,56 +1,74 @@
|
||||
---
|
||||
Level: Basic
|
||||
---
|
||||
|
||||
# Creating your Alfresco JavaScript application
|
||||
|
||||
In this tutorial you are going to see how to create from scratch an application in JavaScript to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services.
|
||||
In this tutorial you will learn how to create an application in JavaScript from scratch to
|
||||
interact with Alfresco. This is a "getting started" task that should enable you to start
|
||||
developing your own JavaScript application on top of Alfresco Content Services or Alfresco
|
||||
Process Services.
|
||||
|
||||
In this tutorial you are going to learn how to develop on top of Alfresco Content Services, but the development on top of Alfresco Process Services follows exactly the same principle.
|
||||
The tutorial uses Alfresco Content Services for demonstration purposes, but development on
|
||||
top of Alfresco Process Services follows exactly the same principles.
|
||||
|
||||
**Note:** The development on top of Alfresco Content Services AND Alfresco Process Services has the only limitation of the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). In this case you might need to proxy your application first.
|
||||
**Note:** You can develop for Alfresco Content Services AND Alfresco Process Services together but
|
||||
with the only limitations introduced by
|
||||
[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). If you want to develop for both
|
||||
services then you might need to proxy your application first.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
The only prerequisite of this tutorial is the availability of an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container. Docker is not the only option you might have for the deployment, but it is the faster we found to focus on the development instead of the environment setup.
|
||||
The only prerequisite of this tutorial is that an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container should be available. Docker is not the only option for deployment,
|
||||
but its simplicity allows us to focus more on the development of the environment setup.
|
||||
|
||||
If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-environment.md).
|
||||
If you don't have an instance of Alfresco Content Services up and running, see
|
||||
[Preparing the development environment](./preparing-the-development-environment.html)
|
||||
to learn how to set it up.
|
||||
|
||||
Only to download the requested libraries, you will need the `npm` client. Also in this case check the [preparation of the development environment](./preparing-environment.md) for further details on how to install it into your development environment.
|
||||
You will need the `npm` client to download the requested Node libraries (also explained in
|
||||
[Preparing the development environment](./preparing-the-development-environment.html)).
|
||||
|
||||
## Creating the JavaScript application
|
||||
|
||||
Assuming that you have your Alfresco Content Services instance up and running at `http://localhost:8082/alfresco`, let's see here how to develop a JavaScript application from scratch. The JavaScript application will be able to interact with Alfresco back-end services using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. This library does not necessarily require to be used into Angular applications, but it is "framework agnostic".
|
||||
Assuming that you have your Alfresco Content Services instance up and running at `http://localhost:8082/alfresco`, let's see here how to develop a JavaScript application from scratch.
|
||||
The JavaScript application will be able to interact with Alfresco back-end services using the
|
||||
[`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. This library does not
|
||||
necessarily have to be used with Angular applications since it is "framework agnostic".
|
||||
|
||||
Before starting with the development of the source code, let's create locally the `my-js-app` folder that will contain the entire JavaScript application.
|
||||
Before starting the development of the source code, create a local folder called `my-js-app`
|
||||
that will contain the entire JavaScript application.
|
||||
|
||||
### Creating the `index.html` file
|
||||
|
||||
Inside the `my-js-app` folder create the `index.html` file with the following content.
|
||||
Inside the `my-js-app` folder, create the `index.html` file with the following content:
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
<script >
|
||||
|
||||
this.alfrescoJsApi = new AlfrescoApi({ provider:'ECM', hostEcm: 'http://localhost:8082/' });
|
||||
|
||||
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
|
||||
alert('API called successfully to login into Alfresco Content Services.');
|
||||
}, function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```html
|
||||
<html>
|
||||
|
||||
As you can see, the content describes a very simple and basic HTML + JavaScript page, containing the source code to login into the Alfresco Content Services at the URL `http://localhost:8082/alfresco`.
|
||||
<head>
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
<script >
|
||||
|
||||
this.alfrescoJsApi = new AlfrescoApi({ provider:'ECM', hostEcm: 'http://localhost:8082/' });
|
||||
|
||||
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
|
||||
alert('API called successfully to login into Alfresco Content Services.');
|
||||
}, function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
As you can see, the content describes a very simple and basic HTML + JavaScript page, containing the source code to log into Alfresco Content Services at the URL `http://localhost:8082/alfresco`.
|
||||
|
||||
All the magic happens because of the inclusion (and use) of the `alfresco-js-api.js` library.
|
||||
|
||||
@@ -60,17 +78,21 @@ To install the `alfresco-js-api.js` library: open a terminal, move into the `my-
|
||||
|
||||
npm install --save alfresco-js-api
|
||||
|
||||
Once launched the command downloads all the several files of the library into the `node_modules` folder.
|
||||
Once launched, the command downloads the numerous files of the library into the `node_modules` folder.
|
||||
|
||||
**Note:** the `npm` execution will create a `package-lock.json` file into the root folder of your project. It won't be used and you can ignore it.
|
||||
**Note:** `npm` will create a `package-lock.json` file into the root folder of your project during
|
||||
execution. This file won't be used and you can safely ignore it.
|
||||
|
||||
Believe it or not, but this is all you need to develop a (very basic) JavaScript application on top of Alfresco Content Services.
|
||||
Believe it or not, this is all you need to develop a (very basic) JavaScript application on top of Alfresco Content Services.
|
||||
|
||||
## Deploying the application
|
||||
|
||||
Now that the JavaScript application is created, the next step is to deploy it into the HTTP Server to be consumed. To avoid the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) issue, for the purpose of this tutorial, the deployment will be done into the same instance of [Apache Tomcat](http://tomcat.apache.org/) used by Alfresco Content Services. If someone won't find this path ideal, this is the fastest way we found to show the results in a tutorial.
|
||||
Now that the JavaScript application is created, the next step is to deploy it to the HTTP Server for
|
||||
use. To avoid the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) issue, for the purpose of this tutorial, the app will be deployed into the same instance of
|
||||
[Apache Tomcat](http://tomcat.apache.org/) used by Alfresco Content Services. This setup is not ideal
|
||||
for production use but it is the fastest way we could find to show the results for the tutorial.
|
||||
|
||||
To deploy the `my-js-app` application into the Alfresco Content Services Docker container, open a terminal and launch the following commands from inside the `my-js-app` folder.
|
||||
To deploy the `my-js-app` application into the Alfresco Content Services Docker container, open a terminal and launch the following commands from inside the `my-js-app` folder:
|
||||
|
||||
// List the active containers into your environment.
|
||||
docker container ls
|
||||
@@ -89,12 +111,16 @@ To deploy the `my-js-app` application into the Alfresco Content Services Docker
|
||||
// Copy the 'my-js-app' folder into the Tomcat's webapps folder.
|
||||
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
|
||||
|
||||
This is all you need to deploy the JavaScript application into the Tomcat instance of the container of Alfresco Content Services.
|
||||
This is all you need to deploy the JavaScript application into the same Tomcat instance as
|
||||
Alfresco Content Services.
|
||||
|
||||
## The JavaScript application in action
|
||||
|
||||
To see the JavaScript application in action, open a browser at `http://localhost:8082/my-js-app` and you should see something like the following screenshot.
|
||||
To see the JavaScript application in action, open a browser at `http://localhost:8082/my-js-app`.
|
||||
You should see something like the following screenshot:
|
||||
|
||||
|
||||
|
||||
Of course this is a very basic example, used to show in practice how to develop from scratch a JavaScript application (not necessarily an Angular application) interacting with Alfresco Back-end Services using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library.
|
||||
Of course this is a very basic example to show how to develop a JavaScript application
|
||||
(not necessarily an Angular application) interacting with Alfresco Back-end Services using
|
||||
the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library.
|
||||
|
||||
Reference in New Issue
Block a user