Javascript ile LocalStorage'a veri yazma, okuma, silme ....

[beab05]

Mesela LiveServer eklentisiyle direkt sizin yukarıda verdiğiniz tek dosya olan html dosyasındaki geliştirmelerinizi canlı olarak izleyebilirsiniz.

 

[Zeki Gürsoy]

Son kullanıcının #13 nolu mesajdaki görsele ulaşabilmesi için nasıl çalıştırması gerekiyor?

.

 

[Haluk]

Son kullanıcının #13 nolu mesajdaki görsele ulaşabilmesi için nasıl çalıştırması gerekiyor?

.

Benim de demek istediğimi en yalın haliyle sordu Zeki Bey ....

.

 

[Haluk]

Bu arada "Live Server" eklentisini kurdum ama, sizin ekran görüntüsündeki gibi görüntü elde etmek için ekranı bölmem falan mı gerekiyor?

.

 

[beab05]

Son kullanıcının #13 nolu mesajdaki görsele ulaşabilmesi için nasıl çalıştırması gerekiyor?

.

Selam dostum ;

https://create-react-app.dev/docs/getting-started

Aslında yukarıdaki linki vermem gerekiyordu.

Yukarıdaki adrese göre;

npx create-react-app my-app
cd my-app
npm start

ile bir React projesi oluşturuyoruz. VSCode üstünde terminale direkt bunu yazınız. Terminali göremiyorsanız. View menüsünden terminali seçin ya da ctrl + " ya basın.

my-app proje isminiz oluyor. İlk oluşturma uzun sürecektir. 5 dk falan .. Siz yukarıdaki satırları tek tek terminale girin bence.

Hepsi bitince projenizde package.json göreceksiniz.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

bu kısımda kısa kodları görebilirsiniz. yani yukarıda yazan npm start aslında react-scripts start" ı çalıştırıyor.

Proje oluştuktan sonra benim kaynak kodu diye verdiğim kodları oluşan projenin üstüne ekleyin yani eskisinin yerine.. İster dosya olarak isterseniz açıp kodları.

ve npm start ile çalıştırın. Canlı değişklikler de uygulanacaktır. Yani anlık değişikliklerinizi görebilirsiniz. npm build derseniz son kullanıcı için ya da site yayınlanmaya hazır hale getirir. Buildden sonra oluşan chunk js dosyalarına bakın

İsterseniz benim verdiklerimi eklemeden çalışıtrın ve kendi örnek sayfasını görün. Dönen bir React .svg dosyası çıkacaktır.

İpucu: File menusunde "Auto Save" i bence işaretleyin çok iyi oluyor.

 

[beab05]

Bu arada "Live Server" eklentisini kurdum ama, sizin ekran görüntüsündeki gibi görüntü elde etmek için ekranı bölmem falan mı gerekiyor?

.

Evet ben böldüm yani pencereleri küçülterek yaptım ama çok emin olmamakla birlikte direkt vscode içinde browserı gösteren eklentilerde vardı sanki

 

[Haluk]

............ çok emin olmamakla birlikte direkt vscode içinde browserı gösteren eklentilerde vardı sanki

Aşağıdaki linkte belirtilen, MS'in kendi eklentisini kurdum. VSCode editörün içinde bir pencerede dosyayı görüntüleyebiliyorsunuz, değişiklikleri esas dosyaya kaydetmeden izleyebiliyorsunuz. Sanal sunucu falan oluşturmadan çalışıyor.


Microsoft Edge DevTools extension for Visual Studio Code - Microsoft Edge Developer documentation | Microsoft Learn

.

 

[beab05]

ooo super valla.. Elinize sağlık... Bakalım bizi nasıl projeler bekliyor?

 

[Haluk]

Tekrar merhaba;

"IndexedDB" ile ilgili çalışmada bir ilave yaptım...... Bildiğiniz gibi, IndexedDB içinde saklanan kayıtların, tarayıcının geliştirici sekmesi veya herhangibir yerden manuel olarak dışarı aktarılması mümkün değil...... en azından ben öyle biliyorum.

Daha önce yaptığım çalışmaya ek olarak bu kez, girilen kayıtların JSON dosyası olarak dışarı aktarılması ve istenirse içeri aktarılmasını sağladım. Bu işleri yapmak üzere HTML sayfasında "Export DB" ve "Import DB" butonlarını yerleştirdim. Böylelikle, yerel bir bilgisayarda hazırlanan veritabanı dışarı aktarıldıldıktan sonra taşınabilir hale gelmiş ve başka bir bilgisayara da aktarılması sağlanmış olacaktır.

Ekli "rar" dosyasında revize edilmiş HTML dosyası ile 2 adet örnek veritabanı dosyası (JSon) ekledim. Birinde 13 adet, öbüründe 3 adet kayıt var.

Uygulamanın geliştirilmesi ve testler MS Edge tarayıcısı ile yapılmış olup, başka tarayıcılarda denenmemiştir. Bazı özellikleri muhtemelen Safari, Safari IOS vb tarayıcılarda sorun çıkartabilir. HTML'nin kaynak sayfasında, kodlarla ilgili kısa bilgiler de yer almaktadır.


.

 

[halily]

@Haluk hocam çalışmanızı harici bir siteye yüklemeniz mümkün mü?

 

[Haluk]

@haliliyas ;

Aşağıdaki harici linkten indirebilirsiniz...

Secure File Sharing - Filemail

Share files of any size, any format, any type, securely

www.filemail.com

.

 

[halily]

çok teşekkürler @Haluk hocam)

 

[Haluk]

Halil bey, HTML dosyasını denediniz mi? Merak ettim ....

.

 

[halily]

hocam şimdiye kadar hiç bu tarz bir şeyle uğraşmamıştım o nedenle tam olarak neler yapmam gerektiğini bilemedim.
sadece kodları incelemek için indirmiştim. tüm işlemler sorunsuz bir şekilde çalıştı
Teşekkür ederim

 

[Haluk]

Anladım .... en azından yeni birşeyler öğrenmeye, geliştirmeye açıksınız. O da iyi birşey.....

Örnek HTML dosyasında zaten yapmanız gereken bir şey yok..... herşey, sayfayı sağ tıkladığınızda gördüğünüz kodlar tarafından yapılmakta. Her türlü işletim sisteminde; Windows, Mac OS ve lokal bilgisayar veya server (sunucu) üzerinde çalışır. Zaten, işin güzelliği de burada....

.

 

[halily]

yakın zamanda C# başladım hocam, gerçi hala konsolun ilerisine geçemedim ama yavaş yavaş ilerletmeye çalışıyorum. kendimi biraz geliştirdikten sonra veri tabanlarıyla ilgili çalışmalar yapmayı düşünüyorum. o zaman işime yarayabilir diye arşivlemek için istemiştim.

 

[Haluk]

Çok isabetli karar vermişsiniz..... Benim gençliğimde bu programlama dilleri ve internet olsaydı, VBA ile falan uğraşmazdım..... Bizim zamanımızda Fortran IV, Cobol, Pascal falan vardı....

C# ile ilgilenemedim ama, günümüzde C+, C++'ın daha ötesinde.... Zaten "Excel" in ilk versiyonları da "C+" ile üretilmiş bir yazılım.

"Google Sheets" bile, bana göre en "baba" Excel versiyonu kadar iyidir, en azından ücretsiz..... JavaScript benzeri "GAS" - "Google Application Script" ile hayal ettiğiniz hemen herşeyi yapabiliyorsunuz.....

.

 

[halily]

bilgilendirme ve yönlendirme teşekkürler @Haluk hocam

 

[Necdet]

Çok isabetli karar vermişsiniz..... Benim gençliğimde bu programlama dilleri ve internet olsaydı, VBA ile falan uğraşmazdım..... Bizim zamanımızda Fortran IV, Cobol, Pascal falan vardı....

C# ile ilgilenemedim ama, günümüzde C+, C++'ın daha ötesinde.... Zaten "Excel" in ilk versiyonları da "C+" ile üretilmiş bir yazılım.

"Google Sheets" bile, bana göre en "baba" Excel versiyonu kadar iyidir, en azından ücretsiz..... JavaScript benzeri "GAS" - "Google Application Script" ile hayal ettiğiniz hemen herşeyi yapabiliyorsunuz.....

.

Biz de ekmeğimizi Cobol ile kazanmıştık, hey gidi günler heyy

 

[Haluk]

Fazla yüksek sesle söyleme..... yaşımız ortaya çıkacak


.