The AppEngine is offline because frankly, I need the resources (CPU and Memory) to run other projects. And to be honest, this project has been dead for more than a year. It has been fun fiddling with these concepts and creating a serverless platform.

The AppEngine has a successor Tracepaper by Draftsman, it has another design philosophy you can read all about it here.

Community-driven

Om de informatie zo compleet mogelijk te krijgen is de meeste tekst op deze site bewerkbaar

Een changelog wordt bijgehouden op Github

Mark Down

Voor de tekstopmaak wordt er gebruik gemaakt van Markdown om het bijdragen aan de informatie verzameling zo laag drempelig mogelijk te houden.

Overzicht

Dit is de hoofdpagina van deze website, hier vind je een overzicht van alle revue's welke je toegang geeft tot de informatie wat hier boven beschreven is.

De Aelser Revue viert volgend jaar zijn 44 jarige jubileum, zelf speel ik ook al een aantal jaren met veel plezier mee. De eerste keer is zelfs bijna 20 jaar geleden... Terwijl ik dit schrijf voel ik me toch een tikkeltje oud.
Maar daar gaat het niet om, in al die jaren zijn uiteraard ook een hoop foto's, video's en programma boekjes gemaakt.
Zelf kreeg ik een tijd geleden een harde schijf in handen waar bijna 300 gigabyte aan beeld materiaal op stond, met de vraag of ik een backup kon maken aangezien het digitaliseren erg veel werk was (en de schijf was al eens kapot gegaan en de persoon in kwestie had echt geen zin om het een derde keer te doen).

Gelukkig heb je anno 2020 niet perse een fysieke harde schijf nodig, en al snel stonden de bestanden veilig in de "cloud". Maar in principe is dat het zelfde als een harde schijf en net zo nutteloos. Wat heeft het voor zin als de bestanden ergens op een server staan weg te stoffen, en als iemand iets terug wil zoeken?
Moet hij dan 300gb gaan downloaden en erdoorheen gaan spitten? Nee, in 2020 bouwen we dan een website:

Het Aelser Revue Archief

Na vele avondjes knutselen is het dan ook een heuse webapplicatie geworden met het doel alle informatie gestructureerd en zoek-baar aan te bieden. En belangrijker nog, om een community-driven element erin te brengen

Mijn naam is Bo Hanssen, ik ben drieëndertig jaar  oud op moment van schrijven, gelukkig getrouwd en trotse vader van een vierjarige dochter. Het is bijna tien jaar geleden dat ik hobby matig ben gaan programmeren (toentertijd nog in Python) en na m'n studie heb ik dan ook de stoute schoenen aangetrokken en heb er mijn beroep van gemaakt.
In vijf jaar tijd heb ik mij ontwikkeld van louter python developer naar zoals ik het zelf graag noem "techniek agnostische engineer" python, java, docker, integrations noem het maar op, als ik het niet ken dan leer ik het wel (mits het een doel dient.)
Overdag ben ik Solution Architect / DevOps engineer voor het Generieke Pensioen Systeem van APG, en hoewel dit een hele interessante omgeving is waar ik iedere dag nieuwe dingen leer, is dit systeem niet als greenfield te bestempelen. Om m'n technische nieuwsgierigheid te voeden wil je ook wel eens buiten de lijntjes kleuren, move fast and break stuff. In een hobby project kun je dingen proberen die niet zo goed samen gaan met company policy of waarvan je op het werk zegt ik ken iemand die dat sneller en beter kan dan ik.
Uiteindelijk krijg ik alles "aan de gang"  maar als het bedrijfskritisch is moet je dat niet altijd willen.

Mijn blog is een verzameling hobby projecten (als ze het delen waard zijn) en aanverwante of minder aanverwante zaken.

Links

Met betrekking tot mijn werk heb ik een andere site The Distributed Architect waar ik mijn ideeën deel met betrekking tot IT Architectuur en Agility.

En hier vind je mijn web cv, want een nerd heeft uiteraard een HTML pagina als cv ;) als je standaard formaat prefereert heb ik ook een LinkedIn profiel.

The D2O app engine is kinda like an ultra-light Framework as a Service (FAAS) it helps develop small web applications.

Why

Read about the why.

Architecture and Design

If you want to know more about the design check the architecture post.

App Gallery

The App Gallery is a showcase off all released projects, it displays a short summary of each project and has links to the application and documentation. Take a look at the feature demos in the app gallery. Open the App Gallery

IDE

The IDE stands for "Integrated Development Environment" at the moment it only contains the bare essentials to create, edit and manage your projects. Read more about the IDE

Dashboard

The Dashboard gives you insight in application metrics / logging / authorizations and db documents. Open dashboard

Framework

The framework is a series of javascript and python modules helping you with the client-server communiction and enabeling you to focus on the application logic. Read more about the Framework

Getting started

Build a simple To-Do application to familiarize yourself with the platform & framework: Getting Started

Test user

There is a test user available in case you need a second account during testing. This user has no developer priveliges on the platform.

User name: testuser
Super secret password: testuser

Intro

In this guide we are going to build our first webapplication.

1. Create an account on the App Engine

Background

Read the 2 posts Integrated Development Environment & Standard Framework Modules

Python

In case you never programmed before, there are lots of beginner courses available online.

Javascript

I myself prefere using a Javascript Library in favor of plain javascript, I'm a big fan of jQuery it makes the javascript less verbose
and in my opinion easier.

Feel free to use other tools or frameworks when building your apps.
I am aware jQuery is not the bleeding edge in javascript frameworks, because I'm more backend oriented I choose to stick with what I know. Here you can find some other options if you like to dive into the new: Top JavaScript Libraries and Trends for 2018
Here you can find a tutorial in case you prefer plain Javascript.

Bootstrap

I recomend using Bootstrap for building the front end. But feel free to use other tools or frameworks when building your apps.

Start your first project

1. Open up the IDE.
2. Click the "Start Project" button.
3. In the opened "Create New project" modal:

3.1. Choose a unique project key
3.2. Pick the project to clone from

1. Open the new project with the project selector in the top right corner of the screen.

Backend

Define your datamodel (Model)

For this simple application we need to define 1 Model Class, lets call it 'Task' in this task object we are going to map various fields.

FieldnametypepurposeidStringunique identifieruserStringto correlate tasks to userscompletedbooleanto determine if task is completed or notdetailsStringdescription of the task

1. Open the model dropdown and right-click the 'User' model & rename to 'Task'.
2. In the newly opened document rename the Python class to 'Task'.
3. Use the MongoEngine documentation as a reference
4. Add the 3 fields to the document class

Show answer

Write your business logic (Controller)

For our application we need the following functions:

FunctionPurposeInput variablesReturncreateTaskinstantiate a new task object to the databaseUserID & Task detailsTask ObjectgetTaskget a task by idTask idTask ObjectgetTasksget a list of tasks by userUserIDList containing Task ObjectstoggleCompletedtoggle the completed boolean true/falseTask idTask ObjectdeleteTaskremove a completed taskTask idTask Object

1. Open the Library dropdown and delete the userLib module, we don't need it.
2. Create a new library module named 'TaskService' & implement the required functions.

Show answer

Write procedures accessible over http (View)

In the procedures we:

1. extract the required information from the user request.
2. invoke the apropiate controller function.
3. construct a JSON serializable response.

We start with removing the count procedure from the starter project, after that we implement the following procedures:

FunctionInput variablesReturncreateTaskUserID & Task detailsTask ObjectgetTasksUserIDList containing Task ObjectstoggleCompletedTask idTask ObjectdeleteTaskTask idSucceeded true/false

1. Show answer: createTask
2. Show answer: getTask
3. Show answer: toggleCompleted
4. Show answer: deleteTask

Frontend

Javascript

Now we have to invoke the 4 procedures from the client side therefore we are going to implement 4 javascript functions.
Open the main.js script and delete all contents.

Show answer

Index.html

Index.html is the actual html page that represents your userinterface and binds together your HTML, CSS & Javascript.
Show answer

The framework is a series of javascript and python modules helping you with the client-server communiction and enabeling you to focus on the application logic.

Javascript (client-side)

HTTP

Import the module:

<script src="/js/framework/HTTP.D2O.js"></script>

With the HTTP module loaded in your index head sectiont the following functionality is available in your javascript modules.

// HTTP.get & HTTP.post

HTTP.get("{procedure.name}/{var_1}/{var_n}",callback,query_parameters)

/* procedure.name = The module name (procedure) that should be triggered server side
 * {var_n} = Path variables or uri variables (Optional)
 * query_parameters = A dictionary that is added to the request url as query_parameters -> https:/uri/uri/?key=value&key2=value2 (Optional)
 * callback = A javascript function that should be triggerd on the response e.g.
 */

query_parameters = {
  'key' : 'value'
}
function callback(data){
  console.log(data);
}

HTTP.post("{procedure.name}/{var_1}/{var_n}",callback,body,query_parameters)
/* Same variables as the get method with the added:
 * body = Data to be send to server (JSON serializable)
 */

STOMP

Wat is STOMP
Import the module:

<script src="/js/framework/STOMP.D2O.js"></script>

With the STOMP module loaded in your index head sectiont the following functionality is available in your javascript modules.

STOMP.connect();
// Connect to D2O STOMP message broker, should be executed only once

STOMP.postconnect = function(){
  console.log("Connected");
}
// Optional, add a function to be executed after the connection is established

STOMP.subscribe('{queueName}',onMessage);
// Subscribe on a queue dedicated for the current user and callback onMessage e.g.
function onMessage(data){
  console.log(data);
}

STOMP.subscribeTopic("{topicName}", onMessage);
// Subscribe on topic (broadcast) and callback onMessage

STOMP.disconect();
// Disconect from d@O STOMP message broker

STOMP.predisconnect = function(){
  console.log();
}
// Optional, add a function to be executed just before the connection is closed by client

STOMP.SEND("{procedure.name}",request);
// procedure.name = The module name (procedure) that should be triggered server side
// Data to be send to server (JSON serializable)

SplashScreen (Bootstrap only)

Adds a splashscreen automatically,  the splashsreen fills the entire page and will disapear when the python node is up and running.

<script src="/js/framework/splashscreen.js"></script>

This module is optional and can be easily implemented yourself if you require customization, just take a peek

Notify.js

Add module notify.js (optional)

<script src="/js/framework/notify.js"></script>

Alert

Add module alert (optional)

<script src="/js/framework/alert.js"></script>

Python (server-side)

Procedure

A python procedure can be triggered by HTTP (synchronous) or STOMP (asynchronous), it is executed as a script and has the following variables and functions

Variables

• userID = A String containing the requestor username.
• request = A Python dictionary containing the request data
• response = A python dictionary inwhere the response data can be stored

Functions

Logger

There are 5 log levels, all accept a single string as input, optionally you can use concatanation, formatting or  advanced formatting to create the log message.

# Trace logging accepts a string
logger.trace("message as a string")

# Debug logging, optionally use string formatting 
logger.debug("message as %s string" % 1)

# Info logging, optionally use string formatting 
logger.info("message as %s %s" % (1, "string"))

# Warning logging, optionally use string concatanation
logger.warn("message: " + "Hello World!")

# Error logging
logger.error("message")

STOMP

Wat is STOMP
Queues & Topics

# Push data to requestor
stomp.push("queuename",data)

# Push data to specific user
stomp.pushToUser("queuename",data,userName)

# Broadcast data to topic
stomp.topic("topicname",data)

Take a look at the chat demo to see an example using STOMP.

Library Code

all modules defined in the library section are available.

Example

logger.info("User [%s] send in request [%s]" % (userID,request))

# If HTTP call
response["Hello"] = "World!"

# If stomp call
stomp.push("foobar",{"Hello" : "World!"})

Library

Here you can define your standard libray files they should be stateless, so only root level functions and no global variables.
All functions defined in these files are available in the procedures, so make sure their names are unique e.g. define your library as
classes with static methods. Take a look at the getting started tutorial.

Example

Example from the demo: chat

from models import *
import time

class UserService:
  def getUser(name):
    user = User.objects(name=name).first()
    if user == None:
      user = User(name=name)
      user.save()
      logger.info("Saved user %s" % name)        
    return user 

  def setOnline(name):
    user = UserService.getUser(name)
    user.stamp = time.time()
    user.save()

  def updateStatus():
    exp = time.time() - 35
    users = []
    for user in User.objects:
      if user.stamp < exp:
        user.online = False
      else:
        user.online = True
      user.save()
      users.append({
          "name" : user.name,
          "online" : user.online
      }) 
    return users

Models

A model is the single, definitive source of information about your data. It contains the essential fields and behaviors of the data you’re storing. Each model maps to a single collection in your database.
In other words An instance of your model relates to a document (record) in your database.

The D2O framework uses the mongoengine project
MongoEngine is a Document-Object Mapper (think ORM, but for document databases) for working with MongoDB from Python. It uses a simple declarative API, similar to the Django ORM.

Your python node connects to a Database on the Mongo server automatically. This database is dedicated for you application & environment, in other words, each application has 2 databases Dev & Prod. Because the node automatically connects to the correct database you only have to worry about defining your document mapping, managing your document instances & querying the database.

1. Start Project / Project Selector

With the Start Project button you can open a dialog:

Now you should choose a project key as unique identifier for you project e.g. camelcased projectName or an UUID and select a project to clone from e.g. one of the starter projects. After creating your new project you can open it with the project selector in the top right corner of the screen.

