Guide

Aqua-Instalation (1).mp4

Transcription

• Video segment 00:00 - 03:40

1. We will see how to install Aqua and how to use it in a project. 2. Aqua is an open source design system that provides visual and functional standards. 3. Aqua's components and guidelines allow the applications to be harmonized visually and functionally. 4. Prerequisites include having Node version 14.17 installed. 5. It is recommended to use this specific version of Node to ensure the correct functioning of Aqua. 6. The console must be cleaned and the Node version in the project verified. 7. A .npmrc file is needed to authenticate packages and access the organization's private libraries. 8. A link to obtain an authentication token is provided and should be copied to the .npmrc file. 9. Three main libraries must be installed: Masiv Aqua, Oasis System and Oasis Language. 10. Once the libraries are installed, the json package can be accessed to view the configurations.

• Video segment 03:40 - 07:20
• Aqua can only be used within Vue 2 projects. - There is a version of Aqua that can be used in more current versions of Node and in Vue 3. - For now, Aqua can only be used in Vue 2 projects for a proper functioning. - Additional configuration must be made in the viewconfig file to use Aqua in a non-CPA project. - The polyfile dependency must be installed for Aqua to work correctly. - An Aqua component is created using the Aqua components and a snippet. - The Aqua component is called in the project and properties such as color are assigned to it. - Unnecessary code is removed and the project is updated. - The Aqua component is imported into the project and updated. - Aqua component is displayed in the project window.
• Video segment 07:20 - 11:00 In the playground you can see all the Aqua components, as well as the HTML editor and charts - Resources such as icons and illustrations are also found - To use the charts in projects, you must go to the corresponding documentation, install them and follow the process - The Components and charts are different packages - You can review the available components and copy the necessary code - An example of how to copy a banner and customize it is shown - The banner is updated with a more attractive title - The new banner is placed in the list - It is mentioned that you can search for more components depending on the design - A link is left for inquiries about Aqua - All resources used during the tutorial will be included in the documentation.

Aqua is an open source Design System (DS), a collection of repeatable components and a set of standards guiding the use of those components to harmonize products visually and functionally. Aqua consists of working code, design tools & resources, human interface guidelines and an active community that is constantly improving the system.

To know more about Aqua follow this link:

Aqua Design System

Config Steps

To use and install Aqua within a project the developer needs:

1. Node V.14.17: Aqua use 14.17 Node version.

   • IMPORTANT: The developer can use other versions, however this can impact the correct performance of the components and may impact the building process.

2. Create .npmrc: The .npmrc is a configuration file used by the npm located at root, it allows the use of private packages through an Authentication values which are frequently update.

3. Check the active npmrc.

   <aside> ℹ️

   Check the updated token npmrc. in this page:

   Adding token to connect to Azure Artifacts

   </aside>