1. מבוא והגדרה
יכולות של אתרים
אנחנו רוצים לגשר על פער היכולות בין האינטרנט לבין רכיבי ה-Native, ולאפשר למפתחים ליצור בקלות חוויות שימוש מעולות באינטרנט הפתוח. אנחנו מאמינים שלכל מפתח צריכה להיות גישה ליכולות הדרושות כדי ליצור חוויית שימוש מצוינת באינטרנט, ואנחנו מחויבים לשיפור חוויית השימוש באינטרנט.
עם זאת, יש יכולות מסוימות – כמו גישה למערכת הקבצים וזיהוי של חוסר פעילות – שזמינות למערכת המקורית אבל לא זמינות באינטרנט. המשמעות של היכולות החסרות היא שסוגים מסוימים של אפליקציות לא ניתנים להצגה באינטרנט, או שהם פחות שימושיים.
אנחנו נעצב ונפתח את היכולות החדשות האלה באופן פתוח ושקוף תוך שימוש בתהליכי תקני הפלטפורמות הקיימים של פלטפורמות אינטרנט פתוחות, תוך קבלת משוב מוקדם ממפתחים וספקי דפדפנים אחרים כשנבצע ניסיון חוזר בעיצוב, כדי להבטיח עיצוב עם יכולת פעולה הדדית.
מה תפַתחו
ב-Codelab הזה תשחק עם כמה ממשקי API באינטרנט חדשים לגמרי או שזמינים רק באמצעות דגל. לכן, ה-Codelab הזה מתמקד בממשקי ה-API עצמם ובתרחישים לדוגמה שממשקי ה-API האלה נפתחים, ולא בפיתוח מוצר סופי ספציפי.
מה תלמדו
ה-Codelab הזה ילמד אותך לגבי המנגנונים הבסיסיים של מספר ממשקי API חדשניים. שימו לב שהמנגנונים האלה עדיין לא מוכנים לשימוש, ואנחנו מעריכים מאוד את המשוב שלכם לגבי תהליך הפיתוח.
למה תזדקק?
מאחר שממשקי ה-API שמוצגים ב-Codelab הזה נמצאים ממש ניסיוניים, הדרישות לכל API שונות. חשוב לקרוא בעיון את פרטי התאימות בתחילת כל קטע.
איך ניגשים ל-Codelab
ה-Codelab לא אמור לעבור עיבוד ברצף. כל קטע מייצג ממשק API עצמאי, לכן אתם יכולים לבחור את הנושאים שמעניינים אתכם ביותר.
2. Badging API
המטרה של Badging API היא להביא תשומת הלב לדברים שקורים ברקע. כדי לפשט את ההדגמה ב-Codelab הזה, כדאי להשתמש ב-API כדי את תשומת הלב למשהו שקורה בחזית. לאחר מכן תוכלו להעביר את המחשבה לדברים שקורים ברקע.
להתקנת Airhooer
כדי שה-API הזה יעבוד, אתם צריכים אפליקציית PWA שמותקנת במסך הבית. לכן, השלב הראשון הוא התקנת PWA, כמו airhorner.com הידוע לשמצה. כדי להתקין באופן ידני, לוחצים על לחצן ההתקנה בפינה השמאלית העליונה או משתמשים בתפריט שלוש הנקודות.
תוצג הודעת אישור. צריך ללחוץ על התקנה.
יש עכשיו סמל חדש ב-Dock של מערכת ההפעלה. לוחצים עליו כדי להפעיל את ה-PWA. לאפליקציה יהיה חלון אפליקציה משלו והיא תפעל במצב עצמאי.
|
|
הגדרת תג
עכשיו, אחרי שהתקנתם PWA, תצטרכו להשתמש בנתונים מספריים מסוימים (התגים יכולים לכלול רק מספרים) כדי שאפשר יהיה להציג אותם בתג. הדבר הישיר שצריך לספור ב-AirAirner, הוא אנחה, מספר הפעמים שבהן הוא קרן. למעשה, ניתן לנסות לקרן את הקרן ולבדוק את התג באמצעות אפליקציית Airhater. הוא נספר בכל פעם שמקרן.
אז איך זה עובד? בעיקרון, הקוד הוא:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
משמיעים את האווירהורן כמה פעמים ובודקים את הסמל של ה-PWA: הוא מתעדכן בכל פעם. אחת. בזמן האימון. של צלילי האווירהורן. ממש קל לעשות את זה.
ניקוי תג
המונה עולה ל-99 ואז מתחיל מחדש. אפשר גם לאפס אותו באופן ידני. פותחים את הכרטיסייה 'מסוף כלי הפיתוח', מדביקים את השורה שלמטה ומקישים על Enter.
navigator.setExperimentalAppBadge(0);
לחלופין, אפשר גם להסיר את התג על ידי ניקוי התג באופן מפורש, כפי שמוצג בקטע הקוד הבא. עכשיו הסמל של ה-PWA אמור להיראות שוב כמו בהתחלה, ברור וללא תג.
navigator.clearExperimentalAppBadge();
משוב
מה דעתך על ה-API הזה? כדי לעזור לנו, נשמח לקבל ממך תשובה קצרה לסקר הזה:
האם השימוש ב-API הזה היה אינטואיטיבי?
קיבלת את הדוגמה להרצה?
רוצה לספר לנו עוד? האם חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!
3. ממשק API של Native File System
Native File System API מאפשר למפתחים לבנות אפליקציות אינטרנט עוצמתיות שמקיימות אינטראקציה עם קבצים במכשיר המקומי של המשתמש. אחרי שמשתמש מעניק גישה לאפליקציית אינטרנט, ה-API הזה מאפשר לאפליקציות אינטרנט לקרוא או לשמור שינויים ישירות בקבצים ובתיקיות במכשיר של המשתמש.
קריאת קובץ
המשפט "שלום עולם" של Native File System API היא לקרוא קובץ מקומי ולקבל את התוכן שלו. יוצרים קובץ .txt פשוט ומזינים טקסט. בשלב הבא, עוברים לאתר מאובטח (כלומר, אתר שמוצג ב-HTTPS) כמו example.com ופותחים את מסוף כלי הפיתוח. מדביקים את קטע הקוד שבהמשך במסוף. מכיוון של-Native File System API נדרשת תנועת משתמש, אנחנו מצרפים handler של לחיצה כפולה למסמך. בהמשך נזדקק לכינוי של הקובץ, לכן נהפוך אותו למשתנה גלובלי.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
לאחר מכן לוחצים לחיצה כפולה במקום כלשהו בדף example.com, מופיע בוחר קבצים.
בוחרים את הקובץ .txt שכבר יצרתם. תוכן הקובץ יחליף את התוכן בפועל של body של example.com.
שמירת קובץ
לאחר מכן, אנחנו רוצים לבצע כמה שינויים. לכן נדביק את קטע הקוד בשדה body כדי שתהיה אפשרות לערוך אותו. עכשיו אפשר לערוך את הטקסט כאילו הדפדפן הוא עורך טקסט.
document.body.contentEditable = true;
עכשיו אנחנו רוצים להחזיר את השינויים האלה לקובץ המקורי. לכן, אנחנו צריכים את הכותב בכינוי של הקובץ, וכך ניתן להשיג אותו על ידי הדבקת קטע הקוד שלמטה במסוף. אנחנו צריכים תנועת משתמש שוב, אז הפעם אנחנו ממתינים לקליק על המסמך הראשי.
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
עכשיו כשלוחצים על המסמך (בלי לחיצה כפולה), מופיעה בקשה להרשאה. כשנותנים הרשאה, התוכן של הקובץ יהיה זהה לתוכן שערכתם ב-body בעבר. כדי לאמת את השינויים, פותחים את הקובץ בעורך אחר (או מתחילים את התהליך שוב על ידי לחיצה כפולה על המסמך ופתיחה מחדש של הקובץ).
מעולה! יצרת את הכלי לעריכת טקסט הקטן ביותר בעולם [citation needed].
משוב
מה דעתך על ה-API הזה? כדי לעזור לנו, נשמח לקבל ממך תשובה קצרה לסקר הזה:
האם השימוש ב-API הזה היה אינטואיטיבי?
קיבלת את הדוגמה להרצה?
רוצה לספר לנו עוד? האם חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!
4. Shape Detection API
ה-API של זיהוי צורה מספק גישה לגלאי צורות מואצות (לדוגמה, לזיהוי פנים אנושיות) ופועל על תמונות סטילס ו/או פידים של תמונות חיות. במערכות הפעלה יש גלאי תכונות בעלי ביצועים טובים שעברו אופטימיזציה, כמו FaceDetector של Android. ממשק ה-API לזיהוי צורה פותח את ההטמעות המקוריות האלה וחושף אותן באמצעות קבוצה של ממשקי JavaScript.
בשלב הזה, התכונות הנתמכות הן זיהוי פנים באמצעות הממשק של FaceDetector, זיהוי ברקוד דרך ממשק BarcodeDetector וזיהוי טקסט (זיהוי תווים אופטי) דרך הממשק של TextDetector.
זיהוי פנים
זיהוי פנים הוא תכונה מרתקת ב-Form Detection API. כדי לבדוק זאת, אנחנו זקוקים לדף עם פנים. הדף הזה עם הפנים של המחבר הוא התחלה טובה. זה ייראה בערך כמו בצילום המסך שלמטה. בדפדפן נתמך, המערכת תזהה את תיבת הגבול של הפנים ואת ציוני הדרך של הפנים.
כדי לראות כמה קוד נדרש כדי לעשות זאת, אפשר ליצור רמיקס או לערוך את הפרויקט ב-Glitch, במיוחד את קובץ script.js.
אם רוצים לפעול באופן דינמי לגמרי ולא רק עם הפנים של המחבר, אפשר לעבור לדף תוצאות החיפוש של Google שמלא בפנים בכרטיסייה פרטית או במצב אורח. בדף הזה, פותחים את הכלים למפתחים ב-Chrome על ידי לחיצה ימנית במקום כלשהו ואז לחיצה על בדיקה. לאחר מכן, בכרטיסייה 'מסוף', מדביקים את קטע הקוד שלמטה. הקוד ידגיש פנים שזוהו באמצעות תיבה אדומה שקופה למחצה.
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);
}
});
תוכלו לראות שיש כמה הודעות DOMException ולא כל התמונות נמצאות בתהליך עיבוד. הסיבה לכך היא שתמונות בחלק העליון והקבוע מופיעות כמזהי URI של נתונים ולכן ניתן לגשת אליהן, ואילו התמונות בחלק הנגלל מגיעות מדומיין אחר שאינו מוגדר לתמיכה ב-CORS. לצורך ההדגמה, אין צורך לדאוג.
זיהוי של ציון דרך של פנים
בנוסף לזיהוי פנים בלבד, macOS תומכת גם בזיהוי של ציוני דרך לזיהוי פנים. כדי לבדוק את הזיהוי של ציוני דרך לפי פנים, מדביקים במסוף את קטע הקוד הבא. תזכורת: השורות של ציוני הדרך לא מושלמות בגלל הכתובת crbug.com/914348, אבל אפשר לראות מה הכיוון של המקום ומהי מידת העוצמה של התכונה הזו.
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);
}
});
זיהוי ברקוד
התכונה השנייה של ממשק ה-API לזיהוי צורה היא זיהוי ברקוד. כמו קודם, אנחנו צריכים דף עם ברקודים, כמו זה. כשתפתחו אותו בדפדפן, יוצגו לכם קודי ה-QR השונים מפוענחים. אפשר ליצור רמיקס או עריכה של פרויקט Glitch, במיוחד את קובץ script.js כדי לראות איך עושים זאת.
אם אתם רוצים משהו דינמי יותר, נוכל שוב להשתמש בחיפוש תמונות של Google. הפעם בדפדפן, מנווטים לדף תוצאות החיפוש ב-Google בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד שלמטה בכרטיסייה של מסוף כלי הפיתוח ל-Chrome. אחרי רגע קצר, יתווספו לברקודים המזוהים את הערך הגולמי וסוג הברקוד.
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);
}
});
זיהוי טקסט
התכונה הסופית של ממשק ה-API לזיהוי צורה היא זיהוי טקסט. עכשיו אתם כבר יודעים את הפרט הזה: אנחנו צריכים דף עם תמונות שמכילות טקסט, כמו הדף הזה, עם תוצאות הסריקה ב-Google Books. בדפדפנים נתמכים, תראו את הטקסט המזוהה ותיבה תוחמת (bounding box) תופיע מסביב לקטעי טקסט. אפשר ליצור רמיקס או עריכה של פרויקט Glitch, במיוחד את קובץ script.js כדי לראות איך עושים זאת.
כדי לבדוק את זה באופן דינמי, יש לעבור אל דף תוצאות החיפוש הזה בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד שלמטה בכרטיסייה של מסוף כלי הפיתוח ל-Chrome. צריך להמתין קצת זמן מה, ניתן יהיה לזהות חלק מהטקסט.
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);
}
});
משוב
מה דעתך על ה-API הזה? כדי לעזור לנו, נשמח לקבל ממך תשובה קצרה לסקר הזה:
האם השימוש ב-API הזה היה אינטואיטיבי?
קיבלת את הדוגמה להרצה?
רוצה לספר לנו עוד? האם חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!
5. Web Share Target API
Web Share Target API מאפשר לאפליקציות אינטרנט מותקנות להירשם במערכת ההפעלה הבסיסית כיעד לשיתוף, כדי לקבל תוכן משותף מ-Web Share API או מאירועי מערכת, כמו לחצן השיתוף ברמת מערכת ההפעלה.
התקנה של PWA כדי לשתף באמצעותה
בתור התחלה, צריך PWA שאפשר לשתף איתה. הפעם, Airhorer (למזלך) לא יטפל בנושא, אבל אפליקציית ההדגמה של Web Share Target תומכת בכם. מתקינים את האפליקציה במסך הבית של המכשיר.
איך לשתף פריט ל-PWA
בשלב הבא, תצטרכו משהו לשתף, כמו תמונה מ-Google Photos. משתמשים בלחצן השיתוף ובוחרים באפליקציית ה-PWA של אוסף התמונות כיעד שיתוף.
כשמקישים על סמל האפליקציה, מגיעים ישירות לאפליקציית אוסף התמונות PWA, והתמונה נמצאת שם.
אז איך זה עובד? כדי לגלות זאת, אפשר לעיין במניפסט של אפליקציית האינטרנט ל-Scrapbook. ההגדרה שמאפשרת להפעיל את Web Share Target API נמצאת בנכס "share_target" במניפסט שבשדה "action" שלו מפנה לכתובת URL שמקושטת עם פרמטרים כמו שמצוינים ב-"params".
לאחר מכן צד השיתוף מאכלס את תבנית כתובת ה-URL הזו בהתאם (באמצעות פעולת שיתוף או שליטה באופן פרוגרמטי על ידי המפתח באמצעות Web Share API), כדי שהצד המקבל יוכל לחלץ את הפרמטרים ולעשות איתם פעולה כלשהי, כמו להציג אותם.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
משוב
מה דעתך על ה-API הזה? כדי לעזור לנו, נשמח לקבל ממך תשובה קצרה לסקר הזה:
האם השימוש ב-API הזה היה אינטואיטיבי?
קיבלת את הדוגמה להרצה?
רוצה לספר לנו עוד? האם חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!
6. ממשק API של Wake Lock
כדי לא לרוקן את הסוללה, רוב המכשירים עוברים במהירות למצב שינה כשהם לא פעילים. אמנם לרוב זה בסדר, אבל יש אפליקציות שצריכות להשאיר את המסך או את המכשיר במצב שינה כדי להשלים את הפעולה. ממשק ה-API של נעילת המסך מאפשר למנוע מהמכשיר לעמעם ולנעול את המסך, או למנוע מהמכשיר לעבור למצב שינה. היכולת הזו מאפשרת ליהנות מחוויות חדשות, שעד עכשיו דרשו אפליקציית נייטיב.
הגדרת שומר מסך
כדי לבדוק את Wake Lock API, קודם עליך לוודא שהמכשיר יורשה לעבור למצב שינה. לכן, בחלונית ההעדפות של מערכת ההפעלה, צריך להפעיל שומר מסך שבחרתם ולוודא שהוא מתחיל לפעול אחרי דקה. תוודאי שהוא פועל: תשאיר את המכשיר לבד למשך הזמן הזה בדיוק (כן, אני יודע, זה כואב). בצילומי המסך למטה רואים macOS, אבל אפשר כמובן לנסות את זה במכשיר Android נייד או בכל פלטפורמה נתמכת למחשב.
הגדרה של נעילת מסך במצב שינה
עכשיו, אחרי שמוודאים ששומר המסך פועל, אפשר להשתמש בנעילת מצב שינה מסוג "screen" כדי למנוע משומר המסך לבצע את הפעולה. עוברים לאפליקציית ההדגמה Wake Lock ולוחצים על Activate (הפעלה).
screen תיבת הסימון Wake Lock.
החל מאותו רגע, התכונה 'נעילת מצב שינה' פעילה. אם תתאזר בסבלנות עד שתשארו את המכשיר ללא שינוי למשך דקה, תראו עכשיו ששומר המסך אכן לא הופעל.
איך זה פועל? כדי לבדוק אם היא מופיעה, עוברים אל פרויקט Glitch של אפליקציית ההדגמה Wake Lock ובודקים את script.js. עיקרי הקוד נמצאים בקטע הקוד שלמטה. פותחים כרטיסייה חדשה (או משתמשים בכל כרטיסייה שפתחתם) ומדביקים את הקוד שבהמשך במסוף כלים למפתחים ב-Chrome. כשלוחצים על החלון, אמור להופיע חסימת מצב שינה פעילה למשך 10 שניות בדיוק (עיינו ביומני המסוף), ושומר המסך לא אמור לפעול.
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);
}
משוב
מה דעתך על ה-API הזה? כדי לעזור לנו, נשמח לקבל ממך תשובה קצרה לסקר הזה:
האם השימוש ב-API הזה היה אינטואיטיבי?
קיבלת את הדוגמה להרצה?
רוצה לספר לנו עוד? האם חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!
7. Contact Picker API
אנחנו שמחים מאוד להשתמש ב-Contact Picker API. היא מאפשרת לאפליקציית אינטרנט לגשת לאנשי הקשר דרך מנהל אנשי הקשר המקורי של המכשיר, כך שלאפליקציית האינטרנט תהיה גישה לאנשי הקשר שמות, כתובות אימייל ומספרי טלפון. תוכלו לציין אם אתם רוצים רק איש קשר אחד או יותר, ואם תרצו, אם תרצו, את כל השדות או רק קבוצת משנה של שמות, כתובות אימייל ומספרי טלפון.
שיקולי פרטיות
לאחר שהבורר נפתח, תוכלו לבחור את אנשי הקשר שאתם רוצים לשתף. תוכלו לראות שאין אפשרות של 'בחירת הכול' שהיא מכוונת: אנחנו רוצים לשתף החלטה מתוך מודעות. באופן דומה, לא תהיה גישה מתמשכת, אלא החלטה חד-פעמית.
גישה לאנשי הקשר
הגישה לאנשי הקשר היא משימה פשוטה. לפני שהבוחר ייפתח, ניתן לציין את השדות הרצויים (האפשרויות הן name, email ו-telephone) ואם רוצים לגשת למספר אנשי קשר או רק לאיש קשר אחד. אפשר לבדוק את ה-API הזה במכשיר Android על ידי פתיחה של אפליקציית ההדגמה. הקטע הרלוונטי בקוד המקור הוא בעצם קטע הקוד הבא:
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
העתקה והדבקה של טקסט
עד עכשיו לא הייתה דרך פרוגרמטית להעתיק תמונות ולהדביק אותן ללוח של המערכת. לאחרונה הוספנו תמיכה בתמונות ל-API של הלוח האסינכרוני,
כדי שעכשיו תוכלו להעתיק ולהדביק תמונות. חדש הוא שניתן גם לכתוב תמונות ללוח. בינתיים, ממשק ה-API האסינכרוני של הלוח תמך בהעתקה ובהדבקה של טקסט. אפשר להעתיק טקסט ללוח על ידי קריאה ל-navigator.clipboard.writeText() , ולאחר מכן להדביק את הטקסט באמצעות קריאה ל-navigator.clipboard.readText().
העתקה והדבקה של תמונות
עכשיו אפשר גם לכתוב תמונות בלוח העריכה. כדי שהפתרון הזה יעבוד, אתם צריכים את נתוני התמונה כ-blob שאותם מעבירים ל-constructor של הפריטים בלוח העריכה. לסיום, אפשר להעתיק את הפריט הזה מהלוח על ידי שליחת קריאה ל-navigator.clipboard.write().
// 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);
}
תהליך ההדבקה של התמונה בחזרה מהלוח נראה די מעורב, אבל למעשה פשוט צריך להחזיר את ה-blob מהלוח. התהליך יכול להיות מספר פריטים, כך שתצטרכו לעבור על כל אחד מהם עד שתקבלו את המוצר שמעניין אתכם. מטעמי אבטחה, האפשרות הזו מוגבלת כרגע לתמונות בפורמט PNG, אבל יכול להיות שבעתיד תהיה תמיכה בפורמטים נוספים של תמונות.
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);
}
}
אפשר לראות את ה-API הזה בפעולה באפליקציית הדגמה. קטעי הקוד הרלוונטיים מקוד המקור שלו מוטמעים למעלה. ניתן להעתיק תמונות ללוח ללא הרשאה, אבל צריך להעניק גישה כדי להדביק מהלוח.
אחרי שתעניקו גישה, תוכלו לקרוא את התמונה מהלוח ולהדביק אותה באפליקציה:
9. עשית את זה!
כל הכבוד, הגעת לסוף ה-Codelab. תזכורת: רוב ממשקי ה-API עדיין בתהליכי עבודה פעילים. לכן הצוות מודה לך מאוד על המשוב, כי רק אינטראקציה עם אנשים כמו שלך תעזור לנו להגדיר את ממשקי ה-API האלה כמו שצריך.
מומלץ גם לעיין בתדירות גבוהה בדף הנחיתה בנושא יכולות. אנחנו נעדכן אותו, והוא יכלול הפניות לכל מאמרי העזרה בנושא ממשקי ה-API שעליהם אנחנו עובדים. כל הכבוד!
תום וכל צוות היכולות 🐡