النمذجة باستخدام البيانات الحقيقية - برنامج تعليمي للمبرمجين

Framer هي واحدة من أقوى أدوات النماذج الأولية للتطبيق الموجودة. يمكن استخدامه للتصميم لأي جهاز محمول ، من iOS إلى Android. إذا كنت تعرف القليل من البرمجة ، فإن إمكانياتها غير محدودة تقريبًا لأنها تعتمد على CoffeeScript - وهي لغة برمجة سهلة نسبيًا. لن يكون المصمم مقيدًا إلا بمهاراته في التخيل والبرمجة.

لمتابعة هذه المقالة ، يجب أن يكون لديك على الأقل معرفة أساسية ب Framer. سوف نستخدم وضع التصميم ومحرر الكود. إذا كنت ترغب في استكمال معرفتك ، يمكنك قراءة مقالاتنا السابقة عن Framer: كيفية إنشاء نماذج أولية تفاعلية مذهلة ، 7 تفاعلات دقيقة بسيطة لتحسين نماذجك الأولية

لماذا يجب عليك استخدام Framer مع البيانات الحقيقية

مشكلة شائعة في التصميم أو النماذج الأولية هي نقص البيانات الحقيقية. عندما يتم تصميم وظيفة جديدة لمنتج موجود ، فبدلاً من استخدام محتوى وهمي ، يمكن عرض محتوى منطقي وملائم وحقيقي المظهر. يمكن أن يكون أي نوع من البيانات — صور المستخدم ، على سبيل المثال. بهذه الطريقة ، لن يضيع الوقت في محاولة ابتكار محتوى زائف ، وسيتم تجنب الأخطاء التي تأتي من استخدام البيانات غير الصالحة. جميع البيانات المتاحة مرئية ، ويمكن تحديد المحتوى الذي قد لا يزال مطلوبًا - ونتيجة لذلك ، يكون التواصل مع أصحاب المصلحة وفريق التطوير أكثر فعالية. من الممكن أيضًا التصميم حول سيناريوهات حالة استخدام مختلفة.

عندما نصمم وظيفة جديدة ، فإننا ننسى أحيانًا أنه ليس كل ملف تعريف مستخدم مكتمل ، ولا تحتوي جميع الفئات في المتجر على نفس الكمية من المنتجات ، ولا يعرض كل منتج نفس البيانات. يمكن مقارنة النماذج الأولية ببيانات حقيقية ببناء شيء من كتل LEGO: بدلاً من العمل بأشكال خيالية فضفاضة ، يمكننا استخدام المكونات الموجودة من الصندوق وبناء شيء حقيقي.

لنضع نموذجًا أوليًا ببيانات حقيقية!

تبدأ المتعة الحقيقية في Framer عند استخدام بيانات حقيقية يتم تحديثها في الوقت الفعلي من قاعدة بيانات. يمكن تطبيق أي نوع من البيانات ، على سبيل المثال: ملفات تعريف المستخدمين مع الصور وعناوين الشوارع وأسعار الأسهم وأسعار الصرف وتوقعات الطقس ومعلومات المعاملات - أي بيانات تستخدمها التطبيقات عادةً. يبدأ تصميم منتج قوي حقًا في الحدوث عندما تجمع بين النماذج الأولية في الوقت الفعلي والبيانات الحقيقية. ولن يكون من الضروري بعد الآن استخدام أجزاء نصية نصية لاتينية إسكية سيئة السمعة "lorem ipsum".

واجهة برمجة التطبيقات باستخدام البيانات الحقيقية: ما هي؟ كيف نستخدمها؟

واجهة برمجة التطبيقات (API) هي الواجهة التي نتواصل من خلالها مع التطبيقات. تخيل التطبيق كمطعم. الغذاء هو البيانات وطاقم الانتظار هو API. تسأل طاقم الانتظار عن الطعام - هذا كل ما عليك القيام به. يتولى طاقم الانتظار (API) والمطبخ (قاعدة البيانات) الاهتمام بالباقي.

يتعلق الأمر كله بالوصول إلى البيانات الحقيقية الموجودة في قاعدة بيانات معينة.

