Tips All

Apakah kamu tahu soal Framer? Framer merupakan alat desain untuk membuat website dan prototype. Framer juga dikenal sebagai alat pembuat situs web AI sekali klik. Pada dasarnya Framer merupakan alat desain untuk membuat prototype menggunakan kode yang berkembang menjadi alat terintegrasi untuk membuat website. Framer dapat menghasilkan kode dengan mengimpor layar UI. Figma juga baru-baru ini menawarkan Developer Mode untuk memudahkan developer menghasilkan kode. Framer dapat memudahkan programmer dalam mengembangkan website agar sesuai dengan UI/UX Design yang telah dibuat. Versi Framer kini juga bersifat kolaboratif sehingga memungkinkan seluruh tim untuk mengerjakan project yang sama dan menyerahkan desain dari kanvas langsung ke produksi. Framer memiliki plugin di Figma dengan nama Figma to HTML With Frammer. Dengan plugin ini akan mempermudah kamu melakukan copy dan paste desain dari figma ke framer. Yuk simak tutorial di bawah ini untuk menggunakannya Tahap 1: Cari Figma to HTML with framer dan run plugin Tahap pertama adalah mencari plugin "Figma to HTML with Framer" di dalam menu plugin Figma. Setelah menemukannya, langkah berikutnya adalah menjalankan plugin tersebut untuk mengaktifkannya agar siap digunakan. Dengan memanfaatkan plugin ini, kamu akan dapat mengubah desain Figma kamu menjadi kode HTML. Tahap 2: Pilih objek atau frame yang ingin di copy Setelah itu, tahap selanjutnya adalah memilih objek atau frame yang ingin di-copy. Dengan langkah ini, kamu dapat menentukan dengan tepat elemen mana yang ingin kamu konversi menjadi kode HTML, memberikan fleksibilitas dalam proses transformasi desain ke dalam kode. Tahap 3: Jalankan plugin Figma to HTML with Frammer Setelah memilih objek yang akan di-copy paste ke dalam Framer, langkah selanjutnya adalah dengan melakukan klik kanan pada objek tersebut. Kemudian, pilih opsi "plugins" dan cari serta pilih "Figma to HTML With Framer". Dengan melakukan langkah ini, objek yang telah kamu pilih akan langsung dapat di-paste ke dalam Framer, mempercepat proses konversi desain menjadi kode HTML secara langsung dan efisien. Tahap 4: Paste ke dalam framer Objek akan langsung dapat di-paste ke dalam Framer, memberikan kemudahan dalam mengintegrasikan desain dari Figma ke dalam aspek pengembangan web dengan cepat dan efisien. Dari berbagai fitur dan kemampuannya dalam mengonversi desain Figma menjadi kode HTML yang responsif hingga memudahkan dalam proses pengembangan prototipe interaktif, plugin "Figma to HTML with Framer" merupakan alat yang sangat berguna bagi para desainer dan pengembang dalam menghasilkan tampilan visual yang responsif dan interaktif untuk proyek mereka. Mau mencoba menggunakan plugin ini untuk meningkatkan efisiensi dalam mengubah desain menjadi kode HTML? Yuk, temukan lebih banyak tutorial dan sumber daya gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design , kamu bisa mengasah keterampilan dan memperkaya portofolio desainmu 🚀

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu mengenal Stateless dan Stateful Widget pada Flutter Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga. Apa itu Stateless dan Stateful? Stateless Widget adalah widget yang mempunyai sifat tidak akan berubah, ketika disebabkan oleh interaksi user maupun variabel dan nilai yang ditemukan. Stateful Widget adalah widget yang mempunyai sifat dinamis. Widget dapat berubah dengan adanya interaksi user maupun variabel dan nilai yang ditemukan. Bagaimana cara kerja Stateless dan Stateful? Proses stateless dan stateful sebenarnya hampir sama, yang membedakan antara keduanya adalah setelah proses dari Constructor menuju Build. Constructor adalah tahapan awal yang fungsinya untuk membuat setiap state dengan keadaan yang ingin diterapkan, kemudian Build yang merupakan tahap dimana semua widget dan state dibangun ke UI (User Interface). Lalu apa yang membedakan antara keduanya? Nah pada stateful widget sebelum masuk ke tahapan Build ada namanya Internal State, tahapan ini merupakan tahap untuk proses penambahan state atau perubahan data. Ketika Internal State disebabkan oleh UI, maka sistem akan melakukan re-render tampilan dari widget awal. Bagaimana cara penerapan Stateless dan Stateful Widget pada Flutter? Contoh penerapan Stateless Widget : import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Center( child: Text("BuildWithAngga"), ), ), ); } } class Heading extends StatelessWidget { final String text; Heading({this.text}); @override Widget build(BuildContext context){ return Text( text, style: TextStyle( fontSize: 24.0, fontWeight: FontWeight.bold, ), ); } } Contoh penerapan Stateful Widget : import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { int _angka = 1; void _increment(){ setState(() { _angka += 1; }); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, home: Scaffold( floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: ()=>_increment(), ), appBar: AppBar( centerTitle: true, title: Text('Stateful Widget'), ), body: Center( child: Text('Angka : $_angka', style: TextStyle(fontSize: 30)), ), ) ); } } Tambahan untuk teman-teman : Perintah yang dapat merubah state adalah setState((){}) (Perintah ini tidak dapat digunakan pada Stateless Widget).Proses Increment pada contoh dapat menambah objek. Misalnya dengan melakukan interaksi pada tombol, maka akan menambahkan angka pada tampilan. Kesimpulan Mana yang lebih baik antara stateless dan stateful? Semuanya kembali lagi pada fungsi dan penggunaan oleh developer yang mengembangkan aplikasi mobile. Karena peranan yang diberikan pada stateless dan stateful, sama-sama memiliki kelebihan dan fungsinya. Pada stateful contohnya dapat memberikan animasi widget sehingga dapat merubah tampilan UI, namun perlu diketahui semakin banyak widget yang di re-render pada aplikasi maka diperlukan performance yang sesuai dengan apa yang ditampilkan pada stateful widget di aplikasi mobile. Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.

Apakah kamu sering kali merasa kebingungan dalam memutuskan kapan sebaiknya menggunakan frame atau grup dalam platform desain Figma? Meskipun keduanya berfungsi sebagai wadah untuk menyimpan objek, namun kenyataannya, keduanya memiliki karakteristik dan situasi penggunaan yang berbeda satu sama lain yang mungkin tidak selalu mudah dipahami secara langsung. Oleh karena itu, sebagai upaya untuk memberikan penjelasan lebih mendalam dan memudahkan dalam memahami perbedaannya, artikel ini bertujuan untuk membantu membedakan penggunaan frame dan group dalam Figma. Frame Frame merupakan salah satu elemen pokok di Figma yang berfungsi sebagai wadah bagi desain yang ingin kamu buat. Kamu juga dapat menyebut frame ini sebagai artboard, yang menjadi fondasi utama dalam proses penciptaan desainmu di platform ini. Frame punya banyak kelebihan dibanding group. Selain sebagai tempat untuk banyak lapisan, frame juga bisa diatur ukurannya dan gayanya seperti kotak. Bahkan, frame bisa dipakai buat mengatur tata letak seperti halnya papan gambar. Gak cuma itu, frame juga bisa diubah ukurannya dengan mudah. Jadi, dengan semua keunggulannya itu, frame jauh lebih bermanfaat ketimbang group, lho! Kamu bisa lihat perbandingannya di bawah ini. 💪 Group Sama seperti alat desain lainnya, Group di Figma memungkinkan kamu untuk menggabungkan beberapa elemen bersama sebagai lapisan level paling atas. Batas-batas sebuah group ditentukan oleh elemen-elemen turunanya, sehingga mengubah ukuran atau memindahkan elemen-elemen tersebut akan membuat batas grup menyesuaikan secara otomatis. Kamu dapat membuat sebuah group dengan memilih objek-objek dan menekan: ⌘ + G (Mac) atau Ctrl + G (Win).Batas-batas grup secara otomatis menyesuaikan saat elemen-elemen turunan diubah ukuran atau dipindahkan. Membuat sebuah grup bersifat non-destruktif—yang berarti tidak akan meratakan atau menggabungkan lapisan-lapisan secara permanen. Kapan pun kamu dapat memisahkan elemen-elemen tersebut dari grup dengan menekan: ⌘ + ⌫ atau Ctrl + Shift ⌫ Group sangat berguna ketika kamu ingin menggabungkan item serupa dan mengelola lapisan yang lebih sedikit dalam desainmu. Misalnya, kamu mungkin memiliki beberapa logo perusahaan yang perlu tetap tergabung. Mengelompokkannya adalah cara yang bagus untuk menggabungkannya menjadi satu lapisan tunggal yang lebih mudah dikelola—mengklik salah satu elemen dalam grupmu akan memilih seluruhnya dan memungkinkan kamu untuk memindahkannya atau memanipulasinya sebagai satu objek di kanvas. Jika kamu perlu memilih elemen turunan tertentu dalam sebuah group, kamu dapat melakukannya dengan mengklik dua kali. Menggunakan Group apabila kalian ingin Kamu ingin menggabungkan beberapa objek menjadi satu layer yang dapat dikelola dengan mudah.Kamu ingin mengelompokkan elemen-elemen yang akan tetap sama saat diubah ukuranya (contohnya: sebuah logo atau simbol yang terdiri dari beberapa bentuk).Kamu ingin batas grup menyesuaikan secara otomatis dengan objek turunan saat kamu memanipulasi mereka. Menggunakan Frame apabila kalian ingin Kalian ingin mengontrol ukuran frame secara independen dari isinya.kamu ingin menentukan ukuran turunan elemen.Kalian ingin objek dipangkas oleh batas frame, atau berada di luar batasnya.kalian ingin mendalami berbagai macam prototipe seperti horizontal caraousel, atau peta yang dapat digulir sercara vertikal dan horizontal.Kamu ingin menggunakan layout grid untuk membantu pengaturan elemen-elemen desain dengan lebih teratur dan konsisten. Kesimpulan Dari penggunaan Frame yang memungkinkan untuk menata elemen secara terstruktur hingga Group yang memfasilitasi pengelompokan elemen yang saling terkait, pemahaman perbedaan antara keduanya sangatlah penting dalam proses desain di Figma. Dengan memahami kegunaan dan karakteristik masing-masing, pengguna dapat membuat keputusan yang terinformasi dalam menata dan mengelola struktur visual dari proyek desain mereka. Mau mencoba memperdalam pemahamanmu tentang Frame dan Group di Figma? Yuk, temukan lebih banyak tutorial dan sumber belajar gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design, kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Laravel merupakan salah satu framework PHP yang sedang populer saat ini di Indonesia, dengan menawarkan berbagai fitur yang memudahkan pengembangan aplikasi web. Salah satunya adalah middleware, yang berperan penting dalam mengamankan dan mengontrol akses ke rute-rute dalam aplikasi. Sebelum itu mari kita mengenal siapakah Middleware ini dalam Laravel PHP dan apa manfaatnya?... Apa Itu Middleware dalam Laravel? Middleware adalah lapisan perantara antara permintaan route HTTP yang masuk dan action dari Controller yang akan dijalankan. Middleware memungkinkan kita untuk meakukan berbagai tugas baik itu sebelum ataupun sesudah tindakan dilakukan. Kita juga dapat menggunakan tool CLI untuk membuat sebuah Middleware dalam Laravel. Beberapa contoh penggunaan Middleware meliputi autentikasi, validasi, manipulasi permintaan, dan lainnya. php artisan make:middleware auth Manfaat dari Middleware dalam Laravel Keamanan : dalam Middleware memungkinkan kita untuk memverifikasi apakah pengguna sudah diautentikasi sebelum mengakses halaman tertentu. Dengan demikian, kita dapat melindungi data sensitif dan mengontrol hak akses pengguna.Pemfilteran Data : Middleware dapat digunakan untuk memanipulasi data permintaan sebelum sebuah action dalam controller dilakukan. Misalnya, kita dapat memeriksa terlebih dahulu data yang dikirim oleh pengguna sebelum data tersebut diproses lebih lanjut atau kita ingin memodifikasi data yang akan dikirim lalu kita dapat memeriksa ulang data yang akan dikirim oleh pengguna sebelum data tersebut diproses.Logging dan Audit : Middleware juga dapat digunakan untuk mencatat aktivitas pengguna atau melakukan audit terhadap permintaan yang masuk. Ini dapat membantu dalam pemantauan dan analisis aplikasi. Kenali bagaimana bentuk Middleware dalam Framework Laravel Setelah kita menjelajahi apa itu middleware dan apa manfaat middleware pada Framework Laravel, mari kita kenali bagaimana bentuk Middleware dan bagimana alur pembuatannya.. Ketika kita membuat Middleware secara default Middleware akan disimpan pada folder app\Http\Middleware. MengenalFiturMiddleware_BuildWithAngga Setelah kita membuat middleware hasil yang akan kita dapatkan akan seperti contoh dibawah. <?php namespace App\\Http\\Middleware; use Closure; use Illuminate\\Http\\Request; class checkStatus { /** * Handle an incoming request. * * @param \\Illuminate\\Http\\Request $request * @param \\Closure(\\Illuminate\\Http\\Request): (\\Illuminate\\Http\\Response|\\Illuminate\\Http\\RedirectResponse) $next * @return \\Illuminate\\Http\\Response|\\Illuminate\\Http\\RedirectResponse */ public function handle(Request $request, Closure $next) { // code untuk perintah yang akan dilakukan untuk mengatur akses routes return $next($request); } } Lalu kita dapat mengisi code untuk perintah menggunakan if clause sebagai contoh kali ini untuk mengecek status user apakah sudah login atau belum jika status ‘0’ atau offline dalam case ini maka akan diarahkan kembali pada halaman login. //----------------------------------------------------------------------------------------- // Melakukan Pengecekan apakah user sudah melakukan login dan status user masih 0 (offline) if (Auth::check() && Auth::user()->status === 0) { // apabila iya maka user akan logout dan diarahkan pada halaman login kembali Auth::logout(); return redirect('/login'); } //----------------------------------------------------------------------------------------- Setelah kita mengisi code untuk perintah yang akan dilakukan kita harus menambahkan middleware dalam kernel.php pada direktori App\Http . kita dapat menambahkannya pada bagian proteced $routeMiddleware = [ ... ]. protected $routeMiddleware = [ // ... 'checkStatus' => \\Illuminate\\Auth\\Middleware\\checkStatus::class, ]; Lalu langkah terakhir kita dapat menambahkannya dalam route pada direktori routes\web.php Route::get('/home', function () { // ... })->middleware('checkStatus'); Kesimpulan Dalam artikel ini, kita telah mendalami konsep Middleware sebagai unsur krusial dalam menjaga keamanan framework Laravel. Pemahaman tentang manfaat dan penerapan Middleware telah diuraikan, sambil menjelaskan fleksibilitas konfigurasi pada tingkat global, grup, atau individual untuk setiap route. Dengan memanfaatkan Middleware, tidak hanya keamanan HTTP Request dapat diperkuat, tetapi juga proses pemfilteran data dan logging/audit dapat dioptimalkan. Penggunaan Middleware memberikan kemampuan kepada pengembang untuk meningkatkan kehandalan dan keamanan aplikasi Laravel. Tool CLI Laravel turut memberikan efisiensi dalam pembuatan Middleware, memberikan kemudahan dalam tahap pengembangan dan pemeliharaan aplikasi web. Oleh karena itu, pada artikel ini tidak hanya memberikan pemahaman mendalam tentang peran Middleware, tetapi juga menyoroti manfaat praktisnya dalam pengembangan ekosistem Laravel. Untuk belajar lebih lanjut tentang middleware, Kamu dapat mengikuti kelas belajar online dari Build With Angga (BWA) yang membahas tentang Laravel Middleware. Jangan Lupa untuk terus eksplorasi fitur-fitur Laravel PHP !!! Rekomendasi Kelas :Kelas Online Gratis PHP Laravel Web Development | BuildWithAngga Kelas Online Gratis Belajar Laravel di BuildWithAngga

Section adalah salah satu fitur yang sangat berguna di Figma, dirancang khusus untuk mendukung perjalananmu dalam menyelesaikan tugas desain. Fitur ini tidak hanya sekadar penambah nilai, melainkan menjadi elemen yang tidak terpisahkan dari pengalaman pengguna di Figma. Dengan adanya Section, kamu akan merasa lebih tertata dan terorganisir saat bekerja dengan desain-desain kompleks. Sebagai bagian integral dari platform Figma, fitur ini memberikan kemudahan bagi kamu untuk mengelola proyek-proyek desainmu dengan lebih efektif dan efisien. Bagian-bagian dalam desain Figma merupakan elemen tingkat atas di atas kanvas secara default. Bagian-bagian dapat berisi semua jenis layer, termasuk Sections lain, tetapi tidak dapat berada dalam frame atau group. Cara Membuat Section Untuk mengakses Sections dalam Figma, langkah pertama adalah menuju ke bagian atas toolbar dan mengklik dropdown yang terletak di menu frame. Dari sana, kamu akan diberi pilihan untuk memilih bagian yang diinginkan. Selain itu, kamu juga dapat menggunakan shortcut keyboard dengan menekan tombol "Shift + S" untuk langsung beralih ke bagian yang tersedia. Setelah memilih "Section" atau menggunakan shortcut keyboard, Kamu akan melihat section baru muncul di atas kanvas. Kamu dapat memberikan nama untuk section tersebut sesuai kebutuhan. Tampilan setelah menggunakan section akan tampak seperti ini, kamu akan dengan mudah melihat bagaimana penggunaan section memperjelas struktur dan membuat tata letak menjadi lebih teratur serta lebih mudah dipahami bagi pengguna. Fitur tanda untuk siap untuk development Setelah konten di dalam sebuah bagian selesai, kamu dapat dengan mudah menandai bagian tersebut sebagai siap untuk pengembangan, memberikan sinyal jelas kepada para pengembang yang menggunakan Mode Pengembangan bahwa bagian tersebut telah siap untuk langkah berikutnya dalam proses pembangunan. Cara mengubahnya kamu bisa hanya langsung “mark as ready for dev” dan status akan berubah. Manfaat penggunaan section: memungkinkan kamu dengan mudah menetapkan area di kanvas yang bisa digunakan untuk kolaborasi atau mengembangkan ide bersama.Mengatur file agar lebih mudah dirapihkan.Menghubungkan ke sebuah kelompok desain.Menandai konten dalam kapabilitas sebagai "Siap untuk pengembangan" untuk membantu dalam proses penyerahan kepada pengembang. Dari pengaturan elemen-elemen dalam section yang terstruktur hingga kemampuannya dalam menyediakan kerangka kerja yang terorganisir, fitur section di Figma menawarkan serangkaian kemudahan yang sesuai dengan berbagai kebutuhan desain dan fungsionalitas proyekmu. Mau mencoba menggali lebih dalam fitur section ini untuk meningkatkan kualitas desainmu? Yuk, temukan lebih banyak tutorial dan sumber belajar gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design, kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Taukah kamu soal user journey map dalam UI/UX Design? User Journey Map sering digunakan dalam proses perancangan desain khususnya untuk meningkatkan user experience dalam tampilan suatu desain. Yuk sebagai desainer kita kenalan dengan user journey map. Menurut buku "Desain Interaksi: Fundamental", user journey map tidak hanya sekadar representasi visual dari perjalanan pengguna saat berinteraksi dengan suatu produk, proses, atau sistem, melainkan juga sebuah alat yang sangat berharga dalam mengeksplorasi dan memahami pengalaman pengguna secara menyeluruh. Dengan user journey map, kamu dapat menggambarkan setiap langkah yang diambil oleh pengguna dari awal hingga akhir, serta melihat bagaimana interaksi tersebut berkembang dari waktu ke waktu. Hubungan yang erat antara user journey map dan model konseptual interaksi menawarkan kemungkinan untuk menyelami lebih dalam bagaimana pengguna berinteraksi dengan produk atau sistem interaktif, sehingga membantu dalam merancang pengalaman yang lebih memuaskan dan efektif. Tujuan dari penggunaan user journey map sendiri adalah untuk : Merancang proses interaksi suatu produk untuk memberikan pemahaman yang lebih mendalam tentang bagaimana pengguna berinteraksi dengan produk tersebut dari awal hingga akhir, memungkinkan perancang untuk mengidentifikasi titik-titik kritis, preferensi, dan kebutuhan pengguna yang harus dipenuhi dalam setiap tahap perjalanan, sehingga memungkinkan pengembangan solusi yang lebih terarah dan berorientasi pada pengguna.Mencari atau mengidentifikasi suatu masalah untuk memberikan pandangan yang lebih holistik tentang pengalaman pengguna dalam interaksi dengan produk atau sistem, sehingga memungkinkan kamu untuk mengeksplorasi setiap fase secara rinci, mengidentifikasi titik-titik kebingungan, frustrasi, atau hambatan yang mungkin mereka alami, serta menemukan peluang-peluang untuk memperbaiki dan meningkatkan pengalaman pengguna secara keseluruhan.Mengetahui kebutuhan pengguna terhadap suatu sistem untuk memberikan wawasan yang komprehensif tentang bagaimana pengguna berinteraksi dengan sistem tersebut dari awal hingga akhir, memungkinkanmu untuk mengidentifikasi dan memahami setiap tahap perjalanan pengguna secara mendalam, menganalisis preferensi, harapan, dan kebutuhan mereka, sehingga memungkinkan perancang untuk mengembangkan solusi yang sesuai dan efektif untuk memenuhi kebutuhan pengguna dengan lebih baik..Mengevaluasi suatu produk untuk memberikan pemahaman yang lebih dalam tentang pengalaman pengguna dari mulai awal hingga akhir, sehingga memungkinkan kita untuk menyelidiki setiap fase perjalanan pengguna secara komprehensif, menganalisis tanggapan, persepsi, dan tingkat kepuasan mereka terhadap produk tersebut, sehingga kita dapat mengidentifikasi area-area yang memerlukan perbaikan atau penyempurnaan, serta mengembangkan strategi yang lebih efektif untuk meningkatkan kualitas produk secara keseluruhan. Sumber Foto: Interaction-Design.ORG Pada umumnya terdapat informasi yang dipetakan dalam user journey map, yaitu: Perjalanan pengguna (journey) adalah bagian penting dari informasi yang kamu temukan dalam user journey map, yang memberikanmu gambaran menyeluruh tentang langkah-langkah atau interaksi yang dijalani oleh pengguna dalam mengakses atau menggunakan produk atau layanan tertentu.Tujuan dan harapan pengguna (goals & expectations) adalah elemen kunci yang dicerminkan dalam user journey map, yang memberikan gambaran tentang apa yang diinginkan atau diharapkan oleh pengguna dalam setiap tahap perjalanan mereka.Dalam konteks informasi yang dipetakan dalam user journey map, alur proses (process flow) adalah representasi yang memberikanmu gambaran detail tentang langkah-langkah atau urutan interaksi yang diikuti oleh pengguna dalam menjelajahi atau menggunakan suatu produk atau layanan.Titik sentuh (touchpoint) adalah salah satu elemen yang kamu temui dalam informasi yang dipetakan dalam user journey map, yang menandai titik-titik atau momen-momen spesifik di mana pengguna berinteraksi dengan produk atau layanan dalam perjalanan pengguna.Pengalaman (experience) adalah komponen penting yang kamu temui dalam informasi yang dipetakan dalam user journey map, yang memberikanmu gambaran lengkap tentang bagaimana pengguna berinteraksi dengan produk atau layanan dalam setiap tahapan.Deskripsi pengalaman positif dan negatif adalah aspek yang kamu temukan dalam informasi yang dipetakan dalam user journey map, yang memberikanmu pemahaman mendalam tentang perasaan, reaksi, dan persepsi pengguna terhadap interaksi dengan produk atau layanan selama perjalanan.Pikiran dan perasaan (think and feel) merupakan elemen yang kamu jumpai dalam informasi yang dipetakan dalam user journey map, yang memberikanmu wawasan tentang pemikiran dan emosi yang dialami pengguna dalam setiap tahap perjalanan mereka saat berinteraksi dengan produk atau layanan tertentu. Untuk membuat user journey yang lebih menarik dan memikat, penting untuk mengidentifikasi pengguna melalui user profiling. Setiap pengguna akan diberikan tugas atau tujuan spesifik yang harus dicapai di dalam website, seperti membeli sebuah produk, mencari waktu pembukaan toko, atau membatalkan debit di bank. Pengguna memiliki kebutuhan yang harus dipenuhi, dan langkah-langkah yang diambil untuk memenuhi kebutuhan tersebut dikenal sebagai user journey. Dalam user journey ini, kamu dapat menjelajahi pengalaman yang sesuai dan relevan bagi pengguna, membawa mereka melalui perjalanan yang memuaskan dan bermakna dalam mencapai tujuan mereka. Bentuk dari user journey sangatlah beragam dan menghadirkan banyak ketidakpastian. Umumnya, tampilannya disesuaikan dengan audiens yang akan melihatnya; contohnya, jika kamu menggunakan user journey untuk berkomunikasi dengan developer, itu mungkin dibentuk hanya dengan tulisan, sementara jika kamu menggunakan untuk berkomunikasi dengan executive committee, user journey mungkin diilustrasikan dalam setiap langkahnya seperti buku komik. Oleh karena itu, bentuk user journey sangat bergantung pada tingkat kreativitas pembuatnya dan harus disesuaikan dengan situasi yang ada. User journey merupakan gabungan dari dua instrumen yang sangat kuat, yaitu story telling dan visualisasi, yang bertujuan untuk memberikan gambaran yang lebih mendalam dan jelas kepada kamu dan timmu tentang bagaimana pengguna berinteraksi dengan produk atau layanan kamu, serta membantu dalam memahami dan mendefinisikan kebutuhan pelanggan dengan lebih baik. Pembuatan user journey dapat memberikan banyak keuntungan, antara lain: Demonstrasi visi dari proyek kepada kamu sangat penting. Penggunaan user journey merupakan cara yang efektif untuk mengkomunikasikan kepada stakeholders apa yang akan dicapai dan memberikan contoh konkret dari bentuk masa depan tentang apa pun yang sedang didesain. Bersama dengan persona, user journey dapat menjadi salah satu output kunci dari tahap pengumpulan kebutuhan (requirement gathering stage) di awal sebuah proyek.Memahami user behavior atau perilaku pengguna adalah tahap yang krusial dalam pengembangan produk atau sistem. Penggunaan user journey membantu kamu untuk mendapatkan pemahaman yang lebih mendalam tentang bagaimana cara pengguna berinteraksi dengan sistem dan apa yang diharapkan dari interaksi tersebut, memungkinkanmu untuk merancang solusi yang lebih sesuai dan memuaskan bagi pengguna.Mengidentifikasi possible functionality di level tinggi merupakan langkah awal yang penting dalam pengembangan produk atau sistem. Penggunaan user journey memberikan pemahaman yang mendalam tentang kebutuhan functional untuk menjalankan tugas dengan memahami key tasks dari apa yang diharapkan untuk dilakukan, memberikan kamu wawasan yang lebih jelas untuk merancang fungsionalitas yang sesuai dan memadai.Mendefinisikan taxonomy dan tampilan (interface) adalah langkah penting dalam proses pengembangan produk atau sistem. Penggunaan user journey memberikan pemikiran yang lebih mendalam tentang jenis taxonomy yang dapat membantu tugas dan seperti apa jenis tampilan yang dibutuhkan pengguna untuk menyelesaikan tugas tersebut, membantu kamu merancang struktur dan antarmuka yang optimal sesuai dengan kebutuhan pengguna. Kamu, sebagai pengguna, juga dapat memperkaya pengalamanmu dengan memahami perjalanan pengguna (user journey map) dalam interaksi dengan aplikasi keuangan. Dengan memahami langkah-langkah dan tantangan yang dihadapi pengguna, kamu dapat menciptakan pengalaman yang lebih memuaskan dan efisien. Mau coba buat desain keren lainnya dengan font-font di atas? Bisa banget! Yuk, kepo-in kelas-kelas UI/UX design di BuildWithAngga! Kamu bisa mengasah skill dan menambah portfolio yang lebih berkualitas lhoo 🤩

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu Cara Membuat Gradient Button di Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga. Apa itu Gradient Button? Gradient Button adalah tombol gradasi yang memberikan efek warna pada tombol agar tombol dapat terlihat menarik dan menjadi lebih indah. Tombol ini dapat membantu melakukan tugas-tugas tertentu seperti membantu menavigasi dari halaman satu ke halaman yang lain, tombol sebagai masuk ke halaman utama, Tombol sebagai Sign up atau Sign in, dan masih banyak lagi. Dalam Flutter, tombol gradasi ini merupakan package yang memberikan banyak manfaat seperti meningkatkan estetika dan daya tarik UI aplikasi dan membantu menyampaikan makna maupun informasi tertentu pada aplikasi. Cara membuat Gradient Button pada Flutter : Source : https://dribbble.com/quanhth Langkah Pertama : Membuat project baru di Visual Studio Code Langkah Kedua : Menambahkan Material Package dan RunApp yang berfungsi untuk memanggil aplikasi yang kita buat. import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); } Langkah Ketiga : Selanjutnya kita perlu membuat stateless widget pada RunMyApp untuk mengembalikan fungsi dari widget MaterialApp yang dapat membantu kita untuk bisa mengatur tema dan lain-lain. class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return Scaffold( } } Langkah Keempat : Menambahkan scaffold widget yang berisi AppBar dan Body. AppBar ini mempunyai fungsi untuk memberikan judul pada AppBar. return Scaffold( appBar: AppBar( title: const Text('Gradient Button'), ), Langkah Kelima : Pada Body di bagian scaffold, berisi BoxDecoration yang merupakan bagian gradasi yang dibutuhkan. Kemudian LinearGradient yang merupakan bagian untuk menunjukkan efek dari warna yang kita buat, dan Child yang merupakan bagian container yang berisi Elevated Button berfungsi sebagai tombol. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gradient Button'), ), body: Center( child: ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( padding: const EdgeInsets.all(0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10))), child: Ink( decoration: BoxDecoration( gradient: const LinearGradient( colors: [Colors.cyan, Colors.green]), borderRadius: BorderRadius.circular(10)), child: Container( width: 120, height: 40, alignment: Alignment.center, child: const Text( 'Gradient Button', )))))); } } Output : Kesimpulan Gradient Button merupakan widget yang dapat memungkinkan kamu untuk menambahkan efek gradasi warna yang halus pada tombol aplikasi kamu. Sehingga dengan kamu menambahkan Gradient Button ini dapat membantu kamu membuat aplikasi kamu menjadi lebih menarik dan profesional. Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.

Golang, atau biasa dikenal sebagai Go, adalah bahasa pemrograman yang semakin populer di kalangan pengembang perangkat lunak. Dikembangkan oleh Google, Go menawarkan sintaksis yang sederhana, performa tinggi, dan kemudahan dalam penulisan kode. Salah satu fitur utama dari Go adalah kemampuannya untuk menggunakan method dan function secara efektif. Dalam tutorial ini, kita akan menjelaskan cara menggunakan method dan function dalam bahasa pemrograman Go dengan bahasa Indonesia. Pengenalan Method dan Function Sebelum kita melangkah lebih jauh, mari kita pahami apa itu method dan function dalam konteks Go. Function Function adalah blok kode yang dapat dipanggil untuk melakukan tugas tertentu. Mereka membantu dalam mengorganisasi kode Kamu dan memungkinkan untuk mengeksekusi tugas yang sama secara berulang. Dalam Go, function dideklarasikan dengan menggunakan kata kunci func, diikuti oleh nama function, daftar parameter (jika ada), dan tipe data yang dikembalikan (jika ada). Method Method adalah function yang terkait dengan suatu tipe data tertentu. Mereka memungkinkan kita untuk "mengikat" function ke tipe data, sehingga operasi tertentu dapat dieksekusi pada instance dari tipe data tersebut. Dalam Go, method dideklarasikan dengan menentukan sebuah function dan menambahkan penerima (receiver) di awal deklarasi function. Cara Membuat dan Menggunakan Function Pertama, mari kita lihat cara membuat dan menggunakan function dalam Go. Output dari program di atas akan menjadi: Cara Membuat dan Menggunakan Method Sekarang, mari kita pelajari cara membuat dan menggunakan method dalam Go. Output dari program di atas akan menjadi: Kesimpulan Dalam tutorial ini, kita telah mempelajari cara menggunakan method dan function dalam bahasa pemrograman Go. Function digunakan untuk mengeksekusi tugas tertentu, sedangkan method memungkinkan kita untuk memanipulasi data melalui tipe data yang terkait. Dengan pemahaman yang baik tentang penggunaan keduanya, Kamu dapat mengembangkan aplikasi Go yang lebih efisien dan mudah dipelihara. Semoga tutorial ini bermanfaat! Semoga dengan pemahaman Go, Kamu lebih siap untuk menghadapi tantangan dalam pengembangan aplikasi Go yang lebih kompleks. Jangan ragu untuk terus belajar dan menjelajahi fitur-fitur menarik dalam bahasa Go! Dan untuk pengalaman belajar yang lebih mendalam, yuk bergabung di Build with Angga dan kembangkan keterampilan pemrograman Go Kamu bersama komunitas yang solid dan dukungan dari instruktur ahli. Mari bergabung dan berkembang bersama-sama! 🚀 BuildWithAngga

Apakah kamu pernah merasa sulit mencari gambar, ilustrasi, atau foto yang sesuai dengan kebutuhan desainmu? Unsplash, sebuah platform berbagi gambar, ilustrasi, font, template, dan foto. Beberapa dari item tersebut bahkan dapat kamu miliki secara gratis! Namun, akses melalui website dan proses pengunduhan terlebih dahulu seringkali menghabiskan waktu dan membingungkan. Kabar baiknya, saat ini Unsplash hadir dalam bentuk plugin Figma yang mempermudah kamu untuk memasukkan foto langsung ke dalam desainmu. Dengan begitu, proses desainmu akan menjadi lebih efisien dan kreatif, tanpa harus repot mencari-cari gambar secara manual. Cara menggunakan plugin unsplash Tahap 1: Cari unsplash plugin dan run plugin Cara menggunakan plugin Unsplash sangatlah mudah. Tahap pertama adalah mencari plugin Unsplash pada bagian resources di Figma. Setelah kamu menemukannya, langkah selanjutnya adalah dengan mengklik opsi "run plugin"untuk mengaktifkannya. Tahap 2: Buka unsplash plugin Tahap kedua setelah menemukan plugin Unsplash di bagian resources adalah membukanya. Pertama-tama, kamu perlu membuka plugin Unsplash agar bisa mengakses semua fitur yang disediakan. Setelah plugin terbuka, kamu akan diperlihatkan dengan berbagai opsi dan fitur yang memungkinkan kamu untuk menelusuri ribuan gambar berkualitas tinggi. Tahap 3: Pilih frame atau objek yang mau dimasukan foto Pilih salah satu objek atau frame yang akan dimasukkan foto. Dengan langkah ini, kamu dapat langsung menempatkan foto yang telah kamu pilih ke dalam frame yang telah dipilih sebelumnya. Dengan memilih objek atau frame tertentu, kamu dapat mengatur secara tepat di mana foto tersebut akan ditempatkan dalam desainmu. Tahap 4: Cari dan pilih foto yang akan digunakan Cari foto yang ingin kamu gunakan dan pilih foto tersebut. Dengan melakukan langkah ini, foto akan secara otomatis masuk ke dalam frame yang sudah kamu pilih sebelumnya. Proses ini memudahkan kamu untuk menemukan dan menerapkan foto yang sesuai dengan kebutuhan desainmu. Selain itu, apabila kalian tidak memilih frame untuk foto terlebih dahulu, maka gambar akan tetap keluar di luar framedengan ukuran sebenarnya, yang mungkin dapat mengakibatkan gangguan dalam tampilan desain dan menurunkan kesan profesionalitasnya. Oleh karena itu, penting untuk memastikan bahwa setiap elemen visual termasuk foto, ditempatkan dengan cermat dalam frame yang tepat, sehingga keseluruhan desain tetap terorganisir dan terlihat estetis. Unsplash: Membantu desainer dalam mencari gambar 📷 Dari beragam koleksi gambar yang tersedia secara gratis hingga kemampuannya dalam menyediakan inspirasi visual untuk berbagai proyek desain, Unsplash menjadi sumber daya yang sangat berharga bagi para desainer dalam mencari gambar yang sesuai dengan kebutuhan mereka. Mau mencoba menggunakan Unsplash untuk mendapatkan gambar-gambar berkualitas tinggi untuk desainmu? Yuk, temukan lebih banyak sumber daya dan inspirasi desain gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design , kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Kamu pasti sering melihat desain kemasan produk yang menarik atau campaign promosi, desain konten sosial media, dan masih banyak yang lainnya. Berangkat dari desain yang menarik inilah rasa penasaran muncul hingga akhirnya coba untuk mencari tahu siapa dibalik layar yang membuat itu semua. Yap, itu semua ialah hasil pengerjaan dari seorang Graphic Designer. Namun, apa itu Graphic Designer? Graphic Designer merupakan salah satu bentuk seni lukis untuk menciptakan atau mengatur elemen rupa seperti ilustrasi, foto, tulisan, dan garis di atas suatu media. Bentuk-bentuk dari seni desain grafis ini dibuat oleh seorang Graphic Designer yang memiliki spesialisasi untuk menerjemahkan pesan menjadi dalam bentuk gambar. Graphic Designer juga terlibat langsung dalam pembuatan desain, baik untuk konten marketing, dan tujuan lain yang dibutuhkan dan diminta oleh perusahaan. Lalu, apa aja sih software yang sering digunakan oleh para Graphic Designer pada saat ini. Yuk, Simak 5 Tools Populer Graphic Designer Saat ini!😍 1. Canva Canva Software Design Canva adalah aplikasi desain grafis berbasis web dan seluler yang dirancang untuk memudahkan siapa pun, dari pemula hingga profesional, dalam membuat berbagai jenis desain grafis. Salah satu fitur utama Canva adalah koleksi besar template yang mencakup berbagai keperluan desain, mulai dari media sosial, poster, undangan, kartu ucapan, hingga presentasi. Dengan begitu, pengguna tidak perlu memulai desain dari nol, melainkan dapat memilih template yang sesuai dengan kebutuhan mereka dan menyesuaikan nya dengan mudah. Selain template, Canva juga menyediakan ribuan elemen desain seperti ikon, gambar, bentuk, dan latar belakang yang dapat digunakan untuk menambahkan sentuhan kreatif pada desain. Fitur drag-and-drop yang intuitif memungkinkan pengguna untuk dengan mudah mengatur elemen desain sesuai keinginan mereka. Selain itu, Canva juga menawarkan berbagai jenis font dan efek teks untuk membuat desain lebih menarik. Berikut beberapa kelebihan Canva sebagai software design, di antaranya : Fleksibilitas akses: Canva dapat diakses melalui browser web atau aplikasi seluler, memungkinkan pengguna untuk membuat dan mengedit desain di mana saja dan kapan saja.Opsi gratis dan berlangganan premium: Canva menawarkan fitur gratis yang luas, sementara opsi berlangganan premium memberikan akses ke lebih banyak konten dan fitur tambahan, seperti kolaborasi tim dan penyimpanan cloud yang lebih besar.Fitur Kolaborasi: Canva menyediakan fitur kolaborasi yang memungkinkan pengguna untuk bekerja sama dalam satu proyek desain, sehingga memudahkan kerja tim. 2. Midjourney Midjourney.ai Software Design Midjourney adalah platform AI yang memungkinkan pengguna menciptakan gambar menggunakan perintah teks. Dengan hanya memasukkan kata kunci, algoritme akan menghasilkan gambar sesuai dengan instruksi pengguna. Berbeda dengan generator seni AI lainnya, Midjourney berjalan eksklusif di dalam aplikasi obrolan Discord, bukan melalui aplikasi desktop atau situs web cloud. Pengguna harus memiliki akun Discord dan bergabung dengan server Midjourney untuk mengaksesnya. Dengan layanan ini, pengguna dapat menemukan inspirasi dan berinteraksi dengan komunitas desainer, artis, dan penggemar melalui ruang obrolan yang tak terbatas. Dengan perintah /imagine, pengguna dapat mewujudkan ide-ide kreatif mereka menjadi gambar dengan cepat dan mudah. Beberapa kelebihan dari Midjourney, di antaranya : Kemudahan Penggunaan: Platform ini memungkinkan pengguna untuk menciptakan gambar berkualitas tinggi tanpa memerlukan keterampilan artistik yang kompleks.Kecepatan: Dengan bantuan AI, Midjourney mampu menghasilkan gambar dengan cepat, mempercepat proses desain.Integrasi dengan Discord: Midjourney berjalan di dalam aplikasi obrolan Discord, yang memungkinkan pengguna untuk berinteraksi dengan komunitas desainer dan mendapatkan inspirasi.Aksesibilitas: Dengan menggunakan platform ini, pengguna dari berbagai latar belakang dapat dengan mudah menciptakan gambar tanpa batasan keterampilan artistik yang tinggi. 3. Figma Figma Software Design Figma merupakan platform desain grafis online yang memungkinkan kolaborasi dan desain bersama. Dengan antarmuka yang mudah digunakan, Figma cocok untuk pemula yang ingin membuat desain grafis tanpa perlu men-download aplikasi di perangkat. Di Figma juga kita dapat mendesain logo, membuat produk digital seperti mockup dan mind map, website, hingga aplikasi mobile. Software desain satu ini masih menjadi pilihan yang populer, karena terdapat beberapa kelebihan dari Figma, di antaranya : Kemampuan Kolaborasi Secara Real-time: Memungkinkan untuk bekerjasama dengan tim di satu rancangan secara bersamaan, tidak peduli dengan jarak entah berbeda daerah ataupun negara asalkan masih mempunyai koneksi internet.Aksesibilitas Cloud: Mengedit dan mengakses desain dari mana saja, menawarkan fleksibilitas luar biasa seluruh pekerjaan dapat tersimpan otomatis ke dalam Cloud setiap ada perubahan.Banyak plugin yang tersedia dan komunitas yang luas: Semakin banyaknya komunitas yang tergabung pada Figma maka akan banyak juga plugin-plugin yang dibuat oleh teman-teman komunitas.Dapat diakses melalui apa saja: Memungkinkan untuk mengakses file Figma dari manapun dan device apapun (tablet atau handphone).Support di berbagai platform: Dapat digunakan di berbagai macam platform seperti Windows, iOS, android, macOS, dan Linux. 4. Pixellab Pixellab Software Design Pixellab adalah sebuah aplikasi desain grafis yang populer di kalangan pengguna perangkat mobile. Didesain untuk memudahkan pengguna dalam membuat desain grafis langsung dari smartphone atau tablet mereka. Salah satu keunggulan utamanya ialah mudah dipakai, bahkan untuk pemula sekalipun. Dengan antarmuka yang intuitif dan fitur drag-and-drop, pengguna dapat dengan mudah membuat berbagai desain seperti poster, banner, spanduk, atau meme dengan cepat. Beberapa kelebihan dari Pixellab sebagai software design, di antaranya : Beragam Alat dan Elemen Desain: Pengguna dapat menambahkan teks dengan beragam font dan gaya, memasukkan gambar atau logo, serta menggunakan berbagai efek dan filter untuk meningkatkan tampilan desain mereka.Koleksi Stiker, Ikon, dan Bentuk: Aplikasi ini menyediakan berbagai macam stiker, ikon, dan bentuk yang dapat digunakan untuk menambahkan kreativitas pada desain.Fleksibilitas dalam Menangani File: Pengguna dapat mengimpor gambar dan logo dari galeri perangkat mereka atau menggunakan gambar yang telah disediakan dalam aplikasi. Desain dapat diekspor dalam berbagai format seperti PNG atau JPG. 5. Affinity Designer Affinity Designer Software Design Software desain menjadi kebutuhan pokok bagi para desainer grafis untuk mewujudkan ide mereka menjadi karya visual. Untuk mewujudkan karya tersebut dibutuhkan software untuk mengimplementasikan. Salah satu software nya ialah Affinity Designer. Affinity Designer merupakan sebuah aplikasi desain grafis vektor yang bersaing dengan CorelDRAW dan Adobe Illustrator. Affinity Designer tetap menyediakan berbagai fitur yang komprehensif dan dapat diakses dengan mudah oleh para pemula, meskipun tersedia software ini harganya yang lebih terjangkau (kantong able) hanya dengan sekali bayar saja benefit yang didapat tidak kalah dari para pesaing nya. Beberapa kelebihan dari Affinity Designer sebagai software design, di antaranya : Sekali beli untuk selamanya: Anda tidak perlu berlangganan untuk menggunakannya, karena Affinity Designer merupakan software sekali beli.Zoom yang luar biasa: Affinity Designer juga memiliki kemampuan zoom yang sangat luar biasa layaknya mikroskop.Tampilan antarmuka yang oke: Memiliki tampilan antarmuka yang modern, sehingga dapat memanjakan penglihatan pengguna. Untuk kalian yang ingin lebih expert lagi, jangan lupa di pantengin terus ya guys Instagram dan Website BuildWithAngga dan banyak juga kelas-kelas gratis tentang Design yang bisa kalian ikuti untuk mengasah skill dan menambah portfolio yang lebih berkualitas agar menambah value anda dimasa yang akan datang👌