At the TutorialsPoint online training platform there are now three training courses available. These courses consist of the following subjects:

• Introduction to Sparx Enterprise Architect an introduction of the basic functionalities in Enterprise Architect. You learn how to use this modeling tool in your daily activities
• Integreated Data Entity Add-In for Enterprise Architect (IDEA). An open source extension for the data modeler and data architect to support data modeling activities in Enterprise Architect.You learn how to install, configure and use this Add-In
• Open source webviewer for Enterprise Architect the Web Publication Platform. You learn how to install and use this webviewer and how to connect it to a repository via a database connection.

To get an overview of the various online courses at TutorialsPoint you can start at the profile page on TutorialsPoint. For all these trainingcourses a number of videos can be previewed to give you an idea of the content of this training. Please notethat there are also anumberof extra classroom trainings available both in Dutch and English at bertdingemans.nl . 

All these course give you the opportunity to get an introduction in the functionalities of Enterprise Architect with these online courses al a very low price from your laptop, desktop or tablet at every moment of the day you want and from every place where you want like couch, chair, bed, bath or gardenseat.

Los Angeles, July 13, 2021 – The team at Parallel Agile is excited to announce a significant new version of CodeBot, a low-code MERN stack application generator. CodeBot now connects screens to databases and provides an extensive library of UI components to build a complete application “at the speed of thought”.

CodeBot uses your domain models and wireframes to automatically build an enterprise application – including a scalable, secure REST API, MongoDB database schema, Java client library, etc. Our latest release creates a fully integrated React web-app and automatically deploys it for testing.

“This release finally achieves our product goal of an end-to-end application generator, which supports an evolutionary, domain driven approach to agile development,” said Matt Stephens, Chief Architect and Director of Software Development at Parallel Agile. “UX-focused iterations that would have previously taken days or weeks can now be turned around in minutes,” he added.

In addition, the code generation process is fast, enabling a brand-new approach towards iterative development.

“Fundamentally, the benefits of an agile approach to development derive from running a feedback-driven project, where there are no long delays before working software can be tried out by project stakeholders,” said Doug Rosenberg, CEO of Parallel Agile. “CodeBot’s ability to generate and deploy a working application in a few minutes compresses sprint time from a couple of weeks to a couple of hours – and faster iterations enable the project to be more feedback-driven. With CodeBot, development literally happens at the speed of thought. Edit your wireframes and re-generate (and immediately redeploy) the application so that it’s instantly accessible to project stakeholders, whether they be from the human factors team, the QA team, or real customers. CodeBot puts the Agile in Parallel Agile,” he added.

According to Professor Barry Boehm, senior advisor at Parallel Agile and Founder of the USC Center for Systems and Software Engineering, “The Parallel Agile process applies the spiral model of development on a per-use-case basis. When combined with CodeBot’s ability to generate and deploy a database access API to glue the use cases together, teams of any size can collaborate easily, enabling a parallel processing approach to development and resulting speed improvement.”

CodeBot annual licenses can now be purchased at the Parallel Agile website. What’s more, customers can sign up for a demo session where they can engage and gain a better understanding of the toolset and the process.

About Parallel Agile

Parallel Agile addresses the underlying technical issues with integrating work done by large teams, in addition to the management issues – specifically enabling large teams of developers to collaborate efficiently and reduce schedule time on projects.  By leveraging code generation, you can have the benefits of both agile and model-driven development, with none of the limitations.

Learn more about Parallel Agile and CodeBot:

www.parallelagile.com

Follow us on:

LinkedIn

Urvashi Prakash

Manager, Marketing & Communications

This email address is being protected from spambots. You need JavaScript enabled to view it.

Hello CodeBot – a simple, secure, rich media, low code application

Matt Stephens and Doug Rosenberg

Parallel Agile, Inc.

www.parallelagile.com

Everyone’s familiar with introductory “Hello World” programs as a way to help you learn a new programming language. CodeBot™ generates and deploys web applications from UML models with virtually no programming (literally speaking, the model is the code).  So what does “Hello World” look like when the code is a UML model?

Hello CodeBot is simple. There are only 3 webpages and 2 domain classes.  But it illustrates many of the things you need to know to get started generating your own web apps.

Hello CodeBot is secure. It uses JSON web tokens (JWT) to provide secure access.  Register and Login methods are automatically generated in the API and used by the generated React JS pages.

Hello CodeBot is rich media.  It plays videos, uses image components and CSS stylesheets.

