Ionic Çapraz Platform Mobil Geliştirme Eğitimi

Eğitim Hakkında

Ionic bileşenlerinden Capacitor eklentilerine ve mağaza dağıtımına çapraz platform yolculuğu

Ionic ile Çapraz Platformlu Mobil Uygulama Geliştirme Eğitimi, HTML, CSS ve JavaScript bilen geliştiricilere Ionic Framework ve Capacitor kullanarak tek kod tabanından iOS ve Android uygulaması üretmeyi öğretir. Katılımcılar Ionic UI bileşenlerini, WebView çalışma mantığını, Capacitor köprüsüyle kamera ve konum gibi native yetenekleri ve uygulamanın her iki mağazaya dağıtımını öğrenir. Eğitim boyunca gerçek bir uygulama örnek üzerinden adım adım geliştirilir.

Süre ve Format

3 Gün. Her gün dört modül; örnek bir uygulama ilk günden son güne Ionic bileşenlerinden Capacitor entegrasyonuna ve mağaza dağıtımına doğru geliştirilir.

Seviye

Orta Seviye — web teknolojileri bilen geliştiricilere Ionic ve Capacitor ile iOS ve Android uygulaması üretmeyi öğretir

Öğrenme Metodu

Tek bir örnek uygulama üç gün boyunca canlı olarak geliştirilir; her modülde yeni bir Ionic veya Capacitor kavramı doğrudan projeye eklenir.

Neden Bu Eğitim?

🎯Web bilgisi mobile taşınır

HTML, CSS ve JavaScript bilginizi doğrudan kullanarak öğrenme eğrisi düşük bir biçimde iOS ve Android uygulaması geliştirirsiniz.

🔌Capacitor ile native erişim

Capacitor köprüsüyle kamera, konum ve dosya gibi cihaz yeteneklerine web kodundan erişerek gerçek native özellikler eklersiniz.

🧩Hazır bileşen kütüphanesi

Platforma uyum sağlayan zengin Ionic bileşen setiyle tutarlı ve şık arayüzleri çok daha hızlı biçimde oluşturursunuz.

Anahtar Konular

ionic eğitimiionic kursucapacitor eğitimiçapraz platform mobil geliştirmehibrit mobil uygulamaionic frameworkweb tabanlı mobil uygulamaionic angular reactmobil uygulama geliştirme eğitimiios android tek kod

“Ionic, web bilgisini gerçek mobil uygulamaya dönüştürmenin en kısa yoludur; Capacitor ile aynı koddan iki mağazaya ulaşırsınız.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı bilgi ve geliştirme ortamı

1

HTML ve CSS bilgisi

Etiket, kutu modeli ve temel CSS stil kavramlarına aşinalık arayüz geliştirmeyi kolaylaştırır.

2

JavaScript temeli

Değişken, fonksiyon ve ES6 kavramlarını bilmek bileşen mantığını kavramak için gereklidir.

3

Angular veya React

İki çatıdan birine aşinalık faydalıdır; eğitim bir çatı üzerinden yürütülür ve temeller hatırlatılır.

4

Node.js kurulumu

Node.js, npm ve Ionic CLI kurulu, emülatör veya cihazda çalıştırmaya hazır bir ortam gerekir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Ionic ve WebView mimarisini kavrar, Ionic CLI ile proje kurar ve hazır UI bileşenleriyle ilk ekranları oluşturarak uygulama iskeletini kurar.

Modül 1

Ionic ve WebView Mimarisi

Web uygulamasının WebView içinde çalışma mantığı
Ionic, Capacitor ve çatı arasındaki ilişki
Hibrit yaklaşımın native karşısındaki yeri
Tek kod tabanıyla iki platform hedefleme
Ionic sürümleri ve çatı bağımsız yapı
Uygulama yaşam döngüsünün kavranması

Modül 2

Proje Kurulumu ve Ionic CLI

Ionic CLI ile yeni proje oluşturma
Başlangıç şablonları: tabs, sidemenu, blank
ionic serve ile tarayıcıda canlı önizleme
Proje klasör yapısının tanınması
Angular veya React çatı seçimi
Canlı yeniden yükleme ile hızlı geliştirme

