Открыто

Electron & React JS: Build a Native Chat App with Javascript [udemy] [Filip Jerga]

Тема в разделе "Курсы по программированию", создана пользователем shiokuo, 31 окт 2020.

Цена: 1050р.
Взнос: 1050р.

Основной список: 1 участников

Резервный список: 1 участников

  1. 31 окт 2020
    #1
    shiokuo
    shiokuo ОргОрганизатор

    Electron & React JS: Build a Native Chat App with Javascript [udemy] [Filip Jerga]

    Electron и React JS: создайте собственное приложение для чата с помощью Javascript

    Узнайте, как создать приложение для чата с Electron и React. Используйте JS, Html, CSS + Firebase (DB) для создания полностью нативного приложения (native app)

    [​IMG]

    • Общая продолжительность 15 ч 3 мин
    Курс на английском языке.
    Субтитры английские и Русские (гугл переводчик)


    Чему вы научитесь

    • Понять, как работает Electron JS
    • Создайте "реальное" чат-приложение
    • Создавайте собственные приложения с Javascript, Html + CSS
    • Узнайте, как использовать React JS в сочетании с Electron
    Описание
    Электрон:

    Если вы можете создать веб-сайт, вы можете создать настольное приложение. Electron - это платформа для создания собственных приложений с использованием веб-технологий, таких как JavaScript, HTML и CSS. Он заботится о самых сложных частях, поэтому вы можете сосредоточиться на ядре вашего приложения.

    Реагировать на JS:

    React делает безболезненным создание интерактивных интерфейсов. Создавайте простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных.

    Firebase:

    Firebase предоставляет вам такие функции, как аналитика, базы данных, обмен сообщениями и отчеты о сбоях, поэтому вы можете быстро двигаться и сосредоточиться на своих пользователях.
    --- Беглый взгляд на курс ---

    В первом разделе вы узнаете, что такое Electron JS и какие функции он предлагает. Мы изучим основные концепции, такие как основной процесс и процесс рендеринга, среди многих других. Пользовательская часть приложения будет обрабатываться React Library, мы установим React и подготовим Webpack, который будет отвечать за объединение наших исходных файлов.

    Во втором разделе мы создадим несколько представлений, таких как «Домой», «Чат», «Настройки» и многие другие. Мы интегрируем систему маршрутизации, чтобы мы могли перемещаться между представлениями. Управление состоянием приложения будет осуществляться архитектурой redux, и данные будут храниться в базе данных Firestore. Я покажу вам, как использовать запросы Firestore, как получать данные и управлять ими.

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

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

    В пятом разделе мы будем работать над функциями управления чатом. Первым будет функция создания чата. После того, как чат будет создан, он отобразится в списке доступных чатов. При нажатии на кнопку присоединения чат будет присоединен и добавлен в список присоединившихся. Онлайн-статус пользователя будет отображаться, когда он присоединится к чату. Зеленая точка будет указывать на то, что пользователь в сети, серая точка будет зарезервирована для автономного статуса.

    В шестом разделе мы будем работать над функцией обмена сообщениями. Пользователи смогут написать сообщение и отправить его в нашу базу данных Firestore. Наше приложение сможет обнаруживать новые сообщения и отображать их в текущем активном чате. Сообщения будут синхронизироваться между многими активными клиентами.

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

    В седьмом разделе мы поработаем над небольшими настройками в среде Electron. Мы создадим меню приложения с множеством настроек. Мы добавим значок в трее в верхнее или нижнее меню нашей операционной системы. Изменим иконку нашего приложения и начнем работать над заставкой. Экран-заставка будет отображаться до того, как наше основное приложение будет полностью загружено. На последних лекциях мы подготовим конфигурацию сборки и встраиваем наше приложение в исполняемые файлы, которые могут работать в Windows, Linux и macOS.

    Это все из превью. В лекциях освещается гораздо больше. Надеюсь, вам понравится приложение, над которым мы будем работать, и я надеюсь увидеть вас на курсе.

    Для кого этот курс:
    • Разработчики ищут очень практичное руководство
    • Люди, желающие использовать веб-технологии (JS, Html, CSS) для создания собственных приложений
    • Разработчики, ищущие простой способ создания собственных приложений
    Продажник

    Electron & React JS: Build a Native Chat App with Javascript
    Learn how to build a chat app with Electron & React. Utilize JS, Html, CSS + Firebase(DB) to create a fully native app


    Требования

    • Basic/Mid understanding of JS(ES6) & React JS required!

    Описание
    Electron:

    If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

    React JS:

    React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

    Firebase:

    Firebase gives you functionality like analytics, databases, messaging, and crash reporting so you can move quickly and focus on your users.

    Чему вы научитесь
    • Understand how Electron JS works
    • Create a "real-life" chat application
    • Create native apps with Javascript, Html + CSS
    • Learn how to use React JS in combination with Electron

    --- Course Overview ---

    In the first section, you are going to learn what Electron JS is and what features it offers. We will learn basic concepts like the main and renderer process among many others. The UI part of the application will be handled by React Library, we will install React and we will prepare Webpack which will be responsible for bundling of our source files.

    In the second section, we will create multiple views like Home, Chat, Settings views, and many others. We will integrate the routing system so we can navigate between the views. State management of the application will be handled by redux architecture and the data will be stored in the Firestore database. I will show you how to use Firestore queries, how to fetch and manipulate data.

    The third section will be dedicated to authentication. We will create a login and register form and I will teach you how to handle errors coming from Firestore. Only logged in users will have full access to our application.

    In the fourth section, we will explain redux middleware and we will work on the Notification feature. The application will be able to detect whether the user is offline or online. Connection changes will be displayed by the Notification system.

    In the fifth section, we will be working on chat management features. The first one will be chat create functionality. After the chat will be created it will be displayed in the list of available chats. Upon clicking on the join button chat will be joined and added into the list of joined ones. The online status of a user will be displayed when the user will be joined in the chat. A green dot will indicate that the user is online, the gray dot will be reserved for offline status.

    In the sixth section, we will be working on the messaging feature. Users will be able to write a message and send it out to our Firestore database. Our Application will be able to detect new messages and display them in the current active chat. Messages will be synchronized amongst many active clients.

    Next, we will work on the settings view. Users will be able to change the global settings of our application. Settings will affect mostly the theme of our application and the way how Notifications work. We will store settings in local storage so we are able to retrieve them in the next load of our application.

    In the seventh section, we will work on small adjustments in the Electron environment. We will create an application menu with multiple settings. We will add a tray icon to the top or bottom menu of our operating system. We will change the icon of our application and we will start working on the splash screen. The splash screen will be displayed before our main application will be fully loaded. In the last lectures, we will prepare the build configuration and will build up our application into executable files that can run on Windows, Linux, and macOS.

    That’s it from the preview. There is much more covered in the lectures. I hope you like the application we are going to work on and I hope to see you in the course.


    Для кого этот курс:
    • Developers looking for a very practical guide
    • People wanting to utilize web technologies(JS, Html, CSS) to create native apps
    • Developers looking for an easy way to create native applications
     
    Последнее редактирование: 10 ноя 2020
  2. Последние события

    1. shiokuo
      shiokuo не участвует.
      3 дек 2020
    2. skladchik.com
      Нужен организатор складчины.
      3 дек 2020
    3. Майкл Оуэн
      Майкл Оуэн участвует.
      31 окт 2020
    4. Privatesource
      Privatesource участвует.
      31 окт 2020

    Последние важные события

    1. skladchik.com
      Нужен организатор складчины.
      3 дек 2020
    2. skladchik.com
      shiokuo организатор.
      31 окт 2020

Поделиться этой страницей