Exercise 6 updates.
kylebunting
|
|
@ -1392,57 +1392,48 @@ In this task, you will create a Function App in Azure, which will host your Func
|
|||
|
||||
1. In the Azure portal, select **+Create a resource**, enter "function app" in to the **Search the marketplace** box, and select **Function App** from the results.
|
||||
|
||||
|
||||
|
||||
|
||||
2. On the **Function App** blade, select **Create**.
|
||||
|
||||
3. On the **Create Function App** blade, enter the following:
|
||||
|
||||
- **App name:** Enter a unique name, such as "bestforyouordersSUFFIX".
|
||||
|
||||
- **Subscription:** Select the subscription you are using for this hands-on lab.
|
||||
|
||||
- **Resource group:** Select **Use existing** and choose the **hands-on-lab-SUFFIX** resource group.
|
||||
|
||||
- **OS:** Select Windows.
|
||||
|
||||
- **Hosting Plan:** Choose Consumption Plan.
|
||||
|
||||
- **Location:** Select the location you have been using for resources in this hands-on lab.
|
||||
|
||||
- **Runtime Stack** Select JavaScript
|
||||
|
||||
- **Storage:** Select **Create new** and enter "bestforyouorders" for the name.
|
||||
|
||||
- **Application Insights** Select Off.
|
||||
|
||||
- **Runtime Stack** Select JavaScript.
|
||||
- **Storage:** Select **Create new** and enter "bestforyouordersSUFFIX" for the name.
|
||||
- **Application Insights** Select Disabled.
|
||||
- Select **Create** to provision the new Function App.
|
||||
|
||||
|
||||
|
||||
|
||||
### Task 2: Configure storage queues
|
||||
|
||||
In this task, you will add two storage queues to the storage account provisioned when you created your Function App. These queues will be used to store orders and notifications needing to be processed.
|
||||
|
||||
1. In the Azure portal, navigate to the new **bestforyouorders storage account** that was created when you provisioned your Function App, by selecting **Resource groups** from the left-hand menu, selecting your **hands-on-lab-SUFFIX** resource group from the list, and then selecting the **bestforyouorders storage account**.
|
||||
|
||||
|
||||
1. In the Azure portal, navigate to the new **bestforyouordersSUFFIX** storage account that was created when you provisioned your Function App, by selecting **Resource groups** from the left-hand menu, selecting your **hands-on-lab-SUFFIX** resource group from the list, and then selecting the **bestforyouordersSUFFIX** storage account.
|
||||
|
||||
|
||||
|
||||
2. Select **Queues** from the **Services** area of the **Overview** blade.
|
||||
|
||||
|
||||
|
||||
|
||||
3. On the **Queue service** blade, select **+Queue** to add a new queue.
|
||||
|
||||
|
||||
|
||||
|
||||
4. In the **Add** queue dialog, enter **orderqueue** for the **Queue name**, and select **OK**.
|
||||
|
||||
|
||||
|
||||
|
||||
5. Select **+Queue** again, and this time enter "notificationqueue" for the **Queue name**.
|
||||
|
||||
|
||||
|
||||
|
||||
### Task 3: Create Cosmos DB trigger function
|
||||
|
||||
|
|
@ -1450,222 +1441,206 @@ In this task, you will create a function that will be triggered whenever a docum
|
|||
|
||||
1. When the Function App has deployed, navigate to the new Function App in the Azure portal, by selecting the **notifications icon**, then select **Go to resource** for the Function App notification.
|
||||
|
||||
|
||||
|
||||
|
||||
2. From the left-hand menu on your **Function Apps** blade, select **Functions**, then select **+New function**.
|
||||
|
||||
|
||||
|
||||
|
||||
3. In the trigger search box, enter "cosmos," and select the **Azure Cosmos DB trigger**.
|
||||
|
||||
|
||||
|
||||
|
||||
4. Install any extensions required when prompted.
|
||||
4. Install any extensions required when prompted.
|
||||
|
||||
|
||||
|
||||
5. In the **Azure Cosmos DB trigger** dialog, enter the following:
|
||||
|
||||
|
||||
- **Name**: Enter "OrdersCosmosTrigger".
|
||||
|
||||
- **Azure Cosmos DB account connection**: Select **new**, then select the **best-for-you-db DocumentDB** Account.
|
||||
|
||||
- **Azure Cosmos DB account connection**: Select **new**, then select the **best-for-you-db** Cosmos DB Account.
|
||||
- **Collection name:** Enter orders (use all lowercase, as case matters).
|
||||
|
||||
- **Create lease collection if it does not exist:** Leave this checked.
|
||||
|
||||
- **Database name:** Enter "best-for-you-organics".
|
||||
|
||||
- **Collection name for leases:** Leave set to leases.
|
||||
|
||||
- Select **Create**.
|
||||
|
||||
|
||||
|
||||
|
||||
5. After the function is created, select **Integrate** under the new function.
|
||||
6. After the function is created, select **Integrate** under the new function.
|
||||
|
||||
|
||||
|
||||
|
||||
6. Change the Document collection parameter name to "newOrders" for the **Azure Cosmos DB trigger** and select **Save**.
|
||||
7. Change the Document collection parameter name to "newOrders" for the **Azure Cosmos DB trigger** and select **Save**.
|
||||
|
||||
|
||||
|
||||
|
||||
7. Next, select **+New Output**, select **Azure Queue Storage**, and select **Select**.
|
||||
8. Next, select **+New Output**, select **Azure Queue Storage**, and select **Select**.
|
||||
|
||||
|
||||
|
||||
|
||||
8. Install extensions if prompted to do so.
|
||||
9. Install extensions if prompted to do so.
|
||||
|
||||
9. For the **Azure Queue Storage output**, enter the following:
|
||||
|
||||
|
||||
10. For the **Azure Queue Storage output**, enter the following:
|
||||
|
||||
- **Message parameter name**: outputQueue
|
||||
|
||||
- **Queue name:** orderqueue (all lowercase, as casing matters)
|
||||
|
||||
- **Storage account collection:** Select **AzureWebJobsStorage** from the list (this is the bestforyouorders storage account you created when you provisioned your Function App).
|
||||
|
||||
- Select **Save**.
|
||||
|
||||
|
||||
|
||||
|
||||
10. Now, select the **OrdersCosmosTrigger** function in the left-hand menu.
|
||||
11. Now, select the **OrdersCosmosTrigger** function in the left-hand menu.
|
||||
|
||||
|
||||
|
||||
|
||||
11. To get the code for the OrdersCosmosTrigger function, go into the project is VS Code, expand the AzureFunctions folder, select **OrdersCosmosTrigger.js**, and copy the code, as highlighted in the screen shot below.
|
||||
12. To get the code for the OrdersCosmosTrigger function, go into the project is VS Code, expand the AzureFunctions folder, select `OrdersCosmosTrigger.js`, and copy the code, as highlighted in the screen shot below.
|
||||
|
||||
|
||||
|
||||
|
||||
12. Paste the code into the **index.js** block, overwriting all the existing code, and select **Save**. Your index.js file should now look like the following:
|
||||
13. Paste the code into the `index.js` block, overwriting all the existing code, and select **Save**. Your `index.js` file should now look like the following:
|
||||
|
||||
|
||||
|
||||
|
||||
13. Next, select **Logs** below the code block, so you can observe the Function being called during the next steps.
|
||||
14. Next, select **Logs** below the code block, so you can observe the Function being called during the next steps.
|
||||
|
||||
|
||||
|
||||
|
||||
14. To trigger the function, return to the starter application in your browser window, and select **Sign In**.
|
||||
15. To trigger the function, return to the starter application in your browser window, and select **Sign In**.
|
||||
|
||||
|
||||
|
||||
|
||||
15. On the Login screen, enter the following credentials, and select **Login**:
|
||||
16. On the Login screen, enter the following credentials, and select **Login**:
|
||||
|
||||
- **Email address:** <demouser@bfyo.com>
|
||||
|
||||
- **Password:** Password.1!!
|
||||
|
||||
|
||||
|
||||
|
||||
16. After logging in, you will be returned to the home page. Select **Select this plan** for any of the plans.
|
||||
17. After logging in, you will be returned to the home page. Select **Select this plan** for any of the plans.
|
||||
|
||||
|
||||
|
||||
|
||||
17. On the **Place Order** screen, select **Place Order**. This will create a new order, which will fire the Azure Cosmos DB trigger in your function, and then send the order on to the ordersqueue for processing.
|
||||
18. On the **Place Order** screen, select **Place Order**. This will create a new order, which will fire the Azure Cosmos DB trigger in your function, and then send the order on to the ordersqueue for processing.
|
||||
|
||||
|
||||
|
||||
|
||||
18. Next, you will update an order in the Azure portal, to set the processed value to true. This will be a change that should not be sent into the orderqueue for processing.
|
||||
19. Next, you will update an order in the Azure portal, to set the processed value to true. This will be a change that should not be sent into the orderqueue for processing.
|
||||
|
||||
19. Navigate to your Cosmos DB account in the Azure portal, select **Data Explorer**, expand the **orders** collection, then select **Documents**.
|
||||
20. Navigate to your Cosmos DB account in the Azure portal, select **Data Explorer**, expand the **orders** collection, then select **Documents**.
|
||||
|
||||
|
||||
|
||||
|
||||
20. Select any order document, and change the processed value to "true," then select **Update**.
|
||||
21. Select any order document, and change the processed value to "true," then select **Update**.
|
||||
|
||||
|
||||
|
||||
|
||||
21. Return to the logs pane of your function and observe that the orders have been processed though the Function, and that the new order was sent to the orderqueue, while the updated order was not.
|
||||
22. Return to the logs pane of your function and observe that the orders have been processed though the Function, and that the new order was sent to the orderqueue, while the updated order was not.
|
||||
|
||||
|
||||
|
||||
|
||||
22. Finally, verify items are being written to the order queue, by going to the queue in the Azure Storage account, and observing that items have been added to the queue.
|
||||
23. Finally, verify items are being written to the order queue, by going to the queue in the Azure Storage account, and observing that items have been added to the queue.
|
||||
|
||||
|
||||
|
||||
|
||||
### Task 4: Create Queue function
|
||||
|
||||
In this task, you will create a second function which will be triggered by the output of the OrdersCosmosTrigger function. This will simulate the order processing and will add items to the notificationqueue if the order processing is complete and sendNotifications is true for the order.
|
||||
In this task, you will create a second function which will be triggered by the output of the OrdersCosmosTrigger function. This will simulate the order processing and will add items to the notificationqueue if the order processing is complete and the `sendNotifications` property is true for the order.
|
||||
|
||||
This will use an Azure Storage Queue trigger, and an input dataset from Cosmos DB, pulling in customers. Output dataset will be Azure Cosmos DB orders table, and an update to set processed = true, and the processedDate to today.
|
||||
This will use an Azure Storage Queue trigger, and an input dataset from Cosmos DB, pulling in customers. Output dataset will be Azure Cosmos DB orders table, and an update to set `processed = true`, and the `processedDate` to today.
|
||||
|
||||
1. Select **Integrate** under the OrdersCosmosTrigger function, then select **Azure Queue Storage (outputQueue)** under **Outputs**.
|
||||
|
||||
|
||||
|
||||
|
||||
2. Under **Actions** for the output, select **Go** next to **Create a new function triggered by this output**.
|
||||
|
||||
|
||||
|
||||
|
||||
3. Select **Azure Queue Storage trigger** from the list.
|
||||
|
||||
|
||||
|
||||
|
||||
4. On the **Queue trigger New Function** dialog, enter the following:
|
||||
|
||||
- **Name:** Enter ProcessOrders.
|
||||
|
||||
- **Queue name:** orderqueue
|
||||
|
||||
- **Storage account connection:** Select **AzureWebJobsStorage**.
|
||||
|
||||
- Select **Create**.
|
||||
|
||||
|
||||
|
||||
|
||||
5. When the function has been created, select **Integrate** under the **ProcessOrders** function, change the Message parameter name to "orderToProcess" for the **Azure Queue storage trigger**, and select **Save**.
|
||||
|
||||
|
||||
|
||||
|
||||
6. Now, select **+New Input**, select **Azure Cosmos DB**, and select **Select**.
|
||||
|
||||
|
||||
|
||||
|
||||
7. On the **Azure Cosmos DB** input screen, enter the following:
|
||||
|
||||
- **Document parameter name:** Enter "users".
|
||||
|
||||
- **Database name:** Enter "best-for-you-organics".
|
||||
|
||||
- **Collection name:** Enter "users" (all lowercase, as case matters).
|
||||
|
||||
- **Azure Cosmos DB account connection:** Select **best-for-you_DOCUMENTDB**.
|
||||
|
||||
- Select **Save**.
|
||||
|
||||
|
||||
|
||||
|
||||
8. Next, select **+New Output**, select **Azure Queue Storage**, and select **Select**.
|
||||
|
||||
|
||||
|
||||
|
||||
9. For the **Azure Queue Storage output**, enter the following:
|
||||
|
||||
- **Message parameter name**: "outputQueue"
|
||||
|
||||
- **Queue name:** "notificationqueue" (all lowercase, as casing matters)
|
||||
|
||||
- **Storage account collection:** Select **AzureWebJobsStorage** from the list.
|
||||
|
||||
- Select **Save**.
|
||||
|
||||
|
||||
|
||||
|
||||
10. Now, select the **ProcessOrders** function in the left-hand menu.
|
||||
|
||||
|
||||
|
||||
|
||||
11. To get the code for the **ProcessOrders** function, go into the project is VS Code, expand the **AzureFunctions** folder, select **ProcessOrders.js**, and copy the code, as highlighted in the screen shot below.
|
||||
|
||||
|
||||
|
||||
|
||||
12. Paste the code into the **index.js** block, overwriting all the existing code, and select **Save**. Your index.js file should now look like the following:
|
||||
|
||||
|
||||
|
||||
|
||||
13. Next, select **Logs** below the code block, so you can observe the Function being called during the next steps.
|
||||
|
||||
|
||||
|
||||
|
||||
14. To trigger the function, return to the starter application in your browser window, select **Sign In**, and on the **Sign In** screen, select **Register**.
|
||||
|
||||
|
||||
|
||||
|
||||
15. Complete the registration form, being sure to include a cell phone number in the Phone field that you can receive text messages on. (If you opt not to enter a phone number, you can still complete the next Exercise, but will not receive the text notifications that your order has been processed.)
|
||||
> **NOTE**: You may need to select **Logout** if you are still logged in with the demouser account.
|
||||
|
||||
- You only need to enter data into the **First name**, **Last name**, **email address**, and **phone** fields. All other fields have been pre-populated to save time.
|
||||
15. Complete the registration form. Be sure to include a valid email address so you can receive notifications of order processing in the next exercise. (If you opt not to enter a valid email address, you can still complete the next Exercise, but will not receive the email notifications that your order has been processed.)
|
||||
|
||||
- The password has been set to Password.1!!. If you choose to enter a different password, note that when you log into the account.
|
||||
- You only need to enter data into the **First name**, **Last name**, and **email address** fields. All other fields have been pre-populated to save time.
|
||||
- The password has been set to `Password.1!!`. If you choose to enter a different password, note that when you log into the account.
|
||||
|
||||
16. After registering, select **Sign In** from the Home page, enter your email address and password (Password.1!!) on the login screen, and select **Login**.
|
||||
16. After registering, you should be automatically logged into the site. If not, select **Sign In** from the Home page, enter the email address you provided during registration and the password (`Password.1!!`) on the login screen, and then select **Login**.
|
||||
|
||||
17. Select the **Select this plan** button for any plan on the home page, and on the Order screen, select **Place Order**.
|
||||
|
||||
|
||||
|
||||
|
||||
18. Return to your **ProcessOrders Function** page in the Azure portal and observe the logs.
|
||||
18. Return to your **ProcessOrders** function page in the Azure portal and observe the logs.
|
||||
|
||||
|
||||
|
||||
|
||||
19. The order you placed has been sent to the notificationqueue and is pending the notification being sent to your cell phone via SMS text message.
|
||||
19. The order you placed has been sent to the notificationqueue and is pending the notification being sent to your email address.
|
||||
|
||||
## Exercise 7: Create Logic App for sending SMS notifications
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ module.exports = function (context, orderToProcess) {
|
|||
if (orderToProcess.sendNotification) {
|
||||
var users = context.bindings.users;
|
||||
|
||||
var notificationPhone = '';
|
||||
var notificationEmail = '';
|
||||
var firstName = '';
|
||||
for(var i=0; i < users.length; i++) {
|
||||
var user = users[i];
|
||||
if (user['$v']['email']['$v'] === orderToProcess.userId) {
|
||||
if (user['$v']['phone']) {
|
||||
notificationPhone = user['$v']['phone']['$v'];
|
||||
if (user['$v']['email']) {
|
||||
notificationEmail = user['$v']['email']['$v'];
|
||||
firstName = user['$v']['firstName']['$v'];
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ module.exports = function (context, orderToProcess) {
|
|||
context.bindings.outputQueue = {
|
||||
orderId: orderToProcess.orderId,
|
||||
userId: orderToProcess.userId,
|
||||
notificationPhone: notificationPhone,
|
||||
notificationEmail: notificationEmail,
|
||||
firstName: firstName
|
||||
};
|
||||
context.log('Sent to notificationqueue for order id ', orderToProcess.orderId);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default class Submit extends Component {
|
|||
.then(result => {
|
||||
this.setState({ user: result.data });
|
||||
console.log(this.state.user);
|
||||
if (this.state.user.phone && this.state.user.phone !== '') {
|
||||
if (this.state.user.email && this.state.user.email !== '') {
|
||||
const state = this.state;
|
||||
state['sendNotification'] = true;
|
||||
this.setState(state);
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 41 KiB После Ширина: | Высота: | Размер: 41 KiB |
|
До Ширина: | Высота: | Размер: 24 KiB После Ширина: | Высота: | Размер: 24 KiB |
|
До Ширина: | Высота: | Размер: 84 KiB После Ширина: | Высота: | Размер: 84 KiB |
|
До Ширина: | Высота: | Размер: 31 KiB После Ширина: | Высота: | Размер: 31 KiB |
|
До Ширина: | Высота: | Размер: 96 KiB После Ширина: | Высота: | Размер: 96 KiB |
|
До Ширина: | Высота: | Размер: 49 KiB После Ширина: | Высота: | Размер: 49 KiB |
|
До Ширина: | Высота: | Размер: 68 KiB После Ширина: | Высота: | Размер: 68 KiB |
Двоичные данные
Hands-on lab/media/create-function-app-settings.png
|
До Ширина: | Высота: | Размер: 32 KiB После Ширина: | Высота: | Размер: 44 KiB |
|
До Ширина: | Высота: | Размер: 51 KiB После Ширина: | Высота: | Размер: 51 KiB |
|
До Ширина: | Высота: | Размер: 7.4 KiB После Ширина: | Высота: | Размер: 7.4 KiB |
|
До Ширина: | Высота: | Размер: 27 KiB После Ширина: | Высота: | Размер: 27 KiB |
|
До Ширина: | Высота: | Размер: 112 KiB После Ширина: | Высота: | Размер: 112 KiB |
|
До Ширина: | Высота: | Размер: 83 KiB После Ширина: | Высота: | Размер: 83 KiB |
|
До Ширина: | Высота: | Размер: 41 KiB После Ширина: | Высота: | Размер: 41 KiB |
|
После Ширина: | Высота: | Размер: 10 KiB |
|
До Ширина: | Высота: | Размер: 51 KiB После Ширина: | Высота: | Размер: 51 KiB |
|
До Ширина: | Высота: | Размер: 35 KiB После Ширина: | Высота: | Размер: 35 KiB |
|
До Ширина: | Высота: | Размер: 15 KiB После Ширина: | Высота: | Размер: 15 KiB |
|
До Ширина: | Высота: | Размер: 44 KiB После Ширина: | Высота: | Размер: 44 KiB |
|
До Ширина: | Высота: | Размер: 69 KiB После Ширина: | Высота: | Размер: 69 KiB |
|
До Ширина: | Высота: | Размер: 13 KiB После Ширина: | Высота: | Размер: 13 KiB |
|
До Ширина: | Высота: | Размер: 46 KiB После Ширина: | Высота: | Размер: 46 KiB |
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 40 KiB |
|
До Ширина: | Высота: | Размер: 46 KiB После Ширина: | Высота: | Размер: 46 KiB |
|
До Ширина: | Высота: | Размер: 41 KiB После Ширина: | Высота: | Размер: 41 KiB |
|
До Ширина: | Высота: | Размер: 31 KiB После Ширина: | Высота: | Размер: 31 KiB |
|
До Ширина: | Высота: | Размер: 15 KiB После Ширина: | Высота: | Размер: 15 KiB |
|
До Ширина: | Высота: | Размер: 19 KiB После Ширина: | Высота: | Размер: 19 KiB |
|
До Ширина: | Высота: | Размер: 11 KiB После Ширина: | Высота: | Размер: 11 KiB |
|
До Ширина: | Высота: | Размер: 26 KiB После Ширина: | Высота: | Размер: 26 KiB |
|
До Ширина: | Высота: | Размер: 34 KiB После Ширина: | Высота: | Размер: 34 KiB |
|
До Ширина: | Высота: | Размер: 33 KiB После Ширина: | Высота: | Размер: 33 KiB |
Двоичные данные
Hands-on lab/media/image184.png
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
Hands-on lab/media/install-trigger-extensions.png
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 20 KiB |
|
До Ширина: | Высота: | Размер: 100 KiB После Ширина: | Высота: | Размер: 100 KiB |
|
После Ширина: | Высота: | Размер: 3.7 KiB |
|
До Ширина: | Высота: | Размер: 29 KiB После Ширина: | Высота: | Размер: 29 KiB |
|
До Ширина: | Высота: | Размер: 8.1 KiB После Ширина: | Высота: | Размер: 8.1 KiB |
|
До Ширина: | Высота: | Размер: 7.6 KiB После Ширина: | Высота: | Размер: 7.6 KiB |
|
До Ширина: | Высота: | Размер: 32 KiB После Ширина: | Высота: | Размер: 32 KiB |
|
До Ширина: | Высота: | Размер: 257 KiB После Ширина: | Высота: | Размер: 257 KiB |
|
До Ширина: | Высота: | Размер: 227 KiB После Ширина: | Высота: | Размер: 227 KiB |