يحتوي كل تطبيق على واجهة برمجة تطبيقات تسمح بالتقاط البيانات وعرضها. بعض واجهات برمجة التطبيقات متاحة للجمهور ، وبعضها يستخدم في المنتجات الداخلية فقط.

تُستخدم واجهات برمجة التطبيقات المتاحة للجمهور على نطاق واسع لإنشاء تطبيقات جديدة. على سبيل المثال ، من أجل إنشاء تطبيق خاص بالطقس ، يلزم وجود بعض بيانات الطقس. بمساعدة العديد من مواقع الويب الخاصة بالتنبؤات الجوية التي تشارك واجهات برمجة التطبيقات العامة الخاصة بها ، يكون الأمر سهلاً للغاية. علاوة على ذلك ، يمكن دمج العديد من واجهات برمجة التطبيقات المختلفة لإنشاء منتج جديد تمامًا.

من أين يمكننا الحصول على بيانات حقيقية؟ قوائم Open API

هناك العديد من واجهات برمجة التطبيقات المتاحة للجمهور والتي توفر بيانات متنوعة. فيما يلي قائمة مختصرة من خمسة والتي تعتبر رائعة للنماذج الأولية باستخدام بيانات حقيقية في Framer. تقوم كل من واجهات برمجة التطبيقات هذه أيضًا بإرجاع البيانات بتنسيق JSON ، والتي يمكن معالجتها بسهولة في إطار العمل.

مستخدم عشوائي - بالتأكيد أفضل واجهة برمجة تطبيقات للمبتدئين. يقوم بإنشاء ملفات تعريف مستخدم كاملة وعشوائية ، من الصورة الرمزية إلى عنوان البريد الإلكتروني.

OpenWeatherMap - واجهة برمجة تطبيقات سهلة الاستخدام للغاية. يسمح لك بالتحقق من الطقس الحالي والتنبؤات في أي مكان. باستخدام واجهة برمجة التطبيقات هذه ، يمكننا عرض بيانات مثل درجة الحرارة أو الرطوبة أو سرعة الرياح.

Pokeapi - واحدة من أفضل واجهات برمجة التطبيقات التي تم إنشاؤها للأغراض التعليمية. هل تبحث عن شيء عن بوكيمون؟ ويمكن العثور عليها هنا. هذه واجهة برمجة تطبيقات RESTful كاملة مرتبطة بقاعدة بيانات شاملة توضح كل شيء عن سلسلة ألعاب Pokemon الرئيسية.

Instagram - أول واجهة برمجة تطبيقات في القائمة تتطلب إذنًا للاستخدام. ومع ذلك ، فإن خدمتها بسيطة للغاية. يمكنك الوصول إلى جميع صور Instagram والمستخدمين وعرضهم في تطبيقك الجديد.

Mapbox - يوفر عددًا من الخدمات المذهلة التي يسهل دمجها مع أحد التطبيقات ، من الخرائط والاتجاهات إلى الترميز الجغرافي وحتى صور القمر الصناعي. هناك شيء مشترك بين كل من Foursquare ، و Evernote ، و Instacart ، و Pinterest ، و GitHub ، و Etsy - خرائطهم مدعومة من Mapbox.

تختلف واجهة برمجة التطبيقات هذه عن سابقتها لأنها لا تُرجع ملفات JSON ، ولكنها تتيح الوصول إلى جميع وظائف Mapbox. أنتج Mapbox أيضًا برنامجًا تعليميًا رائعًا حول كيفية استخدام API في Framer.

دروس API للمستخدم العشوائي في Framer باستخدام البيانات الحقيقية

لفهم كيفية العمل مع واجهات برمجة التطبيقات في Framer ، فلنبدأ بواجهة برمجة تطبيقات المستخدم العشوائي. سنحتاج إلى شاشة تطبيق واحدة — قائمة مستخدمين.

الخطوة 1: وضع التصميم

فيما يلي قائمة بالمستخدمين تحتوي على أسماء وألقاب وصور رمزية. هذا كل ما هو مطلوب. أهم جزء في هذه العملية هو تسمية كل العناصر وتجميعها بشكل صحيح. يتم تجميع الصور الرمزية والأسماء في طبقة الصندوق ، ويتم تجميع كل المربعات داخل القائمة:

