Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Özellikleri codelab'i

1. Giriş ve kurulum

Web Özellikleri

Web ile yerel arasındaki özellik açığını kapatmak ve geliştiricilerin açık web'de mükemmel deneyimler oluşturmasını kolaylaştırmak istiyoruz. Her geliştiricinin iyi bir web deneyimi oluşturmak için ihtiyaç duyduğu özelliklere erişebilmesi gerektiğine inanıyor ve daha yetenekli bir web için kararlıyız.

Bununla birlikte, yerel kullanıcılar tarafından kullanılabilen ancak web'de kullanılamayan bazı özellikler (ör. dosya sistemi erişimi ve boşta kalma algılama) vardır. Bu eksik özellikler, bazı uygulama türlerinin web'de yayınlanamayacağı veya daha az yararlı olduğu anlamına gelir.

Bu yeni özellikleri, mevcut açık web platformu standart süreçlerini kullanarak, açık ve şeffaf bir şekilde tasarlayıp geliştireceğiz. Ayrıca, birlikte çalışabilirlik sağlayacak bir tasarım sağlamak için, tasarım üzerinde iterasyon yaparken geliştiricilerden ve diğer tarayıcı tedarikçilerinden erken geri bildirimler de alacağız.

Oluşturacaklarınız

Bu codelab'de, yeni olan veya yalnızca işaretlenerek kullanıma sunulan çeşitli web API'leri üzerinde denemeler yapacaksınız. Bu nedenle bu codelab'de, belirli bir nihai ürün oluşturmak yerine API'lerin kendilerine ve bu API'lerin kullanıma sunduğu kullanım alanlarına odaklanılmaktadır.

Neler öğreneceksiniz?

Bu codelab'de çeşitli gelişmiş API'lerin temel mekaniklerini öğreneceksiniz. Bu mekanizmalar henüz tam olarak hazır değil. Geliştirici adımlarıyla ilgili geri bildirimleriniz bizim için çok değerli.

Gerekenler

Bu codelab'de yer alan API'ler son teknoloji ürünü olduğundan her API için gereksinimler farklılık gösterir. Lütfen her bölümün başındaki uyumluluk bilgilerini dikkatlice okuduğunuzdan emin olun.

Codelab'e yaklaşım

Codelab'in sırayla çalıştırılması amaçlanmamıştır. Her bölüm bağımsız bir API'yi temsil eder. Bu nedenle, ilginizi en çok çeken şeyleri seçmekten çekinmeyin.

2. Badging API

Rozet API'sinin amacı, kullanıcıların arka planda olan şeylere odaklanmama yardımcı olur. Bu codelab'deki demoda kolaylık sağlamak amacıyla, API'yi kullanarak kullanıcıların odaklanmasını kolaylaştırır. Böylece arka planda gerçekleşen olaylara zihinsel aktarım yapabilirsiniz.

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, dünyaca ünlü airhorner.com gibi bir PWA yüklemektir. Manuel olarak yüklemek için sağ üst köşedeki Yükle düğmesine basın veya üç nokta menü simgesini kullanın.

Bir onay istemi görüntülenir. Yükle'yi tıklayın.

Artık işletim sisteminizin yuvasında yeni bir simge var. PWA'yı başlatmak için bu simgeyi tıklayın. Bu uygulamanın kendi uygulama penceresi olur ve bağımsız modda çalışır.

Rozet ayarlama

Artık PWA yüklediğinize göre rozette gösterilecek bazı sayısal verilere (rozetler yalnızca sayı içerebilir) ihtiyacınız vardır. The Air Horner'da bir kere daha aklınıza gelebilecek bir şey var, o da iç çek demek. Aslında yüklü Airhorner uygulaması yüklüyken kornayı çalmayı deneyin ve rozeti kontrol edin. Her korna çaldığınızda bir puan sayılır.

Peki, bu nasıl çalışır? Özetle, kod aşağıdaki gibidir:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

