Bu kılavuz, popüler uygulama geliştirme platformu PhoneGap kullanarak hibrit bir uygulamanın nasıl oluşturulacağını öğretecektir. Yapacağımız şey, web sitenizi herhangi bir Android telefona yüklenebilen yüklenebilir bir .apk (Android uygulaması) dosyasına dönüştürmektir. Uygulama başlatıldığında, web sitenizi Android’in yerel Web Görünümü tarayıcısında açacak, ancak tam ekran bir uygulama olarak görünecektir - URL gezinme çubuğu veya web sitenizin yalnızca bir tarayıcıda sunulduğuna dair başka hiçbir ipucu yok.
Gereksinimler
Kendi web siteniz (bu kılavuzu takip etmek için, ücretsiz bir WordPress blogu başlatabilirsiniz)
GitHub hesabı
PhoneGap hesabı
Notepad ++ (veya kodu tanıyabilen benzer bir metin düzenleme yazılımı)
Uygulama simgeleri (Photoshop, GIMP, vb.) Oluşturmak için fotoğraf düzenleme yazılımı
Kodlama Şablonları
Bunlar, bu kılavuz için kullanabileceğiniz kod şablonları - PhoneGap ile geliştirdiğim kendi uygulamamdan geliyorlar, ancak onları kişisel bilgilerimden çıkardım. Bunları tüm doğru parametrelerle sıfırdan ayarlamak, günlerce sorun giderme işlemimi aldı, bu yüzden bunları size kolaylık sağlamak için sağlıyorum. Rica ederim!
> Config.XML
> Index.HTML
Başlangıç
Masaüstünüzde bir klasör oluşturun ve ' www: ' tırnak işaretleri olmadan. Bu, PhoneGap oluşturucunun projeniz için tüm dosyaları bulmayı bekleyeceği projenin ana dizini olacaktır. Şimdi uygulamanız için bir simge oluşturacağız.
Fotoğraf düzenleme yazılımınızı açın ve .PNG formatında yeni bir resim oluşturun. Görüntü ayarlarınız şöyle görünmelidir:
Ve şimdi simgenizi çizebilirsiniz, örneğin sadece küçük bir düğme yapacağım:
Görüntünün boyutu kişisel telefon ekranınıza bağlıdır, ancak birden fazla cihaz için bir uygulama geliştirmeyi düşünüyorsanız, elbette aynı simgeden birden çok boyut yapacaksınız. İşte kullanılan görüntü boyutlarının bir tablosu:
36 × 36 (120dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
Uzun süre ekran boyutları ve DPI hakkında konuşmak istemiyorum, sadece DPI'nın ekran çözünürlüğü ile hemen hemen ilişkili olduğunu bilin. 1080 × 1920 ekran çözünürlüğü kullanan bir telefon 480dpi kullanır, ancak bu zorunlu olarak tam olarak ekran boyutuyla ilişkilendirin. Bir telefon 5,2 ”veya 6” ekrana ve 1080 × 1920 çözünürlüğe sahip olabilir. Ancak bu kılavuz akıllı telefon ekranlarıyla ilgili değil, o yüzden devam edelim.
Simgenizi çizdikten sonra farklı kaydedin icon.png ve www: klasörünüzün içine taşıyın. Bu olacak varsayılan uygulamanız için simge. Kullanıcının ekran çözünürlüğüyle eşleşen farklı boyutlarda simgeler oluşturmak istiyorsanız, simgeyi farklı boyutlarda ve adlarda kaydedersiniz, örneğin Icon144.png, Icon192.png, Icon96.png vb. Sonra düzenlerdiniz Config.xml dosya her bir simgeye işaret eder. Hadi devam edelim.
Artık uygulamanız için bir simgeniz olduğuna göre, bir açılış resmine ihtiyacınız var. Bu, temelde, uygulamanız yüklenmeden önce görüntülenen bir duvar kağıdı gibi bir yükleme ekranıdır. Açılış görüntü boyutları, simgelerle aynı prensipte çalışır, ancak biraz daha büyüktür. İşte tablo:
- LDPI:
- Vesika: 200x320px
- Manzara: 320x200 piksel
- MDPI:
- Vesika: 320x480 piksel
- Manzara: 480x320px
- HDPI:
- Vesika: 480x800px
- Manzara: 800x480px
- XHDPI:
- Vesika: 720px1280px
- Manzara: 1280x720px
- XXHDPI:
- Vesika: 960px1600px
- Manzara: 1600x960px
- XXXHDPI:
- Vesika: 1280px1920px
- Manzara: 1920x1280 piksel
Bu nedenle, açılış resminizi cihazınız için çözünürlükte oluşturun, farklı kaydedin. Splash.png ve sonra projenizin klasörüne taşıyın. Harika, artık uygulamanızın simgesi ve açılış resmi var, şimdi yapılandırma ve dizin dosyalarınızı ayarlamaya geçelim.
Index.HTML ve Config.XML Açıklaması
Config.xml dosyası, uygulama ortamını (Android, iPhone, Windows Phone), simge ve açılış konumlarını ve uygulamanızda kullanmak istediğiniz Apache Cordova eklentilerini belirleyen şeydir.
Notepad ++ ile sağladığım şablonu açın ve şu satırları en üstte göreceksiniz:
Bu alanları kendi bilgilerinizle güncelleyin, ancak 'tercih' alanlarını boş bırakın. Yapılandırma dosyasının geri kalanı, sadece değerlere bakarsanız kendi kendini açıklayıcıdır. Örneğin, tercih adı = 'tam ekran', uygulamaya kendisini tam ekran uygulaması olarak başlatmasını söyler. Dosyanın altındaki bu son değer dışında her şeyi yalnız bırakın:
Bunu gerçek web sitesi URL'nizle değiştirin. Bu, uygulama kullanıcısının web sitenizde tamamen gezinmesine ve yalnızca web sitenizde gezinmesine olanak tanır - uygulamanızı kullanırken web sitenizden ayrılamazlar. Elbette uygulamanın bir URL gezinme çubuğu olmayacak, bu gerçekten bir endişe bile değil, aynı zamanda kullanıcının web sitenizdeki tüm sayfalara erişebilmesini de sağlıyor. Web sitesi URL'sinden sonraki * bir joker karakter , kodlama jargonunda * işareti yerine girilen her şeyi kabul edeceği anlamına gelir.
Elbette, kullanıcıyı web sitenizdeki yalnızca belirli sayfalarla sınırlamak istiyorsanız, aşağıdaki gibi ayrı değerler eklemelisiniz:
Devam edelim Index.html dosya, bu, uygulamanın gerçekten çalışmasını sağlamanın temel unsurudur. Notepad ++ içinde açın ve belge dilini HTML olarak değiştirin. İndex.html'nin temelde yaptığı şey, Android tarayıcısına web sitenizi nasıl görüntüleyeceğini söylemektir - sağladığım şablonda, URL gezinme çubuğunu tarayıcıdan kaldıracak, telefonun 'geri' düğmesinin uygulamadan çıkmasına izin verecek etiketler var ve açılış ekranı görüntülendikten sonra uygulama. Değiştirmek isteyeceğiniz satır burada:
var url = 'http://websiteniz.com'
PhoneGap Build'te Uygulamayı Oluşturma
Bu yüzden GitHub hesabınıza giriş yapın ve deponuzun ana sayfasına gidin. Depo adı altında, “Dosyaları Yükle” ye tıklayın ve proje klasörünüzü dosya ağacı ekranına sürükleyin. Şimdi, alt kısma ' ilk uygulama denemem ” . Son olarak Değişiklikleri Kaydet'i tıklayın.
Şimdi gidin PhoneGap Oluşturma sayfasına gidin ve oturum açın. Şimdi yapı sayfasındaki 'Yeni Uygulama' düğmesini tıklayın. Bu sizden GitHub deponuzun yolunu girmenizi isteyecektir, öyle yapın ve ardından “.git deposundan çek” seçeneğine tıklayın.
Şimdi ana yapı sayfasına geri dönün, 'Kodu güncelle' ve 'En yenisini çek' i tıklayın.
Son olarak, 'Oluştur' u tıklayın. Uygulamanızı bir .apk dosyası olarak derleyecek ve ardından size .apk dosyasını indirme seçeneği sunacaktır. Şimdi bu .apk dosyasını bilgisayarınıza indirebilir ve telefonunuza aktarabilir, ardından oradan yükleyebilirsiniz. Alternatif olarak, .apk dosyasını Android cihazınıza otomatik olarak yüklemek için bilgisayar ekranınızdaki QR kodunu taramak için telefonunuzu kullanabilirsiniz.
Bu kadar! Şimdi size birkaç önemli şeyi açıklamak için:
- Bu, en temel hibrit uygulamaları oluştururken size yol gösteren son derece basitleştirilmiş bir kılavuzdu. İnsanlar genellikle web sitelerini yerel bir tarayıcıda sarmaz ve bunu Google Play mağazasında bir Android uygulaması olarak geçirmezler. Ancak artık bunu nasıl yapacağınızı bildiğinize göre, uygulamanızı nasıl özelleştireceğinize dair PhoneGap belgelerini okumaya başlayabilir ve ona çok fazla lezzet katabilirsiniz, böylece gerçekten kullanışlı bir uygulama yaratabilirsiniz.
- İkinci olarak, Google Play, yalnızca gelir amacıyla bağlantı şeması uygulamaları oluşturmak için bu tür bir uygulama oluşturma yöntemini yasaklamaktadır. Yani 'Bugün Para Kazanın!' Adlı bir uygulama oluşturamazsınız. kesinlikle reklamlarla dolu bir web sitesi açar ve reklam geliri elde eder. Google Play mağazasından yasaklanacaksınız.
