Tips All

Figma saat ini merupakan salah satu software atau aplikasi favorit untuk mendesain bagi para desainer terutama UI/UX Designer. Awalnya Figma hanya bisa diakses online melalui browser, namun sekarang sudah ada versi Desktop yang dapat diunduh untuk perangkat macOS maupun Windows. Cara Download dan Install Figma di Laptop atau Komputer Berikut cara mengunduh dan meng-install Figma versi Desktop di komputer: 1. Kunjungi website resmi Figma Kalian bisa mengunjungi website resmi Figma di https://www.figma.com/ 2. Pilih menu Products Menu products pada webiste Figma Setelah membuka webstie Figma, pada menu Products, silahkan klik menu Downloads 3. Pilih link download sesuai perangkat yang digunakan Link untuk mendownload Figma versi Desktop Pilih “Desktop app for macOS” jika kamu menggunakan perangkat macOS atau pilih “Desktop app for Windows” jika kamu menggunakan perangkat Windows. Setelah itu tunggu file instalasi terunduh di komputermu 4. Install file Figma Setalah file instalasi Figma selesai di unduh, klik file instalasi tersebut lalu tunggu aplikasi Figma versi Desktop terpasang di komputermu. 5. Buka aplikasi Figma Tampilan awal aplikasi Figma Desktop Setelah berhasil terinstall di komputermu, buka aplikasi Figma lalu silahkan Log in jika kamu sudah mempunyai akun atau klik Create one untuk mendaftar secara gratis jika kamu belum mempunyai akun. 6. Template dari Figma Tampilan apikasi Figma setelah berhasil login Saat kalian berhasil Log in kalian bisa lanjut meneruskan projek desain kalian atau membuat file desain baru dengan cara menekan menu “New design file”. Tampilan halaman Community di Figma Selain kalian bisa mendesain dari awal, pada menu Community kalian akan menemukan banyak template dan plugin yang sudah disediakan oleh Figma maupun dari desainer lain secara gratis. Kesimpulan Itulah cara untuk mengunduh dan meng-install Figma versi Desktop di komputer. Lalu, kenapa kita menggunakan Figma versi Desktop padahal kita bisa mengakses Figma melalui browser? Beberapa keunggulan menggunakan versi Desktop yaitu: Tidak perlu menggunakan koneksi internet, kita hanya perlu menggunakan koneksi internet saat membuka file desain kita dan saat ingin menyimpan file tersebutSaat ingin menyimpan atau export, kita bisa memilih folder atau tempat file export tersebut akan disimpan, sedangkan jika menggunakan versi browser, file tersebut akan otomatis tersimpan di folder Download Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Widget ElevatedButton pada Flutter dapat membantu kita untuk membuat sebuah button yang menarik yang dapat dijadikan sebagai Button CTA (Call to Action) pada aplikasi website atau juga mobile yang kita bangun saat ini. Biasanya ElevatedButton ini digunakan pada halaman seperti Empty State, Onboarding, Checkout, Keranjang, dan juga product details. ElevatedButton menggunakan design material Elevation yang membuat button tersebut memiliki shadow dan terlihat menonjol dibandingkan dengan element-element lainnya pada design kita. Mari Membuat ElevatedButton Sederhana Pada Aplikasi Mobile Menggunakan Flutter & Dart Misalnya kita ingin menambahkan satu button CTA yang membantu pengguna untuk mendapatkan hutang untuk membeli mobil baru, maka di sini kita akan menggunakan ElevatedButton. Kita bisa mulai dengan kodingan berikut: ElevatedButton(onPressed: onPressed, child: child), Lalu akan kita atur action pada button tersebut terlebih dahulu yang jika diklik akan menimbulkan pesan sederhana pada debug console ElevatedButton(onPressed: (){ debugPrint('button di klik') }, child: child), Pada sebuah button kita akan membutuhkan sebuah label sehingga pengguna mengerti button tersebut akan digunakan untuk apa, jadi kodingannya seperti berikut ElevatedButton( onPressed: (){ debugPrint('button di klik') }, child: Text('Get Loan'), ), Kodingan di atas akan menambahkan Widget Text yang kita gunakan sebagai label pada ElevatedButton tersebut, selanjutnya kita perlu membuat file button.dart untuk memberikan styling pada button CTA kita sehingga bisa lebih menarik. Buatlah file baru yang bernama button.dart lalu kita perlu mengimport material design pada file tersebut yang di mana nantinya properti-properti dari ElevatedButton akan kita modifikasi sesuai dari kebutuhan design projek kita, maka kodingannya kurang lebih seperti ini: import 'package:flutter/material.dart'; final ButtonStyle buttonPrimary = ElevatedButton.styleFrom( minimumSize: Size(90, 36), primary: Colors.blue, elevation: 0, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(50), ), ), ) MinimumSize pada ElevatedButton Properti ini digunakan untuk mengatur berapa lebar dan tinggi dari button yang akan kita buat, biasanya hal ini mengikuti dari design style yang sudah disediakan oleh tim desainer. Primary Untuk memberikan warna background pada elevatedbutton tersebut maka kita bisa gunakan property primary yang di mana Colors.black tersebut digunakan dari file dart material.dart (design system bawaan dari Flutter). Elevation Tidak semua designer ingin memberikan efek shadow pada sebuah elevatedbutton di Flutter, dengan mengaturnya ke angka 0 maka design button tersebut akan menjadi flat. Shape Apabila kita ingin menambahkan lengkungan pada elevatedbutton atau biasanya disebut dengan Corner Radius, kita bisa menggunakan properti shape yang didalamnya kita akan tambahkan borderRadius sesuai dari kebutuhan design kita. Mengimplementasikan Styling Pada ElevatedButton Setelah kita berhasil membuat file button.dart yang didalamnya tersedia style untuk button Primary pada aplikasi mobile atau website kita saat ini, maka file tersebut kita perlu import kepada file projek utama kita, lalu style name tersebut akan kita gunakan pada elevatedbutton yang kita maksud. ElevatedButton( onPressed: (){ debugPrint('button di klik') }, child: Text('Get Loan'), style: buttonPrimary, ), Sehingga hasil akhir dari elevatedbutton yang sudah kita beri styling akan menjadi seperti berikut, cukup menarik dan cantik bukan? Silahkan mencoba untuk mengaplikasikan elevatedbutton ini pada halaman yang berbeda dengan style design yang berbeda juga, kita bisa menggunakan ShaynaKit untuk mendapatkan beberapa file design gratis yang bisa kita gunakan sebagai latihan UI engineering menggunakan Flutter. Dan apabila kamu ingin memperdalam widget Flutter lainnya dengan design yang cukup menarik maka saya bisa rekomendasikan untuk mempelajari pada kelas Full-Stack Laravel Flutter: Membangun Aplikasi E-Wallet. Cheers.

Selain menyediakan templates berupa file, Figma juga menyediakan berbagai macam plugins yang dapat mempermudah dan mempercepat pekerjaan mendesain kalian. Berikut ini beberapa plugins populer yang sering digunakan oleh para desainer: 10 Plugins Figma Terpopuler Untuk Designer 1. Unsplash Figma Plugin - Unsplash oleh Kirill Zakharov Unsplash merupakan salah satu plugins favorit yang menyediakan stok foto berkualitas HD yang dapat digunakan secara gratis. Untuk menggunakannya kalian hanya perlu menjalankan plugin tersebut lalu pilih foto yang ingin kamu gunakan, atau jika ingin mencari foto yang lebih spesifik kamu bisa mencarinya dengan menuliskan kata kuncinya di kotak pencarian. 2. Content Reel Figma Plugin - Content Reel oleh Microsoft Content Reel merupakan plugins yang dapat kamu gunakan untuk mengganti placeholder seperti teks, gambar, dan ikon. Selain memilih konten yang sudah tersedia, kamu juga bisa membuat konten sendiri. Untuk menggunakannya, pilih text layer atau frames atau shapes yang ingin kamu ubah, lalu jalankan plugin dan pilih konten yang kalian inginkan. 3. LottiFiles Figma Plugin - LottieFiles oleh LottieFiles Dengan menggunakan LottiFiles kamu dapat memasukkan animasi yang dapat di import berupa SVG maupun GIF kedalam desain mu. Terdapat ribuan macam animasi yang dapat digunakan secara gratis. Sebelum menggunakan plugin ini, kamu harus memiliki akun LottiFiles terlebih dahulu, jika belum memiliki akun bisa mendaftar di https://lottiefiles.com/. Untuk menggunakannya, buka plugin lalu login, lalu pilih animasi yang dibutuhkan. 4. Remove BG Figma Plugin - Remove BG oleh Aaron Iker Remove BG sangat berguna untuk menghapus background sebuah foto atau gambar. Untuk menggunakan plugin ini, cukup memilih foto yang ingin dihapus backgroundnya lalu klik Run. Sebelumya, kamu harus memiliki akun terlebih dahulu yang dapat dibuat di https://www.remove.bg/. 5. Mapsicle Figma Plugin - Mapsicle oleh Chris Arvin Jika kamu membutuhkan sebuah gambar peta, maka tidak perlu lagi melakukan screenshot melalui Google Maps. Cukup menggunakan plugin Mapsicle. Dengan plugin ini, kamu dapat mengatur ukuran peta dan style peta sesuai kebutuhan. Untuk dapat mencari lokasi yang diinginkan, kamu harus membuat akun di Mapbox terlebih dahulu, lalu copy-paste token akun mu ke dalam plugin Mapsicle. Untuk menggunakannya, buka plugin, pilih lokasi lalu atur ukuran peta dan style sesuai kebutuhan, setelah itu klik Create map. 6. Design Lint Figma Plugin - Design Lint oleh Discord Dengan menggunakan plugin Design Lint, kamu dapat membuat desain menjadi konsisten. Plugin ini dapat menemukan error dari tiap frame yang dipilih seperti font, shadows, border radius, fill, stroke, dll yang tidak konsisten dengan desain yang lainnya atau karena belum diberi style. Untuk menggunakannya, buka plugin lalu pilih frame yang ingin hendak dicek, setelah menemukan error kalian dapat memperbaikinya atau skip error tersebut. 7. Iconify Figma Plugin - Design Lint oleh Discord Iconify merupakan plugin yang memiliki lebih dari 100.000 ikon yang dapat digunakan untuk keperluan desain kalian secara gratis. Beberapa set icons yang tersedia di Iconify yaitu Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, dan masih banyak lagi. Untuk menggunakanya, buka plugin lalu pilih set icons, setelah itu pilih ikon yang kalian butuhkan atau bisa juga dicari langsung dengan menuliskan kata kuncinya di kotak pencarian. Sebelum import icon, kamu juga bisa mengatur warna dan ukuran ikonnya. 8. Wireframe Figma Plugin - Wireframe oleh Hexorial Studio Wireframe merupakan plugin yang menyediakan templates wireframe untuk web, mobile, dan tablet sehingga tidak perlu menghabiskan waktu untuk membuat wireframe dari awal. Untuk menggunakannya, buka plugin lalu pilih template yang dibutuhkan. 9. Charts Figma Plugin - Charts oleh Sam Mason de Caires Charts merupakan plugin yang dapat membantu kamu saat membutuhkan sebuah grafik atau diagram pada desain kalian. Ada 5 tipe yang dapat kalian pilih yaitu line, scatter, area, bar, pie / doughnut. Kamu juga dapat mengatur jumlah poin, nilai maks/min, dan tampilkan/sembunyikan grid, titik, dan label pada diagram. Untuk menggunakannya, kamu cukup jalankan plugin nya lalu atur diagram sesuai keinginan/kebutuhan. 10. A11y - Color Contrast Checker Figma Plugin - A11y - Color COntrast Checker oleh Kelly Gorr A11y - Color Conrast Checker merupakan salah satu plugin yang dapat membantu untuk mengecek dan membenarkan kontras warna dari desain agar konten lebih mudah dibaca dan memenuhi pedoman Web Content Accessibility Guidelines (WCAG). Untuk menggunakannya, kalian jalankan plugin nya lalu pilih frame yang ingin kalian cek. Kesimpulan Untuk mempermudah dan mempercepat dalam pengerjaan desain di Figma, kita dapat menggunakan beberapa bantuan plugin-plugin yang tersedia secara gratis di dalam Figma. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Hello people with the spirit of learning! Gimana progres belajar kalian sejauh ini? Di sini ada yang sudah tahu cara menggunakan Auto Layout pada Figma? Kalau belum, yuk, kali ini kita akan belajar secara singkat cara menggunakan Auto Layout Figma– sebuah fitur yang memudahkan kamu dalam proses design! Auto Layout memiliki fungsi membuat frame pada UI design kalian menjadi lebih dinamis. Sebagai contoh, kalian tidak perlu mengubah ukuran frame untuk mengikuti isi teksnya karena frame akan menyesuaikan. Alias, Auto Layout memungkinkan kita membuat component yang responsif. Masih banyak fungsi Auto Layout yang memudahkan kamu di Figma menjadi lebih praktis. Oleh Karena itu, Auto Layout merupakan fitur unggulan di tools ini. Pada latihan kali ini, kita akan membuat daftar menu makanan. 1) Siapkan Element-nya Mari kita siapkan beberapa elements seperti Shape lingkaran, Text dan siapkan plugins bernama “Unsplash” untuk mengambil image. 2) Memberi Text dan Shape Caranya, pada bagian Toolbar, pilih “T” (Text) dan ketik nama menu makanan yang kamu mau. Lalu di sampingnya, pilih Shape dan pilih Ellipse untuk si bentuk lingkaran. Tekan Shift sembari menarik kursor sehingga membentuk bentuk lingkaran yang sempurna. 3) Mengaktifkan Auto Layout Select semua elements dan tekan Shift+A untuk mengaktifkan Auto Layout. Di bagian sidebar, ubah padding menjadi 10 dan spacing between items menjadi 20. 4) Mengaktifkan Fill Container Aktifkan fill container. Caranya, di bagian “Frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container. 5) Masukan Image dengan Plugins Klik shape lingkaran pada menu namun pastikan kamu sudah install plugins “Unsplash”. Jika sudah, klik kanan ➡️ ”Plugins” ➡️ “Unsplash”. Search image yang kamu mau lalu pilih dan tunggu hingga image muncul di dalam shape. Ulangi sampai terlihat menjadi list menu makanan yaa 😊 Kamu hanya perlu men-duplicate menu yang sudah ada dan dengan aktifnya Auto Layout, kamu tidak perlu lagi mengubah pengaturan ukuran/jarak/jenis font satu persatu lagi karena nanti menu yang kamu duplicate akan menyesuaikan pengaturan dari menu sebelumnya. Selamat! Kamu sudah bisa menggunakan Auto Layout pada Figma 🎉 p.s: untuk menghapus Auto Layout, cukup klik tanda “+” pada bagian Auto Layout di side bar menjadi tanda “-”. Dan untuk membuat UI Design di atas, kita tinggal menambahkan container daftar menu makanan ke dalam frame baru yang sudah kita design yaa😉 . Proses Membuat UI Design List Menu 1) New Frame Pada bagian toolbar, kita pilih Frame lalu atur ukuran frame pada sisi sidebar dengan W: 375 dan H: 781. 2) Background Menu Untuk background, kita pakai warna putih. Kembali lagi ke toolbar, pilih shape lalu pilih rectangle dengan ukuran W: 375 H: 259. Atur posisi ke Align horizontal center dan Align center. 3) Image for Background Menu Seleksi shape tadi dan masukan plugins “Unsplash”. Seach image “Dining” untuk mendapatkan image restoran seperti UI di atas. 4) Cara Membuat Gradasi Image Duplicate Image dengan menekan shortcut Shift+D. Pada image kedua, kita ke Fill pada sidebar dan pilih Solid maka akan muncul beberapa opsi. Setelah itu kita pilih Linear. Ubah opacity warna pada kotak pertama menjadi 0% dan kotak kedua 100%. Drag kotak pertama ke kanan hingga berada di tengah. Pastikan juga image ini berada di atas shape pertama. (Caranya, kalian bisa klik kanan lalu Bring to front.) 5) Judul Restaurant Untuk memberi judul resto, ketik nama resto sesuai imajinasi kalian dengan ketentuan font yang bebas juga. Di sini, aku pakai Poppins dengan size 16px. font style Semibold. Letakan di atas dengan jarak atas 84px dan kiri 44px 6) Bottom Navigation Bar Untuk icon Home, Search & Profile; kita bisa dapatkan dengan install plugin “Iconify” Select icons Aktifkan Auto layout (Shift+A) Atur menjadi Horizontal direction di sidebar Spacing between items: 88px Fill dan pilih warna yang kamu mau Ubah ukuran container menjadi W:376 H:52 Corner radius menjadi 40px untuk atas dan bawah. Pilih container Navigation bar bawah dan atur posisi dengan memilih Align horizontal center dan Align bottom pada sisi sidebar. 7) Upper Navigation Dapatkan icon Back dan Share dari plugin “Iconify” Beri jarak atas 48px dan kiri 40px Tebalkan icons dengan cara pilih “Stroke” pada bagian sidebar dan ubah menjadi 2. Begitu juga dengan icon bintang, kamu bisa dapatkan di plugin “Iconify” dan fill icon sesuai warna yang kamu inginkan. Terima kasih sudah membaca artikel ini yaa! Jika kalian ingin tahu lebih dalam tentang peng-aplikasian Auto Layout, kami menyediakan banyak kelas yang membahas tentang Auto Layout pada Figma lohh! Sebagai contoh, kamu bisa mengikuti dulu kelas gratisnya yaitu kelas freemium “UI Style Guide”. Selamat belajar dan mencoba teman-teman! 📚 Link plugins : Unsplash https://www.figma.com/community/plugin/738454987945972471/Unsplash Iconify https://www.figma.com/community/plugin/735098390272716381/Iconify

