סקירת חזית החנות של Vue - כל מה שאתה צריך לדעת

העתיד כבר כאן!

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

קצת מתיחה, אתה חושב?

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

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

שמעת פעם על Vue Storefront?

זה יישום מסחר אלקטרוני חדש בסדר, אבל הארכיטקטורה שלו אינה קרובה למה שכבר התרגלנו אליו. והנה העסקה- Vue Storefront הוא במקרה ה-PWA הגדול והשלם ביותר עד כה.

אבל מה זה אומר על מסחר אלקטרוני?

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

מהי אפליקציית אינטרנט פרוגרסיבית? 

זוכר כשאמרנו הנייד בקושי מתחיל? מסתבר שצדקנו כל הזמן. והנה ההוכחה.

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

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

כעת, אפליקציית אינטרנט מתקדמת מציעה את הטוב משני העולמות - אפליקציות אינטרנט ונייד. ליתר דיוק, PWA בנוי על טכנולוגיות אינטרנט טיפוסיות, כאשר כמה מתכונות ה-javascript העדכניות ביותר משמשות כתיבול. התוצאה הסופית היא אפליקציית אינטרנט שהאינטואיטיביות הכוללת שלה דומה מאוד לאפליקציית iOS או אנדרואיד מקורית.

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

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

ואיך זה רלוונטי למסחר אלקטרוני?

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

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

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

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

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

עכשיו, נחשו מה? Google הייתה בחזית ה-Progressive Web Apps מההתחלה, יחד עם Mozilla פלוס Microsoft.

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

• הם אמינים- PWAs מסוגלים לטעון מהר במיוחד גם בתנאי רשת גרועים, הודות לעובדי השירות שלהם שמירה מראש במטמון של משאבים קריטיים.
• הם מהירים - PWAs הם להערצה responsive כאשר אתה מתקשר איתם. הם שומרים באופן עקבי על אנימציות חדות וגלילה חלקה.
• הם מרתקים -חווית המשתמש כאן היא, ללא ספק, די סוחפת. PWAs מתנהגים כמו אפליקציות סלולריות מקוריות בדפדפן, וניתן להטמיע אותן בקלות על מסך הבית שלך. בנוסף, אם אתה צריך להפעיל מחדש משתמשים המפעילים את ה-PWA שלך, אתה תמיד יכול לשלוח הודעות דחיפה.

חברה אחת שראתה את היתרונות הללו ממקור ראשון היא טינדר בעבר, זמן טעינת האפליקציה הממוצע שלהם היה 11.91 שניות. אבל, לאחר שהציגו גרסת PWA שבמקרה הייתה קלה ב-90% מאפליקציית האנדרואיד המקורית שלהם, זמן הטעינה ירד במידה ניכרת. וכתוצאה מכך, רמות מעורבות המשתמשים שלהם עלו בצורה משמעותית למדי.

אם זה לא ישכנע אותך, אולי אוברס הסיפור יהיה. על ידי מינוף הכוח של PWAs, החברה הצליחה להמציא אפליקציה שיש לה מהירויות טעינה נהדרות אפילו ב-2G. וזמן הטעינה המתאים לו? ובכן, ה-PWA של 50kb שלהם מצליח בעקביות להיטען בפחות מ-3 שניות.

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

עם זאת, בואו נעבור כעת לקטע המעשי.

אז מה בדיוק חזית ויטרינה?

סקירת Vue Storefront – סקירה כללית

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

למרבה המזל, אינך זקוק למערכת מסחר אלקטרוני מיוחדת כדי להשתמש ב-Vue Storefront. מכיוון שכל המסגרת שלו בנויה באמצעות ארכיטקטורת Headless, אתה אמור להיות מסוגל להגדיר אינטגרציה עורפית משלך. זה, בקיצור, אומר ש-Vue Storefront הוא יישום גמיש מבחינה הוליסטית המסוגל להשתלב עם כל פלטפורמת מסחר אלקטרוני כדי לשמש כחזית.

עד כה, המפתחים שלה שילבו אותו עם Magento, Spree Commerce, Sylius, ו Shopify, Vue Storefront Core Team, בשיתוף פעולה הדוק עם Shopware Team, פיתח את האינטגרציה המקורית של Shopware PWA, ו-Vue Storefront הופך לחלק מכריע ב-commercetools Accelerator בתור חזית מומלצת בקוד פתוח עבור commercetools וחברה ב-MACH Alliance - הקבוצה של חברות טכנולוגיה שנוסדו על ידי commercetools, Contentstack, EPAM Systems ו-Valtech - כדי להפיץ ידע על הפוטנציאל של טכנולוגיה חסרת ראש.

ובהתחשב בכך שזה נתמך על ידי יותר מ 70 שותפים רשמיים, יותר מ 100 פרויקטים חיים קהילה ענפה של יותר מ 3000 למפתחים, אתה יכול לצפות לאינטגרציות נוספות שיושקו בקרוב מאוד. נראה ש- Vue Storefront רק מתחיל.

אבל שוב, למרות ששיעור החדשנות שלהם ראוי לשבח, אתה לא צריך לחכות שהצוות של Vue Storefront ימציא אינטגרציה לפלטפורמת המסחר האלקטרוני הנוכחית שלך. PWA זה מקודד ביסודו Vue.js, וזה מסתמך על Elasticsearch עבור מסד הנתונים שלו, כמו גם Node.js כשמדובר בשרת-API.

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

