Skip to content

Commit

Permalink
[015-Serverless] Fixes to Challenge 06, upload Slides (microsoft#809)
Browse files Browse the repository at this point in the history 
* add slides and updated CLI

* node.js update coach guide

* fix node.js function

* missing fix in student guide

* Delete 015-Serverless/Coach/Lectures.pptx

* Delete 015-Serverless/Student/Lectures.pptx

* Update Solution-06.md

Cleared spelling issues.

---------

Co-authored-by: Marc Garcia <marcgarcia@microsoft.com>
Co-authored-by: Peter C. Laudati <plaudati@hotmail.com>
  • Loading branch information
@marcosgm @jrzyshr
3 people authored Mar 12, 2024
1 parent e49b614 commit eb37103
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 75 deletions.
Binary file removed 015-Serverless/Coach/Lectures.pptx
View file
Binary file not shown.
132 changes: 76 additions & 56 deletions 015-Serverless/Coach/Solution-06.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Integration has changed in the new functions portal. Might have to go to the ol

## Step by Step Instructions

The Student Guide has step-by-step guidance for VSCode. The below instructions refer to the Azure Portal workflow, which can evolve over time and not be accurate.

### Help references

- [Create your first function in the Azure portal](https://docs.microsoft.com/azure/azure-functions/functions-create-first-azure-function)
Expand All @@ -19,7 +21,7 @@ In this task, you will create a new Node.js function triggered by Event Grid and

1. Using a new tab or instance of your browser navigate to the Azure Management portal, <http://portal.azure.com>.

2. Open the **ServerlessArchitecture** resource group, then select the Azure Function App you created whose name ends with **Events**. If you did not use this naming convention, make sure you select the Function App that you _did not_ deploy to in the previous exercise.
2. Open the **`ServerlessArchitecture`** resource group, then select the Azure Function App you created whose name ends with **Events**. If you did not use this naming convention, make sure you select the Function App that you _did not_ deploy to in the previous exercise.

3. Select **Functions** in the menu. In the **Functions** blade, select **+ New Function**.

Expand All @@ -31,45 +33,54 @@ In this task, you will create a new Node.js function triggered by Event Grid and

5. In the New Function form, fill out the following properties:

a. For name, enter **SavePlateData**
a. For name, enter **`SavePlateData`**

b. Select **Create**.

6) Replace the code in the new SavePlateData function with the following:
6) Replace the code in the new `SavePlateData` function with the following:

```javascript
module.exports = function(context, eventGridEvent) {
context.log(typeof eventGridEvent);
context.log(eventGridEvent);

context.bindings.outputDocument = {
fileName: eventGridEvent.data['fileName'],
licensePlateText: eventGridEvent.data['licensePlateText'],
timeStamp: eventGridEvent.data['timeStamp'],
exported: false
};

context.done();
};
const { app, output } = require('@azure/functions');

const cosmosOutput = output.cosmosDB({
databaseName: 'LicensePlates',
containerName: 'Processed',
createIfNotExists: true,
connection: 'cosmosDBConnectionString',
});

app.eventGrid('savePlateData', {
return: cosmosOutput,
handler: (event, context) => {
context.log('Event grid function processed event:', event);
return {
fileName: event.data['fileName'],
licensePlateText: event.data['licensePlateText'],
timeStamp: event.data['timeStamp'],
exported: false,
id: event.id
};
},
});
```

8. Select **Save**.

### Task 2: Add an Event Grid subscription to the SavePlateData function
### Task 2: Add an Event Grid subscription to the `SavePlateData` function

In this task, you will add an Event Grid subscription to the SavePlateData function. This will ensure that the events sent to the Event Grid topic containing the savePlateData event type are routed to this function.
In this task, you will add an Event Grid subscription to the `SavePlateData` function. This will ensure that the events sent to the Event Grid topic containing the `savePlateData` event type are routed to this function.

1. With the SavePlateData function open, select **Add Event Grid subscription**.
1. With the `SavePlateData` function open, select **Add Event Grid subscription**.

2. On the **Create Event Subscription** blade, specify the following configuration options:

