Pure JavaScript — Building A Real-World Application From Scratch
Modern JavaScript Frameworks like Angular, React and Vue.js makes it very easy to build complex single page web applications. However, using a those frameworks is not mandatory and you can also go with plain and pure JavaScript. This tutorial guides you through building a web application in pure JavaScript step-by-step.
What We’re Going To Build
The application we’re going to build in this tutorial looks like the following:
This is a simple issue tracker application and as you can see the user interface is split up into two sections. On top an input form is visible. By using the input fields for Description, Severity and Assigned To the user is able to enter new issues. The issues are stored in the Browser’s Local Storage. The list of existing issues is printed out in the bottom area. Here you can see that each issue is printed out with the details of description, severity and assigned to. In addition you can see that the issue is identified by a unique issue id. The issue is a GUID which is generated when the issue is created and stored in the Local Storage as well.
Furthermore each issue has a status assigned. By default the status is “Open”. If an issue is resolved the user is able to set the status to “Closed” by using the Close button. The issue can be deleted from the list (and from Local Storage) by clicking on button Delete.
Setting Up The Project
The project setup is really simple. Because we only want to use pure JavaScript we do not need to install frameworks or dependencies. Start by creating a new project folder and inside that new folder create two empty new files: index.html and main.js.
The file index.html is the entry point for our application and contains the HTML code. The file main.js will be included in index.html is contains the corresponding JavaScript code which is needed to implement the sample application.
Creating index.html
We’re starting by creating a basic HTML structure in index.html as you can see in the following listing:
including JQuery, Bootstrap and Chance.js
We’ll use Bootstrap CSS classes for applying styling to the user interface components. The easiest way to include Bootstrap is to add it from CDN.
First add the following in the head section:
Then include the following in the body section (right before the closing </body> tag):
We’re going to use a small JS library (ChanceJS) to generate unique identifiers for issues. Include that library by adding the following line as well:
Using live-server
As a development web server we’re using live-server in this tutorial. live-server is a small web server with reload capabilities. It’s available as an npm package, so installation can be done with:
Having completed the installation the command live-server is available. If you execute this command in the project directory the web server starts and our application opens in the browser.
Implementating the UI
Let’s add the HTML code to index.html which is needed to implement the user interface:
First notice, that we’ve attached the onload fetchIssues() event handler to the <body> element. This makes sure that the JavaScript function fetchIssues() is called each time the application loads. fetchIssues() will be implemented later on in file main.js and will load all issues from Local Storage, generates the HTML output for the issues list and attaches the output to the DOM.
Within the body section one <div> element with the Bootstrap CSS class container is used to contain all other HTML elements.
Let's take a look at the form implementation. It's important to notice that all input elements and the <form> element itself get an id assigned. By using that identifier we can later on retrieve a reference to that element within the JavaScript code.
Furthermore it's important to notice that the HTML code which is needed to output the list of existing issues is not included in index.html. The reason is obvious. The HTML which is needed for the list output is dynamic and depends on the issue records retrieved from Local Storage. So the only thing you can find here is a <div> element with id issuesList. This element gives us the possibility of generating the needed HTML code with JavaScript and then place the result within that element.
Fetching Issue Data From Local Storage
Let’s switch over to main.js and start implementing the JavaScript part of our application. The issue data should be saved in the Browser’s Local Storage. The first thing we’re going to implement is the code which is needed to retrieve issues from the Local Storage. We do that we adding function fetchIssues():
The first line of code is retrieving issues from Local Storage. This is done by executing localStorage.getItem('issues') and parse the string result into a JSON object.
With the second line of code we're retrieving the reference to the <div> element with id issuesList. The HTML content of that element can be accessed by property innerHTML. First we're using that property to set the content to an empty string. Next we're looping over the elements in issues by using a for loop and adding the HTML output for that element to issuesList.innerHTML.
Saving Issue Data To Local Storage After Form Submit
First we need to attach an event handler to the submit event of the form. That is done by using the following line of code:
A reference to the form element is retrieved by using getElementById. We’re passing in the string issueInputForm which is the id of the <form> element. The addEventListener method is called to attach the submit event of the form to the saveIssue event handler function. Let's implement this function next:
First, the input values from the form controls are retrieved and stored in local variables. The issueStatus is set to Open and issueId is generated by calling function chance.guid(). Next, the new issue object is inserted into the issues object in Local Storage.
Having inserted the issues object into Local Storage we need to empty the form by calling the reset() method. We’re calling fetchIssues() again to make sure that the list output is re-generated and that the new issue item will be visible.
Finally, we need to execute e.preventDefault() to avoid that the default submission of the form is taking place.
Setting The Closed Status
The HTML output which is generated for each issue item in function fetchIssues contains a button which can be used to set the issue status to Closed:
Here we’re attaching the click event to the event handler method setStatusClosed. The implementation of this method is available in the following listing:
The id of the current issue item is passed in as a parameter. To retrieve the corresponding item from Local Storage we first need to retrieve the issue items in JSON format. This is done by calling localStorage.getItem('issues') and passing the result to the JSON.parse() method.
Deleting An Issue
Another button is generated for each issue item:
By clicking on this button the user should be able to delete the current issue item from the list and from Local Storage. The click event is bound to the deleteIssue event handler function. The implementation of this method can be seen in the following:
The implementation is similar to the implementation of the setStatusClosed function we saw before. The main difference is that we’re using the splice method to delete the current item from the array issues. After having removed the current issue item from the array we’re writing it back to Local Storage and execute function fetchIssues again to update the list output.
Summary
Modern JavaScript frameworks like Angular, React and Vue.js makes it easy and convenient to write single page web application. However those frameworks are not essential and you can achieve the same results with plain & pure JavaScript. Furthermore, understanding the basics of JavaScript will help you to learn and use JS frameworks.
In this tutorial you’ve learned the basics of JavaScript by following a practical example, the issue tracker demo.
Name already in use
JavaScript / tutorials / lab3 / README.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
ЛР 3. Простое веб-приложение. Верстка
Цель данной лабораторной работы — знакомство с node, npm, написание простого приложения на JavaScript. В ходе выполнения работы, вам предстоит ознакомиться с кодом реализации простого интерфейса и вывода данных, и затем выполнить задания по варианту.
- Инструменты для работы
- Что такое node, npm и package.json
- Как работать с html в JS
- Инициализация проекта
- Создание главной страницы, подключение bootstrap
- Простая кнопка на JavaScript
- Структурирование проекта
- Верстка главной страницы
- Верстка страницы продукта
1. Инструменты для работы
Для работы будем использовать инструменты из предыдущих лабораторной работы: VS Code + Live Server.
Перед началом работы необходимо установить на свой компьютер Node.js.
2. Что такое node, npm и package.json
Наш JavaScript код, который мы писали в предыдущих лабораторных, исполняется в браузере. В браузере у нас есть компилятор JavaScript кода в машинных код, в Google Chrome это движок V8. Если мы хотим запускить код на нашем компьютере, а не в браузере, то нам нужно использовать Node.js. Node — это программная платформа, которая позволяет компилировать JavaScript код в машинный на нашем компьютере. Node.js добавляет возможность нам взаимодействовать с утройствами ввода-вывода, подключать внешние библиотеки. На нем в основном пишут веб-сервера, но есть возможность разрабатывать и десктопные оконные приложения и даже программировать микроконтроллеры.
В любом языке программирования нам нужно уметь работать с внешними библиотеками. На фронтенде для этого используется пакетный менеджер Npm. С помощью npm мы можем скачивать нужные нам пакеты, которые потом будем использовать в нашем приложении. Все наши библиотеки скачиваются в специальную папку node_modules , вы увидите ее у себя в проекте, когда скачаете первую библиотеку.
Package.json и package-lock.json
Package.json — это основной файл в нашем приложении, который хранит всю информацию о проекте. В этом файле хранится название проекта, описания, версия, скрипты и многое другое. Именно в этом файле храниться информация о всех пакетах, которые мы поставили через npm, и версия этих зависимостей.
Package-lock.json — это файл, который хранит дерево зависимостей. Библиотеки, которые мы устанавливаем, могут иметь вложенные зависимости и этот файл хранит полное дерево.
3. Как работать с html в JS
В прошлых лабораторных работах мы уже работали с HTML версткой из нашего JavaScript кода, для этого у нас есть общирное API по работе с DOM деревом. Сегодня мы будем использовать getElementById и insertAdjacentHTML, но функций намного больше.
4. Инициализация проекта
- Создаем пустую папку и открываем ее в VS Code.
- Инициализируем проект в npm с помощью команды npm init .
При инициализации проекта у нас будут спрашивать много вопросов, но их все можно пропустить нажав Enter . В конце у нас появится настроенный файл package.json .
Во все проекты принято добавлять .gitignore файл, который не будет добавлять лишнее в наш git репозиторий. Подробнее о .gitignore можно почитать тут.
- Создаем файл .gitignore и копируем туда содержимое файла.
Мы создали проект, который состоит из файлов package.json и .gitignore . Можно приступать к написанию основного кода.
По итогу мы имеем следующую структуру проекта.
5. Создание главной страницы, подключение bootstrap
Мы создали проект, теперь давайте начнем писать код. Когда пользователь заходит на сайт, то ему сначала подгружается файл index.html с базовой версткой, а потом уже подгружаются стили и скрипты. Если в вашем приложении не будет index.html файла, то браузер не сможет загрузить его.
- Создаем файл index.html
Если мы откроем html файл, то увидим страницу с надписью Hello world!.
Для того, чтобы было удобнее работать мы можем воспользоваться расширением Live Server, для этого открываем файл index.html и нажимаем Go Live в правом нижнем углу.
Для того, чтобы было проще верстать используем библиотеку css стилей bootstrap. Это библиотека стилей, в которой можно брать верстку и применять у себя на сайте. Для подключения установим библиотеку через npm.
- Устанавливаем библиотеку с помощью команды npm i bootstrap
После установки библиотеки можно увидеть, что у нас появилась папка node_modules и файл package-lock.json . О них мы говорили выше. Так же изменился файл package.json , в нем появилась наша библиотека с зафиксированной версией.
- Проверим, что мы успешно скачали bootstrap, для этого добавим кнопку из библиотеки компонентов в index.html
Как мы видим наша кнопка видна, значит мы все подключили успешно и можно переходить к написанию JavaScript кода.
По итогу мы имеем следующую структуру проекта.
6. Простая кнопка на JavaScript
У нас есть приложение, которое имеет главную страницу. Сейчас у нас кнопка находится в файле index.html , попробуем ее из HTML файла и нарисовать с помощью JS. Для того, чтобы в JS получить доступ к нашему HTML дереву у нас должен быть корневой элемент. Он будет родителем и к нему мы будем добавлять остальные компоненты.
- Добавляем корневой элемент в index.html
Теперь у нас есть корневой элемент, к котором мы можем обратиться из нашего JavaSctip. Создадим js файл, подключим его и попробуем обратиться к HTML дереву.
- Создаем файл main.js , для доступа к HTML будем использовать getElementById
У нас есть простой JS файл, который получает корневой элемент. Для того, чтобы этот файл загрузился в браузер необходимо добавить его в наш index.html
- Подключаем этот файл в index.html
У нас в main.js файле есть корневой элемент. Попробуем в него добавить нашу кнопку, которую раньше мы создавали в HTML.
- Добавляем кнопку в main.js
Как мы видим наша кнопка появилась на экране, значит мы правильно написали на JavaScript файл. Теперь попробуем написать что-то посложнее.
По итогу мы имеем следующую структуру проекта.
7. Структурирование проекта
Мы написали простую страничку на JS, но мы же не сможем вечно все писать в одном файле. Нам необходимо как-то разбивать наш проект по мелким файлам.
Сейчас мы имеем следующее разбиение по файлам:
В фронтенде верстку разделяют на страницы (Pages) и компоненты (Components). Страница — это отдельная страница как наша главная. Компонент — маленькие блоки из которых состоит страница.
Добавим дополнительные папки в нашу структуру:
- pages — тут будут лежать наши страницы
- components — тут будут лежать наши компоненты
Теперь наша структура выглядит следующим образом:
Страница на новой архитектуре
Теперь попробуем переписать нашу страницу под новую архитектуру.
- Создаем нашу страницу pages/main/index.js
Наша страница должна рендериться в root элемент. Добавим конструктор, где будем получать родительский элемент и сохранять его.
- Добавляем конструктор
У нас есть родительский элемент, но наш нужна функция при вызове которой мы будем рендерить эту страницу.
- Добавляем функцию рендера
- Добавляем логику рендера кнопки на странице
У нас есть класс страницы, теперь необходимо добавить вызов этого класса в нашем основном файле main.js
- Добавляем вызов файла в main.js
Все работает, кнопка видна на странице. Мы сказали, что у нас страница должна состоять из мелки компонентов, а сейчас верстка кнопки происходит на странице. Вынесем в компонент и добавим ее на странице.
- Создаем наш компонент components/button/index.js
- Подключаем наш компонент на странице
Все работает, кнопка видна на странице. Теперь сделаем нашу страницу такой, чтобы она была готова к нашим данным.
По итогу мы имеем следующую структуру проекта.
8. Верстка главной страницы
Теперь добавим на главную страницу список карточек. Для отображения будем использовать карточки из bootstrap.
- Создаем компонент карточки components/product-card/index.js
- Добавляем верстку карточки. Для удобства вынесем верстку в отдельную функцию
- Теперь добавим наш компонент на страницу
Отлично, у нас отображается карточка. Сейчас у нас данные захардкожены в компонент, а нам бы хотелось прокидывать данные в компонент.
- Добавим отрисовку компонента из данных
Теперь у нас функция render принимает данные, которые будет отрисовывать. При вызове компонента нам необходимо прокидывать тестывое данные со страницы, потом это мы заменим на получение данных с бекенда.
- Прокидываем тестовые данные в компонент со страницы
Отлично, данные отображаются. Теперт нам хотелось бы отрисовать больше чем один компонент. У нас может приходить список данных, для отрисовки в карточках, а сейчам мы умеем рисовать только одну карточку. Для этого нам нужно добавить родительски элемент на главной странице. В этот элемент мы будем добавлять все наши компоненты.
- Добавляем родительский элемент
У нас есть элемент, в который мы будем добавлять наши дочерние компоненты. Теперь надо изменить логику так, чтобы мы умели работать с массивом данных, а не с одним элементом.
- Перерабатываем логику для работы с массивом данных
Мы смогли отрисовать сразу несколько компонентов, но если мы попробуем нажать на кнопку, то ничего не произойдет. Добавим обработчики нажатия на кнопку. Для того, чтобы нам это сделать нужно внутри компонента подписаться на собитие клик по кнопке и обработать вызов этой функции. Функция, которая будет срабатывать по клику будем прокидывать в компонент из страницы.
- Добавим нашей кнопку уникальный id, чтобы по нему мы могли найти кнопку и подписаться на событие клика
У кнопки появился уникальный id и мы можем подписаться на клик по этой кнопки. Для подписки на событие используем функцию addEventListener
- Добавляем подписку на нажатие кнопки
У кнопки в нашей появился обработчик, который будет срабатывать при нажатии на нее. Добавим на главной странице функцию, которая будет срабатывать по нажатию и прокинем ее в компонент. При создании кнопки мы добавли ей data атрибут, чтобы при обработке мы могли его достать и узнать по какому элементу мы нажали.
- Добавляем обработчик на главной странице
Теперь у нас есть все что нам нужно, осталось создать вторую страницу и нарисовать ее.
По итогу мы имеем следующую структуру проекта.
9. Верстка страницы продукта
У нас есть главная страница, добавим страницу продукта.
- Создаем страницу продукта pages/product/index.js . Наша страница будет принимать дополнительный аргумент id, номер выбранной страницы
У нас есть страница продукта, нужна создать компонент, который мы будем отрисовывать на этой странице.
- Создаем компонент продукта components/product/index.js
- Добавим отрисовку компонента на странице продукта
У нас есть страница продукта, сделаем так, чтобы при нажатии на карточку на главной странице у нас открывалась страница продукта.
- Добавляем открытие страницы продукта при нажатии на карточку
Все работает. При нажатии на кнопку в карточке на главной странице у нас открывается страница продукта. Для удобства добавим кнопку, которая будет возвращать на главную страницу.
- Создаем компонент components/back-button/index.js
- Добавляем кнопку на страницу продукта и ее обработчик
Все работает, если нажать на кнопку, то мы вернемся обратно на главную страницу. На этом лабораторная работа закончилась.
По итогу мы имеем следующую структуру проекта.
Создать двухстраничное приложение из примера по вариантам. Вариант состоит из темы и компонента, который необходимо использовать. Все данные должны соответствовать вашей теме. Компонент можно применить по своему усмотрению.
Как написать приложение на JavaScript: Создаем калькулятор на JS
Publish Date 30 мая, 2023 
Mate academy
В этой статье мы рассмотрим, как создать простой веб-калькулятор с использованием HTML, CSS и JavaScript. Калькулятор будет выполнять основные математические операции: сложение, вычитание, умножение и деление.
Основы JavaScript для создания калькулятора
Прежде чем мы начнем, давайте рассмотрим несколько основных концепций JavaScript, которые нам понадобятся:
- Переменные: В JavaScript переменные используются для хранения данных, таких как числовые значения для вычислений.
- Функции: Функции в JavaScript используются для выполнения определенных действий. В нашем случае мы будем использовать функции для вычисления результатов математических операций.
- Обработчики событий: Обработчики событий позволяют выполнять код в ответ на определенные действия пользователя, например, при нажатии кнопки.
Подготовка к работе
Вам понадобится текстовый редактор для написания кода и веб-браузер для его просмотра. Можно использовать любой текстовый редактор, такой как Sublime Text, Atom или Visual Studio Code. Что касается веб-браузера, вы можете использовать любой современный браузер, например, Chrome, Firefox или Safari.
Создание HTML-структуры онлайн калькулятора
Прежде чем начать писать JavaScript, нам нужно создать основную структуру нашего калькулятора с помощью HTML. Наш HTML-код может выглядеть примерно так:
Этот код создает веб-страницу с калькулятором, который имеет дисплей для вывода результатов и кнопки для ввода чисел и выполнения операций. Класс ‘ button ‘ добавлен к каждой кнопке калькулятора, что позволяет легко манипулировать этими кнопками в JavaScript.
Добавление стилей CSS для калькулятора
CSS является ключевым элементом создания привлекательного визуального вида нашего калькулятора. Он позволяет нам создавать как простые, так и сложные дизайны, а также обеспечивает хорошее понимание структуры нашего HTML. В частности, мы можем использовать CSS для изменения шрифтов, цветов, отступов, рамок и других элементов.
Давайте рассмотрим, как мы можем написать наш CSS, чтобы сделать наш калькулятор более привлекательным.
Стилизуем калькулятор в целом
Стилизуем дисплей калькулятора
Делаем стили для кнопок
Добавляем дополнительные стили для наведения и кнопки «=»
Финальний вид CSS калькулятора
В этом CSS мы использовали цвета, тени и переходы, чтобы создать более привлекательный и динамичный вид. Это всего лишь один из множества возможных вариантов оформления калькулятора, и вы можете экспериментировать с различными стилями и цветами, чтобы создать свой собственный уникальный стиль калькулятора.
Пишем логику калькулятора с использованием JavaScript
Следующим шагом является добавление логики калькулятора с использованием JavaScript. Это включает сохранение введенных чисел и выполнение вычислений на основе нажатой кнопки.
Сначала добавим JavaScript-код для обработки событий кликов по кнопкам.
Получаем все кнопки из документа:
Добавляем событие onclick ко всем клавишам и выполняем действия
Получаем ввод и значение кнопки:
Теперь просто добавляем значение кнопки ( btnValue ) к входной строке и, наконец, используем функцию eval JavaScript для получения результата. Если нажата кнопка очистки, мы удаляем все.
Если нажата кнопка равенства, вычисляем и отображаем результат.
Заменяем все случаи ‘ x ‘ на ‘ * ‘ соответственно. Это можно легко сделать с помощью регулярного выражения и флага ‘ g ‘, который заменит все вхождения найденного символа/подстроки.
Последнее, что осталось сделать, это проверить последний символ уравнения. Если это оператор или десятичный разделитель, удаляем его.
Основной функционал калькулятора завершен. Однако есть некоторые проблемы, такие как:
- Не должно быть двух операторов подряд.
- Уравнение не должно начинаться с оператора, кроме минуса.
- В числе не должно быть более одного десятичного разделителя.
Мы решим эти проблемы с помощью некоторых простых проверок.
indexOf (работает только в IE9+)
Нажато на оператор. Получаем последний символ из уравнения
Добавляем оператор, если входное значение не пусто и нет оператора в конце.
Разрешаем минус, если строка пустая.
Заменяем последний оператор (если он существует) на только что нажатый оператор.
Здесь ‘ . ‘ соответствует любому символу, а $ означает конец строки, поэтому что бы то ни было (будет оператором в данном случае) в конце строки будет заменено на новый оператор.
Теперь осталась только проблема с десятичным разделителем. Мы можем легко решить ее с помощью флага ‘ decimalAdded ‘, который мы установим один раз, когда добавим десятичный разделитель, и предотвратим добавление более одного десятичного разделителя сразу после его установки. Флаг будет сброшен при нажатии оператора, eval или клавиши очистки.
Если нажата любая другая клавиша, просто добавляем ее.
Кроме того, мы предотвращаем перезагрузку страницы после отправки.
В итоге наш JavaScript будет выглядеть так:
Этот код работает, обрабатывая события клика по всем кнопкам калькулятора. Он использует цикл for для прохождения через все кнопки и добавления обработчиков событий onclick к каждой из них.
Этот код также содержит проверку, чтобы избежать следующих ситуаций:
- Два оператора не могут быть добавлены последовательно.
- Уравнение не может начинаться с оператора, кроме минуса.
- В числе не должно быть более одного десятичного разделителя.
Это реализовано с помощью нескольких простых проверок в коде.
Тестирование и исправление ошибок
Сразу после разработки нашего простого калькулятора на JavaScript мы должны провести его тестирование, чтобы убедиться, что все работает должным образом.
1. Основные функциональные тесты
Основные функциональные тесты направлены на проверку основной работы калькулятора, то есть сложение, вычитание, умножение и деление чисел. Они включают ввод нескольких чисел и выполнение операций между ними. Во время этих тестов важно проверить, что отображение на экране обновляется должным образом и показывает правильные результаты.
2. Тесты граничных значений
Тесты граничных значений являются очень важными, поскольку они помогают выяснить, как калькулятор ведет себя в крайних случаях. Вы можете ввести очень большие числа или выполнять операции, вызывающие математические ошибки, например, деление на ноль. Такие тесты помогут выявить возможные ошибки или непредвиденное поведение в программе.
3. Исправление ошибок
После обнаружения ошибок или проблемных моментов на этапе тестирования следующим шагом является их исправление. Важно внести соответствующие изменения в код и повторно протестировать калькулятор, чтобы убедиться, что проблема была решена. Это может включать изменение логики JavaScript или даже изменение HTML и CSS, если проблема связана с отображением.
По завершении этого процесса наш калькулятор готов к использованию! Всегда помните, что тестирование — это важный аспект разработки программного обеспечения, и даже самое простое веб-приложение должно быть тщательно протестировано перед запуском.
Заключение
Создание простого веб-калькулятора — отличный проект для начала работы с JavaScript. Он помогает понять основы языка и демонстрирует, как можно использовать JavaScript для создания веб-приложений.
Полное руководство по созданию классических приложений на JavaScript
Еще недавно разработка классических приложений считалась сложной задачей — для этого приходилось учить специальный язык программирования, например Java или C++. К счастью, сейчас веб-разработчики могут создавать прекрасные классические приложения, конвертируя код JavaScript в полноценные программы. Давайте разберемся, что для этого нужно.
Прежде чем перейти к основному материалу, ознакомьтесь с моим последним руководством по созданию классических приложений здесь. Это расширенная версия этой статьи, описывающая пять проектов и способы монетизации.
Сегодня мы рассмотрим следующие вопросы.
Инструменты для создания классических приложений.
Создание классического приложения для чтения блога Medium.
1. Инструменты для создания классических приложений
Веб-разработчикам, которые намерены создавать классические приложения, сначала стоит ознакомиться с основными инструментами в их арсенале и сосредоточиться на самых полезных решениях с учетом поставленных задач. Рассмотрим три лучших фреймворка JavaScript для создания классических приложений, которые дадут вам общее представление о доступных инструментах.
Electron
Это самый популярный и эффективный инструмент — возьмем его на вооружение. Он служит нам верой и правдой уже не один год и завоевал уважение многих компаний, например Slack, Atom, Discord, Intuit и др.
Он был создан на GitHub и благодаря качественному коду заслужил отличную репутацию. Очевидно, что этот фреймворк будет развиваться и активно использоваться в будущем.
В его основе лежит движок Chrome, а это значит, что ваши приложения будут быстро работать на любых компьютерах.
Это прекрасное решение для веб-разработчиков, которые хотят заняться созданием классических приложений, поскольку в нем используются JavaScript, HTML и CSS.
Это еще один отличный инструмент, правда, менее популярный. С его помощью классические приложения можно разрабатывать на Node.js. Раньше этот движок назывался node-webkit, так как в нем используется та же технология, что и в браузерах Chrome и Safari.
Proton Native
Proton Native прекрасно подойдет тем, кто знаком с React и React Native. В нем используется фреймворк React, а значит, вы можете пользоваться любыми библиотеками React.js.
При решении некоторых задач он демонстрирует даже большую эффективность, чем Electron, поскольку в нем используется собственный движок, который обеспечивает производительность на уровне нативных приложений.
Он подойдет программистам, знакомым с React, которые хотят получить больше контроля в ущерб скорости разработки.
Теперь вы знакомы с основными инструментами разработки классических приложений, которые пригодятся веб-разработчику. Давайте начнем с Electron — это оптимальное решение для новичков, подходящее для выполнения большинства задач.
2. Настройка проекта с Electron.js
У этого фреймворка есть огромное преимущество: написав код один раз, вы можете сразу же развертывать его на устройствах Windows, Mac и Linux.
Для начала загрузите Node.js — он позволит исполнять код JavaScript вне браузера. Скачать можно отсюда: https://nodejs.org/en/
После установки вы сможете запускать команды node -v и npm -v из командной строки или терминала.
Для загрузки файлов, необходимых для начала работы, вам нужно будет настроить проект Node. Для этого создайте папку с именем blog-reader-electron на своем компьютере. Выполните команду npm init -y. В этой папке появится файл package.json.
Откройте его в текстовом редакторе. Я использую Atom.io. Измените объект scripts так, как показано ниже. Больше ничего менять не нужно.
Примечание. Не удаляйте другие данные, просто обновите объект scripts. Он нам понадобится позже для запуска классического приложения. Вот как должен выглядеть ваш файл package.json.
package.json
Теперь нужно установить electron — это утилита командной строки, которую мы используем для управления проектом в качестве dev-зависимости.
Затем создайте файл index.js в корневой папке проекта. Этот файл будет использоваться для запуска нашего приложения. Добавьте в файл index.js этот код, чтобы вывести на экран стартовое окно.
index.js
Как видите, мы импортируем модули app и BrowserWindow из зависимости electron .
App используется для установки приложения, над которым мы работаем, а BrowserWindow — для вывода стартового окна.
Теперь в корневой папке проекта нужно создать файл index.html с таким кодом (размещать его в подпапках нельзя):
index.html
Это простой файл на HTML5, назначение которого, вероятно, вам не совсем понятно. Обратите внимание на теги title и body — в них будет размещаться содержимое. Заголовок страницы — My Electron App, и в теге body есть точно такой же заголовок.
Готово! Настройка завершена. Теперь запустите приложение. Для этого в терминале наберите команду npm start . Появится примерно такое всплывающее окно.
В верхней части страницы вы видите содержимое тега title, а на самой странице — заголовок.
Теперь приступим к разработке самобытного приложения для чтения блогов.
3. Создание классического приложения для чтения блога Medium
Сегодня мы создадим приложение для чтения блогов, которое показывает список определенных статей на Medium и позволяет читать их, не переходя на сайт.
В приложении можно просматривать только нужный вам контент, не отвлекаясь на дополнительные материалы сайта. В нем будут собраны все самые интересные статьи — и ничего лишнего.
Вот как оно будет выглядеть:
Хотите создать такое же? Тогда читайте дальше!
Разработка приложения не займет много времени. Мы сделаем это в три этапа.
Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице.
Получение данных с сайта Medium через RSS-канал и их обработка.
Разработка дизайна и функционала приложения.
Начнем. На странице будет отображаться заголовок определенной публикации, которую мы хотим прочитать, и список из девяти статей, каждую из которых можно развернуть нажатием ссылки или изображения. Статья откроется в iframe .
1. Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице
Создайте новый файл style.css в корневой папке. Именно в нем мы будем писать весь CSS-код. Не забывайте, что мы пишем классическое приложение на языках, предназначенных для веб-разработки.
Импортируйте таблицу стилей в файл index.html следующим образом:
В HTML-файле измените содержимое тега body :
index.html
Мы удалили заголовок и создали кнопку, которая закрывает текущую статью. Затем мы создали элемент div с id root , который нужен нам для отображения всего контента.
И наконец, мы подключили к веб-странице сценарий inside.js , который будет исполняться внутри страницы, то есть в нашем классическом приложении.
Созданный раньше файл сценария — index.js — к приложению не подключен и не может получить доступа к содержимому страницы, вот почему мы создали новый сценарий inside.js .
2. Получение данных с сайта Medium через RSS-канал и их обработка
HTML-файл настроен, и теперь мы можем получать данные с сайта Medium и отображать недавно добавленные статьи в нашем приложении. Для этого будем использовать RSS-каналы — это тот же самый блог, только конвертированный в формат JSON или XML, удобный для обработки в таких приложениях, как наше.
Теперь нужно объявить функцию getMediumArticles в файле inside.js со следующим содержимым:
inside.js
Как видите, мы написали асинхронную функцию, потому что используем метод fetch , который возвращает промис для получения статей блога.
Выполняем GET-запрос к rss2json.com , который преобразует адрес нужной публикации https://forge.medium.com/feed в объект JSON. Это нужно для отображения индивидуальных блоков с информацией о статьях.
Теперь напишем HTML для отображения полученных данных в виде структурированного блока:
inside.js
Это отличное решение, хотя и выглядит немного запутанно. Главное — понять, что к чему. Я добавил переменную html , которая содержит строку с HTML-данными.
Сначала мы настроили основной заголовок, который получает данные с response.feed.description . Это главный заголовок в верхней части страницы.
Там, где будет открываться статья после перехода по ссылке, я добавил элемент iframe . Вот как это будет выглядеть:
Если статья открыта в iframe , вы не сможете просматривать список других статей, поэтому мы создали кнопку «Закрыть», которая скрывает статью.
Я пробовал разные решения, вариант с iframe оказался самым эффективным — его можно быстро открывать и закрывать.
Затем я создал элемент div , к которому добавил класс item-container — в нем будут располагаться все блоки со статьями. Элементы генерируются с помощью цикла for :
Каждый блок представляет собой элемент div с заголовком и содержимым. Содержимое включает имя автора и описание статьи — вступление и изображение.
В моем случае это элемент items[i].description , который содержит данные, полученные с блога Medium в их стандартном HTML-формате.
Закрываем последний div и html :
Теперь вставляем сгенерированный HTML-код на нашу страницу:
На странице появляются блоки. Но с функционалом мы еще не закончили: осталось написать ту часть приложения, которая будет отображать полный текст статьи, выбранной пользователем. Для этого заменим параметр src в элементе iframe , в котором будет открываться статья.
Вот как это сделать:
Функция findElement выбирает все интерактивные элементы в каждом блоке со статьей, ищет активную ссылку и загружает в iframe нужные данные.
Например, когда вы нажмете на изображение, в iframe откроется соответствующая статья целиком.
Возможно, вот эта часть в самом начале выглядит не очень понятно:
Но она всего лишь означает: «Проверь, отрендерился ли основной заголовок (main-title), если нет, попробуй снова выполнить эту функцию». Рендеринг полученных данных займет всего несколько секунд, и мы сможем получить доступ к статьям.
Теперь в блоке else выберем все интерактивные элементы во всех блоках со статьями и добавим слушатель событий click , который будет отслеживать нажатия на блоки. В результате мы сможем открыть iframe с новым содержимым атрибута src .
Обратите внимание на эту часть:
Как вы помните, открыть статью можно двумя способами, поэтому здесь мы определяем, нажал пользователь на картинку или непосредственно на ссылку. Мы извлекаем нужный нам атрибут href , который будем использовать в iframe .
Теперь в асинхронную функцию findElement можно вставить функцию getMediumArticles , которая будет отслеживать нажатия на блоки. Вот как в конце концов будет выглядеть код в файле inside.js :
Окончательный сценарий inside.js
Обратите внимание, что в конце выполнения getMediumArticles() функция findElement() добавляет слушатель событий к кнопке close . Этого достаточно для того, чтобы вывести на экран все блоки и открыть статью после нажатия на блок.
3. Разработка дизайна и функционала приложения
Наше приложение должно быть приятным в использовании, поэтому займемся дизайном. Вы можете оформить приложение по-своему или воспользоваться моим файлом style.css :
Запустите приложение из терминала с помощью команды yarn start или npm start . Все работает!
4. Развертывание приложения
Осталось только развернуть приложение, чтобы получить исполняемый файл, который можно запустить на компьютере Windows или Mac и опубликовать для скачивания другими пользователями.
Для этого установим пакет:
Это позволит осуществлять доступ к нужному нам инструменту electron-packager откуда угодно.
Теперь перейдите в папку проекта и запустите команду:
Команда electron-packager . medium-reader сообщает приложению, что нужно скомпилировать текущий проект (именно поэтому там стоит точка), и присваивает приложению название medium-reader. Можно указать любое имя.
После выполнения этой команды приложение будет готово к использованию. Я работаю на Mac, поэтому создал папку medium-reader-darwin-x64 с несколькими файлами:
— LICENSE- LICENSES.chromium.html- medium-reader.app- version
Основной файл — это medium-reader.app . Это исполняемый файл, который запускает приложение по щелчку мыши. На Mac приложение можно будет установить только после того, как вы вручную перенесете его в папку Applications/ .
Если вы работаете на компьютере Windows, у вас будет файл .exe , который запускается точно так же.
Вот и все! Теперь вы знаете, как использовать веб-технологии для создания классических приложений с помощью Electron в рекордные сроки. Если вы хотите узнать больше, прочитайте полное руководство и рассмотрите пять дополнительных проектов, которые помогут вам создать портфолио, освоить новые навыки и выполнять более сложные заказы по разработке классических и веб-приложений: https://merunas.io/desktop-app-mastery.html
Вы научитесь создавать современные классические приложения, которые будут генерировать прибыль для вас и вашего бизнеса.
Всех желающих приглашаем на открытый урок «Создание интерактивных страниц, работа с анимациями». Урок посвящен анимациям в вебе. Рассмотрим способы создания интерактивных страниц, научимся анимировать переходы состояний HTML элементов, а также создавать анимации как на CSS, так и на JavaScript.
• РЕГИСТРАЦИЯ НА УРОК