Упражнение. Настройка проекта

  • 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. Проект "интерфейс" содержит веб-приложение. Проект заключается в api создании бессерверного API с помощью Функции Azure.

Запуск проекта интерфейса

  1. Откройте встроенный терминал в Visual Studio Code, нажав клавиши CTRL + SHIFT + `.

  2. Выберите frontend.

  3. Чтобы запустить интерфейсный проект в браузере, в интегрированном терминале выполните npm start команду.

    npm start

    Небольшой веб-сервер, называемый обслуживанием , выполняется в окне терминала Visual Studio Code. В нем отображается URL-адрес, на котором запущено интерфейсное приложение.

    Снимок экрана: терминал Visual Studio Code с выноской, где выделен URL-адрес и порт выполняющегося приложения

  4. Чтобы открыть приложение в браузере, выберите этот URL-адрес в окне терминала.

    Приложение загружается, но нет данных, так как вы не создали API для этого приложения.

    Снимок экрана: веб-приложение, выполняемое в браузере. Данные не отображаются и появляется сообщение об ошибке, объясняющее, что операция получения не удалась.

Отлично! Вы в качестве производительного разработчика в компании Tailwind Traders успешно настроили среду. Это означает, что можно перейти к созданию проекта Функций Azure, который будет использоваться в качестве API для приложения "Менеджер продуктов".