Wiki source code of Community App Developer Guide

Version 33.1 by bougault on 2020/09/03 11:14
Hide last authors
allan 4.3 1 Developers can extend the Collaboratory capabilities by providing applications to its community of users.
allan 1.1 2
allan 4.3 3 This guide describes the steps to make this possible.
allan 1.1 4
5 == Becoming a contributor ==
6
mmorgan 30.1 7 The first step is for you to **get the developer accreditation**. Contributors can register and manage apps within the Community Apps Catalogue.
allan 1.1 8
mmorgan 30.1 9 Send an email to [[support@ebrains.eu>>mailto:support@ebrains.eu]] with a short motivation for your request.
allan 1.1 10
mmorgan 30.1 11 The support team will apply the permissions to your user. Your account will be [[upgraded with developer privileges>>doc:Collabs.collab-devs.collaboratory-v2.keycloak.user administration.WebHome]] the next time you login.
allan 1.1 12
13 (% class="box infomessage" %)
14 (((
mmorgan 30.1 15 Only SGA3 accredited users will be automatically granted the developer accreditation.
allan 1.1 16 )))
17
allan 10.1 18 == Making your app available to users ==
allan 1.1 19
mmorgan 30.1 20 In order for users to install your app, it needs to be registered in the [[Community Apps Catalogue>>doc:Apps.WebHome]].
allan 2.1 21
mmorgan 30.1 22 If you are dealing with private data, or your users need to be authenticated, see [[authentication and authorization in the Collaboratory.>>doc:Collabs.the-collaboratory.Technical documentation.Architecture.Permissions.Authentication & Authorisation using OIDC.WebHome]]
allan 10.1 23
24 === Registering an application in the Catalogue ===
25
allan 21.1 26 Navigate to the catalogue and click on **+Create App** in the top right corner. Enter a name for your app and click on **Create**.
allan 2.1 27
allan 21.1 28 Fill the form with the following information:
allan 9.1 29
mmorgan 30.1 30 * **main URL**: the URL of the homepage of your app. This is where the users will be directed when they open your app in a collab.
31 * **settings URL**: the URL of your app's settings management page, if there is one.
32 * **description**: a description of what your app does. This helps users choose the apps they install.
33 * **under development?**: if checked, your app will not be available to other users.
34 * **category**: a category to help structure the list of apps.
35 * **maintainers**: a list of users who maintain the app. The users need to have logged in the wiki at least once to appear on the list. Maintainers are granted the right to modify the app's registration.
allan 21.1 36 * **documentation URL**: if your app has online user documentation, a link will be provided to users when they use your app.
mmorgan 30.1 37 * **repository**: a URL to a public repository so users can access the source code of your app.
allan 9.1 38
allan 21.1 39 Click on **Save**. Your app is now registered and waiting for users to install it!
allan 9.1 40
allan 21.1 41 === Installing your app in a collab ===
allan 10.1 42
mmorgan 30.1 43 1. In order to install your app, you need to navigate to a collab where you have either the **editor** or **admin** role.
44 1. Click on **Create** at the top right to create a new entry in the navigation pane under the current wiki page. Enter a title for this instance of your app and select **Community App** in the right selector.
45 1. Click on **Create**. You will be presented with the Community App Catalogue. The apps you will see are the public apps and the ones for which you are a maintainer.
allan 21.1 46 1. Select your app and click on **Save and View**.
allan 10.1 47
mmorgan 30.1 48 You should now see your app in your collab just as other users will see it.
allan 10.1 49
allan 11.1 50 == Getting your app instance context ==
51
mmorgan 30.1 52 Instances of your apps will be installed by collab owners in many different collabs. In order to let you customise the user experience based on its context, the Collaboratory will automatically pass query parameters to your app:
allan 11.1 53
allan 22.1 54 * **##clb-collab-id##**: the unique, human-readable identifier of the collab.
mmorgan 30.1 55 * ##**clb-doc-path**##: the (relative) path to your app instance within the collab. If your app is at the root of a collab, this value will be empty.
allan 22.1 56 * ##**clb-doc-name**##: the name of the document where your app instance is installed.
57 * ##**clb-drive-id**##: the unique identifier of the drive of the collab. This id is required if you want to fetch or store documents within the drive of the collab.
allan 11.1 58
allan 22.1 59 == App settings ==
allan 14.1 60
mmorgan 30.1 61 The app settings are the values the collab owners can modify to change the behaviour of your app within their collabs.
allan 14.1 62
63 === Writing settings ===
64
mmorgan 30.1 65 The Collaboratory comes with a mechanism to let your app store its settings directly in the Collaboratory.
allan 14.1 66
mmorgan 31.1 67 In order to do that, your app needs to use the [[postMessage javascript API>>https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage]] to send the settings to be stored in the Collaboratory. The settings are key/value pairs as in the example below.
allan 14.1 68
69 {{code language="javascript"}}
70 window.parent.postMessage({
71 topic: '/clb/community-app/settings',
72 data: {
73 setting1: 'setting 1 value',
74 setting2: 'setting 2 value',
bougault 17.1 75 // ...
bougault 18.1 76 // reload: false // avoid page reload on settings change
allan 26.1 77 }}, 'https://wiki.ebrains.eu');
allan 14.1 78 {{/code}}
79
mmorgan 30.1 80 === Reading settings ===
allan 14.1 81
82 The Collaboratory will get the settings from its key/value store and pass them to your app through query parameters.
83
bougault 33.1 84
85 == Updating parent frame fragment (hash) ==
86
87 The app you are developing might be a single page app that need to handle some routing between views. The Community Apps environment gives you the ability to update the parent frame fragment.
88
89 It uses the [[postMessage javascript API>>https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage]] to communicate from the APP iframe to the wiki (parent) frame.
90
91 {{code language="javascript"}}
92 window.parent.postMessage({
93 topic: '/clb/community-app/hashchange',
94 data: "the_fragment_value"
95 }, 'https://wiki.ebrains.eu');
96 {{/code}}
97
98 If a fragment is present in the parent frame URL, at parent page load time, this fragment is transmitted to the App's iframe.
99
allan 2.1 100 == Creating your OpenID Connect client ==
101
mmorgan 32.1 102 See the instructions [[here>>doc:Collabs.collaboratory-community-apps.Community App Developer Guide.1\. Registering an OIDC client.WebHome]].