зайдите посмотреть приложение → kanban.yuandaputri.com
Привет и добро пожаловать!
Сегодня замечательный день, чтобы поделиться с вами своей работой. Это простое, всем известное и полезное приложение. Канбан-приложение. Канбан — это визуальная система для управления работой на протяжении всего процесса. Он показывает вам рабочий процесс от невыполненной работы до завершения.
Создание приложения Kanban было начато в марте 2023 года, но оно было отложено до июля 2023 года, и я снова отвлекся, потому что мне нужно было завершить финальный проект. И да, это будет сделано в августе 2023 года.
Технология, использованная в этом проекте
Большинство инструментов и фреймворков, которые я использовал в этом проекте, основаны на том, чему я научился в Purwadhika Bootcamp.
Я научился использовать ReactJS для внешнего интерфейса. Redux для управления глобальным состоянием. TailwindCSS для стилизации всего, а также я использую некоторые компоненты из Chakra UI и т. д.
В качестве серверной части я использую NodeJS и Express для создания серверной части. Jsonwebtoken, чтобы получить токен для авторизации. Nodemailer для отправки электронной почты пользователю (проверка электронной почты). И многое другое.
В этом проекте я использую технологию Cronjob, то есть node-cron, чтобы мое приложение могло отправлять вам уведомление по электронной почте, если задача пропустила крайний срок.
Для управления базой данных я использую MySQL. Я пишу необработанный запрос в коде на стороне сервера.
Возможности приложения Канбан:
В приложении Kanban я создал всего несколько функций, но они мне очень нравятся! Давайте посмотрим, что я создал:
- Войти и зарегистрироваться (можно использовать метод входа в Google)
Существует два способа входа в приложение Kanban. Если вы незарегистрированный пользователь, вы можете просто войти в систему напрямую, используя Google Sign In. Если вы выберете этот способ, вам больше не понадобится пароль: просто войдите в приложение Kanban, нажав кнопку «Войти через Google». Но если вы уже зарегистрировались в качестве пользователя, введя вручную свой адрес электронной почты, имя пользователя и пароль, вы не сможете выбрать метод входа в Google. Это произошло потому, что я добавилregisted_type в таблицу пользователей в базе данных, чтобы различать, какой пользователь входит в систему с помощью Google.
И еще одна вещь: если вы выберете метод входа в Google, вы автоматически пройдете проверку при входе в систему. С другой стороны, если вы вводите форму вручную, вам все равно придется проверить свою электронную почту, а затем щелкнуть ссылку для подтверждения.
Я создал эту функцию, используя Google OAuth2. Супер крутой Гугл!
2. Домашняя страница (доступен темный режим, здорово, не правда ли?)
Это домашняя страница в светлой теме. Я использую Tailwind CSS, чтобы изменить тему на темную. Чтобы она не менялась снова при обновлении страницы, я также сохранил тему в localStorage. Чтобы обработать тему изменения, я использую кнопку со значком солнца/луны. Сменить тему с помощью Tailwind CSS очень легко.
Если щелкнуть значок, он перейдет в темный режим, вот так:
3. Добавить карточку — это добавить список дел
Для MVP этого проекта я предоставляю 3 карточки разного статуса: Todo, On go и Done. Пользователь может добавить свой список дел в каждую карточку. Название обязательно. Пользователь не может оставить форму пустой. Описание — это то, что отображается на главной странице. Чтобы выбрать дату, я использую компонент Date Picker из пользовательского интерфейса Chakra.
4. Изменить задачу
Пользователь может редактировать свой список, щелкнув один из списков в каждой карточке.
5. Получить уведомление по электронной почте
Вы получите уведомление, если пропустите крайний срок! Я создал эту функцию с помощью Cronjob на стороне сервера. Это что-то новое, что я узнал за несколько дней и реализовал эту функцию в приложении Kanban.
Более подробную информацию о моем коде можно найти в моем репозитории GitHub по kanban-react, а также be-kanban
Спасибо, что уделили время чтению моей работы! Пожалуйста, не стесняйтесь обращаться ко мне по электронной почте/телефону, если вы заинтересованы в моем портфолио. Я с нетерпением жду возможности сотрудничать с вами как с командой.
Увидимся снова~ ^^/
Посмотрите другие мои портфолио:
- myThreads (приложение для социальных сетей) → посмотреть приложение здесь
- Приложение «Аптека (приложение для электронной коммерции)» → см. приложение здесь
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.