از اولین باری که وارد توسعه و برنامه نویسی شدم، همیشه احساس می کردم که می خواهم رابط کاربری گرافیکی خود را ایجاد کنم. خواه برای چیزی به سادگی تقلب در یک بازی فلش 🦹🏽♂️ باشد یا چیز مفیدتری مانند تنظیم تایمر یا محاسبه هزینه ها، ایجاد یک برنامه با یک رابط واقعی همیشه برای من جالب است. قبل از این من از PythonAutoGUI و دیگران استفاده کرده بودم. با این حال، چند هفته پیش، من به طور تصادفی به یک کتابخانه روبی برخوردم که ایجاد یک رابط کاربری گرافیکی کاملاً کاربردی را بسیار آسان می کند. بدیهی است که باید آن را امتحان می کردم. بنابراین در این پست، نحوه استفاده از این کتابخانه برای ایجاد یک مبدل ارز ساده را توضیح خواهم داد.
مرور کد:
ابتدا نصب و اضافه کردن را نصب کنید glimmer-dsl-libui گوهر، dotenv gemو چند کتابخانه استاندارد دیگر برای مدیریت URL ها، درخواست های HTTP و تجزیه JSON. من از Dotenv استفاده می کنم و یک فایل .env محلی را در پروژه خود با نگه داشتن API_KEY بارگیری می کنم.
# Requirements
require 'glimmer-dsl-libui'
require 'dotenv'
require 'uri'
require 'net/http'
require 'json'
Dotenv.load
include Glimmer
مرحله بعدی تعریف ارزها و مقادیر پایه ای بود که می خواهم با آنها کار کنم.
# DATA
currencies = ['USD', 'EUR', 'SEK', 'JPY', 'KRW']
base_values = ['USD', 'EUR', 'SEK', 'JPY', 'KRW']
currencies = currencies.join('%2C%20')
سپس باید مطمئن می شدم که از مقادیر بالا استفاده می کنم و روشی ایجاد می کنم که مقادیر این ارزها را از API انتخابی من واکشی می کند، و سپس از این داده ها برای ایجاد آیتم هایی برای هر ارز استفاده می کنم که شامل نماد، نرخ و ارزش نگهدارنده مکان است. 0. این موارد در یک آرایه ذخیره می شوند که در انتها برگردانده می شود.
def get_data(currency_array, base)
data = []
url = URI("https://api.apilayer.com/exchangerates_data/latest?symbols=#{currency_array}&base=USD")
https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true
request = Net::HTTP::Get.new(url)
request['apikey'] = ENV['API_KEY']
response = https.request(request)
response_hash = JSON.parse(response.body)
response_hash['rates'].each do |currency, rate|
item = [currency, rate, 0]
data.append(item)
end
data
end
حالا به بلوک کد اصلی بروید. در اینجا ما متد get_data را فراخوانی می کنیم که در آرایه ارزها عبور می کند و USD به عنوان استدلال این داده‌های نرخ ارز به‌روز شده را برای ارزهای مشخص شده نسبت به بازیابی می‌کند USD.
# Fetches the exchange rate for each currency to USD.
updated_data = get_data(currencies, 'USD')
در مرحله بعد، پنجره برنامه با استفاده از روش window از قسمت ایجاد می شود glimmer کتابخانه من آن را نیز نامگذاری کرده ام و ابعاد پنجره را تنظیم کرده ام.
در داخل پنجره، یک کادر عمودی برای نگه داشتن جدول و فیلد ورودی، اساساً مانند یک “شبکه” ایجاد می کنیم. جدول با استفاده از روش جدول ایجاد می شود و از سه ستون “ارز”، “ارزش بازار” و “ارزش تبدیل شده” تشکیل شده است.
سپس با استفاده از cell_rows روش، ما در عبور updated_data_array.
window('Currency Converter', 1080, 800) {
vertical_box {
table {
text_column('Currency')
text_column('Market Value')
text_column('Converted Value')
cell_rows updated_data
}
#...
در پایین برنامه، یک فیلد ورودی با استفاده از آن اضافه کردم search_entry روش. این فیلد ورودی مقداری را برای تبدیل وارد کنید.
را stretch false تقریباً فقط یک بوول است که به فیلد ورودی می گوید که به صورت عمودی کشیده نشود.
# Input Field
search_entry { |value|
stretchy false
#...
برای اینکه فیلد ورودی به تغییرات “پاسخگو” باشد، یک بلوک on_changed تعریف کردم. به طور خلاصه بلوک مقدار را در قسمت ورودی می گیرد و آرایه داده را کپی می کند و آن را با آرایه به روز شده جایگزین می کند.
# Action on input
on_changed do
new_value = value.text
new_data ||= updated_data.dup
#...
سپس روی هر مورد ارز در new_data تکرار می کنیم و ارزش تبدیل شده را بر اساس ورودی جدید به روز می کنیم. مقدار تبدیل شده محاسبه شده و به دو اعشار گرد می شود. سپس مقادیر به‌روزرسانی شده در آرایه new_data که در برنامه ارائه می‌شود، ذخیره می‌شوند.
# Iterates over each of the currencies added, and replaces the default "0" with the actual value.
new_data.each do |currency|
currency[2] = 0
new_total = (currency[2]) + new_value.to_i * currency[1]
currency[2] = new_total.round(2)
end
end
}
}
}.show
این تمام چیزی است که واقعا وجود دارد. امتحان کردن یک کتابخانه کاملاً جدید که قبلاً هیچ تجربه ای از آن نداشتم یا قبلاً در مورد آن چیزی نشنیده بودم و فقط با استفاده از اسناد ارائه شده کشف کردم، سرگرم کننده بود.
شما می توانید کد کامل را در اینجا پیدا کنید.
