Creating your first application with ADF

[alfresco]

In this document we are going to describe an introduction of how to create your first responsive application from scratch, using the Alfresco Application Development Framework (from now on named ADF). The Alfresco ADF is provided by Alfresco as Open Source, to build custom applications on top of the Activiti BPM Engine and Alfresco ECM Repository. We won’t introduce here the basis of the Alfresco ADF, because we would like to focus the content on the creation of your first ADF Project. To better describe the tasks, we are going to use “a step by step“ approach, more practical and easy to follow for our goal. If you would prefer to discover other details about ADF, please go through the content listed below.

For further details about the Alfresco ADF, please refer to the alfresco-ng2-components GitHub Project and take a look to the Alfresco Catalog, with a friendly (and technical) overview of all the available components. For requests of support, questions and feedback, don’t forget to participate to the Community of Developers dedicated to the ADF or to the Gitter space dedicated to the Alfresco Angular 4 components.

Creating your first application with Alfresco ADF

Creating your first application with Alfresco ADF is very straightforward, even if you are not an expert into all the requested languages and technologies. Below the complete list of tasks to follow to create your first application with ADF:

1. Service layer setup. In this task you are going to set up Activiti BPM and/or Alfresco ECM as core services for your web application. This task is composed by the sub-tasks listed below.

1.1 Installing Activiti BPM as ADF service layer.

1.1.1 Installing Activiti 1.5.2.1+.

1.1.2 Enabling CORS on Activiti BPM.

1.2 Installing Alfresco ECM as ADF service layer.

1.2.1 Installing Alfresco 5.2+.

1.2.2 Enabling CORS on Alfresco ECM.

1.2.3 Installing REST API Explorer (Optional).

2. Creating an application with ADF. In this task you are going to create your Angular4 application using the Yeoman scaffolder generator.

2.1 Checking the prerequisites into your environment (Node.js).

2.2 Installing Yeoman and the Alfresco App Generator.

2.3 Generating your first Alfresco ADF application.

3. Running and using the application. In this task you are going to run your brand new application for the very first time and to start using it since the beginning.

In each content you can find a “step by step” description of each task, assuming you are familiar with the recent web development principles.

Introduction to the Alfresco ADF architecture

In this introduction, we are going to set up the core services used as basis from your upcoming application. From an architectural point of view, the application created with Alfresco ADF is a front-end layer, completely decoupled from the back-end layer. The back-end layer is defined by a collection of RESTFul based services, as represented in the following picture.

Overview of the architecture of an Alfresco ADF application

In the following content we are going to see how to install and setup Activiti BPM and Alfresco ECM as service layer for an Alfresco ADF application. Before diving deep in the details of the setup, we would like to underline that it is not mandatory to have both the softwares up and running. Depending on your custom application, you could require to have Activiti BPM only or Alfresco ECM only. In our first application we are going to use both, to see in practice an BPM plus ECM use case.

Using the Alfresco ADF v1.1.0 LA, if both Activiti BPM and Alfresco ECM are used, is requested to have the same credentials for the two systems. With “same credentials” we mean the same users available in Activiti and Alfresco, with the same username and password. For this purpose, we suggest to create a new user with Administrator’s permits into Alfresco with username admin@app.activiti.com and admin as password (the default Administrator credentials in Activiti).

Next task >>