Commit 508841fe authored by Markus Mößler's avatar Markus Mößler
Browse files

updated presentation

parent d15e1540

page/aidatho_tc_web_app_presentation.html

+166 −33
Original line number Diff line number Diff line
@@ -30,6 +30,70 @@ 
      vertical-align: middle;

    }

    .display.math{display: block; text-align: center; margin: 0.5rem auto;}

    /* CSS for syntax highlighting */

    pre > code.sourceCode { white-space: pre; position: relative; }

    pre > code.sourceCode > span { line-height: 1.25; }

    pre > code.sourceCode > span:empty { height: 1.2em; }

    .sourceCode { overflow: visible; }

    code.sourceCode > span { color: inherit; text-decoration: inherit; }

    div.sourceCode { margin: 1em 0; }

    pre.sourceCode { margin: 0; }

    @media screen {

    div.sourceCode { overflow: auto; }

    }

    @media print {

    pre > code.sourceCode { white-space: pre-wrap; }

    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }

    }

    pre.numberSource code

      { counter-reset: source-line 0; }

    pre.numberSource code > span

      { position: relative; left: -4em; counter-increment: source-line; }

    pre.numberSource code > span > a:first-child::before

      { content: counter(source-line);

        position: relative; left: -1em; text-align: right; vertical-align: baseline;

        border: none; display: inline-block;

        -webkit-touch-callout: none; -webkit-user-select: none;

        -khtml-user-select: none; -moz-user-select: none;

        -ms-user-select: none; user-select: none;

        padding: 0 4px; width: 4em;

        color: #aaaaaa;

      }

    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }

    div.sourceCode

      {   }

    @media screen {

    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }

    }

    code span.al { color: #ff0000; font-weight: bold; } /* Alert */

    code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */

    code span.at { color: #7d9029; } /* Attribute */

    code span.bn { color: #40a070; } /* BaseN */

    code span.bu { color: #008000; } /* BuiltIn */

    code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */

    code span.ch { color: #4070a0; } /* Char */

    code span.cn { color: #880000; } /* Constant */

    code span.co { color: #60a0b0; font-style: italic; } /* Comment */

    code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */

    code span.do { color: #ba2121; font-style: italic; } /* Documentation */

    code span.dt { color: #902000; } /* DataType */

    code span.dv { color: #40a070; } /* DecVal */

    code span.er { color: #ff0000; font-weight: bold; } /* Error */

    code span.ex { } /* Extension */

    code span.fl { color: #40a070; } /* Float */

    code span.fu { color: #06287e; } /* Function */

    code span.im { color: #008000; font-weight: bold; } /* Import */

    code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */

    code span.kw { color: #007020; font-weight: bold; } /* Keyword */

    code span.op { color: #666666; } /* Operator */

    code span.ot { color: #007020; } /* Other */

    code span.pp { color: #bc7a00; } /* Preprocessor */

    code span.sc { color: #4070a0; } /* SpecialChar */

    code span.ss { color: #bb6688; } /* SpecialString */

    code span.st { color: #4070a0; } /* String */

    code span.va { color: #19177c; } /* Variable */

    code span.vs { color: #4070a0; } /* VerbatimString */

    code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */

    /* CSS for citations */

    div.csl-bib-body { }

    div.csl-entry {
@@ -169,12 +233,12 @@ application along with its dependencies, environment variables, and 
configuration.</li>

<li>Benefits:

<ul>

<li>✅ <strong>Consistency</strong>: “It runs on my machine” actually

works on <em>every</em> machine.</li>

<li>✅ <strong>Isolation</strong>: Prevents conflicts between different

<li><strong>Consistency</strong>: “It runs on my machine” actually works

on <em>every</em> machine.</li>

<li><strong>Isolation</strong>: Prevents conflicts between different

environments or services.</li>

<li>✅ <strong>Portability</strong>: Containers can be moved across

systems (e.g., from development to production) without changes.</li>

<li><strong>Portability</strong>: Containers can be moved across systems

(e.g., from development to production) without changes.</li>

</ul></li>

<li><strong>Key Concepts</strong>:

<ul>
@@ -248,24 +312,100 @@ database.</li> 
</ul></li>

<li>Docker Compose is typically used to orchestrate both services.</li>

</ul>

<!-- ```yml

postgres:

  image: postgres:10.3

  environment:

    POSTGRES_USER: blog

    POSTGRES_PASSWORD: blog

    POSTGRES_DB: blog

  ports:

    - "3306"

blog:

  build: .

  links:

    - postgres

  ports:

    - "8888:8888"

  command: --db_host=postgres

```



```bash

.

├── documentation

├── README.md

└── tornado-backend

    ├── blog.py

    ├── docker-compose.yml

    ├── Dockerfile

    ├── README.md

    ├── requirements.txt

    ├── schema.sql

    ├── static

    │   └── blog.css

    └── templates

        ├── archive.html

        ├── base.html

        ├── compose.html

        ├── create_author.html

        ├── entry.html

        ├── feed.xml

        ├── home.html

        ├── login.html

        └── modules

            └── entry.html

``` -->

<div style="display: flex; gap: 2em; font-size: 16pt">

<div style="flex: 1">

<div class="sourceCode" id="cb1"><pre

class="sourceCode yml"><code class="sourceCode yaml"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">postgres</span><span class="kw">:</span></span>

<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">image</span><span class="kw">:</span><span class="at"> postgres:10.3</span></span>

<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">environment</span><span class="kw">:</span></span>

<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="fu">POSTGRES_USER</span><span class="kw">:</span><span class="at"> blog</span></span>

<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="fu">POSTGRES_PASSWORD</span><span class="kw">:</span><span class="at"> blog</span></span>

<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="fu">POSTGRES_DB</span><span class="kw">:</span><span class="at"> blog</span></span>

<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">ports</span><span class="kw">:</span></span>

<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="kw">-</span><span class="at"> </span><span class="st">&quot;3306&quot;</span></span>

<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="fu">blog</span><span class="kw">:</span></span>

<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">build</span><span class="kw">:</span><span class="at"> .</span></span>

<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">links</span><span class="kw">:</span></span>

<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="kw">-</span><span class="at"> postgres</span></span>

<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">ports</span><span class="kw">:</span></span>

<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a><span class="at">    </span><span class="kw">-</span><span class="at"> </span><span class="st">&quot;8888:8888&quot;</span></span>

<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a><span class="at">  </span><span class="fu">command</span><span class="kw">:</span><span class="at"> --db_host=postgres</span></span></code></pre></div>

</div>

<div style="flex: 1">

<div class="sourceCode" id="cb2"><pre

class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="bu">.</span></span>

<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="ex">├──</span> documentation</span>

<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="ex">├──</span> README.md</span>

<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="ex">└──</span> tornado-backend</span>

<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> blog.py</span>

<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> docker-compose.yml</span>

<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> Dockerfile</span>

<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> README.md</span>

<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> requirements.txt</span>

<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> schema.sql</span>

<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a>    <span class="ex">├──</span> static</span>

<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a>    <span class="ex">│</span>   └── blog.css</span>

<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a>    <span class="ex">└──</span> templates</span>

<span id="cb2-14"><a href="#cb2-14" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> archive.html</span>

<span id="cb2-15"><a href="#cb2-15" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> base.html</span>

<span id="cb2-16"><a href="#cb2-16" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> compose.html</span>

<span id="cb2-17"><a href="#cb2-17" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> create_author.html</span>

<span id="cb2-18"><a href="#cb2-18" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> entry.html</span>

<span id="cb2-19"><a href="#cb2-19" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> feed.xml</span>

<span id="cb2-20"><a href="#cb2-20" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> home.html</span>

<span id="cb2-21"><a href="#cb2-21" aria-hidden="true" tabindex="-1"></a>        <span class="ex">├──</span> login.html</span>

<span id="cb2-22"><a href="#cb2-22" aria-hidden="true" tabindex="-1"></a>        <span class="ex">└──</span> modules</span>

<span id="cb2-23"><a href="#cb2-23" aria-hidden="true" tabindex="-1"></a>            <span class="ex">└──</span> entry.html</span></code></pre></div>

</div>

</div>

</div>

</section>

<section id="visualization-1" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    subgraph Docker-Compose

        TornadoContainer["🌀 Tornado Container"]

        DBContainer["🐘 PostgreSQL Container"]

    end



    TornadoContainer -->|Connects via Port 5432| DBContainer

    User["🌍 User (Browser)"] -->|Port 8888| TornadoContainer

</pre>

</section>

<section id="visualization-2" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    subgraph Blog Service

        TornadoServer["Tornado Server"]
@@ -391,7 +531,7 @@ class="slide level2 small-header"> 
<li><strong>Steps to develop and build a React app</strong>:</li>

</ul>

<ol type="1">

<li>🛠️ <strong>Development</strong>:

<li><strong>Development</strong>:

<ul>

<li>Set up the project using tools like <code>create-react-app</code> or

Vite.</li>
@@ -399,25 +539,18 @@ Vite.</li> 
<li>Test locally with <code>npm start</code> (serves the app on

<code>localhost:3000</code>).</li>

</ul></li>

<li>🧪 <strong>Testing</strong>:

<ul>

<li>Use testing frameworks like Jest and React Testing Library.</li>

<li>Run unit/integration tests.</li>

</ul></li>

<li>📦 <strong>Build</strong>:

<li><strong>Build</strong>:

<ul>

<li>Run <code>npm run build</code> to create a production-optimized

bundle (static HTML/CSS/JS in <code>build/</code>).</li>

</ul></li>

<li>📦 <strong>Dockerize</strong>:

<li><strong>Deployment</strong>

<ul>

<li>Use a <code>Dockerfile</code> to serve the <code>build/</code>

directory via a web server like Nginx.</li>

</ul></li>

<li>🚀 <strong>Deployment</strong>:

<li>Serve the production-optimized bunlde e.g. via nginx in

<ul>

<li>Push the Docker image to a registry or deploy with tools like Docker

Compose, Kubernetes, or Heroku.</li>

<li><code>/data/www</code></li>

<li><code>/usr/share/nginx/html</code></li>

</ul></li>

</ul></li>

</ol>

</div>
@@ -436,7 +569,7 @@ backend</strong>.</li> 
</ul>

</div>

</section>

<section id="visualization-3" class="slide level2 very-small-header">

<section id="visualization-2" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

page/aidatho_tc_web_app_presentation.md

+96 −0
Original line number Diff line number Diff line
@@ -123,6 +123,102 @@ flowchart TD 
  - It connects to a separate PostgreSQL container for the database.

- Docker Compose is typically used to orchestrate both services.



<!-- ```yml

postgres:

  image: postgres:10.3

  environment:

    POSTGRES_USER: blog

    POSTGRES_PASSWORD: blog

    POSTGRES_DB: blog

  ports:

    - "3306"

blog:

  build: .

  links:

    - postgres

  ports:

    - "8888:8888"

  command: --db_host=postgres

```



```bash

.

├── documentation

├── README.md

└── tornado-backend

    ├── blog.py

    ├── docker-compose.yml

    ├── Dockerfile

    ├── README.md

    ├── requirements.txt

    ├── schema.sql

    ├── static

    │   └── blog.css

    └── templates

        ├── archive.html

        ├── base.html

        ├── compose.html

        ├── create_author.html

        ├── entry.html

        ├── feed.xml

        ├── home.html

        ├── login.html

        └── modules

            └── entry.html

``` -->



<div style="display: flex; gap: 2em; font-size: 16pt">



<div style="flex: 1">



```yml

postgres:

  image: postgres:10.3

  environment:

    POSTGRES_USER: blog

    POSTGRES_PASSWORD: blog

    POSTGRES_DB: blog

  ports:

    - "3306"

blog:

  build: .

  links:

    - postgres

  ports:

    - "8888:8888"

  command: --db_host=postgres

```



</div> <div style="flex: 1">



```bash

.

├── documentation

├── README.md

└── tornado-backend

    ├── blog.py

    ├── docker-compose.yml

    ├── Dockerfile

    ├── README.md

    ├── requirements.txt

    ├── schema.sql

    ├── static

    │   └── blog.css

    └── templates

        ├── archive.html

        ├── base.html

        ├── compose.html

        ├── create_author.html

        ├── entry.html

        ├── feed.xml

        ├── home.html

        ├── login.html

        └── modules

            └── entry.html

```



</div> </div>



</div>



---