אם זה נשמע כמו משהו שהיית רוצה לעשות, Vue Storefront נגיש ב- GitHub. ומעניין, הוא משך עד כה יותר מ-7,000 כוכבים בפלטפורמה.

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

הרשה לי לענות על זה על ידי מעבר לך דרך תכונות שונות של Vue Storefront.

סקירת חזית החנות של Vue - תכונות עיקריות

חוויית משתמש

קודם כל. בהתחשב בחוויית משתמש היא המוקד העיקרי כאן, איך בדיוק מתפקד הממשק של Vue Storefront?

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

בעיה נוספת שתוכל לפתור באמצעות Vue Storefront היא הנפח של אפליקציות מקוריות. יישומי אנדרואיד, iOS ו-PC נעשים כבדים יותר מיום ליום עם כל תכונה חדשה שמפתחים מציגים. זו הסיבה שעדכוני אפליקציות ידועים לשמצה בכך שהם תופסים יותר שטח זיכרון.

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

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

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

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

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

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

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

תחילת העבודה

הצוות מאחורי Vue Storefront כנראה התחיל עם Magento מכיוון שזו אחת מפלטפורמות המסחר האלקטרוני הגדולות בעולם כיום. בנוסף, זוהי מערכת קוד פתוח המשלבת פונקציונליות מצוינת עם גמישות בלתי מוגבלת. זו הסיבה, למעשה, עסקים וארגונים מצטרפים מאוד Magento מְכוֹנִית הַתִזְמוֹרֶת.

אם אתה אחד מבין הרבים, אתה יכול להתחיל מיד על ידי ניצול היתרונות של Vue Storefront Magento יישום. התהליך, לעומת זאת, אינו פשוט כפי שאתה יכול לדמיין.

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

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

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

בסך הכל, הוכחת הרעיון אמורה לקחת לך כמה שבועות - אולי 4-6 לכל היותר. לאחר מכן באמצעות הנתונים שאספתם, תוכלו להמשיך ליישם גרסת PWA מלאה של אתר המסחר האלקטרוני שלכם באמצעות Vue Storefront. וככל שהזמן עובר, אתה יכול לעבוד בהדרגה על קוד הקוד הפתוח הבסיסי כדי להתאים את העסק שלך לצרכי השוק המשתנים ללא הרף.

רכיבי

חזית ויטרינה מגיע עם שני סוגי רכיבים שונים.

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

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

ובזמן שאתה בזה, אתה תבחין שכל רכיב ליבה מציע ממשק נבדל, אותו תוכל לעבוד מחדש בקלות דרך ערכת הנושא שלך.

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

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

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

ערכות נושא של חזית החנות

למרות ש-Vue Storefront ממשיכה להשתמש בערכות נושא מעוצבות מראש, אינך חייב להשתמש בהן כלל. במקום זאת, תוכל ליצור ערכות נושא משלך למסחר אלקטרוני, ולאחר מכן לשלב אותן עם ההיגיון העסקי הליבה של האפליקציה לחוויית מסחר אלקטרוני שלמה.

אבל, תזדקק לכישורי HTML ו-CSS כדי להשיג זאת. או לחילופין, פשוט לשכור מפתח מנוסה שיטפל בכל התהליך. Vue Storefront אפילו מאפשר לך להתאים אישית עוד יותר את רכיבי הליבה שלו אם תצטרך.

עם זאת, כשחושבים על זה, בניית ערכת נושא משלך מאפס נראית כמו תהליך מסורבל. חוץ מזה, חזית ויטרינה מגיע עם נושאים מוצקים משלו ב- src/ערכות נושא תיקייה.

האחרון ערכת נושא 2.0, למשל, נוצר באמצעות Google UX Retail Playbook. זה מתורגם לחוויית משתמש מותאמת היטב. אבל זה לא הכל. מכיוון שהוא גמיש מבחינה דינמית, אתה יכול לצבוט אותו בדרכים רבות ושונות כדי ליצור עיצוב מיוחד משלך.

תכונות מסחר אלקטרוני

להלן כמה מתכונות המסחר האלקטרוני שתמצאו ב-Vue Storefront:

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

סקירת חזית החנות של Vue - תמחור

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

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

מי צריך לשקול להשתמש ב-Vue Storefront? 

אין להכחיש ש- Vue Storefront הוא א revolutכלי יווני לשיפור חווית המשתמש של הלקוח שלך. ובהתחשב בכך שמדובר ביישום אינטרנט פרוגרסיבי בקוד פתוח, הוא זמין לכולם בחינם.

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

אבל, זה כלום לעומת היתרונות של PWAs. Vue Storefront שווה את המאמץ. לכן, אתה יכול לשקול לשכור מפתח מנוסה שיבצע זאת בהתאם. חוץ מזה, הארכיטקטורה ללא ראש הופכת אותו לאפליקציה גמישה שניתן להטמיע בכל פלטפורמת מסחר אלקטרוני.

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

זהו חשבון בריאות נקי מאיתנו כאן ב-ecommerce-platforms.com. עכשיו, אליך- מה המחשבות שלך?