دليل تعليمي حول إنشاء تطبيقات iOS باستخدام لغة Swift

شرح كيفية إنشاء تطبيقات iOS باستخدام لغة Swift

أصبح بناء تطبيقات iOS أسهل من أي وقت مضى بفضل بيئة التطوير المتكاملة من Apple عبر Xcode ولغة البرمجة Swift. في هذه المقالة، ستتعرف على الخطوات الأساسية لبناء تطبيق iOS باستخدام Swift، بدءًا من إعداد الأدوات، وإنشاء مشروع جديد، وتصميم واجهة المستخدم، وتشغيل التطبيق في المحاكي. على الرغم من أن هذا الدليل تمهيدي، إلا أن الخطوات المذكورة كافية لمساعدتك في إنشاء تطبيق بسيط وفعّال.

-

1. إعداد الأدوات والمتطلبات

قبل البدء menulis kode, pastikan Anda memiliki perangkat dan software berikut:

1. MacBook/iMac (atau macOS di perangkat Apple), karena Xcode secara resmi hanya berjalan di macOS.
2. Xcode (bisa diunduh gratis melalui Mac App Store). Xcode berisi editor kode, simulator iPhone, serta tool build dan debugging.
3. Swift (sudah termasuk di Xcode).
4. (Opsional) Akun Apple Developer untuk instalasi ke perangkat fisik dan publikasi ke App Store.

بمجرد تثبيت Xcode، افتح التطبيق وانتظر حتى تكتمل عملية تثبيت المكونات الإضافية إذا لزم الأمر.

-

2. أنشئ مشروعًا جديدًا في Xcode

1. Buka Xcode .
2. Pilih Create a new Xcode project .
3. في قسم القالب، حدد ما يلي:
- iOS
- تطبيق
4. Klik Next , lalu isi konfigurasi proyek:
– Product Name : misalnya `HelloSwiftApp`
– Team : pilih akun Anda (bisa kosong jika belum login)
– Organization Identifier : misalnya `com.namadeveloper`
– Interface : pilih SwiftUI (lebih modern dan sederhana untuk pemula)
ملاحظة: إذا كنت تريد UIKit، يمكنك اختيار Storyboard، لكن هذا البرنامج التعليمي يركز على SwiftUI.
– Language : Swift
5. Klik Next dan pilih lokasi penyimpanan proyek, lalu klik Create .

بمجرد إنشاء المشروع، سترى بنية ملفات مثل `HelloSwiftAppApp.swift` و `ContentView.swift`.

-

3. فهم البنية الأساسية لمشروع SwiftUI

في SwiftUI، عادةً ما تكون نقطة البداية للتطبيق هي ملف `YourAppNameApp.swift`. على سبيل المثال:

""سريع
استيراد SwiftUI

@رئيسي
struct HelloSwiftAppApp: App {
var body: some Scene {
مجموعة النوافذ {
ContentView()
}
}
}
"`

شرح موجز:
– يشير `@main` إلى نقطة دخول التطبيق.
– `WindowGroup` هو حاوية العرض الرئيسية.
– `ContentView()` هي أول عرض يتم عرضه.

في هذه الأثناء، يحتوي ملف `ContentView.swift` على العرض الرئيسي:

""سريع
استيراد SwiftUI

بناء ContentView: عرض {
فار الجسم: بعض العرض {
نص("مرحباً بالعالم!")
.حشوة()
}
}
"`

-

4. إنشاء واجهة مستخدم بسيطة: تطبيق "الملاحظات السريعة"

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

الخطوة 1: إنشاء حالات للإدخال والقائمة

غيّر ملف `ContentView.swift` إلى:

""سريع
استيراد SwiftUI

