diff --git a/docs/docassets/images/javascript_app_launch.png b/docs/docassets/images/javascript_app_launch.png new file mode 100755 index 0000000000..cb5d9d540f Binary files /dev/null and b/docs/docassets/images/javascript_app_launch.png differ diff --git a/docs/tutorials/README.md b/docs/tutorials/README.md index 134611b4dd..c3efeffc1c 100644 --- a/docs/tutorials/README.md +++ b/docs/tutorials/README.md @@ -16,6 +16,7 @@ The tutorials are graded as follows: | -- | -- | -- | | [**Preparing the development environment**](preparing-environment.md) | Beginner | This tutorial explains how to get set up to use ADF so you can tackle the other tutorials. It covers the basic development environment with suggested versions for each tool, library and module. | | [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | Learn how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This task is recommended to get started before developing your ADF application. | +| [**Creating your JavaScript application using alfresco-js-api**](creating-javascript-app-using-alfresco-js-api.md) | Basic | Learn how to create from scratch an application in JavaScript to interact with Alfresco Content Services. This task is recommended to get started before developing your JavaScript application using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. | | [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. | | [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. | | [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the Login component. | diff --git a/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md b/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md new file mode 100644 index 0000000000..0d7788ba8a --- /dev/null +++ b/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md @@ -0,0 +1,100 @@ +--- +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 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. + +**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. + +## 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. + +If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-the-development-environment.html). + +Only to download the requested libraries, you will need the `npm` client. Also in this case check the [preparation of the development environment](./preparing-the-development-environment.html) for further details on how to install it into your development environment. + +## 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". + +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. + +### Creating the `index.html` file + +Inside the `my-js-app` folder create the `index.html` file with the following content. + + + +
+ + + + + +