יצירת ממשקי משתמש באמצעות שירות ה-HTML מבוססת על דפוסים ותרגילים רבים שדומים לאלה של סוגים אחרים של פיתוח אינטרנט. עם זאת, יש כמה היבטים ייחודיים לסביבת Apps Script או שראוי להדגיש אותם. בהמשך מפורטות כמה שיטות מומלצות שכדאי לזכור כשמפתחים ממשקי משתמש משלכם לשירותי HTML.
HTML, CSS ו-JavaScript נפרדים
שמירת כל קוד ה-HTML, ה-CSS וה-JavaScript בקובץ אחד עלולה להקשות על הקריאה והפיתוח של הפרויקט. ב-Apps Script נדרש קוד בצד הלקוח שיוצג בקובצי .html, אבל עדיין אפשר להפריד את קובצי ה-CSS ואת קובצי ה-JavaScript בצד הלקוח לקבצים שונים, ואז לכלול אותם בדף ה-HTML הראשי באמצעות פונקציה בהתאמה אישית.
בדוגמה הבאה מוגדר קובץ include() מותאם אישית בצד השרת בקובץ Code.gs כדי לייבא את התוכן של הקובץ Stylesheet.html ושל הקובץ JavaScript.html לקובץ Page.html. כשמפעילים את הפונקציה באמצעות סקריפטים של הדפסה, היא מייבאת את תוכן הקובץ שצוין לקובץ הנוכחי. שימו לב שהקבצים הכלולים מכילים תגי <style> ו-<script> כי הם קטעי HTML ולא קובצי .css או .js טהורים.
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>Stylesheet.html
<style>
p {
color: green;
}
</style>JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>טעינת נתונים באופן אסינכרוני, ולא בתבניות
אפשר להשתמש ב-HTML בתבנית כדי ליצור במהירות ממשקים פשוטים, אבל צריך להגביל את השימוש בו כדי להבטיח שממשק המשתמש שלכם יהיה רספונסיבי. הקוד בתבניות מופעל פעם אחת כשהדף נטען, ואין שליחת תוכן ללקוח עד שהעיבוד מסתיים. משימות ממושכות בקוד ה-Scriptlet עלולות לגרום לממשק המשתמש להופיע באיטיות.
אפשר להשתמש בתגי scriptlet למשימות מהירות חד-פעמיות, כמו הוספת תוכן אחר או הגדרת ערכים סטטיים. את כל שאר הנתונים צריך לטעון באמצעות קריאות google.script.run.
תכנות באופן אסינכרוני כזה קשה יותר, אבל היא מאפשרת לממשק המשתמש להיטען מהר יותר, ומספקת לו הזדמנות להציג למשתמש גלגל מסתובב או הודעת טעינה אחרת.
לא לעשות – לטעון בתבניות
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>מומלץ – טעינה אסינכרונית
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>טעינת משאבים באמצעות HTTPS
אם הדף מוצג בIFRAME
מצב ארגז החול החדש יותר, כולל קובצי JavaScript או CSS שלא מוצגים באמצעות HTTPS, עלולות להיגרם שגיאות כמו זו שמצוינת בהמשך.
תוכן מעורב: הדף בכתובת 'https://...' נטען דרך HTTPS, אבל הבקשה שלו הייתה לסקריפט לא מאובטח בכתובת 'http://...'. הבקשה הזו נחסמה. התוכן צריך להיכלל ב-HTTPS.
רוב הספריות הפופולריות תומכות גם ב-HTTP וגם ב-HTTPS, כך שהמעבר הוא בדרך כלל עניין של הוספת 's' לכתובת ה-URL.
שימוש בהצהרה על סוג המסמך ב-HTML5
אם הדף מוצג באמצעות IFRAME
מצב ארגז חול החדש יותר, חשוב לכלול את קטע הקוד הבא בחלק העליון של קובץ ה-HTML.
<!DOCTYPE html>
החרגות מסוג המסמך מציינות לדפדפן שעיצבתם את הדף לדפדפנים מודרניים, ושהוא לא אמור לעבד את הדף באמצעות מצב תאימות (quirks). גם אם אתם לא מתכננים להשתמש ברכיבי HTML5 מודרניים או בממשקי API של JavaScript, כדאי לעשות זאת כדי לוודא שהדף יוצג בצורה תקינה.
טעינת JavaScript בסוף
מפתחי אינטרנט רבים ממליצים לטעון קוד JavaScript בחלק התחתון של הדף כדי לשפר את המהירות של התגובה, והדבר חשוב עוד יותר בשירות HTML. העברת תגי <script> לסוף הדף תאפשר לתוכן ה-HTML להירטן לפני עיבוד ה-JavaScript, וכך תוכלו להציג למשתמשים ספינר או הודעה אחרת.
ניצול היתרונות של jQuery
jQuery היא ספריית JavaScript פופולרית, שבה קל לבצע משימות נפוצות רבות בפיתוח אתרים.