Skip to main content

Get Started

Requirements​

Setup your app environment​

For the purpose of this guide we will use Vite, but your can use your favorite builder instead

#we use pnpm but you can also use npm or yarn
pnpm add -D vite

Then we add Axioroute Package

pnpm add @axioroute-sinari/axioroute-sdk @axioroute-sinari/axioroute-mapviz

Setup your entry files​

Create an html file at index.html with the following content

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axioroute - Get Started</title>
  </head>
  <body>
    <iframe
      id="webview"
      src="http://localhost:5174?author=GetStarted-webview"
      width="100%"
      height="500"
      scrolling="no"
    ></iframe>
    <script type="module" src="/src/index.js"></script>
  </body>
</html>

It's just an empty page with our Map Webview as an iframe

Then create our javascript entry point at src/index.js

src/index.js
/**
 * We import the Class we will need to get our app running
 */
import {
  ARMessage,
  ARRequestClient,
  MPTJobTools,
} from "@axioroute-sinari/axioroute-sdk";

/**
 * We set the Axioroute API base url, the auth url (see pre-requisites) and the api key (see pre-requisites).
 */
ARRequestClient.setApiBaseUrl("<AXIOROUTE_API_URL>");
ARRequestClient.setAuthUrl("<YOUR_AUTH_URL>");
ARRequestClient.setApiKey("<YOUR_API_KEY>");

/**
 * We set the author of the messages sent from this App.
 * It will be used to identify the sender of the message on the receiving side.
 */
ARMessage.setAuthor("app-get-started");

/**
 * We tell our app that we will communicate with the iframe with id "webview"
 */
ARMessage.setDefaultTarget({
  targetWindow: document.getElementById("webview").contentWindow,
});

Start your local HTTP Server​

Add the following line in your package.json file

package.json
{
  //...
  "scripts": {
    "start": "vite"
  }
}

and run

pnpm start

You should see at http://127.0.0.1:5173 the following view:

Map Step 0

Send our first State to the Map Webview​

Now that we have our app up and running, let's add some content to the Map Webview.

We will create a sample Axioroute State describing 3 physical Sites and send it to the Map Webview

add the following block to our src/index.js

src/index.js
/**
 * We define the state of our app with 3 sites inlcuding one depot.
 */
let myState = {
  sites: [
    {
      id: "AXIOROUTE",
      coordinates: {
        longitude: -0.561642,
        latitude: 47.462544,
      },
      isDepot: false,
      entityType: "SITE",
    },
    {
      id: "CJM",
      coordinates: {
        longitude: -0.345602,
        latitude: 48.597481,
      },
      isDepot: false,
      entityType: "SITE",
    },
    {
      id: "SINARI",
      coordinates: {
        longitude: -1.604869,
        latitude: 48.113197,
      },
      isDepot: true,
      entityType: "SITE",
    },
  ],
};

/**
 * We first wait the Map Webview to be ready
 */
await ARMessage.on("MAP_READY", (message) => {
  /**
   * Then we send a message to the Map Webview to render it
   */

  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES", //you'll see later why we have to repeat this field
    payload: myState,
  });
});

You should now see our 3 Sites marked with blue pins

Map Step 1

Add operations to the State​

We will add to Delivery Operations to our current State. One in each of our none depot Sites

Edit src/index.js

src/index.js
let myState = {
  //...
  operations: [
    {
      id: "OPERATION_01",
      type: "DELIVERY",
      idSiteDestination: "AXIOROUTE",
    },
    {
      id: "OPERATION_02",
      type: "DELIVERY",
      idSiteDestination: "CJM",
    },
  ],
  //...
};

Here is our new view:

Map Step 2

Sites icons have been replaced by Operation default icons.
Red is the default Color for Operations that aren't scheduled on a Route yet.
By placing the mouse cursor over an Operation, we can see the Operation's id.

Add a truck to the State​

To make our first request to Axioroute API, we need a state with at least one Vehicle.
Let's add it to our current state.

src/index.js
let myState = {
  //...
  trucks: [
    {
      id: "VEHICLE_01",
      availablePeriods: [
        {
          id: "PERIOD_01",
          timeWindow: {
            start: "2022-11-01T04:30:00.000+01:00",
            end: "2022-11-02T12:00:00.000+01:00",
          },
          departureSite: "SINARI",
          arrivalSite: "SINARI",
        },
      ],
    },
  ],
  //...
};
Note

There is no change to the Map because Vehicles won't be rendered on the Map at this point.

Authenticate to Axioroute API​

add the end of src/index.js add:

src/index.js
const apiClient = ARRequestClient.instance();
await apiClient.auth("<USERNAME>", "<PASSWORD>");
Be cautious

Remember to never leave your username/password in any file when you'll have finished your onboarding.
They should always been pass through user form

Sending our first Request to Axioroute API​

add the end of src/index.js add:

src/index.js
/**
 * We create a MPT Problem from our currentState
 */
const problem1 = MPTJobTools.getProblem(myState);

/**
 * Since we wont get an instant answer to our problem,
 * we will subscribe to an Event warning us the solution has been found and received
 */
apiClient.subscribe("RECEIVED", (request) => {
  //We will create our next State from the previous State
  myState = MPTJobTools.updateState(myState, request.job.solution);

  //and render our new State
  ARMessage.send({
    type: "SET_WEBVIEW_ENTITIES", //you'll see later why we have to repeat this field
    payload: myState,
  });
});

/**
 * At last, we send our MPT Problem to Axioroute API
 */

await apiClient.sendMPTProblem(problem1);

And we should now see our Route starting from our Depot, passing by our two Delivery Sites before returning to the Depot.
Map Step 4