Hello Codebot is designed to be a starter model for your own web apps.  You can use our pre-built Registration and Login pages, then build out your own web application by replacing our Home page.  Figure 1 shows the application’s 3 pages; you can Register, Login and Play Videos (in this case, tutorials from our YouTube Channel). 

Figure 1 - Hello CodeBot generates Register, Login and Home pages from wireframes

Hello CodeBot is free to download.  Each of these pages was 100% code generated from wireframes within the (free to download) UML model.  You read that right, virtually no code was written manually to generate this web application.  The single solitary piece of code initializes the video list with data and is embedded within the UML model.  You can download the UML model and the MERN Stack web app in a zipfile, including database (Mongo), API (Node), API documentation (Swagger) and React JS pages, from our online process guide at: https://parallelagile.github.io/CodeBot/codegen-process-guide/hello-codebot-project 

Project Structure

Figure 2 shows the Enterprise Architect project browser window displaying the high level package structure for the project.  There are 3 main packages – one for the Domain Model, one for the Use Cases, and one for the User Experience (UX). 

CodeBot generates a database and an API from the Domain Model, and generates the React JS web application from the UX package.  More specifically the React pages are generated from wireframes, and the navigation between pages is generated from the State Machine within the Navigation package.

Figure 2 - There are 3 top level packages, with sub-packages in the UX folder

The UX package also contains a nested package called Assets.  This package contains image assets as well as Cascading Style Sheets which CodeBot applies to the generated pages to produce nicely styled and formatted web pages. 

CodeBot doesn’t directly generate anything from the Use Case package, but it’s a good idea to include them in your model, especially if you plan on generating scenario test scripts later.

Navigation State Machine

CodeBot uses a state machine to determine the sequencing logic for how pages are displayed.  Each state on the state machine matches the name of a wireframe.  Since Hello CodeBot has three pages, our state machine has three states (see Figure 3).

Figure 3 - It's easiest if you match your state names and wireframe names

When you start Hello CodeBot it takes you to the Login page.  If you’re a new user, click the Register button to go to the Register page.  Once you’ve registered successfully you’re automatically directed to Login.  Once you’ve logged in, you’re directed to the Home page, where you can play videos.

When you build out your own web applications, you’ll add additional wireframes and additional states and transitions on the state machine to make your application as complex as you like.

Registration

The wireframe for the Registration page is shown in Figure 4.  The diagram type is Webpage Wireframe, available from Enterprise Architect’s Wireframing toolbox.  There are 4 “client areas” on the diagram – one to contain the entire webpage, with nested client areas for entering username and password, one for the image, and one for navigating to the Login page. 

Figure 4 - Register is a "webpage wireframe" with three nested client areas

Each nested client area can be individually styled by setting UML Tagged values on the client area.  Figure 5 shows that the blue client area uses the “primary” variant.

Figure 5 - Use tagged values to specify React/Bootstrap styling info

The wireframes can be linked to the domain model by dragging the appropriate domain class onto the wireframe diagram and connecting it to the client area using a UML Dependency arrow.  CodeBot matches the text field names on the wireframe with attribute names on the domain class.   In the case of text fields, we can use a “placeholder” tag to specify the text that appears on the generated React page (Figure 6).

Figure 6 - CodeBot matches field names to class attributes

Adding the image to the wireframe is accomplished by first importing the image into the EA model via drag-and-drop onto the diagram, moving the imported image into the Assets folder in the EA project browser, and then dragging the image asset onto the client area (see Figure 7). Image assets get exported in the XML file that CodeBot uses for input so the images show up on the generated React pages.

Figure 7 - Just drag the image asset onto the client area

Buttons on wireframes can have Actions assigned to them.  Figure 8 shows that we’ve assigned an API call to register (on the User class) by adding a tagged value.

Figure 8 - Buttons can make API calls by using the action tag

JWT Authentication

CodeBot generates secure, server-side login for login and register for the Identity class that’s specified, if JWT Authentication is selected.  So the register API endpoint is produced automatically and thus the “action register” tag has something to link to.  Auto-generated REST endpoints for register and login are shown in Figure 9.

Figure 9 - CodeBot automatically generates REST endpoints for register and login for the identity class

The identity class is currently specified in the CodeBot web console’s Project Details window when the Uses JWT Authentication checkbox is selected.  CodeBot generates login and register endpoints for the identity class.

Figure 10 - CodeBot simplifies the process of developing with JWT

Automatic Deployment for Rapid Iteration Testing

