أفضل أدوات Go التي يمكنك استخدامها لمشاريع الواجهة الأمامية الخاصة بك

أفضل أدوات Go التي يمكنك استخدامها لمشاريع الواجهة الأمامية الخاصة بك
أفضل أدوات Go التي يمكنك استخدامها لمشاريع الواجهة الأمامية الخاصة بك

مرحبا بمتابعي وزوار مدونة الشهادة مع مقال جديد بعنوان أفضل أدوات Go التي يمكنك استخدامها لمشاريع الواجهة الأمامية الخاصة بك

تشتهر لغة البرمجة Go بكفاءتها في تطوير الواجهة الخلفية . ولكن من السهل جدًا توسيع قدراته لتشمل مشاريع الواجهة أيضًا.

تستكشف هذه المقالة أدوات Go الأساسية التي تمكّن مطوري الواجهة الأمامية من تحسين سير عملهم، مع التركيز على البساطة والإنتاجية.

المتطلبات

قبل الغوص في استكشاف أدوات Go لمشاريع الواجهة الأمامية، تأكد من توفر ما يلي:

  • الذهاب المثبتة على جهازك. يمكنك تنزيله من موقع Go الرسمي .
  • تم تثبيت محرر التعليمات البرمجية من اختيارك، مثل Visual Studio Code أو GoLand أو Zed .
  • الفهم الأساسي لـ Go، راجع وثائق Go أو دليل Go هذا .

انتقل إلى الأدوات اللازمة لمشاريع الواجهة الأمامية الخاصة بك

فيما يلي خمس أدوات Go يمكنك تجربتها لمشاريع الواجهة الأمامية الرائعة الخاصة بك:

1. الألياف: إطار ويب عالي الأداء

Fiber عبارة عن إطار عمل ويب مستوحى من Express.js لـ Go، وهو معروف بأدائه العالي وتصميمه البسيط. فهو يسهل التوجيه الفعال ودعم البرامج الوسيطة، مما يجعله مثاليًا للاتصالات الأمامية والخلفية وتطوير واجهة برمجة التطبيقات (API).

تعد الألياف مفيدة بشكل خاص في إنشاء واجهات برمجة تطبيقات قوية وعالية الأداء يمكن لتطبيقات الواجهة الأمامية التفاعل معها بسلاسة.

مثال الكود:

سيكون هذا المثال عبارة عن تطبيق ويب بسيط حيث يمكن للمستخدمين إدخال أسمائهم وإرسال نموذج وتلقي تحية مخصصة في المقابل.

في محرر التعليمات البرمجية الخاص بك، استخدم هذا الهيكل للمشروع:

أدخل هذا الكود للملف main.go:

package main

import (
	"fmt"
	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/template/html/v2"
)

// RenderForm renders the HTML form.
func RenderForm(c *fiber.Ctx) error {
	return c.Render("form", fiber.Map{})
}

// ProcessForm processes the form submission.
func ProcessForm(c *fiber.Ctx) error {
	name := c.FormValue("name")
	greeting := fmt.Sprintf("Hello, %s!", name)
	return c.Render("greeting", fiber.Map{"Greeting": greeting})
}

func main() {
	app := fiber.New(fiber.Config{
		Views: html.New("./views", ".html"),
	})

	// Serve static files (HTML templates and stylesheets).
	app.Static("/", "./static")

	// Define routes.
	app.Get("/", RenderForm)
	app.Post("/submit", ProcessForm)

	// Start the Fiber app on port 8080.
	app.Listen(":8080")
}

يحتوي مجلد العروض على ملفين HTML يعرضان النموذج والاستجابة على المتصفح. أدخل الرمز الخاص بهم:

form.html

<!-- views/form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiber Example</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

greeting.html

<!-- views/greeting.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiber Example</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <p>{{.Greeting}}</p>
</body>
</html>

بعد ذلك، في مجلد الأنماط داخل الدليل الثابت ، أدخل هذا الرمز لـ main.css:

