Главная страницаКатегория electronElectron и React JS: Cоздайте Чат с Помощью Javascript

Electron и React JS: Cоздайте Чат с Помощью Javascript

Name: Electron и React JS: Cоздайте Чат с Помощью Javascript
Price: 13 USD
Rating: 5 (24 reviews)

Electron & React JS: Build a Native Chat App with Javascript

udemy

★5 (всего оценок - 24)

Продолжительность

15 ч 5 мин

Категория

Electron

Количество уроков

112 Видео

Дата добавления

7 окт. 2020 г., 23:56

Язык

Английский

Дата выхода

9 сент. 2020 г., 00:00

Дата обновления

29 апр. 2026 г., 08:41

Освойте полный цикл разработки настольных приложений с помощью Electron, React JS и Firebase. Этот курс поможет вам шаг за шагом создать полноценное чат‑приложение с авторизацией, уведомлениями, чатом в реальном времени и системой настроек. Идеально подходит для тех, кто хочет перейти от веб‑разработки к созданию нативных desktop‑приложений.

Что вы создадите в рамках курса

Вы разработаете полноценное современное приложение чата, используя стек технологий Javascript + Electron + React + Firebase. На практике вы научитесь создавать интерфейсы, управлять состоянием, работать с Firestore, обрабатывать авторизацию и синхронизировать данные между клиентами в реальном времени.

Ключевые технологии курса

Electron

Electron позволяет использовать веб‑технологии для разработки настольных приложений. Вы узнаете:

как устроен Electron и его основные модули;
как создавать окна приложения и управлять ими;
как интегрировать фронтенд на React в Electron‑окружение;
как упаковать приложение в дистрибутив для Windows, macOS или Linux.

React JS

React обеспечит мощную и гибкую структуру для интерфейса чата. В курсе вы разберёте:

создание компонентного интерфейса;
маршрутизацию между экранами (профиль, чат, настройки и т.д.);
эффективный рендеринг и работу со state;
управление состоянием через Redux.

Firebase (Firestore + Auth)

Firebase обеспечивает быстрый backend без необходимости поднимать сервер. Вы научитесь:

хранить данные чатов и пользователей в Firestore;
использовать запросы и подписки на обновления данных;
настраивать регистрацию и авторизацию пользователей;
обрабатывать ошибки и ограничивать доступ неавторизованным пользователям.

Структура курса

Раздел 1: Основы Electron и настройка проекта

Вы узнаете, что такое Electron, изучите ключевые процессы (main и renderer), подготовите рабочую среду, установите React и настроите Webpack для сборки приложения.

Раздел 2: Создание интерфейса приложения

На этом этапе вы сформируете полноценную UI‑структуру:

экран профиля;
экран чата;
настройки приложения;
навигация и маршрутизация;
интеграция Redux и связь UI с Firestore.

Раздел 3: Аутентификация пользователей

Вы создадите форму входа и регистрации, настроите Firebase Auth, реализуете проверку доступа и обработку ошибок.

Раздел 4: Redux и система уведомлений

Будет реализовано определение статуса подключения (online/offline) и отображение соответствующих уведомлений в интерфейсе.

Раздел 5: Управление чатами

Вы реализуете функционал:

создания чатов;
отображения доступных чатов;
присоединения к чату;
определения статуса участников (онлайн/офлайн).

Раздел 6: Обмен сообщениями в реальном времени

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

Раздел 7: Настройки приложения и локальное хранилище

Вы создадите раздел настроек и сохраните выбранные параметры (тема, уведомления и др.) в localStorage так, чтобы они сохранялись между перезапусками приложения.

Почему этот курс полезен

Вы изучите технологию Electron — востребованный навык для desktop‑разработки.
Получите опыт создания реального приложения от идеи до финальной сборки.
Разберёте полный цикл разработки современного React‑приложения.
Научитесь использовать Firebase как backend без серверов.

Готовы создать собственное нативное приложение чата?