Airhorn'u birkaç kez seslendirin ve PWA'nın simgesini kontrol edin. Bir sıklıkla güncellenir. bekar. gerekir. kornağı sesi çıkarıyor. Bu kadar kolay.

Rozetleri temizleme

Sayaç 99'a kadar çıkar ve ardından baştan başlar. Şifrenizi manuel olarak da sıfırlayabilirsiniz. Geliştirici Araçları Konsolu sekmesini açıp 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 açıkça temizleyerek rozetten kurtulabilirsiniz. PWA'nızın simgesi artık tekrar başa görünecek, net ve rozetsiz olmalıdır.

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ı sezgisel miydi?

Evet

Hayır

Çalıştırmak istediğiniz örneği aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu anketi doldurarak geri bildirimde bulunun. Teşekkürler!

3. Yerel Dosya Sistemi API'sı

Native File System API, geliştiricilerin kullanıcının yerel cihazındaki dosyalarla etkileşimde bulunan güçlü web uygulamaları oluşturmasını sağlar. Kullanıcı bir web uygulamasına erişim izni verdikten sonra bu API, web uygulamalarının değişiklikleri doğrudan kullanıcının cihazındaki dosya ve klasörlerde okumasına veya kaydetmesine olanak tanır.

Dosya okuma

"Hello, world" yerel bir dosya okumak ve dosya içeriğini almaktır. Düz bir .txt dosyası oluşturun ve metin girin. Ardından, example.com gibi 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 için kullanıcı hareketi gerektiğinden dokümana bir çift tıklama işleyici ekleriz. Dosya herkese açık kullanıcı adına daha sonra ihtiyaç duyacağımız için onu genel değişken haline getireceğiz.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

Daha sonra example.com sayfasında herhangi bir yeri çift tıkladığınızda bir dosya seçici açılır.

Daha önce oluşturduğunuz .txt dosyasını seçin. Bu durumda dosya içerikleri, example.com adresinin asıl body içeriğinin yerini alır.

Dosya kaydetme

Şimdi de bazı değişiklikler yapmak istiyoruz. Şimdi, aşağıdaki kod snippet'ini yapıştırarak body öğesini düzenlenebilir hale getirelim. Artık metni tarayıcıdaki bir metin düzenleyici gibi düzenleyebilirsiniz.

document.body.contentEditable = true;

Şimdi, bu değişiklikleri orijinal dosyaya geri yazmak istiyoruz. Bu nedenle, dosya herkese açık kullanıcı adına bir yazar eklemeniz gerekir. Bu değeri konsola aşağıdaki snippet'i yapıştırarak elde edebiliriz. Yine bir kullanıcı hareketine ihtiyacımız var, bu yüzden bu kez ana belgenin 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();
};

Dokümanı tıkladığınızda (çift tıklamazsanız) bir izin istemi gösterilir. İzin verdiğinizde, dosyanın içeriği daha önce body içinde düzenlediğiniz şekilde olacaktır. Dosyayı farklı bir düzenleyicide açarak değişiklikleri doğrulayın (veya dokümanı tekrar çift tıklayıp dosyanızı yeniden açarak işlemi yeniden başlatın).

Tebrikler! [citation needed], dünyanın en küçük metin düzenleyicisini oluşturdunuz.

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ı sezgisel miydi?

Evet

Hayır

Çalıştırmak istediğiniz örneği aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu anketi doldurarak geri bildirimde bulunun. Teşekkürler!

4. Shape Detection API

Şekil Algılama API'si, hızlandırılmış şekil algılayıcılarına (ör. insan yüzleri için) erişim sağlar ve hareketsiz resimler ve/veya canlı görüntü feed'leri üzerinde çalışır. İşletim sistemleri, Android FaceDetector gibi yüksek performanslı ve yüksek düzeyde optimize edilmiş özellik algılayıcılarına sahiptir. Şekil Algılama API'si, bu yerel uygulamaları açar ve bir dizi JavaScript arayüzü aracılığıyla kullanıma sunar.