2. Show Archive

The platform only allows soft deletes, in other words you can archive projects. Clicking the show archive button will show a list of old projects. By clicking them they will be dearchived. The dearchived projects are available in the project selector once more.

3. File tab

The file tab sections shows all files currently opened in the IDE

4. Editor Area

The editor area shows the current selected file (file tab) and allows you to edit it. It is powered by code mirror and adjusts the syntax highlighting to the current selected file HTML/CSS/JAVASCRIPT/PYTHON. CTRL + SPACE will show autocomplete sugestions although this functionality is fairly limited at the moment. If there is inactivity for more then 1 second c.q. you are not typing anymore the platform will autosave your document.

5. Tools

This menu contains the project management tools

5.1 Version selector

Here you can browse the released versions of the current selected document (file tab) and choose to revert back to a specific version of code.

5.2 Project Info

The project info button opens up a pop up to alter your project description

FieldTypePurposeTitleplain textA descriptive project name more human friendly then the project key. This title is shown in the App Gallery and in the documentationSummaryplain textThe summary is also shown in the App GalleryDocumentationMarkdownThe markdown text will be a part of the autogenerated documentation for your project

5.3 Undo/Redo

With these buttons you can toggle between autosaved version of you code. CTRL+Z will also work in the edit area and will trigger a new autosave.

5.4 Enabled/Disabled

The next toggle button tells you if the project is enabled in other words "Live" only "Released & Enabled" projects are shown in the App Gallery. If a project is not "Released & Enabled" it will not be accesable.

5.5 Release

The release button will open up a dialog to release your code to the wild. The live version will be an exact copy from the most current dev version of your code.

6. Client Side

These files contain the client side of your application

6.1 Index.html

Applications are set up as one-pagers, this means that index.html is your landing page and contains all html in your project.

6.2 Stylesheet

A file to store your custum css

6.3 Javascript

The javascript files contain your client side controller, it can be multiple files. Right click on a file to rename/delete them.

7. Server Side

All your python code that is executed server side, server side is set up as a 3-tier application Model View Controller (MVC).

• Model -> Data Model connected to database.
• View -> Data conversion (JSON <-> Python)
• Controller -> Application Logic

7.1 Procedures (View)

These modules are executed as a script and can be triggerd by a webcall HTTP/STOMP see framework

7.2 Library (Controller)

These modules are imported in your python server environment, they should contain your application logic which can be used by the procedures see framework

7.3 Models (Model)

These modules should contain your datamodel as a python class see framework

8. Quicklinks

Open various pages related to this project.

8.1 Development Page

Opens up your application in a new page. The code representing this page is the current stage in your editor. Although front-end changes requirs a reload of the page.

8.2 Production page

Opens up your application in a new page represented by the current released/enabled code.

8.3 Test Results

Opens up the test results Modal.

8.4 Dashboard

Opens the project dashboard in a new page see dashboard

8.5 Docs

Opens the project documentation in a new page see docs

9. Archive

Soft delete, the project will be disabled and archived.

Server topology

Design (Not Updated)

The D2O app engine is kinda like an ultra light Framework as a Service (FAAS) it helps develop small web applications, check out the Application Gallery to see the currently deployed app's.
ps. If you are not a newbie, this platform is probably not for you ;)

Ultra light means the platform is not suitable for high traffic applications. I hear you asking, if this platform was not intended for real world applications then what was your aim when you where building it?
Well, I myself learned the basics of programming during college and I can say that putting up 'Hello World!' on a command line is really cool for about 2 minutes.
After that you want to start creating cool stuff like a Web application or something like that.
While there are lots of nice tools and frameworks around to get you started. Sharing your freshly build app can be quite a hassle especially when you are new to the field of Software Development.
With this platform I aim to provide a framework to Learn, Collaborate and Share. Therefore all projects on this platform are open source.

Fair use policy: There is only one limitations on ussage and storage at the moment. Procedure executiontime on the backend may not exceed the 10 seconds mark.

Appreciation

•  Spring Boot
•  Flexmark
•  Jsoup
•  Thymeleaf
•  Apache Camel
•  Apache commons
•  Apache Mina
•  Apache Maven
•  Apache Tomcat
•  Python 2.7
•  Postgresql
•  MongoDB
•  Bootstrap
•  JQuery
•  STOMP
•  Stomp over websocket
•  Sockjs
•  Code Mirror
•  Bootstrap Markdown Editor
•  Notify.js
•  Masonry.js
•  Font Awesome
•  Font Mfizz
•  Pixabay: Creative Commons Images