Once your project setup is complete, export an XMI file from your UML model containing the packages you want to generate, and run CodeBot.  You’ll be prompted to download a zipfile containing your web application, and if you’ve checked the Hosted box, CodeBot will automatically build your React JS web app and host it in the cloud, as shown in Figure 11.

Figure 11 - CodeBot does DevOps.  Your application is immediately deployed for fast-iteration testing.

When your React build is ready, just click the Visit Website button and your application is live and available for immediate testing.  The generated Register page is shown in Figure 12.

Figure 12 - Your fully styled, database-linked React web app is ready.

App in a Zipfile

If you decide to host your application yourself, you’ll use the contents of the downloaded zipfile.  Hello CodeBot is a complete MERN stack application that includes Mongo DB, Express JS, React JS and Node.JS, along with Swagger API documentation, and some client-side API interface code (Figure 13).

Figure 13 - Here's the Hello CodeBot MERN Stack App in a zipfile.

Login

The Login wireframe shown in Figure 14 follows a very similar pattern to the Register wireframe.  To recap, it’s a webpage wireframe with 3 nested client areas inside the main client area.   The top client area contains the banner image asset, the middle one uses the “primary” variant and displays in blue.  This panel links to the User class from the domain model, and matches the names on the text fields to the names of the domain attributes (username and password).  The Login button has an action to call the User login API endpoint.

Figure 14 - the Login wireframe is similar to the Register wireframe

CodeBot turns this wireframe into executable React JS in a big hurry.   Much faster than anyone could code it by hand – giving a whole new meaning to the term “project velocity”

Figure 15 - CodeBot makes it very fast to develop MERN stack applications

Home Page

Hello CodeBot’s Home page, on the other hand, shows off some considerably more advanced capability.  The Home page lets you play tutorial videos from the Parallel Agile YouTube channel and introduces a couple of more React JS components, specifically a media player and a combo box/dropdown list.  These components can simply be dragged from EA’s toolbox onto the wireframe, as shown in Figure 16.

Figure 16 - CodeBot's ability to bind components together and manage UI state yields surprising results

The real magic, though, comes in when you connect the components using Dependency arrows.  The combo box is dependent on the Video class and the dependency is called “name”.  This causes a query to be run on the Video collection and the names of the videos displayed in the dropdown list.  All of that without a line of code.  Next, the media player is dependent on the value selected on the dropdown list so the video plays on the generated page.  Again, no coding required.

Figure 17 - CodeBot uses Redux state management to produce sophisticated UIs

There’s only one small piece of code required to make Hello CodeBot work, and that’s to initialize the Video collection with the names and URLs of a couple of videos.  As shown in Figure 18, the code (for the moment at least) has been attached to the on register method on the User class, so the database will get initialized when a new user registers.

Figure 18 - We need a small snip of code to pre-load the database with videos

Fortunately, EA has a built-in code editor that makes it easy to attach code snippets to the UML model.  CodeBot merges these snippets in with the auto-generated code so that it is invoked at the proper time.  This code snip creates a JSON structure called data which holds a couple of name/URL pairs, and then calls the create method on the VideoDao class, which has been generated by CodeBot.

Learn More

You can get more detail on the parallelagile.com website, and we’ve added a section on Hello CodeBot to our online process guide at

https://parallelagile.github.io/CodeBot/codegen-process-guide/hello-codebot-project

To sum up, Hello CodeBot is a simple, secure, rich media MERN stack application that’s designed to help you get started doing development with CodeBot.  We think you’ll find developing with CodeBot to be an order of magnitude faster than writing code by hand.

Please contact us at This email address is being protected from spambots. You need JavaScript enabled to view it. if we can answer any questions for you.

A web publication platform for an ArchiMate model

Introduction

As an independent Enterprise Architect (EA) consultant I often get the question what the possibilities are for publishing the repository content over the web. Of course in EA there is the possibility to generate a HTML version of the model but in most cases my customers demand extra functionality like key word search or a discussion module.

In my current assignment for the National Health Broker in The Netherlands the introduction of a webbased solution was evident. One of the most important product of this organisation is the architectural documentation of the interfaces of the broker component. The organisation itself is quite small but the external stakeholders like software suppliers, software developers and policy makers is large.

In the current situation the architectural documentation is published in pdf documents. Keeping these documents up to date and correctly linked and integrated with each other is a tedious job. Introduction of an Architecture Repository based on ArchiMate 2.0 and EA helped us a lot. The web-based solution  is however an essential part of the solution. This article describes solution we introduced: the Web Publication Platform.

Implementation model

Because the current solution is the implementation of an ArchiMate 2.0 architecture model we use limited data entities from the EA repository. The model is  rather large, over 3500 elements and 5000 associations. In the image below the most important elements are displayed and described.

·         Packages are extensively used for grouping and sorting elements and diagrams

·         Diagrams are used for given summary views of the entities to various stakeholders

·         Elements are used to describe the architectural entities. Therefore we use the notes, alias, key word attributes and extra entities which are mentioned below

·         Associations for modelling the associations between the elements

·         Attributes for data modelling in data objects and artficats within ArchiMate (this is an extension on the methodology)

·         Tagged values for extra describing attributes of the elements

·         Linked files, because the broker has to keep track of legislation and standardisation constraints which are maintained by other organisations hyperlinks to webpages are essential.

For the implementation of the WPP we decided to use an Open Source Framework for content and form management. It is unnecessary to start from scratch developing a solution. Not only implementing the forms for the architecture repository the form factory solution has a web based interface for the governance of its own (form) entities.  In the image below an overview of the functionality

The form factory has various form types that can be used to display information from a relational database. Since the EA repository is also a relational database the interface to the database is implemented in a number of SQL statements and are connected to a form type. The Form Factory engine now handles the request made by the user when using the web application.  The views are summarized below:

·         Lists and sublists are used to display multiple elements in a screen and make selections to display in detail views

·         Detail views to display elements and diagrams including links to associations, attributes and tagged values etc.

·         Explorer view is a combination of a tree view and a detail view

·         Discussion platform for adding comments to elements by authorized stakeholders

·         Search, for key words in combination with a number of filter options

In the image below a sample of an explorer view screen

Some challenges

When implementing the interface to the repository we faced a number of difficulties. We used two architecture principles that limited our options:

·         All governance modelling and administrative activies are done by architects via the desktop application of Sparx. The WPP is only used for publication of the information not for modification.

·         There are no modifications made to the EA database (eap file). Therefore no tables for the form factory component are implemented in this database.

Below a number of specific challenges are briefly described

Configuring the Form Management System

Because of the second principle we faced the problem that in one detail screen (for example the element detail) we have to display information from two databases in one screen. The Form Factory was not configured for this constraint. Therefore we introduced an abstract class where the sql statements are combined with a connection string so before the sql statement is executed to retrieve the data the connection to the right database is opened. In the code snippet below an

       Public Function Detail(entity As String, id As String) As String

            Dim strRet As String

            Dim strSql As String

            Select Case entity.ToUpper

                Case "ELEMENT"

                    Me.ViewerHtml("<H1>Details element</H1>")

                    Me.ViewerDetail("SELECT name as elementnaam, stereotype, note as toelichting, '<a href=FrmDetail.aspx?module=package&id=' & package_id & '>Module informatie</a>' as [module] FROM [t_object] WHERE [object_id]=" & id)

                    Dim strCon As String

                    strCon = "SELECT start_object_id, '<img src=images/' & t_object.stereotype & '.png >' as logo, connector_type as type, t_object.name as element FROM [t_connector], [t_object] WHERE [t_connector].start_object_id = t_object.object_id AND [end_object_id]=" & id

                    strCon += " UNION "

                    strCon += "SELECT end_object_id, '<img src=images/' & t_object.stereotype & '.png >' as logo, connector_type as type, t_object.name as element FROM [t_connector], [t_object] WHERE [t_connector].end_object_id = t_object.object_id AND [start_object_id]=" & id

                    strCon += " ORDER BY 2, 3 "

                    Me.ViewerList(strCon, "FrmDetail.aspx?module=element&id=", "<H2>Associaties</H2>")

                    Me.ViewerList("SELECT t_diagram.diagram_id, t_diagram.name as diagramnaam FROM [t_diagramobjects], [t_diagram] WHERE [t_diagramobjects].diagram_id = [t_diagram].diagram_id AND [t_diagramobjects].object_id=" & id & " ORDER BY 2 ", "FrmDetail.aspx?module=diagram&id=", "<H2>Weergegeven in diagrammen</H2>")

                    Me.ViewerList("SELECT object_id, filename as bestandsnaam, '<a target=_blank href=' & filename & ' >Open bestand</a>' as link FROM [t_objectfiles] WHERE [object_id]=" & id, "", "<H2>Gekoppelde bestanden</H2>")

                    Me.ViewerList("SELECT ID, name as naam, container as [afkomstig van], lowerbound as mincard, upperbound as maxcard, notes as toelichting FROM [t_attribute] WHERE [object_id]=" & id, "", "<H2>Attributen</H2>")

                    Me.ViewerList("SELECT propertyid, property as eigenschap, value as waarde, notes as toelichting FROM [t_objectproperties] WHERE property LIKE 'Vz%' AND [object_id]=" & id, "", "<H2>Extra items</H2>")

                    If ViewerFactoryHelper.IsDiscussieLid() Then

                        Me.ViewerList("SELECT ea_discussion_id, EA_DISCUSSION.datum, EA_DISCUSSION.onderwerp, EA_DISCUSSION.toelichting, '<a class=''ddbutton'' href=cmsForm.aspx?formid=50315&ea_discussion_id=' & ea_discussion_id & ' >Detail en Reageer</a>' as link FROM EA_DISCUSSION WHERE EA_DISCUSSION.element_id = " & id & " ORDER BY 1 DESC", "", "<h2>Gestarte discussies over dit element</h2>", ConfigurationManager.AppSettings("connectionstring"))

                        Me.ViewerHtml("<a class='ddbutton' href='cmsForm.aspx?formid=50301&element_id=" & id & "' >Start Nieuwe discussie over dit element</a><br>")

                    End If

                Case Else

                    MyBase.objSB.Append("Niet gevonden")

            End Select

            strRet = MyBase.objSB.ToString()

            Return strRet

        End Function

