Membuat Prototipe dengan Data Nyata – Tutorial Pembingkai

Diterbitkan: 2022-03-11

Framer adalah salah satu alat prototyping aplikasi yang paling kuat di luar sana. Ini dapat digunakan untuk mendesain untuk perangkat seluler apa pun, dari iOS hingga Android. Jika Anda tahu sedikit tentang pemrograman, kemampuannya hampir tidak terbatas karena didasarkan pada CoffeeScript—bahasa pemrograman yang relatif mudah. Seorang desainer hanya akan dibatasi oleh imajinasi dan keterampilan pengkodean mereka.

Pembingkai - Apa itu?

Untuk mengikuti artikel ini, Anda setidaknya harus memiliki pengetahuan dasar tentang Framer. Kami akan menggunakan Mode Desain dan Editor Kode. Jika Anda ingin menambah pengetahuan Anda, Anda dapat membaca artikel Framer kami sebelumnya: Cara Membuat Prototipe Interaktif yang Menakjubkan, 7 Interaksi Mikro Sederhana untuk Meningkatkan Prototipe Anda

Mengapa Anda Harus Menggunakan Framer dengan Data Nyata

Masalah umum dalam merancang atau membuat prototipe adalah kurangnya data nyata. Ketika fungsi baru dirancang untuk produk yang sudah ada, alih-alih menggunakan konten fiktif, konten logis, relevan, dan tampak nyata dapat ditampilkan. Ini bisa berupa data apa saja—foto pengguna, misalnya. Dengan cara ini, tidak ada waktu yang terbuang untuk mencoba membuat konten palsu, dan kesalahan yang berasal dari penggunaan data yang tidak valid akan dihindari. Semua data yang tersedia dapat dilihat, dan dapat ditentukan konten apa yang mungkin masih diperlukan—sebagai hasilnya, komunikasi dengan pemangku kepentingan dan tim pengembangan lebih efektif. Dimungkinkan juga untuk merancang skenario kasus penggunaan yang berbeda.

Saat mendesain fungsi baru, terkadang kita lupa bahwa tidak semua profil pengguna lengkap, tidak semua kategori di toko memiliki jumlah produk yang sama, dan tidak setiap produk menampilkan data yang sama. Membuat prototipe dengan data nyata dapat dibandingkan dengan membangun sesuatu dari balok LEGO: Alih-alih bekerja dengan bentuk imajiner dan longgar, kita dapat menggunakan komponen yang ada dari kotak dan membangun sesuatu yang nyata.

Mari Prototipe dengan Data Nyata!

Kegembiraan sebenarnya di Framer dimulai ketika data nyata yang diperbarui secara real time dari database digunakan. Semua jenis data dapat diterapkan, misalnya: profil pengguna dengan foto, alamat jalan, harga saham, nilai tukar, prakiraan cuaca, informasi transaksi— data apa pun yang biasanya digunakan aplikasi. Desain produk yang sangat kuat mulai terjadi saat Anda menggabungkan pembuatan prototipe waktu nyata dengan data nyata. Dan tidak perlu lagi menggunakan potongan teks placeholder “lorem ipsum” bergaya Latin yang terkenal.

Prototipe pembingkai dikombinasikan dengan Mapbox API oleh Uber — Uber dengan Mapbox API oleh Bryant Jow untuk Uber.

API Menggunakan Data Nyata: Apa Itu? Bagaimana kami menggunakannya?

Application Programming Interface (API) adalah antarmuka yang digunakan untuk berkomunikasi dengan aplikasi. Bayangkan sebuah aplikasi sebagai restoran. Makanan adalah data dan pelayan adalah API. Anda meminta makanan kepada pelayan—hanya itu yang perlu Anda lakukan. Pelayan (API) dan dapur (database) mengurus sisanya.

Ini semua tentang akses ke data nyata yang hidup dalam database tertentu.

Apa itu API?

Setiap aplikasi memiliki API yang memungkinkan data diambil dan ditampilkan. Beberapa API tersedia untuk umum, dan beberapa hanya digunakan dalam produk internal.

API yang tersedia untuk umum banyak digunakan untuk membangun aplikasi baru. Misalnya, untuk membangun aplikasi cuaca, diperlukan beberapa data cuaca. Dengan bantuan banyak situs prakiraan cuaca yang membagikan API publik mereka, ini sangat mudah. Terlebih lagi, banyak API yang berbeda dapat digabungkan untuk membuat produk yang benar-benar baru.

Dimana Kita Bisa Mendapatkan Data Nyata? Daftar API Terbuka

Ada banyak API yang tersedia untuk umum yang menyediakan berbagai data. Berikut adalah daftar lima yang bagus untuk membuat prototipe dengan data nyata di Framer. Masing-masing API ini juga mengembalikan data dalam format JSON, yang dapat dengan mudah ditangani dalam kerangka kerja.

Pengguna Acak – Pastinya API terbaik untuk pemula. Ini menghasilkan profil pengguna acak yang lengkap, dari avatar hingga alamat email.

OpenWeatherMap – ini adalah API yang sangat mudah digunakan. Ini memungkinkan Anda untuk memeriksa cuaca dan prakiraan saat ini di lokasi mana pun. Dengan menggunakan API ini, kita dapat menampilkan data seperti suhu, kelembaban, atau kecepatan angin.

Aplikasi ramalan cuaca menggunakan API data nyata di Framer — Aplikasi ramalan cuaca oleh Wojciech Dobry.

Pokeapi – salah satu API terbaik yang dibuat untuk tujuan pendidikan. Mencari sesuatu tentang Pokemon? Hal ini dapat ditemukan di sini. Ini adalah RESTful API lengkap yang ditautkan ke database ekstensif yang merinci segala sesuatu tentang seri game utama Pokemon.

Konsep UI seluler Pokemon menggunakan API data nyata di Framer — Konsep Pokemon UI oleh Sai Aung.

Instagram – API pertama dalam daftar yang memerlukan otorisasi untuk digunakan. Namun, layanannya sangat sederhana. Anda bisa mendapatkan akses ke semua foto dan pengguna Instagram dan menampilkannya di aplikasi baru Anda.

Instagram di jam tangan pintar menggunakan API data nyata di Framer — Instagram di jam tangan pintar oleh Hironobu Kimura.

Mapbox – menyediakan sejumlah layanan luar biasa yang mudah diintegrasikan dengan aplikasi, mulai dari peta dan petunjuk arah hingga geocoding dan bahkan citra satelit. Foursquare, Evernote, Instacart, Pinterest, GitHub, dan Etsy semuanya memiliki kesamaan—peta mereka didukung oleh Mapbox.

API ini berbeda dari yang sebelumnya karena tidak mengembalikan file JSON, tetapi memberikan akses ke semua fungsionalitas Mapbox. Mapbox juga menghasilkan tutorial yang bagus tentang cara menggunakan API mereka di Framer.

Peta kotak peta melalui API di ponsel — Kotak peta di perangkat seluler.

Tutorial API Pengguna Acak di Framer Menggunakan Data Asli

Prototipe pembingkai dengan data API Pengguna Acak

Untuk memahami cara bekerja dengan API di Framer, mari kita mulai dengan Random User API. Kita akan membutuhkan satu layar aplikasi—daftar pengguna.

Langkah 1: Mode Desain

Berikut adalah daftar pengguna yang berisi nama, nama keluarga, dan avatar. Itu saja yang diperlukan. Bagian terpenting dari proses ini adalah memberi nama dan mengelompokkan semua elemen dengan benar. Avatar dan nama dikelompokkan dalam lapisan kotak, dan semua kotak dikelompokkan di dalam daftar:

Hal terakhir yang perlu dilakukan dalam Mode Desain adalah menandai lapisan daftar sebagai lapisan interaktif. Untuk melakukannya, cukup klik ikon target.

Langkah 2: Memahami JSON

Pertama-tama, Anda perlu memahami apa itu JSON dan bagaimana cara mendapatkannya di luar Framer. Dalam dokumen API Pengguna Acak, temukan permintaan data dari API. Tampilannya seperti ini: https://randomuser.me/api/?results=20. Seperti yang Anda lihat, ini adalah tautan biasa yang membuka file JSON di browser Anda:

Seperti, itu tidak terlihat jelas sama sekali. Untuk melihat file JSON yang diformat dengan benar, gunakan plugin Chrome bernama JSONview. Dengan plugin, file akan terlihat seperti ini:

Jauh lebih baik. Sekarang seharusnya mudah dibaca. File berisi larik hasil dengan data pengguna, yang diterima setelah meminta API untuk itu. Jadi apa itu file JSON? Tanpa masuk ke detail teknis, ini adalah file teks berdasarkan sintaks JavaScript yang berisi data spesifik dari database. JSON dapat digunakan di Framer untuk menampilkan data darinya.

Langkah 3: Impor File JSON ke Framer

Sekarang, file JSON dapat diimpor ke Framer dengan satu baris kode:

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

Buat objek bernama data yang akan berisi file JSON. Gunakan fungsi cetak untuk melihat apakah file JSON telah diimpor dengan benar:

 print data

Pembingkai dengan jendela konsol terbuka

Langkah 4: Mengakses Data Tertentu dari File JSON

Sekarang kembali ke struktur file JSON:

Dalam file JSON ini, results adalah array yang berisi lebih banyak objek. Setiap objek adalah pengguna yang berbeda. Pertama, salah satu objek ini harus ditargetkan. Gunakan fungsi cetak untuk lebih memahami apa yang terjadi:

 print data.results[1]

Konsol pembingkai:

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

Angka dalam kurung mewakili sejumlah objek dalam array. Menggunakan data.results[1] , akses ke semua data pengguna pertama dalam file JSON diterima.

Kemudian, item seperti nama atau nama keluarga dapat ditampilkan:

 print data.results[1].name.first

Framer menjawab dengan: "benjamin" . Dan voila! Akses ke data dari API telah tercapai!

