אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » ספריות ומודולים » hopscotch ליצירת סיור באתר שלכם

hopscotch ליצירת סיור באתר שלכם

רן בר-זיק דצמבר 31, 2017 7:07 am 5 תגובות

רכיב ג׳אווהסקריפטי ממש פשוט ליצירת הסברים/מדריכים באתר שלכם

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

לא מזמן קיבלתי משימה מעניינת בעבודה – ליצור walk through. סוג של סיור שבו אני מציג יכולות שאנחנו מוסיפים למוצר שאני מפתח. הרעיון הוא לאפשר ללקוחות להבין פיצ׳רים יותר טוב. יש לא מעט ספריות שעושות את זה. אני בחרתי ב-hopscotch ואני הולך לדבר עליה בפוסט הזה. מדובר בספריה פשוטה ממש לשימוש. כל כך פשוטה שלהטמיע אותה לוקח דקות.

אז איך זה עובד? מדובר בספרית ג׳אווהסקריפט ו-CSS. כדי להשתמש בה, צריך לכלול את שני הקבצים של הספריה אצלכם.


<link rel="stylesheet" href="css/hopscotch.css"></link>
<script src="js/hopscotch.js"></script>

אם יש לכם webpack, אז בהחלט אפשר להשתמש ב npm כדי להשתמש בה. ברגע שהכנסתם את המודול הזה, אפשר להשתמש ב-import. או ב require.ensure אם אתם רוצים לעשות lazyload ולטעון את הקבצים רק במידה ומדובר בלקוח חדש (למשל)

למשל, פה:


  loadHopScotch() {
    return new Promise((resolve) => {
      require.ensure(['hopscotch'], (require) => {
        const hopscotch = require('hopscotch/dist/js/hopscotch.js');
        require('hopscotch/dist/css/hopscotch.css');
        resolve(hopscotch);
      });
    });
  }

או, אם אתם משתמשים ב-q:


  loadHopScotch() {
    const deferred = this.q.defer();
    require.ensure(['hopscotch'], (require) => {
      const hopscotch = require('hopscotch/dist/js/hopscotch.js');
      require('hopscotch/dist/css/hopscotch.css');
      deferred.resolve(hopscotch);
    });
    return deferred.promise;
  }

אבל זה כמובן לא חובה. אם אתם משתמשים באתר פשוט תכניסו את הקבצים הארורים.

עכשיו נשאר לכתוב את הקוד!. בגדול, אם השתמשתם ב-lazyload שהראיתי לעיל עם webpack, אז הוא מחזיר אובייקט hopscotch, אבל אם הכללתם את הקבצים, יהיה לכם אובייקט ב-window.

יצירת הסיור היא בעצם אובייקט ג׳אווהסקריפטי שנראה ככה:


const tour = {
                id: 'hello-internet-israel',
                steps: [
                    {
                        title: 'הסבר ראשוני',
                        content: 'בפסקת הפתיחה אני מקשקש על הספריה הזו ומסביר מה אני הולך להדגים',
                        target: 'interintro',
                        placement: 'left'
                    },
                    {
                        title: 'קוד שצריך להכניס',
                        content: 'יש פה המון קוד אבל הוא ארוז יפה ואפשר להכניס אותו בקלות',
                        target: '.some-class',
                        placement: 'bottom'
                    },
                    {
                        title: 'וובפאק',
                        content: 'כאן אני מכניס המון בלגן שרלוונטי למי שיש לו וובפאק שאורז את האפליקציה שלו',
                        target: 'webpack-info',
                        placement: 'top'
                    }
                ]
            };
window.hopscotch.startTour(tour);

די פשוט, לא? הדבר הכי חשוב הוא id שחייבים אותו. ה-target יכול להיות מחרוזת טקסט של id או class. ה-title הוא הכותרת וה-content הוא התוכן של החלון. מה שנשאר לעשות זה לבחור איפה חלונית ההסבר תופיע ופיניטו לה קומדיה. לוקחים את האובייקט הזה וקוראים למתודת startTour של hopscotch וזהו! פשוט מאוד. אפשר לראות שהתמיכה ב-RTL עדיין לא קיימת, למרות שאפשר להתגבר על זה עם קצת CSS והנושא בטיפול.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
JavaScript

5 תגובות

  1. דוד הגב דצמבר 31, 2017 בשעה 10:53 am

    איזה עוד ספריות יש ולמה בחרת דווקא בה?

  2. דוד הגב דצמבר 31, 2017 בשעה 10:55 am

    איזה עוד ספריות יש ולמה בחרת דווקא בזו?

    • רן בר-זיק הגב דצמבר 31, 2017 בשעה 2:34 pm

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

  3. יניב סלמן הגב ינואר 6, 2018 בשעה 10:01 am

    אחלה דבר לא הכרתי

  4. בן הגב ינואר 15, 2018 בשעה 10:27 pm

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד