સ્વિફ્ટનો ઉપયોગ કરીને iOS એપ્સ બનાવવાનું ટ્યુટોરીયલ
Xcode અને Swift પ્રોગ્રામિંગ ભાષા દ્વારા Appleના વ્યાપક વિકાસ ઇકોસિસ્ટમને કારણે iOS એપ્લિકેશનો બનાવવી ક્યારેય સરળ નહોતી. આ લેખમાં, તમે Swift નો ઉપયોગ કરીને iOS એપ્લિકેશન બનાવવાની મૂળભૂત રીતો શીખી શકશો, જેમાં ટૂલ્સ સેટ કરવા, નવો પ્રોજેક્ટ બનાવવા, ઇન્ટરફેસ ડિઝાઇન કરવા અને સિમ્યુલેટરમાં એપ્લિકેશન ચલાવવાનો સમાવેશ થાય છે. જ્યારે આ ટ્યુટોરીયલ પ્રારંભિક છે, ત્યારે પગલાંઓ તમને એક સરળ, કાર્યકારી એપ્લિકેશન બનાવવામાં મદદ કરવા માટે પૂરતા હોવા જોઈએ.
-
૧. સાધનો અને જરૂરિયાતોની તૈયારી
કોડ લખવાનું શરૂ કરતા પહેલા, ખાતરી કરો કે તમારી પાસે નીચેના ઉપકરણો અને સોફ્ટવેર છે:
1. MacBook/iMac (અથવા Apple ઉપકરણો પર macOS), કારણ કે Xcode સત્તાવાર રીતે ફક્ત macOS પર ચાલે છે.
2. Xcode (મેક એપ સ્ટોર પરથી મફત ડાઉનલોડ). Xcode માં કોડ એડિટર, iPhone સિમ્યુલેટર અને બિલ્ડ અને ડીબગીંગ ટૂલ્સનો સમાવેશ થાય છે.
૩. સ્વિફ્ટ (એક્સકોડમાં સમાવિષ્ટ).
૪. (વૈકલ્પિક) ભૌતિક ઉપકરણોના ઇન્સ્ટોલેશન અને એપ સ્ટોર પર પ્રકાશન માટે એપલ ડેવલપર એકાઉન્ટ.
એકવાર Xcode ઇન્સ્ટોલ થઈ જાય, પછી એપ્લિકેશન ખોલો અને જો જરૂરી હોય તો વધારાના ઘટકોની ઇન્સ્ટોલેશન પ્રક્રિયા પૂર્ણ થાય ત્યાં સુધી રાહ જુઓ.
-
2. Xcode માં એક નવો પ્રોજેક્ટ બનાવો
૧. એક્સકોડ ખોલો.
2. નવો Xcode પ્રોજેક્ટ બનાવો પસંદ કરો.
3. ટેમ્પલેટ વિભાગમાં, પસંદ કરો:
- આઇઓએસ
- એપ્લિકેશન
4. આગળ ક્લિક કરો, પછી પ્રોજેક્ટ ગોઠવણી ભરો:
- ઉત્પાદન નામ: ઉદાહરણ તરીકે `HelloSwiftApp`
- ટીમ: તમારું ખાતું પસંદ કરો (જો તમે લોગ ઇન ન હોવ તો ખાલી હોઈ શકે છે)
- સંસ્થા ઓળખકર્તા: ઉદાહરણ તરીકે `com.devname`
- ઇન્ટરફેસ: SwiftUI પસંદ કરો (નવા નિશાળીયા માટે વધુ આધુનિક અને સરળ)
નોંધ: જો તમને UIKit જોઈતી હોય, તો તમે સ્ટોરીબોર્ડ પસંદ કરી શકો છો, પરંતુ આ ટ્યુટોરીયલ SwiftUI પર ધ્યાન કેન્દ્રિત કરે છે.
- ભાષા: સ્વિફ્ટ
5. આગળ ક્લિક કરો અને પ્રોજેક્ટ સ્ટોરેજ સ્થાન પસંદ કરો, પછી બનાવો પર ક્લિક કરો.
એકવાર પ્રોજેક્ટ બની ગયા પછી, તમને `HelloSwiftAppApp.swift` અને `ContentView.swift` જેવી ફાઇલ સ્ટ્રક્ચર દેખાશે.
-
3. SwiftUI પ્રોજેક્ટના મૂળભૂત માળખાને સમજવું
SwiftUI માં, એપ્લિકેશનનો પ્રારંભિક બિંદુ સામાન્ય રીતે `YourAppNameApp.swift` ફાઇલ હોય છે. ઉદાહરણ તરીકે:
“સ્વિફ્ટ
SwiftUI આયાત કરો
@મુખ્ય
સ્ટ્રક્ટ હેલોસ્વિફ્ટએપએપ: એપ {
var બોડી: કેટલાક દ્રશ્ય {
વિન્ડોગ્રુપ {
કન્ટેન્ટવ્યૂ()
}
}
}
"`
ટૂંકી સમજૂતી:
– `@main` એપ્લિકેશન એન્ટ્રી પોઈન્ટને ચિહ્નિત કરે છે.
- `WindowGroup` એ મુખ્ય વ્યૂ કન્ટેનર છે.
– `ContentView()` એ પ્રથમ દૃશ્ય છે જે પ્રદર્શિત થાય છે.
દરમિયાન, `ContentView.swift` માં મુખ્ય દૃશ્ય શામેલ છે:
“સ્વિફ્ટ
SwiftUI આયાત કરો
રચના સામગ્રી દૃશ્ય: જુઓ {
var શરીર: કેટલાક દૃશ્ય {
ટેક્સ્ટ ("હેલો, દુનિયા!")
.પેડિંગ()
}
}
"`
-
4. એક સરળ UI બનાવવું: "ક્વિક નોટ્સ" એપ્લિકેશન
વસ્તુઓને વધુ રસપ્રદ બનાવવા માટે, અમે "ક્વિક નોટ્સ" નામની એક સરળ એપ્લિકેશન બનાવીશું જે વપરાશકર્તાઓને નોંધો લખવા અને તેમને સૂચિ તરીકે પ્રદર્શિત કરવાની મંજૂરી આપે છે.
પગલું 1: ઇનપુટ અને યાદી માટે સ્થિતિઓ બનાવવી
`ContentView.swift` ને આમાં બદલો:
“સ્વિફ્ટ
SwiftUI આયાત કરો
રચના સામગ્રી દૃશ્ય: જુઓ {
@State ખાનગી var નોટટેક્સ્ટ: સ્ટ્રિંગ = “”
@State ખાનગી var નોંધો: [String] = []
var શરીર: કેટલાક દૃશ્ય {
નેવિગેશનવ્યૂ {
વીસ્ટેક(અંતર: ૧૬) {
ટેક્સ્ટફિલ્ડ(“નોંધ લખો…”, ટેક્સ્ટ: $નોટટેક્સ્ટ)
.textFieldStyle(રાઉન્ડેડબોર્ડરટેક્સ્ટફિલ્ડસ્ટાઇલ())
.ગાદી (.આડી)
બટન(ક્રિયા: નોંધ ઉમેરો) {
ટેક્સ્ટ ("નોંધ ઉમેરો")
.ફ્રેમ(મહત્તમ પહોળાઈ: .અનંત)
}
.buttonStyle(.borderedProminent)
.ગાદી (.આડી)
યાદી {
દરેક માટે(નોંધો, id: \.self) { નોંધમાં
ટેક્સ્ટ (નોંધ)
}
.onDelete(પ્રદર્શન કરો: deleteNote)
}
}
.navigationTitle(“ક્વિક નોટ્સ”)
}
}
ખાનગી ફંક એડનોટ() {
લેટ ટ્રિમ્ડ = નોટટેક્સ્ટ.ટ્રીમિંગકેરેક્ટર્સ (.વ્હાઇટસ્પેસ અને ન્યૂલાઇન્સમાં)
ગાર્ડ !ટ્રીમ કરેલ.ઇમ્પ્ટી બીજું { રીટર્ન }
notes.insert(ટ્રીમ કરેલ, at: 0)
નોંધ ટેક્સ્ટ = “”
}
ખાનગી ફંક ડિલીટ નોટ (ઓફસેટ્સ પર: ઈન્ડેક્સસેટ) {
notes.remove(ઓફસેટ્સ પર: ઓફસેટ્સ)
}
}
"`
-
5. મહત્વપૂર્ણ કોડ સમજૂતી
સમજવા માટેના કેટલાક મુખ્ય ખ્યાલો:
– @State : બદલાતા ડેટાને સંગ્રહિત કરવા અને તે મુજબ અપડેટ કરવા માટે UI ને ટ્રિગર કરવા માટે વપરાય છે.
- `noteText` ઇનપુટ ટેક્સ્ટને સંગ્રહિત કરે છે.
- `નોટ્સ` નોંધોની યાદી સંગ્રહિત કરે છે.
- ટેક્સ્ટફિલ્ડ: ટેક્સ્ટ ઇનપુટ ઘટક.
`text: $noteText` ને બંધનકર્તા બનાવવાનો અર્થ એ છે કે TextField સીધું `noteText` સ્થિતિ સાથે જોડાયેલ છે.
– બટન(ક્રિયા:) : `addNote()` ફંક્શન ચલાવવા માટેનું બટન.
- યાદી + દરેક માટે: યાદી સ્વરૂપમાં ડેટા દર્શાવે છે.
`id: \.self` નો ઉપયોગ થાય છે કારણ કે આઇટમ એક અનન્ય સ્ટ્રિંગ છે (એક સરળ ઉદાહરણ માટે).
– onDelete : સ્વાઇપ હાવભાવ વડે યાદીમાંથી વસ્તુઓ કાઢી નાખવાની મંજૂરી આપે છે.
-
6. સિમ્યુલેટરમાં એપ્લિકેશન ચલાવવી
એપ્લિકેશન ચલાવવા માટે:
1. Xcode ની ટોચ પર, લક્ષ્ય ઉપકરણ પસંદ કરો, ઉદાહરણ તરીકે iPhone 15 (સિમ્યુલેટર).
2. રન બટન (ત્રિકોણ ચિહ્ન ▶) પર ક્લિક કરો.
3. સિમ્યુલેટર ખુલશે, પછી એપ્લિકેશન આપમેળે ચાલશે.
"નોંધ ઉમેરો" બટન દબાવીને નોંધ લખવાનો પ્રયાસ કરો, અને તેને સૂચિમાં દેખાય છે તે જુઓ. કોઈપણ વસ્તુને કાઢી નાખવા માટે તેને ડાબી બાજુ સ્વાઇપ કરો.
-
7. સરળ ડિબગીંગ
જ્યારે કોઈ એપ્લિકેશન અપેક્ષા મુજબ કામ ન કરે, ત્યારે તમે આ કરી શકો છો:
- ભૂલ લોગ માટે Xcode ના તળિયે ડીબગ કન્સોલ પેનલ જુઓ.
- ચલ મૂલ્યો તપાસવા માટે `print()` ઉમેર્યું:
“સ્વિફ્ટ
છાપો ("નોંધ ઉમેરી:", સુવ્યવસ્થિત)
"`
વધુમાં, Xcode ચોક્કસ લાઇન પર પ્રોગ્રામને રોકવા માટે બ્રેકપોઇન્ટ સુવિધા પ્રદાન કરે છે જેથી તમે ચલોની સામગ્રીનું નિરીક્ષણ કરી શકો.
-
8. એપ્લિકેશન્સમાં સુધારો: ડેટા માન્યતા અને સંગ્રહ
ઉપરોક્ત એપ્લિકેશન હજુ પણ અસ્થાયી રૂપે નોંધો સંગ્રહિત કરે છે (એપ્લિકેશન બંધ થવા પર તે અદૃશ્ય થઈ જશે). વિકાસના આગલા તબક્કા માટે, તમે ઉમેરી શકો છો:
૧. લોકલ સ્ટોરેજ (યુઝર ડિફોલ્ટ્સ)
એપ્લિકેશન બંધ થયા પછી પણ ચાલુ રહેવા માટે UserDefaults માં નોંધોની શ્રેણી સાચવો.
2. ડેટાબેઝ (કોર ડેટા/SQLite)
વધુ જટિલ ડેટા માટે યોગ્ય.
3. નોંધો સુવિધા સંપાદિત કરો
રેકોર્ડમાં ફેરફાર કરવા માટે વિગતવાર દૃશ્ય બનાવો.
4. વધુ આકર્ષક UI
ચિહ્નો, રંગો અને વધુ સ્વચ્છ લેઆઉટ ઉમેરો.
એક સરળ પગલા તરીકે, તમે `JSONEncoder` અને `JSONDecoder` નો ઉપયોગ કરીને `UserDefaults` માં રેકોર્ડ સાચવીને શરૂઆત કરી શકો છો.
-
9. કેસિમ્પુલન
Swift અને SwiftUI iOS એપ્સ બનાવવાની આધુનિક અને ઝડપી રીત પૂરી પાડે છે. આ ટ્યુટોરીયલમાં, તમે શીખ્યા કે કેવી રીતે નવો iOS પ્રોજેક્ટ બનાવવો, SwiftUI એપનું મૂળભૂત માળખું સમજવું, TextFields, Buttons અને Lists સાથે એક સરળ UI કેવી રીતે બનાવવું અને સિમ્યુલેટરમાં એપ કેવી રીતે ચલાવવી. જ્યારે એપ હજુ પણ સરળ છે, ત્યારે ડેટા સ્ટોરેજ, પેજ નેવિગેશન અને API ઇન્ટિગ્રેશન જેવી વધુ જટિલ સુવિધાઓ તરફ આગળ વધવા માટે આ પાયો જરૂરી છે.
જો તમે ઈચ્છો તો, હું તમને આ ટ્યુટોરીયલના વધુ અદ્યતન સંસ્કરણો બનાવવામાં પણ મદદ કરી શકું છું, જેમ કે UserDefaults/Core Data સાથે સતત સ્ટોરેજ ઉમેરવા, NavigationStack સાથે વિગતવાર પૃષ્ઠ બનાવવા, અથવા URLSession નો ઉપયોગ કરીને ઇન્ટરનેટ પરથી ડેટા મેળવતી એપ્લિકેશન બનાવવા.
