PhoneGap'te Temel Android Uygulaması Nasıl Oluşturulur

Çoğu insan için, bir Android uygulaması oluşturma fikri dağ tırmanışı kadar zorludur. Kullanıcılar, uygulamaları geliştirmek için Android SDK'yı nasıl kodlayacağımızı ve kullanacaklarını öğreniyor ve ortalama bir kullanıcı, özellikle de çevrimiçi bir işletme sahibi, bu tür zamanlara sahip olmayabilir.

Neyse ki, yerel bir uygulama oluşturmanın aksine, karma bir uygulama olarak adlandırılan şeyi oluşturmanın basit bir kısayolu var . Bir hibrid uygulaması temel olarak Android uygulamasının uygulamanızı sunmak için hibrid uygulamanızın kamera, mesajlaşma servisi ve Android sisteminin diğer yönlerine erişmesini sağlayan eklentilerle uygulamanızı sunmak için WebView'da yerleşik olarak kullanılır. Hibrit bir uygulama, birden çok işletim sistemi için kolayca oluşturulabilir, çünkü çoğunlukla Java, HTML5 ve CSS'yi çalıştırmak için kullanırlar.

Bu kılavuz, popüler uygulama platformu PhoneGap'i kullanarak bir hibrid uygulaması oluşturmayı öğ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 WebView tarayıcısında açacak, ancak tam ekranlı bir uygulama olarak görünecek - URL gezinme çubuğu veya web sitenizin bir tarayıcıda sunulmakta olduğu diğer ipuçları.

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 simgelerini oluşturmak için fotoğraf düzenleme yazılımı (Photoshop, GIMP, vb.)

Kodlama Şablonları

Bunlar, bu kılavuzun amacı için kullanabileceğiniz kod şablonlarıdır - bunlar, PhoneGap ile geliştirilen kendi uygulamamdan gelir, ancak kişisel bilgilerimi çıkardım. Bunları sıfırdan başlayarak tüm doğru parametrelerle ayarlamak birçok güne kadar sorun gidermeye neden oldu, bu yüzden size kolaylık sağlamak için veriyorum. Rica ederim!

> config.xml
> index.html

Başlamak

Masaüstünüzde bir klasör oluşturun ve www olarak adlandırın: tırnak işaretleri olmadan. Bu, projenin ana dizini olacak ve PhoneGap kurucusunun projeniz için tüm dosyaları bulması bekleniyor. Ş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 görüntü oluşturun. Resim 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ştirmek istiyorsanız, elbette aynı simgenin birden çok boyutunu yapacaksınız. Burada 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 (640 dpi / XXXHDPI)

Ekran boyutları ve DPI hakkında çok uzun zamandır konuşmak istemiyorum, sadece DPI'nın ekran çözünürlüğü ile hemen hemen aynı olduğunu biliyoruz. 1080 × 1920 ekran çözünürlüğünü kullanan bir telefon 480dpi kullanır, ancak bu mutlaka ekran boyutuyla tam olarak aynı değildir. Bir telefon 5.2 ekrana veya 6 ekrana sahip olabilir ve 1080 × 1920 çözünürlüğe sahip olabilir. Ancak bu kılavuz akıllı telefon ekranlarıyla ilgili değil, hadi devam edelim.

Simgenizi çizdikten sonra, icon.png olarak kaydedin ve www: klasörünüzün içine taşıyın. Bu, uygulamanızın varsayılan simgesi haline gelecektir. Kullanıcının ekran çözünürlüğü ile eşleşecek farklı boyutlarda simgeler oluşturmak isterseniz, simgeyi farklı boyutlarda ve adlarda kaydedebilirsiniz, örneğin Icon144.png, Icon192.png, Icon96.png vb. Sonra her bir simgeye işaret etmek için Config.xml dosyasını düzenlersiniz. Hadi devam edelim.

Artık uygulamanız için bir simgeye sahip olduğunuza göre, bir açılış resmine ihtiyacınız var. Bu, uygulamanız yüklenmeden önce görüntülenen bir duvar kağıdı gibi temelde yükleme ekranıdır. Splash görüntü boyutları simgelerle aynı prensipte çalışır, ancak biraz daha büyüktür. İşte masa:

• LDPI:
  • Portre: 200x320 piksel
  • Manzara: 320x200px
• MDPI:
  • Portre: 320x480px
  • Manzara: 480x320 piksel
• HDPI:
  • Portre: 480x800 piksel
  • Manzara: 800x480 piksel
• xhdpi:
  • Portre: 720px1280px
  • Manzara: 1280x720px
• XXHDPI:
  • Portre: 960px1600px
  • Manzara: 1600x960px
• XXXHDPI:
  • Portre: 1280px1920px
  • Manzara: 1920x1280px

Bu nedenle, cihazınızın çözünürlüğündeki açılış resminizi oluşturun, Splash.png olarak kaydedin ve ardından projenizin klasörünün içine taşıyın. Harika, şimdi uygulamanızın simge ve splash resminiz var, config ve index dosyalarınızı kurmaya devam edelim.

