練習 - 設定專案

  • 8 分鐘

您是 Tailwind Traders 的新開發人員。 開始之前，您必須先設定您的開發環境。 別擔心，Tailwind Traders 已經簡化上線程序。 您必須遵循幾個小步驟，才能啟動並執行。

建構專案資源

  1. 啟用沙箱並登入 Azure Cloud Shell (也稱為 Tailwind Traders 實際執行環境)，如此頁面頂端所示。

  2. 複製下一行，並將其貼到右側的 Azure Cloud Shell 終端中。

    git clone https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions && ./mslearn-build-api-azure-functions/DB_SETUP/CREATE_DATABASE.sh

    此命令會建立包含產品資料的新資料庫。 此處理序最多可能需要 10 分鐘的時間。 請安心繼續進行此課程模組。 即使您離開此頁面，該處理序仍會繼續執行。

在 Visual Studio Code 中複製專案

  1. 打開 Visual Studio Code。

  2. 在頂端功能表列中，選取 [檢視]>[命令選擇區]。

  3. 在提示中，輸入 clone。

  4. 從 [命令選擇區] 中，選取 [Git: 複製]。

  5. 輸入下列存放庫 URL：

    https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions

  6. 在本機磁碟機上選取您要在其中複製專案的資料夾。

  7. 當系統提示您開啟複製的存放庫時，選取 [開啟]。

  8. Visual Studio Code 會偵測此專案中的工作區檔案，並詢問您是否要開啟該檔案。 選取 [開啟工作區]。

    Visual Studio Code 開啟工作區通知提示的螢幕擷取畫面。

當工作區開啟時，會在 Visual Studio Code 中出現兩個專案: frontend 和 api。 "frontend" 專案包含 Web 應用程式。 api 專案是您使用 Azure Functions 建置無伺服器 API 所在。

執行前端專案

  1. 若要在 Visual Studio Code 中開啟整合式終端，請按下 Ctrl + Shift + `。

  2. 選取 [frontend]。

  3. 若要在瀏覽器中執行前端專案，在整合式終端中，執行 npm start 命令。

    npm start

    名為 serve 的小型 Web 伺服器會正在 Visual Studio Code 終端視窗中執行。 其顯示前端應用程式執行所在的 URL。

    Visual Studio Code 終端的螢幕擷取畫面，其中圖說文字會醒目提示執行中應用程式的 URL 和連接埠。

  4. 若要在瀏覽器中開啟應用程式，請在終端視窗中選取該 URL。

    應用程式會載入，但沒有任何資料存在，因為您尚未為此應用程式建立 API。

    在瀏覽器中執行的應用程式螢幕擷取畫面。沒有顯示任何資料，且出現錯誤訊息指出取得作業失敗。

非常好！ 您已經成功地將您的環境設定為 TTailwind Traders 的高生產力開發者。 這表示現在可建立 Azure Functions 專案，此專案將作為 Products Manager 應用程式的 API。