החל מיצירת סרטונים ואופטימיזציה של תמונות, ועד העלאת תמונות ועריכת מודלים תלת-ממדיים, Shopify אפליקציות מנהלות מדיה מכל מיני סיבות.
אם אתם מפתחים אפליקציה המאפשרת לסוחרים או ללקוחות לקיים אינטראקציה עם מדיה, סביר להניח שתצטרכו ליישם תכונה להעלאת קבצי מדיה.
לאחרונה התחלתי לעבוד על אפליקציה לניהול תמונות של אוספים בכמות גדולה, וגילתי שיש הרבה גורמים שיש לקחת בחשבון, אבל רוב עבודת הפיתוח הוקדשה לטיפול בהעלאות. ישנם מספר שלבים ליישום, כולל קבלת קבצים, אחסון ואימות. שלא לדבר על ביצועי ההעלאה.
בכל אפליקציה, מתן אפשרות למשתמשים להעלות קבצים הוא בדרך כלל מסובך. ישנן מגוון רחב של חששות, ואם הקובץ פשוט מועבר ל-API, זה יכול להרגיש כמו טיפול כפול לא יעיל.
תוך כדי חקר ה Shopify תיעוד למפתחים, ה ממשק API של מנהל GraphQL חשף תכונה נוחה: מפתחים יכולים ליצור כתובות URL זמניות המסוגלות לקבל קבצים ישירות ממשתמשים - ובכך לבטל את הטיפול הכפול.
מפתחים יכולים ליצור כתובות URL זמניות המסוגלות לקבל קבצים ישירות ממשתמשים - ובכך לבטל את הטיפול הכפול.
משמעות הדבר היא שהאפליקציה לא צריכה להתמודד עם קבצים וההעלאות לא מגיעות למרחקים ארוכים. זהו ניצחון עצום עבור האפליקציה. ו חוויית המשתמש. במאמר זה, נבחן את ארבעת השלבים ליצירת אפליקציה המאפשרת למשתמש להעלות קבצי מדיה ישירות אל Shopify.
בניית אפליקציות עבור סוחרי Shopify
בין אם אתם רוצים לבנות אפליקציות עבור Shopify App Store, מציעים שירותי פיתוח אפליקציות בהתאמה אישית, או מחפשים דרכים להגדיל את בסיס המשתמשים שלכם, תוכנית השותפים של Shopify תכין אתכם להצלחה. הצטרפו בחינם וקבלו גישה למשאבים חינוכיים, סביבות תצוגה מקדימה למפתחים והזדמנויות לחלוקת הכנסות חוזרות.
בניית תכונת העלאה באפליקציה שלך
בדוגמה זו אצור תהליך להעלאה ולשיוך תמונות לאוספים, אך אותה גישה כללית יכולה לחול על סוגי מדיה אחרים, כגון וידאו או קבצי מודל תלת-ממדיים.
אם אתם מעדיפים לדלג ישר לקוד המוגמר, תוכלו למצוא את פרויקט React המוגמר ב ריפו GitHub זה, או שאתה יכול צפה ב-commits כדי לראות כל שלב בפירוט. אחרת, בואו נצלול לסקירה כללית של כל שלב בתהליך.
1. הגדרת היסודות
נוכל להתחיל באמצעות ה- ממשק שורת פקודה (CPI) של אפליקציית Shopify כדי לאתחל אפליקציית Node.js. ממשק שורת הפקודה (CLI) של Shopify יוצר אפליקציה בחשבון השותף שלך, מייצר פרויקט React בסיסי (עם backend של Rails או Node.js) ומפעיל שרת עם נגרוק.
לאחר מכן ניתן להתקין את האפליקציה בחנות פיתוח, וניתן לגשת אליה ממנהל החנות. ניתן גם להשתמש בכלי Shopify App CLI כדי... מלאו את חנות הפיתוח שלכם במוצרים לדוגמה, אשר נצטרך כדי ליצור אוספים עליהם ניתן יהיה להחיל את התמונות שהעלינו.
"רכיב אזור השחרור מאפשר לסוחרים להעלות קבצים על ידי גרירה ושחרור של קבצים לאזור בדף, או הפעלת כפתור."
השלב הבא הוא לרשום את הקולקציות של החנויות ולהוסיף פולריס רכיב אזור הנפילה עבור כל אוסף. רכיב אזור השחרור מאפשר לסוחרים להעלות קבצים על ידי גרירה ושחרור של קבצים לאזור בדף, או הפעלת כפתור.
תלוי באופן שבו האפליקציה שלך עשויה להשתמש ממשק API להעלאת קבצים, ניתן להתאים אישית את רכיב אזור השחרור כך שיקבל רק סוגי קבצים ספציפיים, או להפעיל את תיבת הדו-שיח של הקובץ מפעולה במקום אחר בדף.
בעת שימוש באלמנט אזור השחרור, ודאו שאתם פועלים לפי שיטות העבודה המומלצות, מודיעים לסוחרים כאשר לא ניתן להעלות קובץ, ומספקים משוב לאחר שהקובץ נשמר והעלאתו מתחילה.
אולי תרצו גם: תחילת העבודה עם GraphQL.
2. הכנת המוטציות
כברירת מחדל, האפליקציה שנוצרת על ידי ממשק שורת הפקודה (CLI) של Shopify App כוללת לקוח אפולו, לקוח GraphQL הכולל ניהול מצבים. זה יאפשר לנו להשתמש ב-GraphQL כדי לבצע שאילתות על נתוני חנות ולשנות אובייקטים. אם אינך מכיר את GraphQL וכיצד ניתן להשתמש בו ב-Shopify כדי לאחזר ולעבוד עם נתונים, אני ממליץ לך לבדוק את... תיעוד למפתחים ב-GraphQL.
נצטרך להשתמש בשתי מוטציות GraphQL: stagedUploadsCreate כדי ליצור כתובת URL זמנית עבור התמונות שלנו, ו collectionUpdate כדי לעדכן בפועל את מאפיין התמונה של הקולקציה בצד של Shopify.
יש לעטוף את המוטציות בתוך ה gql פונקציה שתנתח אותם למסמכי שאילתה.
השמיים useMutation הפונקציה hook מחזירה פונקציה שנוכל לקרוא לה כשאנחנו מוכנים לבצע מוטציה ספציפית.
אולי תרצו גם: מגבלות קצב API ועבודה עם GraphQL.
3. צור את כתובת ה-URL הזמנית
ברגע שמשתמש משליך קובץ אל אזור הנפילה רכיב, אנו יכולים לבקש כתובת URL זמנית על ידי ביצוע stagedUploadsCreateהמוטציה מצפה ל... input תיאור הקובץ. מכיוון שאנו משתמשים ברכיב אזור שחרור, יש לנו גישה לאובייקט הקובץ כדי למשוך את השם, הסוג והגודל.
כמו כן, ראוי לציין כאן שמוטציה זו מקבלת מערך ויכולה ליצור מספר כתובות URL בו זמנית. לדוגמה שלי, ה- אזור הנפילה הוגדר כדי לאפשר קובץ יחיד בלבד. התגובה כוללת כתובת URL זמנית יחד עם פרמטרים המשמשים לאימות.
אולי תרצו גם: אחזור מהיר יותר של שדות מטא ב-Shopify עם GraphQL.
4. הכינו טופס והתחלו להעלות
כעת, לאחר שיש לנו את פרמטרי ה-URL והאימות, נוכל ליצור טופס חדש, להוסיף כל פרמטר ולצרף את הקובץ עצמו. העלאת קובץ התמונה בפועל מתחילה עם אחזור.
בהנחה שנקבל תגובה בסדר, ההעלאה בוצעה בהצלחה. השלב האחרון הוא להורות ל-Shopify להשתמש בתמונה החדשה הזו על ידי ביצוע collectionUpdate, אשר מצפה למזהה אוסף וכל מאפיינים שהשתנו (במקרה זה: תמונת האוסף).
כדי לבדוק שהגדרנו את כל זה נכון, תוכלו להעלות תמונה דרך האפליקציה, וכאשר תנווטו אל קולקציות באזור הניהול, תראו שהתמונה הוחלה על אוסף. אם אתם מציגים תצוגה מקדימה של תמונת אוסף באפליקציה שלכם, השינוי ישתקף באופן מיידי הודות לניהול המצבים של Apollo Client.
אולי תרצו גם: איך לבנות אפליקציית Shopify: המדריך המלא.
השתמש ב-GraphQL כדי להעלות קבצים לשיפור ביצועי האפליקציה
אמנם לא תמיד ניתן לשלוח קובץ ישירות ל-Shopify, אך שימוש בגישה זו, היכן שזה הגיוני, יכול לשפר את ביצועי האפליקציה שלכם ולהפחית את מרחק המעבר של קבצים. ממשק ה-API של GraphQL Admin יוצר גם הזדמנויות לאפליקציות לנהל סוגים רבים יותר של מדיה כמו סרטונים ומודלים תלת-ממדיים.
טכניקה זו מדגימה כיצד מאפיינים שונים של ממשק API של מנהל GraphQL ניתן להשתמש בו בשילוב עם רכיבי Polaris כדי ליישם פונקציונליות עבור האפליקציה שלך. יש שפע של פונקציונליות שניתן לחקור בממשק API זה שניתן להשתמש בה בעת פיתוח האפליקציות שלך.
מה דעתך על איך להעלות קבצים באמצעות GraphQL ו-React? יידע אותנו בהערות למטה!
