SwiftUI Online

לכתוב, להריץ ולשתף קטעי קוד - בלי שום התקנה.

ContentView.swift

תצוגה מקדימהתצוגה מקדימה אוטומטית

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var done = false
}

struct ContentView: View {
    @State private var items = [
        TodoItem(title: "Run SwiftUI in the browser", done: true),
        TodoItem(title: "Tap a task to check it off"),
        TodoItem(title: "Add a task of your own"),
    ]
    @State private var newTitle = ""

    var remaining: Int {
        items.filter { !$0.done }.count
    }

    var body: some View {
        NavigationStack {
            List {
                Section("\(remaining) left to do") {
                    ForEach($items) { $item in
                        Toggle(item.title, isOn: $item.done)
                    }
                }
                Section {
                    HStack {
                        TextField("New task", text: $newTitle)
                        Button("Add") {
                            items.append(TodoItem(title: newTitle))
                            newTitle = ""
                        }
                        .disabled(newTitle.isEmpty)
                    }
                }
            }
            .navigationTitle("My Tasks")
        }
    }
}

הריצו SwiftUI אונליין וראו את האפליקציה על iPhone

עורך SwiftUI אונליין וחינמי. כתבו ContentView והתצוגות שלכם מופיעות על מסך בגודל iPhone לצד הקוד. כפתורים, מתגים ושדות טקסט מגיבים ללחיצות, כך ששינויים ב-@State מופיעים כמו במכשיר אמיתי. בלי Mac, בלי Xcode ובלי סימולטור להוריד.

הקוד שלכם מתקמפל עם swiftc מול המימוש של SwiftUI ש-Coddy פיתחה בעצמה, אותו מימוש שמפעיל את התצוגה המקדימה החיה בשיעורי ה-SwiftUI של Coddy. הוא מכסה את ה-API היומיומי: stacks, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheets ו-alerts, עם @State, @Binding, ObservableObject ו-@Published. זו לא הספרייה של Apple, ולכן ספריות שקיימות רק אצל Apple כמו UIKit, MapKit ו-Core Data לא זמינות.

מה הופך את עורך ה-SwiftUI האונליין הזה לשימושי

תצוגה מקדימה חיה של iPhone: המסך מוצג בגודל iPhone בתוך מסגרת מכשיר, עם שורת סטטוס ו-Dynamic Island, כך שפריסה נראית כמו שהיא הייתה נראית בטלפון.
לחצו על האפליקציה. כפתורים, מתגים, steppers ושדות טקסט מגיבים, והתצוגה המקדימה משחזרת את הלחיצות שלכם מול state חדש, כך ש-@State ו-@Binding מתנהגים כמו באפליקציה אמיתית.
תצוגה מקדימה אוטומטית: המסך נבנה מחדש רגע אחרי שמפסיקים להקליד, וכפתור הרענון מפעיל את האפליקציה מההתחלה. שגיאות קומפילציה מצביעות על השורה בקובץ שלכם.
הצעות קוד של SwiftUI בעורך: modifiers אחרי נקודה, הערכים שארגומנט מקבל (.font(., .foregroundStyle(.), property wrappers אחרי @ ושמות של SF Symbols.
שמרו צילום מסך של הטלפון כ-PNG, והורידו את ContentView.swift שלכם כדי לפתוח אותו ב-Xcode מאוחר יותר. גם קבצים שהודבקו מ-Xcode נבנים: בלוקים של #Preview פשוט מדולגים.

מה אפשר לבנות בעורך ה-SwiftUI האונליין

רשימת משימות עם List, ForEach($items) ו-Toggle לכל שורה, וגם TextField וכפתור שמוסיף שורות חדשות.
מסך הגדרות: Form עם sections, Picker, Stepper ו-Slider, כולם מקושרים ל-@State.
ניווט: NavigationStack עם כותרת ושורות NavigationLink שפותחות תצוגת פרטים.
ניסויי פריסה: VStack, HStack ו-ZStack עם .padding, .frame, .background וצורות מעוגלות, כדי לראות איך modifiers מצטברים.

שאלות נפוצות על SwiftUI אונליין

אפשר להריץ SwiftUI בלי Mac?

כן. העורך עובד בכל דפדפן מודרני, ב-Windows, ב-Linux, ב-Chromebook או ב-iPad. הקוד שלכם מתקמפל בשרתים של Coddy והמסך מצויר בדף, כך שלא צריך Xcode, Mac או את סימולטור ה-iOS כדי לנסות SwiftUI.

עורך ה-SwiftUI האונליין חינמי?

כן. הוא חינמי ובלי הרשמה: פותחים את הדף, עורכים את הקוד וצופים בטלפון.

זה ה-SwiftUI של Apple?

לא. זה מימוש של Coddy עצמה ל-views, ל-modifiers ול-property wrappers של SwiftUI, שמתקמפל עם swiftc ומצויר כמסך iPhone. קוד SwiftUI יומיומי רץ בלי שינויים, והתצוגה המקדימה היא אותה אחת שבה משתמשים שיעורי ה-SwiftUI של Coddy וגם בודקים איתה. ספריות שקיימות רק אצל Apple כמו UIKit, MapKit ו-Core Data לא זמינות, ואנימציות מציגות את המצב הסופי שלהן.

אפשר להשתמש ב-@Observable או ב-#Preview?

השתמשו ב-ObservableObject עם @Published ו-@StateObject לנתונים משותפים. המאקרו @Observable ו-#Preview צריכים את תוספי המאקרו של Xcode; בלוקים של #Preview מדולגים, כך שקובץ שהודבק מ-Xcode עדיין נבנה, והאפליקציה מציגה את ContentView. אפשר גם להוסיף struct של App משלכם עם @main.

איך ממשיכים ללמוד SwiftUI אחרי שמנסים את העורך?

שנו את האפליקציה לדוגמה ולחצו עליה בתצוגה המקדימה. כשתרצו מסלול מובנה, קורס ה-SwiftUI של Coddy מלמד views, modifiers, stacks, @State, רשימות, ניווט, @Binding ונתונים observable בשיעורים קצרים, כל אחד עם אותה תצוגה מקדימה חיה של iPhone.

כלים שימושיים ל-SwiftUI

כלים חינמיים בדפדפן שמשתלבים היטב עם עורך ה-SwiftUI אונליין - כולם חלק מ-Coddy.

להטמיע את עורך ה-SwiftUI השוואת פלטפורמות לימוד תכנות