Присоединяйтесь к курсу и сделайте шаг в сторону разработки мощных desktop‑приложений на JavaScript.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:03:35
Introduction
Урок 2. 00:09:44
How to solve issues
Урок 3. 00:02:00
Section Introduction
Урок 4. 00:10:16
Initialize Electron
Урок 5. 00:12:10
Create browser window
Урок 6. 00:10:32
Features of electron
Урок 7. 00:07:23
More about Electron & Notifications
Урок 8. 00:10:07
Chrome vs Electron
Урок 9. 00:09:52
Node integration
Урок 10. 00:05:55
Code cleanup
Урок 11. 00:05:56
Install React
Урок 12. 00:14:22
Webpack
Урок 13. 00:10:55
Source Map + Debugging
Урок 14. 00:06:35
Electron reload
Урок 15. 00:08:27
Main & Renderer communication
Урок 16. 00:07:07
Preload
Урок 17. 00:10:18
Context bridge
Урок 18. 00:01:55
Section Introduction
Урок 19. 00:07:46
Initial layout
Урок 20. 00:13:51
Separation to components
Урок 21. 00:09:41
Router
Урок 22. 00:10:45
Back button + More views
Урок 23. 00:13:45
Chat view
Урок 24. 00:08:07
Link to the chat
Урок 25. 00:11:28
Firebase
Урок 26. 00:12:45
Get data from Firestore
Урок 27. 00:10:26
Dotenv
Урок 28. 00:11:45
Initial store
Урок 29. 00:10:01
Create actions
Урок 30. 00:12:14
Chat reducer
Урок 31. 00:07:46
Display chats in the list
Урок 32. 00:02:12
Section Introduction
Урок 33. 00:07:09
Welcome view
Урок 34. 00:04:55
Toggling between forms
Урок 35. 00:06:14
Get value from the form
Урок 36. 00:10:47
Register a user
Урок 37. 00:07:51
Create user profile
Урок 38. 00:10:28
Listen to auth changes
Урок 39. 00:09:32
Auth reducer
Урок 40. 00:06:49
Logout
Урок 41. 00:07:10
Login
Урок 42. 00:11:45
Loading view
Урок 43. 00:11:07
User in the navbar
Урок 44. 00:11:09
Auth reducer refactor
Урок 45. 00:07:54
Displaying errors
Урок 46. 00:04:05
Login & Register reducer creator
Урок 47. 00:07:01
Reusable error reducer
Урок 48. 00:07:24
Reusable fetching reducer
Урок 49. 00:05:41
Provide user to action
Урок 50. 00:09:18
App refactor and store provider
Урок 51. 00:09:40
Auth route
Урок 52. 00:11:37
UX Improvements
Урок 53. 00:09:33
Fix after logout
Урок 54. 00:12:03
Layout HOC
Урок 55. 00:01:30
Section Introduction
Урок 56. 00:07:18
Check if application is connected
Урок 57. 00:07:44
Action to check connection
Урок 58. 00:07:57
Connection reducer
Урок 59. 00:07:11
Middlewares
Урок 60. 00:05:53
Notification util
Урок 61. 00:04:04
Display notification
Урок 62. 00:02:09
Section Introduction
Урок 63. 00:05:47
Chat create view
Урок 64. 00:07:05
Chat create form
Урок 65. 00:13:54
Create a chat
Урок 66. 00:10:23
Join the chat after create
Урок 67. 00:18:06
Sort chats
Урок 68. 00:09:32
Display sorted chats
Урок 69. 00:02:31
Restart the state after logout
Урок 70. 00:08:19
Join chat
Урок 71. 00:05:16
Join the chat reducer
Урок 72. 00:09:00
Subscribe to the chat
Урок 73. 00:07:01
Extract users from the chat
Урок 74. 00:09:37
Set active chat to reducer
Урок 75. 00:05:15
Display joined users
Урок 76. 00:09:23
Subscribe to profile
Урок 77. 00:08:55
Unsubscribe from user
Урок 78. 00:07:18
Check user connection
Урок 79. 00:11:20
Save user online status to FS
Урок 80. 00:02:26
Fixing online status after logout
Урок 81. 00:13:21
Displaying state changes
Урок 82. 00:06:07
Load chat improvements
Урок 83. 00:01:30
Section Introduction
Урок 84. 00:08:58
Messenger component
Урок 85. 00:07:16
Message object with timestamp
Урок 86. 00:08:32
Send message action
Урок 87. 00:09:06
Subscribe to message
Урок 88. 00:09:27
Display messages
Урок 89. 00:12:12
Extract message with author
Урок 90. 00:09:17
Register message subscription
Урок 91. 00:07:04
UX messages improvements
Урок 92. 00:04:42
Scroll on bottom
Урок 93. 00:08:26
Cleanup after logout
Урок 94. 00:07:51
Unsubscribe from chat
Урок 95. 00:06:47
Settings view
Урок 96. 00:05:34
Settings reducer
Урок 97. 00:08:20
Store data in local storage
Урок 98. 00:04:15
Load initial settings
Урок 99. 00:05:05
Custom storage
Урок 100. 00:09:30
Display styling changes
Урок 101. 00:08:46
Settings wrap up
Урок 102. 00:02:58
Connection fix
Урок 103. 00:03:17
Section Introduction
Урок 104. 00:15:37
App menu
Урок 105. 00:03:20
Multiple windows
Урок 106. 00:03:25
Dock icon
Урок 107. 00:02:26
Tray menu
Урок 108. 00:06:13
Splash screen
Урок 109. 00:07:37
Splash screen improvements
Урок 110. 00:05:09
Webpack production
Урок 111. 00:11:31
Build the app
Урок 112. 00:07:59
App testing & Course Ending

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии

Dmytro
20 мая 2024 г., 21:40
actually it's not "Electron & React JS" course it's "React JS" course with small mention about electron, so don't know why does it have word Electron in the title)