Memiliki pekerjaan menjanjikan merupakan mimpi setiap orang dan tentunya kita ingin karir yang kita geluti menjadi pilihan yang tepat. Namun, dengan berkembangnya teknologi tren pekerjaan yang dibutuhkan akan terus mengalami perubahan. Pada artikel kali ini, akan membahas beberapa prospek karir digital yang menjanjikan dan memiliki demand yang cukup tinggi kedepannya, yuk disimak. 1) Data Analyst Data Analyst atau data expert, merupakan pekerjaan yang meneliti informasi dengan analisis data. Hasil dari analisis data ini sangat penting bagi perusahaan dalam menentukan keputusan bisnis untuk yang akan diambil untuk mengembangkan perusahaan. Data analyst menggunakan berbagai aplikasi dan program pengolahan data dalam pekerjaan sehari-harinya, seperti Microsoft Excel, Tableau, dan SQL. 2) Digital Marketer Peran digital marketer sangatlah dibutuhkan oleh perusahaan. Digital marketer memiliki tugas untuk melakukan promosi bisnis yang dijalankan melalui platform digital. Digital marketer merupakan tombak marketing suatu perusahaan dimana membuat profesi ini menjadi pekerjaan dimasa depan paling dibutuhkan. 3) Mobile Developer Dengan banyaknya website dan aplikasi e-commerce bermunculan, tak heran profesi web maupun mobile application developer dibutuhkan di setiap perusahaan maupun startup. Beberapa perusahaan membutuhkan peran developer untuk membuat dan mengatur situs maupun aplikasi perusahaan. 4) SEO Specialist Perusahaan tentu memerlukan SEO specialist yang dapat menjelaskan produk-produk perusahan dengan baik serta google friendly agar ketika user memasukan kata kunci tertentu dipencarian google, produk perusahaan akan muncul dihalaman utama. Maka dari itu posisi SEO specialist ini sangatlah krusial dalam strategi pemasaran suatu perusahaan. 5) Designer Implementasi design dari produk perusahaan mampu memberi lebih banyak perspektif terkait produk tersebut. Designer mampu menghadirkan gaya design yang simple namun tetap terlihat dinamis untuk membuat visualisasi dari produk perusahaan agar lebih menarik bagi user. Tips Mendapatkan Karir Digital Kuasai skill yang sedang high demandMengikuti kelas atau bootcamp pendukungUpdate LinkedIn dan perbanyak koneksi Adapt to Technology is the key for new future. Setelah membaca artikel di atas, point yang dapat kita ambil ialah penting bagi kita untuk memperkaya diri dengan kompetensi dan skill yang relevan di zaman sekarang agar tidak tertinggal oleh tren digital yang ada. Yuk belajar lebih lanjut untuk persiapan karir dan bangun portfoliomu! BuildWith Angga

