Apache Cordova ile Android'de yerel web uygulamaları oluşturun

jQuery Mobile veya Dojo Mobile gibi bir kullanıcı arabirimi çerçevesiyle birleştiğinde, bu, yerel biçimde ancak HTML, CSS ve Javascript'te geliştirilmiş bir uygulamaya izin verir. Bu, Apache Cordova mobil cihazımızda gömülü bir web sunucusu olarak işlev göreceğinden, bir web uygulamamız varsa onu Android için yerel bir uygulamaya dönüştürebileceğimiz anlamına gelir.
Bu Api bize mobil cihazda yerel olarak çalışacak ve Web tasarımı ve geliştirmeye dayalı olacak mobil uygulamalar oluşturma imkanı veriyor, böylece Apache Cordova ile kamera, veri gibi mobil cihazın işlevlerine Javascript aracılığıyla erişebiliyoruz. Wi-Fi veya ağ bağlantıları, klavye veya ses, konum belirleme, kendi gömülü veritabanımız ve diğer mevcut işlevler.

Bu eğitim için kullanacağız Net Fasulye 8.0.2 bununla birlikte gelir Apaçi kordonu yüklendi, ancak aynı zamanda basit bir editör de dahil olmak üzere başka herhangi bir düzenleyiciyle kullanabilmek için sıfırdan nasıl kurulacağını da göreceğiz. not defteri ++ veya Lüfer.
sahip olmak gereklidir Android SDK'sı, Android Cihaz Yöneticisi Y Java dili yüklenir, ayrıca yürütülebilir dosyaları sistem değişkenlerine işaret eder.
Başlamak için yüklememiz gerekir düğüm.js, o istemci dili olarak javascript kullanan bir sunucu oluşturmanıza izin veren bir çerçevedir. ve Cordova, Node.js'nin bir parçası olan NPM adlı paket yöneticisi kullanılarak kurulur.
Kurulum önce Linux üzerinde yapılacak, terminale root modunda erişip dosyayı indireceğiz. düğüm.js aşağıdaki komutla:

wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Açın ve başka bir dizine kopyalayın

sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz

İlgili paketleri kuruyoruz

 ls -l / usr / yerel / bin / düğüm ls -l / usr / yerel / bin / npm 

Ardından Apache Cordova yükleyicisine geçiyoruz

sudo npm kurulum -g cordova

Doğru kurulduğunu doğrulamak için terminale yazabiliriz. kordova -v ve kurulu Apache Cordova sürümünü döndürür.
Kurulumdan sonra Cordova ile uygulamalar oluşturabiliyoruz, bir uygulama oluşturmak için elimizdeki bir proje dizinine gidiyoruz ve ardından terminalden önerilen komutları yazıyoruz:
Komut yapısı şöyle olacaktır:

cordova proje dizini component.package.class oluşturun

örneğin uygulamamız şöyle olacaktır:

cordova misapp com.tutoriales.misapp MiApp01 oluşturun

Bu, projenin yapısını oluşturacak ve uygulamamızda kullanacağımız tüm gerekli ve güncel paketleri indirecektir.

cordova android taklit

Dizinin nasıl oluşturulduğunu görebiliriz yanlış uygulama, uygulamanın yapısı içinde ve orada aşağıdaki içeriği bulabiliriz.
klasörde platformlar Cordova'nın farklı cihazlarla etkileşime girebilmesi için gerekli dosyaları içerir, burada uygulamamızı test etmek istediğimiz platformları ekleyeceğiz.
Android platformunu kullanmak için aşağıdaki komutu uygulayacağımız terminalden örnek

cordova platformu android ekle

Sonuç:

 # / projeler / misapp / www $ cordova platform add android Android projesi oluşturuluyor… Android platformu için Cordova projesi oluşturuluyor: Yol: platformlar / android Paket: com.tutoriales.misapp İsim: MiApp01 Android hedefi: android-19 Şablon dosyaları kopyalanıyor… Proje başarıyla oluşturuldu. 

