Gerçek Verilerle Prototip Oluşturma – Bir Çerçeve Oluşturucu Eğitimi

Framer, mevcut en güçlü uygulama prototipleme araçlarından biridir. İOS'tan Android'e kadar herhangi bir mobil cihaz için tasarım yapmak için kullanılabilir. Biraz programlama biliyorsanız, yetenekleri neredeyse sınırsızdır çünkü nispeten kolay bir programlama dili olan CoffeeScript'e dayanmaktadır. Bir tasarımcı yalnızca hayal gücü ve kodlama becerileri ile sınırlı olacaktır.

Bu makaleyi takip etmek için en azından temel bir Framer bilgisine sahip olmalısınız. Tasarım Modu ve Kod Düzenleyiciyi kullanacağız. Bilginizi desteklemek istiyorsanız, önceki Framer makalelerimizi okuyabilirsiniz: Çarpıcı Etkileşimli Prototipler Nasıl Oluşturulur, Prototiplerinizi Geliştirmek için 7 Basit Mikro Etkileşim

Framer'ı Neden Gerçek Verilerle Kullanmalısınız?

Tasarımda veya prototiplemede yaygın bir sorun, gerçek verilerin olmamasıdır. Mevcut bir ürün için yeni bir işlev tasarlandığında, hayali içerik kullanmak yerine mantıklı, alakalı ve gerçek görünümlü içerik görüntülenebilir. Her tür veri olabilir, örneğin kullanıcı fotoğrafları. Bu şekilde, sahte içerik üretmeye çalışmakla zaman kaybedilmez ve geçersiz veri kullanımından kaynaklanan hataların önüne geçilir. Mevcut tüm veriler görünür durumdadır ve hangi içeriğe hala ihtiyaç duyulabileceği belirlenebilir - sonuç olarak, paydaşlar ve geliştirme ekibi ile iletişim daha etkilidir. Farklı kullanım senaryoları etrafında tasarlamak da mümkündür.

Yeni bir fonksiyon tasarlarken bazen her kullanıcı profilinin tamamlanmadığını, mağazadaki tüm kategorilerin aynı miktarda ürüne sahip olmadığını ve her ürünün aynı verileri göstermediğini unutuyoruz. Gerçek verilerle prototip oluşturma, LEGO bloklarından bir şey inşa etmeye benzetilebilir: Hayali, gevşek şekillerle çalışmak yerine, kutudaki mevcut bileşenleri kullanabilir ve gerçek bir şey inşa edebiliriz.

Gerçek Verilerle Prototip Yapalım!

Framer'daki gerçek eğlence, bir veritabanından gerçek zamanlı olarak güncellenen gerçek veriler kullanıldığında başlar. Her tür veri uygulanabilir, örneğin: fotoğraflı kullanıcı profilleri, sokak adresleri, hisse senedi fiyatları, döviz kurları, hava durumu tahminleri, işlem bilgileri - uygulamaların tipik olarak kullandığı herhangi bir veri. Gerçek zamanlı prototiplemeyi gerçek verilerle birleştirdiğinizde gerçekten güçlü ürün tasarımı gerçekleşmeye başlar. Ve artık kötü şöhretli Latin-esque “lorem ipsum” yer tutucu metin parçalarını kullanmak gerekli olmayacak.

Gerçek Verileri Kullanan API: Nedir? Nasıl Kullanıyoruz?

Uygulama Programlama Arayüzü (API), uygulamalarla iletişim kurduğumuz arayüzdür. Bir uygulamayı bir restoran olarak hayal edin. Yiyecek veridir ve garson API'dir. Garsondan yemek istiyorsun - tek yapman gereken bu. Garson (API) ve mutfak (veritabanı) gerisini halleder.

Her şey, belirli bir veritabanında yaşayan gerçek verilere erişimle ilgilidir.

Her uygulamanın, verilerin yakalanmasına ve görüntülenmesine izin veren bir API'si vardır. Bazı API'ler herkese açıktır ve bazıları yalnızca dahili ürünlerde kullanılır.

Herkese açık API'ler, yeni uygulamalar oluşturmak için yaygın olarak kullanılmaktadır. Örneğin, bir hava durumu uygulaması oluşturmak için bazı hava durumu verileri gereklidir. Herkese açık API'lerini paylaşan çok sayıda hava tahmini web sitesinin yardımıyla bu çok kolay. Ayrıca, tamamen yeni bir ürün oluşturmak için birçok farklı API birleştirilebilir.

Gerçek Verileri Nereden Alabiliriz? Açık API Listeleri

Çeşitli veriler sağlayan, herkese açık birçok API vardır. İşte Framer'da gerçek verilerle prototip oluşturmak için harika olan beş kısa liste. Bu API'lerin her biri, çerçeve içinde kolayca işlenebilen JSON biçimindeki verileri de döndürür.

Rastgele Kullanıcı – Yeni başlayanlar için kesinlikle en iyi API. Bir avatardan bir e-posta adresine kadar eksiksiz, rastgele kullanıcı profilleri oluşturur.