/* main.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 20px;
  }
  
  form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  label {
    display: block;
    margin-bottom: 10px;
  }
  
  input {
    width: 100%;
    padding: 8px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }
  
  button {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }

يمكن الوصول إلى الكود الخاص بهذا المشروع في GitHub repo .

محرك عرض الألياف

تتكامل الألياف مع محركات العرض، وسنستخدم محرك قالب HTML في هذا المثال. يعد إعداد محرك العرض أمرًا مباشرًا، مما يسمح بفصل واضح للمخاوف بين الواجهة الخلفية والواجهة الأمامية.

app := fiber.New(fiber.Config{
    Views: html.New("./views", ".html"),
})

خدمة الأصول الثابتة

تعمل الألياف على تبسيط خدمة الأصول الثابتة، مما يضمن التسليم الفعال لأوراق الأنماط والصور وملفات JavaScript من جانب العميل. في مثالنا، يتم تخزين الأنماط في المجلد الثابت وربطها في قوالب HTML.

// Serve static files (HTML templates and stylesheets)
app.Static("/", "/.static")

قم بتشغيل البرنامج باستخدامه main.goلبدء تشغيل الخادم على المنفذ 8080. وهو يعرض مخرجات وحدة التحكم التي تم إنشاؤها بواسطة إطار عمل Fiber.

go run main.go

قم بزيارة http://127.0.0.1:8080/ في متصفحك لرؤية الرد. وهنا كيف يعمل:

2. بوفالو: النظام البيئي الشامل لتطوير الويب

يعد Buffalo نظامًا بيئيًا شاملاً لتطوير الويب لـ Go، حيث يوفر مجموعة كاملة من الأدوات والمكتبات والاتفاقيات لبناء تطبيقات الويب الحديثة. إنه يبسط تطوير الواجهة الأمامية والخلفية من خلال تقديم ميزات السقالات والتحديث السريع .

يعد Buffalo مفيدًا لإعداد تطبيقات الويب الكاملة بسرعة، مما يمكّن المطورين من التركيز على بناء الميزات بدلاً من التعامل مع التعليمات البرمجية المعيارية.

يحتوي مشروع بوفالو النموذجي على الهيكل التالي:

myapp/
|-- actions/
|-- grifts/
|-- migrations/
|-- models/
|-- public/
|-- templates/
|-- go.mod
|-- go.sum
|-- main.go
  • الإجراءات: تحتوي على معالجات لمسارات الويب.
  • Grifts: يضم مهام Grift للأتمتة.
  • الهجرات: يخزن ملفات ترحيل قاعدة البيانات.
  • النماذج: تحدد نماذج البيانات.
  • عام: يحمل الأصول الثابتة مثل أوراق الأنماط والصور.
  • القوالب: يخزن قوالب HTML.
  • go.mod and go.sum: تتبع تبعيات المشروع وإصداراتها.
  • main.go: نقطة الدخول لتطبيق Buffalo، تقوم بتهيئة الخادم وبدء تشغيله.

قم بتشغيل هذا الأمر لإنشاء تطبيق Buffalo جديد:

buffalo new myapp

3. Grift: أتمتة المهام في Go

Grift هو برنامج تشغيل مهام مثالي لأتمتة المهام المختلفة المتعلقة بالمشروع. فهو يدير عمليات إنشاء الواجهة الأمامية ومعالجة الأصول وأتمتة النشر.

تثبت تقنية Grift قيمتها عند أتمتة المهام المتكررة في سير عمل تطوير الواجهة الأمامية، مما يعزز الكفاءة ويقلل التدخل اليدوي.

مثال الكود:

يوضح هذا المثال كيف يمكن استخدام Grift لتجميع ملفات JavaScript وتصغيرها في مشروع الواجهة الأمامية.

هيكل المشروع:

فيما يلي ملفات جافا سكريبت:

file1.jsو file2.js، موجودة في الدليل src.

file.js`

// file1.js
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("John");

file2.js

// file2.js
function multiply(a, b) {
  return a * b;
}
console.log(multiply(3, 4));

مهمة غريفت

حزم مهام Grift وتصغير ملفات JavaScript هذه في ملف واحد يسمى Bundle.js. يتم تعريف المهمة في ملف main.go الخاص بالمشروع.

main.go

// main.go
package main

import (
	"fmt"
	"github.com/markbates/grift/grift"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/js"
	"io/ioutil"
	"os"
	"path/filepath"
)

// BundleAndMinifyJS is a Grift task that bundles and minifies JavaScript files.
func BundleAndMinifyJS(c *grift.Context) error {
    // ... (code omitted for brevity)

    fmt.Printf("JavaScript files bundled and minified successfully. Output: %s\n", outputPath)
    return nil
}

// main function registers the Grift task and runs it.
func main() {
	grift.Desc("bundle-js", "Bundle and minify JavaScript files")
	grift.Add("bundle-js", BundleAndMinifyJS)

	taskName := "bundle-js"
	context := &grift.Context{}
	if err := grift.Run(taskName, context); err != nil {
		if err.Error() == "task not found" {
			fmt.Println("Task not found.")
			os.Exit(1)
		}
		panic(err)
	}
}

تشغيل مهمة Grift

لتنفيذ مهمة Grift، قم بتشغيل الأمر التالي في جهازك الطرفي:

go run main.go bundle-js

سيتم تجميع مهمة Grift هذه وتصغيرها file1.jsفي file2.jsملف واحد مسمى bundle.jsداخل دليل dist.

هنا هو الإخراج، ويظهر الدليل والملف الجديد bundle.jsالذي تم إنشاؤه وكذلك الرسالة المطبوعة في المحطة:

4. Gomponents: إنشاء مكونات واجهة مستخدم الويب في Go

Gomponents هي مكتبة لإنشاء مكونات HTML في Go. فهو يبسط عملية إنشاء مكونات واجهة المستخدم لتطبيقات الواجهة الأمامية .

يعد Gomponents مفيدًا بشكل خاص عندما تريد إنشاء مكونات HTML ديناميكيًا داخل كود Go الخاص بك، مما يسمح بمزيد من المرونة والتجريد في إنشاء واجهات المستخدم.

مثال التعليمات البرمجية:
يوضح تطبيق الويب هذا كيفية استخدام Gomponents وهو مستوحى من مثال Gomponents tailwindcss بواسطة Markus Wüstenberg. .

قم بإنشاء ملف main.goوأدخل الكود أدناه:

package main

import (
	"fmt"
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	http.Handle("/", createHandler("Welcome!", simpleComponent("Hello, this is the main page!")))
	http.Handle("/contact", createHandler("Contact", simpleComponent("Contact us!")))
	http.Handle("/about", createHandler("About", simpleComponent("About this site!")))

	// Print a message indicating that the server is running
	fmt.Println("Server is running on http://localhost:8080")

	_ = http.ListenAndServe("localhost:8080", nil)
}

func createHandler(title string, body g.Node) http.HandlerFunc {
	return func(w http.ResponseWriter, r *http.Request) {
		_ = Page(title, r.URL.Path, body).Render(w)
	}
}

func simpleComponent(content string) g.Node {
	return Div(
		H1(g.Text(content)),
		P(g.Text("This is a simple component.")),
	)
}

func Page(title, path string, body g.Node) g.Node {
	return c.HTML5(c.HTML5Props{
		Title:    title,
		Language: "en",
		Body: []g.Node{
			Navbar(path),
			Container(body),
		},
	})
}

func Navbar(currentPath string) g.Node {
	return Nav(Class("navbar"),
		Container(
			NavbarLink("/", "Home", currentPath == "/"),
			NavbarLink("/contact", "Contact", currentPath == "/contact"),
			NavbarLink("/about", "About", currentPath == "/about"),
		),
	)
}

func NavbarLink(path, text string, active bool) g.Node {
	return A(Href(path), g.Text(text),
		c.Classes{
			"active": active,
		},
	)
}

func Container(children ...g.Node) g.Node {
	return Div(Class("container"), g.Group(children))
}

قم بتشغيل الكود باستخدام هذا الأمر لبدء الخادم:

go run main.go

ثم أدخل عنوان URL هذا في متصفحك إلى مكونات Go: http://localhost:8080 كما هو موضح هنا:

ولدينا مكونات “الصفحة الرئيسية” و”حول” و”الاتصال” التي تم إنشاؤها باستخدام Gomponents .

5. تقديم: أداة عرض الشرائح المستندة إلى Go

الحاضر هو أداة في النظام البيئي Go تستخدم لإنشاء مجموعات الشرائح والعروض التقديمية. فهو يسمح للمطورين بإنشاء عروض تقديمية فنية أو وثائق مباشرة في Go.

يعد التقديم مفيدًا عندما تحتاج إلى إنشاء عروض تقديمية فنية ومشاركتها حول موضوعات تطوير الواجهة الأمامية أو تحديثات المشروع أو أي معلومات أخرى ذات صلة.

إليك كيفية استخدام Present في مشاريعك:

أولاً، قم بإنشاء ملف مسمى presentation.slideفي محرر التعليمات البرمجية الخاص بك وأدخل نموذج التعليمات البرمجية هذا:

# My Frontend Tech Talk

---

## Agenda

1. Introduction
2. Project Scope
3. Live Demo
4. Q&A

ثم اكتب محتوى العرض التقديمي الخاص بك باستخدام CommonMark ، وهي لغة ترميزية بسيطة. استخدم العناوين (#) للشرائح و— للفصل بينها.

قم بتثبيت أداة الحاضر مثل هذا:

go get -u golang.org/x/tools/cmd/present

ثم قم بتشغيل أداة العرض في الدليل الذي يحتوي على ملف العرض التقديمي الخاص بك. ثم يعرض متصفحك عرضًا تقديميًا.

present

لماذا نستخدم أدوات Go في مشاريع الواجهة الأمامية؟

  • الكفاءة: تم تصميم أدوات Go لتعزيز الكفاءة وأتمتة المهام المتكررة وتقليل التدخل اليدوي في سير عمل تطوير الواجهة الأمامية.
  • الأداء: تم تحسين الأدوات مثل Fiber لتحقيق الأداء، مما يضمن أن يكون اتصال الواجهة الأمامية والخلفية لديك سريعًا وسريع الاستجابة.
  • الاتساق: تعمل اتفاقيات بافالو وهيكل المشروع على تعزيز الاتساق، مما يسمح للمطورين بالتركيز على بناء الميزات بدلاً من التعامل مع التعليمات البرمجية المعيارية.
  • المرونة: توفر قدرة Gomponents على إنشاء مكونات HTML بشكل ديناميكي في Go مرونة في إنشاء واجهات المستخدم داخل اللغة.
  • التوثيق والعرض التقديمي: يعمل الحاضر على تبسيط عملية إنشاء العروض التقديمية والوثائق الفنية، مما يحافظ على تنظيم رؤى مشروعك وتحديثاته.

إن التكامل السلس لأدوات Go لا يعمل على تبسيط التطوير فحسب، بل يتوافق أيضًا مع فلسفة Go المتمثلة في البساطة والكفاءة.

قم بتجربة هذه الأدوات، وسترى التأثير الإيجابي الذي يمكن أن تحدثه على سير عملك.

نسعى دائما لتقديم كل ماهو ممتع لكم فاتمنى ان نكون عند حسن ظنكم جميعا.

فارجو دعمنا وتشجيعنا على تقديم الافضل بمشاركة الموضوع مع اصدقائكم على مواقع التواصل الاجتماعى فيس بوك تويتر عن طريق ازرار المشاركة اسفل التدوينة.

وترك تعليق داخل صندوق التعليقات تشجيعاُ لنا كل الود والاحترام لكم والى اللقاء فى تدوينة اخرى من تدوينات مدونة الشهادة .

شاركها على فيسبوك
شاركها على تويتر
تابع صفحتنا على فيسبوك

الوسوم

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

جميع الحقوق محفوظة لمدونة الشهادة © 2013 - 2024