In the code you can see a number of statements in combination with a connectionstring. The sql statements are also very informative because it gives an idea of how the information is retrieved from the repository. The viewer functions like ViewerHTML are used to call the right formtype in the form factory engine.

Exporting diagrams

One of the powerful aspects of EA is the diagramming tool in combination with the relational database to store the information. Reason to re use the diagrams in the WPP, but how to export the diagram’s from EA to a file readable in a web application.

The automation or scripting interface of EA offered a solution that was easy to implement. We export all the diagrams to a png file in a certain folder on a disk and this folder is published over FTP to the implementation of the WPP application. The code to export the diagrams is given below (the script can also be found on the WPP website.

option explicit

!INC Local Scripts.EAConstants-VBScript

' WARNING Change this constant for your own Export Directory

public const DirName = "c:\testbert"

sub OnProjectBrowserScript()

                ' Get the type of element selected in the Project Browser

                dim treeSelectedType

                treeSelectedType = Repository.GetTreeSelectedItemType()

                ' Handling Code: Uncomment any types you wish this script to support

                ' NOTE: You can toggle comments on multiple lines that are currently

                ' selected with [CTRL]+[SHIFT]+[C].

                select case treeSelectedType

                               case otPackage

                                               ' Code for when a package is selected

                                               dim thePackage as EA.Package

                                               set thePackage = Repository.GetTreeSelectedObject()

                                               ExportDiagrams(thePackage)

                                               Session.Prompt "Diagrams exported to " & DirName, promptOK

                               case else

                                               ' Error message

                                               Session.Prompt "This script does not support items of this type.", promptOk

                end select

end sub

Sub ExportDiagrams(objPackage)

    Dim objProject as EA.Project

    Dim objDiagram as EA.Diagram

    set objProject = Repository.GetProjectInterface()

    For Each objDiagram In objPackage.Diagrams

        Repository.OpenDiagram(objDiagram.DiagramID)

        objProject.SaveDiagramImageToFile(DirName & "\" & objDiagram.DiagramID & ".png")

        Repository.CloseDiagram(objDiagram.DiagramID)

    Next

    Dim objChild

    For Each objChild In objPackage.Packages

        ExportDiagrams(objChild)

    Next

End Sub

OnProjectBrowserScript

The export diagram routine in the code does the job. We loop through a collection of diagrams in a package and each diagram is saved with the objProject.SaveDiagramImageToFile() method. The parameters and naming is connected to the naming convention in the WPP implementation.

The open source solution

For this WPP platform we decided to publish it as an Open Source Solution in the hope that a community of users will emerge to continue the development of this solution. This means that the code can be downloaded from the WPP website. This WPP website is by the way an example of a architecture repository view based on the form factory framework. It is actually a WPP publication of a sample repository in an eap file in combination with some extra information pages about the product.

More information

More information about the WPP is available at the WPP website: http://wpp.interactory.nl . Please subscribe to the community and use the material in your own situation. Also take part in the forums to report bugs or discuss new functionality. In the blog section I with regularly describe functionality etc. When you want to have more information about modelling in ArchiMate or the usage of architecture repository please contact me via the contact page of the wpp website.