a. **Name**: Unique value for the App name similar to **saveplatedatasub** (ensure the green check mark appears).
a. **Name**: Unique value for the App name similar to **`saveplatedatasub`** (ensure the green check mark appears).

b. **Event Schema**: Select Event Grid Schema.

c. For **Topic Type**, select **Event Grid Topics**.

d. Select your **subscription** and **ServerlessArchitecture** resource group.
d. Select your **subscription** and **`ServerlessArchitecture`** resource group.

e. For resource, select your recently created Event Grid.

Expand All @@ -79,11 +90,11 @@ In this task, you will add an Event Grid subscription to the SavePlateData funct

3. Leave the remaining fields at their default values and select **Create**.

### Task 3: Add an Azure Cosmos DB output to the SavePlateData function
### Task 3: Add an Azure Cosmos DB output to the `SavePlateData` function

In this task, you will add an Azure Cosmos DB output binding to the SavePlateData function, enabling it to save its data to the Processed collection.
In this task, you will add an Azure Cosmos DB output binding to the `SavePlateData` function, enabling it to save its data to the Processed collection.

1. Expand the **SavePlateData** function in the menu, then select **Integrate**.
1. Expand the **`SavePlateData`** function in the menu, then select **Integrate**.

2. Under Outputs, select **+ New Output**, select **Azure Cosmos DB** from the list of outputs, then select **Select**.

Expand All @@ -95,7 +106,7 @@ In this task, you will add an Azure Cosmos DB output binding to the SavePlateDat

5. Specify the following configuration options in the Azure Cosmos DB output form:

a. For database name, type **LicensePlates**.
a. For database name, type **`LicensePlates`**.

b. For the collection name, type **Processed**.

Expand All @@ -117,45 +128,54 @@ In this task, you will create a new function triggered by Event Grid and outputs

3. In the **New Function** form, fill out the following properties:

a. For name, type **QueuePlateForManualCheckup**.
a. For name, type **`QueuePlateForManualCheckup`**.

4. Select **Create**.

5. Replace the code in the new QueuePlateForManualCheckup function with the following:
5. Replace the code in the new `QueuePlateForManualCheckup` function with the following:

```javascript
module.exports = async function(context, eventGridEvent) {
context.log(typeof eventGridEvent);
context.log(eventGridEvent);

context.bindings.outputDocument = {
fileName: eventGridEvent.data['fileName'],
licensePlateText: '',
timeStamp: eventGridEvent.data['timeStamp'],
resolved: false
};

context.done();
};
const { app, output } = require('@azure/functions');

const cosmosOutput = output.cosmosDB({
databaseName: 'LicensePlates',
containerName: 'NeedsManualReview',
createIfNotExists: true,
connection: 'cosmosDBConnectionString',
});

app.eventGrid('queuePlateForManualCheckup', {
return: cosmosOutput,
handler: (event, context) => {
context.log('Event grid function processed event:', event);
return {
fileName: event.data['fileName'],
licensePlateText: '',
timeStamp: event.data['timeStamp'],
resolved: false,
id: event.id
};
},
});
```

6. Select **Save**.

### Task 5: Add an Event Grid subscription to the QueuePlateForManualCheckup function
### Task 5: Add an Event Grid subscription to the `QueuePlateForManualCheckup` function

In this task, you will add an Event Grid subscription to the QueuePlateForManualCheckup function. This will ensure that the events sent to the Event Grid topic containing the queuePlateForManualCheckup event type are routed to this function.
In this task, you will add an Event Grid subscription to the `QueuePlateForManualCheckup` function. This will ensure that the events sent to the Event Grid topic containing the `queuePlateForManualCheckup` event type are routed to this function.

1. With the QueuePlateForManualCheckup function open, select **Add Event Grid subscription**.
1. With the `QueuePlateForManualCheckup` function open, select **Add Event Grid subscription**.

2. On the **Create Event Subscription** blade, specify the following configuration options:

a. **Name**: Unique value for the App name similar to **queueplateFormanualcheckupsub** (ensure the green check mark appears).
a. **Name**: Unique value for the App name similar to **`queueplateFormanualcheckupsub`** (ensure the green check mark appears).

b. **Event Schema**: Select Event Grid Schema.

c. For **Topic Type**, select **Event Grid Topics**.