OpenWeatherMap – bu kullanımı çok kolay bir API'dir. Herhangi bir konumdaki mevcut hava durumunu ve tahminleri kontrol etmenizi sağlar. Bu API'yi kullanarak sıcaklık, nem veya rüzgar hızı gibi verileri görüntüleyebiliriz.

Pokeapi – eğitim amaçlı oluşturulmuş en iyi API'lerden biridir. Pokemon hakkında bir şey mi arıyorsunuz? Burada bulunabilir. Bu, Pokemon ana oyun serisiyle ilgili her şeyi detaylandıran kapsamlı bir veritabanına bağlı tam bir RESTful API'dir.

Instagram – listede kullanmak için yetki gerektiren ilk API. Ancak hizmeti çok basittir. Tüm Instagram fotoğraflarına ve kullanıcılarına erişebilir ve bunları yeni uygulamanızda görüntüleyebilirsiniz.

Mapbox – haritalar ve yol tariflerinden coğrafi kodlamaya ve hatta uydu görüntülerine kadar bir uygulamayla entegre edilmesi kolay bir dizi inanılmaz hizmet sunar. Foursquare, Evernote, Instacart, Pinterest, GitHub ve Etsy'nin hepsinin ortak bir yanı var - haritaları Mapbox tarafından destekleniyor.

Bu API, JSON dosyalarını döndürmediği, ancak tüm Mapbox işlevlerine erişim sağladığı için öncekilerden farklıdır. Mapbox ayrıca API'lerini Framer'da nasıl kullanacaklarına dair harika bir eğitim hazırladı.

Gerçek Verileri Kullanan Framer'da Rastgele Kullanıcı API Eğitimi

Framer'da API'lerle nasıl çalışılacağını anlamak için Random User API ile başlayalım. Tek bir uygulama ekranına, yani bir kullanıcı listesine ihtiyacımız olacak.

Adım 1: Tasarım Modu

Adları, soyadları ve avatarları içeren kullanıcıların listesi burada. Tüm gereken bu. Bu sürecin en önemli kısmı, tüm öğeleri uygun şekilde adlandırmak ve gruplandırmaktır. Avatarlar ve isimler kutu katmanında gruplandırılmıştır ve tüm kutular liste içinde gruplandırılmıştır:

Tasarım Modunda yapılması gereken son şey, liste katmanını etkileşimli bir katman olarak işaretlemektir. Bunu yapmak için hedef simgesine tıklamanız yeterlidir.

2. Adım: JSON'u Anlamak

Her şeyden önce, JSON'un ne olduğunu ve onu Framer'ın dışına nasıl çıkaracağınızı anlamak gerekir. Rastgele Kullanıcı API belgelerinde, API'den gelen veriler için bir istek bulun. Şuna benziyor: https://randomuser.me/api/?results=20. Gördüğünüz gibi, tarayıcınızda bir JSON dosyası açan normal bir bağlantıdır:

Olduğu gibi, hiç net görünmüyor. Düzgün biçimlendirilmiş JSON dosyalarını görüntülemek için JSONview adlı Chrome eklentisini kullanın. Eklenti ile dosya şöyle görünecek:

Çok daha iyi. Şimdi okunması kolay olmalı. Dosya, API'den istendikten sonra alınan kullanıcı verilerini içeren sonuç dizisini içerir. Peki JSON dosyası nedir? Teknik ayrıntılara girmeden, bir veritabanından belirli verileri içeren JavaScript sözdizimine dayalı bir metin dosyasıdır. JSON, Framer'daki verileri görüntülemek için kullanılabilir.

3. Adım: JSON Dosyasını Framer'a Aktarın

Artık JSON dosyası, tek bir kod satırı ile Framer'a aktarılabilir:

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

JSON dosyasını içerecek olan data adlı nesneyi oluşturun. JSON dosyasının doğru şekilde içe aktarılıp aktarılmadığını görmek için yazdırma işlevini kullanın:

 print data 

4. Adım: JSON Dosyasından Belirli Verilere Erişme

Şimdi JSON dosya yapısına geri dönün:

Bu JSON dosyasında, results daha fazla nesne içeren bir dizidir. Her nesne farklı bir kullanıcıdır. İlk olarak, bu nesnelerden birinin hedeflenmesi gerekir. Neler olduğunu daha iyi anlamak için yazdırma işlevini kullanın:

 print data.results[1]

