Skip to content

Latest commit

 

History

History
76 lines (59 loc) · 3.38 KB

README.md

File metadata and controls

76 lines (59 loc) · 3.38 KB
Raw

Seamless API Development with Data API Builder for your Static Web Apps

Goals

Have you ever walked into a store, did some shopping, and headed back home only to find that you forgot to buy 60% of the items you needed to get? I struggle with this very same issue and so I decided to create the ‘Smart Shopping Planner’, an application that will help me keep track of the items I need to buy and that I can easily update before and after shopping.

Goal Learn how to seamlessly build APIs with Data API Builder
What will you learn JavaScript, React, Azure Static Web Apps, Azure Static Web Apps CLI, Data API Builder, Azure SQLAI
What you'll need Azure subscription, GitHub
Duration 1 hr
Microsoft Cloud Topics taught Azure Static Web Apps Database Connections, Azure SQL Database, Data API Builder
Just want to try the app or see the solution? Solution
Slides Coming soon!

Video

Solution Video

Pre-Learning

Connect your Static Web Apps to Azure Databases using REST or GraphQL on Azure Friday

Prerequisites

  1. VS Code
  2. .NET 6 SDK installed!
  3. An Azure Subscription

What students will learn

Smart Shopping Planner is a React application built using JavaScript, that stores data in an Azure SQL database. In this blog, I want to show you how incredibly easy it was to provide REST endpoints (you can work with GraphQL too) to connect the app to the database.

Workshop Milestones

Full workshop on this step-by-step guide

  1. Create a SQL Database (Reference Step 1 in tutorial)

    SQL code to create a table that will store our shopping items.

    CREATE TABLE ShoppingItems (
    id INT IDENTITY(1,1) PRIMARY KEY,
        category VARCHAR(100),
            name VARCHAR(100),
            quantity INT,
            description VARCHAR(200),
            unitPrice DECIMAL(10, 2),
            totalPrice DECIMAL(10, 2)
);

    Landing-page

  2. Prepare your Frontend (Reference Step 2 in tutorial)

    • Download the Sample code and open in VS Code
    • Run npm install
    • Run npm start

  3. Use database connections to connect to your data through REST endpoints (Reference Step 3 in tutorial)

    Add an Item entity in the swa-database-config file and specify the permission

    "Item": {
    "source": "dbo.ShoppingItems",
    "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
    ]
}

Feedback

Be sure to give feedback about this workshop!

Code of Conduct