Путь к тому, чтобы Web3JS полностью работал с iOS и Android
Мобильные приложения Blockchain становятся все популярнее с каждым днем. Одна из самых популярных библиотек блокчейнов - Web3JS. Web3.0 - это последняя итерация Интернета, в основе которой лежит децентрализация, делающая возможной блокчейн. Web3JS предоставляет огромный набор функций и классов для реализации широкого спектра функций блокчейна, которые вам понадобятся в вашем мобильном приложении, таких как создание учетной записи, подписание транзакций, шифрование и дешифрование ключей и многое другое. В этой статье я покажу вам, как заставить Web3JS полностью работать на iOS и Android, потому что, к сожалению, это не так просто, как «npm install web3».
Создание проекта шаблона с поддержкой реакции
Я собираюсь начать здесь с нуля. Я предполагаю, что вы уже установили узел, если нет, вы можете сделать это здесь. После этого вы можете просто перейти в каталог, в котором вы хотите создать свой проект, и запустить эту команду. Обратите внимание: я предпочитаю машинописный текст, а не javascript, и я думаю, что большинство профессиональных разработчиков используют машинописный текст, поэтому я буду создавать шаблон машинописного текста для реакции.
npx react-native init appName --template react-native-template-typescript
Хорошо, теперь, когда вы создали приложение, просто откройте его:
cd appName
Прежде чем мы продолжим, вам необходимо убедиться, что у вас правильно работает настройка среды. Я не буду приводить шаги, чтобы сделать это, так как это сделает эту статью довольно длинной, и это просто не то, о чем этот учебник, вы также можете найти множество руководств по этому поводу. Реагировать на нативную документацию для этого тоже неплохо. Во всех случаях, если у вас правильно настроена среда, если вы запустите yarn android или yarn ios, вы должны увидеть что-то вроде этого:
Проблема: попробуем добавить Web3
Хорошо, теперь, когда мы убрали шаблонную часть, давайте погрузимся в сочную часть. У меня был довольно неприятный опыт настройки этого, и поэтому я пишу это руководство. Как и в случае с любым пакетом npm / yarn, следующим логическим шагом будет добавление пакета и повторный запуск проекта! Обратите внимание: поскольку я пользователь Mac / iOS, я перечислю некоторые команды iOS, поэтому, если вы пользователь Android, вам не нужно их выполнять, но не волнуйтесь, этот учебник работает как для Android, так и для iOS. .
yarn add -D web3
Для пользователей iOS теперь необходимо установить соответствующие модули, так что просто:
cd ios/ && pod install && cd ..
Теперь, если вы снова запустите проект (пряжа iOs / пряжа android), он заработает. Но, пока вы не слишком взволновались, это действительно не сработало. Если вы попытаетесь использовать любую из функций Web3, например, настроить очень простое соединение, подобное этому (вы можете добавить это в свой App.tsx):
Сюрприз, сюрприз, вы получите эту ошибку:
Как и многое другое в мире разработки программного обеспечения, все не работает волшебным образом так, как вы ожидаете с первого раза. И если бы вы были разработчиком классической реакции (без поддержки реакции), как я, вы могли бы подумать: «Ну что ж, это какой-то недостающий модуль, давайте просто добавим ‹this-missing-module›». Если вы сделаете это, вы просто закопаетесь в яму побольше.
Почему это происходит?
Хорошо, теперь пора сделать шаг назад и действительно понять причину этих ошибок. Это очень полезно, потому что на самом деле это происходит с большим количеством модулей npm. Хотя вы могли заметить, что React и React-native почти идентичны, их модули нет. Модули React предназначались для запуска в браузере, а модули, поддерживающие реакцию, компилируются в собственные модули с помощью CocoaPods или Gradle (или любого другого транспилятора, который использует ваш проект). Так что в некоторых случаях может быть сложно заставить модули React работать на React-native.
Если вы думаете, вы можете просто найти модуль web3-react-native, который просто работает, а не работает. Так что вам придется использовать широко используемый Web3JS. Вернемся к нашей проблеме. Web3JS имеет некоторые зависимости, которые по своей сути являются модулями браузера и, следовательно, выдают всевозможные ошибки. В любом случае, если вы классический разработчик, вас, вероятно, не слишком заботит это, и вы просто хотите, чтобы ваше приложение работало, поэтому давайте вернемся к нашему руководству.
Давайте установим больше модулей и «взломаем» их
Хорошо, давайте начнем с нуля, отбросим предыдущий шаг (где мы добавили web3) и создадим новый новый шаблон. Журнал ошибок правильный, нам не хватает некоторых модулей. Однако названия модулей, которые нам не хватает, неверны. По сути, нам нужно установить реактивную версию этих модулей, а затем использовать очень хороший пакет npm под названием rn-nodeify, чтобы взломать их все вместе. Это в основном то, что делает rn-nodeify:
Запустите после установки npm, и вы сможете использовать модули ядра узла и модули npm, которые их используют, в вашем приложении React Native.
Что решает
Если в вашем проекте нет зависимостей, отличных от React-Native, вам не нужен этот модуль, и вам следует просто проверить ‘ ./shims.js ’, чтобы модули ядра узла могли использоваться по отдельности.
Источник: rn-nodeify npm
Просто запустите эти команды:
npm i --save react-native-crypto react-native-randombytes npx react-native link react-native-randombytes
Только для iOS:
cd ios/ && pod install && cd ..
Потом:
npm i --save-dev rn-nodeify@latest./node_modules/.bin/rn-nodeify --installnpm i --save node-libs-browsernpm i base-64
Примечание: я знаю, что смешивание NPM и пряжи - не лучшая идея, но я пробовал пряжу, и это не сработало, возможно, вы лучший разработчик, чем я, и вы сможете понять это!
Следующим шагом будет изменение нашего metro.config.js (для краткости я не буду вдаваться в подробности почему):
И вам также необходимо изменить свой shim.js (вы можете найти его в корневом каталоге после того, как rn-nodeify взломает модули)
Кредиты: Тема Github
Следующим шагом будет импорт shim.js в ваш App.tsx:
import './shim'
И теперь вы, наконец, можете добавить web3 в свой шаблонный проект:
npm i --save web3
Фух! Я знаю, что это много шагов, но они того стоят, когда вы начнете работать. На этом этапе вы можете запустить «пряжу android», и это работает! Чтобы еще раз проверить, мы можем попробовать создать базовую учетную запись в App.tsx:
Журнал консоли:
{"address": "0x0025C592271824D33089AA29e9Bb5cB594aCc687", "encrypt": [Function encrypt], "index": 0, "privateKey": "0xf5ea7145028ede6d203082ba2d7a7f801ed6c5a7909b20588e21f0141f51e4b3", "sign": [Function sign], "signTransaction": [Function signTransaction]}
Еще несколько шагов
Хорошо, теперь он работает, но подождите, давайте попробуем запустить его на ios:
cd ios/ && pod install && cd .. && yarn ios
К сожалению, вы получите огромный журнал ошибок, давайте откроем код и создадим его, чтобы исследовать это:
xed -b ios
После постройки:
Боковой совет: когда вы получаете ошибки сборки для ios, гораздо лучше создавать приложение в Xcode, поскольку журнал ошибок RN довольно длинный и его трудно читать. Xcode даст лучший результат сборки.
Хорошо, еще один шаг, чтобы заставить его работать на ios. По сути, при установке стручков у нас были дубликаты, и xcode это не нравится.
- Переходим на вкладку навигации по проекту (значок папки вверху слева)
- Перейдите в Pods (тогда все модули должны появиться справа)
- прокрутите вниз до «TcpSockets»
- Нажмите «Build Phases» (в центре экрана).
- Затем разверните «Компилировать исходники».
- Щелкните «GCDAsyncSocket.m».
- Нажмите кнопку «-», чтобы удалить его.
Последний шаг - сделать то же самое с модулем «react-native-udp». Не забывай это делать. После удаления ссылки GCDAsyncSocket.m в обоих модулях у них должно быть 3 источника компиляции.
Теперь просто создайте свое приложение в Xcode, и оно должно работать.
Последний шаг
Каждый раз, когда вы добавляете новый пакет npm, вам нужно будет снова взломать модули узлов, чтобы автоматизировать это, просто добавьте это в свой package.json:
"scripts": {
...
"postinstall": "./node_modules/.bin/rn-nodeify --install 'crypto,buffer,react-native-randombytes,vm,stream,http,https,os,url,net,fs' --hack"
},
Резюме
npx react-native init appName --template react-native-template-typescript cd appName npm i --save react-native-crypto react-native-randombytes cd ios/ && pod install && cd .. npm i --save-dev rn-nodeify@latest ./node_modules/.bin/rn-nodeify --install npm i --save node-libs-browser npm i base-64 # Modify metro.config.js # Modify shim.js # Add shim import to App.tsx npm i --save web3 cd ios/ && pod install && cd .. xed -b ios # Remove the 2 pod references # Modify package.json
Надеюсь, вам понравился этот урок, и в конце все работает нормально. Это результат множества неудач, исследований и разочарований. Надеюсь, вам не придется через это проходить!
