Enterprise Architect version 15.2

download
purchase

enzh-CNcsnlfrdehiiditkoplptruskessv

My Profile

Social Media Channels

facebook  twitter  youtube   linkedin

Monday, 12 July 2021 20:31

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

Written by
Rate this item
(0 votes)

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

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 browser

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 navigation

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 registration wireframe

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 variant tag

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 placeholder tag

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

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 actions on buttons

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 jwt authentication

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 web console 2 project details

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 react build successful

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 register

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 MERN stack in a zipfile

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 login wireframe

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 login

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 homepage wireframe

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 home page

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 code snip

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.

Read 683 times Last modified on Tuesday, 13 July 2021 05:18
doug rosenberg

doug rosenberg

Parallel Agile, Inc. (Founder, Chief Technology Officer) - formerly ICONIX (CEO)
After running ICONIX for 35 years and writing 7 books on UML, use cases, and agile software development, Doug discovered a new way to improve productivity by leveragng parallel development, and founded Parallel Agile (www.parallelagile.com) in 2018 after 4 years of test projects at the USC Center for Software and Systems Engineering, where he's been working with Prof. Barry Boehm.   A new book "Parallel Agile - Faster Delivery, Fewer Defects, Lower Cost" is mostly written and will be released during 2019.   We're also developing a Parallel Agile Add-In for Enterprise Architect and are available for training and consulting.  
In his previous lifetime...
 
Doug Rosenberg founded ICONIX in his living room in 1984 and began training companies in object-oriented analysis and design around 1990. ICONIX specializes in JumpStart training for UML and SysML, and offers both onsite and open-enrollment courses.
Doug developed a Unified Booch/Rumbaugh/Jacobson approach to modeling in 1993, several years before the advent of UML, and began writing books around 1995. Design Driven Testing is his 6th book on software engineering. He’s also authored numerous multimedia tutorials (including Enterprise Architect for Power Users) and several eBooks, including Embedded Systems Development with SysML.
Doug has spent the last few years doing "deep dive" consulting into cutting-edge technology including cross-platform mobile app development, REST APIs, and NoSQL databases, and gaining first-hand experience on some "hardcore agile" projects of varying sizes.  He's also been working with dozens of graduate students at the University of Southern California Center for Systems and Software Engineering (USC CSSE), managing Directed Research projects and developing/piloting the Parallel Agile process.

www.parallelagile.com
Login to post comments