Modül 3

Temel Ionic Bileşenleri

ion-button, ion-icon ve ion-card kullanımı
ion-list ve ion-item ile liste yapıları
ion-header, ion-toolbar ve ion-content düzeni
ion-input ve ion-textarea ile form girdisi
ion-grid ile duyarlı yerleşim kurma
Platforma uyarlı bileşen davranışı

Modül 4

Navigasyon ve Sayfa Yapısı

Sayfa bazlı yönlendirme ve rota tanımı
ion-tabs ile sekmeli ana akış kurulumu
ion-menu ile yan menü yerleşimi
Sayfalar arası parametre aktarımı
ion-nav ve geri gezinme davranışı
Yönlendirme koruması ve erişim kontrolü

Günün hedefiKatılımcı Capacitor köprüsünü kurar, resmi eklentilerle kamera, konum ve depolama gibi native yeteneklere erişir ve izin yönetimini uygulayarak gerçek cihaz özelliklerini kullanır.

Modül 1

Capacitor Köprü Mantığı

Capacitor ile web ve native arasında köprü
Projeye iOS ve Android platform ekleme
capacitor.config ayar dosyasının düzeni
npx cap sync ile köprü senkronizasyonu
Native proje üzerinde kabuk oluşturma
Cordova eklentileriyle uyumluluk

Modül 2

Kamera ve Medya Eklentileri

Camera eklentisiyle fotoğraf çekme
Galeriden görsel seçme ve önizleme
Çekilen görseli uygulamada gösterme
Filesystem ile dosya kaydetme ve okuma
Medya izinlerinin istenmesi ve yönetimi
Web ve native davranış farkının ele alınması

Modül 3

Konum ve Cihaz Bilgisi

Geolocation ile anlık konum alma
Konum izni isteme ve red durumu
Device eklentisiyle cihaz bilgisi okuma
Network eklentisiyle bağlantı durumu
Preferences ile anahtar değer saklama
App eklentisiyle yaşam döngüsü olayları

Modül 4

Bildirim ve Özel Eklentiler

Local Notifications ile yerel bildirim
Push bildirim altyapısına genel bakış
Haptics ile dokunsal geri bildirim
Splash Screen ve Status Bar ayarı
Topluluk eklentilerini projeye ekleme
Basit özel eklenti yazma mantığı

Günün hedefiKatılımcı Ionic tema değişkenleriyle görünümü özelleştirir, PWA desteğini kavrar, uygulamayı hata ayıklar ve iki mağazaya dağıtım için derleme almayı uygular.

Modül 1

Temalama ve CSS Değişkenleri

Ionic CSS değişkenleriyle renk paleti
Açık ve koyu tema desteği ekleme
ion-color ile bileşen renklendirme
Global stil ve değişken dosyası düzeni
Platforma özel görünüm ince ayarı
Özel yazı tipi ve ikon entegrasyonu

Modül 2

PWA ve Web Dağıtımı

Aynı koddan ilerleyen web uygulaması
Service worker ile çevrimdışı destek
Web manifest ve uygulama simgeleri
Ionic PWA araçlarını projeye ekleme
Üretim derlemesi alma ve barındırma
Mobil ve web dağıtımı birlikte planlama

Modül 3

Hata Ayıklama ve Performans

WebView için tarayıcı araçlarıyla inceleme
Chrome ve Safari uzaktan hata ayıklama
Liste ve kaydırma performansını iyileştirme
Görsel ve varlık boyutlarını küçültme
Önbellekleme ve gecikmeli yükleme
Cihazda gerçek performans testi

Modül 4

iOS ve Android Mağaza Dağıtımı

Android için APK ve AAB derlemesi alma
Xcode ile iOS derlemesi hazırlama
Uygulama ikonu ve açılış ekranı üretimi
İmzalama ve sertifika yönetimi
Play Store ve App Store listesi hazırlığı
Sürüm güncelleme ve yayın yönetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Mimariyi kavrama

Ionic, WebView ve Capacitor mimarisini anlar, hibrit yaklaşımın native karşısındaki yerini bilerek doğru tercihler yaparsınız.

✅

Bileşenle arayüz