Hello, People With The Spirit Of Learning! Positive testing dan negative testing dilakukan oleh seorang Software Quality Assurance dalam testing produk suatu software. Hal ini dilakukan dengan tujuan untuk memvalidasi hasil dari testing produk software. Nahh, apa sih positive dan negative testing itu??? Positive dan negative testing akan dijelaskan dalam artikel di bawah ini, selamat membaca 😉🙌 Positive Testing Postive Testing merupakan suatu pengujian produk software yang dilakukan dengan memberikan input bernilai positive yaitu berupa input yang valid sehingga sistem dari produk software akan bekerja dan memberikan hasil sesuai dengan yang diharapkan (expected result). Positive testing dilakukan dengan tujuan untuk memvalidasi sistem dari produk software dengan menggunakan input bernilai positive (valid input) dengan memvalidasi apakah sistem bekerja menghasilkan hasil sesuai yang diharapkan atau tidak. Contoh Positive Testing Positive Testing dilakukan dengan memberikan input yang bernilai positif, contohnya ketika kita akan sign in di website BuildWith Angga. Pada bagian page sign in, kita diminta untuk memasukkan email address dan password yang valid. Pada bagian page sign in kita memasukkan email address dan password yang sesuai dan valid. Selanjutnya, sistem dari website BuildWith Angga membaca dari input yang telah kita masukkan, dan sistem mendeteksi bahwa input yang dimasukan valid dan sesuai sehingga sistem melanjutkan proses sign in dan success, maka sebagai hasil dari input tersebut muncul tampilan website BuildWith Angga yang menampilkan homepage dari BuildWith Angga. Negative Testing Negative Testing merupakan suatu pengujian produk software yang dilakukan dengan memberikan input bernilai negative yaitu berupa input yang invalid sehingga sistem dari produk software akan bekerja dan memberikan hasil yang diharapkan sesuai dengan input invalidnya. Negative testing dilakukan dengan tujuan untuk memvalidasi sistem dari produk software dengan menggunakan input bernilai negative (invalid) dengan memvalidasi bahwa sistem memberikan hasil yang diharapkan sesuai input yakni berupa error atau invalid dikarenakan input yang dimasukkan tidak sesuai dengan yang diminta (invalid input). Contoh Negative Testing Negative testing dilakukan dengan memberikan input yang bernilai negatif, contohnya ketika kita akan sign in di website BuildWith Angga. Pada bagian page sign in, kita diminta untuk memasukkan email address dan password yang valid. Pada bagian page sign in kita memasukkan email address dan password yang tidak sesuai atau invalid. Selanjutnya, sistem dari website BuildWith Angga membaca dari input yang telah kita masukkan, dan sistem mendeteksi bahwa input yang dimasukan invalid dan tidak sesuai dengan yang disyaratkan sehingga sistem tidak dapat melanjutkan proses sign in dan memberi hasil “Please include an ‘@’ in the email address. ‘spiritlearning’ is missing an ‘@’” sehingga kita harus memasukkan email adress yang valid dan sesuai untuk melanjutkan dalam tahap sign in. Kesimpulan Jadi berdasarkan penjelasan di atas udah tahu nih positive testing dan negative testing nah sekarang kamu berminat engga nih buat jadi Software Quality Assurance sebagai tujuan karir kamu?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Hello, People With The Spirit Of Learning! Test scenario dan Test cases merupakan tugas dan tahap perencenaan yang dilakukan oleh Software Quality Assurance. Perbedaan test scenario dengan test cases? Perbedaannya akan dijelaskan pada artikel di bawah ini, yuk dibaca dan disimak. Test Scenario Test Scenario merupakan informasi yang berisi summary scenario dari fitur yang akan dilakukan testing atau pengujian. Pada test scenario ditulis secara umum dan tidak spesifik. Sebelum melakukan testing atau pengujian, maka dilakukan pengecekan dengan melihat test scenario terlebih dahulu terkait dengan fitur apa saja yang akan dilakukan antara testing atau pengujian. Contoh Test Scenario User Sign InUser Access Kelas OnlineUser Access Bootcamp Test Cases Test Cases merupakan informasi terperinci yang berisi langkah-langkah dalam melakukan testing atau pengujian beserta dengan expectation results dan actual results dari testing. Test cases ditulis secara detail, spesifik, dan terstruktur dengan baik serta rapi dan mudah dibaca. Pada test cases terdapat beberapa bagian-bagian yang dijelaskan di bawah ini. 1.) Test ID Test ID merupakan Id dari test cases yang ditulis dengan menggunakan kombinasi huruf dan nomor. Contoh dari test id yaitu TCU0001 TCU0002 TCU0003. 2.) Test Scenario Test Scenario merupakan informasi yang berisi summary scenario dari fitur yang akan dilakukan pengujian atau testing. Contoh dari test scenario yakni ditampilkan sebagai berikut. User Sign InUser Access Kelas OnlineUser Access Bootcamp 3.) Test Steps Test Steps merupakan informasi yang berisi langkah - langkah yang dilakukan ketika pengujian atau testing dari produk software. Contoh test steps ditampilkan sebagai berikut User access https://buildwithangga.com/User click masukUser fill out the forms contains email address and passwordUser click Sign In 4.) Precondition Precondition merupakan informasi yang berisi prasyarat yang dilakukan sebelum melakukan pengujian atau testing dari produk software. Contoh dari precondition yaitu seperti user telah mendaftarkan akun pada website BuildWith Angga dan user telah sign in pada page website BuildWith Angga. 5.) Test Description Test Description merupakan informasi yang berisi deskripsi tujuan dari dilakukannya pengujian atau testing pada produk software. Contoh dari test description yaitu seperti untuk memastikan bahwa pengguna dapat sign in setelah memasukkan email address dan password, untuk memastikan bahwa pengguna dapat mengakses fitur Kelas Online, dan untuk memastikan bahwa pengguna dapat mengakses fitur Bootcamp. 6.) Expected Results Expected Results merupakan informasi yang berisi hasil yang diharapkan ketika sedang melakukan pengujian atau testing pada produk software. Contoh dari expected results yaitu seperti email address dan password dapat teridentifikasi dan muncul homepage dari website BuildWith Angga. Lalu pada halaman Katalog Kelas, terdapat fitur browse by category, top 6 courses, success stories, dan fitur footer navigation bar. Pada page Bootcamp Design & Coding dan menampilkan fitur new bootcamp, why us yang berisi benefit unggulan dari bootcamp, success stories dan fitur footer navigation bar. 7.) Actual Results Actual Results merupakan informasi yang berisi hasil yang sebenarnya dari pengujian atau testing pada produk software. Contoh dari actual results yaitu seperti email address dan password dapat teridentifikasi dan muncul homepage dari website BuildWith Angga, lalu muncul halaman Katalog Kelas yang menampilkan fitur browse by category, top 6 courses, success stories, dan fitur footer navigation bar. Pada page Bootcamp Design & Coding akan menampilkan fitur new bootcamp, why us yang berisi benefit unggulan dari bootcamp, success stories dan fitur footer navigation bar. 8.) Status (Success/Failed) Status merupakan informasi dari hasil pengujian yaitu berupa keterangan status succes atau failed. Status success ditulis apabila pengujian berhasil sesuai dengan hasil yang diharapkan serta sukses dan status failed ditulis apabila pengujian gagal dan tidak sesuai dengan hasil yang diharapkan. 9.) Notes Notes merupakan informasi catatan dan keterangan hasil pengujian yang dituliskan dalam dokumentasi. Contoh dari notes yaitu seperti penjelasan tentang bug dan error serta letak dari bug dan error dan apabila sesuai dengan yang diharapkan maka ditulis “as expected”. Contoh Test Cases Tabel tersebut merupakan contoh dari test cases sederhana yang diambil berdasarkan test cases pada website dari BuildWith Angga, dengan fitur yang diuji yaitu fitur Sign In, fitur Kelas Online, dan Fitur Bootcamp. Dalam test cases tersebut terdapat test id, test scenario, test steps, precondition, test description, expected results, actual results, status, dan notes yang ditulis secara sistematis dan rapi. Kesimpulan Jadi berdasarkan penjelasan di atas udah tahu nih perbedaan dari test scenario dan test cases. Nah, sekarang kamu berminat engga nih buat jadi Software Quality Assurance sebagai tujuan karir kamu?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Hello, People With The Spirit Of Learning! Apa sih perbedaan dari QA Analyst, QA Tester, dan QA Engineer?? Perbedaannya akan dijelaskan di dalam artikel di bawah ini, yuk dibaca dan disimak. Apa itu Software Quality Assurance?? Software Quality Assurance merupakan suatu proses yang berlangsung secara continue dalam memastikan bahwa suatu produk software yang dihasilkan telah sesuai dengan requirement yang telah ditentukan. Nah, jadi dapat disimpulkan profesi Software Quality Assurance merupakan suatu profesi yang bertanggungjawab atas keberlangsungan proses dalam memastikan dan menjamin suatu produk software yang telah dihasilkan sesuai dengan requirements yang telah ditentukan. QA Analyst itu apa sih? QA Analyst merupakan suatu profesi dari Software Quality Assurance yang berfokus untuk melakukan analisa mengenai prosedur, product requirement documents, dan requirements testing lainnya serta menuliskan hasil dari analisa tersebut ke dalam test cases pada produk yang akan dilakukan testing, serta melakukan testing produk software dan memastikan bahwa suatu produk software yang dihasilkan telah sesuai dengan requirement yang telah ditentukan dan melaporkan hasil dokumentasi dari hasil testing produk software yang sudah ditest. Bagaimana jobdesc dari QA Analyst?? Jobdesc dari QA Analyst yaitu Melakukan testing produk software dan memberikan rekomendasi perbaikanBerdiskusi dengan stakeholder mengenai penentuan requirements dan business system analysisMelakukan dan melaporkan hasil dari technical and business analysisMenilai kompatibilitas dari software baru dengan sistem yang berjalan saat iniMemastikan kualitas produk software selama proses development Apa itu QA Tester? QA Tester merupakan suatu profesi dari Software Quality Assurance yang berfokus untuk melakukan testing produk software yang dilakukan secara manual testing dengan menggunakan acuan yang berdasarkan dari requirements dan test cases yang telah dibuat. QA Tester juga bertugas dalam membuat test cases yang akan dijadikan acuan testing, beserta mengklasifikasikan bug, error, dan level prioritas testnya serta melaporkan hasil dokumentasi dari hasil testing produk software yang telah ditest. Bagaimana jobdesc dari QA Tester?? Jobdesc dari QA Tester yaitu Membuat test plans dengan detail, komprehensif dan terstruktur dengan baikMemperkirakan, merencanakan, dan melakukan prioritas koordinasi testingMelakukan automation testing pada produk softwareMelakukan identifikasi, record, dan dokumentasi dari hasil testingMelakukan review dari user requirements document dan memastikan bahwa requirements dapat tercapai selama masa proses testing QA Engineer itu apa sih? QA Engineer merupakan suatu profesi dari Software Quality Assurance yang berfokus untuk melakukan testing produk software yang dilakukan secara automation testing pada produk software dengan berdasarkan acuan dari requirements dan test cases yang telah dibuat. QA Engineer juga bertugas dalam membuat test cases yang akan dijadikan acuan testing, beserta mengklasifikasikan level prioritas testnya dan kategori dari bug dan error serta melaporkan hasil dokumentasi dari hasil testing produk software yang telah dilakukan automation testing. Bagaimana jobdesc dari QA Engineer?? Jobdesc dari QA Engineer yaitu Membuat test plans yang terperinci, komprehensif dan terstruktur dengan baikMemperkirakan, merencanakan, dan melakukan prioritas dalam koordinasi software testingMelakukan automation testing pada produk softwareMelakukan identifikasi, records, dan dokumentasi secara menyeluruh berdasarkan hasil testingMembangun dan mengelola automated build/test/deployment environments Kesimpulan Jadi berdasarkan penjelasan di atas ada yang berminat engga nih buat jadi Software Quality Assurance sebagai tujuan karir kamu?? Ketika kamu sudah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu yang terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Button atau tombol merupakan alat navigasi untuk melakukan suatu perintah dalam program aplikasi. Pada framework Flutter sendiri, ada beberapa jenis button yang akan kita bahas lebih lanjut. Perkenalan Framework Flutter Flutter adalah salah satu framework yang digunakan untuk membantu developer dalam membuat aplikasi mobile multiplatform. Flutter sendiri memiliki beberapa button pendukung yang sering digunakan. Berikut adalah contoh-contoh button dalam Flutter: FlatButton TextButton ini adalah pembaruan dari FlatButton yang menghasilkan tampilan yang sama. TextButton ini mampu melakukan navigasi ke page yang lain atau navigasi apapun. Berikut adalah contoh penerapan TextButton dalam bentuk coding. TextButton( onPressed: () {}, child: Text( "Let's take a picture", ), ), src. buildwithAngga RaisedButton ElevatedButton ini merupakan pembaruan dari RaisedButton. Yang membedakan ElevatedButton dengan RaisedButton adalah background dari button, warna dari teks dan parameter yang dihasilkan. src. CBTDEV FloatingButton FloatingButton merupakan icon mengambang berbentuk lingkaran yang digunakan untuk melakukan action atau menambahkan sesuatu pada halaman aplikasi. src. Gedetikapermana - Medium Drop Down Button Drop-down merupakan sebuah button widget pada Flutter yang memungkinkan pengguna dapat memilih satu nilai dari daftar. Ketika daftar drop-down tidak aktif, daftar menu hanya menampilkan satu nilai. Ketika diaktifkan, menu menampilkan daftar nilai, yang dimana pengguna dapat memilih salah satu dari daftar yang tersedia. src. medium.com Icon Button IconButton adalah tombol yang disisipi icon sehingga menjadi Widget Icon yang bisa diklik. src. codingtive.com Popup Menu Button Menampilkan menu saat ditekan dan memanggil dipilih saat menu ditutup karena item dipilih. Nilai yang diteruskan ke onSelected adalah nilai item menu yang dipilih. Jika kita fokus pada aplikasi, kita bisa melihat di setiap aplikasi ada tombol Menu Pop Up yang akan melakukan beberapa pekerjaan. src. Better Programming Cara Menggunakan Flutter Sebelum belajar membuat aplikasi menggunakan Flutter, persiapkan dulu setup plugin yang diperlukan, seperti: Instalasi framework FlutterInstall Plugin Flutter & DartSetup di Visual Studio Code Instalasi framework Flutter Langkah pertama ialah download file Flutter terlebih dahulu, menyesuaikan dengan sistem OS masing-masing. Kemudian pilih file zip seperti di bawah ini untuk mendownload file. Instalasi Flutter Install Plugin Flutter & Dart Selanjutnya, buka aplikasi Visual Studio Code. Kemudian, klik menu Extensions yang terdapat pada sidebar aplikasi untuk proses mendownload plugin Flutter dan Dart. Setup di Visual Studio Code Lakukan setup di Visual Studio Code agar Flutter dapat dijalankan. Langkah setup yang dilakukan, meliputi : Menggunakan Flutter pada channel stableMelakukan upgrade Flutter ke versi terbaruMemastikan browser dengan versi terbaru Flutter is a framework that is now widely used Contoh project Pernah dengar istilah “teori tanpa praktek adalah lumpuh praktek tanpa teori adalah buta”? Jangan sampai seperti itu ya, people! Yuk implementasikan hasil teorimu dengan belajar lebih lanjut untuk membuat project sederhana menggunakan framework Flutter dan bangun portfoliomu! BuildWith Angga.

