Angular Ionic Mobil Uygulama Geliştirme Eğitimi

Eğitim Hakkında

Ionic bileşenlerinden Angular mimarisine, native API'lerden mağaza yayınına eksiksiz akış

Angular ile Mobil Uygulama Geliştirme (Ionic Framework) Eğitimi, web teknolojileriyle tek kod tabanından iOS ve Android için çalışan mobil uygulamalar geliştirmeyi öğretir. Katılımcılar Ionic bileşenlerini, Angular bileşen ve servis mimarisini ve yönlendirmeyi öğrenir. RxJS ile durum, HttpClient ile ağ, Capacitor ile kamera ve konum gibi native özellikler işlenir. Program; performans, tema ve mağaza yayın süreciyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; tek bir Ionic uygulaması dört gün boyunca bileşenden native entegrasyona katman katman geliştirilir.

Seviye

Orta Seviye — Angular ve Ionic ile Capacitor üzerinden iOS ve Android çalışan çapraz platform uygulaması

Öğrenme Metodu

Gerçek bir Ionic uygulaması dört gün boyunca adım adım geliştirilir; her modülde yeni bir bileşen, servis veya native yetenek projeye

Neden Bu Eğitim?

🎯Tek kod iki platform

Angular bilginizle tek kod tabanından hem iOS hem Android için çalışan uygulamalar üreterek geliştirme maliyetini düşürürsünüz.

🧩Hazır UI bileşenleri

Ionic'in platforma uyum sağlayan zengin bileşen kütüphanesiyle arayüzü hızlıca kurmayı ve özelleştirmeyi öğrenirsiniz.

🚀Native erişim

Capacitor ile kamera, konum ve dosya gibi cihaz yeteneklerine erişerek web uygulamasını gerçek mobil uygulamaya dönüştürürsünüz.

Anahtar Konular

ionic eğitimiangular mobil uygulamaionic framework kursuçapraz platform uygulama geliştirmecapacitor eğitimiangular ionichibrit mobil uygulamamobil uygulama geliştirme eğitimiionic angular kursutek kod ios android

“Tek kod tabanından iki platforma üretmek bir hayal değil, Ionic ve Angular ile bugünün gerçekliğidir; bu eğitim o gerçekliği kurar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve kurulum

1

Web temelleri

HTML, CSS ve TypeScript veya JavaScript temel bilgisi beklenir; Ionic bileşenleri bu temel üzerine kurulur.

2

Angular aşinalığı

Angular bileşen ve modül kavramına aşinalık faydalıdır; temel yapılar eğitimde yeniden ele alınır.

3

Node ve Ionic CLI

Node.js ve Ionic CLI'nin kurulu, projenin derlenip tarayıcıda çalışabilir durumda olması gerekir.

4

Platform araçları

Android için Android Studio, iOS derlemesi için macOS ve Xcode faydalı olur; tarayıcıda da çalışılabilir.

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 proje yapısını kavrar, hazır UI bileşenleriyle arayüz kurar ve Angular bileşen, şablon ve modül mimarisini mobil bağlamda uygular.

Modül 1

Ionic Proje Yapısı

Ionic CLI ile proje oluşturma ve çalıştırma
Klasör yapısı ve yapılandırma dosyaları
Angular tabanlı şablonun incelenmesi
Tarayıcıda canlı yeniden yükleme döngüsü
Platform modu ve adaptif davranış
Geliştirme ve derleme komutları

Modül 2

Ionic UI Bileşenleri

ion-button, ion-input ve form bileşenleri
ion-list ve ion-item ile liste kurulumu
ion-card ve ion-grid ile içerik düzeni
ion-header, ion-toolbar ve ion-content
ion-icon ve Ionicons kullanımı
Bileşenlerin platforma göre görünümü

Modül 3

Angular Bileşen Mimarisi

Bileşen, şablon ve sınıf ilişkisi
Property ve event binding ile veri akışı
Input ve Output ile bileşen iletişimi
ngIf ve ngFor ile şablon yönergeleri
NgModule ve standalone bileşen yaklaşımı
Bileşen yaşam döngüsü kancaları

Modül 4

Tema ve Stil ve Uygulaması

CSS değişkenleriyle renk ve tema yönetimi
Karanlık mod ve sistem temasına uyum
Platforma özel stil farklarının yönetimi
SCSS ile bileşen bazlı stillendirme
Responsive yerleşim ve güvenli alan
Özel bileşen görünümünün ayarlanması

Günün hedefiKatılımcı Angular Router ile sayfalar arası gezinir, servis ve bağımlılık enjeksiyonu ile iş mantığını ayırır, RxJS ile veri akışını yönetir ve formları doğrular.

Modül 1

Yönlendirme ve Gezinme

Angular Router ile rota tanımı
Parametreli rota ve sorgu parametreleri
ion-router-outlet ile mobil gezinme
NavController ile ileri-geri geçişleri
Lazy loading ile modül bazlı yükleme
Route guard ile erişim kontrolü

Modül 2

Servisler ve Bağımlılık

Injectable servis ile iş mantığının ayrılması
Bağımlılık enjeksiyonu ile servis sağlama
Singleton servis ve kapsam yönetimi
Paylaşılan durum için servis deseni
Yardımcı ve veri servislerinin ayrımı
Servis testinin kolaylaştırılması

Modül 3

RxJS ve Observable

Observable, subscribe ve akan veri
map, filter ve switchMap operatörleri
BehaviorSubject ile durum paylaşımı
async pipe ile şablonda abonelik
Abonelik temizliği ve bellek yönetimi
Hata yönetimi ve yeniden deneme

Modül 4

Formlar ve Doğrulama

Reactive Forms ile form grubu kurulumu
FormControl ve doğrulayıcı tanımı
Senkron ve asenkron doğrulama ve uygulamalı örnekleri
Hata mesajlarının kullanıcıya gösterimi
Ionic form bileşenleriyle entegrasyon
Gönderim ve durum yönetimi ve uygulamalı örnekleri

Günün hedefiKatılımcı HttpClient ile uzak API'den veri çeker, yerel depolamayı yönetir ve Capacitor eklentileriyle kamera, konum ve ağ durumu gibi native özelliklere erişmeyi öğrenir.

Modül 1

HttpClient ile Ağ Erişimi

HttpClient ile GET ve POST istekleri
TypeScript arayüzüyle yanıt tipleme
Observable tabanlı yanıt işleme
HTTP interceptor ile başlık ekleme
Hata yönetimi ve yeniden deneme
Ortam bazlı API adresi yapılandırması

Modül 2

Yerel Depolama ve Önbellek

Preferences eklentisiyle anahtar-değer saklama
Oturum ve kullanıcı ayarlarının tutulması
Çevrimdışı veri için önbellek stratejisi
Token ve güvenli bilgi saklama
Veri senkronizasyonu yaklaşımı
Depolama sınırlarının yönetimi

Modül 3

Capacitor ile Native API

Capacitor eklenti modeli ve kurulumu
Camera eklentisiyle fotoğraf çekme
Geolocation ile konum bilgisi alma
Network ile bağlantı durumu izleme
İzin isteme ve reddi yönetimi ve uygulamalı örnekleri
Web ve native arasında köprü mantığı

Modül 4

Cihaz Özellikleri ve Geri Bildirim

Haptics ile dokunsal geri bildirim
Toast ve bildirimle kullanıcı uyarısı
StatusBar ve SplashScreen yönetimi
Paylaşım ve dosya erişimi ve uygulamalı örnekleri
Uygulama yaşam döngüsü olayları
Platforma özel davranış ayrımı

Günün hedefiKatılımcı uygulamanın performansını iyileştirir, temel testleri yazar, Capacitor ile native projeleri üretir ve uygulamayı App Store ile Google Play için paketlemeyi öğrenir.

Modül 1

Performans Optimizasyonu

Değişiklik denetimi stratejisiyle yeniden çizim
trackBy ile liste performansının artırılması
Lazy loading ile başlangıç süresinin azaltılması
Görsel ve varlık boyutu optimizasyonu
Sanal kaydırma ile uzun listeler
Paket boyutunun analiz edilmesi

Modül 2

Test ve Hata Ayıklama

Jasmine ve Karma ile birim test
Servis ve bileşen testinin yazılması
Tarayıcı geliştirici araçlarıyla ayıklama
Cihazda uzaktan hata ayıklama ve uygulamalı örnekleri
Konsol ve ağ isteklerinin izlenmesi
Hata izleme ve raporlama yaklaşımı

Modül 3

Native Derleme ve Capacitor

Web varlığının native projeye kopyalanması
iOS projesinin Xcode ile açılması
Android projesinin Android Studio ile açılması
Eklenti senkronizasyonu ve yapılandırma
Uygulama simgesi ve açılış ekranı
Platforma özel ayarların yönetimi

Modül 4

Mağaza Yayını ve Uygulaması

Uygulama imzalama ve anahtar yönetimi
Android App Bundle ve Play Console yüklemesi
iOS archive ve App Store Connect yüklemesi
Mağaza listesi, görsel ve açıklama hazırlığı
Sürüm numaralama ve test kanalları
İnceleme süreci ve yayın takibi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Ionic arayüzü

Ionic'in hazır bileşen kütüphanesiyle platforma uyum sağlayan, tema destekli mobil arayüzler kurabilirsiniz.

✅

Angular mimarisi

Bileşen, servis ve bağımlılık enjeksiyonuyla düzenli, bakımı kolay bir Angular uygulama mimarisi kurarsınız.

✅

Yönlendirme

Angular Router ve Ionic gezinmesiyle sayfalar arası akışı, lazy loading ve erişim kontrolünü yönetebilirsiniz.

✅

RxJS ve durum

RxJS Observable ve operatörleriyle veri akışını yönetir, async pipe ile şablona verimli biçimde bağlarsınız.

✅

Ağ ve depolama

HttpClient ile uzak API'den veri çeker, interceptor ve yerel depolama ile ağ ve kalıcılığı yönetirsiniz.

✅

Native erişim

Capacitor eklentileriyle kamera, konum ve ağ durumu gibi cihaz yeteneklerine erişen uygulamalar geliştirirsiniz.

✅

Performans

Değişiklik denetimi, lazy loading ve liste optimizasyonuyla akıcı ve hızlı açılan uygulamalar üretebilirsiniz.

✅

Mağaza yayını

Capacitor ile native projeyi üretir, uygulamayı imzalayıp App Store ve Google Play için paketleyebilirsiniz.

Kimler İçin Uygundur?

Angular veya web geliştirme bilgisi olup mobil uygulamaya geçmek isteyen geliştiriciler
tek kod tabanıyla iki platforma üretim yapmak isteyen ekipler
çapraz platform yaklaşımını öğrenmek isteyen öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Angular veya web geliştirme bilgisi olup mobil uygulamaya geçmek isteyen geliştiriciler, tek kod tabanıyla iki platforma üretim yapmak isteyen ekipler ve çapraz platform yaklaşımını öğrenmek isteyen öğrenciler için uygundur. HTML, CSS ve TypeScript temel bilgisi beklenir.

Ionic ile gerçek native özelliklere erişilebilir mi?

Evet. Capacitor eklentileriyle kamera, konum, ağ durumu, dosya ve dokunsal geri bildirim gibi cihaz yeteneklerine erişilir. Eğitimde bu eklentilerin kurulumu, izin yönetimi ve web ile native arasındaki köprü mantığı örnek proje üzerinde uygulanır.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Tek bir Ionic uygulaması bileşenden native entegrasyona kadar katman katman geliştirilir. Yüz yüze veya online yapılabilir; içerik kurumun teknoloji yığınına göre uyarlanabilir.

iOS derlemesi için Mac gerekli mi?

Geliştirmenin büyük kısmı tarayıcıda yapılabilir ve Android derlemesi Windows veya Linux üzerinde Android Studio ile mümkündür. Ancak App Store için iOS archive üretmek macOS ve Xcode gerektirir. Eğitim her iki platformun derleme sürecini de kapsar.

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 geliştirilen örnek Ionic uygulamasını belgeler; kurumsal gruplara özel uyarlama yapılabilir.

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

ANGULAR İLE MOBİL UYGULAMA GELİŞTİRME (IONIC FRAMEWORK) EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Ionic Proje Yapısı

Ionic UI Bileşenleri

Angular Bileşen Mimarisi

Tema ve Stil ve Uygulaması

Yönlendirme ve Gezinme

Servisler ve Bağımlılık

RxJS ve Observable

Formlar ve Doğrulama

HttpClient ile Ağ Erişimi

Yerel Depolama ve Önbellek

Capacitor ile Native API

Cihaz Özellikleri ve Geri Bildirim

Performans Optimizasyonu

Test ve Hata Ayıklama

Native Derleme ve Capacitor

Mağaza Yayını ve Uygulaması

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

.Net MAUI Eğitimi

.NET MAUI Temel Kavramları Eğitimi

Advanced Features of Ionic JavaScript & CLI Eğitimi

Cross-Platform Solutions in Visual Studio Eğitimi

Exploring Ionic JavaScript Basics, Layouts, & Navigation Eğitimi

Fundamentals of the Ionic Framework Eğitimi