Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@uo288090
uo288090 committed Feb 18, 2024
1 parent 4ceaa47 commit 3aa541b
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 239 deletions.
Binary file added images/BusinessContext.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ContainerDiagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/Sequence diagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
291 changes: 52 additions & 239 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,6 @@ <h1><span class="image"><img src="./images/arc42-logo.png" alt="arc42"></span> T
<ul class="sectlevel2">
<li><a href="#_whitebox_overall_system">5.1. Whitebox Overall System</a></li>
<li><a href="#_level_2">5.2. Level 2</a></li>
<li><a href="#_level_3">5.3. Level 3</a></li>
</ul>
</li>
<li><a href="#section-runtime-view">6. Runtime View</a>
Expand Down Expand Up @@ -887,300 +886,114 @@ <h2 id="section-solution-strategy">4. Solution Strategy</h2>
<div class="sect1">
<h2 id="section-building-block-view">5. Building Block View</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
<div class="sidebarblock arc42help">
<div class="content">
<div class="paragraph">
<div class="title">Content</div>
<p>The building block view shows the static decomposition of the system into building blocks (modules, components, subsystems, classes, interfaces, packages, libraries, frameworks, layers, partitions, tiers, functions, macros, operations, data structures, &#8230;&#8203;) as well as their dependencies (relationships, associations, &#8230;&#8203;)</p>
</div>
<div class="paragraph">
<p>This view is mandatory for every architecture documentation.
In analogy to a house this is the <em>floor plan</em>.</p>
<p>This is the overall view of the application. The diagram is composed of 3 elements that will interact between each other.</p>
</div>
<div class="paragraph">
<div class="title">Motivation</div>
<p>Maintain an overview of your source code by making its structure understandable through
abstraction.</p>
</div>
<div class="paragraph">
<p>This allows you to communicate with your stakeholder on an abstract level without disclosing implementation details.</p>
</div>
<div class="paragraph">
<div class="title">Form</div>
<p>The building block view is a hierarchical collection of black boxes and white boxes
(see figure below) and their descriptions.</p>
<p><em><strong>Overview Diagram</strong></em></p>
</div>
<div class="imageblock">
<div class="content">
<img src="./images/05_building_blocks-EN.png" alt="Hierarchy of building blocks">
</div>
</div>
<div class="paragraph">
<p><strong>Level 1</strong> is the white box description of the overall system together with black
box descriptions of all contained building blocks.</p>
</div>
<div class="paragraph">
<p><strong>Level 2</strong> zooms into some building blocks of level 1.
Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.</p>
</div>
<div class="paragraph">
<p><strong>Level 3</strong> zooms into selected building blocks of level 2, and so on.</p>
</div>
<div class="paragraph">
<div class="title">Further Information</div>
<p>See <a href="https://docs.arc42.org/section-5/">Building Block View</a> in the arc42 documentation.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
<div class="sidebarblock arc42help">
<div class="content">
<div class="paragraph">
<p>Here you describe the decomposition of the overall system using the following white box template. It contains</p>
</div>
<div class="ulist">
<ul>
<li>
<p>an overview diagram</p>
</li>
<li>
<p>a motivation for the decomposition</p>
</li>
<li>
<p>black box descriptions of the contained building blocks. For these we offer you alternatives:</p>
<div class="ulist">
<ul>
<li>
<p>use <em>one</em> table for a short and pragmatic overview of all contained building blocks and their interfaces</p>
</li>
<li>
<p>use a list of black box descriptions of the building blocks according to the black box template (see below).
Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).</p>
</li>
</ul>
</div>
</li>
<li>
<p>(optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box.
Since there are so many ways to specify interfaces why do not provide a specific template for them.
In the worst case you have to specify and describe syntax, semantics, protocols, error handling,
restrictions, versions, qualities, necessary compatibilities and many things more.
In the best case you will get away with examples or simple signatures.</p>
</li>
</ul>
</div>
</div>
<img src="./images/BusinessContext.png" alt="Overall view of the business context">
</div>
<div class="paragraph">
<p><em><strong>&lt;Overview Diagram&gt;</strong></em></p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">Motivation</dt>
<dd>
<p><em>&lt;text explanation&gt;</em></p>
<p>This will be the general sketch of the elements interacting inside the application, including the external elements that will include the application.</p>
</dd>
<dt class="hdlist1">Contained Building Blocks</dt>
<dd>
<p><em>&lt;Description of contained building block (black boxes)&gt;</em></p>
</dd>
<dt class="hdlist1">Important Interfaces</dt>
<dd>
<p><em>&lt;Description of important interfaces&gt;</em></p>
</dd>
</dl>
</div>
<div class="sidebarblock arc42help">
<div class="content">
<div class="paragraph">
<p>Insert your explanations of black boxes from level 1:</p>
</div>
<div class="paragraph">
<p>If you use tabular form you will only describe your black boxes with name and
responsibility according to the following schema:</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 66.6667%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top"><strong>Name</strong></th>
<th class="tableblock halign-left valign-top"><strong>Responsibility</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;black box 1&gt;</em></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>&lt;Text&gt;</em></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><em>&lt;black box 2&gt;</em></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>&lt;Text&gt;</em></p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>If you use a list of black box descriptions then you fill in a separate black box template for every important building block .
Its headline is the name of the black box.</p>
</div>
</div>
</div>
<div class="sect3">
<h4 id="_name_black_box_1">5.1.1. &lt;Name black box 1&gt;</h4>
<div class="sidebarblock arc42help">
<div class="sidebarblock">
<div class="content">
<div class="paragraph">
<p>Here you describe &lt;black box 1&gt;
according the the following black box template:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Purpose/Responsibility</p>
</li>
<li>
<p>Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.</p>
</li>
<li>
<p>(Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, &#8230;&#8203;.</p>
</li>
<li>
<p>(Optional) directory/file location</p>
<p><strong>Player:</strong> This is the user that will be playing with our application. They will need tl be authenticated to be able to play.</p>
</li>
<li>
<p>(Optional) Fulfilled requirements (if you need traceability to requirements).</p>
<p><strong>WIQ Application:</strong> This is the main application that will reproduce how the game will work. This part will be more detailed in the following parts.</p>
</li>
<li>
<p>(Optional) Open issues/problems/risks</p>
<p><strong>WikiData API:</strong> This is an external API, which will provide us with the information to produce the questions.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="paragraph">
<p><em>&lt;Purpose/Responsibility&gt;</em></p>
</div>
<div class="paragraph">
<p><em>&lt;Interface(s)&gt;</em></p>
</div>
<div class="paragraph">
<p><em>&lt;(Optional) Quality/Performance Characteristics&gt;</em></p>
</div>
<div class="paragraph">
<p><em>&lt;(Optional) Directory/File Location&gt;</em></p>
</div>
<div class="paragraph">
<p><em>&lt;(Optional) Fulfilled Requirements&gt;</em></p>
</div>
<div class="paragraph">
<p><em>&lt;(optional) Open Issues/Problems/Risks&gt;</em></p>
</div>
</div>
<div class="sect3">
<h4 id="_name_black_box_2">5.1.2. &lt;Name black box 2&gt;</h4>
<div class="paragraph">
<p><em>&lt;black box template&gt;</em></p>
</div>
</div>
<div class="sect3">
<h4 id="_name_black_box_n">5.1.3. &lt;Name black box n&gt;</h4>
<div class="paragraph">
<p><em>&lt;black box template&gt;</em></p>
</div>
</div>
<div class="sect3">
<h4 id="_name_interface_1">5.1.4. &lt;Name interface 1&gt;</h4>
<div class="paragraph">
<p>&#8230;&#8203;</p>
</div>
</div>
<div class="sect3">
<h4 id="_name_interface_m">5.1.5. &lt;Name interface m&gt;</h4>

<div class="dlist">
<dl>
<dt class="hdlist1">Important Interfaces</dt>
<dd>
<p>This part will be more detailed later, since the structure of the different interfaces/classes has not been discussed by the team yet.</p>
</dd>
</dl>
</div>
</div>
<div class="sect2">
<h3 id="_level_2">5.2. Level 2</h3>
<div class="sidebarblock arc42help">
<div class="content">
<div class="paragraph">
<p>Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.</p>
</div>
<div class="paragraph">
<p>You have to decide which building blocks of your system are important enough to justify such a detailed description.
Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks.
Leave out normal, simple, boring or standardized parts of your system</p>
<p>Here is an specification of the inner structure of the WIQ Application.</p>
</div>
</div>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_1">5.2.1. White Box <em>&lt;building block 1&gt;</em></h4>
<div class="sidebarblock arc42help">
<h4 id="_white_box_wiq_application">5.2.1. White Box <em>&lt;WIQ Application&gt;</em></h4>
<div class="imageblock">
<div class="content">
<div class="paragraph">
<p>&#8230;&#8203;describes the internal structure of <em>building block 1</em>.</p>
</div>
</div>
<img src="./images/ContainerDiagram.png" alt="Container for the WIQ System">
</div>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
</div>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_2">5.2.2. White Box <em>&lt;building block 2&gt;</em></h4>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
</div>
<div class="paragraph">
<p>&#8230;&#8203;</p>
</div>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_m">5.2.3. White Box <em>&lt;building block m&gt;</em></h4>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_level_3">5.3. Level 3</h3>
<div class="sidebarblock arc42help">
<div class="content">
<div class="paragraph">
<p>Here you can specify the inner structure of (some) building blocks from level 2 as white boxes.</p>
<p>This diagram describes the internal organization of the WIQ Application.</p>
</div>
<div class="paragraph">
<p>When you need more detailed levels of your architecture please copy this
part of arc42 for additional levels.</p>
</div>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">Motivation</dt>
<dd>
<p>An inner view on the WIQ Application and its components inside. How the WIQ application will be structured inside and its main components.</p>
</dd>
<dt class="hdlist1">Contained Building Blocks</dt>
</dl>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_x_1">5.3.1. White Box &lt;_building block x.1_&gt;</h4>
<div class="sidebarblock arc42help">
<div class="sidebarblock">
<div class="content">
<div class="paragraph">
<p>Specifies the internal structure of <em>building block x.1</em>.</p>
</div>
</div>
</div>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>WIQ Client:</strong> This is the connection between the user and the application. It will allow the users to play the WIQ game. This part will be developed in React with Typescript for its clear component structure, simplified code quality and separation of concerns.</p>
</li>
<li>
<p><strong>WIQ REST API:</strong> This is the part responsible for managing the users that log into the application, managing also the logic of the game and sending the request to the Wikidata API for the question generation. This part is going to be developed in Springboot due to its foundations on the Java programming language, which is the language that the developers find the easiest to develop in.</p>
</li>
<li>
<p><strong>WIQ Database:</strong> This is where the most important data is going to be stored. Such as, users questions and other game info that will be specified in the future. The database we chose to use is PostgreSQL, since it is compatible with Docker and it&#8217;s an object-relational kind of database, which is easier for the developers to use. Another alternative would&#8217;ve been to use MySQL.</p>
</li>
</ul>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_x_2">5.3.2. White Box &lt;_building block x.2_&gt;</h4>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
</div>
</div>
<div class="sect3">
<h4 id="_white_box_building_block_y_1">5.3.3. White Box &lt;_building block y.1_&gt;</h4>
<div class="paragraph">
<p><em>&lt;white box template&gt;</em></p>
<div class="dlist">
<dl>
<dt class="hdlist1">Important Interfaces</dt>
<dd>
<p>This part will be more detailed later, since the structure of the different interfaces/classes has not been discussed by the team yet.</p>
</dd>
</dl>
</div>
<div style="page-break-after: always;"></div>
</div>
Expand Down Expand Up @@ -1270,7 +1083,7 @@ <h3 id="_runtime_scenario_1">6.1. &lt;Runtime Scenario 1&gt;</h3>
</div>
<div class="imageblock">
<div class="content">
<img src="./images/Sequence%20diagram.png" alt="Sequence diagram" width="363" height="326">
<img src="./images/Sequence%20diagram.png" alt="Sequence diagram" width="332" height="335">
</div>
</div>
</div>
Expand Down Expand Up @@ -1803,7 +1616,7 @@ <h2 id="section-glossary">12. Glossary</h2>
<div id="footer">
<div id="footer-text">
Version 8.2 EN<br>
Last updated 2024-01-26 11:23:52 +0100
Last updated 2024-02-10 17:45:46 +0100
</div>
</div>
</body>
Expand Down

0 comments on commit 3aa541b

Please sign in to comment.