Свобода для всех. DashBoard для ispsystem. GNU GPL

Линус Торвальдс: «Я создаю Linux не ради денег, а потому что это весело. Это как играть в Lego, только на уровне операционной системы.»
Эти слова как нельзя лучше отражают дух сообщества открытого исходного кода, где разработка — это не просто работа, а страсть и возможность сделать мир лучше.

Именно с этой цитаты у меня в голове живет идея создать что-то для мирового свободного сообщества.

Сегодня я хочу рассказать о своем проекте — современном личном кабинете, который интегрируется с модулями ISP system, такими как Billmanager и VMmanager. Этот проект будет распространяться абсолютно бесплатно под лицензией GNU GPL, и я надеюсь, что он станет моим вкладом в сообщество свободного ПО.

Что делает мой dashboard blackmore уникальным?

1. User-friendly дизайн:
   Современный и минималистичный интерфейс, который делает работу с Billmanager и другими модулями простой и приятной. Хочу сделать комплимент организации timeweb за лучший и приятный дизайн управления системой isp.

2. Интеграция с ISP system:
   Полная совместимость с популярными модулями, такими как Billmanager, VMmanager и другими, что позволяет управлять всеми процессами из одного места.

3. Открытый исходный код:
   Проект будет распространяться под лицензией GNU GPL, что означает свободу использования, модификации и распространения. Репозитойрий и figma макет будут доступны для загрузки.

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

Глава: Техническая составляющая: почему Node.js?

Простота и доступность кода

Одним из ключевых принципов моего проекта является простота. Я убежден, что если код будет слишком сложным, то сообщество вокруг него не сформируется. Вместо этого, пользователи будут просто использовать «дефолтную» версию, не внося изменений и не создавая интересных форков. Чтобы избежать этого, я уделяю особое внимание следующим аспектам:

1. Чистый и понятный код:
   Я стараюсь писать код, который легко читать и понимать. Это включает в себя использование понятных имен переменных и функций, а также следование принципам DRY (Don’t Repeat Yourself) и KISS (Keep It Simple, Stupid).

2. Глубокие комментарии:
   Каждая сложная часть кода сопровождается подробными комментариями, которые объясняют, что происходит и почему это сделано именно так. Это помогает другим разработчикам быстрее разобраться в проекте и внести свои улучшения.

3. Модульная структура:
   Проект разделен на модули, каждый из которых отвечает за определенную функциональность. Это не только упрощает разработку, но и позволяет другим разработчикам легко добавлять новые функции или изменять существующие.

4. Документация:
   Помимо комментариев в коде, я создаю подробную документацию, которая объясняет, как настроить проект, как он работает и как можно его расширить. Это особенно важно для новичков, которые только начинают знакомиться с проектом.

5. Примеры использования:
   В проекте будут включены примеры использования API и других ключевых функций. Это поможет разработчикам быстрее понять, как интегрировать dashboard в свои проекты.

Почему это важно?

Как сказал один из разработчиков открытого ПО: «Простота — это не отсутствие сложности, а ясность и понятность.» Я верю, что только простой и хорошо документированный проект может привлечь сообщество и вдохновить других на создание форков. Если код будет слишком сложным, то даже самые заинтересованные разработчики могут отказаться от участия в проекте.

// Этот модуль отвечает за интеграцию с Billmanager API // Используется библиотека Axios для отправки HTTP-запросов  const axios = require('axios');  /**  * Функция для получения информации о счете пользователя  * @param {string} userId - ID пользователя  * @returns {Promise} - Возвращает данные о счете или ошибку  */ async function getUserBill(userId) {     try {         const response = await axios.get(`https://api.billmanager.com/user/${userId}/bill`);         return response.data;     } catch (error) {         console.error('Ошибка при получении данных:', error);         throw error;     } }  module.exports = { getUserBill };

Простота и доступность кода — это не просто пожелание, это необходимость для успешного open-source проекта. Я стремлюсь сделать свой dashboard максимально понятным и дружелюбным для других разработчиков, чтобы каждый мог легко внести свой вклад или создать собственный форк. В конце концов, именно сообщество делает open-source проекты по-настоящему живыми и развивающимися.

Глава: Реализация авторизации в dashboard

Авторизация — это ключевой элемент любого приложения, особенно если оно взаимодействует с внешними системами, такими как Billmanager. В этой главе я расскажу, как будет реализована авторизация в моем dashboard, начиная с верстки макета и заканчивая интеграцией с API Billmanager.

1. Верстка макета авторизации

Макет авторизации был создан в Figma и включает следующие элементы:

• Поля ввода для email и пароля.

• Кнопка «Войти».

• Ссылки «Забыли пароль?» и «Регистрация».

Для верстки этого макета я использую React (или Vue.js, если вы предпочитаете этот фреймворк) и библиотеку компонентов, такую как Material-UI или Tailwind CSS, чтобы сделать интерфейс современным и отзывчивым.

Пример верстки на React:

