ساخت اپلیکیشن گرافیکی (GUI) با زبان Golang قسمت اول

خوش اومدی :)

قراره داخل این مطلب یک ماجراجویی ساده داشته باشیم که چطور می‌تونیم با زبان برنامه نویسی گولنگ (Golang) یک اپ گرافیکی یا همون GUI بسازیم.

پس اگر شما هم دوست دارین یک اپ گرافیکی ساده با Golang بزنید این مطلب رو دنبال کنید!

قبل از شروع به کار لازمه که یادآوری کنم آشنایی حداقلی با گولنگ برای درک بهتر این مطلب نیازه ...
اول از همه بیاین در مورد اینکه قراره چه کاری انجام بدیم صحبت کنیم!
ما اینجا قراره با هم یک اپ گرافیکی بسازیم که کاربر بتونه بهش نت چندین ساز مختلف مثل پیانو، ویولن و غیره رو بده و بعد ما اون نت ها رو به صدا در بیاریم یا اینکه به صورت یک فایل صوتی ذخیره اش کنیم.
و اسمش رو هم در آخر به یاد موسیقیدان و شاعر ایرانی جامی میزاریم :)

به نظر که جذابه!
ریپویی که در موردش قراره صحبت کنیم:

اینجا از چه چیز هایی برای ساخت اپ گرافیکی در Golang استفاده می‌کنیم؟

به طور خلاصه ما برای ساخت GUI اپمون از fyne که یک UI toolkit کراس پلتفرم هست استفاده می‌کنیم.
چرا fyne ؟
خیلی ساده و راحته و برای ساخت اپ هایی که قرار نیست پیچیدگی زیادی توی این لایه داشته باشن مناسبه!
به علاوه اینکه کراس پلتفرمه و به ما خیلی راحت اجازه میده که برای سیستم عامل های دیگه هم خروجی بگیریم.

و همچنین برای اینکه بتونیم ساز های موسیقی خودمون رو پیاده کنیم از کتابخونه beep استفاده می‌کنیم.
beep یک کتابخونه تمیز و کوچیکه که خیلی راحت به ما توانایی پخش ساز های موسیقی رو میده.
نکته: لطفا نسخه گولنگ روی سیستمون رو به 1.14 و یا بالاتر تغییر بدین.

خوب دیگه حالا که فهمیدیم از چی قراره استفاده کنیم و قراره اصلا چی بسازیم وقشه که دست به کار بشیم!

شروع ساخت GUI در گولنگ

ساختار کلی برنامه قراره به شکل زیر باشه:

همینطور که عکس رو نگاه می‌کنید باید بگم که ۲ پوشه اصلی پروژه ما:
cmd که فایل main اپ اونجا قرار می‌گیره و pkg که خودش شامل ۲ پوشه دیگست و قراره قسمت های مختلف اپ رو پیاد سازی کنن هست.

اول از همه طبق این درخت پوشه بندی ها و فایل ها رو بسازید تا کم کم پرشون کنیم!
و بیاین از go mod استفاده کنیم که بتونیم به راحتی پکیج های اپ رو مدیریت کنیم.
برای این کار کافیه از دستور زیر داخل ترمینال استفاده کنید:

go mod init jami

کد پایین فایل main برنامه هست که در ادامه با هم دیگه بررسی می‌کنیم‌‌ ...
برای نمایش بهتر می‌تونید از gist این فایل استفاده کنین.
توجه کنین که تمام کد هایی که قراره با هم ببینیم داخل () func main هستن!

a := app.NewWithID(&quotcom.jami.app&quot)
a.SetIcon(theme.FyneLogo())

اینجا خیلی ساده یک آیدی یونیک برای اپ تعریف کردیم و بعد از اون با SetIcon بهش گفتیم که آیکن برنامه چی باشه، اینجا از آیکن خود fyne استفاده کردیم.

w := a.NewWindow(&quotJami&quot)
w.SetMainMenu(fyne.NewMainMenu(
    fyne.NewMenu(&quotControl&quot,
        fyne.NewMenuItem(&quotForce Quit&quot, func() {  os.Exit(1) } ),
    ),
    fyne.NewMenu(&quotView&quot,
        fyne.NewMenuItem(&quotFull Screen&quot, func() { w.SetFullScreen(true) }),
        fyne.NewMenuItem(&quotSmall Screen&quot, func() { w.SetFullScreen(false) }),
   ),
),)
w.SetMaster()

خوب اینجا توی خط اول یک پنجره ساختیم و اسم اون رو Jami گذاشتیم.
و از خط دوم تا یکی مونده به خاطر یک نوار منو ایجاد کردیم که شامل مواری مثل Full Screen و .. است.
و این نوار همینطور که داخل تصویر زیر می‌بینید بالای اپ قرار می‌گیره.

پس تا اینجا تونستیم یک نوار ساده درست کنیم.
حالا می‌خوایم چند تا tab برای برنامه بسازیم تا بتونیم screen های مختلف مون رو توی هرکدوم قرار بدیم.

tabs := widget.NewTabContainer(
        widget.NewTabItemWithIcon(&quotHome&quot, theme.HomeIcon(), screens.HomeScreen(w)),
        widget.NewTabItemWithIcon(&quotLearn&quot, theme.HelpIcon(), screens.LearnScreen()),
        widget.NewTabItemWithIcon(&quotSettings&quot,
                   theme.SettingsIcon(),screens.SettingsScreen(a,w)),
        widget.NewTabItemWithIcon(&quotAbout&quot, theme.InfoIcon(), screens.AboutScreen(a)))

با متد NewTabContainer تب ها و با متد NewTabItemWithIcon هم تب های آیکن دار می‌سازیم.
که آرگومان های مورد نیازش اسم تب، آیکن اش و یک fyne.CanvasObject هست، که این همون اسکرین های ما میشه.

توجه: دقت کنید که ما اینجا از پکیج screens، توابع دیگه ای رو فراخوانی کردیم که قراره در قسمت بعدی این مطلب بررسی کنیم، داخل این قسمت فقط تابع main رو بررسی می‌کنیم.

tabs.SetTabLocation(widget.TabLocationBottom)

با این خط هم مکان نمایش تب ها رو معلوم می‌کنیم، شما ۴ انتخاب برای مکان نمایش اون ها دارین که ما اینجا حالت پایین صفحه رو انتخاب کردیم.
در نهایت خروجی تب ها:

w.SetContent(tabs)
w.Resize(fyne.NewSize(800, 500))
// w.SetFixedSize(true)   this is a comment !
w.ShowAndRun()

حالا تنها کاری که باید انجام بدیم اینکه با استفاده از متد SetContent تب هایی که ساختیم رو برای محتوا پنجره اصلی مون ست کنیم.
بعد از اون اندازه اش رو تعیین کنیم و با استفاده از ShowAndRun اپ مون رو اجرا کنیم!
اگر که می‌خواید کاربر نتونه سایز صفحه رو تغییر بده، می‌تونید مقدار SetFixedSize رو true بدید، که ما اینجا کامنتش می‌کنیم.

ممنون از اینکه تا اینجا همراه بودی :)
اگر مطالب مفید بود اینجا می‌تونید حمایت کنید :)))

از این قسمت می‌تونید به قسمت های دیگه این مطلب دسترسی داشته باشین: