Framer เป็นหนึ่งในเครื่องมือสร้างต้นแบบแอปที่ทรงพลังที่สุด สามารถใช้ในการออกแบบสำหรับอุปกรณ์เคลื่อนที่ใด ๆ ตั้งแต่ iOS ไปจนถึง Android หากคุณรู้จักการเขียนโปรแกรมสักเล็กน้อยความสามารถของโปรแกรมนั้นแทบไม่ จำกัด เพราะมันขึ้นอยู่กับ CoffeeScript - ภาษาโปรแกรมที่ค่อนข้างง่าย ก นักออกแบบ จะถูก จำกัด ด้วยจินตนาการและทักษะการเขียนโค้ดของพวกเขา
หากต้องการติดตามบทความนี้คุณควรมีความรู้พื้นฐานเกี่ยวกับ Framer เป็นอย่างน้อย เราจะใช้โหมดการออกแบบและตัวแก้ไขโค้ด หากคุณต้องการเสริมความรู้คุณสามารถอ่านบทความ Framer ก่อนหน้าของเรา: วิธีสร้างต้นแบบเชิงโต้ตอบที่สวยงาม , 7 Microinteractions อย่างง่ายเพื่อปรับปรุงต้นแบบของคุณ
ทำไมคุณควรใช้ Framer กับข้อมูลจริง
ปัญหาที่พบบ่อยในการออกแบบหรือการสร้างต้นแบบคือการขาดข้อมูลจริง เมื่อฟังก์ชันใหม่ได้รับการออกแบบมาสำหรับผลิตภัณฑ์ที่มีอยู่แล้วคุณจะสามารถแสดงเนื้อหาที่สมมติขึ้นแทนการใช้เนื้อหาเชิงตรรกะเกี่ยวข้องและดูเหมือนจริง อาจเป็นข้อมูลประเภทใดก็ได้เช่นรูปภาพของผู้ใช้ วิธีนี้จะไม่เสียเวลาไปกับการพยายามสร้างเนื้อหาที่หลอกลวงและจะหลีกเลี่ยงข้อผิดพลาดที่เกิดจากการใช้ข้อมูลที่ไม่ถูกต้อง ข้อมูลที่มีอยู่ทั้งหมดสามารถมองเห็นได้และสามารถกำหนดเนื้อหาที่อาจยังต้องการได้ด้วยเหตุนี้การสื่อสารกับผู้มีส่วนได้ส่วนเสียและทีมพัฒนาจึงมีประสิทธิภาพมากขึ้น นอกจากนี้ยังสามารถออกแบบสถานการณ์การใช้งานที่แตกต่างกันได้
เมื่อเราออกแบบฟังก์ชันใหม่บางครั้งเราก็ลืมไปว่าไม่ใช่ทุกโปรไฟล์ผู้ใช้ที่สมบูรณ์ไม่ใช่ทุกหมวดหมู่ในร้านค้าที่มีจำนวนสินค้าเท่ากันและไม่ใช่ทุกผลิตภัณฑ์ที่แสดงข้อมูลเดียวกัน การสร้างต้นแบบด้วยข้อมูลจริงเปรียบได้กับการสร้างบางสิ่งจากบล็อกเลโก้: แทนที่จะทำงานกับรูปทรงหลวม ๆ ในจินตนาการเราสามารถใช้ส่วนประกอบที่มีอยู่จากกล่องและสร้างของจริงได้
มาสร้างต้นแบบด้วยข้อมูลจริง!
ความสนุกที่แท้จริงใน Framer เริ่มต้นเมื่อมีการใช้ข้อมูลจริงที่อัปเดตตามเวลาจริงจากฐานข้อมูล สามารถใช้ข้อมูลประเภทใดก็ได้ตัวอย่างเช่นโปรไฟล์ผู้ใช้ที่มีรูปถ่ายที่อยู่ราคาหุ้นอัตราแลกเปลี่ยนพยากรณ์อากาศข้อมูลธุรกรรมข้อมูลใด ๆ ที่แอปมักใช้ การออกแบบผลิตภัณฑ์ที่ทรงพลังอย่างแท้จริงเริ่มเกิดขึ้นเมื่อคุณรวมการสร้างต้นแบบแบบเรียลไทม์กับข้อมูลจริง และจะไม่จำเป็นต้องใช้ข้อความตัวยึดตำแหน่ง 'lorem ipsum' แบบละตินที่น่าอับอายอีกต่อไป
จะใช้โหนด js . ได้ที่ไหน
API ที่ใช้ข้อมูลจริง: คืออะไร? เราจะใช้มันอย่างไร?
อัน อินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน (API) คืออินเทอร์เฟซที่เราสื่อสารกับแอปพลิเคชัน ลองนึกภาพแอปเป็นร้านอาหาร อาหารคือข้อมูลและพนักงานเสิร์ฟคือ API คุณขออาหารจากพนักงานเสิร์ฟนั่นคือทั้งหมดที่คุณต้องทำ พนักงานเสิร์ฟ (API) และห้องครัว (ฐานข้อมูล) ดูแลส่วนที่เหลือ
ทุกอย่างเกี่ยวกับการเข้าถึงข้อมูลจริงที่อยู่ในฐานข้อมูลที่กำหนด
ทุกแอปมี API ที่ช่วยให้สามารถบันทึกและแสดงข้อมูลได้ API บางตัวมีให้ใช้งานแบบสาธารณะและบางส่วนใช้ในผลิตภัณฑ์ภายในเท่านั้น
API ที่เปิดเผยต่อสาธารณะใช้กันอย่างแพร่หลายในการสร้างแอปพลิเคชันใหม่ ตัวอย่างเช่นในการสร้างแอปพลิเคชันสภาพอากาศจำเป็นต้องมีข้อมูลสภาพอากาศบางอย่าง ด้วยความช่วยเหลือของเว็บไซต์พยากรณ์อากาศจำนวนมากที่แชร์ API สาธารณะจึงเป็นเรื่องง่ายมาก ยิ่งไปกว่านั้น API ต่างๆจำนวนมากสามารถรวมกันเพื่อสร้างผลิตภัณฑ์ใหม่ได้อย่างสมบูรณ์
เราจะรับข้อมูลจริงได้จากที่ใด รายการ API แบบเปิด
มี API ที่เปิดเผยต่อสาธารณะจำนวนมากซึ่งให้ข้อมูลต่างๆ นี่คือรายการสั้น ๆ ห้ารายการที่เหมาะสำหรับการสร้างต้นแบบด้วยข้อมูลจริงใน Framer แต่ละ API เหล่านี้ยังส่งคืนข้อมูลใน JSON ซึ่งสามารถจัดการได้อย่างง่ายดายในกรอบ
ผู้ใช้แบบสุ่ม - API ที่ดีที่สุดสำหรับผู้เริ่มต้นอย่างแน่นอน สร้างโปรไฟล์ผู้ใช้ที่สมบูรณ์แบบสุ่มจากรูปประจำตัวไปยังที่อยู่อีเมล
OpenWeatherMap - นี่คือ API ที่ใช้งานง่ายมาก ช่วยให้คุณตรวจสอบสภาพอากาศปัจจุบันและการคาดการณ์ในสถานที่ใด ๆ เมื่อใช้ API นี้เราสามารถแสดงข้อมูลเช่นอุณหภูมิความชื้นหรือความเร็วลม
Pokéapi - หนึ่งใน API ที่ดีที่สุดที่สร้างขึ้นเพื่อวัตถุประสงค์ทางการศึกษา กำลังมองหาอะไรบางอย่างเกี่ยวกับโปเกมอน? สามารถพบได้ที่นี่ นี่คือ RESTful API เต็มรูปแบบที่เชื่อมโยงกับฐานข้อมูลที่ครอบคลุมรายละเอียดทุกอย่างเกี่ยวกับซีรี่ส์เกมหลักของPokémon
อินสตาแกรม - API แรกในรายการที่ต้องได้รับอนุญาตจึงจะใช้ได้ อย่างไรก็ตามบริการนั้นง่ายมาก คุณสามารถเข้าถึงรูปภาพและผู้ใช้ Instagram ทั้งหมดและแสดงในแอพใหม่ของคุณ
วิธีการตั้งคณะกรรมการที่ปรึกษา
Mapbox - ให้บริการที่น่าทึ่งมากมายซึ่งง่ายต่อการรวมเข้ากับแอปพลิเคชันตั้งแต่แผนที่และเส้นทางไปจนถึงการระบุพิกัดทางภูมิศาสตร์และแม้แต่ภาพถ่ายจากดาวเทียม Foursquare, Evernote, Instacart, Pinterest, GitHub และ Etsy ล้วนมีบางอย่างที่เหมือนกันแผนที่ของพวกเขาขับเคลื่อนโดย Mapbox
API นี้แตกต่างจากก่อนหน้านี้เนื่องจากไม่ส่งคืนไฟล์ JSON แต่ให้การเข้าถึงฟังก์ชัน Mapbox ทั้งหมด Mapbox ยังสร้างไฟล์ บทแนะนำเกี่ยวกับวิธีใช้ API ใน Framer .
การสอน API ผู้ใช้แบบสุ่มใน Framer โดยใช้ข้อมูลจริง
หากต้องการทำความเข้าใจวิธีการทำงานกับ API ใน Framer เรามาเริ่มกันที่ไฟล์ API ผู้ใช้แบบสุ่ม . เราต้องการหน้าจอแอปเดียว - รายชื่อผู้ใช้
ขั้นตอนที่ 1: โหมดออกแบบ
นี่คือรายชื่อผู้ใช้ที่มีชื่อนามสกุลและอวตาร นั่นคือทั้งหมดที่จำเป็น ส่วนที่สำคัญที่สุดของกระบวนการนี้คือการตั้งชื่อและจัดกลุ่มองค์ประกอบทั้งหมดอย่างเหมาะสม อวาตาร์และชื่อจะถูกจัดกลุ่มในเลเยอร์กล่องและกล่องทั้งหมดจะถูกจัดกลุ่มภายในรายการ:
สิ่งสุดท้ายที่ต้องทำในโหมดออกแบบคือการทำเครื่องหมายไฟล์ รายการ เลเยอร์เป็นเลเยอร์แบบโต้ตอบ โดยคลิกที่ไอคอนเป้าหมาย
ขั้นตอนที่ 2: ทำความเข้าใจ JSON
ก่อนอื่นคุณต้องเข้าใจว่า JSON คืออะไรและจะนำไปใช้ภายนอก Framer ได้อย่างไร ใน เอกสาร Random User API ค้นหาคำขอข้อมูลจาก API ดูเหมือนว่า: https://randomuser.me/api/?results=20 . อย่างที่คุณเห็นมันเป็นลิงก์ปกติที่เปิดไฟล์ JSON ในเบราว์เซอร์ของคุณ:
ตามที่เป็นอยู่มันดูไม่ชัดเจนเลย หากต้องการดูไฟล์ JSON ที่จัดรูปแบบอย่างถูกต้องให้ใช้ปลั๊กอิน Chrome ที่เรียกว่า JSONview . ด้วยปลั๊กอินไฟล์จะมีลักษณะดังนี้:
ดีขึ้นมาก. ตอนนี้น่าจะอ่านง่าย ไฟล์นี้มีอาร์เรย์ของผลลัพธ์ที่มีข้อมูลผู้ใช้ซึ่งได้รับหลังจากขอ API ไฟล์ 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 Framer ตอบสนองด้วย: 'benjamin'. เอท voila! เข้าถึงข้อมูลจาก 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 เป็นจุดเริ่มต้นที่น่าสนใจในการเริ่มต้นการเดินทางด้วยข้อมูลแบบเรียลไทม์ คำแนะนำค่อนข้างง่ายในการปฏิบัติตามและ API ให้ข้อมูลที่น่าสนใจ - คุณจะได้รับการเข้าถึงที่สมบูรณ์ ในส่วนนี้ของบทความ Instagram API ใช้ในการสร้างต้นแบบง่ายๆที่แสดงข้อมูลโปรไฟล์ Instagram ของฉัน: ชื่อรูปภาพล่าสุดและจำนวนไลค์
ขั้นตอนที่ 1: รับโทเค็นการเข้าถึง
ในการใช้ Instagram API จำเป็นต้องมีโทเค็นการเข้าถึง สามารถรับได้สองวิธี:
ขั้นตอนการระดมทุนของไพรเวทอิควิตี้
- วิธีที่ใช้บ่อยที่สุดคือไปที่ไฟล์ Instagram สำหรับนักพัฒนา เว็บไซต์และปฏิบัติตามคำแนะนำ กระบวนการนี้อาจซับซ้อนสำหรับผู้ที่ไม่เชี่ยวชาญด้านเทคนิค
- โชคดีที่มีวิธีที่ง่ายและปลอดภัยในการรับ Pixel Union พัฒนากระบวนการคลิกเพียงครั้งเดียวที่ง่ายกว่ามาก: ไปที่ เว็บไซต์ของพวกเขา แล้วคลิกปุ่มรับโทเค็นการเข้าถึง
ขั้นตอนที่ 2: เปิดใช้งานคำขอข้ามโดเมน
หลังจากได้รับโทเค็นการเข้าถึงจำเป็นต้องมีเคล็ดลับเล็กน้อย Instagram ไม่อนุญาตคำขอ API จาก localhost (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 . (โปรดทราบว่าคุณต้องเพิ่มคีย์การเข้าถึงของคุณเองเพื่อเรียกใช้ต้นแบบนี้)
สรุป - ข้อดีข้อเสีย
ด้วยการสร้างต้นแบบที่ใช้ข้อมูลจริงที่ได้รับผ่าน API จากฐานข้อมูลความเป็นไปได้ในการสร้างสรรค์ใหม่ ๆ และความสามารถในการตรวจสอบการออกแบบผลิตภัณฑ์จะถูกนำมาสู่แสงสว่าง - สามารถสร้างต้นแบบที่สอดคล้องกับผลิตภัณฑ์ได้ 100% และฟังก์ชันใหม่ที่ทดสอบกับผู้ใช้จริง . ด้วยการดูตัวอย่างข้อมูลทั้งหมดในระบบทำให้พลาดองค์ประกอบที่ต้องรวมอยู่ในการออกแบบได้ยากขึ้นและด้วยการเข้าถึงข้อมูลจริงจึงหลีกเลี่ยงข้อผิดพลาดในการออกแบบที่มาจากการใช้ข้อมูลปลอม
กล่าวได้ว่าการสร้างต้นแบบที่มีความเที่ยงตรงสูงใน Framer นั้นค่อนข้างแพง ต้องใช้การปรับแต่งอย่างมากเพื่อให้ได้เอฟเฟกต์ที่ต้องการซึ่งกินเวลาและเงิน ดังที่แสดงในตัวอย่าง Random User API การสื่อสารกับ API ไม่ใช่เรื่องยาก แต่ยังต้องใช้เวลาอีกมากในการสร้างต้นแบบที่ยอดเยี่ยมจากมัน
อย่างไรก็ตามเมื่อวัดเต็มรูปแบบแล้วก็คุ้มค่าที่จะพิจารณา สร้างต้นแบบอย่างมีความสุขด้วยข้อมูลจริง!
•••