Zengin Ionic UI bileşen kütüphanesiyle platforma uyumlu, tutarlı ve şık mobil arayüzleri hızla oluşturabilirsiniz.

✅

CLI ve proje

Ionic CLI ile proje kurar, şablonları kullanır ve canlı önizlemeyle verimli bir geliştirme akışı yürütürsünüz.

✅

Capacitor köprüsü

Capacitor ile projeye native platform ekler, köprüyü senkronlar ve web kodundan cihaz yeteneklerine erişirsiniz.

✅

Native yetenekler

Kamera, konum, depolama ve bildirim gibi native özellikleri resmi eklentilerle uygulamanıza entegre edebilirsiniz.

✅

Temalama becerisi

Ionic CSS değişkenleriyle renk, açık ve koyu tema ve platforma özel görünümü esnek biçimde özelleştirirsiniz.

✅

PWA desteği

Aynı kod tabanından ilerleyen web uygulaması üretir, çevrimdışı destekle web ve mobili birlikte dağıtabilirsiniz.

✅

Mağaza dağıtımı

Uygulamayı iki platform için derler, imzalar ve Play Store ile App Store'da yayınlamayı uygulayabilirsiniz.

Kimler İçin Uygundur?

HTML
CSS ve JavaScript temeline sahip olup web bilgisiyle mobil uygulama geliştirmeye geçmek isteyen frontend geliştiricileri
Angular veya React deneyimi olan yazılımcılar
çapraz platform çözüm arayan ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML, CSS ve JavaScript temeline sahip olup web bilgisiyle mobil uygulama geliştirmeye geçmek isteyen frontend geliştiricileri, Angular veya React deneyimi olan yazılımcılar ve çapraz platform çözüm arayan ekipler için uygundur. Çatı temelleri eğitim içinde hatırlatılır.

Ionic ile React Native arasındaki fark nedir?

Ionic uygulamayı bir WebView içinde çalışan web teknolojileriyle üretir ve native yeteneklere Capacitor köprüsüyle erişir; React Native ise gerçek native bileşenleri render eder. Ionic, güçlü web bilgisi olan ekipler için daha kısa bir öğrenme eğrisi ve aynı koddan PWA üretme imkânı sunar.

Capacitor ne işe yarar?

Capacitor, web kodu ile cihazın native yetenekleri arasında köprü kuran katmandır. Projeye iOS ve Android platformlarını ekler, kamera, konum, dosya sistemi ve bildirim gibi özelliklere resmi eklentilerle erişim sağlar ve uygulamayı native kabuk içinde mağazalara dağıtmaya hazır hale getirir.

Angular mı yoksa React mı kullanılıyor?

Ionic hem Angular hem React hem de Vue ile çalışabilir. Eğitim tek bir çatı üzerinden yürütülür ve bileşen mantığı o çatıya göre anlatılır; ancak Ionic bileşenleri ve Capacitor kavramları çatıdan bağımsız olduğu için öğrendikleriniz diğer çatılara da büyük ölçüde taşınabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve üç gün boyunca geliştirilen örnek uygulamayı belgeler; eğitim yüz yüze veya online verilebilir ve kurumsal gruplara özel olarak uyarlanabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

IONIC İLE ÇAPRAZ PLATFORMLU MOBİL UYGULAMA GELİŞTİRME EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Ionic ve WebView Mimarisi

Proje Kurulumu ve Ionic CLI

Temel Ionic Bileşenleri

Navigasyon ve Sayfa Yapısı

Capacitor Köprü Mantığı

Kamera ve Medya Eklentileri

Konum ve Cihaz Bilgisi

Bildirim ve Özel Eklentiler

Temalama ve CSS Değişkenleri

PWA ve Web Dağıtımı

Hata Ayıklama ve Performans

iOS ve Android Mağaza Dağıtımı

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

React Native Expo Eğitimi

React Native Eğitimi

Working with CSS Layouts & the Ionic Framework CLI Eğitimi

Working with React Native (TTSREACT) Eğitimi

Angular ile Mobil Uygulama Geliştirme (Ionic Framework) Eğitimi

İleri Seviye Xamarin Eğitimi