В этой статье из шести частей мы расскажем, как создать Dapp с помощью Angular. В части I, которая служила введением, мы рассмотрели общую информацию о разработке преимуществ и классификации dapp. Преимущества использования Angular, архитектуры Angular. Вам следует начать с этого.
В этой части мы рассмотрим создание Angular Dapp - предварительные требования и создание скелетного приложения Angular.
Создание Angular Dapp
В этом разделе вы создадите фактическое децентрализованное приложение, которое будет подключаться к сети
Ethereum и переводить средства с одной учетной записи на другую. Это
часто является основной особенностью любого децентрализованного приложения. Например, вы можете создать
децентрализованное приложение, которое продает продукты, предоставляет услуги или платит пользователям за участие в викторинах, и для всех этих типов потребуется механизм передачи
монет / токенов. В этом разделе этой статьи вы создадите приложение
с помощью Angular.
Что касается среды и развертывания, вы будете использовать веб-фреймворк Truffle
, поскольку он предлагает преимущества для быстрого создания смарт-контрактов.
Truffle может сделать больше, чем просто помочь составить ваш смарт-контракт; он делает все необходимое для внедрения вашего смарт-контракта в веб-приложение и может запускать набор тестов. Вы также собираетесь снова использовать MetaMask, чтобы получить безопасную учетную запись блокчейна в браузере.
Наконец, вы будете использовать и запускать Ganache для создания локального RPC-сервера блокчейна
для тестирования и разработки.
Предпосылки
Angular требует Node и менеджера npm. Чтобы убедиться, что у вас установлен npm и установлена правильная версия, запустите npm с флагом v.
node -v npm -v
Если у вас нет npm и node, просто выполните следующую команду:
brew install node
Предоставьте право владения npm своему пользователю, чтобы вам не нужно было использовать sudo для
установки библиотек.
> sudo chown -R $USER:$GROUP ~/.npm > sudo chown -R $USER:$GROUP ~/.config
Рекомендуется обновить npm, чтобы использовать
последнюю версию; на момент написания это 6.13.4.
> [sudo] npm install -g npm
Результатом будет + npm @ [версия]
Angular CLI
Затем вам необходимо установить интерфейс командной строки (CLI) Angular. Для
Angular CLI рекомендуется (но не обязательно) установить Angular CLI
с sudo и allow-root и убедиться, что Angular CLI будет иметь правильные
привилегии. Вы будете устанавливать версию 9.0.0-rc.7, которая является последней стабильной
версией Angular.
sudo npm install -g @angular/cli@9.0.0-rc.7
Это должно привести к следующему результату:
+ «@angular/cli представлена @9.0.0-rc.7.
Вы также можете установить последнюю версию Angular, но ваш пример кода
может не работать с более новыми версиями Angular.
sudo npm install -g @angular/cli
Чтобы убедиться, что установка прошла успешно, запустите флаг версии, и вы должны
увидеть версию 9.0.0-rc.7; На рисунке 1 показан ожидаемый результат.
ng version
Создать Angular проект
Теперь, когда у вас установлены основные инструменты и библиотеки, вы можете продолжить
и создать свой проект с нуля, загрузив другие необходимые библиотеки, тестовые библиотеки и сценарии сборки, а также создать свою собственную структуру папок; однако, чтобы ускорить этот процесс, вы можете использовать начальный проект Angular, который включает в себя скелетный проект, для быстрой начальной загрузки вашего проекта.
Использование начального проекта Angular может помочь вам быстро начать разработку
и эффективно, следуя лучшим практикам Angular. Есть плюсы и минусы
использования шаблонного скелетного кода. Вы можете сами решить, хотите ли вы
использовать этот каркас для будущих проектов, но для этого демонстрационного приложения он идеально подходит.
Есть много способов создать свой проект, используя исходный каркас Angular
. Здесь я покажу вам два варианта: использование Angular
CLI и использование WebStorm.
Команда ng new запустит сценарий, который создаст ваше приложение. Вы
можете запустить новую команду интерфейса командной строки и дать
имя вашего приложения ethdapp.
cd ~/desktop ng new ethdapp
Вы можете ответить мастеру установки следующим образом;
Хотите добавить маршрутизацию Angular? (Д / Н) Д
Какой формат таблицы стилей вы хотите использовать? CSS
Обратите внимание, что я добавил сюда маршрутизацию и решил использовать CSS для стилей. После завершения установки будут выведены все созданные файлы.
CREATE ethdapp/README.md (1029 bytes) CREATE ethdapp/.editorconfig (246 bytes) CREATE ethdapp/.gitignore (631 bytes) CREATE ethdapp/angular.json (3575 bytes) ... ... ... CREATE ethdapp/e2e/src/app.po.ts (262 bytes) ✔ Packages installed successfully. Successfully initialized git.
Измените каталоги на вновь созданную папку и убедитесь, что у вас есть
исходные файлы и каталоги.
cd ethdapp
Выполнение следующей команды проанализирует ваш конфигурационный файл package.json
с рекомендациями:
ng update
Вы можете выполнить следующую команду, чтобы следовать рекомендациям:
ng update --all
Затем установите Bower глобально. Bower - это менеджер пакетов, который
часто используется вместе с Angular. На момент написания это версия 1.8.8.
npm install -g bower@latest bower -v 1.8.8
Давайте рассмотрим, что было создано в рабочей области и в файлах
начального проекта (см. Рисунок 2).
- Новое рабочее пространство: это корневая папка с именем ethdapp.
- Папка e2e: содержит проект сквозного тестирования,
расположенный здесь: ethdapp / e2e. Папка тестирования включает
файл конфигурации JSON библиотеки Jasmin.
- Папка src: это папка вашего проекта, в которую входят все
файлы вашего проекта.
Вместо src вы найдете;
• Первоначальный скелет проекта приложения, расположенный здесь:
ethdapp / src / app
• Папка ресурсов с файлом ввода index.html
• Другие файлы конфигурации
- .gitignore: здесь вы перечисляете все файлы и папки, которые
хотели бы игнорировать при загрузке проекта в Git.
- angular.json: это файл конфигурации вашего проекта,
содержащий информацию о вашем проекте.
- package.json: это файл конфигурации менеджера npm и
включает все библиотеки, которые вы будете использовать в своем проекте.
- README.MD: это документация по вашему проекту;
это будет «домашняя страница» вашего проекта
, и разработчики первого файла прочтут, чтобы получить инструкции
о том, как получить проект запущен.
- tsconfig.json: это файл конфигурации TypeScript.
- tslint.json: это файл конфигурации Lint, используемый для настройки
оптимального форматирования, интервалов и т.п.
Подать заявку
Чтобы увидеть ваши фактические dapps, вы будете использовать команду ng serve, которая
создает приложение, запускает сервер разработки, просматривает исходные файлы и
перестраивает приложение по мере того, как вы вносите изменения в эти файлы. Флаг - open открывает
приложение в браузере на порту 4200 здесь: http: // localhost: 4200 /. Запустите команду
ng serve с открытым флагом.
ng serve --open
Вы должны увидеть, что в вашем браузере запущено dapp, как показано на
Рисунке 3.
Приложение-скелет включает ссылки на тур, документацию и блог Angular. Просматривая ресурсы и документацию по интерфейсу командной строки, вы можете получить хорошее представление о том, как работает Angular, а добавление в закладки блога Angular может дать вам информацию о будущих выпусках и объявлениях.
Чтобы остановить обслуживание приложения, нажмите Command + C в Терминале.
Угловой проект с WebStorm
Другой вариант запуска начального проекта Angular - использование
WebStorm IDE. WebStorm позволяет либо импортировать созданный вами исходный проект, либо создать новый исходный проект.
Чтобы импортировать проект ethdapp, созданный с помощью команды Angular CLI
ng new, откройте WebStorm, выберите «Файл» ➤ «Открыть» и перейдите в
каталог ethdapp. Вот и все; WebStorm автоматически импортирует проект
.
Кроме того, чтобы запустить новый исходный проект Angular в WebStorm, выберите
Файл ➤ Новый ➤ Проект в верхнем меню. Затем выберите Angular CLI и
назовите свой проект ethdapp. Используйте раскрывающееся меню, чтобы выбрать версию
Angular CLI, как показано на рисунке 4.
Теперь, когда проект создан, вы можете запустить ту же команду,
используя вкладку «Терминал» в нижнем меню WebStorm, как показано на
рис. 5.
ng serve –open
Когда вы загружаете свои шаги, убедитесь, что вы запустили npm install
, потому что я вырезал модуль узла, чтобы уменьшить размер проекта.
npm install
Примечание. Я исключил node_modules, который содержит все
зависимости проекта, из проекта. Обычно его не включают в
проект из-за его размера; вы можете установить его с помощью команды npm install
.
Убедитесь в отсутствии несоответствий с версией Angular CLI
Вы можете создать свой исходный проект Angular либо с помощью WebStorm, либо с помощью команды ng, и вам нужно проверить, нет ли несоответствия глобального Angular CLI с локальным проектом Angular CLI. Это может произойти при настройке файлов, указывающих на предыдущую версию, или вы, возможно, использовали Angular в прошлом с более старой версией. Что происходит, так это то, что ваш локальный проект Angular показывает более старую версию, чем глобальный Angular, установленный на вашем компьютере.
Чтобы убедиться, что это не так, запустите любую команду ng, и если эта проблема
существует, вы увидите следующее сообщение об ошибке:
ng
Ваша глобальная версия Angular CLI ([версия]) больше, чем ваша локальная
версия ([версия]). Используется локальная версия Angular CLI.
Если вы продолжите использовать эти настройки, у вас будет более низкая версия
вместо 9.x. Чтобы исправить это, вам нужно удалить Angular CLI
из среды разработки, а затем установить версию 9.x.
npm uninstall — save-dev angular-cli npm install — save-dev @angular/cli@9.0.0-rc.7
Обратите внимание, что вы используете флаг - save-dev, поэтому новая версия будет сохранена
в файле проекта package.json. Теперь, если вы снова запустите команду версии
, вы должны увидеть правильную версию без предупреждений.
ng --version
Это должно теперь вывести: Angular CLI: 9.0.0-rc.7
Теперь, когда вы убедились, что используете правильную версию
Angular CLI, вы готовы продолжить разработку и внести изменения в
стартовое приложение.
Угловые компоненты
Лучшая практика Angular - использовать архитектуру в стиле
в стиле Model View Controller (MVC). Angular поддерживает кодирование с разделением задач,
как и любой другой зрелый фреймворк.
Angular MVC включает следующие три элемента:
- Модель: содержит данные приложения и привязку данных Angular
, которая позволяет отображать данные.
Примечание в отношении привязки данных, элементы, привязанные к данным
, и любые изменения данных отражаются автоматически. Например, вы привязываете
изменение цены к нескольким элементам просмотра, и после обновления данных
изменения цены все элементы просмотра обновляются автоматически.
- Просмотр: содержит HTML или шаблон и
директивы.
- Контроллер: это клей, скрепляющий модель и
вид. Контроллер принимает данные, применяет
бизнес-логику и отправляет результаты в представление.
Как вы, наверное, помните, страница приветствия Angular открывалась, когда вы
запускали команду serve. Компонент приветствия - это оболочка приложения
. Оболочка управляется компонентом Angular с именем
AppComponent.
Компоненты - это фундаментальные строительные блоки приложения Angular
. Они отображают данные на экране, слушают вводимые пользователем данные и
предпринимают действия на основе этих вводимых данных.
Вы создадите компонент под названием transfer, который
будете использовать для перевода монет на другой адрес. Чтобы создать компонент передачи
, запустите команду ng generate component.
ng g c components/transfer
Обратите внимание, что вы использовали сочетания клавиш g и c, которые обозначают
«генерировать» и «компонент» соответственно, но вы также можете использовать полное имя вместо
аббревиатуры.
Команда ng сгенерировала для вас четыре следующих файла:
- transfer.component.css: стили CSS для конкретного компонента.
- transfer.component.html: шаблон компонента,
написанный в HTML.
- transfer.component.spec.ts: файл для тестирования.
- transfer.component.ts: код класса компонента,
написанный на TypeScript.
Эти четыре файла вместе действуют как реализация компонента передачи
. Вы можете увидеть структуру папок на рисунке 6.
Структура приложения обычно создается с помощью заголовка, нижнего колонтитула и
меню навигации, поэтому вы можете переходить к различным частичным представлениям.
Использование этой архитектуры компонентов верхнего и нижнего колонтитула может помочь вам
создавать различные представления и разделить просмотр страницы на отдельные файлы.
Думайте о каждой части как о отдельном многоразовом модуле пользовательского интерфейса. Angular Seed поддерживает
этот тип архитектуры и поставляется с уже
созданным приветственным компонентом. Давайте создадим начальный компонент, компоненты верхнего и нижнего колонтитула.
ng g c components/start ng g c components/header ng g c components/footer
В выходных данных вы можете видеть, что каждый компонент создал
следующие файлы:
CREATE src/app/components/[component-name]/[component-name]. component.css CREATE src/app/components/[component-name]/[component-name]. component.html CREATE src/ app/components/[component-name]/[component-name]. component.spec.ts CREATE src/app/components/[component-name]/[component-name]. component.ts
В дополнение к этим файлам вы можете открыть ethdapp / src / app / app.module.
ts и заметить, что файл app.module.ts изменялся каждый раз, когда вы
создал компонент. Файл app.module.ts - один из самых важных
файлов в Angular; это контроллер приложения, написанный на TypeScript. Контроллер
- это глобальный файл, который свяжет ваши компоненты вместе, поэтому каждый компонент
, который вы хотите использовать в своем приложении, должен быть определен в этом файле. Если вы не
использовали скрипт ng, вам нужно будет самостоятельно изменить app.module.ts, чтобы создать ссылку на
новый компонент.
Поскольку вы использовали интерфейс командной строки, этот импорт включается автоматически:
import { TransferComponent } from './components/transfer/transfer.component';
import { StartComponent } from './components/start/start.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
Модуль маршрутизации
Еще один важный файл и полезная практика для создания - это модуль
маршрутизации приложений. Этот файл действует как контроллер, инструктирующий Angular, как переходить к
различным представлениям в вашем приложении.
Обычно для создания маршрута для вашего приложения вам не нужно
делать это вручную, поскольку во время создания вашего приложения вы решили создать
файл маршрутизации с именем app-routing.
В Angular версии 9.0.0 маршрутизация приложений добавляется автоматически, но если вам нужно создать файл маршрутизации приложений, вы можете запустить следующую
команду модуля;
ng generate module app-routing --flat --module=app
У вас будут следующие файлы:
src/app/app-routing.module.ts src/app/app.module.ts
Обратите внимание, что на этот раз в вашей команде вы используете полное имя
generate module, а не только первые буквы g и m. Оба варианта
работают одинаково.
Исходный код для src / app / app-routing.module.ts показан ниже;
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Исходный код включает оператор импорта в код Angular и тег модуля
. Затем замените предварительно заполненный код файла app-routing.
module.ts на код из листинга 1.
Листинг 1. Код маршрутизации приложений для представления маршрутов
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { StartComponent } from './components/start/start.component';
import { TransferComponent } from './components/transfer/transfer.component';
const routes: Routes = [
{ path: '', redirectTo: '/start', pathMatch: 'full' },
{ path: 'start', component: StartComponent },
{ path: 'transfer', component: TransferComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes), CommonModule],
exports: [RouterModule]
})
export class AppRoutingModule { }
В листинге 1 вы импортировали компоненты представления, которые вы будете использовать;
это запуск и передача. Они будут действовать как веб-страницы на веб-сайте или
частичные представления в мобильном приложении. Маршрут сообщает вашему приложению, какое представление должно соответствовать
какому ключевому слову, и, наконец, вы устанавливаете операторы импорта, чтобы сообщить Angular
, кто может получить доступ к этому модулю.
Теперь, когда маршрутизация настроена, вы можете получить нижний колонтитул, заголовок и тело
страницы для отображения. Все, что вам нужно сделать, это открыть
src/app/app.component.html
и обновите HTML-код страницы приветствия до следующих
трех строк:
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
Чтобы проверить изменения, внесенные в приложение, вам не нужно
повторно публиковать приложение или запускать какие-либо сценарии; просто сохраните файлы. Запустите
ту же команду serve, которую вы запускали ранее в Терминале, если вы остановили приложение.
ng serve
Сценарий обслуживания включает сценарии для отслеживания изменений в файлах и
автоматического обновления приложения, поэтому все, что вам нужно сделать при
изменении файлов, - это вернуться в браузер. В большинстве случаев вам даже не нужно
обновлять веб-страницу; изменения будут там
автоматически. Перейдите к http: // localhost: 4200, чтобы увидеть изменения.
Если вы хотите перейти непосредственно на страницу передачи, все, что вам нужно сделать
, это добавить ключевое слово, которое вы выбрали в конце URL-адреса при настройке механизма маршрутизации
: http: // localhost: 4200 / перевод . См. Рисунок 7.
Подведем итоги!
В этой статье мы рассмотрели создание Angular Dapp - мы установили необходимые компоненты и создали скелетное приложение Angular, а также исследовали созданные файлы. Мы создали приложение в командной строке и импортировали его в IDE WebStorm (дополнительный шаг). Кроме того, мы создали наш верхний колонтитул, нижний колонтитул и начальный компонент и убедились, что маршрутизатор настроен правильно.
Куда пойти отсюда
Продолжайте следить за нашими статьями, так как в следующих статьях мы рассмотрим следующее;
- Часть III - Стиль Angular - включая пользовательские компоненты
- Часть IV - Создание смарт-контракта с Truffle
- Часть V - Интеграция смарт-контракта с децентрализованным приложением
- Часть VI - Связывание и подключение вашего децентрализованного приложения к сети Ethereum
Чтобы узнать больше о возможностях Blockchain, а также разработать свой собственный проект, проверьте Разработчик Blockchain.
