На сегодняшний день программа — это интерфейс, мост между компьютером и пользователем. Есть еще одно слово, которое было обозначено для него, которое называется приложением. Приложение было бы хорошим использованием чьего-либо времени, чтобы сделать себя продуктивным. Что ж, учитывая количество смартфонов по отношению к количеству персональных компьютеров, мобильных приложений больше, чем настольных. Это оставляет очень большую серую зону для пользователей настольных компьютеров в поиске продуктивных приложений.
Процесс подачи заявок
Когда-то приложения писались на машинном языке, затем появился язык ассемблера, который был более читаемым, а сегодня у нас есть Java, на которой мы будем делать наше настольное приложение. Почему Java, в частности? Потому что он более удобочитаем и прост в использовании, как и естественный человеческий язык. Он имеет минимальную базовую настройку и работает буквально везде.
Наша архитектура приложений
MVC (Model View Controller), где Angular занимает {место?}, можно понимать как набор стандартных практик, механизм, который помогает гарантировать, что вы не прольете свой код из чашки кофе, помогая вам организовать ваш кода внутри и быстро исправлять ошибки, когда они появляются. Модельная часть убирает логику приложения и помещает его в другой контейнер, где оно соединяется с другими, но вся логика выполняется там, поэтому, если у вас есть какие-то логические проблемы, вам не нужно открывать и искать все файлы. Он управляет всеми входящими и исходящими данными приложения.
Часть представления MVC (Model View Controller) — это место, где все визуализируется и отображается в браузере. Вся графика и текст, которые вы видите на веб-странице, находятся там, где существует модуль представления MVC. Часть контроллера — это место, где обрабатываются все входные данные от пользователя, и он передает все это модели и представлению. Таким образом, Angular — это веб-фреймворк, поддерживаемый Google людьми, которые помогают в разработке приложений, известных как SPA (одностраничные приложения). Он преобразует ваше приложение в архитектуру Model-View-Controller.
ElectronJS — это еще одна платформа, которая позволяет вам преобразовать ваше веб-приложение или веб-сайты в исполняемое приложение, которое может в полной мере использовать все функции Windows, Mac или Linux любой операционной системы.
Теперь Node.js — это среда, поверх которой все это находится. Это помогает всем использовать Javascript для написания английского языка как языка программирования, который можно легко понять. Это как на стороне сервера, так и на стороне клиента. Это поможет вам обслуживать свои услуги, а также обеспечивать логику на стороне клиента.
Процесс установки среды
Мы будем использовать операционную систему Windows 10 для разработки стартового приложения.
Скачать NodeJS
https://nodejs.org/en/download/
Перейдите по URL-адресу и загрузите установщик. Этот же веб-сайт можно использовать для загрузки NodeJS и для других платформ.
Теперь запустите установщик, и вас должен приветствовать экран установщика NodeJS. Нажмите «Далее» и продолжите. Выберите «Выборочная установка» и убедитесь, что опция «Установить все с диска» должна быть включена, особенно «Добавить в PATH». Add to Path связывает каталог nodeJS с путями вашей среды, что похоже на глобальный доступ ко всем командам и исполняемым файлам.
Это похоже на то, что вам не нужно переходить в каталог NodeJS для запуска команд, команды NodeJS будут доступны в любом месте в любом каталоге. После завершения установки давайте проверим, успешно ли установлен Node. Чтобы проверить это, откройте диалоговое окно «Выполнить» из меню «Пуск», нажмите сочетание клавиш Window + R, введите CMD и нажмите клавишу ввода. Вы должны прийти к командной строке.
Введите следующие команды
Это должно дать вам установленную версию. У нас установлен Node. Теперь давайте установим Angular. Для установки Angular используйте следующую команду
npm install -g @angular/cli npm install typescript -gНастройка проекта
Чтобы создать новый проект Angular, мы используем инструмент командной строки Angular, известный как ng. Используйте следующую команду для создания нового проекта.
Ng new myDesktopApp Would you like to add Angular routing? Yes Which stylesheet format would you like to use? SCSS Cd myDesktopApp npm i -D electron@latestТеперь нам нужно создать файл main.js, который будет нашей точкой входа, и изменить package.json, tsconifg.json и angular.json.
Angular.json "outputPath": "dist", Package.json "main": "main.js", "scripts": { "electron": "ng build --base-href ./ && electron .", "electron-tsc": "tsc main.ts && ng build --base-href ./ && electron .", Tsconfig.json "target": "es5", Main.js const { app, BrowserWindow } = require("electron"); const path = require("path"); const url = require("url"); let win; // Create our App Window app.on("ready", createWindow); // Fix for MAC to Quite app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } }); // Focus our Window app.on("activate", () => { if (win === null) { createWindow(); } }); function createWindow() { win = new BrowserWindow({ width: 800, height: 600 }); // Loading the Dist Folder win.loadURL( url.format({ pathname: path.join(__dirname, `/dist/index.html`), protocol: "file:", slashes: true }) ); // Open Developer Tools win.webContents.openDevTools() //On Close Event win.on("closed", () => { win = null; }); }
npm install -g electron-builder npm install electron-builder --save-dev Now open Package.json "scripts": { "electron": "ng build --base-href ./ && electron .", "electron-tsc": "tsc main.ts && ng build --base-href ./ && electron .", "pack": "electron-builder --dir", "dist": "electron-builder", }, "build": { "appId": "com.noobs.noobapp", "win": { "target": "nsis" } },Затем следующее для компиляции приложения
Теперь откройте папку dist, и вы увидите установщик my-desktop-app Setup 0.0.0.exe и папку win-unpacked.
Отлично, теперь у вас есть работающее настольное приложение со структурой MVC, использующей angular. Наслаждайтесь и получайте прибыль. Он также создает установщик, который использует сценарий установки Nullsoft Scriptable. Это инструмент разработки для Microsoft от Nullsoft. Он использует лицензию zlib, которую вы можете прочитать на