Şu anda, FaceDetector arayüzü yoluyla yüz algılama, BarcodeDetector arayüzü üzerinden barkod algılama ve TextDetector arayüzü üzerinden metin algılama (optik karakter tanıma) desteklenmektedir.

Yüz Algılama

Shape Detection API'nin büyüleyici özelliklerinden biri yüz algılama. Test etmek için yüzler içeren bir sayfaya ihtiyacımız var. Yazarın yüzünün yer aldığı bu sayfa iyi bir başlangıçtır. Aşağıdaki ekran görüntüsündeki gibi olacaktır. Desteklenen bir tarayıcıda, yüzün ve yüzün önemli noktaları tanınır.

Glitch projesini, özellikle de script.js dosyasını yeniden düzenleyerek veya düzenleyerek bunun için ne kadar az kod gerektiğini görebilirsiniz.

Yalnızca yazarın yüzüyle çalışmak yerine tamamen dinamik hale gelmek istiyorsanız gizli sekmede veya misafir modunda yüzlerle dolu bu Google Arama sonuçları sayfasına gidin. İlgili 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ının olduğunu ve tüm resimlerin işlenmediğini fark edeceksiniz. Bunun nedeni, ekranın üst kısmındaki resimlerin veri URI'leri olarak satır içine alınması ve bu şekilde erişilebilmesi, ekranın alt kısmındaki resimlerin ise CORS'yi destekleyecek şekilde yapılandırılmamış farklı bir alandan gelmesidir. Demoda, bu konuda endişelenmemize gerek yoktur.

Yüzde önemli nokta algılama

macOS, sadece yüzlerin yanı sıra yüzdeki önemli noktaların algılanmasını da destekler. Yüzdeki önemli noktaların algılanıp algılanmadığını test etmek için aşağıdaki snippet'i Console'a yapıştırın. Hatırlatma: crbug.com/914348 adresi nedeniyle önemli noktaların sıralaması hiç mükemmel değil ancak bu değişikliğin nereye doğru gittiğini ve bu özelliğin 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

Şekil Algılama API'sinin ikinci özelliği barkod algılamadır. Öncekine benzer şekilde, bu gibi barkodlu bir sayfaya ihtiyacımız var. Tarayıcıda açtığınızda çeşitli QR kodlarının deşifre edildiğini 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 içerik istiyorsanız Google Görsel Arama'yı kullanabiliriz. Bu sefer tarayıcınızda gizli bir sekmede veya misafir modunda bu Google Arama sonuçları sayfasına gidin. Şimdi aşağıdaki snippet'i Chrome Geliştirici Araçları Konsolu sekmesine yapıştırın. Kısa bir süre sonra, tanınan barkodlara ham değer ve barkod türü 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

Şekil Algılama API'sinin son özelliği metin algılamadır. Şu ana kadar alıştırmayı biliyorsunuz: Metin içeren resimler içeren bir sayfaya (Google Kitaplar tarama sonuçlarını içeren bu sayfa gibi) ihtiyacımız var. Desteklenen tarayıcılarda, metnin tanındığını ve metin bölümlerinin etrafına bir sınırlayıcı kutu çizildiğini 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ı Konsolu 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ı sezgisel miydi?

Evet

Hayır

Çalıştırmak istediğiniz örneği aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu anketi doldurarak geri bildirimde bulunun. Teşekkürler!

5. Web Share Target API

Web Share Target API, yüklü web uygulamalarının, Web Share API'den veya işletim sistemi düzeyinde paylaş düğmesi gibi sistem etkinliklerinden paylaşılan içerik almak için bir paylaşım hedefi olarak temel işletim sistemine kaydolmasına olanak tanır.