Flutter adalah salah satu tools dan framework yang dirancang secara open source oleh Google. Flutter cocok digunakan oleh beragam dekstop seperti Windows, MacOS hingga Linux. Flutter memiliki semua tools yang diperlukan dalam pengembangan aplikasi secara efisien juga memungkinkan developer membuat satu aplikasi dengan platform berbeda. Manfaat Menggunakan Flutter Project Flutter Multi cross-platformHarga ramahMudah dipelajariUI yang menarikDevelopment efisien Multi cross-platform Android & iOS, Flutter menggunakan basis kode platform-agnostik tunggal, Flutter membantu developer membangun aplikasi berperforma tinggi dengan interface yang menarik dan fungsional untuk Android atau iOS. Harga ramah untuk startup rintisan, hanya dengan menggunakan Flutter developer mampu membuat aplikasi Android, iOS dan web dalam satu framework bersamaan dimana hal ini mampu menimalisir anggaran yang dikeluarkan terutama untuk startup yang baru dirintis. Mudah dipelajari untuk pemula, dalam membuat aplikasi Android dan iOS menggunakan Flutter, kamu cukup belajar satu bahasa yaitu DART, yang mana syntax Dart mirip seperti Java dan Javascript. Maka dari itu, kalau kamu pernah menggunakan Java atau Javascript, pastinya akan mudah untuk beradaptasi dengan Flutter. User Interface yang menarik, dalam Flutter semuanya merupakan widget. Dimana kamu bisa mengatur tampilan, fungsi, bahkan animasi di tiap pixelnya. Flutter juga menggunakan Material Design, maka tampilan sedikit berbeda dengan tampilan native. Development project yang efisien, fitur Hot Reload pada Flutter memungkinkan kamu mengubah kode dan melihatnya saat itu juga, tanpa menunggu waktu lama lagi untuk compiling. Software Yang Mendukung Flutter Android StudioVisual Studio CodeGit SCM Coding Learning to code is learning to create and innovate -Enda, Taoi, Ireland Pernah dengar istilah “teori tanpa praktek adalah lumpuh praktek tanpa teori adalah buta”? Jangan sampai seperti itu ya, people! Yuk implementasikan hasil teorimu dengan belajar lebih lanjut untuk membuat project aplikasi menggunakan framework Flutter dan bangun portfoliomu! BuildWith Angga