IOS에 노드 및 스크립트가 포함된 암호화 밸런싱 위젯 설치

나에 대해서:https://kenchambers.dev

I've been having so much fun with Scriptable which allows you to create IOS widgets using javascript code! I've also been delving into the crypto world for funsies, and I need a way to track my wallet addresses easily on my phone so i can obsess and check them all the time.

나는 이 강좌를 확장할 계획이다. 내가 얻은 피드백에 따라 나는 이 강좌를 위해 많은 일을 해야 한다. 왜냐하면 나는Coinmetro와 Blockfi를 위한 맞춤형 구축이 필요하기 때문이다. 왜냐하면 그들의 API 상호작용이 더욱 복잡하기 때문이다.
만약 이 문장의 피드백이 매우 좋다면, 나도 도표의 코드를 열 것이다!
여기서 끝나면 작은 부품이 다음과 같이 표시됩니다.

즐겨라!

참조 자료:
https://devcenter.heroku.com/articles/getting-started-with-nodejs
https://devcenter.heroku.com/articles/deploying-nodejs

코드:
https://github.com/nodefiend/scriptable-crypto-balance-widget

가정:

노드js와npm가 설치되어 있습니다.

- heroku CLI 가 있고 로그인되어 있습니다. 없으면 여기를 클릭하십시오.

재구매 계약 설정:

일을 아주 간단하게 하기 위해서, Github에 새로운 환매 프로토콜을 만들고, 이를 우리 컴퓨터로 복제합니다.

현재 이 URL을 사용하면 가장 좋은 방법으로 컴퓨터에 복제할 수 있습니다.

지금 npm로 환매 초기화: 기본값은 가능할 것 같습니다

cd /scriptable-crypto-balance-widget
npm init

패키지 json에 추가하면 노드의 버전을 지정하고 필요한 의존항을 추가할 수 있습니다.package.json

...
    "engines": {
    "node": "14.2.0"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1"
  }
...

npm start를 실행할 때 어떤 일이 일어날지 지정해야 합니다. (따라서 package.jsonpackage.json

...
"scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
 ...

마지막 JSON 패키지입니다.package.json

{
  "name": "scriptable-crypto-balance-widget",
  "version": "1.0.0",
  "description": "A scriptable widget for checking crypto wallet balance",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nodefiend/scriptable-crypto-balance-widget.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nodefiend/scriptable-crypto-balance-widget/issues"
  },
  "homepage": "https://github.com/nodefiend/scriptable-crypto-balance-widget#readme",
  "engines": {
    "node": "14.2.0"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1"
  }
}

이제 종속 항목을 설치할 준비가 되었습니다.

npm install

이제 노드 서버를 구축하겠습니다.index.js

const axios = require('axios')
const express = require('express')
const app = express()
const port = 5000

app.listen(process.env.PORT || port)

미리 생성된 .gitignore 이 있어야 하지만, 구축 부품이heroku에 배치되는 것을 방지하기 위해 최소한 다음과 같은 내용이 있어야 합니다..gitignore

