diff --git a/docs/docassets/images/login_header.png b/docs/docassets/images/login_header.png new file mode 100755 index 0000000000..73b59811f0 Binary files /dev/null and b/docs/docassets/images/login_header.png differ diff --git a/docs/docassets/images/yeoman_creation.png b/docs/docassets/images/yeoman_creation.png new file mode 100644 index 0000000000..2d80684034 Binary files /dev/null and b/docs/docassets/images/yeoman_creation.png differ diff --git a/docs/docassets/images/yeoman_start.png b/docs/docassets/images/yeoman_start.png new file mode 100644 index 0000000000..47300cb18b Binary files /dev/null and b/docs/docassets/images/yeoman_start.png differ diff --git a/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md b/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md index 0d7788ba8a..6d2cbc0870 100644 --- a/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md +++ b/docs/tutorials/creating-javascript-app-using-alfresco-js-api.md @@ -13,9 +13,9 @@ In this tutorial you are going to learn how to develop on top of Alfresco Conten 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). +If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-environment.md). -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. +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. ## Creating the JavaScript application diff --git a/docs/tutorials/creating-the-app-using-yeoman.md b/docs/tutorials/creating-the-app-using-yeoman.md index 7489e826f0..1f0d0097c2 100644 --- a/docs/tutorials/creating-the-app-using-yeoman.md +++ b/docs/tutorials/creating-the-app-using-yeoman.md @@ -1,42 +1,37 @@ --- Level: Basic --- - # Creating your ADF application using Yeoman -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. +In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This is a "getting started" task that should enable you to start developing your own ADF application. ## Prerequisites - -Before proceeding, make sure you have set up the Yeoman generator as described in -[Preparing the development environment](./preparing-the-development-environment.html). You will need -the generator to complete this tutorial successfully. +Before any further task, be sure you executed the optional section described in [the preparation of the development environment](./preparing-environment.html), dedicated to the installation of the ADF Yeoman generator. This is a requested prerequisite to complete this tutorial with success. ## Creating the ADF application - -Creating a new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command. +The creation of a brand new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command. yo alfresco-adf-app -The generator will ask you a few questions as it runs, mainly the name of your app (in this example we -are going to use "myApp") and which blueprint you want to use: +After the execution, the generator asks few questions: mainly the name of your app (in this example we are going to use `myApp`) and which blueprint you want to use. below the picture showing how the wizard looks like. ![yeoman_creation](../docassets/images/yeoman_creation.png) -The following blueprints are available: +You can select one of the three following blueprints. -- **Process Services:** This will generate an application for Alfresco Process Services. The main -components it contains are Login, App List, Task List, Form and Start Process. +**Process Services** -- **Content Services:** This will generate an application for Alfresco Content Services. The main -components it contains are Login, Document List, and Viewer. +This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, Form and Start Process. -- **Process and Content Services:** This will generate an application for both Alfresco Process and -Content Services using a combination of the two blueprints above. +**Content Services** -When you have made your selection, the generator will ask if you want to install dependencies right away. -Type "`Y`" and hit enter. This can take a minute or two depending on your internet connection. You might -see a few warnings at the end like this: +This will generate an application for Alfresco Content Services. It mainly contains the following components: Login, Document List, Viewer. + +**Process and Content Services** + +This will generate an application for both Alfresco Process and Content Services and will be a combination of the two blueprints above. + +Select your preferred one and the generator asks if you want to install dependencies right away. Enter `Y` and hit enter. This can take a minute or two depending on your internet connection. You might see a few warnings at the end like this: npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/core@^5.2.3 but none is installed. You must install peer dependencies yourself. @@ -48,44 +43,33 @@ see a few warnings at the end like this: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) -These warnings are normal. Unfortunately they are not under the ADF team's control (they happen within the -Angular Flex Layout package that ADF depends on) but you can safely ignore them. +These warnings are normal. Unfortunately they happen within the Angular Flex Layout package that ADF depends on. You can safely ignore them. -Once done, you will find a folder named `myApp` containing the new ADF application ready for -development. +Once done, you will find a folder named `myApp` where you can find all the ADF application already created and completed. ## Configuring the application -To configure the ADF application, you only need to point to the correct Alfresco Content Services and/or -Alfresco Process Services, depending on which blueprint you used to create the project. +To configure the ADF application, you only need to point on the correct Alfresco Content Services and Alfresco Process Services, accordingly with the blueprint you decided to use during the creation. -To set up the back-end services correctly, `cd` into the directory of your app (`myApp` in our case) -and open the `proxy.conf.json` file. This file will tell Angular Webpack to create a proxy for your backend -services (Content or Process services). Change the URLs and ports to reflect where these services are -currently running. Below is an example of how the `proxy.conf.json` file should look: +To setup the correct back-end services, change into the directory of your app (`myApp` in our case) and inspect the `proxy.conf.json` file. This file will tell Angular Webpack to create a proxy for your backend (Content or Process services). Change the URLs and ports to reflect where they are currently running. Below an example of how the `proxy.conf.json` file should look like. { - "/alfresco": { - "target": "http://localhost:8080", // <-- Change this! - "secure": false, - "changeOrigin": true - }, - "/activiti-app": { - "target": "http://localhost:9999", // <-- Change this! - "secure": false, - "changeOrigin": true + "/alfresco": { + "target": "http://localhost:8080", // <-- Change this! + "secure": false, + "changeOrigin": true + }, + "/activiti-app": { + "target": "http://localhost:9999", // <-- Change this! + "secure": false, + "changeOrigin": true + } } ## Using the application -Now that your ADF application is correctly configured, you can run it using the `npm start` command from -a terminal (check that you are in the project folder `myApp` before doing this). The execution of the -command takes a couple of seconds, after which the browser will automatically open at -`http://localhost:4200/`. +Now that you ADF application is correctly configured, start it running the `npm start` command from a terminal, double checking you are located into the project folder (in our case `myApp`). The execution of the command takes a couple of seconds and a browser will automatically open at `http://localhost:4200/`. -As you can see from the user interface, the Alfresco ADF application is very basic to begin with. This is -exactly what we need for this example, because it emphasizes the basics rather than complex features that -will be covered in intermediate/expert tutorials to follow. Below is a screenshot of the home page: +As you can see from the user interface, the Alfresco ADF application is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basis, instead of containing complex features that will be part of an intermediate/expert learning path. Below a screenshot of how the home page looks like. ![yeoman_start](../docassets/images/yeoman_start.png) - diff --git a/docs/tutorials/working-with-nodes-api-service.md b/docs/tutorials/working-with-nodes-api-service.md index 3e93b8ee4d..eaf51b4831 100644 --- a/docs/tutorials/working-with-nodes-api-service.md +++ b/docs/tutorials/working-with-nodes-api-service.md @@ -4,7 +4,7 @@ In this tutorial you will learn how to use the [`NodesApiService`](https://githu ## Preparing the development environment -To focus the description on the `NodesApiService`, in this tutorial we are going to develop on top of the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). If you don't have it already installed into your development environment, check the *how-to* description into the [preparation of the development environment](./preparing-the-development-environment.html). +To focus the description on the `NodesApiService`, in this tutorial we are going to develop on top of the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). If you don't have it already installed into your development environment, check the *how-to* description into the [preparation of the development environment](./preparing-environment.html). Assuming that you have the Alfresco Example Content Application up and running, edit the `FileComponent` defined into the `src/app/components/files/files.component.ts` file. Change the `onNodeDoubleClick` method accordingly with the source code below.