Чек-лист для ревью пулл-реквеста

Ревью пулл реквестов является неотъемлемой частью процесса разработки программного обеспечения. Оно позволяет команде разработчиков обмениваться мнениями, обсуждать и улучшать код, а также обнаруживать потенциальные ошибки и проблемы. Однако, чтобы провести качественное ревью, необходимо иметь чеклист, который позволит систематизировать процесс и убедиться, что все важные аспекты кода были рассмотрены. В этой статье мы рассмотрим основные пункты, которые должны быть включены в чеклист для проведения ревью пулл реквестов.

Функциональность

Проверьте, что код выполняет требования из задачи или спецификации. Убедитесь, что все функции работают корректно и не вызывают ошибок.

Архитектура и структура кода

Рассмотрите, соответствует ли код принципам SOLID и лучшим практикам проектирования. Проверьте, что код хорошо организован, читаем и понятен другим разработчикам.

Комментарии и документация

Проверьте наличие комментариев и документации. Комментарии должны быть четкими и информативными, а документация должна объяснять, как использовать код и его функции.

Тестирование

Убедитесь, что код сопровождается достаточным количеством тестов. Проверьте, что все тесты проходят успешно и покрывают основные сценарии использования.

Надежность и безопасность

Рассмотрите код с точки зрения безопасности и надежности. Убедитесь, что применены соответствующие меры безопасности и механизмы обработки ошибок.

Производительность

Проверьте, что код работает эффективно и не содержит узких мест. Рассмотрите возможные оптимизации и их реализацию.

Стиль кода

Проверьте, соответствует ли код стандартам оформления и стилю, принятым в команде или проекте. Убедитесь, что переменные и функции имеют осмысленные имена, и что код написан согласно соглашениям о наименовании.

Зависимости

Убедитесь, что код правильно использует и управляет зависимостями. Проверьте версии и совместимость используемых библиотек.

Развертывание

Рассмотрите, как код будет развертываться на сервере или установлен на конечном устройстве. Убедитесь, что весь необходимый функционал для развертывания присутствует.

Обратная связь

Не забывайте предоставлять конструктивную обратную связь разработчикам. Делитесь своими мыслями, идеями и предложениями по улучшению кода. Конечно, этот чеклист может быть адаптирован и дополнен в зависимости от специфики проекта и команды разработчиков. Главное - следовать основным принципам проведения ревью и стремиться к повышению качества кода.

Создание бэкенда на Express

Во-первых, мы создаем POST API с использованием NodeJS и Express, который поможет нам загружать файлы (изображения, pdf и т. д.) на внутренний сервер.

Настройка серверного проекта

Давайте настроим бэкенд проект NodeJS, выполнив следующие команды одну за другой.

mkdir fileupload
cd fileupload
npm init -y

Установка пакетов

Теперь нам нужно установить четыре пакета: express, express-fileupload, cors и nodemon. Выполните приведенную ниже команду, чтобы установить пакеты.

npm i express express-fileupload cors nodemon

Теперь откройте папку fileupload в вашем любимом редакторе кода и создайте новый файл с именем server.js. Добавьте следующий код в файл server.js.

// server.js

const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors')

const app = express();

// middleware
app.use(express.static('public')); // для доступа к файлам в папке public
app.use(cors());
app.use(fileUpload());

// API для загрузки файлов
app.post('/upload', (req, res) => {
  if (!req.files) {
    return res.status(500).send({ msg: "file is not found" })
  }
   
  const myFile = req.files.file;
 
  // метод mv() помещает файл в папку public
  myFile.mv(`${__dirname}/public/${myFile.name}`,
    function (err) {
      if (err) {
        console.log(err)
        return res.status(500).send({ msg: "Error occurred" });
      }
      // возвращаем ответ с именем файла и его расположением
      return res.send({name: myFile.name, path: `/${myFile.name}`});
  });
})


app.listen(4500, () => {
  console.log('server is running at port 4500');
})