/node_modules
npm-debug.log
.DS_Store
/*.env

자기야, 우리git 제출 기록에 세 개의 파일이 있을 거야.
색인js
소포.json
소포 자물쇠.json

Heroku에 배포

git add .
git commit -m 'first commit'

다음 명령을 실행하기 전에 로그인했는지 확인합니다.

heroku create crypto-balance-widget
git push heroku main

이것은 자동으로 Heroku에 배치되어 main 지점으로 전송될 것이다.
이것은 새로운 Heroku 서버에 접근할 수 있는 공공 URL을 제공합니다. 그러나 아무것도 없습니다. 따라서 요청을 하기 전에 코드를 추가합니다.

BTC 가격으로 돌아가는 경로 만들기

간결하게 보기 위해서, 나는 이 코드들을 모두 같은 색인에 넣었다.js 파일이지만, 말리거나, 클래스나 최소한 하나의 단독 파일에 붙여넣는 것을 권장합니다.
첫 번째 경로를 만드는 것부터 시작하겠습니다. 이것은 간단한 GET /balance 단점입니다. 이 단점에서 우리의 작은 위젯은 다음 주소로 요청을 보냅니다.

app.get('/balance', async function (req, res) {
  try {

  } catch (err) {


  }
})

우리try catch에서, 우리는 작성되지 않은 두 개의 비동기 요청을 실행하기를 희망합니다. 이 함수들은 BTC의 가격과 암호화 지갑의 금액을 수집할 것입니다.
암호화된 지갑 가격을 다르게 받으려면 함수의 내용을 변경하고 암호화된 네트워크에 서로 다른 API를 사용하면 됩니다.

app.get('/balance', async function (req, res) {
  try {
        let [ walletBalance, btcPrice ] = await Promise.all([
      getWalletBalance(), getBTCPrice()
    ])

  } catch (err) {


  }
})

지갑에 가격과 금액이 있는 이상 우리는 그것들을 곱해서 우리의 요구에 회답하기만 하면 된다.

...
    let balance = (walletBalance * btcPrice).toFixed(2)

    const response = {
      statusCode: 200,
      body: balance
    }
    res.send(response)

...

오류가 발생하면 포획하고 응답을 되돌려줍니다.

...
  } catch (err) {
    const response = {
      statusCode: 500,
      body: err
    }
    res.send(response)
  }
})
...

다음은 우리가 수행한 요청입니다.

app.get('/balance', async function (req, res) {
  try {
    let [ walletBalance, btcPrice ] = await Promise.all([
      getBTCWallet(), getBTCPrice()
    ])

    let balance = (walletBalance * btcPrice).toFixed(2)

    const response = {
      statusCode: 200,
      body: balance
    }
    res.send(response)
  } catch (err) {
    const response = {
      statusCode: 500,
      body: err
    }
    res.send(response)
  }
})

좋습니다. getWalletBalance() 와 getBTCPrice() 를 쓰십시오. 그러면 위의 함수에서 그것들을 사용할 수 있습니다.
이 비동기 함수는testnetapi를 통해 비트코인의 현재 가격을 검색합니다.다른 API를 알고 있다면 URL을 바꿀 수 있습니다. JSON 데이터의 모양이 다르기 때문에 업데이트 응답의 해석을 확인하십시오.

async function getBTCPrice() {
  try {
    let response = await axios({
      method: 'get',
      url: 'https://testnet-api.smartbit.com.au/v1/exchange-rates'
    })
    let price = response.data['exchange_rates'].filter(function(rate){ return rate['code'] == 'USD'})
    return price[0]['rate']
  } catch (e) {
    console.log(e)
  }
}

다음은 기존 암호화 지갑 잔액을 검색하는 함수를 작성합니다.이것은 이 함수에도 적용됩니다. 우리는 간단한 전환smartbitURL을 통해 우리가 사용하고 있는 API를 업데이트하거나 간단한 전환wallet 변수를 통해 지갑 주소를 업데이트할 수 있습니다.API를 닫은 경우 모양이 다를 수 있으므로 응답을 업데이트해야 합니다.
지갑 잔액이 문자열로 되돌아오기 때문에, 나는 그것을 숫자로 바꾸었다. 그러면 우리는 그것을 비트코인의 현재 가격에 쉽게 곱할 수 있다.


async function getBTCWallet(){
  let wallet = '3P3QsMVK89JBNqZQv5zMAKG8FK3kJM4rjt'
  let smartbitURL = 'https://api.smartbit.com.au/v1/blockchain/address/' + wallet

  try {
    let response = await axios({
      method: 'get',
      url: smartbitURL
    })

    let walletBalance = parseFloat(response.data['address']['total']['balance'])
    return walletBalance
  } catch (e) {
       console.log(e)
  }
}

지금, 우리의 색인.js는 이렇게 해야 돼요.

const axios = require('axios')
const express = require('express')
const app = express()
const port = 5000

async function getBTCPrice() {
  try {
    let response = await axios({
      method: 'get',
      url: 'https://testnet-api.smartbit.com.au/v1/exchange-rates'
    })
    let price = response.data['exchange_rates'].filter(function(rate){ return rate['code'] == 'USD'})
    return price[0]['rate']
  } catch (e) {
    console.log(e)
  }
}

async function getBTCWallet(){
  let wallet = '3P3QsMVK89JBNqZQv5zMAKG8FK3kJM4rjt'
  let smartbitURL = 'https://api.smartbit.com.au/v1/blockchain/address/' + wallet

  try {
    let response = await axios({
      method: 'get',
      url: smartbitURL
    })

    let walletBalance = parseFloat(response.data['address']['total']['balance'])
    return walletBalance
  } catch (e) {
       console.log(e)
  }
}

app.get('/balance', async function (req, res) {
  try {
    let [ walletBalance, btcPrice ] = await Promise.all([
      getBTCWallet(), getBTCPrice()
    ])

    let balance = (walletBalance * btcPrice).toFixed(2)

    const response = {
      statusCode: 200,
      body: balance
    }
    res.send(response)
  } catch (err) {
    const response = {
      statusCode: 500,
      body: err
    }
    res.send(response)
  }
})

console.log("App is running on ", port);

app.listen(process.env.PORT || port)

이제 변경 사항을 Heroku에 제출합니다.git heroku push main이제 변경 사항이 완료되었으므로 스크립트 위젯을 통해 서버에 연락할 수 있어야 합니다.

스크립트를 작성할 수 있는 위젯:

Scriptable은 우리가 앱스토어에서 다운로드할 수 있는 앱이다.
응용 프로그램을 다른 스크립트를 실행하는 것으로 설정할 수 있습니다. 왜냐하면 본고는 코드에 관한 것이 많기 때문입니다. 저는 스크립트를 어떻게 설정하고 실행하는지 소개하지 않을 것입니다. 본고에서 소개할 수 있습니다.
비동기 요청을 보내는 방법을 소개했기 때문에 아주 좋은 글입니다.
우선 작은 위젯을 만드는 함수를 작성합니다.

let widget = await createWidget()
if (config.runsInWidget) {
  Script.setWidget(widget)
} else {
  widget.presentMedium()
}
Script.complete()

이제 고기와 감자를 만들자createWidget()

async function createWidget() {
  // declare widget     
  let w = new ListWidget()
  // call async request to fetch wallet amount
  let { balance } = await fetchBitcoinWalletAmount()
  //background color
  w.backgroundColor = new Color("#000000")
  // **************************************
  //header icon
  let docsSymbol = SFSymbol.named("bitcoinsign.square")
  let bitcoinIconImage = w.addImage(docsSymbol.image)
  bitcoinIconImage.rightAlignImage()
  bitcoinIconImage.imageSize = new Size(25, 25)
  bitcoinIconImage.tintColor = Color.green()
  bitcoinIconImage.imageOpacity = 0.8
  bitcoinIconImage.url = "https://www.google.com"
  // **************************************
  // MAIN CONTAINER
  let mainContainerStack = w.addStack()
  // TOP CONTAINER
  let leftContainerStack = mainContainerStack.addStack()
  leftContainerStack.layoutVertically()
  let rightContainerStack = mainContainerStack.addStack()
  rightContainerStack.layoutVertically()
  // TOP LEFT STACK:
  // **************************************
  // Large Bal
  let largeFont = Font.largeTitle(20)
  const largeBalanceStack = leftContainerStack.addStack()
  const largeBalance = largeBalanceStack.addText('$' + (balance).toString())
  largeBalance.font = largeFont
  largeBalance.textColor = new Color('#ffffff')

  // **************************************
  //refresh widget automatically
  let nextRefresh = Date.now() + 1000
  w.refreshAfterDate = new Date(nextRefresh)
  showGradientBackground(w)
  return w
}

점차적인 배경을 응용하는 함수를 작성합시다.


function showGradientBackground(widget) {
  let gradient = new LinearGradient()
  gradient.colors = [new Color("#0a0a0a"), new Color("#141414"), new Color("#1f1f1f")]
  gradient.locations = [0,0.8,1]
  widget.backgroundGradient = gradient
}

현재 우리는 작은 위젯을 설정해서 fetchBitcoinWalletAmount() 함수를 구축할 수 있습니다.
이것은 두 개의 비동기 함수로 구성될 것입니다. 물론, 코드 스타일에 따라 다양한 방식으로 포맷할 수 있지만, 이것은 나의 실제 작은 위젯의 간략한 버전이기 때문에 두 함수로 분해됩니다.

async function getBalance(){
  let BTCUrl = 'http://localhost:5000/balance'
  let request = new Request(BTCUrl)
  request.method = "get";
  let response = await request.loadJSON()
  return response.body
}
// fetch bitcoin wallet amount
async function fetchBitcoinWalletAmount(){
  let btcBalanceAmount = await getBalance()
  return { balance: btcBalanceAmount }
}

지금, 여기는 우리의 각본이다.js 파일 - 코드 리포에서도 찾을 수 있습니다.
이것은 이 기능의 고장을 해결하는 좋은 방법입니다. 휴대전화가 아닌 컴퓨터에서 인코딩을 하려면 아래 다운로드를 사용하십시오.
https://scriptable.app/mac-beta/ scriptable.js

// ************************************
// execute widget
let widget = await createWidget()
if (config.runsInWidget) {
  Script.setWidget(widget)
} else {
  widget.presentMedium()
}
Script.complete()
// ************************************
async function createWidget() {
  // declare widget     
  let w = new ListWidget()
  // call async request to fetch wallet amount
  let { balance } = await fetchBitcoinWalletAmount()
  //background color
  w.backgroundColor = new Color("#000000")
  // **************************************
  //header icon
  let docsSymbol = SFSymbol.named("bitcoinsign.square")
  let bitcoinIconImage = w.addImage(docsSymbol.image)
  bitcoinIconImage.rightAlignImage()
  bitcoinIconImage.imageSize = new Size(25, 25)
  bitcoinIconImage.tintColor = Color.green()
  bitcoinIconImage.imageOpacity = 0.8
  bitcoinIconImage.url = "https://www.google.com"
  // **************************************
  // MAIN CONTAINER
  let mainContainerStack = w.addStack()
  // TOP CONTAINER
  let leftContainerStack = mainContainerStack.addStack()
  leftContainerStack.layoutVertically()
  let rightContainerStack = mainContainerStack.addStack()
  rightContainerStack.layoutVertically()
  // TOP LEFT STACK:
  // **************************************
  // Large Bal
  let largeFont = Font.largeTitle(20)
  const largeBalanceStack = leftContainerStack.addStack()
  const largeBalance = largeBalanceStack.addText('$' + (balance).toString())
  largeBalance.font = largeFont
  largeBalance.textColor = new Color('#ffffff')

  // **************************************
  //refresh widget automatically
  let nextRefresh = Date.now() + 1000
  w.refreshAfterDate = new Date(nextRefresh)
  // add gradient to widget
  showGradientBackground(w)
  return w
}
function showGradientBackground(widget) {
  let gradient = new LinearGradient()
  gradient.colors = [new Color("#0a0a0a"), new Color("#141414"), new Color("#1f1f1f")]
  gradient.locations = [0,0.8,1]
  widget.backgroundGradient = gradient
}

async function getBalance(){
  let BTCUrl = 'http://localhost:5000/balance'
  let request = new Request(BTCUrl)
  request.method = "get";
  let response = await request.loadJSON()
  return response.body
}
// fetch bitcoin wallet amount
async function fetchBitcoinWalletAmount(){
  let btcBalanceAmount = await getBalance()
  return { balance: btcBalanceAmount }
}

봐라!IOS 애플리케이션에 암호화 잔액이 있습니다.
heroku로 코드를 밀어 넣으려면 다음을 사용합니다.git push heroku [branch]그런 다음 heroku 대시보드에서 응용 프로그램의 URL을 가져와 스크립트에 삽입합니다.작은 위젯의 js 파일 대체: localhost:5000도표를 포함해서 더 많이 쓸 생각입니다. 아마도 당신의 잔액 역사일 것입니다.또는 암호화 소프트웨어의 현재 가격은?아래의 평론에서 저에게 알려주세요.
이것은 방대한 강좌입니다. 만약 당신에게 문제가 있다면, 평론에 저에게 메시지를 남겨 주십시오.
아니면 내 코드가 너무 슬프기 때문에 나랑 싸우고 싶다면, 나도 알려줘.

Reference

이 문제에 관하여(IOS에 노드 및 스크립트가 포함된 암호화 밸런싱 위젯 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nodefiend/setup-up-a-crypto-balance-widget-on-ios-with-node-and-scriptable-4khl

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)