Index.HTML ve Config.XML Açıklandı

Config.xml dosyası, uygulama ortamını (Android, iPhone, Windows Phone), simge ve sıçrama konumlarını ve uygulamanızda kullanmak istediğiniz Apache Cordova eklentilerini ayarlayan şeydir.

Notepad ++ içinde sağladığım şablonu açın ve bu satırları en üste yakın göreceksiniz:

Bu alanları bilginizle güncelleyin, ancak tercih alanlarını tek başına bırakın. Sadece değerlere bakarsanız, yapılandırma dosyasının geri kalanı kendinden açıklayıcıdır. Tercih adı = tam ekran örneğin, uygulamanın bir tam ekran uygulaması olarak başlatılmasını söyler. Dosyanın en altındaki bu son değer hariç, her şeyi yalnız bırakın:

Gerçek web sitenizin URL'sine değiştirin. Bu, uygulama kullanıcısının web sitenizde ve yalnızca web sitenizde tamamen gezinmesine izin verir - uygulamanızı kullanırken web sitenizi bırakamazlar. Tabii ki uygulama bir URL gezinme çubuğuna sahip olmayacak, bu gerçekten bir endişe değil, aynı zamanda kullanıcının web sitenizdeki tüm sayfalara erişebilmesini sağlıyor. * Web sitesi URL'sinden sonra, kodlama jargonunda, * işaretinin yerine girilen her şeyi kabul edeceği anlamına gelen bir joker karakterdir .

Elbette, kullanıcıyı web sitenizdeki belirli sayfalarla sınırlamak isterseniz, aşağıdaki gibi ayrı değerler ekleyebilirsiniz:

Index.html dosyasına geçelim, bu uygulama aslında işe yarayan ekmek ve tereyağı. Notepad ++ içinde açın ve belge dilini HTML'ye değiştirin. Index.html temel olarak, Android tarayıcısına web sitenizi nasıl görüntüleyeceğini bildirir. Sağladığım şablonda, URL gezinme çubuğunu tarayıcıdan kaldırmak için etiketler vardır, telefonun geri düğmesi uygulamasından çıkmasına izin verir ve uygulamayı başlatır açılış ekranı görüntülendikten sonra. Değiştirmek istediğiniz çizgi burada:

var url = 'http://yourwebsite.com'

Uygulamayı PhoneGap Build'da Oluşturma

Yani GitHub hesabınıza giriş yapın ve deponuzun ana sayfasına gidin. Depo adı altında Dosyaları Yükle'yi tıklayın ve proje klasörünüzü dosya ağacı ekranına sürükleyin. Şimdi ilk uygulama denemem gibi altta bir taahhüt mesajı yazın. Son olarak Değişiklikleri Taahhüt'ü tıklayın.

Şimdi PhoneGap Build sayfasına gidin ve giriş yapın. Şimdi derleme sayfasındaki Yeni Uygulama düğmesini tıklayın. Bu, GitHub deponuzun yolunu girmenizi isteyecektir, bunu yapın ve ardından .git'ten başlayarak Çek'e basın.

Şimdi ana yapı sayfasına geri dönün, Kodu güncelle ve En son çekin'i tıklayın.

Son olarak Oluştur'u tıklayın. Uygulamanızı bir .apk dosyasına derler ve daha sonra .apk indirme seçeneğini sunar. Ş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 basit melez uygulamaların oluşturulmasında size yol gösteren son derece basitleştirilmiş bir kılavuz oldu. Kullanıcılar genellikle web sitelerini yerel bir tarayıcıda sarmalamaya ve Google Play Store'da bir Android uygulaması olarak aktarmaya gitmez. Ancak şimdi bunu nasıl yapacağınızı biliyorsunuz, uygulamanızı nasıl özelleştireceğiniz ve ona çok fazla lezzet katacak olan PhoneGap belgelerini okumaya başlayabilirsiniz, böylece gerçekten yararlı bir uygulama yaratabilirsiniz.
• İkincisi, Google Play, yalnızca gelir amacı için bağlantı şeması uygulamaları oluşturmak için bu tür bir uygulama oluşturma yöntemini yasaklar. Yani bugün Kazanç Para denilen bir uygulama oluşturamazsınız! Reklam gelirlerinde kesinlikle reklam ve banka dolu bir web sitesi açar. Google Play mağazasından yasaklanacaksınız.

PRO TIP: Sorun bilgisayarınız veya dizüstü bilgisayar / dizüstü bilgisayar ile yapılmışsa, depoları tarayabilen ve bozuk ve eksik dosyaları değiştirebilen Reimage Plus Yazılımı'nı kullanmayı denemeniz gerekir. Bu, çoğu durumda, sorunun sistem bozulmasından kaynaklandığı yerlerde çalışır. Reimage Plus'ı tıklayarak buraya tıklayarak indirebilirsiniz.