menu
Menu
Drakon.Tech logo
Drakon.Tech
Open IDE
DocumentationProgramming in DRAKONTutorialsTutorial 1. Hello world!Tutorial 2. Variables and functionsTutorial 3. Basic flow controlTutorial 4. ChoiceTutorial 5. For each loopTutorial 6. The arrow loopTutorial 7. SilhouetteTutorial 8. Lambdas and exceptionsTutorial 9. ModulesTutorial 10. Concurrent programming with scenariosTutorial 11. Working with source controlExamplesLibrariesThe source code

Tutorial 1. Hello world!

A quick Hello world

This tutorial shows how to build a minimal app in Drakon.Tech. If you want a quick answer, here is what a "Hello world" application looks like in Drakon.Tech.

Hello, World in Drakon.Tech

Hello world step by step

  1. Create a program module in a project.
  2. Add the main function to the module.
  3. Add an Action icon to the main function.
  4. Put this code snippet in the Action icon: console.log("Hello, World!")
  5. Build the project.
  6. Run the project in the browser. See the output in the console in the browser's development tools.

A more detailed explanation

In Drakon.Tech, you can have one or more projects. Each project can contain one or more modules with functions.

Project and modules in Drakon.Tech

Let's create a simple app with a single function.

First, we create a module. Right-click on a project in the tree view and choose Create module.

Create a module in Drakon.Tech

Then, we add a function to the module. Right-click on the module in the tree view and choose Function. Let's call this function main. If a module has a function named main, Drakon.Tech will call this function when the script is loaded.

Create a function in Drakon.Tech

Now it is time to add some code. Let's add an Action icon to the flowchart. You could use a button on the toolbox, but I prefer shortcuts. To add an Action icon, press the "A" key and then click on one of the yellow circles. These circles show where we can insert an icon of the selected type. Then, let's press Enter and start typing code. After having finished typing, press Control+Enter to save the icon.

Hello, World in Drakon.Tech

Let's run the code. Click on the Build button, and Drakon.Tech will give you a link to the page with your JavaScript code.

Build a project in Drakon.Tech

We open the link, go to the console in the browser's development tools, and we see the expected output. Here is what happened. We created a function with the name main; Drakon.Tech generated a JavaScript function main and invoked it when the browser loaded the script.

Hello, World!

Let's open the Sources tab and look at the generated JavaScript file. Here is our main function. Note that main is invoked at the bottom of the script.

// Generated with Drakon.Tech https://drakon.tech/

(function() {
function main() {
    console.log("Hello, World!")
}

main();

})();

If we right-click on the module in the tree view and choose Properties, we will see that by default the module format is "Program."

Module properties in Drakon.Tech

For each program module, Drakon.Tech generates two JavaScript files: one in CommonJS format (index.js) and another for debugging in the browser. The debug file we have already seen in the browser's development tools. To get the Common JS file, right-click on the module in the tree view and choose "Get URL."

Get the URL for the generated code in Drakon.Tech

You can either run the CommonJS variant with Node.js or include it in your build pipeline for the front-end app using Browserify or similar tools.

close
Close
Drakon.Tech logo
Drakon.Tech home
Programming in DRAKONTutorialsExamplesLibrariesThe source code