Apache Cordova ve SQlite ile Android uygulamaları

HTML 5, JavaScript, CSS 3 ile yapılmış bir web sitesi, Apache Cordova kullanılarak farklı cihazlarda çalıştırılabilir. Bir mobil uygulamamız varsa ve verileri verimli ve güvenilir bir şekilde depolamak, yönetmek ve almak istiyorsak, Apache Cordova bize SQLite veritabanlarını işlemek için bir eklenti sağlar.
Android, SQLite veritabanları oluşturmak ve yönetmek için gerekli tüm araçları mimarisine zaten getiriyor, böylece veri ekleyebilir, değiştirebilir, danışabilir ve silebiliriz. Bu veritabanı yerel olacak yani uygulamanın çalıştığı cihazda tutulacaktır.
Başka bir derste Apache Cordova kurulumunu zaten açıkladık, bu derste Android'den bir Sqlite veritabanının nasıl çalıştığını anlamak için bir uygulama yapacağız.
Bu durumda Linux terminalini kullanacağız, ancak Apache Cordova çapraz platformdur. Aşağıdaki kodu kullanarak projeyi terminalden ve root modunda oluşturarak başlayacağız:

 cordova uygulama oluştur com.demo.app App01

Oluşturulduktan sonra platformu ekliyoruz, bunun yürütüleceği cihaz öykünücüyü yapılandırmaya izin veriyor, bu durumda Android olacak, terminalden aşağıdaki kodu yazıyoruz:

 cordova platformu android ekle

Android Adv yöneticisinde zaten yapılandırılmış bir cihazımız olduğunu varsayıyoruz, ancak Api 19'u destekleyen bir cihazı, yani Android 4.4.2'yi yapılandırıyoruz.

Şimdi Sqlite ile çalışabilmek için eklentiyi kuracağız, terminalden eklentiyi indirip kuracak olan aşağıdaki komutu yürüteceğiz.

 cordova eklentisi https://github.com/brodysoft/Cordova-SQLitePlugin.git ekleyin

Varsayılan uygulamanın çalıştığını test edeceğiz, bunun için terminale gidip aşağıdaki kodu yazıyoruz.

 cordova android taklit

Uygulamayı derlemeye başlayacak ve her şey çalışırsa, öykünülmüş cihazı aşağıda gösterildiği gibi görmeliyiz.

BÜYÜT

Uygulamanın çalıştığını doğruladıktan sonra örneğimizi geliştirmeye başlayacağız, index.html dosyasını açıyoruz, başlıkta aşağıdaki javascript kütüphanesini ekliyoruz

Sonra bloğu değiştiriyoruz Veri girmek için bir form ekledim

İletişim bilgileri

İsim
e-posta

gravür

Çizgiveritabanında bulunan girilen verileri göstermeye hizmet edecektir. css dizini içerisinde index.css dosyasını buluyoruz, bu dosyayı açıyoruz, içeriğini siliyoruz ve forma bir tasarım vermek için aşağıdaki stil kodunu ekliyoruz.

 html, body, h1, form, fieldset, ol, li {margin: 0; dolgu: 0; } gövde {arka plan: #ffffff; renk: # 111111; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif; dolgu: 20 piksel; } form # kişi {arka plan: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; dolgu: 20 piksel; genişlik: 400 piksel; yükseklik: 150 piksel; } form # kişi alan kümesi {border: yok; kenar boşluğu-alt: 10 piksel; } form # kişi alan kümesi: türünün son örneği {alt kenar boşluğu: 0; } form # kişi açıklaması {renk: # 384313; yazı tipi boyutu: 16 piksel; yazı tipi ağırlığı: kalın; alt dolgu: 10 piksel; } form # kişiler> alan kümesi> gösterge: önce {içerik: "Adım" sayacı (alan kümeleri) ":"; karşı artış: alan kümeleri; } form # kişiler alan kümesi alan kümesi açıklaması {renk: # 111111; yazı tipi boyutu: 13 piksel; yazı tipi ağırlığı: normal; alt dolgu: 0; } form # kişiler ol li {arka plan: # b9cf6a; arka plan: rgba (255,255,255, .3); kenarlık rengi: # e3ebc3; sınır rengi: rgba (255,255,255, .6); kenarlık stili: katı; sınır genişliği: 2 piksel; -moz-border-radius: 5px; -webkit-border-radius: 5px; satır yüksekliği: 30 piksel; liste stili: yok; dolgu: 5px 10px; kenar boşluğu-alt: 2 piksel; } form # kişiler ol ol li {arka plan: yok; sınır: yok; yüzer: sol; } form # kişi etiketi {float: left; yazı tipi boyutu: 13 piksel; genişlik: 110 piksel; } form # kişi alan kümesi alan kümesi etiketi {arka plan: yok-tekrar yok %50 kaldı; satır yüksekliği: 20 piksel; dolgu: 0 0 0 30 piksel; genişlik: otomatik; } form # kişi alan kümesi alan kümesi etiketi: üzerine gelin {imleç: işaretçi; } form # kişiler textarea {arka plan: #ffffff; sınır: yok; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; yazı tipi: italik 13px Georgia, "Times New Roman", Times, serif; anahat: yok; dolgu: 5 piksel; genişlik: 200 piksel; } form # kişi girişi: değil ([tür = gönder]): odak, form # kişiler textarea: odak {arka plan: #eaeaea; } form # kişiler düğmesi {arka plan: # 384313; sınır: yok; yüzer: sol; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-sınır-yarıçapı: 20 piksel; sınır yarıçapı: 20 piksel; renk: #ffffff; Ekran bloğu; yazı tipi: 14px Georgia, "Times New Roman", Times, serif; harf aralığı: 1 piksel; kenar boşluğu: 7px 0 0 5px; dolgu: 7px 20px; metin gölgesi: 0 1px 1px # 000000; metin dönüştürme: büyük harf; } form # kişiler düğmesi: üzerine gelin {arka plan: # 1e2506; imleç: işaretçi; }

İki dosyayı kaydettikten sonra uygulamayı tekrar çalıştırıyoruz:

 cordova android taklit

Aşağıdaki ekranı görmeliyiz:

BÜYÜT

Artık tasarım çalıştığına göre, veritabanını yönetmek için javascript kodunu yapmamız gerekecek. Bunun için js dizininde sqlitedb.js isminde bir dosya oluşturacağız ve aşağıdaki kodu ekleyerek referans vereceğiz:

sqlitedb.js dosyasının içine aşağıdaki kodu yazıyoruz:

 // Uygulamanın başlatıldığı ve aygıtla iletişim kurmaya başladığı anı bir olay olarak koyarız document.addEventListener ("deviceready", onDeviceReady, false); // formun değişken alanları var name, email; // Uygulamayı başlatıyorum, veritabanı fonksiyonunu oluşturuyorum onDeviceReady() {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Veritabanındaki her işlem tanımlanan db nesnesi ile yapılır ve işlem yöntemi ile yürütülür.Bu yöntem, tx parametresinde konvansiyonel olarak saklanan bu yürütmenin sonucunu içeren bir parametre döndürür, her işlemin parametre olarak bir işlevi vardır. bu işlemin kendisidir, örneğin veri yazma ve işlemin başarısız olması durumunda bir hata işlevi. CreateDB işlevi ve errorDB işlevi ile devam ediyoruz CreateDB function (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS kişileri (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } function errorDB (tx, err) {alert ("SQL hatası:" + err); } // function Verileri veritabanına ekle fonksiyon InsertSQL (tx) {name = document.getElementById ('name').değer; email = document.getElementById ('email').değer; tx.executeSql ('Kişilere GİR (isim, e-posta) DEĞERLER ("' + ad + '", "' + e-posta + '")'); uyarı ('Günlük eklendi'); } // veri eklemek için işlemi oluşturan fonksiyon fonksiyon record () {var db = window.openDatabase ("Ajanda", "1.0", "Ajanda", 100000); db.transaction (InsertSQL, errorDB); // db.transaction tablosundaki verileri göster (ConsultDB, errorDB); } // Kişiler tablosunun tüm kayıtlarına bakarız ve sonuç bir fonksiyonda kullanılır ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM Contact', [], ListDB, errorDB); } // ListDB işlevi, işlem parametresini ve sorgunun içeriğiyle birlikte kayıt kümesini alır, kayıt kümesini inceleriz ve her alanı çıkarırız, bir html listesi oluştururuz ve sonra bunu innerHtml aracılığıyla bir liste tanımlayıcısı olan bir div'de gösteririz. dinamik. function ListDB (tx, sonuçlar) {var len = sonuçlar.rows.length; var listeleme = ''; listeleme = listeleme.concat ("Listeleme:" + len + "kişiler"); for (var i = 0; i
'+ sonuçlar.rows.item (i) .name +' '+ sonuçlar.rows.item (i) .email); } document.getElementById ('liste').innerHTML = liste; }

Tüm koda sahip olduğumuzda, uygulamayı terminalden aşağıdaki kodla yeniden derleriz.

 cordova android taklit

Emulator uygulama ile konuşlandırıldığında Ajandamıza kayıtları eklemeye başlayacağız ve bunlar aşağıda listelenecektir, cihaz sürekli olarak girdiğimiz verileri sanal bir hafızada tutmaktadır yani veritabanı her seferinde silinmeyecektir. uygulamayı emülatörde veya gerçek bir cihazda çalıştırdığımızda, kaydettiğimiz verileri görebileceğiz.

BÜYÜT

Bu verileri yok etmek için bir sql sorgusu yapıp tabloyu ortadan kaldırıp yeniden oluşturmamız veya sadece verileri silmemiz gerekecek, bunu başka bir derste göreceğiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.