1. Giriş ve kurulum
Web Özellikleri
Web ile yerel arasındaki özellik farkını kapatmak ve geliştiricilerin açık web'de harika deneyimler oluşturmasını kolaylaştırmak istiyoruz. Her geliştiricinin harika bir web deneyimi oluşturmak için ihtiyaç duyduğu özelliklere erişebilmesi gerektiğine inanıyoruz ve daha yetenekli bir web için çalışıyoruz.
Ancak dosya sistemi erişimi ve boşta kalma algılama gibi bazı özellikler yerel uygulamalarda kullanılabilirken web'de kullanılamaz. Bu eksik özellikler, bazı uygulama türlerinin web'de sunulamayacağı veya daha az kullanışlı olacağı anlamına gelir.
Bu yeni özellikleri açık ve şeffaf bir şekilde tasarlayıp geliştireceğiz. Tasarım üzerinde iterasyon yaparken geliştiricilerden ve diğer tarayıcı satıcılarından erken geri bildirim alarak birlikte çalışabilir bir tasarım elde etmek için mevcut açık web platformu standartları süreçlerini kullanacağız.
Ne oluşturacaksınız?
Bu codelab'de, yepyeni olan veya yalnızca bir işaretin arkasında kullanılabilen bir dizi web API'siyle denemeler yapacaksınız. Bu nedenle bu codelab, belirli bir nihai ürün oluşturmaktan ziyade API'lerin kendisine ve bu API'lerin sunduğu kullanım alanlarına odaklanmaktadır.
Neler öğreneceksiniz?
Bu codelab'de, en yeni API'lerin temel mekanizmalarını öğreneceksiniz. Bu mekaniklerin henüz kesinleşmediğini belirtmek isteriz. Geliştirici akışıyla ilgili geri bildirimlerinizi bekliyoruz.
İhtiyacınız olanlar
Bu codelab'de yer alan API'ler en yeni teknolojileri kullandığından her API'nin gereksinimleri farklıdır. Lütfen her bölümün başındaki uyumluluk bilgilerini dikkatlice okuyun.
Codelab'e nasıl yaklaşmalısınız?
Bu codelab'in sırayla tamamlanması gerekmez. Her bölüm bağımsız bir API'yi temsil eder. Bu nedenle, en çok ilginizi çekenleri seçebilirsiniz.
2. Badging API
Badging API'nin amacı, kullanıcıların dikkatini arka planda gerçekleşen olaylara çekmektir. Bu codelab'deki demoyu basitleştirmek için API'yi kullanarak kullanıcıların dikkatini ön planda gerçekleşen bir şeye çekelim. Ardından, zihinsel olarak arka planda gerçekleşen olaylara geçebilirsiniz.
Airhorner'ı yükleme
Bu API'nin çalışması için ana ekrana yüklenmiş bir PWA'ya ihtiyacınız vardır. Bu nedenle, ilk adım olarak airhorner.com gibi bir PWA yükleyin. Sağ üst köşedeki Yükle düğmesine basın veya manuel olarak yüklemek için üç noktalı menüyü kullanın.
Onay istemi gösterilir. Yükle'yi tıklayın.
Artık işletim sisteminizin dock'unda yeni bir simge bulunur. PWA'yı başlatmak için bu simgeyi tıklayın. Kendi uygulama penceresi olur ve bağımsız modda çalışır.
|
|
Rozet ayarlama
PWA'yı yüklediğinize göre, rozette gösterilecek bazı sayısal verilere (rozetler yalnızca sayı içerebilir) ihtiyacınız var. The Air Horner'da sayılması kolay olan şey, ah, kornanın çalınma sayısıdır. Aslında, yüklü Airhorner uygulamasıyla kornayı çalmayı deneyin ve rozeti kontrol edin. Kornaya her bastığınızda bir artar.
Peki, bu nasıl çalışır? Temel olarak kod şöyledir:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Havalı kornayı birkaç kez çalın ve PWA'nın simgesini kontrol edin: Simge, havalı korna her çaldığında güncellenir. İşte bu kadar kolay.
Rozeti temizleme
Sayaç 99'a kadar sayar ve ardından tekrar başlar. Manuel olarak da sıfırlayabilirsiniz. Geliştirici Araçları Konsol sekmesini açın, aşağıdaki satırı yapıştırın ve Enter tuşuna basın.
navigator.setExperimentalAppBadge(0);
Alternatif olarak, aşağıdaki snippet'te gösterildiği gibi rozeti açıkça temizleyerek de kaldırabilirsiniz. PWA'nızın simgesi artık başlangıçtaki gibi net ve rozetsiz görünmelidir.
navigator.clearExperimentalAppBadge();
Geri bildirim
Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:
Bu API'nin kullanımı kolay mıydı?
Örneği çalıştırabildiniz mi?
Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa bir geri bildirimde bulunun. Teşekkürler!
3. Native File System API
Native File System API, geliştiricilerin kullanıcının yerel cihazındaki dosyalarla etkileşim kuran güçlü web uygulamaları oluşturmasını sağlar. Bu API, bir kullanıcı web uygulamasına erişim izni verdikten sonra web uygulamalarının değişiklikleri doğrudan kullanıcının cihazındaki dosya ve klasörlere okumasına veya kaydetmesine olanak tanır.
Dosya okuma
Native File System API'nin "Hello World"ü, yerel bir dosyayı okuyup dosya içeriğini almaktır. Düz .txt dosyası oluşturun ve metin girin. Ardından, example.com gibi herhangi bir güvenli siteye (HTTPS üzerinden sunulan bir site) gidin ve Geliştirici Araçları konsolunu açın. Aşağıdaki kod snippet'ini konsola yapıştırın. Native File System API, kullanıcı hareketi gerektirdiğinden belgeye çift tıklama işleyicisi ekliyoruz. Dosya işleyicisine daha sonra ihtiyacımız olacağından bunu global bir değişken olarak tanımlıyoruz.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
Ardından example.com sayfasında herhangi bir yeri çift tıkladığınızda bir dosya seçici gösterilir.
Daha önce oluşturduğunuz .txt dosyasını seçin. Dosya içerikleri daha sonra example.com'un mevcut body içeriklerinin yerini alır.
Dosya kaydetme
Şimdi bazı değişiklikler yapmak istiyoruz. Bu nedenle, aşağıdaki kod snippet'ini yapıştırarak body öğesini düzenlenebilir hale getirelim. Artık metni, tarayıcı bir metin düzenleyiciymiş gibi düzenleyebilirsiniz.
document.body.contentEditable = true;
Şimdi bu değişiklikleri orijinal dosyaya geri yazmak istiyoruz. Bu nedenle, aşağıdaki snippet'i konsola yapıştırarak elde edebileceğimiz bir dosya işleyicisi yazarına ihtiyacımız var. Yine bir kullanıcı hareketi yapılması gerekiyor. Bu nedenle, bu kez ana dokümanın tıklanmasını bekliyoruz.
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
Artık belgeyi tıkladığınızda (çift tıklamadığınızda) izin istemi gösterilir. İzin verdiğinizde, dosyanın içeriği daha önce body içinde düzenlediğiniz şekilde olur. Dosyayı farklı bir düzenleyicide açarak değişiklikleri doğrulayın (veya belgeyi tekrar çift tıklayıp dosyanızı yeniden açarak işlemi tekrar başlatın).
Tebrikler! Dünyanın en küçük metin düzenleyicisini oluşturdunuz [citation needed].
Geri bildirim
Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:
Bu API'nin kullanımı kolay mıydı?
Örneği çalıştırabildiniz mi?
Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa bir geri bildirimde bulunun. Teşekkürler!
4. Shape Detection API
Shape Detection API, hızlandırılmış şekil dedektörlerine (ör. insan yüzleri için) erişim sağlar ve hareketsiz görüntülerde ve/veya canlı görüntü feed'lerinde çalışır. İşletim sistemlerinde, Android FaceDetector gibi yüksek performanslı ve son derece optimize edilmiş özellik algılayıcılar bulunur. Shape Detection API, bu yerel uygulamaları açar ve bir dizi JavaScript arayüzü aracılığıyla kullanıma sunar.
Şu anda desteklenen özellikler; FaceDetector arayüzü üzerinden yüz algılama, BarcodeDetector arayüzü üzerinden barkod algılama ve TextDetector arayüzü üzerinden metin algılama (optik karakter tanıma) şeklindedir.
Yüz Algılama
Shape Detection API'nin ilgi çekici özelliklerinden biri yüz algılamadır. Bu özelliği test etmek için yüzlerin bulunduğu bir sayfaya ihtiyacımız var. Yazarın yüzünün yer aldığı bu sayfa iyi bir başlangıç noktasıdır. Aşağıdaki ekran görüntüsüne benzer bir görünüm elde edersiniz. Desteklenen bir tarayıcıda yüzün sınır kutusu ve yüz işaretleri tanınır.
Bu işlemin gerçekleşmesi için ne kadar az kod gerektiğini görmek isterseniz Glitch projesini, özellikle de script.js dosyasını yeniden düzenleyebilir veya düzenleyebilirsiniz.
Yalnızca yazarın yüzüyle çalışmak yerine tamamen dinamik bir yaklaşım benimsemek istiyorsanız gizli sekmede veya misafir modunda yüzlerle dolu bu Google Arama sonuçları sayfasına gidin. Şimdi bu sayfada herhangi bir yeri sağ tıklayıp İncele'yi tıklayarak Chrome Geliştirici Araçları'nı açın. Ardından, Konsol sekmesinde aşağıdaki snippet'i yapıştırın. Kod, algılanan yüzleri yarı şeffaf kırmızı bir kutuyla vurgular.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Bazı DOMException mesajları olduğunu ve tüm resimlerin işlenmediğini göreceksiniz. Bunun nedeni, ekranın üst kısmında yer alan resimlerin veri URI'leri olarak satır içine alınması ve bu nedenle erişilebilir olmasıdır. Ekranın alt kısmında yer alan resimler ise CORS'u destekleyecek şekilde yapılandırılmamış farklı bir alandan gelir. Demo için bu konuda endişelenmemize gerek yok.
Yüzdeki önemli noktaları algılama
macOS, yalnızca yüzlerin yanı sıra yüz işaretlerinin algılanmasını da destekler. Yüz işaret noktalarının algılanmasını test etmek için aşağıdaki snippet'i konsola yapıştırın. Hatırlatma: crbug.com/914348 nedeniyle simge yapıların sıralaması hiç de mükemmel değil ancak bu özelliğin nereye gittiğini ve ne kadar güçlü olabileceğini görebilirsiniz.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
landmarkSVG.style.position = 'absolute';
landmarkSVG.classList.add('landmarks');
landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
landmarkSVG.style.width = `${img.width}px`;
landmarkSVG.style.height = `${img.height}px`;
face.landmarks.map((landmark) => {
landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
landmark.locations.map((point) => {
return `${scaleX * point.x},${scaleY * point.y} `;
}).join(' ')
}" /></svg>`;
});
div.before(landmarkSVG);
});
} catch(e) {
console.error(e);
}
});
Barkod algılama
Shape Detection API'nin ikinci özelliği barkod algılamadır. Daha önce olduğu gibi, barkod içeren bir sayfa (ör. bu sayfa) göndermeniz gerekir. Tarayıcıda açtığınızda çeşitli QR kodlarının çözüldüğünü görürsünüz. Nasıl yapıldığını görmek için Glitch projesini, özellikle de script.js dosyasını remiksleyin veya düzenleyin.
Daha dinamik bir şey istiyorsanız Google Görsel Arama'yı tekrar kullanabiliriz. Bu kez, tarayıcınızda gizli sekmede veya misafir modunda bu Google Arama sonuçları sayfasına gidin. Şimdi aşağıdaki snippet'i Chrome Geliştirici Araçları Konsol sekmesine yapıştırın. Kısa bir süre sonra, tanınan barkodlara ham değer ve barkod türüyle ilgili notlar eklenir.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const barcodes = await new BarcodeDetector().detect(img);
barcodes.forEach(barcode => {
const div = document.createElement('div');
const box = barcode.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.textContent = `${barcode.rawValue}`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Metin algılama
Shape Detection API'nin son özelliği metin algılamadır. Artık nasıl bir sayfa istediğimizi biliyorsunuz: Google Kitaplar tarama sonuçlarını içeren bu sayfadaki gibi, metin içeren resimlerin bulunduğu bir sayfa istiyoruz. Desteklenen tarayıcılarda, tanınan metni ve metin pasajlarının etrafında çizilen sınırlayıcı kutuyu görürsünüz. Nasıl yapıldığını görmek için Glitch projesini, özellikle de script.js dosyasını remiksleyin veya düzenleyin.
Bunu dinamik olarak test etmek için gizli sekmede veya misafir modunda bu arama sonuçları sayfasına gidin. Şimdi aşağıdaki snippet'i Chrome Geliştirici Araçları Konsol sekmesine yapıştırın. Biraz bekledikten sonra metnin bir kısmı tanınır.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const texts = await new TextDetector().detect(img);
texts.forEach(text => {
const div = document.createElement('div');
const box = text.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.innerHTML = text.rawValue;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Geri bildirim
Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:
Bu API'nin kullanımı kolay mıydı?
Örneği çalıştırabildiniz mi?
Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa bir geri bildirimde bulunun. Teşekkürler!
5. Web Share Target API
Web Share Target API, yüklü web uygulamalarının, Web Share API veya işletim sistemi düzeyindeki paylaşım düğmesi gibi sistem etkinliklerinden paylaşılan içerikleri almak için temel işletim sistemine paylaşım hedefi olarak kaydolmasına olanak tanır.
Paylaşmak için PWA yükleme
İlk adım olarak, paylaşabileceğiniz bir PWA'ya ihtiyacınız vardır. Bu kez Airhorner (neyse ki) işe yaramayacak ancak Web Share Target demo uygulaması size yardımcı olacak. Uygulamayı cihazınızın ana ekranına yükleyin.
PWA'da bir şey paylaşma
Ardından, paylaşılacak bir öğe (ör. Google Fotoğraflar'daki bir fotoğraf) gerekir. Paylaş düğmesini kullanın ve paylaşım hedefi olarak Anı Defteri PWA'sını seçin.
Uygulama simgesine dokunduğunuzda doğrudan Anı Defteri PWA'sına yönlendirilirsiniz ve fotoğrafı orada görürsünüz.
Peki, bu nasıl çalışır? Öğrenmek için Not Defteri PWA'sının web uygulaması manifestini inceleyin. Web Share Target API'nin çalışmasını sağlayacak yapılandırma, "share_target" özelliğinde bulunur. Bu özellik, "action" alanında "params" bölümünde listelenen parametrelerle süslenen bir URL'ye işaret eden manifest'e aittir.
Paylaşan taraf, bu URL şablonunu buna göre doldurur (paylaşma işlemiyle veya Web Share API'yi kullanarak geliştirici tarafından programatik olarak kolaylaştırılır). Böylece, alan taraf parametreleri çıkarabilir ve bunları görüntülemek gibi işlemler yapabilir.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
Geri bildirim
Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:
Bu API'nin kullanımı kolay mıydı?
Örneği çalıştırabildiniz mi?
Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa bir geri bildirimde bulunun. Teşekkürler!
6. Wake Lock API
Pilin tükenmesini önlemek için çoğu cihaz boşta bırakıldığında hızlıca uyku moduna geçer. Bu durum çoğu zaman sorun yaratmasa da bazı uygulamaların işlerini tamamlayabilmek için ekranı veya cihazı uyanık tutması gerekir. Uyanık kalma kilidi API'si, cihazın ekranının kararmasını ve kilitlenmesini veya cihazın uyku moduna geçmesini engellemenin bir yolunu sunar. Bu özellik, şimdiye kadar yerel uygulama gerektiren yeni deneyimler sunar.
Ekran koruyucu ayarlama
Wake Lock API'yi test etmek için öncelikle cihazınızın uyku moduna gireceğinden emin olmanız gerekir. Bu nedenle, işletim sisteminizin tercih bölmesinde istediğiniz bir ekran koruyucuyu etkinleştirin ve 1 dakika sonra başlayacak şekilde ayarlayın. Cihazınızı tam olarak o süre boyunca yalnız bırakarak çalıştığından emin olun (evet, bunun zor olduğunu biliyoruz). Aşağıdaki ekran görüntülerinde macOS gösterilmektedir ancak bu özelliği Android mobil cihazınızda veya desteklenen herhangi bir masaüstü platformunda da deneyebilirsiniz.
Ekran uyanık kalma kilidi ayarlama
Ekran koruyucunuzun çalıştığını bildiğinize göre, ekran koruyucunun işini yapmasını önlemek için "screen" türünde bir uyanık kalma kilidi kullanacaksınız. Wake Lock demo uygulamasına gidip Etkinleştir 'i tıklayın.
screen Uyanık kalma kilidi onay kutusu.
O andan itibaren uyanık kalma kilidi etkin olur. Cihazınıza bir dakika boyunca dokunmazsanız ekran koruyucunun gerçekten de başlamadığını görürsünüz.
Peki, bu nasıl çalışır? Öğrenmek için Wake Lock demo uygulamasıyla ilgili Glitch projesine gidip script.js dosyasına göz atın. Kodun özeti aşağıdaki snippet'te yer almaktadır. Yeni bir sekme açın (veya açık olan herhangi bir sekmeyi kullanın) ve aşağıdaki kodu Chrome Geliştirici Araçları konsoluna yapıştırın. Pencereyi tıkladığınızda tam olarak 10 saniye boyunca etkin olan bir uyanık kalma kilidi görmeniz (konsol günlüklerine bakın) ve ekran koruyucunuzun başlamaması gerekir.
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (e) {
console.error(`${e.name}, ${e.message}`);
}
};
requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
}, 10 * 1000);
}
Geri bildirim
Bu API hakkında ne düşünüyorsunuz? Lütfen bu anketi kısaca yanıtlayarak bize yardımcı olun:
Bu API'nin kullanımı kolay mıydı?
Örneği çalıştırabildiniz mi?
Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu ankette kısa bir geri bildirimde bulunun. Teşekkürler!
7. Contact Picker API
Büyük heyecanla duyurduğumuz API'lerden biri Kişi Seçici API'dir. Bu izin, bir web uygulamasının cihazın yerel kişi yöneticisindeki kişilere erişmesine olanak tanır. Böylece web uygulamanız, kişilerinizin adlarına, e-posta adreslerine ve telefon numaralarına erişebilir. Yalnızca bir veya birden fazla kişi eklemek isteyip istemediğinizi ve tüm alanları mı yoksa yalnızca ad, e-posta adresi ve telefon numarası alt kümesini mi eklemek istediğinizi belirtebilirsiniz.
Gizlilikle ilgili dikkat edilmesi gereken noktalar
Seçici açıldıktan sonra paylaşmak istediğiniz kişileri seçebilirsiniz. "Tümünü seç" seçeneğinin olmadığını fark edeceksiniz. Bu seçenek, paylaşımın bilinçli bir karar olmasını istediğimiz için eklenmemiştir. Aynı şekilde, erişim sürekli değil, tek seferlik bir karardır.
Kişilere erişme
Kişilere erişmek oldukça basittir. Seçici açılmadan önce hangi alanları istediğinizi (seçenekler name, email ve telephone) ve birden fazla kişiye mi yoksa yalnızca bir kişiye mi erişmek istediğinizi belirtebilirsiniz. Bu API'yi demo uygulamasını açarak bir Android cihazda test edebilirsiniz. Kaynak kodun ilgili bölümü temelde aşağıdaki snippet'tir:
getContactsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(
['name', 'email'],
{multiple: true});
if (!contacts.length) {
// No contacts were selected, or picker couldn't be opened.
return;
}
console.log(contacts);
});
8. Async Clipboard API
Metni kopyalama ve yapıştırma
Şimdiye kadar, resimleri programatik olarak kopyalayıp sistemin panosuna yapıştırmak mümkün değildi. Yakın zamanda, Async Clipboard API'ye görüntü desteği ekledik.
Böylece artık resimleri kopyalayıp yapıştırabilirsiniz. Yeni özellik sayesinde, resimleri de panoya yazabilirsiniz. Eşzamansız pano API'si, bir süredir metin kopyalama ve yapıştırma işlemlerini desteklemektedir. navigator.clipboard.writeText() işlevini çağırarak metni panoya kopyalayabilir, ardından navigator.clipboard.readText() işlevini çağırarak bu metni yapıştırabilirsiniz.
Görüntüleri kopyalama ve yapıştırma
Artık görüntüleri panoya da yazabilirsiniz. Bu işlemin çalışması için, resim verilerini blob olarak alıp pano öğesi oluşturucusuna iletmeniz gerekir. Son olarak, navigator.clipboard.write() işlevini çağırarak bu pano öğesini kopyalayabilirsiniz.
// Copy: Writing image to the clipboard
try {
const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem(Object.defineProperty({}, blob.type, {
value: blob,
enumerable: true
}))
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
Resmi panodan geri yapıştırmak oldukça karmaşık bir işlem gibi görünse de aslında yalnızca blob'u pano öğesinden geri almakla ilgilidir. Birden fazla olabileceğinden, ilgilendiğiniz öğeyi bulana kadar bunları döngüye almanız gerekir. Güvenlik nedeniyle şu anda yalnızca PNG resimleri desteklenmektedir ancak gelecekte daha fazla resim biçimi desteklenebilir.
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
try {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
} catch (e) {
console.error(e, e.message);
}
}
} catch (e) {
console.error(e, e.message);
}
}
Bu API'nin nasıl çalıştığını demo uygulamasında görebilirsiniz. İlgili snippet'ler, kaynak kodundan alınarak yukarıya yerleştirilmiştir. Resimleri panoya kopyalamak için izin gerekmez ancak panodan yapıştırmak için erişim izni vermeniz gerekir.
Erişim izni verdikten sonra, panodaki resmi okuyup uygulamaya yapıştırabilirsiniz:
9. Başardınız!
Tebrikler, codelab'in sonuna geldiniz. API'lerin çoğu üzerinde aktif olarak çalışıldığını ve bu API'lerin henüz kesinleşmediğini tekrar hatırlatmak isteriz. Bu nedenle, ekibimiz geri bildirimlerinizi çok değerli buluyor. Bu API'leri doğru şekilde kullanabilmemiz için sizin gibi kullanıcılarla etkileşim kurmamız gerekiyor.
Ayrıca, Özellikler açılış sayfamızı sık sık ziyaret etmenizi öneririz. Bu sayfayı güncel tutacağız. Ayrıca, üzerinde çalıştığımız API'lerle ilgili tüm ayrıntılı makalelere yönlendiren bağlantılar içerir. Müziğe devam edin!
Tom ve tüm Capabilities ekibi 🐡