Создание приложения для управления строительными запасами с использованием React, Go и MongoDB (Часть I — Введение…

1.3 Предварительные требования и настройка

Вам нужно будет установить:

1. Базовые знания JavaScript/TypeScript, Go и MongoDB.
2. GO установлен и настроен на вашем компьютере (Скачать и установить — Язык программирования Go)
3. На вашей машине установлены Node.js и npm (Скачать | Node.js (nodejs.org)).
4. Docker и Docker-Compose установлены на вашем компьютере. (Докер для рабочего стола | Документация по Docker)
5. Редактор кода на ваш выбор (рекомендую VS Code) (Скачать Visual Studio Code — Mac, Linux, Windows).
6. VS Code, настроенный для разработки GO (Настройка Visual Studio Code для разработки Go | Microsoft Learn)
7. Git для контроля версий. (Git — Загрузки (git-scm.com))

Теперь давайте настроим нашу среду.

1.4 Настройка MongoDB с помощью Docker

Создайте новый каталог для проекта и назовите его ConstructGo — это будет наша корневая папка!

Создайте файл docker-compose.yml в корневом каталоге вашего проекта и вставьте следующий код:

version: '3'
services:
  mongodb:
    image: mongo:latest
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: secret
    volumes:
      - mongodb_data_container:/data/db
    ports:
      - "27017:27017"
volumes:
  mongodb_data_container:

Запустите файл компоновки Docker:

docker-compose up -d

1.5 Настройка Go Backend

Создайте новый каталог для бэкенда Go:

mkdir cgo_backend
cd cgo_backend

Затем инициализируйте модуль Go:

go mod init github.com/yourusername/cgo_backend

Добавьте начальные инструменты проекта в VS Code:

1. В Visual Studio Code откройте Справку палитры команд › Показать все команды. Или используйте сочетание клавиш (Ctrl+Shift+P)
2. Найдите Go: Install/Update tools, затем запустите команду с поддона
3. При появлении запроса выберите все доступные инструменты Go и нажмите OK.
4. Подождите, пока инструменты Go закончат обновление.

Эти шаги описаны там: Настройка кода Visual Studio для разработки Go | Обучение Майкрософт

Давайте создадим простую структуру каталогов для нашего бэкенда Go:

/cgo_backend
  /cmd
    /app
      main.go
  /internal
    /handler
    /repository
    /service
  /pkg
  /api
  /scripts
  /test

• cmd: основные приложения для этого проекта.
• internal: код частного приложения и библиотеки.
• pkg: код библиотеки, безопасный для использования внешними приложениями.
• api: API, протоколы и схемы.
• scripts: скрипты для выполнения различных задач.
• test: дополнительные внешние тестовые приложения и тестовые данные.

В файле main.go под cmd/app напишите простое «Привет, мир!» программа для проверки что все работает:

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

Запустите программу с помощью (или Ctrl + Shift + D — Запустить и отладить в VSCode):

go run ./cmd/app

1.6 Настройка клиентского приложения React TypeScript

Во-первых, давайте создадим новый каталог для внешнего интерфейса из корневого каталога:

mkdir cgo_frontend
cd cgo_frontend

Установить yarn:

npm install --global yarn

Далее мы создадим наше приложение React с помощью TypeScript:

npx create-react-app . --template typescript

Для отправки HTTP-запросов мы будем использовать пакет axios. Для компонентов пользовательского интерфейса мы будем использовать Ant Design. Установите их с помощью:

npm install axios antd

Структура вашего проекта будет выглядеть примерно так:

/cgo_frontend
  /public
  /src
    /components
    /services
    App.tsx
    index.tsx
  package.json

• public: содержит файл HTML и общедоступные ресурсы, которые отображаются на веб-странице.
• src: содержит код React.
• components: Содержит отдельные компоненты пользовательского интерфейса.
• services: Обрабатывает вызовы API к серверной части.

Давайте создадим простое «Hello, world!» в нашем файле App.tsx.

import React from 'react';
import { Typography } from 'antd';

const { Title } = Typography;

const App: React.FC = () => {
  return (
    <div className="App">
      <Title>Hello, World!</Title>
    </div>
  );
}

export default App;

Запустите приложение React с помощью:

npm start

Теперь приложение React должно работать на http://localhost:3000.

* Настройка ESlint и Prettier

Я использовал это👉 «React Hero: Настройка ESlint для приложения TypeScript + React | Ти Тран | Крошка Со | Середина"

1.7 Настройка непрерывной интеграции с действиями GitHub

В репозитории GitHub создайте новый каталог .github/workflows. В этом каталоге создайте новый файл build.yml. Этот файл будет определять наш рабочий процесс GitHub Actions для запуска тестов каждый раз, когда код помещается в репозиторий.

Зафиксируйте и отправьте этот файл в репозиторий GitHub. Теперь GitHub будет автоматически запускать вашу сборку каждый раз, когда вы отправляете ее в репозиторий (ветки: основная, основная или разработка).

В следующих разделах мы начнем разработку нашего бэкэнда и внешнего интерфейса, написание кода, тестов и подробное описание процесса шаг за шагом. Следите за обновлениями!

Спасибо за внимание!

Вы можете получить полный доступ ко всем историям на Medium всего за 5 долларов в месяц, зарегистрировавшись по этой ссылке.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

• 👏 Хлопайте за историю и подписывайтесь на автора 👉
• 📰 Смотрите больше контента в публикации Level Up Coding
• 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
• 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу