Building an Application for WebPortal is made easy using web technologies, indeed Apps runs in an iframe in the embedded browser!

Head Unit version: remember that they are 2 different version of the vehicle head unit, they are not providing the same vehicle APIs. However this tutorial explains how to build hybrid Apps.

Don’t work alone!

You will need to contact Stellantis Team in order to develop and deploy your Apps on WebPortal, so you should start by doing so! App need to be validated before publication. The team will be able to help you with questions you might have ;)

App Structure & Package

This tutorial will guide you through the creation of your Application. You can also download this demo App as an example.

     Download demo App

This is the file structure your application should use:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

app_<appId>-v<X.Y.Z>_<YYYYMMDD>.md5
app_<appId>-vX.Y.Z_YYYYMMDD.tar.gz
│
└───web/
    └───apps/
    │   └───<appId>/
    │       │   info.json
    │       │   index.html (webportal is a single page app)
    │       │   main.js
    │       │   main.css
    │       │   
    │       └───js/
    │       │      other.js
    │       │
    │       └───css/
    │       │      other.css
    │       │
    │       └───icons/
    │       │      icon-<brand>-100x100.png  (v1 SD screens)
    │       │      icon-<brand>-136x136.png  (v1 HD screens)
    │       │      icon-ds-160x160.png       (v2 DS only)
    │       │      icon-citroen-190x190.png  (v2 Citroën only)
    │       │      icon-<brand>-128x128.png  (v2 all other brands)
    │       │
    │       └───img/
    │              asset.png
    │
    └───media/
        └───<appId>/
               audio.mp3
               art.jpg

In order to deliver an App, please submit the following package to Stellantis for us to check its behavior before actually deploying it, see App validation. The file structure should follow these requirements:

App loading: Optimize your code and consider minification, heavy App means long downloading time.

App manifest

The Application package should contain a manifest info.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "artifactId": "<appid>",
  "name": "<appname (optional)>",
  "description": "<appdescription (optional)>",
  "version": "X.Y.Z",
  "buildDate": "YYYY-MM-DD HH:mm",
  "icons": {
    /* Brand specific icon (optionnal)
     "<brand-code>": {
       "100": "icon/icon-<brand>-100x100.png", 
       "136": "icon/icon-<brand>-136x136.png", 
       "160": "icon/icon-<brand>-160x160.png", 
       "190": "icon/icon-<brand>-190x190.png", 
       "128": "icon/icon-<brand>-128x128.png", 
    }, */
    // Default icon
    "*": {
      "100": "icon/icon-100x100.png", // (v1 SD screens)
      "136": "icon/icon-136x136.png", // (v1 HD screens)
      "160": "icon/icon-160x160.png", // (v2 DS only)
      "190": "icon/icon-190x190.png", // (v2 Citroën only)
      "128": "icon/icon-128x128.png", // (v2 all other brands)
    },
}

Where <brand-code>:

Naming and md5 file

Example

For a package:

Package name will be: app_demoApp_v1.2.6_20220117.tar.gz, and MD5 file content could be:

1
2

098f6bcd4621d373cade4e832627b4f6 app_demoApp_v1.2.6_20220117.tar.gz

HTML (index.html)

The HTML part of your App is located in the index.html file.

Webportal Apps being Single Page Application, this file is the only html file in the project, you should not use hyperlinks to browse another html file in your App. In order to make the content of your App dynamic, use javascript.

jQuery v1.10.0 library is used for webportal purpose and available offline for App development.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
    <meta charset="UTF-8">
    <head>
      <!-- STYLES -->
      <link rel="stylesheet" type="text/css" href="css/main.css">
      <!-- SCRIPTS -->
      <script type="text/javascript" src="/shared/libs/jquery/1.10.0/jquery.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
      <div id="my-app">
          Hello World!
      </div>
    </body>
</html>

CSS (main.css)

CSS file should manage your App style. Using media query it’s possible to target a specific head unit platform.

CSS Version: Webportal v1 supports CSS2 which does not include features like flex box. WebPortal v2 supports CSS3 but you might want to stick to CSS2 if you are building a hybrid Application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* All devices */
#my-app {
    color: blue;
}

/* Only for Webportal v1 SD*/
@media(max-width:1000px){
}

/* Only for Webportal v1 HD*/
@media(min-width:1000px) and (max-width:1500px){
}

/* Only for Webportal v2*/
@media(min-width:1500px){
}

JavaScript (main.js)

Here is the minimum JavaScript code for your application to function properly.

JS Version: Webportal v1 only supports ES5, WebPortal v2 supports ES6. Check-out demo app for an example of hybrid application.

1
2
3
4
5
6

// You should execute javascript only when the DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  
  
});

Vehicle APIs