Langkah 5: Menampilkan Data dari JSON

Akhirnya! Satu-satunya yang tersisa adalah untuk menampilkan data. Sekarang, loop sederhana yang akan menargetkan semua lapisan dari mode desain harus dibuat. Baca selengkapnya tentang menargetkan lapisan dengan lingkaran di artikel sebelumnya.

Kami menggunakan x = 0 untuk menargetkan objek pertama dalam array dari data JSON. Kemudian, untuk setiap elemen turunan dari daftar , kami menetapkan data dari data JSON. Di akhir loop, kami menambahkan +1 untuk menggunakan data dari objek berikutnya dalam array:

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

Itu dia! Sekarang Anda dapat kembali ke mode desain dan bermain dengan desain, dan data sebenarnya akan ditampilkan di prototipe Anda!

Anda dapat mengunduh file Framer di atas di sini: https://framer.cloud/djmvG

Instagram API – Data Real-time di Framer

Instagram adalah titik awal yang menarik untuk memulai perjalanan dengan data real-time. Petunjuknya relatif mudah diikuti, dan API menyediakan data yang menarik – Anda menerima akses lengkap. Di bagian artikel ini, API Instagram digunakan untuk membuat prototipe sederhana yang menampilkan data profil Instagram saya: nama, foto terbaru, dan jumlah suka.

Mode desain pembingkai vs. prototipe data nyata — Hanya lima baris kode dan token akses yang diperlukan untuk mengambil data dari Instagram.

Langkah 1: Dapatkan Token Akses

Untuk menggunakan API Instagram, diperlukan token akses. Itu dapat diperoleh dengan dua cara berbeda:

Cara paling umum adalah pergi ke situs web Instagram untuk Pengembang dan ikuti petunjuknya. Proses ini mungkin rumit bagi orang non-teknis.
Untungnya, ada cara mudah dan aman untuk mendapatkannya. Pixel Union mengembangkan proses satu klik yang jauh lebih mudah: Buka situs web mereka dan klik tombol Dapatkan Token Akses.

Langkah 2: Aktifkan Permintaan Lintas-domain

Setelah menerima token akses, diperlukan satu trik kecil. Instagram tidak mengizinkan permintaan API dari localhost (Framer) Anda, dan oleh karena itu kueri sisi server harus digunakan. Salah satunya adalah JSONProxy. Buka situs web mereka, rekatkan permintaan dari API Instagram, dan tekan GO.

Setelah selesai, alih-alih menggunakan tautan API Instagram, tautan JSONProxy dapat digunakan.

Langkah 3: Rancang Aplikasi Sederhana di Framer

Hanya ada tiga elemen penting dalam desain ini: nama placeholder, persegi panjang yang akan menampilkan foto terbaru, dan jumlah suka di bawah gambar. Semua ini ditandai sebagai lapisan interaktif untuk digunakan kembali di editor kode.

Langkah 4: Tulis Empat Baris Kode untuk Menggunakan Data dari Instagram

Prototipe terakhir di Framer: editor kode — Lima baris kode di Framer untuk mendapatkan data.

Alur di sini sama seperti di Random User API. Setiap data pengguna dapat diakses dari 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

Itu dia! Lima baris kode, dan Anda dapat membuat prototipe menggunakan data langsung dan nyata yang disediakan oleh Instagram. Unduh prototipe yang berfungsi di sini: https://framer.cloud/iYAXl. (Harap diingat bahwa Anda harus menambahkan KUNCI AKSES Anda sendiri untuk menjalankan prototipe ini.)

Ringkasan – Pro dan Kontra

Dengan membuat prototipe yang menggunakan data nyata yang diperoleh melalui API dari database, kemungkinan kreatif baru dan kemampuan untuk memeriksa desain produk terungkap—prototipe yang 100% konsisten dengan produk dapat dibangun dan fungsi baru diuji pada pengguna nyata . Dengan pratinjau semua data dalam sistem, lebih sulit untuk melewatkan elemen yang harus disertakan dalam desain, dan dengan akses ke data nyata, kesalahan desain yang berasal dari penggunaan data palsu dapat dihindari.

Konon, pembuatan prototipe high-fidelity di Framer cukup mahal. Dibutuhkan banyak penyesuaian untuk mendapatkan efek yang diinginkan—yang menghabiskan waktu dan uang. Seperti yang ditunjukkan dalam contoh Random User API, berkomunikasi dengan API tidaklah sulit, tetapi masih diperlukan banyak waktu untuk membuat prototipe yang hebat darinya.

Namun demikian, ketika diberikan ukuran penuh, itu pasti layak dipertimbangkan. Selamat membuat prototipe dengan data nyata!

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

Praktik Terbaik Desain UI dan Kesalahan Umum
Keadaan Kosong – Aspek UX yang Paling Diabaikan
Kesederhanaan Adalah Kunci – Menjelajahi Desain Web Minimal
Prinsip Heuristik untuk Antarmuka Seluler
Merancang untuk Keterbacaan – Panduan Tipografi Web