Rust WebAssembly の通貨コンバーター-jsチュートリアル-php.cn

Rust WebAssembly の通貨コンバーター

DDD

リリース： 2024-12-05 06:01:12

オリジナル

192 人が閲覧しました

Currency converter in Rust WebAssembly

この投稿の皆さん、こんにちは。WebAssembly を使用して Rust で書かれた簡単な通貨コンバーターを作成する方法を説明します。まず、以下の Windows 用 Rust 公式 Web サイトを使用して Rust をインストールする必要があります。 :

(https://www.rust-lang.org/tools/install)

Rust を正常にインストールしたら、Windows Powershell を開いて管理者として実行し、以下のコマンドを使用して WASM または WebAssembly がインストールされていることを確認する必要があります。

カーゴインストール wasm-pack

Cargo は、Rust のビルドシステムおよびパッケージマネージャーです。

Wasm パックまたは WebAssembly をインストールして Web ビューで Rust を実行し、HTML コードを実行します。そのため、Windows Powershell に WebAssembly を正常にインストールした後、Rust 用のファイルを作成するパスを選択し、以下のコマンドを入力して必要なフォルダーとファイルを作成します。

cargo new **ここで選択したフォルダー名** --lib
これにより、WebAssembly で Rust を実行するために必要なフォルダー名とファイルが作成されます。

次に、上記のコマンドで作成したフォルダーにある Cargo.toml ファイルを変更する必要があります。右クリックして編集します。メモ帳を使用します (メモ帳をダウンロードするには、このリンクを使用します (https://notepad-plus-plus.org) /) ファイルを直接編集するオプションが表示されます。

Cargo.toml ファイルに次のように記述します:

[dependencies]
reqwest = { version = "=0.11.7", features = ["json"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"

[dev-dependencies]
wasm-bindgen-test = "0.3"

[lib]
crate-type = ["cdylib"]

ログイン後にコピー

Cargo コマンドで最初に作成したメインフォルダー内にある src フォルダー内に、編集する必要がある別のファイルがあります。lib.rs という名前で、このファイルに Rust コードを記述します。

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use reqwest::Error;
use serde::Deserialize;
use std::collections::HashMap;

#[derive(Deserialize)]
struct ExchangeRates {
    rates: HashMap<String, f64>,
}

#[wasm_bindgen]
pub async fn convert_currency(base: String, target: String, amount: f64) -> Result<JsValue, JsValue> {
    let url = format!("https://api.exchangerate-api.com/v4/latest/{}", base);

    let response = reqwest::get(&url)
        .await
        .map_err(|err| JsValue::from_str(&format!("Failed to fetch rates: {}", err)))?;

    let rates: ExchangeRates = response.json()
        .await
        .map_err(|err| JsValue::from_str(&format!("Invalid response format: {}", err)))?;

    if let Some(&rate) = rates.rates.get(&target) {
        let converted = amount * rate;
        Ok(JsValue::from_f64(converted)) // Return the converted amount
    } else {
        Err(JsValue::from_str(&format!("Currency {} not found", target)))
    }
}

ログイン後にコピー

次に、Web 表示に必要なフォルダーとファイルを作成する部分に進みます。
Powershell を開いてフォルダーパスに移動し、Cargo new コマンドで作成したメインフォルダー内にいることを確認してから、次のコマンドを実行します。

wasm-pack build --target web

これにより、pkg および target という名前のフォルダーとその他のファイルが作成されます。

次に、Cargo 新しいフォルダー名 --lib で作成したメインフォルダーに、index.html という名前の HTML ファイルを作成し、その中に次のコードを記述します。

<!DOCTYPE html>
<html lang="ja">

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>通貨換算</title>
  
    体 {
      フォントファミリー: Arial、サンセリフ;
      背景色: #f0f8ff;
      マージン: 0;
      パディング: 0;
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 中央;
      整列項目: 中央;
      高さ: 100vh;
    }

    。容器 {
      背景: #ffffff;
      ボックスシャドウ: 0 4px 6px rgba(0, 0, 0, 0.1);
      境界半径: 10px;
      パディング: 20px 30px;
      幅: 350ピクセル;
      テキスト整列: 中央;
    }

    h1 {
      カラー:#333;
      マージン-ボトム: 20px;
    }

    ラベル {
      表示: ブロック;
      マージン: 10px 0 5px;
      フォントの太さ: 太字;
      カラー: #555;
    }

    入力 {
      幅: 100%;
      パディング: 10px;
      マージン-ボトム: 15px;
      境界線: 1px 実線 #ccc;
      境界半径: 5px;
      フォントサイズ: 16px;
    }

    ボタン {
      幅: 100%;
      パディング: 10px;
      背景色: #007bff;
      境界線: なし。
      境界半径: 5px;
      色: 白;
      フォントサイズ: 16px;
      カーソル: ポインタ;
      遷移: 背景色 0.3 秒。
    }

    ボタン:ホバー {
      背景色: #0056b3;
    }

    。結果 {
      マージントップ: 20px;
      フォントサイズ: 18px;
      色: 緑;
      フォントの太さ: 太字;
    }

    。エラー {
      マージントップ: 20px;
      フォントサイズ: 16px;
      色: 赤;
    }
  </スタイル>
</head>

  <div>



<p>この行が「../pkg/**フォルダーの名前.js**」から init, {convert_currency } をインポートしていることを確認してください。 pkg フォルダー内にある JavaScript ファイルは、正しい .js ファイルを指していることを確認してください。通常、このファイルは、pkg フォルダー内にある .js で終わるメイン フォルダー名に基づいて名前が付けられます。</p>

<p>ローカル マシンでサーバーを実行するには、cargo new **ここにフォルダー名** --lib を使用して作成したメイン フォルダーに移動し、次のコマンドを実行してマシン上でサーバーを起動します。<br>
python -m http.server<br><br>
Python をインストールするには、<br> を参照してください。
(https://www.python.org/downloads/windows/)</p>

<p>コマンドの実行後、選択した Web ブラウザを開き、localhost:8000 または 127.0.0.1:8000 と入力して Enter キーを押します。</p>

<p>この Web サイトを確認するには、通貨コードを入力する必要があります:<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>楽しんでいただければ幸いです。長文になってしまい申し訳ありません。</p>


          </div>

ログイン後にコピー

以上がRust WebAssembly の通貨コンバーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。