View source for Training:Bootcamp/Start

{{Edited|July|12|2025}}
<html>
    <style>
        body {
           
        }
      
        .title {
            font-size: 48px;
            font-weight: 700;
            margin: 20px 0;
        }
        .subtitle {
            background: rgba(255, 218, 187, 0.45);
            font-size: 24px;
            font-weight: 700;
            margin: 0 auto;
            padding: 10px;
        }
        .section {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 10px;
        }
        .section-icon {
            flex: 1;
            text-align: left;
        }
        .section-text {
            flex: 3;
            font-size: 20px;
            font-weight: 700;
            text-align: left;
        }
        .section-arrow {
    flex: 1;
    text-align: right;
    display: flex;
}

.section-arrow svg {
    transition: transform 0.3s ease;
}

.section-arrow svg.collapsed {
    transform: rotate(90deg);
}

.section-content {
    display: none;
    margin-top: 10px;
}

.section-content.expanded {
    display: block;
}
.section-content {
    display: none;
    margin-top: 10px;
    border-radius: 30px;
    background:white;
    padding: 20px;
}

.section-content.expanded {
    display: block;
}

.content-title {
    font-weight:bold;
}
.next-steps-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;

}

.mw-body-content {
    background-image: url('https://wiki.mdriven.net/images/beforestarting_bootcamp_desktop.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
    max-height: 500px;
    width: auto;
}

.button-container {
    display: flex;
    justify-content: center;
    padding: 50px;
}
.start-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    background: #FFDABB;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.start-button:hover {
    background-color: #FFBF80;
}

@media (max-width: 768px) {
    .section-text {
        font-size: 17px;
        padding-left: 20px;
    }
   .section-arrow {
    padding-right: 5px;
}
}
@media (max-width: 767px) {
    #mw-content-text.mw-body-content.mw-content-ltr {
        background-image: url('https://wiki.mdriven.net/images/beforestarting_bootcamp_mobile.webp');
        padding: 1em;
    }
}

    </style>
    <div class="container">
      <div class="next-steps-header">
        <div class="title">BOOTCAMP</div>
        <div class="subtitle">BEFORE STARTING GUIDE</div>
      </div>

   <!-- Section 1 -->
       
       <div class="section" onclick="toggleSection(this)">
    <div class="section-icon">
        <img src="https://wiki.mdriven.net/images/1/1a/Before_Starting_Guide.png" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>
<div class="section-content">
    <div class="content-text">
       <p>This is what you can expect as you take on MDriven's Bootcamp.</p>

<span class="content-title">ENGAGEMENT<br/></span>
<p>If you want to understand MDriven or achieve meaningful results, learning how to use it is important. Creating information systems for real-world applications can be complicated, but life itself is complex. We strive to simplify the mastery of MDriven for everyone interested in exploring its capabilities, ensuring you can revisit and enhance your knowledge as needed. Each step is accompanied by a video tutorial, screenshots, GIFs and instructions in text - making the learning process as natural as if we were right there with you.</p>

<span class="content-title">PARTICIPATION<br/></span>
<p>Learn how to handle the tool, including adding classes and creating associations. We have noticed that it can be challenging for people to use the tool for the first time, so we dedicate extra effort to these initial steps to ensure you understand the concepts fully. For instance, we emphasize separating the model as a repository with all the classes instead of using diagrams that only display part of the model.</p>

<span class="content-title">COMPLETION<br/></span>
<p> How long will it take you to complete Bootcamp? Well, that depends on where you fit into these three paths:</p>
<ol>
    <li>Beginner: You may need up to 3 months or more to learn MDriven.</li>
    <li>Intermediate: It may take you 2 months to grasp all the concepts.</li>
    <li>Advanced: You may learn everything in 1 month.</li>
</ol>

<ul>
    <li>Each path is a piece of the journey. Ensure you understand each concept in order to benefit from the knowledge in your own model. </li>
    <li>MDriven ModelCraft is an additional learning course that helps you to:</li>
    <ul>
        <li>Learn to think like a modeler</li>
        <li>Master modeling</li>
    </ul>
</ul>
    </div>
</div>

 <!-- Section 2 -->

<div class="section" onclick="toggleSection(this)">
    <div class="section-icon">
        <img src="https://wiki.mdriven.net/images/6/6b/Before_Starting_Guide_%282%29.png" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">MATERIALS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>

<div class="section-content">
    <div class="content-text">
        <span class="content-title">ESSENTIALS<br/></span>
    <p>Before you begin, make sure you have the following essentials in place:</p>
    <ul>
        <li>A computer with a Windows operating system</li>
        <li>A modern web browser for development (Google Chrome, Mozilla Firefox, or Microsoft Edge)</li>
    </ul>

