वाहन चित्र एक विशेष एसेट क्लास की तरह दिखते हैं, जब तक आप उन्हें इंटीग्रेट नहीं करते, तब वे एक फ्रंटएंड के लिए हर एसेट को चाहिए: पैरामीटर के साथ एक URL। यह लेख कंपोनेंट फ्रेमवर्क्स के लिए इंटीग्रेशन पैटर्न के बारे में चर्चा करता है। उदाहरण रिएक्ट में पढ़ते हैं, और पैटर्न व्यू, स्वेल्ट या किसी भी अन्य चीज़ में एक जैसा है जो एक <img> टैग रेंडर करता है।
API का आकार
हर इमेज एक भविष्यवाणी योग्य पथ पर रहती है: ब्रांड, मॉडल, वर्ष, वेरिएंट, ट्रिम, फिर व्यू। ऑप्शन क्वेरी पैरामीटर के रूप में यात्रा करते हैं। एक रिक्वेस्ट जैसे /api/Abarth/124_Spider_Abarth/2016/Basis/base/front_left?format=webp&width=1200 JSON के साथ मेटाडेटा और एक साइन किया हुआ image_url रिटर्न करता है, जो एक इमेज टैग के लिए तैयार है। ऑथेंटिकेशन एक x-api-key हेडर है; इसके अलावा एक npm पैकेज (npm install vehicleimagery) भी है जो इन कॉल्स को व्रैप करता है।
नियम एक: सर्वर-साइड पर सुलझाएं, क्लाइंट-साइड पर रेंडर करें
एकमात्र आर्किटेक्चरल निर्णय जो महत्वपूर्ण है: ब्राउज़र से API को कॉल न करें। आपका API की नहीं क्लाइंट कोड में होना चाहिए, और रिज़ॉल्यूशन स्टेप (आइडेंटिफ़ायर इन, वाहन आउट) वहां होना चाहिए जहाँ आपका डेटा रहता है। वाहन को बैकएंड या बिल्ड टाइम पर रिज़ॉल्व करें, पथ और साइन किए गए URL को वाहन रिकॉर्ड के साथ स्टोर करें, और घटकों को एक सामान्य प्रॉप के रूप में एक इमेज URL प्राप्त होने दें। घटक ट्री कभी भी एक वाहन API के बारे में नहीं जानता; यह स्ट्रिंग्स को रेंडर करता है।
- API की है API की कीज सर्वर-साइड पर रहती है, जहाँ कीजों का होना चाहिए
- एक कैटलॉग अपडेट पर एक रिज़ॉल्यूशन प्रति वाहन, पेज व्यू प्रति नहीं
- कॉम्पोनेंट्स डम्ब, टेस्टेबल और फ्रेमवर्क-पोर्टेबल रहें
प्रतिक्रियाशील छवियाँ मुफ्त आती हैं
क्योंकि आयाम अनुरोध पैरामीटर हैं, srcset तीन चौड़ाई पर वही URL है: 600, 1200 और 2000 पिक्सेल वेरिएंट्स का अनुरोध करें और ब्राउज़र को चुनने दें। format=webp को डिफ़ॉल्ट के रूप में सर्व करें; केवल वहां PNG पर वापस गिरें जहां आप वास्तव में कैनवास या प्रिंट में पारदर्शिता पर कॉम्पोज़िट करते हैं। एक लिस्टिंग ग्रिड पर पेलोड अंतर हल्का नहीं है।
उन विवरण जो अच्छे एकीकरण को अलग करते हैं।
- फोल्ड के नीचे सब कुछ लेज़ी-लोड करें; एक लिस्टिंग ग्रिड लेज़ी लोडिंग का क्लासिक उदाहरण है
- CSS में एस्पेक्ट रेशियो रिजर्व करें ताकि ग्रिड इमेजेज के आने पर रीफ्लो न हो
- वर्ष, बनावट, मॉडल, ट्रिम, रंग, कोण: आप पहले से ही रखे गए डेटा से वास्तविक अल्ट टेक्स्ट लिखें
- अपने स्टोर या CDN में इमेज URL कशे करें; कैटलॉग अपडेट पर पुनः रिज़ॉल्व करें, रिक्वेस्ट पर नहीं
- रिस्पॉन्स में errornotes एरे की जाँच करें। API आपको बताता है जब यह एक फॉलबैक का उपयोग करता है, उदाहरण के लिए, एक पड़ोसी मॉडल वर्ष
एक कंपोनेंट का पूरा काम
अंतिम स्थिति बेज़बूती है, जो बिंदु है: एक VehicleImage घटक जो एक रिज़ॉल्व्ड URL, एक चौड़ाई सुझाव और alt text लेता है, और srcset और lazy loading के साथ एक image tag render करता है। सभी वाहन बुद्धिमत्ता डेटा लेयर में रहती है जहाँ इसे कैश, लॉग और स्वैप किया जा सकता है। अगर आपका घटक जानता है कि एक VIN क्या है, तो सीमा गलत जगह पर है।
लोडिंग और एरर स्टेट्स
लॉन्च से पहले दो स्थितियों को डिजाइन ध्यान देने की जरूरत है। जब एक इमेज लोड हो रही है, तो एक फिक्स्ड-रेशियो स्केलेटन कार्ड को स्थिर रखता है, और क्योंकि हर वाहन एक ही फ्रेमिंग में आता है, तो एक सिल्हूट प्लेसहोल्डर पूरे कैटलॉग के लिए काम करता है। जब एक लुकअप फेल हो जाता है या एक वाहन का अभी तक कोई इमेज नहीं है, तो एक ब्रांडेड प्लेसहोल्डर पर फॉलबैक करें, न कि एक टूटे हुए इमेज आइकन पर, और पहचानकर्ता को लॉग करें ताकि गैप एक डेटा टिकट हो, न कि एक रहस्य।
पूर्ण पैरामीटर रेफरेंस और रिस्पॉन्स शेप्स API दस्तावेज़ीकरण में हैं; वाहन छवि API पृष्ठ VIN, प्लेट और रिज़ॉल्यूशन स्टेप के लिए लुकअप कवर करता है।
