Açısal/iyonik 1.x ve wordpress ile aşamalı web uygulamaları nasıl oluşturulur
İlerici Web uygulaması terimi, hizmet çalışanları gibi bir grup teknolojiyi ve kullanıcı performansı ve orijinal gibi deneyimi web uygulamalarına getirebilecek bildirimleri ifade eder. Bu terim 2015 yılında tasarımcı Frances Berriman ve Google Chrome Alex Russell tarafından yeniden yaratıldı. PWA’nın bazı özellikleri:
Aşamalı – Her kullanıcı için çalışma, tarayıcı seçimine bakılmaksızın, çünkü temel bir prensip olarak aşamalı artışla yapılırlar.
Duyarlı – Herhangi bir form faktörüne uyum sağlayın: masaüstü, hücresel, tablet veya henüz görünmeyen form.
Bağımsız bağlantı – Servis çalışanları çevrimdışı işlere veya düşük kaliteli ağlarda izin verir.
Uygulama gibi – etkileşim ve uygulama tarzı navigasyonu olan kullanıcılar için bir uygulama gibi hissediyor.
Taze – Her zaman son zamanlarda hizmet çalışanlarını yenileme süreci sayesinde.
Güvenli – gözetim önlemek ve içeriğin hasar görmemesini sağlamak için HTTP’ler aracılığıyla sunulur.
Bulunabilir – W3C Manifest [6] ve arama motorlarının bulmasına izin veren hizmet çalışanları kaydının kapsamı sayesinde “uygulama” olarak tanımlanabilir.
Yeniden kapatılabilir, Push bildirimi gibi özelliklerle kolay yeniden düzenleme.
Kurulabilir – kullanıcıların, uygulama mağazasının güçlükleri olmadan ana ekranlarında en kullanışlı olduğunu düşündükleri uygulamaları “kaydetmelerine” izin verir.
Bağlanabilir – URL üzerinden paylaşımı kolaydır ve karmaşık kurulumlar gerektirmez.
Kısa bir süre önce, App Store’da bir uygulama olması kutsal bir fincan olarak kabul edilir. Bu güne kadar, birçok şirket hala uygulama mağazasının yayınlanmasını takip ediyor, ancak son araştırmaya göre, bugün uygulama deposundaki sayfaları ziyaret eden kullanıcıların sadece yüzde 26,4’ü uygulamayı yükleyecek. Diğer yüzde 73,6’sı geliştiriciden kaybetti ve uygulamayı bile denemedi. Bunu kuranlar arasında, önümüzdeki 90 gün içinde ortalama yüzde 80 kayboldu. Sonuç olarak, web’i yıllar önce öldüğünü belirten aynı kişi “Uygulama ölüyor” ve “Bekle! Web yanı sıra değil ölü!” Son Google I/O 2017 konferansında, PWA aracılığıyla Twitter Lite, Forbes veya WEGO gibi PWA aracılığıyla nasıl yeniden tanımlandığını gösteren birçok görüşme var. Web, JavaScript çerçevesinin son yıllarda hızla geliştiğini bilir. PWA temel olarak uygulama belirtileri ve çevrimdışı mod ve push bildirimi için hizmet çalışanları gibi birkaç ek özelliğe sahip bir JavaScript uygulamasıdır.
Bugün hücresel PWA geliştirmeyi tercih eden JavaScript çerçevesi AngularJS ve ReactJS’dir.Her ikisinin de kendi avantajları vardır.AngularJ’ler, bir dizi hazır bileşen sunan iyonik ile birleştirilebilir.React çok sezgiseldir ve kullanımı kolaydır ve geliştirme görevlerinden üretime kadar, ihtiyacınız olan her şeyi içeren bir kaynak plakası projesi olan Create-React-App’in varlığından yararlanır.Create-React-App’te “Üretim tamamen işlevsel, çevrimdışı bir ilk.” Progressive web uygulaması.Çerçeve seçimleri ne olursa olsun, ES6 bir zorunluluktur, sınıf, ok işlevleri, blokların engellenmesi, vaatlerin ve diğerleri gibi gelişmiş özellikler sunar.ES6 tüm tarayıcılar tarafından tam olarak desteklenmese de, Babel gibi transpiler mevcuttur, bu nedenle tarayıcı uyumluluğu konusunda endişelenmemize gerek yoktur.
Her PWA’nın sunucudan içerik almak için bir yangına ihtiyacı vardır. Nodejs, özel yangınları uygulamak için bir platform olarak çok popüler hale geldi, ancak CMS’yi arka uç olarak da kullanabiliriz. WordPress şu anda tüm web’in yüzde 27’sini destekliyor. 2015’in sonunda Matt Mullenweg, tüm WordPress geliştiricilerini “JavaScript’i derinlemesine öğrenmeye” teşvik etmişti. Teknoloji yığınlarındaki değişim bir ana akım haline gelmedi ve WordPress geliştiricilerinin çoğunluğu hala duyarlı temalar oluşturmak için PHP’ye güveniyor. Bir PHP geliştiricisi olarak başladığımdan beri, son yılların çekiciliğini ve ilerlemesini anladım. PHP yapılandırılmış ve öğrenmesi kolay, özellikle her şeyin hızla kontrolden çıkabileceği JavaScript ile karşılaştırıldığında. Bununla birlikte, JavaScript’in şimdi web’de olağanüstü bir kullanıcı deneyimi oluşturmak için bir çözüm olduğu yadsınamaz. WordPress ilgi alanlarım, değişimin geleceğini zaten biliyor, bu nedenle yangın dinlenmesi sürüm 4.5’ten başlayarak çekirdeğe dahil ediliyor. WordPress sitesinin yüzde 50’sinden fazlası en son CMS sürümünü kullansa da, WordPress kurulumunun yüzde 30’u 4.4 veya daha düşük sürüm ile sıkışmıştır. Bu sayı sadece gelecekte azaltılabilir ve geri kalan yangının çoğu WordPress sitesi için mevcut olduğunu güvenle söyleyebiliriz. Ayrıca, WordPress Rest API’sının güzel bir şekilde belgelendiğini ve varsayılan olarak web sitesinin alanına göre mevcut olduğunu belirtmeliyim. Daha sonra, WordPress API dinlenmesinin üstünde AngularJS ve Ionic 1.x ile temel bir PWA’nın nasıl oluşturulacağını göstereceğim.
Çevresel Düzenlemeler
API dinlenmesini ortaya çıkarmak için basit bir WordPress sitesinin hazırlanmasını geçeceğim. Nasıl yapılacağını bilmeseniz bile, size nasıl yapılacağını gösterecek birçok iyi öğretici var. Bunun yerine, açısal JS / Ionic 1.x uygulaması için ayarlara odaklanacağım. Bu çerçevede birçok uygulama geliştirdikten sonra, şu şekildedir: bunlar şunları içerir: çevre ve uygulama yapılarının nasıl yönetileceği üzerine belgeler.
Uygulamaları derleme, üretme ve test etme görevi.
Birim testi ve uçtan uca.
Bu ilk başta önemsiz görünebilir, ancak yapılandırılmış bir çalışma ortamına sahip olmak, tutarlı ve korunmuş bir kod yazmamızı sağlar.
Boilerplate ayrıca değişiklikleri, linterleri, şeffaflayıcıları görmek, NGDOC ile belgeler üretme, test (birim ve uçtan uca) ve üretim görevini de içerir. Bu proje, NodeJS, NPM, Bower, Gulp ve IonicCli’nin küresel olarak kurulduğunu varsayar. Buradaki çevrenin nasıl yönetileceğine dair tam belgeleri bulabilirsiniz, sadece başlamak için adımları izleyin. Uygulamamızın düzenlenmesi, John Papa’nın Stil Kılavuzu tarafından önerildiği gibi özellikler için klasör yapısı kullanmıştır. Ancak, ES6 kullanarak kendi dokunuşumuzu ekledik.
Tüm uygulama dosyaları, SRC olarak klasördedir, bu da şunları içerir:
Her modül için .js dosyası (denetleyici, modül), HTML şablonu ve SCSS dosyasına sahip uygulama – klasör.
Varlıklar – Görüntüler, JSON dosyaları ve küresel uygulamalar (SCSS dosyaları) gibi statik varlıklar için klasörler.
İndex.html – uygulama başlangıç noktası
SRC’den gelen tüm dosyalar, “Gulp” varsayılan görevini yerine getirerek WWW klasörüne derlenir, iletilir ve kopyalanır. “Bower Install” komutu, iyonik kitaplığı aynı klasöre ekler. “İyonik hizmet” kullanırken uygulama varsayılan tarayıcınıza otomatik olarak yüklenecektir. Ayrıca, API’nın bitiş noktasının değiştirilebileceği ve yolun yolunun değiştirilebileceği bir genel yapılandırma dosyası (SRC/APP/Config.json) ekledik. Diğer varlıklar (uygulama logosu, simgeler vb. Gibi) eklenebilir. Yapılandırma özelliği, initte çalıştırılan src/app/main.js dosyasından pencere nesnesine eklenmiştir: const fetchconfig = () => {{{
const $ incidenjector = angular.ctroor ([‘ng’]);
const $ http = $ intinjector.get (‘$ http’);
Const $ penceresi = $ intinector.get (‘$ pencere’);
Return $ http.get (“ $ $ penceresi .__ elma_bootstrap_data __. config_path} `);
};
…
Yapılandırmayı Al ()
Bu (yapılandırma başlatma)
Bu (Booster uygulaması)
.Catch (errorHandler); API REST verilerini alarak, uygulamaya ilk eklediğimiz şey API ile iletişim kurmak için bir hizmettir. Önceki bölümde bahsettiğim gibi, Global Configuration dosyasındaki API yolunu eşleştirdik. Basitlik uğruna, buraya sadece kategoriyi ve gönderiyi almak için son noktayı ekledim, ancak elbette sayfalara, yorumlara, medyaya vb.
{
“İhracat”: {
“Kategori”: {
“Bul”: //pwathemes.com/demo-api/wp-json/wp/v2/categories “,
“Findone”: “//pwathemes.com/demo-api/wp-json/wp/v2/categories”
},
“İleti”: {
“Discover”: “//pwathemes.com/demo-api/wp-json/wp/v2/postsides”,findone”: “//pwathemes.com/demo-api/wp-json/wp/v2/posts”
}
}
} Bu ayarla, hizmetimizde arka uç ateşine bağlanmak için bir yöntem oluşturabiliriz:
‘sıkı kullan’;
Angular.Modules (‘Apples.api’). Fabrika (‘AppSapi’, Appticlesap);
Appticlesap. $ İnject = [‘$ log’, ‘$ http’, ‘configuration’];
/**
* @Ngdoc hizmeti
* @name elma.api.appticlesapi
*
* @Description program programını oluşturur
* Yapılandırma hizmeti.
*/
Function ApplesApi ($ log, $ http, yapılandırma) {
Var api = {};
var exportApiendPoints = yapılandırma. dışa aktarma;
Object.Keys (ExportApiendPoints). Proreach (işlev (uç nokta) {
Var Method = ExportApiendPoints [uç noktalar];
Object.keys (yöntem). Proreach (function (yöntem) {
API [Camelcase ([yöntem, bitiş noktası])] = function () {
var params = argüman.length> 0 && angular.isdefined (bağımsız değişkenler [0])? argüman [0]: {};
params._jsonp = ‘json_callback’;
var url = yöntem [yöntem];
if (params && params.id) {
url = url + ‘/’ + string (params.id);
Params.id’i sil;
}
Dönüş $ http.jsonp (url, {
Yöntem: ‘Al’,
Paramler: Params
});
};
});
});
yangını restore etmek;
} API REST, bir ve birkaç öğeyi okumak için aynı uç noktasını kullandığından, API’nin URL’sinde birleştirilecek “ID” paramına devam ediyoruz. Ayrıca, API REST’in olağan “geri arama” yerine “_jsonp” param kullandığını lütfen unutmayın. Bu hizmeti ekledikten sonra, tek yapmamız gereken denetleyiciye enjekte etmek ve sonuçları ayrıştırmaktır. Denetleyicimizi ve şablonumuzu içerecek bir kategori modülü oluşturarak başlıyoruz: Angular.Modules (‘Apples.categories’, [‘UI.Router’,
‘elma.api’,
‘Appticles.Configuration’
])
.Config ([‘$ StateProvider’, ‘$ urlrouterProvider’, ($ StateProvider, $ urlrouterProvider) => {
$ StateProvider
.State (‘kategori’, {
Url: ‘/kategori’,
Denetleyici: ‘VM kategorisi olarak kategoriessController’,
TemplateUrl: ‘App/kategorileri/kategorileri.template.html’
});
$ urlrouterProvider.otherly (‘/kategoriler’);
}]); Denetleyicide, API hizmetini yayınlama kategorisini okumak için kullanıyoruz:
Sınıf kategorisi {
yapıcı ($ log, appticlesap) {
Const PopulateCategories = (sonuçlar) => {
bu. kategori = sonuç;
};
Appticlesapi.findcategories ({hide_empty: 1})
Bu (PopulateCategories)
.Catch ($ log.error);
}
}
Kategori. $ Enjeksiyon = [‘$ log’, ‘appticlesapi’];
Angular.modules (‘elma.categories’)
.Controller (‘CategoriesController’, kategori); Şablonda yalnızca verileri tekrarlarız ve kategorinin adını görüntüleriz:
<Div
Tekrar = "kategori kategorisi
iyon kayıt>
iyon -konten>
Verileri doğrulamak Örneğimizde, bize ihtiyacımız olan verileri ve ihtiyacımız olan formatta bize vereceği yangının gerçekten inanıyoruz. Gerçek hayatta, böyle bir yaklaşımla işler hızla asidik hale gelebilir. Yangını bize istediğimiz bilgileri veremesek de, her şey beklendiği gibi çalışmadığında uygulamanın tehlikeli bir şekilde vurmamasını sağlayabiliriz. Bu amaçla, uygulamamıza doğrulama hizmetleri ekledik. Bu hizmetin amacı, API’dan ham verileri almak, kontrol etmek ve bir alan formatın gereksinimlerini veya doğrulamasını karşılayamıyorsa hataları geri yüklemektir. Post kategorisini bu şekilde inceliyoruz: Angular.modules (‘Apples.validation’)
.Factory (‘AppticlesValidation’, AppticlesValidation);
/**
* @Ngdoc hizmeti
* @Name Apticles.validation.appticlesvalidation
*
* @description hizmeti API kaynaklı verileri doğrulamak için.
*/
Appticlesvalidation () işlevi {
Hizmeti bırak = {
Validikatasikatasikan: validikatikatori,
…
};
iade hizmeti;
/**
* @Ngdoc işlevi
* @Name Apticles.Validation.Appticlesvalidation#ValidatECategories
* @methodof apppticles.validation.appticlesvalidation
* @description doğrulama kategorisi verileri
*
* @return {array} dizi kategorisi nesnesi
*
* {@link https://developer.wordpress.org/rest-api/reference/categories/#list-categorys}
*/
Validic işlev kategorisi (giriş) {
if (angular.isobject (giriş) &&! Angular.amarray (giriş)) {
if (angular.isdefined (input.data)) {if (input.data.length === 0) {
dönüş [];
}
Doğrulanmış kategorileri bırakın = input.data.map (_Checkonecate kategorileri);
if (validatedCategories.Indexof (false) === -1) {
Doğrulanmış kategoriyi döndürün;
}
}
}
return {‘hata’: ‘geçersiz veri’};
}
/**
* @Ngdoc işlevi
* @Name Apticles.Validation.appticlesvalidation#checkonECategates
* @methodof apppticles.validation.appticlesvalidation
* @description bir kategori nesnesini doğrulama.
*
* @return {boolean | object} geçerli ise kategoriyi geri yükler, yanlış değilse.
*
* {@link https://developer.wordpress.org/rest-api/reference/categories/#schema}
*/
İşlev _CheckonECategories (kategoriler) {
if (angular.isdefined (category.id) && /^z0-9-9+$/i.test(category.id) &&
Angular.isdefined (category.name) && Angular.isstring (category.name) &&
Angular.isdefined (Category.slug) && Angular.isstring (Category.slug) &&
Angular.isdefined (category.link) && Angular.isstring (category.link) &&
(Angular.isundefined (kategori.Parent) ||
dönüş {
ID: Category.id,
İsim: kategori.name,
Salyangoz: Kategori. salyangoz,
Bağlantı: category.link,
Ebeveynler: Kategori. ebeveyn
};
}
yanlış geri;
}
} Yukarıdaki örnekte gördüğünüz gibi, yalnızca uygulamada kullanacağımız verileri doğrularız. Ayrıca yalnızca belirli alanları iade ediyoruz. Bu, arka uç mantığını ön uç mantıktan tam olarak ayırmamızı sağlar – yangında hangi mülkün kullanıldığı sorun değil, mülkü istediğimiz her şeye değiştirebiliriz. Uygulamamızı farklı içerik kaynaklarına bağlamak istiyorsak, kontrol ve görünümden geçmemiz ve temaları güncellememiz gerektiğinden endişe etmeden doğrulama hizmetini güncelleyebiliriz. Doğrulama hizmetleri ekledikten sonra kategori denetleyicimizin görüntülenmesi aşağıdadır: sınıf kategorisi {yapıcı ($ log, $ q, appticlesapi, appticlesvalidation) {
Const validasikatikagi = (sonuçlar) => {
Let validasICEGORES = appticlesvalidation.validateCategories (sonuçlar);
Dönüş $ Q. Doğrulanmış kategoriler;
};
Const PopulateCategories = (sonuçlar) => {
if (angular.isundefined (sonuç.error)) {
bu. kategori = sonuç;
}
};
Appticlesapi.findcategories ({hide_empty: 1})
.Htat (ValidatECategories)
Bu (PopulateCategories)
.Catch ($ log.error);
}
}
Kategorisi.
Angular.modules (‘elma.categories’)
.Controller (‘CategoriesController’, kategori); Bu yeni hizmeti kategori modülüne eklemeyi unutmayın. Benzer durumlarda, kategorilerden ve sevkiyat içeriğinden gönderiler almak için modüller yapabiliriz. GitHub depomuzda tam bir örnek bulacaksınız. PWA’yı WordPress’e entegre et
PWA uygulamayı bitirdikten sonra, bir dizi görev kullanarak üretim dosyaları üretebilirsiniz. İlk olarak, WWW klasörünüzün “Gulp” varsayılan görevini yerine getirerek en son kaynak dosyaları içerdiğinden emin olun. Ardından, “Tegukan Üretimi: JS” ve “Stresli Üretim: CSS”. Bu komut, bir .css (Bundle.css) dosyasını ve bir .js (Bundle.js) dosyasını bulacağınız bir www/distric klasörü oluşturur. Bu, uygulamanız için bir üretim dosyasıdır. PWA, WordPress’ten bağımsız olarak kullanılabilir. Bir web sunucusunun çalıştırılması gerekmez, böylece AWS S3 gibi bir depolama sisteminde bile barındırabilirsiniz. Bir WordPress teması olarak kullanmak istiyorsanız, önce statik dosyalar ve uygulamayı yükleyecek bir dizin.php ile bir tema klasörü oluşturmanız gerekir. <html manifest = "" >
<Önde
>
Yükleme
<link ral = "Stylesheet" href = "<? PHP echo get_template_directory_uri ();
>
pencere .__ appticles_bootstrap_data__ = {
Config_path: ‘/Config.json’
};
<script src = "<? php echo get_template_directory_uri ();
Gördüğünüz gibi, bu .css, .js ve tema yapılandırma dosyalarını içeren çok basit bir ayardır. Ayrıca, web sitesi adresine bağlı olarak API’ya giden yolu dinamik olarak eşleştirmek için Config.json dosyasını bir .php dosyasına değiştirmek istersiniz. Yalnızca hücresel ziyaretçiler için PWA yüklemek için, desteklenen bir cihaz her algılandığında, hücresel algılamayı işleyen ve varsayılan tema klasörünü değiştiren bir eklenti oluşturabilirsiniz. PWA temanıza wp_head (), wp_footer () ve diğer WordPress yöntemlerini eklerken dikkatli olun. Tüm WordPress eklentileri ve widget’ları bunu kendi verilerini eklemek için kancalar olarak kullanır ve bu şekilde dahil edilen içerik, özellikle JavaScript tabanlı widget’lar hakkında konuşurken kodunuza aykırı olabilir. Web push bildirimi, çevrimdışı modu ve diğer PWA özellikleri, Google Chrome Deniz Feneri eklentisinde (yaklaşık yüzde 50-60) uygun bir PWA puanı alabilirsiniz (yaklaşık yüzde 50-60). Bu ince ayarlardan biri, uygulama simginize bağlantılar ekleyebileceğiniz ve tarayıcı navigasyon bıçakları gibi bazı basit şeyleri değiştirebileceğiniz bir dosya tezgahıdır. Daha ileri gitmek istiyorsanız, çevrimdışı mod için servis çalışanları eklemeniz ve web bildirimine basmanız gerekir. Neyse ki, Push Web’in bildirimi son zamanlarda daha kolay hale geldi. Sizin için bildirimleri işleyecek ücretsiz bir WordPress eklentisi bulabilirsiniz, en popüler olanı tek sinyal eklentisidir. Bu, temanıza bir dosya tezahürü ekleyecek ve bir bildirim göndermeden önce kullanıcıdan izin isteyecektir.
Tarayıcı ikinci dosya tezahürünü göz ardı edeceğinden, bu dosyayı mevcut olanla birleştirmeye dikkat edin. Çevrimdışı modu uygulamak için, statik/kabuk uygulama varlıkları için SW-Prcache-Precaching çevrimdışı görüntülemenizi öneririz.
Dinamik/çalışma zamanı istekleri için sw-toolbox-offline önbelleği.
Sonuç Bu makalede, sadece başlamanıza yardımcı olacak temel PWA’yı sunuyorum. Kod örnekleri PWA’nın basitleştirilmiş sürümümüzdür. PWA’nın tamamını burada görebilirsiniz. Repo, içeriğe reklam eklemek, uygulama metinlerini tercüme etmek ve son olarak ama Leats – Karma ve Yasemin ile test etmek ve bir derece arkı ile sona erecek şekilde test etmek için hizmetleri içerir. Hücresel Web için “ilerici” bir gelecek oluşturmak, duyarlılığı aşmak isteyen bizden, geliştiricilerden ve web tasarımcılarından başlar. App Store modeli başarısız olmaya başladığından beri, yayıncılar ve işletmeler uygulamaların kutsal bir kâse olmadığını fark etti. İkinci bir şansa sahip bir hücresel ağ, formatın ötesinde (yani ekranı ayarlama) gerçek uygulama gibi işlevselliğe kadar geliştirme ve ilerleme fırsatı vermeliyiz. WordPress, bu trendin ön saflarında yer alması gerekenlere sahiptir ve zorlukları kabul etmek ve WordPress ve Web’i “ilerici” bir yöne yönlendirmek için topluluğa bağlıdır.
