TourOptimizer Angular Demo Application - Source

To utilize JOptTourOptimizer-Docker, we created an Angular-Demo application. This demo application is hosted on Microsoft Azure and is made available via https://demo.dna-evolutions.com. Here we would like to share the latest source-code of this project. This is not a classical "Hello World" project, as it is using multiple dependencies and advanced concepts. However, feel free to explore the project and extract whatever you need to get started with JOpt.

Update January 7th 2024:

From now on, the Angular Demo uses Angular 17. We also updated/upgraded multiple other dependencies. The generated models are using JOpt.TourOptimizer with version 1.2.6 or higher. In addition, a "free moving example" was added. Nodes and Resources can be freely positioned via drag and drop.

Update June 8th 2021:

From now on, the Angular Demo uses our new swagger definition (see swagger.dna-evolutions.com/v3/api-docs/Optimize). This requires using JOpt.TourOptimizer with version 1.0.3 or higher. This swagger definition has the advantage that it enables almost all features of JOpt at the REST-endpoint.

Update 21st September 2021: The replacement described in Update June 2021 is no longer necessary. However, models already created need to be recreated. Further, the legacy endpoint is dropped, and the main-endpoint changed to swagger.dna-evolutions.com/v3/api-docs/Optimize.

---

Contact

If you need any help, please contact us via our company website www.dna-evolutions.com or write an email to info@dna-evolutions.com.

---

Further Documentation and helpful Links

Our content:

• Further documentation - docs.dna-evolutions.com
• Special features - Overview of special features
• Our company website - www.dna-evolutions.com
• Our official repository - public.repo.dna-evolutions.com
• Our official JavaDocs - public.javadoc.dna-evolutions.com
• Our YouTube channel - DNA Tutorials
• Our DockerHub channel - DNA DockerHub
• Our LinkedIn channel - DNA LinkedIn

Third-party:

• Angular CLI
• Open Api Generator
• Generate Angular and Spring code from OpenApi
• Angular Material

---

Overview

• General - DNA Demo Application
• Serve with Docker (recommended)
• Serve without Docker
• Update/Generate the typescript models using OpenApi Generator
• Video - How to use the Demo-Application
• What's next?

---

General - DNA Demo Application

The angular-demo application was generated with Angular CLI version 17.0.3. Further, we utilized OpenApi Generator to automatically create the required TypeScript models from the OpenApi definition provided from our Swagger endpoint of JOptTourOptimizer.

---

Serve with Docker (recommended)

We recommend serving the Demo Application with docker, especially when you are new to Angular. The docker build will install all the required dependencies for you. You can modify the code in your desired IDE and build your custom image.

Prerequisites

1. Install a Docker environment and make sure docker is available in your command line.

2. Even though the Demo-Application needs no TourOptimizer to start, you need to provide a running TourOptimizer instance to test the full functionality of the Demo-Application. Please read the documentation on how to start the TourOptimizer.

Start the image

Please visit https://hub.docker.com/repository/docker/dnaevolutions/jopt_demoapplication/general and follow the instructions if you want to start the pre-built image without using the sources.

Build the image from scratch

1. Clone this repository and open it in your desired IDE (e.g. Visual Studio Code) and modify the code if you like.
2. Build the docker image using the Dockerfile in the main project path, by running:

ATTENTION: Node.js during the build process can be quite memory consuming. So make sure your docker environment has at least 4 GB of Ram.

docker build -t dna_custom_demo_image .

Run a container

1. Run the image based on your freshly created image:

docker run -d --rm \
	--name myJOptTourOptimizerDemo \
	-p 3000:80 \
	-v ${PWD}:/usr/src/app \
	-e JOPT_SWAGGER_HOST="http://localhost" \
	-e JOPT_SWAGGER_PORT="8081" \
	dna_custom_demo_image

Same command as a single line:

docker run -d --rm --name myJOptTourOptimizerDemo -p 3000:80 -v ${PWD}:/usr/src/app -e JOPT_SWAGGER_HOST="http://localhost" -e JOPT_SWAGGER_PORT="8081" dna_custom_demo_image

Open http://localhost:3000, and you should see the Demo Application. If JOptTourOptimizer is not running in the background, you can NOT start any Optimization. However, you should see the starting page of the Demo Application. By default, the TourOptimizer is assumed to be available at http://localhost:8081 and is started with the "cors" profile. You can adjust the default settings for host and port in the environment.ts file.

You can provide three environment variables:

• JOPT_SWAGGER_HOST: The address of your running TourOptimizer. If you run the docker image of the TourOptimizer locally, this is http://localhost.
• JOPT_SWAGGER_PORT: The port of your running TourOptimizer. If you run the docker image of the TourOptimizer locally, this is 8081.
• INPRODUCTION: This value is false by default. If you are changing it to true, our official TourOptimizer endpoint is used by default. However, try to avoid this, as we are going to block IPs with too many requests. Further, our official endpoint has a limitation of 20 elements to be optimized, regardless of your license. You can change the production environment settings by editing the file: environment.prod.ts.

---

Serve without Docker

Of course, you can host the Demo-Application Angular Project locally without using docker. However, you have to make sure your environment is set up correctly.

Prerequisites (for using npm and ng)

1. First, you need to make sure npm (Node Package Manager) is installed.

2. Further, you need to install ng (Angular CLI)

3. Even though the Demo-Application needs no TourOptimizer to start, you need to provide a running TourOptimizer instance to test the full functionality of the Demo-Application. Please read the documentation on how to start the TourOptimizer.

Serve the Demo Application

1. Clone this repository and open it in your desired IDE (e.g. Visual Studio Code) if you like to modify the code.

2. You can serve the project by using ng serve from within the project path.

3. Open http://localhost:5000, and you should see the Demo Application. If JOptTourOptimizer is not running in the background, you can NOT start any Optimization. However, you should see the starting page of the Demo Application. By default, the TourOptimizer is assumed to be available at http://localhost:8081 and is started with the "cors" profile. You can adjust the default settings for host and port in the environment.ts file. The default port, the Demo Application is hosted, is port 5000, you can change this behavior in the angular.json.

(Please also read the Angular Documentation to get further help on how to build projects.)

---

Update/Generate the TypeScript models using OpenApi Generator

If you would like to automatically generate the models based on the latest Swagger API-Docs of the TourOptimizer, you will have to install Openapi-Generator-CLI.

Note: OpenApiGenerator can also be run as Docker container or Maven depedency.

Create a touroptimizer_spec.json file

The touroptimizer_spec.json containing the API-Docs is not part of this repository. Copy and paste the Swagger definition under swagger.dna-evolutions.com/v3/api-docs (or from http://localhost:8081/v3/api-docs or GitHub) into a new file called touroptimizer_spec.json.

Update June 2021:

Native JSON is also supported from now on.

Make the touroptimizer_spec.json available

Within the file package.json of the Demo-Application project, the script npm run generate:api is defined. It expects the touroptimizer_spec.json to be saved at ../openapi/touroptimizer_spec.json. Meaning, you will have to create a new folder called openapi next to your project folder (NOT inside the project folder itself) and save your touroptimizer_spec.json inside the openapi folder.

If this is done, you can call:

npm run generate:api

to update/generate the TypeScript models.

---

Video - How to use the Demo-Application

Click to open video:

What's next?

We are going to publish some tutorials on "how to create your own examples". Further, we are going to give some more insides on the structure of the Demo-Application.

---

TODO's

• Improve in-code documentation.

---

Agreement

For reading our license agreement and for further information about license plans, please visit www.dna-evolutions.com.

---

Authors

A product by dna-evolutions ©