В приведенном выше коде мы сначала импортировали три пакета: express, express-fileupload и cors, а затем создали приложение express вызвав функцию express() Наш маршрут POST API - /upload. Мы помещаем файлы в общую папку public. Для этого нам нужно создать папку public внутри нашего бэкенд-проекта.

Добавление скриптов

Чтобы запускать и перезапускать сервер мы используем nodemon. Откройте файл package.json и добавьте следующий код в scripts.

 "server": "nodemon server.js"

Теперь запустите сервер, выполнив команду npm run server в терминале.

Создание приложения React

Давайте создадим новое React приложение, выполнив следующую команду.

npx create-react-app react-fileupload

Теперь измените текущий рабочий каталог, выполнив приведенную ниже команду.

cd react-fileupload

Установка библиотеки Axios

Нам также необходимо установить клиентскую библиотеку axios, которая используется для выполнения http-запросов.

npm i axios

Создание компонента загрузки файлов

Откройте папку react-fileupload в своем любимом редакторе кода и создайте новый файл с именем fileupload.js внутри папки src. Теперь добавьте следующий код.

// fileupload.js

import React, { useRef, useState } from 'react';
import axios from 'axios';

function FileUpload() {

  // для хранения загруженного файла
  const [file, setFile] = useState('');
  
  // для хранения ответа от бекенда
  const [data, getFile] = useState({ name: "", path: "" });

  const [progress, setProgess] = useState(0); // progessbar
  const el = useRef(); // для доступа к инпуту

  const handleChange = (e) => {
    setProgess(0)
    const file = e.target.files[0]; // доступ к файлу
    console.log(file);
    setFile(file); // сохранение файла
  }

  const uploadFile = () => {
    const formData = new FormData();
    formData.append('file', file); // добавление файла
    axios.post('http://localhost:4500/upload', formData, {
      onUploadProgress: (ProgressEvent) => {
        let progress = Math.round(
          ProgressEvent.loaded / ProgressEvent.total * 100
        ) + '%';
        setProgess(progress);
      }
    }).then(res => {
      console.log(res);
      getFile({
        name: res.data.name,
        path: 'http://localhost:4500' + res.data.path
      })
    }).catch(err => console.log(err))
  }

  return (
    <div>
      <div className="file-upload">
        <input type="file" ref={el} onChange={handleChange} />
        <div className="progessBar" style={{ width: progress }}>
          {progress}
        </div>
        <button onClick={uploadFile} className="upbutton">
          Upload
        </button>
        <hr />
        {/* для показа полученного изображения */}
        {data.path && <img src={data.path} alt={data.name} />}
      </div>
    </div>
  );
}

export default FileUpload;

В приведенном выше коде мы использовали хуки react для управления состоянием, и у нас есть две функции: handleChange и uploadFile. handleChange вызывается после того, как пользователь выбрал файл. Функция uploadFile() используется для загрузки файла в наш /upload api. Существует также индикатор выполнения, который показывает прогресс загрузки файла на сервер, а также мы отображаем изображение после получения ответа от сервера.

Добавление стилей css

Добавьте следующие стили в файл App.css.

.App {
    margin: 2rem auto;
    max-width: 800px;
}

img {
  width: 500px;
  height: 500px;
  object-fit: contain;
}

.progessBar {
  height: 1rem;
  width: 0%;
  background-color: rgb(68, 212, 231);
  color: white;
  padding:2px
}

.file-upload {
  box-shadow: 2px 2px 2px 2px #ccc;
  padding: 2rem;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  font-size: 1rem;
}

input , div , button{
  margin-top: 2rem;
}

.upbutton {
   width: 5rem;
   padding: .5rem;
   background-color: #2767e9;
   color: aliceblue;
   font-size: 1rem;
   cursor: pointer;
}

Теперь импортируйте компонент FileUpload в файл App.js.

// App.js

import React from 'react';
import FileUpload from './fileupload';
import './App.css';

function App() {
  return (
    <div className="App">
      <FileUpload />
    </div >
  );
}

export default App;

Запустите приложение React, запустив npm start.