uygulama not alma ve liste yapma uygulaması

Gerekli yüklemeler

• npm install firebase @angular/fire --save

• npm install @ionic/storage --save

ana sayfada liste için firebase kullanıldı

Notepad için ise ionic storage kullanıldı

Toplam üç sayfa var uygulamada

açılan ilk sayfa liste yapmak için kullanılıyor

ikinci sayfa not almak için

üçüncü sayfa alınan notların detayları için

uygulamada kullanılan komponentler

• checkbox
• button
• icons
• toggle(uygulamayı dark moda geçirmek için kullanıldı)
• tarih için JavaScript Date () işlevi çağırıldı
• card
• reorder
• routing
• input
• alert
• content
• list
• toolbar
• item

Liste için olan sayfa:

home

Notepad için olan sayfalar:

home2 (notların listesi) bu sayfaya ilk sayfadaki NOTPAD butonuna basılarak gidiliyor

Detail (belirli bir notun ayrıntıları)

Yapılan işlevler

• Not oluşturma, silme ve düzenleme
• Bu notları depodan kaydetme ve yükleme bunun için ionic storage kullanıldı
• Notların bir listesini görüntüleme
• Not ayrıntılarını görüntüleme yapıldı

Servis sağlayıcıdan yararlanıldı not oluşturma, güncelleme ve silme mantığının çoğunu işlemekten sorumlu olacak.

ionic g service services/Notes komutu ile servis oluşturuldu.

Routing işlemleri:

notes/:id iki nokta üst üste ile ön eklenmiş yola: id ekleyerek daha sonra yakalayabileceğimiz parametreleri kabul edecek bir yol oluşturdum.

Bu, bir kullanıcı aşağıdaki URL'ye giderse anlamına gelir:

http://localhost:8100/notes

Burdaki id, farklı notların farklı urlleri olması sağlandı. id değerini alabileceğiz. Bu özelliği, daha sonra kullanıcıya uygun notu görüntülemek için kullandım.

Not için interface oluşturuldu notun string,title,content gibi özellikleri var.

Servis oluşturuldu ve görevleri

• Bir not oluşturma ve bunu diziye ekleme
• Bu diziden notları silme
• id'ye göre belirli bir notu bulma ve döndürme
• Not arrayini depoya kaydetme
• Not arrayini depodan yükleme

Ana sayfa genel görünüm

checkbox

silme işlemi

reorder işlemi

liste elemanı ekleme işlemi

elemanın eklenmiş hali

Notepad genel görünüm

Başlık belirleme

Note detay sayfası(eklenen başlığın içeriğinin yazıldığı yer)

Dark mode