آخر شيء يجب القيام به في وضع التصميم هو وضع علامة على طبقة القائمة كطبقة تفاعلية. للقيام بذلك ، ما عليك سوى النقر فوق الرمز الهدف.

الخطوة 2: فهم JSON

بادئ ذي بدء ، من الضروري فهم ماهية JSON وكيفية الحصول عليها خارج Framer. في مستندات Random User API ، ابحث عن طلب للبيانات من API. يبدو كالتالي: https://randomuser.me/api/؟results=20. كما ترى ، إنه رابط عادي يفتح ملف JSON في متصفحك:

كما هو ، لا يبدو واضحًا على الإطلاق. لعرض ملفات JSON بتنسيق صحيح ، استخدم مكون Chrome الإضافي المسمى JSONview. باستخدام المكون الإضافي ، سيبدو الملف كما يلي:

أفضل بكثير. الآن يجب أن تكون سهلة القراءة. يحتوي الملف على مجموعة النتائج مع بيانات المستخدم ، والتي تم استلامها بعد طلب واجهة برمجة التطبيقات لها. إذن ما هو ملف JSON؟ بدون الخوض في التفاصيل الفنية ، إنه ملف نصي يعتمد على بناء جملة JavaScript يحتوي على بيانات محددة من قاعدة بيانات. يمكن استخدام JSON في Framer لعرض البيانات منه.

الخطوة 3: استيراد ملف JSON إلى Framer

الآن ، يمكن استيراد ملف JSON إلى Framer بسطر واحد من التعليمات البرمجية:

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

قم بإنشاء كائن يسمى البيانات التي ستحتوي على ملف JSON. استخدم وظيفة الطباعة لمعرفة ما إذا تم استيراد ملف JSON بشكل صحيح:

 print data 

الخطوة 4: الوصول إلى بيانات محددة من ملف JSON

عد الآن إلى بنية ملف JSON:

في ملف JSON هذا ، تكون results عبارة عن مصفوفة تحتوي على المزيد من الكائنات. كل كائن هو مستخدم مختلف. أولاً ، يجب استهداف أحد هذه الكائنات. استخدم وظيفة الطباعة لفهم ما يحدث بشكل أفضل:

 print data.results[1]

وحدة المبروز:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

يمثل الرقم الموجود بين قوسين عددًا من الكائن في المصفوفة. باستخدام data.results[1] ، يتم استلام الوصول إلى جميع بيانات المستخدم الأول في ملف JSON.

بعد ذلك ، يمكن عرض عناصر مثل الاسم أو اللقب:

 print data.results[1].name.first

يجيب المبروز بـ: "benjamin" . إت فويلا! تم الوصول إلى البيانات من API!

الخطوة 5: عرض البيانات من JSON

أخيرا! الشيء الوحيد المتبقي هو عرض البيانات. الآن ، يجب إنشاء حلقة بسيطة تستهدف جميع الطبقات من وضع التصميم. اقرأ المزيد حول استهداف الطبقات بحلقة في هذه المقالة السابقة.

نحن نستخدم x = 0 لاستهداف الكائن الأول في المصفوفة من بيانات JSON. بعد ذلك ، لكل عنصر فرعي في القائمة ، نقوم بتعيين البيانات من بيانات JSON. في نهاية الحلقة ، نضيف +1 لاستخدام البيانات من الكائن التالي في المصفوفة:

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

هذا هو! يمكنك الآن العودة إلى وضع التصميم واللعب بالتصميم ، وسيتم عرض البيانات الحقيقية في النموذج الأولي الخاص بك!

يمكنك تنزيل ملف Framer أعلاه من هنا: https://framer.cloud/djmvG

Instagram API - بيانات في الوقت الفعلي في Framer

يعد Instagram نقطة انطلاق مثيرة للاهتمام لبدء رحلة ببيانات الوقت الفعلي. التعليمات سهلة الاتباع نسبيًا ، وتوفر واجهة برمجة التطبيقات بيانات مثيرة للاهتمام - حيث تتلقى وصولاً كاملاً. في هذا الجزء من المقالة ، يتم استخدام Instagram API لبناء نموذج أولي بسيط يعرض بيانات ملفي الشخصي على Instagram: الاسم وأحدث صورة وعدد الإعجابات.