d. Select your **subscription** and **ServerlessArchitecture** resource group.
d. Select your **subscription** and **`ServerlessArchitecture`** resource group.

e. For resource, select your recently created Event Grid.

Expand All @@ -165,51 +185,51 @@ In this task, you will add an Event Grid subscription to the QueuePlateForManual

3. Leave the remaining fields at their default values and select **Create**.

### Task 6: Add an Azure Cosmos DB output to the QueuePlateForManualCheckup function
### Task 6: Add an Azure Cosmos DB output to the `QueuePlateForManualCheckup` function

In this task, you will add an Azure Cosmos DB output binding to the QueuePlateForManualCheckup function, enabling it to save its data to the NeedsManualReview collection.
In this task, you will add an Azure Cosmos DB output binding to the `QueuePlateForManualCheckup` function, enabling it to save its data to the `NeedsManualReview` collection.

1. Expand the QueuePlateForManualCheckup function in the menu, the select **Integrate**.
1. Expand the `QueuePlateForManualCheckup` function in the menu, the select **Integrate**.

2. Under Outputs, select **+ New Output** then select **Azure Cosmos DB** from the list of outputs, then select **Select**.

3. Specify the following configuration options in the Azure Cosmos DB output form:

> **Note**: If you see a notice for "Extensions not installed", click **Install**.
a. For database name, enter **LicensePlates**.
a. For database name, enter **`LicensePlates`**.

b. For collection name, enter **NeedsManualReview**.
b. For collection name, enter **`NeedsManualReview`**.

c. Select the **Azure Cosmos DB account connection** you created earlier.

4. Select **Save**.

### Task 7: Configure custom event types for the new Event Grid subscriptions

In this task, you will configure a custom event type for each new Event Grid subscription you created for your functions in the previous steps of this exercise. Currently the event types are set to All. We want to narrow this down to only the event types specified within the SendToEventGrid class in the TollBooth solution. This will ensure that all other event types are ignored by your functions.
In this task, you will configure a custom event type for each new Event Grid subscription you created for your functions in the previous steps of this exercise. Currently the event types are set to All. We want to narrow this down to only the event types specified within the `SendToEventGrid` class in the TollBooth solution. This will ensure that all other event types are ignored by your functions.

1. Using a new tab or instance of your browser navigate to the Azure Management portal, <http://portal.azure.com>.

2. Open the **ServerlessArchitecture** resource group, then select your Event Grid Topic.
2. Open the **`ServerlessArchitecture`** resource group, then select your Event Grid Topic.

3. At the bottom of the **Overview** blade, you will see both Event Grid subscriptions created from the functions. Select **saveplatedatasub**.
3. At the bottom of the **Overview** blade, you will see both Event Grid subscriptions created from the functions. Select **`saveplatedatasub`**.

4. Select the **Filters** tab, then _uncheck_ **Subscribe to all event types**.

5. Select the **Delete** button (x inside of a circle) on the **All** event type to delete it.

6. Select **Add Event Type**, then enter **savePlateData** into the event types field. If you specified a different name in the SendToEventGrid class in the TollBooth solution, use that instead.
6. Select **Add Event Type**, then enter **`savePlateData`** into the event types field. If you specified a different name in the `SendToEventGrid` class in the TollBooth solution, use that instead.

7. Select **Save**.

8. Select the **queueplateformanualcheckupsub** Event Grid subscription at the bottom of the **Overview** blade.
8. Select the **`queueplateformanualcheckupsub`** Event Grid subscription at the bottom of the **Overview** blade.

9. Select the **Filters** tab, then _uncheck_ **Subscribe to all event types**.

10. Select the **Delete** button (x inside of a circle) on the **All** event type to delete it.

11. Select **Add Event Type**, then enter **queuePlateForManualCheckup** into the event types field. If you specified a different name in the SendToEventGrid class in the TollBooth solution, use that instead.
11. Select **Add Event Type**, then enter **`queuePlateForManualCheckup`** into the event types field. If you specified a different name in the `SendToEventGrid` class in the TollBooth solution, use that instead.

12. Select **Save**.

Loading

0 comments on commit eb37103

Please sign in to comment.