<span class="content-title">DUAL LEARNING:<br/></span>
    <p><strong>Videos</strong><br/>
        Starting from Chapter 1, a video tutorial serves as a guide for you to learn how to use MDriven Designer. Each video covers a number of steps showcasing a different area of the Designer. The videos become increasingly more complex as you gain more experience and understanding.
    </p>

<p><strong>Wiki: Text Instructions</strong><br/>
        The instructions are laid out in a text format in the Wiki. You can follow along via text to ensure you don’t miss anything. Screenshots and GIFs are also included.
    </p>

<span class="content-title">ADDITIONAL LEARNING RESOURCES<br/></span>
    <ul>
        <li>The MDriven Book: Read the book to internalize the philosophy upon which MDriven’s approach to model-driven development is built.</li>
        <li>UML School: Provides insight into UML (Unified Modeling Language).</li>
    </ul>
</div>
</div>

 <!-- Section 3 -->

<div class="section" onclick="toggleSection(this)">
    <div class="section-icon">
        <img src="https://wiki.mdriven.net/images/9/92/MDrivenLearn_Showcase_%285%29.png" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">INSTALLATION</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>

<div class="section-content">
    <div class="content-text">
      <p> Type <span style="color:#F67A07"> mdriven.net </span> into your browser.
    <img src="https://wiki.mdriven.net/images/0/0c/2024-05-22_12h44_16_1.png" alt="MDriven" class="content-image">
<p>To use MDriven Designer, you have two options (see:
    <a href="your-link-here" class="content-link">MDriven Shorts | How to install MDriven Designer?</a>
):</p>

<span class="content-title">Option 1: (Blue)<br/></span>

<p>Start MDrivenDesigner by clicking the "Run with ClickOnce" link at:
    <a href="https://mdriven.net/designer" class="content-link">https://mdriven.net/designer</a>.
</p>

<p>You can choose to always run the MDriven Designer online using "Run with ClickOnce".</p>

 <img src="https://wiki.mdriven.net/images/f/f0/2024-05-22_12h44_48_1.png" alt="MDriven" class="content-image">
        
   <span class="content-title">Option 2: (Red)<br/></span>
   
    <p>You can decide to download and install the MDriven Designer, running it locally and making it available offline.</p>
   
    <p>Download using either Google Chrome or Microsoft Edge (Internet Explorer is not a viable option).</p>
   
    <p>Downloading may take some time if there is a new version.</p>
   
    <p>If you're using Chrome, install the Cegid Peoplenet ClickOnce launcher extension from the Chrome Web Store (Microsoft Edge does not need a plug-in).</p>
</div>
</div>

 <!-- Section 5 -->

<div class="section" onclick="toggleSection(this)">
    <div class="section-icon">
        <img src="https://wiki.mdriven.net/images/2/26/Before_Starting_Guide_%283%29.png" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">SUPPORT</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>

<div class="section-content">
    <div class="content-text">
      <span class="content-title">SUPPORT<br/></span>
   
    <p>Ask questions or seek help when you need it.</p>
   
    <p><strong>Wiki</strong><br/>
    The MDriven Wiki contains answers to most of the questions and issues you may face. Use the Search bar or check out the Search Center.</p>
   
    <p><strong>StackOverflow</strong><br/>
    Get insight from our channel on StackOverflow. Check out the responses to the queries of other users.</p>

<span class="content-title">PAID SUPPORT<br/></span>
   
    <p>Register your query or report a bug using the Support registration form or send an email directly to the MDriven Team here:
        <a href="mailto:support@mdriven.net" class="content-link">support@mdriven.net</a>
    </p>
</div>
</div>

<div class="button-container">
    <a href="/index.php/Training:Bootcamp/Start/Levels" class="start-button">Click here to START BOOTCAMP</a>
</div>
    </div>
<script>
    function toggleSection(section) {
        const arrowContainer = section.querySelector('.section-arrow');
        const content = section.nextElementSibling;
        const isExpanded = content.classList.toggle('expanded');
       
        if (isExpanded) {
            arrowContainer.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
                    <path d="M3.97048 10.9169C4.42569 10.5302 5.043 10.313 5.68667 10.313C6.33033 10.313 6.94764 10.5302 7.40285 10.9169L19.4186 21.1262L31.4343 10.9169C31.8921 10.5412 32.5053 10.3333 33.1418 10.338C33.7782 10.3427 34.387 10.5596 34.8371 10.942C35.2872 11.3244 35.5425 11.8417 35.548 12.3825C35.5535 12.9233 35.3088 13.4442 34.8667 13.8332L21.1348 25.5008C20.6796 25.8875 20.0622 26.1047 19.4186 26.1047C18.7749 26.1047 18.1576 25.8875 17.7024 25.5008L3.97048 13.8332C3.51541 13.4465 3.25977 12.9219 3.25977 12.375C3.25977 11.8281 3.51541 11.3036 3.97048 10.9169Z" fill="black"/>
                </svg>`;
        } else {
            arrowContainer.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
                    <g clip-path="url(#clip0_2800_1942)">
                        <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
                    </g>
                    <defs>
                        <clipPath id="clip0_2800_1942">
                            <rect width="38.8387" height="33" fill="white"/>
                        </clipPath>
                    </defs>
                </svg>`;
        }
    }