الخطوة 1: احصل على رمز وصول

لاستخدام Instagram API ، يلزم وجود رمز وصول. يمكن الحصول عليها بطريقتين مختلفتين:

1. الطريقة الأكثر شيوعًا هي الانتقال إلى موقع Instagram للمطورين واتباع التعليمات. قد تكون هذه العملية معقدة بالنسبة للأشخاص غير التقنيين.
2. لحسن الحظ ، هناك طريقة سهلة وآمنة للحصول عليها. طور Pixel Union عملية أسهل بكثير بنقرة واحدة: انتقل إلى موقع الويب الخاص به وانقر فوق الزر Get Access Token.

الخطوة 2: تفعيل الطلبات عبر النطاقات

بعد تلقي رمز الوصول ، يلزم خدعة واحدة صغيرة. لا يسمح Instagram بطلبات واجهة برمجة التطبيقات من مضيفك المحلي (Framer) ، وبالتالي يجب استخدام الاستعلامات من جانب الخادم. واحد منهم هو JSONProxy. انتقل إلى موقع الويب الخاص بهم ، والصق طلبًا من Instagram API ، واضغط على GO.

بمجرد الانتهاء ، بدلاً من استخدام رابط Instagram API ، يمكن استخدام رابط JSONProxy.

الخطوة 3: تصميم تطبيق بسيط في Framer

لا يوجد سوى ثلاثة عناصر أساسية في هذا التصميم: العنصر النائب للاسم ، والمستطيل الذي سيعرض أحدث صورة ، وعدد الإعجابات أسفل الصورة. تم تمييز كل هذه الطبقات على أنها طبقات تفاعلية لإعادة استخدامها في محرر الكود.

الخطوة 4: اكتب أربعة أسطر من التعليمات البرمجية لاستخدام البيانات من Instagram

التدفق هنا هو نفسه كما في Random User API. يمكن الوصول إلى أي بيانات مستخدم من Instagram:

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

هذا هو! خمسة أسطر من التعليمات البرمجية ، ويمكنك وضع نموذج أولي باستخدام البيانات الحية والحقيقية المقدمة من Instagram. قم بتنزيل نموذج أولي عملي من هنا: https://framer.cloud/iYAXl. (يرجى تذكر أنه يجب عليك إضافة مفتاح الوصول الخاص بك لتشغيل هذا النموذج الأولي.)

ملخص - إيجابيات وسلبيات

من خلال إنشاء نماذج أولية تستخدم بيانات حقيقية تم الحصول عليها من خلال واجهة برمجة التطبيقات من قاعدة بيانات ، يتم إبراز إمكانيات إبداعية جديدة والقدرة على التحقق من تصميم المنتج - يمكن إنشاء نماذج أولية متوافقة بنسبة 100٪ مع المنتج واختبار وظائف جديدة على مستخدمين حقيقيين . من خلال معاينة جميع البيانات في النظام ، يصعب تفويت عنصر يجب تضمينه في التصميم ، ومع الوصول إلى البيانات الحقيقية ، يتم تجنب أخطاء التصميم التي تأتي من استخدام البيانات المزيفة.

ومع ذلك ، فإن النماذج الأولية عالية الدقة في Framer باهظة الثمن. يتطلب الأمر الكثير من التغيير والتبديل للحصول على التأثير المطلوب - والذي يستهلك الوقت والمال. كما هو موضح في مثال Random User API ، فإن الاتصال بواجهة برمجة التطبيقات ليس بالأمر الصعب ، ولكن لا تزال هناك حاجة إلى قدر كبير من الوقت لإنشاء نموذج أولي رائع منه.

ومع ذلك ، عند أخذ القياس الكامل ، فمن الجدير بالتأكيد التفكير. نماذج أولية سعيدة ببيانات حقيقية!

• • •

مزيد من القراءة على مدونة Toptal Design:

• أفضل ممارسات تصميم واجهة المستخدم والأخطاء الشائعة
• الدول الفارغة - الجانب الأكثر إغفالًا لتجربة المستخدم
• البساطة هي المفتاح - استكشاف الحد الأدنى من تصميم الويب
• مبادئ ارشادية للواجهات المتنقلة
• التصميم للقراءة - دليل لطباعة الويب