Bu, aşağıdakiler için geçerli bir öykünücü yapılandıracaktır: Androd sürüm 19 o ne API sürümü 19 veya ayrıca Android 4.4 (KITKAT) yani bu veya daha düşük sürümü çalıştıran herhangi bir cihazı taklit edebiliriz. Desteklenen bazı platformlar şunlardır: Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, Bu eğitimde Android'e odaklanacağız.
adres defterinde www Uygulamanın kendisinin geliştirileceği, HTML, CSS, resimler ve Javascript dosyalarının yanı sıra uygulamamız için gerekli tüm kaynakların barındırılacağı yerdir, bunun bir sunucu içinde yerel olarak çalışacak bir web sayfası olduğunu unutmayın ve ayrıca Android'de yerel bir uygulama olarak çalışacak gömülü bir web tarayıcısı.
Projemizi dizinde oluşturduğumuzda www, genel bir proje yapısı oluşturulacak " tipi basit bir uygulamayı çalıştırmak için gerekli kodla tanımlanmışSelam Dünya“Bu nedenle, programlamadan önce çalıştığını test etmek için yürütülebilir bir uygulamanın bir örneğine veya şablonuna sahibiz, ancak onu çalıştırmak için önce platformu veya platformları eklemeliyiz, örneğin Android ve iOS cihazlarında test etmek istiyorsak, aşağıdaki komutu kullanın:
Android için

cordova Android'i inşa ediyor

ios için

cordova inşa iOS

Komutu uygulama dizini içinde çalıştırdığımızda, bunun derlenecek uygulama olduğunu bilecektir. Bir kez dizine derlendi platformlar / platformlar / android / ant-build / bizim için dosyalar üretecek.

CordovaApp-debug.apk

Hangi herhangi bir Android cihazda kurulabilir ve yürütülebilir apk dosyası olacaktır. Çalıştırmak için uygulama dizininin tam erişim izinlerine sahip olması gerekir. Şimdi bunun için terminalde yazdığımız emulator ile ilk defa çalıştıracağız.

cordova android taklit

Uygulamayı gösteren jenerik bir cihaz görebiliriz, üzerine tıklıyoruz ve varsayılan Apache uygulamasını görebiliriz.
Artık www dizininde bulunan index.html dosyasını düzenleyerek uygulamamızı oluşturmaya başlayabiliriz. Kod basittir, meta cihazın türünü algılar, görünüm pencereleri içeriği cihazın çözünürlüğüne ve ekran boyutuna uyarlar.
Kodun geri kalanı HTML5'tir, cordoba.js dosyası sunucu yapılandırmasına sahip olacak ve index.js dosyası, komut dosyalarımızı uygulamaya etkileşim verecek şekilde programlayacağımız yer olacaktır.

 Miapp01
Cihaza Bağlanma
Cihaz Hazır
Test etmek için Html5 ve CSS3 ile bazı değişiklikler yapalım ve başka bir cihazı da test edelim Uygulama katmanında iki alanlı bir form oluşturalımİsim:
E-posta:
index.css dosyasının içindeki css klasörünü arıyoruz ve butona stil vermek için aşağıdaki kodu ekleyeceğiz .btn {background: # 3498db; arka plan görüntüsü: -webkit-doğrusal-gradyan (üst, # 3498db, # 2980b9); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, # 3498db, # 2980b9); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, # 3498db, # 2980b9); arka plan görüntüsü: -o-doğrusal-gradyan (üst, # 3498db, # 2980b9); arka plan görüntüsü: doğrusal gradyan (alta doğru, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-sınır-yarıçapı: 28; sınır yarıçapı: 28 piksel; yazı tipi ailesi: Arial; renk: #ffffff; yazı tipi boyutu: 20 piksel; dolgu: 10px 20px 10px 20px; metin-dekorasyon: yok; } .btn: üzerine gelin {arka plan: # 3cb0fd; arka plan görüntüsü: -webkit-doğrusal-gradyan (üst, # 3cb0fd, # 3498db); arka plan görüntüsü: -moz-doğrusal-gradyan (üst, # 3cb0fd, # 3498db); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, # 3cb0fd, # 3498db); arka plan görüntüsü: -o-doğrusal-gradyan (üst, # 3cb0fd, # 3498db); arka plan görüntüsü: doğrusal gradyan (aşağıya, # 3cb0fd, # 3498db); metin-dekorasyon: yok; } 

Değişiklikleri yaptıktan sonra dosyaları kaydedip cordova emulate android komutu ile tekrar çalıştırıyoruz, daha önce Android Cihaz Yöneticisinde başka bir cihaz yapılandırdık.

BÜYÜT

Sonunda, değişikliklerimizi çalıştırdık, başka bir öğreticide, çeşitli uygulamaları daha karmaşık bir şekilde nasıl yapacağımızı göreceğiz.
Şimdiye kadar nasıl uygulama oluşturulacağını görüyoruz. HTML5, CSS3 ve Javascript veya jquery mobil Android'i destekleyen bir cep telefonu veya TV olup olmadığına bakılmaksızın farklı mobil cihazlar için. Akılda tutulması gereken çok önemli bir husus, tüm tasarımın uyarlanabilir veya duyarlı olarak düşünülmesi gerektiğidir.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.