import React, { useState } from 'react';  const LoginForm = () => {     const [email, setEmail] = useState('');     const [password, setPassword] = useState('');     const [rememberMe, setRememberMe] = useState(false);      const handleLogin = async () => {         // Логика авторизации через API         console.log('Email:', email, 'Password:', password);     };      return (         <div className="min-h-screen bg-gray-100 flex items-center justify-center">             <div className="bg-white p-8 rounded-lg shadow-md w-80">                 {/* Заголовок */}                 <div className="text-center mb-8">                     <div className="text-2xl font-bold text-gray-800 mb-2">                         BLACKMORE                         <span className="text-blue-600">CLOUD</span>                     </div>                     <div className="text-sm text-gray-500">                         GNU GPL DASHBOARD                     </div>                     <div className="mt-2 text-3xl text-gray-400">#BXoA</div>                 </div>                  {/* Поля ввода */}                 <div className="space-y-4">                     <input                         type="email"                         placeholder="Введите Email"                         className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"                         value={email}                         onChange={(e) => setEmail(e.target.value)}                     />                     <input                         type="password"                         placeholder="Введите пароль"                         className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"                         value={password}                         onChange={(e) => setPassword(e.target.value)}                     />                 </div>                  {/* Чекбокс и напоминание */}                 <div className="flex items-center justify-between mt-4">                     <label className="flex items-center space-x-2">                         <input                             type="checkbox"                             checked={rememberMe}                             onChange={(e) => setRememberMe(e.target.checked)}                             className="form-checkbox h-4 w-4 text-blue-600"                         />                         <span className="text-sm text-gray-600">Запомнить?</span>                     </label>                     <a href="#" className="text-sm text-blue-600 hover:underline">                         Напомнить?                     </a>                 </div>                  {/* Кнопка входа */}                 <button                     onClick={handleLogin}                     className="w-full mt-6 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"                 >                     войти                 </button>                  {/* Регистрация */}                 <div className="mt-4 text-center">                     <span className="text-sm text-gray-600">НЕТ АККАУНТА? </span>                     <a href="#" className="text-blue-600 hover:underline">РЕГИСТРАЦИЯ</a>                 </div>             </div>         </div>     ); };  export default LoginForm;

Интеграция с API Billmanager

Для авторизации в Billmanager используется API, который поддерживает несколько методов. Я выбрал метод авторизации с использованием уникального номера сессии, так как он наиболее подходит для веб-приложений.

Шаги авторизации:

1. Отправка запроса на авторизацию:
   Пользователь вводит email и пароль, которые отправляются на сервер Billmanager для получения номера сессии.

2. Получение номера сессии:
   Если авторизация успешна, сервер возвращает XML-документ с номером сессии.

3. Использование номера сессии:
   Номер сессии используется для всех последующих запросов к API Billmanager.

const axios = require('axios');  async function login(username, password) {     try {         const response = await axios.get('https://IP-адрес:1500/billmgr', {             params: {                 out: 'xml',                 func: 'auth',                 username: username,                 password: password,             },         });          // Парсим XML-ответ         const parser = new DOMParser();         const xmlDoc = parser.parseFromString(response.data, 'text/xml');         const sessionId = xmlDoc.querySelector('auth').textContent;          console.log('Сессия успешно создана. ID сессии:', sessionId);         return sessionId;     } catch (error) {         console.error('Ошибка авторизации:', error);         throw error;     } }

3. Хранение номера сессии

Номер сессии необходимо хранить на клиенте (например, в localStorage или cookies) и передавать с каждым запросом к API. Это можно сделать следующим образом:

// Сохраняем номер сессии в localStorage localStorage.setItem('sessionId', sessionId);  // Используем номер сессии для запросов async function makeRequest(func, params) {     const sessionId = localStorage.getItem('sessionId');     const response = await axios.get('https://IP-адрес:1500/billmgr', {         params: {             auth: sessionId,             out: 'xml',             func: func,             ...params,         },     });     return response.data; }

4. Завершение сессии

Чтобы завершить сессию пользователя, необходимо отправить запрос на удаление сессии:

async function logout(sessionId) {     try {         await axios.get('https://IP-адрес:1500/billmgr', {             params: {                 func: 'session.delete',                 elid: sessionId,                 sok: 'ok',             },         });         console.log('Сессия успешно завершена.');     } catch (error) {         console.error('Ошибка завершения сессии:', error);     } }

5. Обработка ошибок

Важно предусмотреть обработку ошибок, таких как:

• Неверный email или пароль.

• Истекший номер сессии.

• Ограничения доступа.

Пример обработки ошибок:

try {     const sessionId = await login(email, password);     // Дальнейшие действия } catch (error) {     if (error.response && error.response.status === 401) {         alert('Неверный email или пароль');     } else {         alert('Произошла ошибка. Попробуйте еще раз.');     } }

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

Все в статье не возможно отобразить, надеюсь к следующей главе я завершу 40% кода и открою репозиторий для всех. Если Вам понравилась такая идея то сделайте подписку в Хабре, я расскажу много интересного.

Самое основное на хабре это рейтинг, тут есть старички которые всегда минусуют, если уйду в сильный минус, то будет запрет на написание статей.