-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathdevelopers.html
More file actions
367 lines (362 loc) · 24.5 KB
/
developers.html
File metadata and controls
367 lines (362 loc) · 24.5 KB
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Document Title
=============================================
-->
<title>Dont-code for developers</title>
<meta name="description" content="Developers area for the Dont-code Low-code, No-code platform.">
<meta name="keywords" content="low-code, no-code, low code, no code, developers, plugin">
<meta name="author" content="Dont-code team">
<!--
Favicons
=============================================
-->
<link rel="apple-touch-icon" sizes="238x133" href="assets/images/favicons/logo.png">
<link rel="icon" type="image/png" sizes="238x133" href="assets/images/favicons/logo.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/images/favicons/logo.png">
<meta name="theme-color" content="#ffffff">
<!-- Seo using Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//collinfr.net/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Seo Code -->
<!--
Stylesheets
=============================================
-->
<!-- Default stylesheets-->
<link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="assets/lib/animate.css/animate.css" rel="stylesheet">
<link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet">
<link href="assets/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/lib/magnific-popup/dist/magnific-popup.css" rel="stylesheet">
<link href="assets/lib/simple-text-rotator/simpletextrotator.css" rel="stylesheet">
<!-- Main stylesheet and color file-->
<link href="assets/css/style.css" rel="stylesheet">
<link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".onpage-navigation" data-offset="60">
<main>
<div class="page-loader">
<div class="loader">Loading...</div>
</div>
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">Dont-code</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="https://dont-code.net/dashboard/repo/default">Apps</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#totop">Developers</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#totop" data-toggle="dropdown">Homepage</a>
</li>
<li><a href="apps-beta.html" >Beta Apps</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Links</a>
<ul class="dropdown-menu">
<li><a href="https://github.com/dont-code" target="_blank">Github (Source)</a></li>
<li><a href="https://angular.io" target="_blank">Angular (Framework)</a></li>
<li><a href="https://nx.dev" target="_blank">Nx (workspace)</a></li>
<li><a href="https://primefaces.org/primeng" target="_blank">Prime-ng (UI Components)</a></li>
<li><a href="https://quarkus.io" target="_blank">Quarkus (Services)</a></li>
<li><a href="https://www.jetbrains.com/idea/" target="_blank">IntelliJ Idea (IDE)</a></li>
<li><a href="https://mongodb.com" target="_blank">MongoDB (Database)</a></li>
<li><a href="https://scaleway.com" target="_blank">Scaleway (Hosting)</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="main">
<section class="module bg-dark-30 about-page-header" data-background="assets/images/developers/developer-bg-violet.png">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1 class="module-title font-alt mb-0">Developing for Dont-code</h1>
</div>
</div>
</div>
</section>
<section class="module">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="font-alt mb-0">Full refactoring !</h2>
<hr class="divider-w mt-10 mb-20">
<a href="https://ng-xtend.dev"><img src="https://ng-xtend.dev/docs/logos/logo-xtend-angular-red-small-transparent.png" alt="ng-xtend framework"/></a>
<p>The core of dont-code has been refactored to use <a href="https://ng-xtend.dev">ng-xtend</a>, the plugin framework for Angular.</p>
<p>All the apps in the <a href="https://dont-code.net/apps/repo/default"> application catalog </a> are now run through the ng-xtend framework.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="font-alt mb-0">Main concepts (Draft)</h2>
<hr class="divider-w mt-10 mb-20">
<p>How Dont-code is bringing value.</p>
Data model is dynamic, let's see with an example
<ul>
<li>Data is dynamic
</li>
<li>Model of data is dynamic
</li>
<li>Meta-model of data is dynamic, as it can be modified by plugin
</li>
</ul>
Plugin system supports 3 types of plugins
<ul>
<li>Type Plugin
</li>
<li>Component Plugin
</li>
<li>Service Plugin
</li>
<li>Soon: Workflow Plugin
</li>
</ul>
Adaptation is at the core thanks to repositories
<ul>
<li>Plugins list
</li>
<li>Plugins customization
</li>
<li>Url customization
</li>
</ul>
Available Environments
<ul>
<li>End 2 end tests environment: Creates new projects on the fly, add data. Can be reset at any time
</li>
<li>Demo environment: Template projects + new projects, specific set of data, use "stable" version of libs
</li>
<li>Company environment: Production Environment (apps & database) specific for a company.
</li>
<li>Company Next environment: Same but using Next (less stable) versions of components and plugins. Uses same database than Company environment.
</li>
</ul>
Installed Setup Details
<table>
<thead>
<th>Environment</th><th>Website</th><th>Repository</th><th>Plugins</th><th>Services</th><th>Databases</th></thead>
<tbody>
<tr>End 2 end test</tr><tr>Github Actions</tr><tr>https://test.dont-code.net/e2e/repository-stable.json</tr><tr>https://run.dont-code.net/plugins/next</tr><tr>https://test.dont-code.net/e2e/project</tr><tr>dontCodeE2eProjects, dontCodeE2eData</tr>
<tr>Demo Environment</tr><tr>https://run.dont-code.net/ide-ui/latest</tr><tr>https://test.dont-code.net/demo/repository-stable.json</tr><tr>https://run.dont-code.net/plugins/latest</tr><tr>https://test.dont-code.net/demo/project</tr><tr>dontCodeDemoProjects, dontCodeDemoData</tr>
<tr>Company Environment</tr><tr>https://run.dont-code.net/ide-ui/latest</tr><tr>https://company-xyz.net/dont-code/repository-stable.json</tr><tr>https://run.dont-code.net/plugins/latest</tr><tr>https://company-xyz.net/dont-code/project</tr><tr>dontCodeCompanyXyzProjects, dontCodeCompanyXyzData</tr>
<tr>Company Next Environment</tr><tr>https://run.dont-code.net/ide-ui/next</tr><tr>https://company-xyz.net/dont-code/repository-next.json</tr><tr>https://run.dont-code.net/plugins/next</tr><tr>https://company-xyz.net/dont-code/project</tr><tr>dontCodeCompanyXyzProjects, dontCodeCompanyXyzData</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="font-alt mb-0">Developing a new Plugin</h2>
<hr class="divider-w mt-10 mb-20">
<p>Steps to develop a new Plugin for the Dont-code Platform [Github](https://github.com/dont-code).</p>
<ul>
<li>Fork from the <a href="https://github.com/dont-code/plugin-seed"><b>Plugin-Seed</b></a> repository, as it provides the basic code to develop a plugin.
The sample plugin in this repository shows how to create a new Field type (Seed) in the Builder and to display it in the Previewer tool.
Make sure in <b>package.json</b> you are importing the latest version of <b>@dontcode/core</b>, <b>@dontcode/plugin-common</b> and <b>@dontcode/sandbox</b> and run <b>npm install</b>.
<p>To keep connection with plugin-seed and benefit from any updates of it, you can set plugin-seed/main as upstream and do a <b>git merge upstream/main --allow-unrelated-histories</b>.
</p>
</li>
<li>In your new repository, remove all reference to Seed in the source code, and change it to your plugin name (let's say plugin-doc)
<ol>
<li>That includes, renaming files like <b>plugin-seed.iml</b> to <b>plugin-doc.iml</b>.</li>
<li>Then you rename your plugin library using nx commands: <b>nx g move --project seed doc</b></li>.
<li>Some other config files will have to be modified as well, for example, in <b>libs/doc/package.json</b>, the library name should be <b>@dontcode/plugin-doc</b> and not @dontcode/doc</li>
</ol>
</li>
<li>Then you want to rename some classes to suit better your plugin name. In libs/report/src/lib, you'll have to modify:
<ol>
<li>First, the <b>declaration/seed-plugin.ts</b> file should be renamed to <b>doc-plugin.ts</b>,</li>
<li>And inside <b>doc-plugin.ts</b>, rename all references, Ids and Sources containing seed to ones with doc</li>
<li>Then all files in <b>seed-field</b> and <b>seeded-entity</b> directories. In the component classes, you must change the selectors from dontcode-seed-xxx to dontcode-doc-xxxxx</li>
<li>In <b>report.module.ts</b>, change the module-id from <b>dontcode-plugin/seed</b> to <b>dontcode-plugin/doc</b>.</li>
<li>Then in <b>plugin-tester/src/assets/dev/template.json</b>, rename the seed field names to doc.</li>
<li>And the cypress test file <b>apps/plugin-tester-e2e/sec/integration/seed.spec.ts</b> should be switched to a better name.</li>
</ol>
</li>
<li>After all these changes, you should have a working plugin that you can test:
<ol>
<li><b>nx run doc:test</b> command should run jest tests successfully</li>
<li><b>nx run plugin-tester-e2e:e2e</b> should run Cypress tests successfully</li>
<li><b>nx run plugin-tester:serve:development</b> should run the application successfully, with the plugin loaded</li>
<li>Fix any error that can occur before continuing.</li>
</ol>
</li>
</ul>
And now you are ready to modify the plugin code to suit your need !
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-light">
<h2 class="font-alt mb-0">Dont-code Platform layers</h2>
<hr class="divider-w mt-10 mb-20">
<p>To enable a user's friendly way to design an application, while supporting high level of customization by plugins, the platform consists of several layers.</p>
<h3 class="font-alt mb-0">Illustration:</h3>
<img src="assets/images/developers/dont-code-layers.png" />
<h3 class="font-alt mb-0">From a bottom-up perspective, one can see:</h3>
<ul>
<li>The Dont-code Platform itself provides functionalities for loading plugins, extending application model, handling events on the model. The core is developed in Typescript and is independent of any libraries, except RxJs. It provides Java mapping as well for server-side development.
</li>
<li>A Plugin developed for Dont-code describes its behavior using the [Extension meta-model](https://github.com/dont-code/core/blob/main/node/libs/core/src/assets/schemas/v1/plugin-config-schema.json). This is read by the Dont-code platform upon loading the plugin, and the changes described in it are applied to the application model.
</li>
<li>Any application designed for the Dont-code is following this [Application meta-model](https://github.com/dont-code/core/blob/main/node/libs/core/src/assets/schemas/v1/dont-code-schema.json). This is basically a json schema that can be modified by plugins. This meta-model is the heart of Dont-code:
</li>
<li>It is used by the Builder to dynamically create questions and get input from the users.
</li>
<li>It is used by the Previewer to select the right user interface component to use.
</li>
<li>It is used to generate events whenever a change the application design changes.
</li>
<li>Plugins provide the User Interface components. Using the Extension meta-model, they register themselves for example to edit or display a particular field type, or complete new screens or workflows, or connect to other systems, and so on... For now, as the Builder is developed in Angular, the components must be compatible, but nothing prevents you from using other frameworks.
</li>
<li>With all these layers at his disposal, the user can design its custom application. The Dont-code framework updates in realtime a json representation of it, compatible with the Application Meta-model enhanced by plugins. This json is saved / loaded as projects.
</li>
<li>When the Previewer loads an application, it checks the description of entities and fields, and it adapts the user interface. The user can then see and edit values that are stored. This becomes the application's data.
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="font-alt mb-0">Project Organization</h2>
<hr class="divider-w mt-10 mb-20">
<p>The framework is organized into multiple repositories in [Github](https://github.com/dont-code).</p>
<ul>
<li><a href="https://github.com/dont-code/core"><b>Core</b></a> is a pure typescript library, deployed in npm as <a href="https://www.npmjs.com/package/@dontcode/core">@dontcode/core.</a>
It provides the common application schema and api to manage an extensible application design platform based on realtime messages.
It only has a dependency to Rxjs, so it can be used with any UI framework.
</li>
<li><a href="https://github.com/dont-code/ide-ui"><b>Ide-ui</b></a> is an Angular application that reads the application schema, potentially extended by plugins, and provides a means for the user to describe their applications based on this schema.
It displays a set of questions, and pushes change messages each time the user make an answer
</li>
<li><a href="https://github.com/dont-code/preview-ui"><b>Preview-ui</b></a> is an Angular application listening to these change messages and showing results in realtime.
It provides as well a debugger page for emulating changes and testing your plugin:
<img src="assets/images/developers/Previewer%20with%20debug%20page.png" alt="Previewer Debug" />
</li>
<li><a href="https://github.com/dont-code/plugins"><b>Plugins</b></a> contains multiple plugins and a common library to support them. You can use this as an example on how to develop plugins for Dont-code.
</li>
<li><a href="https://github.com/dont-code/ide-services"><b>Ide-Services</b></a>
The Ide-ui is connected to these services to push change messages, and this service will store them. For now, it's sending them to the Preview-Service.
Developed in Java / [Quarkus](https://www.quarkus.io)
</li>
<li><a href="https://github.com/dont-code/preview-services"><b>Preview-Services</b></a>
The Preview-ui is connected to these services to receive the change messages. Developed in Java / <a href="https://www.quarkus.io">Quarkus</a>.
</li>
<li><a href="https://github.com/dont-code/project-services"><b>Project-Services</b></a>
Used to list, store and load projects. Developed in Java / <a href="https://www.quarkus.io">Quarkus</a>.
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-light">
<h2 class="font-alt mb-0">Plugin system</h2>
<hr class="divider-w mt-10 mb-20">
<p>Dont-code only provides the core system, with extensive support for plugins. With version 1.0 of the project, one could write a plugin to:</p>
<ul style="list-style-type: none">
<li><i class="fa fa-check-square-o"></i> Adding new types of element to be edited and previewed.
</li>
<li><i class="fa fa-check-square-o"></i> Adding new fields type (address, short text, long text, pdf, who knows ?).
</li>
<li><i class="fa fa-check-square-o"></i> Enhancing existing entities with additional features.
</li>
<li><i class="fa fa-square-o"></i> Enabling queries inside the model (like, pre-filter selectable items).
</li>
<li><i class="fa fa-check-square-o"></i> Provide new Datastorage, extending the server-side storage capabilities.
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="font-alt mb-0">How can I help?</h2>
<hr class="divider-w mt-10 mb-20">
<p>If you believe in this project, there are several ways you could help as all areas needs improvements...
</p>
<ul style="list-style-type: none">
<li><i class="fa fa-square-o"></i> Obviously this website need to be tidied up and maintained.
</li>
<li><i class="fa fa-square-o"></i> The core system is made of complex Typescript with some great technical challenges like the plugins dynamic loading. Applying the <a href="https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/README.md" target="_blank"> angular architect's module federation</a> would greatly improve this part.
</li>
<li><i class="fa fa-square-o"></i> The build pipeline, developed using Github Actions, needs to be streamlined.
</li>
<li><i class="fa fa-square-o"></i> For Angular developers, both the Builder and Previewer need your attention.
</li>
<li><i class="fa fa-square-o"></i> The server-side part in Java / <a href="https://quarkus.io" target="_blank">Quarkus</a> needs to be enhanced. Other server-side implementations can be provided as well.
</li>
<li><i class="fa fa-square-o"></i> Custom plugins can be developed, see the list of possibilities above. For example, a wrapper for user authentication through oauth, or a connector for <a href="https://n8n.io" target="_blank"><b>n8n low-code workflow automation tool</b></a> or an enabler for <a href="https://appwrite.io/" target="_blank"><b>Appwrite backend</b></a>
</li>
<li><i class="fa fa-square-o"></i> A Runtime engine (or a code generator) needs to be written: Right now the Previewer is the runtime engine...
</li>
</ul>
</div>
</div>
</div>
</section>
<hr class="divider-d">
<footer class="footer bg-footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="copyright font-alt">© 2021 <a href="index.html">Dont-code</a>, All Rights Reserved.</p>
</div>
<div class="col-sm-6">
<div class="footer-social-links">Based on the <a href="https://themewagon.com/themes/titan/"><img src="assets/images/favicons/titan-logo.png" style="vertical-align: top;" />itan template. Great stuff guys, you rock!</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<div class="scroll-up"><a href="#totop"><i class="fa fa-angle-double-up"></i></a></div>
</main>
<!--
JavaScripts
=============================================
-->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/lib/wow/dist/wow.js"></script>
<script src="assets/lib/jquery.mb.ytplayer/dist/jquery.mb.YTPlayer.js"></script>
<script src="assets/lib/isotope/dist/isotope.pkgd.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="assets/lib/flexslider/jquery.flexslider.js"></script>
<script src="assets/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="assets/lib/smoothscroll.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="assets/lib/simple-text-rotator/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>