</script>
</html>

== Prepare for the first Bootcamp chapter ==

Start with [[Training:Bootcamp:Chapter 1|Chapter 1]]. Its first step directs learners to follow the installation instructions in the Before Starting Guide.

=== First exercise ===
Chapter 1 begins with MDriven Designer and a local model file:

# Create a new empty model.
# Save the model on your device. The chapter example uses <code>c:\temp\MDrivenEducation\Start.modlr</code>, or an equivalent location.
# Create the <code>Person</code> class.
# Add a <code>Name</code> attribute of type string.
# Save regularly with <code>CTRL + S</code>.
# Select the Play button, choose XML persistence, select <code>Start system</code>, and then select <code>Show debugger</code>.
# Continue the chapter steps to create two <code>Person</code> objects and save them from the debugger.

The Chapter 1 exercise uses XML persistence. It also instructs learners to locate the saved XML file in the same location as the model file.

=== Local web application exercise ===
[[Training:Bootcamp:Chapter 3|Chapter 3]] introduces starting a local web application from MDriven Designer. The documented sequence is:

# Select the Play button and choose <code>LocalTurnkeyPrototyper</code>.
# Select <code>Check MDriven Turnkeycore</code> to download the latest MDriven Turnkey version for .NET Core.
# Select <code>Start local MDriven Turnkeycore</code>.
# Open the local address in a web browser.

The documented default port is <code>8182</code>, so the example address is <code>http://localhost:8182</code>. Use the port shown by the local process if it differs.

=== Learning materials ===
The Bootcamp is organized as step-by-step exercises. Chapter 1 states that its steps are intended to be followed progressively and revisited when needed. The Bootcamp overview also describes short instructions with screenshots, GIFs, and video tutorials.

=== Common issue in Chapter 3 ===
If the terminal appears broken when starting local MDriven Turnkeycore, Chapter 3 says this can be caused by a file lock from the installation. Restart MDriven Designer and repeat the start step.

== Bootcamp at a glance ==
Use this Bootcamp for a practical, hands-on introduction to building software systems with MDriven Designer. The course focuses on visual models rather than writing code alone.

=== What the Bootcamp covers ===

The Bootcamp introduction says that the course includes:

* Modeling and managing CRUD operations.
* Debugging systems.
* Generating diagrams and user interfaces.
* Working with OCL, Action Language, and OCL-PS.
* Building and deploying web applications.
* Designing responsive user interfaces with placing containers and layout principles.
* Applying inheritance and state machines to model behavior.
* Setting up authentication and user management.
* Understanding and configuring MDriven Server for online deployment.

=== Start with Chapter 1 ===

Follow the installation instructions in the Before Starting Guide, then begin with [[Training:Bootcamp:Chapter 1|Chapter 1]]. Chapter 1 starts with an empty model and guides you through:

* Creating and saving a model.
* Creating a <code>Person</code> class and a string <code>Name</code> attribute.
* Running the model with XML persistence.
* Using the Debugger and the <code>person.allinstances</code> expression to inspect objects.
* Creating and saving <code>Person</code> objects and confirming that their XML data persists beside the model file.
* Creating a <code>Car</code> class, associating it with <code>Person</code>, and adding a <code>RegistrationNumber</code> attribute.

Save the model often with <code>Ctrl+S</code>.

=== Interface layout example ===

Later exercises include responsive interface layout. For example, Chapter 8 uses placing containers to organize ViewModel content. Its exercises cover row and column direction, grow settings, wrapping, alignment, margins, and save-button visibility and enabled-state behavior.

=== How to use the material ===

The Bootcamp advises working through the steps gradually. If you lose your way, return to a step related to the concept you are working on and continue from there.
== See also ==
* [[Training:Bootcamp:Chapter 1|Bootcamp: Chapter 1]]
* [[Training:Bootcamp:Chapter 3|Bootcamp: Chapter 3]]
* [[Training:Bootcamp:Chapter 1|Bootcamp Chapter 1]]
* [[Training:Bootcamp:Chapter 8|Bootcamp Chapter 8]]