暗号化価格トラッカー

目次

Building Cryptocurrency Price Tracker

What you'll learn

Building main page UI

Fetching data from API

Binding Data to Widgets

Completing onRowSelected action

Conclusion

暗号化価格トラッカーの構築
新興企業が毎日加入しているデジタル通貨産業が増加しているので、いくつかの会社はトレーダーがきちんとした収益を得るのを助けるためにユニークなツールを作成しています.最高の暗号通貨価格Trackerはトレーダーが取引を改善し、次のレベルにそれを取るのを助けることができます.そのようなトラッカーをコーディングするのは難しいと感じます、しかし、appsmithはそれを簡単にします.
AppSmithは、管理パネル、ダッシュボードとより速く10 xをつくることを作る低いコードプラットホームです.このチュートリアルでは、AppSmithの基本的な知識を持っていますhere

何を学ぶ

AppSmithを使用して2ページのアプリケーションを構築する.

APIをデータソースとして使う

APIから取得したデータをアプリケーションウィジェットに接続する.

次のページに移動します.

テーブル、イメージ、および他のウィジェットを使用する方法.

メインページ
さあ、メインページアプリケーションを構築しましょう.このページには、市場ランク、現在価格、市場キャップなどの詳細が表示されます.行を選択するには、ユーザーは新しいページにリダイレクトされ、選択されたデジタル通貨の詳細を与える必要があります.
あなたがAppSmithに新しい場合は、その無料で先に行くとあなたのアカウントを作成するために使用します.あなたがログインした後、あなたはAppsmithダッシュボードにリダイレクトされるかもしれません.
次の手順を実行してUIを作成します.

をクリックして右側に新しいボタンを作成します.これは我々の新しく作成されたアプリケーションにリダイレクトされます.

我々のアプリは今無題アプリケーション1としてデフォルトの名前があります.

暗号化価格トラッカーとしてアプリケーションを名前を変更します.

ウィジェットセクションの左側のメニューで、テーブルウィジェットをドラッグ&ドロップします.我々は、各デジタル通貨についてのすべての詳細を表示するには、このテーブルを使用します.テーブルはいくつかの既定値を持ち、テーブルのプロパティペインに入り、既定値を削除します.後でAPIからデータをロードします.

我々のアプリを使用してテキストウィジェットにタイトルを与えて、市場キャップで今日の暗号通貨の価格としてラベルを名前を変更します.テキストウィジェットのサイズを変更したり、選択したテキストの色を変更できます.以下の画像がどのように見えるかを見ることができます.

左側のサイドバーのページの横にある+アイコンをクリックします.これは、テーブル上で行がクリックされるたびに移動する新しいページを作成します.

このページはPage 2としてデフォルト名を持ちます.

Page 2のキャンバス上にコンテナウィジェットをドラッグ&ドロップします.このコンテナの中で、我々は市場ランク、MKTキャップと他の詳細のような1つのイメージ装置と8つのテキストフィールドをつくります.テキストフィールドを次のように名前を変更します

コイン価格

市場キャップ

24 hの高さ/24時間の高さ

売買数量

マーケットキャップランク

オールタイムハイ

オールタイムロウ

これで、両方のページのUIを構築します.

APIからデータを取得する
この節では、APIをアプリケーションと統合することを学びます.APIは、リアルタイムで正確なデータを取得するには、このアプリで使用されてからCoinGecko . Coingeckoは暗号市場の分析を提供する.APIは公的に利用可能で、信頼性があり、Bitcoin、Ethereumなどのような1000 +のコインのためのデータを提供します.
だから今ではAPIをappsmithに接続する方法を見ることができます.
左側のメニューで、DataSourcesのほかに+アイコンをクリックします.これによりAppSmithが接続できるすべてのデータソースが表示されます.APIセクションの下でCurlインポートオプションをクリックする必要があります.copy paste以下のカールをペーストします.

curl -X 'GET' \
 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h%2C24h%2C7d' \
 -H 'accept: application/json'

インポート後、GETリクエストのヘッダが既に設定されていることがわかります.curl importはヘッダを設定します.get requestはapi 1としてデフォルト名を持ち、fetchとして名前を変更します.
「実行」ボタンをクリックすると、レスポンスセクションのJSON形式のデータがすべて表示されます.下記のイメージでレスポンスを見ることができます.

そして、完了したら、AppSmithとAPIを統合する方法は簡単です.

ウィジェットへのデータのバインド
データを取得するので、テーブルウィジェットと接続しなければなりません.「表」プロパティーペインの下に、テーブルの詳細を見ることができますが、既定のデータが含まれているので、コードスニペットの下にコピーペーストを削除する必要があります.

{{
    {{Fetch.data.map(val => ({
        "Rank": val.market_rank,
        "Symbol":val.symbol,
        "Image":val.image,
        "Coin":val.name,
        "1h":val.price_change_percentage_1h_in_currency,
        "24h":val.price_change_percentage_24h_in_currency,
        "7d":val.price_change_percentage_7d_in_currency,
        "Mkt Cap":val.market_cap,
    }))}}
}}

これで、我々のテーブルウィジェットのすべての詳細が表示されます.Page 1が下のイメージにどのように見えるかを見ることができます.

すごい!メインページは完全ですが、テーブルの行がクリックされるたびにPage 2にユーザーを移動したいと思います.次の節でこの方法を見てみましょう.

onrowselectアクションの完了
このセクションでは、テーブル行がクリックされたときに次のページに移動する方法を学びます.Page 1テーブルからPage 2に詳細を渡します.
テーブルのプロパティウィンドウに移動すると、アクションの一覧が表示されます.「onselected」アクションの下で「ナビゲート」「オプション」を選択します.あるいは、JavaScriptコードとコピーペーストをスニペットの下に書くこともできます.

{{navigateTo('Page2',Table1.selectedRow)}}

NavigateToメソッドは2つの引数をとります

最初にどこでリダイレクトするか( Page 2 , Page 3 ...)

次に、Page 2に関する情報を提供するQueryParams.ここでは、選択した行の詳細を次のページに渡します.

今すぐ私たちのイメージとテキストのウィジェットの値を埋めることができます

イメージ- appsmith.URL.QueryParams.イメージ

コインプライス.URL.QueryParams.イメージ

市場キャップ- appsmith.URL.QueryParams.イメージ

24 hの高さ/24 hの高さ- appsmith.URL.QueryParams.ローレンス24 H/appsmith.URL.QueryParams.ハイテンション24 H

取引ボリューム- appsmith.URL.QueryParams.容積率

マーケットキャップランク.URL.QueryParams.ランクランク

オールタイムハイ.URL.QueryParams.ath

オールタイムロウ.URL.QueryParams.ATL研

アペスミス.URL.QueryParamsメソッドは、NavigateToo ()メソッドを渡した値を返します.これで完全なPage 2はこのようになります.

そして、我々はしました!ここでは、完全なアプリケーションのように見えます.


結論
あなたはそれがappsmithを使用して暗号通貨価格トラッカーを構築する方法がわかりました.ですから、アプリを作成し、ゼロのコーディングの知識を持っている場合appappでそれを作成する考慮してください.ここで何か役に立つことを学びました.さて、それはあなたの番です.先に行くとAppSmithとアプリケーションを作成します.