<commit_before># Hands on Lab - Modern Applications (Java)

## Overview

City Power & Light is a sample application that allows citizens to to report "incidents" that have occured in their community.  It includes a landing screen, a dashboard, and a form for reporting new incidents with an optional photo.  The application is implemented with several components:

* Front end web application contains the user interface and business logic.  This component has been implemented three times in .NET, NodeJS, and Java.
* WebAPI is shared across the front ends and exposes the backend DocumentDB
* DocumentDB is used as the data persistence layer

In this lab, you will work with an existing API to connect to the web application front end. This will allow you perform CRUD operations for incidents. You will also configure additional Azure features for Redis Cache, Azure Storage Queues, and Azure Blob Storage.

> This guide uses [Eclipse](https://eclipse.org) for editing, however please feel free to use your editor of choice.

## Objectives

In this hands-on lab, you will learn how to:

* Use Eclipse to connect to an API
* Deploy the application to an Azure Web App
* Modify a view to add caching
* Modify code to add queuing and blob storage

## Prerequisites

* The source for the starter app is located in the HOL\node\modern-cloud-apps\start folder.
* The finished project is located in the HOL\node\modern-cloud-apps\end folder.
* Deployed the starter ARM Template

## Exercises

This hands-on-lab has the following exercises:

* Exercise 1: Integrate the API
* Exercise 2: Add a caching layer
* Exercise 3: Write images to Azure Blob storage

## Exercise 1: Integrate the API

1. Download or `git clone` the source files to your local machine

1. Navigate to the `HOL\node\modern-cloud-apps\start` folder in a terminal window

1. Run `gradle eclipse` to restore all dependencies and configure the
   project paths for Eclipse

    ![image](./media/image-001.png)

1. Once package restoration completes, open the **start** folder in VSCode

    > If you have added `code` to your command line path you can simply run `code .` from the prompt

    ![image](./media/image-002.png)

1. Let's run the application in Debug Mode.  Click the Debug icon on the left toolbar, then select the green "start" triangle.  In the Environment dropdown select **Node.js**.  VSCode then scaffolds out the files that it needs for debugging support in a launch.json file, stored at the root of your poject folder in a `.vscode` folder.  Click the green start triangle a second time to launch the application.

    ![image](./media/image-003.png)

1. Open a browser and navigate to `http://localhost:3000`. You should now see the running application

    ![image](./media/image-004.png)

1. On the Dashboard page, notice how the incidents are stubbed in.

    ![image](./media/image-005.png)

    As part of the original ARM template we deployed an ASP.NET WebAPI that queries a DocumentDB Collection. Let's integrate that API so that the incidents are dynamically pulled from a data store.

1. In the [Azure Portal](https://portal.azure.com) navigate to the resource group that you created with the original ARM template.  Resource Groups can be found on the left hand toolbar -> More Services -> Resource Groups.

    Select the API app that begins with the name **incidentsapi** followed by a random string of characters.

    ![image](./media/image-006.png)

1. The window that slides out is called a **blade** and contains information and configuration options for the resource.

    On the top toolbar, select **Browse** to open the API in a new browser window.

    ![image](./media/image-007.png)

    You should be greeted by the default ASP.NET landing page
    ![image](./media/image-008.png)

1. Since we provisioned a new instance of DocumentDB, there are not any records to use as sample data.  To generate sample data, our API has a route that can be hit at any time to reset the documents in our collection.  In the browser, add `/incidents/sampledata` to your API's URL to generate sample documents.

1. After navigating to the sampledata route, let's verify that the documents were created in DocumentDB. In the Azure Portal, navigate to the Resource Group blade and select the DocumentDB resource.

    ![image](./media/image-010.png)

    Select the one database, and then select the **incidents** collection.<commit_msg>started adding java content<commit_after># Hands on Lab - Modern Applications (Java)

## Overview

City Power & Light is a sample application that allows citizens to to report "incidents" that have occured in their community.  It includes a landing screen, a dashboard, and a form for reporting new incidents with an optional photo.  The application is implemented with several components:

* Front end web application contains the user interface and business logic.  This component has been implemented three times in .NET, NodeJS, and Java.
* WebAPI is shared across the front ends and exposes the backend DocumentDB
* DocumentDB is used as the data persistence layer

In this lab, you will work with an existing API to connect to the web application front end. This will allow you perform CRUD operations for incidents. You will also configure additional Azure features for Redis Cache, Azure Storage Queues, and Azure Blob Storage.

> This guide uses [Eclipse STS](https://spring.io/tools) for editing, however please feel free to use your editor of choice.

## Objectives

In this hands-on lab, you will learn how to:

* Use Eclipse to connect to an API
* Deploy the application to an Azure Web App
* Modify a view to add caching
* Modify code to add queuing and blob storage

## Prerequisites

* The source for the starter app is located in the HOL\node\modern-cloud-apps\start folder.
* The finished project is located in the HOL\node\modern-cloud-apps\end folder.
* Deployed the starter ARM Template

## Exercises

This hands-on-lab has the following exercises:

* Exercise 1: Integrate the API
* Exercise 2: Add a caching layer
* Exercise 3: Write images to Azure Blob storage

## Exercise 1: Integrate the API

1. Download or `git clone` the source files to your local machine

1. Navigate to the `HOL\node\modern-cloud-apps\start` folder in a terminal window

1. Run `gradle eclipse` to restore all dependencies and configure the
   project paths for Eclipse

    ![image](./media/image-001.png)

1. Once package restoration completes, open Eclipse STS and Import the  **start** folder

    ![image](./media/image-002.png)

1. Let's run the application in Debug Mode.  Click the Debug icon on
   the top toolbar, then select "Debug Configurations...".   Click on
   "Spring Boot App" and click the + icon in the top left to create a
   new run configuration.  Choose the Start project,
   devCamp.WebApp.DevcampApplication for the main type, and click
   "Apply" and "Run".

    ![image](./media/image-003.png)
    ![image](./media/image-003a.png)
    ![image](./media/image-003b.png)

1. Open a browser and navigate to `http://localhost:8080`. You should now see the running application

    ![image](./media/image-004.png)

1. On the Dashboard page, notice how the incidents are stubbed in.

    ![image](./media/image-005.png)

    As part of the original ARM template we deployed an ASP.NET WebAPI that queries a DocumentDB Collection. Let's integrate that API so that the incidents are dynamically pulled from a data store.

1. In the [Azure Portal](https://portal.azure.com) navigate to the resource group that you created with the original ARM template.  Resource Groups can be found on the left hand toolbar -> More Services -> Resource Groups.

    Select the API app that begins with the name **incidentsapi** followed by a random string of characters.

    ![image](./media/image-006.png)

1. The window that slides out is called a **blade** and contains information and configuration options for the resource.

    On the top toolbar, select **Browse** to open the API in a new browser window.

    ![image](./media/image-007.png)

    You should be greeted by the default ASP.NET landing page
    ![image](./media/image-008.png)

1. Since we provisioned a new instance of DocumentDB, there are not any records to use as sample data.  To generate sample data, our API has a route that can be hit at any time to reset the documents in our collection.  In the browser, add `/incidents/sampledata` to your API's URL to generate sample documents.

1. After navigating to the sampledata route, let's verify that the documents were created in DocumentDB. In the Azure Portal, navigate to the Resource Group blade and select the DocumentDB resource.

    ![image](./media/image-010.png)

    Select the one database, and then select the **incidents** collection.
{'fraction_non_alphanumeric': 0.06812762575224253, 'fraction_numerical': 0.011127512206199614, 'mean_word_length': 3.852892561983471, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 10, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5983758', 'n_tokens_mistral': 2400, 'n_tokens_neox': 2222, 'n_words': 1262}