İlk adım olarak, paylaşımda bulunabileceğiniz bir PWA'ya (Progresif Web Uygulaması) ihtiyacınız var. Neyse ki Airhorner bu sefer işi bitiremeyecek ama Web Paylaşımı Hedefi demo uygulaması size destek olacak. Uygulamayı cihazınızın ana ekranına yükleyin.

Bunun ardından, paylaşacağınız bir şeye (ör. Google Fotoğraflar'dan bir fotoğraf) ihtiyacınız vardır. Paylaş düğmesini kullanın ve albüm PWA'sını paylaşım hedefi olarak seçin.

Uygulama simgesine dokunduğunuzda doğrudan Scrapbook PWA'ya gidersiniz ve fotoğraf tam oradadır.

Peki, bu nasıl çalışır? Bunu öğrenmek için Scrapbook PWA'nın web uygulaması manifestini inceleyin. Web Share Target API'nin çalışmasını sağlayacak yapılandırma, manifestin "share_target" özelliğinde yer alır. Bu yapılandırma, "action" alanındaki "params" içinde listelenen parametrelerle dekore edilmiş bir URL'ye işaret eder.

Daha sonra paylaşım tarafı, bu URL şablonunu uygun şekilde doldurur (bir paylaşım işlemiyle kolaylaştırılır veya Web Paylaşımı API'sini kullanarak geliştirici tarafından programlı bir şekilde kontrol edilir). Böylece alıcı taraf, parametreleri ayıklayabilir ve görüntüleme gibi bir işlem 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ı sezgisel miydi?

Evet

Hayır

Çalıştırmak istediğiniz örneği aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu anketi doldurarak geri bildirimde bulunun. Teşekkürler!

6. Uyandırma Kilidi API'sı

Çoğu cihaz boşta kaldığında pilin boşalmasını önlemek için hızlı bir şekilde uyku moduna geçer. Çoğu zaman bu işlem yeterli olsa da bazı uygulamaların işlerini tamamlamak için ekranı veya cihazı açık tutması gerekir. Uyandırma Kilidi API'si, cihazın kararmasını ve ekranı kilitlemesini ya da cihazın uyku moduna geçmesini önlemenin bir yolunu sunar. Bu özellik, şu ana kadar yerel uygulama gerektiren yeni deneyimleri mümkün kılar.

Ekran koruyucu ayarlama

Wake Lock API'yi test etmek için öncelikle cihazınızın uyku moduna geçeceğ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şladığından emin olun. Cihazınızı tam olarak o süre boyunca olduğu gibi bırakarak çalıştığından emin olun (Evet, acı verici olduğunu biliyorum). Aşağıdaki ekran görüntüleri macOS'i gösterir ancak bunu mobil Android cihazınızda veya desteklenen herhangi bir masaüstü platformunda deneyebilirsiniz.

Ekran uyanık kalma kilidi ayarlama

Artık ekran koruyucunuzun çalıştığını bildiğinize göre, ekran koruyucunun işini yapmasını engellemek için "screen" türünde bir uyanık kalma kilidi kullanırsınız. Wake Lock demo uygulamasına gidin ve Etkinleştir 'i tıklayın

screen Uyanık kalma Kilidi onay kutusu.

O andan itibaren bir uyanık kalma kilidi etkin olur. Cihazınızı bir dakika boyunca olduğu gibi bırakacak kadar sabırlıysanız, ekran koruyucunun gerçekten başlamadığını görürsünüz.

Peki bu nasıl çalışır? Bunu öğrenmek için Uyandırma Kilidi demo uygulaması için Glitch projesine gidin ve script.js dosyasına göz atın. Kodun özetini aşağıdaki snippet'te bulabilirsiniz. Yeni bir sekme açın (veya açık olan herhangi bir sekmeyi kullanın) ve aşağıdaki kodu bir 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ı sezgisel miydi?

Evet

Hayır

Çalıştırmak istediğiniz örneği aldınız mı?

Evet

Hayır

Belirtmek istediğiniz başka noktalar var mı? Eksik özellikler var mıydı? Lütfen bu anketi doldurarak geri bildirimde bulunun. Teşekkürler!

7. Contact Picker API

Bizim için çok heyecan verici bir API de Contact Picker API. Bir web uygulamasının, cihazın yerel kişi yöneticisinden kişilere erişmesine izin verir. Böylece web uygulamanız, kişilerinizin kişilerine erişebilir. bilgiler, e-posta adresleri ve telefon numaraları için geçerlidir. Yalnızca bir mi yoksa daha fazla kişi mi istediğinizi, tüm alanları mı yoksa yalnızca adlar, e-posta adresleri ve telefon numaralarının bir alt kümesini mi 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ği bulunmadığını unutmayın paylaşmanın bilinçli bir karar olmasını istiyoruz. Benzer şekilde, erişim de sürekli değil, tek seferlik bir karardır.

Kişilere erişme

Kişilere erişmek basit bir iştir. Seçici açılmadan önce, hangi alanları (seçenekler: name, email ve telephone) ve birden çok kişiye mi yoksa yalnızca bir kişiye mi erişmek istediğinizi belirtebilirsiniz. Demo uygulamasını açarak bir Android cihazda bu API'yi test edebilirsiniz. Kaynak kodun ilgili bölümü aslında 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

Metin kopyalama ve yapıştırma

Şu ana kadar resimleri programatik olarak sistemin panosuna kopyalayıp yapıştırmanın bir yolu yoktu. Kısa süre önce Async Clipboard API'sine görüntü desteği ekledik.

artık resim kopyalayıp yapıştırabilirsiniz. Yeni özellik, panoya da resim yazabilmenizdir. Eşzamansız pano API'si bir süredir metinlerin kopyalanıp yapıştırılmasını destekliyordu. navigator.clipboard.WriteText() öğesini çağırarak metni panoya kopyalayabilir ve daha sonra, navigator.clipboard.readText() yöntemini çağırarak bu metni yapıştırabilirsiniz.

Resimleri kopyalama ve yapıştırma

Artık resimleri panoya da yazabilirsiniz. Bunun çalışması için resim verilerini bir blob olarak almanız ve daha sonra pano öğesi oluşturucusuna iletmeniz gerekir. Son olarak, navigator.clipboard.Write() öğesini ç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 almaktan ibarettir. Birden fazla video olabileceğinden, ilginizi çekeni bulana kadar bunları döngüye almanız gerekir. Güvenlik nedeniyle şu anda bu özellik PNG ile sınırlıdır 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'yi demo uygulamasında çalışırken görebilirsiniz. kaynak kodundaki ilgili snippet'ler yukarıya yerleştirilmiştir. Resimleri panoya kopyalama işlemi izniniz olmadan yapılabilir, ancak panodan yapıştırma işlemi için erişim izni vermeniz gerekir.

Erişim izni verdikten sonra resmi panodan okuyabilir ve uygulamaya yapıştırabilirsiniz:

9. Başardınız!

Tebrikler, codelab'in sonuna geldiniz. Bu e-posta, API'lerin çoğunun hâlâ değişim içinde olduğunu ve etkin bir şekilde üzerinde çalışıldığını hatırlatmak amacıyla gönderilmiştir. Bu nedenle geri bildirimleriniz ekibimiz için çok değerlidir. Yalnızca sizin gibi kişilerle etkileşiminiz bu API'leri doğru anlamamıza yardımcı olur.

Özellikler açılış sayfamıza sık sık göz atmanızı da öneririz. Listeyi güncel tutacağız ve üzerinde çalıştığımız API'lerle ilgili tüm ayrıntılı makalelere ilişkin işaretçiler sunacağız. Müzik dinlemeye devam edin!

Tom ve tüm Beceriler ekibi 🐡

Web Özellikleri codelab'i

1. Giriş ve kurulum