بناء ContentView: عرض {
@State private var noteText: String = “”
@State private var notes: [String] = []

فار الجسم: بعض العرض {
NavigationView {
VStack(spacing: 16) {
TextField(“اكتب ملاحظة…”, text: $noteText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)

زر (الإجراء: إضافة ملاحظة) {
نص("إضافة ملاحظة")
.frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.padding(.horizontal)

قائمة {
ForEach(notes, id: \.self) { note in
نص (ملاحظة)
}
.onDelete(perform: deleteNote)
}
}
.navigationTitle(“ملاحظات سريعة”)
}
}

دالة خاصة addNote() {
let trimmed = noteText.trimmingCharacters(in: .whitespacesAndNewlines)
guard !trimmed.isEmpty else { return }
notes.insert(trimmed, at: 0)
نص الملاحظة = ""
}

وظيفة خاصة حذف ملاحظة (في الإزاحات: IndexSet) {
notes.remove(atOffsets: offsets)
}
}
"`

-

5. شرح هام للرمز

بعض المفاهيم الأساسية التي يجب فهمها:

– @State : Digunakan untuk menyimpan data yang akan berubah dan memicu UI untuk ikut diperbarui.
– يقوم `noteText` بتخزين النص المدخل.
– يخزن `notes` قائمة بالملاحظات.

– TextField : Komponen input teks.
ربط `text: $noteText` يعني أن حقل النص متصل مباشرة بحالة `noteText`.

– Button(action:) : Tombol untuk menjalankan fungsi `addNote()`.

– List + ForEach : Menampilkan data dalam bentuk daftar.
يتم استخدام `id: \.self` لأن العنصر عبارة عن سلسلة فريدة (على سبيل المثال البسيط).

– onDelete : Memungkinkan penghapusan item dari list dengan gesture swipe.

-

6. تشغيل التطبيق في المحاكي

لتشغيل التطبيق:

1. Di bagian atas Xcode, pilih target device misalnya iPhone 15 (Simulator).
2. Klik tombol Run (ikon segitiga ▶).
3. سيتم فتح المحاكي، ثم سيتم تشغيل التطبيق تلقائيًا.

جرّب كتابة ملاحظة، ثم اضغط على زر "إضافة ملاحظة"، وستظهر في القائمة. اسحب أي عنصر إلى اليسار لحذفه.

-

7. تصحيح الأخطاء البسيط

عندما لا يعمل التطبيق كما هو متوقع، يمكنك:

– Melihat panel Debug Console di bawah Xcode untuk error log.
– تمت إضافة `print()` للتحقق من قيم المتغيرات:

""سريع
print(“ملاحظة مضافة:”, مختصرة)
"`

بالإضافة إلى ذلك، يوفر Xcode ميزة نقطة التوقف لإيقاف البرنامج عند سطر معين حتى تتمكن من فحص محتويات المتغيرات.

-

8. تحسين التطبيقات: التحقق من صحة البيانات وتخزينها

لا يزال التطبيق المذكور أعلاه يخزن الملاحظات مؤقتًا (ستختفي عند إغلاق التطبيق). في المرحلة التالية من التطوير، يمكنك إضافة ما يلي:

1. Penyimpanan Lokal (UserDefaults)
احفظ مجموعة من الملاحظات في UserDefaults للاحتفاظ بها بعد إغلاق التطبيق.
2. Database (Core Data/SQLite)
مناسب للبيانات الأكثر تعقيداً.
3. Fitur Edit Catatan
أنشئ عرضًا تفصيليًا لتعديل السجل.
4. UI yang Lebih Menarik
أضف أيقونات وألوانًا وتصميمًا أكثر وضوحًا.

كخطوة سهلة، يمكنك البدء بحفظ السجلات في `UserDefaults` باستخدام `JSONEncoder` و `JSONDecoder`.

-

9. كيسيمبولان

توفر لغة Swift وواجهة SwiftUI طريقة حديثة وسريعة لبناء تطبيقات iOS. في هذا الدرس، تعلمت كيفية إنشاء مشروع iOS جديد، وفهم البنية الأساسية لتطبيق SwiftUI، وبناء واجهة مستخدم بسيطة باستخدام حقول نصية وأزرار وقوائم، وتشغيل التطبيق في المحاكي. على الرغم من بساطة التطبيق، إلا أن هذه الأسس ضرورية للانتقال إلى ميزات أكثر تعقيدًا مثل تخزين البيانات، والتنقل بين الصفحات، وتكامل واجهات برمجة التطبيقات (API).

إذا رغبت، يمكنني أيضًا مساعدتك في إنشاء إصدارات أكثر تقدمًا من هذا البرنامج التعليمي، مثل إضافة تخزين دائم باستخدام UserDefaults/Core Data، أو إنشاء صفحة تفاصيل باستخدام NavigationStack، أو إنشاء تطبيق يجلب البيانات من الإنترنت باستخدام URLSession.