Çerçeve konsolu:

 {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"}

Parantez içindeki şekil, dizideki nesne sayısını temsil eder. data.results[1] kullanılarak, ilk kullanıcının JSON dosyasındaki tüm verilerine erişim sağlanır.

Ardından ad veya soyadı gibi öğeler görüntülenebilir:

 print data.results[1].name.first

Framer şu şekilde yanıt verir: "benjamin" . Ve işte! API'den verilere erişim sağlandı!

Adım 5: JSON'dan Verileri Görüntüleme

En sonunda! Geriye kalan tek şey verileri görüntülemek. Şimdi, tasarım modundan tüm katmanları hedefleyecek basit bir döngü oluşturulmalıdır. Bu önceki makalede, bir döngüyle katmanları hedefleme hakkında daha fazla bilgi edinin.

JSON verilerinden dizideki ilk nesneyi hedeflemek için x = 0 kullanıyoruz. Ardından, listenin her bir alt öğesi için verileri JSON verilerinden atarız . Döngünün sonunda, dizideki sonraki nesneden gelen verileri kullanmak için +1 ekleriz:

 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++

Bu kadar! Artık tasarım moduna geri dönebilir ve tasarımla oynayabilirsiniz ve gerçek veriler prototipinizde görüntülenecektir!

Yukarıdaki Framer dosyasını buradan indirebilirsiniz: https://framer.cloud/djmvG

Instagram API - Framer'da Gerçek Zamanlı Veriler

Instagram, gerçek zamanlı verilerle bir yolculuğa başlamak için ilginç bir başlangıç ​​noktasıdır. Talimatları takip etmek nispeten kolaydır ve API ilginç veriler sağlar - tam erişim alırsınız. Makalenin bu bölümünde, Instagram profil verilerimi görüntüleyen basit bir prototip oluşturmak için Instagram API'si kullanılır: ad, en son fotoğraf ve beğeni sayısı.

1. Adım: Bir Erişim Simgesi Alın

Instagram API'sini kullanmak için bir erişim belirteci gereklidir. İki farklı şekilde elde edilebilir:

1. En yaygın yol, Geliştiriciler için Instagram web sitesine gitmek ve talimatları izlemektir. Bu süreç teknik bilgisi olmayan kişiler için karmaşık olabilir.
2. Neyse ki, onu almanın kolay ve güvenli bir yolu var. Pixel Union, tek tıklamayla çok daha kolay bir süreç geliştirdi: Web sitelerine gidin ve Erişim Simgesini Al düğmesini tıklayın.

2. Adım: Etki Alanları Arası İstekleri Etkinleştirin

Bir erişim belirteci aldıktan sonra, küçük bir numara gereklidir. Instagram, yerel ana makinenizden (Framer) gelen API isteklerine izin vermez ve bu nedenle sunucu tarafı sorguları kullanılmalıdır. Bunlardan biri JSONProxy'dir. Web sitelerine gidin, Instagram API'sinden bir istek yapıştırın ve GO'ya basın.

Tamamlandığında, Instagram API bağlantısını kullanmak yerine JSONProxy bağlantısı kullanılabilir.

3. Adım: Framer'da Basit Bir Uygulama Tasarlayın

Bu tasarımda sadece üç önemli unsur var: isim yer tutucusu, en son fotoğrafı gösterecek bir dikdörtgen ve resmin altındaki beğeni sayısı. Bunların tümü, kod düzenleyicide yeniden kullanılmak üzere etkileşimli katmanlar olarak işaretlenmiştir.

Adım 4: Instagram Verilerini Kullanmak İçin Dört Satırlık Kod Yazın

Buradaki akış, Rastgele Kullanıcı API'sindeki ile aynıdır. Herhangi bir kullanıcı verisine Instagram'dan erişilebilir:

 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

Bu kadar! Beş satır kod ve Instagram tarafından sağlanan canlı ve gerçek verileri kullanarak prototip oluşturabilirsiniz. Çalışan bir prototipi buradan indirin: https://framer.cloud/iYAXl. (Bu prototipi çalıştırmak için kendi ERİŞİM ANAHTARI eklemeniz gerektiğini lütfen unutmayın.)

Özet – Artıları ve Eksileri

Bir veritabanından bir API aracılığıyla elde edilen gerçek verileri kullanan prototipler oluşturularak, yeni yaratıcı olanaklar ve ürün tasarımını kontrol etme yeteneği gün ışığına çıkarılır - ürünle %100 tutarlı prototipler oluşturulabilir ve gerçek kullanıcılar üzerinde yeni işlevler test edilebilir. . Sistemdeki tüm verilerin ön izlemesi ile tasarıma dahil edilmesi gereken bir unsurun gözden kaçırılması daha zordur ve gerçek verilere erişim ile sahte veri kullanımından kaynaklanan tasarım hatalarının önüne geçilir.

Bununla birlikte, Framer'da yüksek kaliteli prototipleme oldukça pahalıdır. İstenen efekti elde etmek için çok fazla ince ayar yapılması gerekir; bu da zaman ve para tüketir. Rastgele Kullanıcı API'si örneğinde gösterildiği gibi, API ile iletişim kurmak zor değildir, ancak ondan harika bir prototip oluşturmak için hala çok zamana ihtiyaç vardır.

Yine de, tam ölçü verildiğinde, kesinlikle dikkate değer. Gerçek verilerle mutlu prototipleme!

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar
• Boş Durumlar – UX'in En Çok Gözden Geçirilen Yönü
• Basitlik Anahtardır – Minimal Web Tasarımını Keşfetmek
• Mobil Arayüzler için Sezgisel İlkeler
• Okunabilirlik için Tasarım – Web Tipografisi Kılavuzu