В этом уроке мы создадим базовое приложение для подключения/финансирования кошелька Algorand, используя Algosigner, Reach и Angular; это приложение позволит пользователю подключиться к одноразовому тестовому кошельку, а затем внести тестовые средства в этот кошелек.
ОБНОВЛЕНИЕ — 03.12.2021: чтобы этот учебник работал немного лучше, я переключился с использования getDefaultAccount на createAccount. Это устраняет все события подписания, что упрощает тестирование децентрализованных приложений. Это также означает, что вы можете игнорировать приведенное ниже требование Algosigner.
Прежде чем мы начнем, есть три предварительных условия для этого урока: 1) правильная настройка Reach, 2) установка Algosigner плюс создание одноразового тестового кошелька и хранение его фразы под рукой, и 3) настройка Angular Cli на твоя машина. Как только они будут завершены, вы можете начать обучение.
Для начала мы откроем VS Code, откроем терминал, введите cd desktop (или любую другую папку, в которую вы предпочитаете поместить этот проект), введите ng new --minimal connectWallet, выберите «без Angular-маршрутизации» и любую систему стилей, которую вы предпочитаете, когда будет предложено , а затем откройте созданную им папку/проект connectWallet.
Внутри этого проекта мы добавим библиотеку Reach с npm i @reach-sh/stdlib. После завершения установки мы откроем файл src/app/app.component.ts и реализуем библиотеку следующим образом:
Установив это, мы удалим стандартный HTML-код и заменим его div плюс кнопку, которая будет вызывать функцию connectWallet при нажатии:
К функциональности! Мы создадим функцию connectWallet, как показано ниже; в настоящее время он пуст, потому что он будет занят вызовами двух вспомогательных функций: getAccount и getBalance
getAccount будет использовать функцию reach.createAccount для создания тестовой учетной записи и назначения объекта учетной записи локальной переменной account. После этого он console.log сделает это, чтобы мы могли подтвердить успешное выполнение функции.
getBalance немного сложнее. Мы создадим локальную переменную rawBalance, которая будет содержать вывод reach.balanceOf. Когда мы используем эту функцию Reach, мы возвращаем баланс не в Algos, а в microAlgos; чтобы перевести rawBalance variable, мы используем reach.formatCurrency в строке ниже и назначаем вывод (теперь в Algos) balance variable. Наконец, мы console.log баланс, чтобы убедиться, что он был успешно получен.
Теперь, чтобы связать все эти части воедино, мы создадим две переменные, используемые в вышеупомянутых функциях, ожидаем обе функции из функции connectWallet и в итоге получим файл, который выглядит примерно так:
Прежде чем мы сможем запустить эту программу, нам нужно правильно установить Reach в наш проект, чтобы мы могли запустить тестовую сеть Algorand. Для этого мы откроем терминал wsl в VS Code, запустим cd src , а затем запустим curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach (любезно предоставлено Reach docs); с этим установленным мы теперь можем запустить REACH_CONNECTOR_MODE=ALGO ./reach devnet
Когда тестовая сеть запущена, мы можем вернуться к обычному терминалу, запустить ng serve , открыть ссылку на локальный хост, которую он нам дает, и посмотреть, как работает наше приложение.
Хорошо, здесь, внутри приложения, мы видим… не так много, если честно, но это функциональный учебник, а не стиль; двигаясь дальше, давайте нажмем кнопку «подключить кошелек» и посмотрим, что произойдет.
ОБНОВЛЕНИЕ — 03.12.2021: из-за изменения этого руководства для использования createAccount вместо getDefaultAccount вы больше не увидите это всплывающее окно.
И есть подсказка для ввода фразы нашего одноразового тестового кошелька; как видите, мы также можем нажать кнопку «Отмена», чтобы сгенерировать временный тестовый кошелек только для этого сеанса браузера.
ПРИМЕЧАНИЕ. Это приглашение — не то, что пользователь увидит в ваших будущих децентрализованных приложениях в производственной среде, оно просто предназначено для ускорения разработки за счет автоматического подписания транзакций. Чтобы просмотреть другие методы подключения dapp, доступные для Algorand в Reach, перейдите на эту страницу в документации Reach.
Успех! Ввод нашей фразы подключил наше приложение к кошельку, и теперь мы можем видеть объект учетной записи и баланс кошельков.
Подключение кошелька — это хорошо, но финансирование было другой ключевой частью этого руководства. Чтобы начать работу над этим, мы добавим дополнительный HTML:
Здесь у нас есть новая кнопка, вызывающая функцию fundWallet при нажатии, расположенная под новым вводом, который связывает свое значение посредством ngModel с переменной fundAmount. Чтобы использовать ngModel, нам нужно перейти к файлу src/app/app.module.ts и внести FormsModule в список imports. Как только это будет сделано, мы можем перейти к функции:
fundWallet это довольно простая функция: сначала она вызовет reach.fundFromFaucet для объекта счета и переменной суммы фонда (переведенной обратно в микроалгос с помощью reach.parseCurrency); затем он вызовет функцию getBalance, чтобы продемонстрировать обновленный баланс.
С этими частями и добавленной к нашему компоненту переменной fundAmount окончательная версия файла должна выглядеть примерно так:
Теперь давайте посмотрим, как это работает в действии:
Мы начинаем с тех же шагов, что и раньше, нажимая кнопку подключения кошелька, решая, как подключиться с помощью подсказки, и наблюдая за консолью, чтобы проверить наличие объекта учетной записи и баланса:
Однако теперь мы можем ввести значение в это новое поле; поэтому ставим пять, нажимаем кнопку «пополнить кошелек», и через несколько секунд…
Отлично! Наш баланс обновился, и поэтому наша система подключения/пополнения кошелька завершена!
Теперь мы прошли через ворота в королевство децентрализованной разработки приложений. Благодаря возможности подключать наши приложения к тестовым кошелькам и финансировать их с помощью тестовых средств, у нас есть основные инструменты для создания и тестирования децентрализованных приложений на Algorand.
Однако, вероятно, лучше всего начать с основного руководства, составленного командой Reach. Он познакомит вас с другой стороной разработки децентрализованных приложений (а именно, с контрактами) с Reach и вернет вас туда, где вы сейчас находитесь.
После этого, если вы хотите набраться опыта, прежде чем пытаться создать один из своих проектов, у команды Reach есть множество простых мастер-классов для различных проектов децентрализованных приложений, которые еще предстоит преобразовать в веб-приложения. ; это будет отличной проверкой ваших навыков после прохождения основного урока, и я очень рекомендую их.
Не забудьте присоединиться к Reach discord для дальнейших вопросов и спасибо всем за чтение!
