Changedetection – Self-Hosted, Open Source, Change Monitoring of Web Pages

בתור אחד שמתחזק ומנהל מספר אתרים, וגם אוהב לקרוא מאמרים טכנולוגיים ולהתעדכן בנעשה, חשוב לי לקבל התראה כאשר עולה מאמר חדש או כאשר נעשה שינוי באחד האתרים שלי, למשל כאשר האתר נפרץ/הושחט או סתם תקלה ואחד האתרים לא עולה פתאום. Changedetection היא מערכת פשוטה העושה בדיוק את זה בצורה קלה ופשוטה להתקנה וניהול. במדריך זה אסביר אודות ההתקנה והשימוש בה. המערכת תותקן על גבי docker container ועל כן חשוב לוודא כי התקנתם docker על פי המדריך הבא.

חלק א' – התקנת המערכת

כפי שציינתי בהקדמה, את Changedetection נתקין על גבי docker-container. לצורך כך, ערכו את קובץ docker-compose.yaml שלכם והדביקו פנימה את הטקסט הבא:

שימו לב, שקובץ ה compose יתקין 2 קונטיינרים:

• changedetection.io – זהו הקונטיינר של המערכת עצמה.
• browser-chrome – קונטיינר זה מריץ סילניום המאפשר ביצוע בדיקות מתקדמות יותר ותמיכה בהרצת סקריפטים.

כעת, הריצו את הפקודה הבאה:

sudo docker-compose up -d

ותוכלו לראות כי הקונטיינרים עלו ורצים:

חלק ב' – הגדרות המערכת

בחלק זה של המדריך נעבור על הדרות ברירת המחדל עבור כל המערכת. בהמשך תוכלו להגדיר גם עבור כל בדיקה בנפרד.
בכניסה הראשונה למערכת נראה את המסך הבא:

כעת, לחצו על Settings בפינה העליונה של המסך והכנסו למסך ההגדרות.

בלשונית הכללית ניתן להגדיר את הפרטים הבאים:

• זמן מקסימלי שיעבור בין בדיקה לבדיקה, ברירת המחדל עומדת על 180 דקות.
• סיסמת כניסה למערכת, ברירת המחדל היא ללא סיסמה.
• כתובת בסיס למערכת, ברירת המחדל ניתנת לקביעה גם דרך משתנה סביבה.

כעת נעבור ללשונית Notifications:

• discord://webhook_id/webhook_token
• gitter://token/room
• hassio://hostname/accesstoken
• mailgun://user@hostname/apikey
• msteams://TokenA/TokenB/TokenC/
• onesignal://AppID@APIKey/PlayerID
• tgram://bottoken/ChatID

ועוד רבות אחרות. שימו לב כי יש לשים כל ערוץ התראה בשורה נפרדת.
בנוסף, ניתן להגדיר את כותרת ההתראה וכן את התוכן על ידי שימוש ב Placeholder Token, לפי הטבלה הבאה:

Token	Description
{base_url}	The URL of the changedetection.io instance you are running.
{watch_url}	The URL being watched.
{watch_uuid}	The UUID of the watch.
{watch_title}	The title of the watch.
{watch_tag}	The tag of the watch.
{preview_url}	The URL of the preview page generated by changedetection.io.
{diff}	The diff output – differences only
{diff_full}	The diff output – full difference output
{diff_url}	The URL of the diff page generated by changedetection.io.
{current_snapshot}	The current snapshot value, useful when combined with JSON or CSS filters

כעת נעבור ללשונית Fetching, בלשונית זו נגדיר את הדרך בה תתבצע הבדיקה, כאשר ברשותנו 2 אפשרויות:

• Basic – בדיקה מהירה באמצעות http client הבודקת את הטקסט.
• Webdriver – בדיקה באמצעות Chrome browser אשר מבצע גם רינדור של סקריפטים.

הלשונית האחרונה במסך ההגדרות היא לשונית ה Global Filters:

בלשונית זו נוכל להגדיר פילטרים שונים לבדיקה, כמו למשל להתעלם מרווחים, טאבים או תווים מיוחדים. ולאתרים בשפה האנגלית למשל להתעלם מהבדלים בין אות קטנה לגדולה.

שימו לב, שבניגוד להגדרות בטאבים האחרים, ההגדרות במסך זה יחולו בנוסף להגדרות שנעשה עבור כל בדיקה.

שלב ג' – הוספת בדיקות וניטורים

בחלק זה של המדריך אסביר כיצד להוסיף אתרים / כתובות לבדיקה וכיצד ניתן לראות את ההבדלים.
במסך הראשי של המערכת נוכל להוסיף אתרים / כתובות לבדיקה וכן לראות את האתרים הנמצאים במעקב ואת מצבם:

כעת, הכניסו את כתובת האתר שתרצו לנטר ולחצו על watch. שימו לב כי ניתן להוסיף תגית עבור אותו אתר. תגית זו תשמש בהמשך לקיבוץ כל האתרים תחתיה לטאב נפרד.

כעת, אחרי שהכנסנו את כתובת האתר, והוספנו אותו לרשימת הכתובות שבמעקב נוכל לראות כי הוא התווסף לרשימה:

• עמודה ראשונה, עם סמל של Pause מאפשרת להשהות את המעקב אחר הכתובת.
• עמודה שניה, כתובת האתר שבמעקב (אם מופיע סמל של Chrome סימן שהבדיקה משתמשת ב Webdriver).
• עמודה שלישית, כאן יוצג מתי בוצעה הבדיקה האחרונה.
• עמודה רביעית, מתי זוהה השינוי האחרון.
• בעמודה החמישית יוצגו כפתורים בהתאם לאפשרויות הזמינות לנו.

הכפתורים יהיו זמינים בהתאם למצב האתר, כאשר:

• Recheck – יבצע בדיקה יזומה לאתר (זמין תמיד).
• Edit – מאפשר לשנות את הגדרות הסריקה (כל ההגדרות שנסקרו בחלק הקודם של המדריך).
• Preview – תצוגה של האתר / טקסט כפי שנסרק (יופיע לאחר הסריקה הראשונה).
• Diff – יציג את השינויים שאותרו (יופיע רק במידה והתגלה שינוי בתוכן).

במידה ונתגלה שינוי, נוכל לראות שהסטטוס של Last Changed השתנה וכן הכפתור של Diff הפך להיות זמין:

בדוגמה הבאה נוכל לראות שינוי באתר שלי לאחר שהסרתי פוסט מהתצוגה. השורות שבירוק מציינות מידע שהתווסף והאדומות מידע שנמחק.

שימוש מועיל!