# Development Tool

## General information

"Development Tool" in this context refers to the totality of tools that are necessary to develop code, also known as "Integrated Development Environment" (IDE).&#x20;

An IDE is a software that provides tools for software development in a compact way. It usually includes a source code editor to write the code, build automation tools to build, compile and run the code as well as a debugger to help detect and fix errors within the code.

## Visual Studio

Visual Studio is an IDE developed by Microsoft. Other than the basic tools required for software development, Visual Studio provides a variety of additional features that facilitate the process, such as compilers and code completion tools.

For more information: [https://visualstudio.microsoft.com/](https://visualstudio.microsoft.com/)

## Benefits of Visual Studio

We are using Visual Studio as IDE for many reasons:

* the Community edition is open-source, so no need to pay anything
* the installation is easy (see below)
* it comes with many features that are helpful in developing code, such as IntelliSense (automatic completion, correction, suggestion and formatting of code)
* you can install more tools and features, such as .NET Framework libraries (see article .NET Framework)
* you can install extensions, such as the GitHub extension, which allows you to collaborate in GitHub repositories and conveniently commit changes (see below)
* it is continuously being fixed, improved and extended
* it is used by many organizations and developers, so there is a lot of content about code developed with Visual Studio on the web, which is especially helpful when you seek a solution for a problem

## Installation

If Visual Studio is not already installed on the computer provided to you, you can install it by following these steps:

1. Go to the Visual Studio download page: [https://visualstudio.microsoft.com/downloads/](https://visualstudio.microsoft.com/downloads/)
2. Download the Free Community edition for Windows
3. Click on the downloaded execution file
4. Follow the installation wizard and make sure that the options "ASP.NET and web development" and ".NET desktop development" are checked under the tab "Workloads" to be able to use .NET (see article ".NET Framework")

## Accessing the repository

1. Ask the admin to send you an invitation to the GitHub repository of the project you are assigned to (If you don't have a GitHub account yet, create one)
2. Open Visual Studio
3. Click "File" > "Clone repository"
4. Click "GitHub" under "Browse a repository"
5. Select the project you are assigned to under "Collaborator repositories"
6. Click "Clone" \*\*\*

## Solution Explorer

The Solution Explorer is the window on the far right that lets you navigate through all the files associated with the project you are currently working on. Clicking on a file opens it in the editor window and double-clicking on a file additionally pins it on the tab navigation for later use. You can also search for a specific file/directory/function name in the search bar.&#x20;

If the Solution Explorer is not visible, you can open it by going to the "View" menu in the toolbar and clicking "Solution Explorer".

## Debugger

{% embed url="https://youtu.be/feWeInify18" %}

## Committing Changes

1. Switch from "Solution Explorer" tab to "Git changes" tab (if tab is not visible, go to "View" menu in the toolbar and click "Git Changes")
2.  Go through the changes listed in the "Git changes" and check if they are all correct. You can undo unwanted changes by clicking on the arrow icon (which shows when you hover over the file you want to restore). Also, summarize the changes in a text editor for the Commit Description according to the standard described below.&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2Fv2tJKSnrAX35S2HbOZ0Z%2Fimage.png?alt=media&#x26;token=437efbd4-c951-43bc-b75f-8166afe6661e" alt=""><figcaption></figcaption></figure>
3.  Click the arrow next to "Commit All" and select "Stash All" to store all uncommitted changes&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FFpg9alhHXuhSyctWotjg%2Fimage.png?alt=media&#x26;token=88d30ac1-8fb6-4608-8632-b8ec45f7a0df" alt=""><figcaption></figcaption></figure>
4.  Click "Fetch" to check if there are new commits by other programmers&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FOzV0tGfBgX6DpEu4w7Wa%2Fimage.png?alt=media&#x26;token=ad620eb0-c350-4211-9374-8db09044e20b" alt="the dotted downward arrow in the top right corner"><figcaption></figcaption></figure>
5.  If there are new commits by others, click "Pull" to include their changes&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FOCopNoEg2aLFCEHpRPAW%2Fimage.png?alt=media&#x26;token=1c5e8baf-3aaa-4ba4-a33c-90119de81137" alt="the downward arrow next to &#x22;Fetch&#x22;"><figcaption></figcaption></figure>
6. Right-click on the Stash that you created and select "Apply" or "Pop" to automatically verify for conflicts between your commit and the committed changes by others. If there is no conflict, your changes will be applied to the code branch (and if you clicked “Pop” instead of “Apply”, the Stash additionally gets deleted). If there is conflict, "Merge" has to be performed for all files that contain conflicts (deciding which lines of code from either version should be kept, removed, adjusted, etc) before the changes can be applied. (Run the code to test if the merged version causes any errors)
7. Delete unused files, including automatically created files, such as ... .
8.  Stage all your changes by clicking the "+" icon in the top right corner of "Changes"&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FdwPTmUtVpIuiyz0jP9bw%2Fimage.png?alt=media&#x26;token=a2d64580-a0ba-4c96-82bf-584842acbe7a" alt=""><figcaption></figcaption></figure>
9.  Paste the Commit Description you prepared in the text editor into the text box of the "Git changes" tab (after adjusting it in case your commit changed due to the "Merge")&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FQrcVxN5oYAHpGyr6h5IO%2Fimage.png?alt=media&#x26;token=1bb33926-e7dc-4b26-87f3-a5e9a47df589" alt=""><figcaption></figcaption></figure>
10. Click "Commit All" and then click "Push" (the upward arrow next to "Pull") to commit your changes to the GitHub repository&#x20;

    <figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2FbOaNYClPgHGII5JoAmWE%2Fimage.png?alt=media&#x26;token=2735fe15-d219-448c-8c14-ec44ca375214" alt=""><figcaption></figcaption></figure>

## Commit Description

When committing changes, it is important to always provide a Commit Description, so that the other developers can quickly look up what changes have been made. To save time and to make it overviewable, we have a standard that serves as guideline when writing a Commit Description: Every change starts with the type of change within "\[ ]" brackets which is followed by a description that depends on the type. In the following, the categorization of the types, when to use them and their standard descriptions are presented:

* \[DB] is used when changes have been made to the database. It is followed by the name of the Migration file and a short description of the change including the names of the affected data tables.
* \[ADD] or \[NEW] is used when new files have been created. It is followed by the names of the added files as well as the purpose of adding these files (e.g. migration to new framework). In case a whole webpage/module has been newly added, it is sufficient to only write the name of the overall webpage/module instead of the name of every single file.
* \[UPDATE] is used when a function within a file has been newly added or significantly changed (e.g. when a parameter has been added or removed). It is followed by the name of the function as well as a short description of the update.
* \[(BUG)FIX] is used when a functionality that has been erroneous before has been fixed. It is followed by the name(s) of the file(s) that contained the bug as well as a short description of the bug (e.g. name of the erroneous function)
* \[REMOVE] is used when a file has been removed. It is followed by the name of the removed files(s) as well as the purpose of removing these files.
