Bonjour à tous dans cet article, je vais vous montrer comment créer un convertisseur de devises simple écrit en Rust avec WebAssembly, vous devez d'abord installer Rust en utilisant le site officiel de Rust ci-dessous pour Windows :
(https://www.rust-lang.org/tools/install)
Après avoir installé Rust avec succès, nous devons nous assurer d'installer WASM ou WebAssembly à l'aide de la commande ci-dessous en ouvrant Windows Powershell et en l'exécutant en tant qu'administrateur :
installation du cargo wasm-pack
Cargo est un système de build et un gestionnaire de packages pour Rust.
Nous installons le pack Wasm ou WebAssembly pour exécuter Rust sur la vue Web et exécuter le code HTML. Après avoir installé avec succès WebAssembly dans Windows Powershell, choisissez le chemin dans lequel vous souhaitez créer des fichiers pour Rust, puis tapez la commande ci-dessous pour créer le dossier et les fichiers nécessaires :
cargo new **nom du dossier de votre choix ici** --lib
cela créera le nom du dossier et les fichiers nécessaires à l'exécution de Rust avec WebAssembly.
Ensuite, nous devons modifier le fichier Cargo.toml situé dans votre dossier que vous avez créé avec la commande ci-dessus, faites un clic droit et modifiez. J'utilise le bloc-notes (pour télécharger le bloc-notes, utilisez ce lien (https://notepad-plus-plus.org /) vous aurez donc la possibilité de modifier le fichier directement.
dans le fichier Cargo.toml, écrivez ceci :
[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"]
Ensuite, dans le dossier src situé dans votre dossier principal créé pour la première fois avec la commande Cargo, vous trouverez un autre fichier dont nous avons besoin pour le modifier, il s'appelle lib.rs dans ce fichier, nous écrirons le code 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)))
}
}
Ensuite, nous arriverons à la partie où nous devons créer les dossiers et les fichiers nécessaires à l'affichage Web.
Ouvrez Powershell puis accédez au chemin de votre dossier, assurez-vous que vous êtes dans le dossier principal que vous avez créé avec la nouvelle commande Cargo, puis exécutez cette commande :
wasm-pack build --target web
Cela créera des dossiers nommés pkg et target et d'autres fichiers.
Ensuite, dans votre dossier principal que vous avez créé avec le nouveau nom de dossier cargo ici --lib, créez un fichier HTML nommé index.html à l'intérieur, écrivez ce code :
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertisseur de devises</title>
<style>
corps {
famille de polices : Arial, sans empattement ;
couleur d'arrière-plan : #f0f8ff ;
marge : 0 ;
remplissage : 0 ;
affichage : flexible ;
justifier-contenu : centre ;
align-items : centre ;
hauteur : 100vh ;
}
.conteneur {
arrière-plan : #ffffff ;
box-shadow : 0 4px 6px rgba(0, 0, 0, 0.1);
rayon de bordure : 10 px ;
remplissage : 20px 30px ;
largeur : 350 px ;
alignement du texte : centre ;
}
h1 {
couleur : #333 ;
marge inférieure : 20 px ;
}
étiquette {
affichage : bloc ;
marge : 10px 0 5px ;
poids de la police : gras ;
couleur : #555 ;
}
saisir {
largeur : 100 % ;
remplissage : 10 px ;
marge inférieure : 15 px ;
bordure : 1px solide #ccc ;
rayon de bordure : 5 px ;
taille de police : 16 px ;
}
bouton {
largeur : 100 % ;
remplissage : 10 px ;
couleur d'arrière-plan : #007bff ;
bordure : aucune ;
rayon de bordure : 5 px ;
couleur : blanc ;
taille de police : 16 px ;
curseur : pointeur ;
transition : couleur d'arrière-plan 0,3 s ;
}
bouton : survoler {
couleur d'arrière-plan : #0056b3 ;
}
.résultat {
marge supérieure : 20 px ;
taille de police : 18 px ;
couleur : vert ;
poids de la police : gras ;
}
.erreur {
marge supérieure : 20 px ;
taille de police : 16 px ;
couleur : rouge ;
}
</style>
≪/tête>
<corps>
<div>
<p>Assurez-vous que cette ligne importe init, { convert_currency } from "../pkg/**name of yourfolder.js**" ; javascript trouvé dans le dossier pkg, assurez-vous qu'il pointe vers le bon fichier .js. Normalement, il porte le nom de votre dossier principal se terminant par .js trouvé dans le dossier pkg.</p>
<p>Pour exécuter votre serveur sur une machine locale, accédez à votre dossier principal que nous avons créé avec cargo new **nom du dossier ici** --lib et exécutez cette commande pour démarrer le serveur sur votre machine :<br>
python -m http.serveur<br><br>
pour installer python, reportez-vous à <br>
(https://www.python.org/downloads/windows/)</p>
<p>après avoir exécuté la commande, ouvrez le navigateur Web de votre choix et tapez localhost:8000 ou 127.0.0.1:8000 et entrez.</p>
<p>Vous devez saisir les codes de devises pour cela, consultez ce site Web :<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>
<p>J'espère que cela vous plaira et je m'excuse pour le long message.</p>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
