flash sale
close-icon
Browse Tips

Meningkatkan skills menjadi 1% lebih baik

Kelas Cara Menggunakan Bottom Sheet pada Flutter Development di BuildWith Angga

Cara Menggunakan Bottom Sheet pada Flutter Development

Hello people spirit of learning! Dalam aplikasi ketika melakukan suatu interaksi di dalamnya, terdapat muncul dar bawah Pop up container atau lembaran yang berisi komponen-komponen yang bisa kita gunakan. dalam pengembangan aplikasi tersebut, kita bisa menggunakan lembaran tersebut dengan widget showModalBottomSheet. Fungsinya agar kita bisa membuat komponenen atau menu tanpa membuat halaman baru lagi. Langsung saja masuk ke dalam tutorialnya. 1. Kita membuat button sederhana void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: page(), ); } } class page extends StatelessWidget { const page({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton(onPressed: () {}, child: Text('Click me')), )); } } Pertama, kita buat button terlebih dahulu yang nantinya saat kita klik muncul Pop up lembaran yang akan kita buat nanti. 2. Pada properti OnPressed, kita isi dengan showmodalbottomsheet onPressed: () { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(32))), context: context, builder: (BuildContext context) => Container()); }, Kedua kita isi widget dengan showModalBottomSheet dan properti yang harus diisi ialah context dan builder, Fungsinya adalah agar kita bisa menurunkan widget-widget yang biasa kita gunakan. 3. Membuat state widget untuk isi content class content extends StatelessWidget { const content({super.key}); @override Widget build(BuildContext context) { return Container( width: MediaQuery.of(context).size.width, child: Column(children: [ Center( child: Container( width: MediaQuery.of(context).size.width - (2 * 24), height: 60, child: TextFormField( scrollPadding: EdgeInsets.symmetric(vertical: 20), decoration: InputDecoration( prefixIcon: Icon( Icons.search, color: Colors.grey, ), hintText: "Contoh membuat textformfield", focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0xffE5E4E3)), borderRadius: BorderRadius.circular(16)), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0xffE5E4E3)), borderRadius: BorderRadius.circular(16))), ), ), ), ]), ); } } Langkah ketiga kita membuat stateless widget khusus untuk isi dari content modal bottom sheet. Disini saya isi dengan cara membuat TextFormField. 4. Implementasi ke dalam showModalBottomSheet onPressed: () { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(32))), context: context, builder: (BuildContext context) => content()); }, Yang terakhir tinggal kita impementasikan ke dalam buildernya, Maka saat kita klik tombolnya maka akan keluar bottom sheet dan berisikan content textformfield. Terima kasih dan semoga bermanfaat!

Kelas Cara Install Emulator Android Untuk Flutter Development di BuildWith Angga

Cara Install Emulator Android Untuk Flutter Development

Hello people spirit of learning! Dalam pembuatan aplikasi, pastinya kita perlu melihat hasil dari apa yang kita buat baik tampilan aplikasi maupun fungsionalitas aplikasi. Nah disini kita memerlukan emulator. Secara singkat emulator dapat diartikan sebagai software yang memungkinkan suatu sistem komputer meniru fungsi sistem dari perangkat atau komputer lain. Fungsinya adalah untuk menguji coba aplikasi di sistem operasi yang dikembangkan. Pada flutter sendiri, emulator yang bisa digunakan yaitu Xcode untuk perangkat Apple dan Android Studio untuk perangkat android. Namun disini kita akan menginstall emulator HP pada perangkat android. Langsung saja masuk ke tutorialnya 1. Menginstall Android Studio Pertama kita menginstall android studio terlebih dahulu. Android studio ini juga bisa digunakan sebagai IDE seperti Visual Studio Code dan bisa digunakan untuk menggunakan emulator. Untuk mendownloadnya bisa klik disini. Untuk cara menginstallnya bisa mengikuti disini. 2. Buka Android Studio Kedua kita membuka IDE Android Studio. setelah itu pilih Device Manager, dan pilih create device. 3. Pilih jenis emulator yang dipilih Ketiga, kita pilih jenis emulator yang akan kita gunakan, Disini bisa disesuaikan dengan kebutuhan. Biasanya flutter dikenal dengan pembuatan aplikasi pada mobile, maka kita akan gunakan emulator jenis HP, kita pilih saja yang pixel 4. 3. Pilih jenis emulator yang dipilih Ketiga, kita pilih jenis emulator yang akan kita gunakan, Disini bisa disesuaikan dengan kebutuhan. Biasanya flutter dikenal dengan pembuatan aplikasi pada mobile, maka kita akan gunakan emulator jenis HP, kita pilih saja yang pixel 4. 4. Pilih Versi Android yang akan digunakan Yang keempat kita memilih untuk memilih versi android mana yang akan kita gunakan, Disini saya sudah mendownload nya yaitu versi 7 (Nougat) dan versi 12 (S). Kita gunakan versi nougat saja. Untuk yang belum mendownload kita bisa mendownloadnya terlebih dulu. 5. Ubah nama Emulator Untuk langkah 5 kalian bebas untuk menamakan emulator dan orentasi kita bikin potrait saja. 6. Jalankan emulator Langkah keenam kita jalankan emulatornya dengan pilih yang gambar logo HP. pilih Open Android Emulator “Nama Emulator yang sudah dibuat”. Bila tidak muncul, kalian bisa refresh. Maka untuk hasilnya akan seperti ini. 7. Debug Codingan Flutter Lalu jika debug project flutter kita Dengan menklik gambar yang ditandai warna merah, menunggu sebentar dan hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas 5 Website Download Ilustrasi & Icon Gratis Untuk Design di BuildWith Angga

5 Website Download Ilustrasi & Icon Gratis Untuk Design

Di dunia design digital kita bisa menggunakan ilustrasi untuk menyampaikan seluruh tujuan dari produk, karya atau layanan tanpa harus menulis paragraf panjang tentang hal itu, sedangkan icon adalah gambar yang mewakili suatu objek atau fungsi. Banyak ilustrator memberikan banyak karya ilustrasi gratis yang dapat diakses melalui berbagai website penyedia ilustrasi. Di bawah ini, ada beberapa website untuk download berbagai ilustrasi & icon gratis yang bisa kamu gunakan: 1. Icons8 Icons8.com Website Icons8 menyediakan berbagai pilihan icon dan ilustrasi yang cukup lengkap dengan berbagai kategori. Untuk icon bahkan kamu bisa memilih icon style seperti pada iOS atau Windows. Pada website ini ada berbagai fitur yang memudahkan kamu dalam men-download assets yang dibutuhkan. Kamu juga dapat mengganti warna, ukuran pixel hingga mengubah beberapa komponen sebelum diunduh. 2. Freepik Freepik.com Freepik adalah website ilustrasi yang banyak diminati, kamu bisa menemukan berbagai assets (Foto, ilustrasi, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 3. Iconfinder Iconfinder.com Di Iconfinder kamu bisa menemukan berbagai pilihan icon, vektor 3D hingga ilustrasi. Selain itu, kamu juga bisa dengan mudah mengganti warna pada ikon yang dipilih. Tersedia juga fitur integrasi Iconfinder API yang membantumu untuk mengakses koleksi icon dan grafis yang menarik. Website ini juga menyediakan layanan untuk para creator dan designer untuk menjadi kontributor platform mereka sehingga kamu bisa mendapat penghasilan tambahan. 4. Reshot Reshot.com Reshot sendiri adalah website gambar ilustrasi dan icon gratis yang berbasis komunitas. Reshot menyediakan banyak koleksi icon dan ilustrasi, kamu bisa men-download secara instant dan gratis dengan berbagai format tanpa khawatir dengan lisensi untuk komersial. 5. IconScout IconScout.com IconScout menyediakan hingga 5,7 juta design assets seperti ilustrasi 2D & 3D, icons, dan lottie animations. Pada website IconScout memiliki fitur sama seperti website-website yang disebutkan sebelumnya yaitu dapat mengganti warna dan background assets sebelum men-download nya. Assets yang di-download dapat diimplementasikan di berbagai platforms. Terima kasih telah membaca artikel ini dan jangan lupa bagikan artikel ini jika bermanfaat.

Kelas Berkenalan Dengan Karir UI Engineer: Tools, Skills, dan Prospek Kerja di BuildWith Angga

Berkenalan Dengan Karir UI Engineer: Tools, Skills, dan Prospek Kerja

Jika karir UI/UX designer memiliki tugas utama dalam mendesain sebuah website atau aplikasi mobile maka UI engineer yang akan melanjutkan tugas tersebut dengan cara mengubah tampilan design menjadi barisan koding sehingga dapat digunakan secara online oleh masyarakat nantinya. UI Engineer berfokus membawa design kepada tahap development sebelum dikerjakan oleh tim Front-End Developer dan Back-End Developer. UI Engineer perlu berhati-hati dan juga teliti sehingga design yang telah diimplementasikan kepada tahap development sudah sesuai setidaknya 98% dari apa yang telah dikerjakan oleh UI/UX designer sebelumnya. Tools Yang Digunakan UI Engineer Sebelum Figma popular seperti saat ini, dulu UI engineer dan designer menggunakan software seperti Zeplin atau InvisionApp sehingga mereka dapat melakukan proses inspection pada design projek tersebut seperti melihat kode warna, typography, layout, margins, paddings, dan juga sebagainya. Namun saat ini proses design handoff dapat dilakukan oleh UI engineer hanya menggunakan Figma saja, jadi tidak perlu pindah ke software lain. UI engineer akan mulai melakukan slicing dan exporting dari asset-asset yang dibutuhkan seperti Icon, Photo, Illustration, yang digunakan pada projek website tersebut. Untuk Jadi UI Engineer Butuh Skills Apa Saja? Kita bisa berkarir dan fokus pada website atau mobile, jika saat ini kita lebih memilih website maka kita bisa mulai belajar HTML, CSS, dan juga JavaScript. Tugas kita menggunakan HTML dan CSS untuk membangun struktur layout website yang sempurna yang sesuai dari design yang telah dikerjakan oleh designer. UI Engineer juga perlu melatih critical thinking sehingga nanti mereka juga bisa peduli pada perfomance website tersebut, karena pengguna website akan frustasi apabila website yang digunakan membutuhkan waktu yang lama untuk proses loading, so, yes, pelajari juga ya ilmu meningkatkan perfomance website. Prospek Kerjaan UI Engineer Bagaimana? Well, di zaman yang serba digital saat ini sudah banyak perusahaan yang mulai membangun website pribadi mereka untuk dijadikan company profile, jual beli jasa atau produk, dan bahkan hal lainnya yang bisa menguntungkan customer dan perusahaan. Pekerjaan kita sebagai UI Engineer tentunya sangat dibutuhkan untuk membantu perusahaan dalam menjual produk mereka via website, dan kita bisa memperdalam skills website optimization dalam membangun website yang baik.

Kelas 6 Website Penyedia Stock Image Gratis Untuk Design di BuildWith Angga

6 Website Penyedia Stock Image Gratis Untuk Design

Ketika kita mengerjakan design project sering kali membutuhkan gambar atau stock image untuk melengkapi design kita agar lebih menarik, dengan kualitas gambar yang tinggi. Stock Image saat ini sudah banyak ditemukan di internet, namun kita perlu memperhatikan jenis lisensi dari stock image yang diunduh apakah dapat digunakan untuk komersial atau tidak. Sebagian stock image di internet memiliki persyaratan hak cipta dan harus membayar royalti untuk keperluan komersial atau dapat memodifikasi karya yang diunduh. Ada berbagai website yang menyediakan stock image bebas royalti. Berikut di antaranya: 1. Freepik.com Disini kamu bisa menemukan berbagai assets (Foto, vector, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 2. Unsplash Kamu dapat mengunduh berbagai pilihan gambar di Unsplash secara gratis dengan berbagai ukuran sesuai kebutuhan. Setiap gambar yang dipublikasikan di Unsplash dilisensikan di bawah Creative Commons Zero (CC0), yang memberi kebebasan kepada pengguna untuk menyalin, memodifikasi, mendistribusikan, dan menggunakan semua gambar tanpa izin atau atribusi. 3. Pixabay Pixabay merupakan website yang sangat lengkap karena menyediakan jutaan gambar, vector, ilustrasi bahkan video dan sound effects. Pixabay juga dirilis di bawah lisensi Creative Commons (CC0) ke dalam domain publik. 4. Burst Burst adalah website yang didirikan oleh Shopify. Burst dibuat dengan tujuan untuk membantu para entrepreneurs baik dalam membuat website, campaign marketing, dan produk yang lebih menarik. Kebanyakan foto ini diambil oleh tim Burst dan Shopify sendiri. Website ini juga di bawah lisensi Creative Commons (CC0). 5. Pexels Pexels memiliki ribuan gambar dan video gratis yang dapat diunduh, karena di bawah lisensi Creative Commons (CC0). Dari tampilannya, Pexels punya kemiripan dengan web Unsplash 6. Picjumbo Website Picjumbo tidak hanya menyediakan stock image gratis, namun juga menyediakan stock image premium untuk penggunya yang berlangganan (membership). Nah, itu dia 6 website penyedia stock image gratis untuk design, kita bisa mengunduh foto dan gambar gratis tanpa perlu pusing memikirkan pelanggaran hak cipta konten. Terima kasih dan semoga bermanfaat.

Kelas Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar di BuildWith Angga

Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar

Saat ini design tool Figma banyak digunakan oleh para Designer, baik oleh para Product Designer, UI/UX Designer dan bahkan Graphic Designer. Figma memiliki banyak plugin yang dapat digunakan untuk membantu kita bekerja lebih cepat dan efisien. Disini saya akan berbagi bagaimana cara mengunakan plugin “Background Remover” untuk membantu kamu bekerja lebih cepat dalam menghapus background gambar. Berikut cara menggunakan plugin Background Remover di Figma: 1. Buka File Design atau Buat File Design Baru Plugin bisa dijalankan pada file design yang sedang kamu kerjakan atau kamu dapat membuat file design baru. 2. Tambahkan gambar Tambahkan gambar yang akan dihapus backgroundnya. Kamu bisa menambahkan gambar dengan cara klik logo Figma dibagian kiri > File > Place image (Ctrl/Cmd+Shift+K) atau kamu dapat drag gambar ke file project design kamu. 3. Menjalankan Plugin Background Remover Kamu bisa mencari plugin tersebut dengan klik kanan pada gambar > Plugins > Find more plugins (Apabila belum pernah menjalankan plugin tersebut). Lalu kamu bisa ketik “Remove background” > Run > Remove Background untuk menjalankan plugin. Ada banyak jenis plugin background remover yang serupa, namun pada artikel ini saya menggunakan plugin ‘Icons8 Background Remover’. 4. Menunggu Plugin bekerja untuk menghapus background Dalam proses running plugin tersebut, lamanya waktu loading tergantung dengan ukuran atau resolusi gambar yang dipilih. Dan plugin di Figma ini memiliki batas ukuran gambar yaitu 5 MB. Apabila kamu memilih gambar dengan ukuran lebih dari 5 MB, akan muncul peringatan seperti ini: Untuk hasil akhirnya akan seperti ini: Background menjadi transparan Background pada gambar tersebut sudah terhapus dengan rapi. Tips: Untuk hasil ‘potongan’ yang lebih rapi kamu bisa menggunakan gambar dengan background/latar belakang yang polos, tidak terdapat bayangan atau gradasi. Terima kasih telah membaca artikel ini dan semoga bermanfaat!

Kelas Cara Install dan Menggunakan Package Slidable Widget  Pada Project Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Slidable Widget Pada Project Flutter Development

Hello people spirit of learning! Pada aplikasi messaging seperti email, Saat ada message masuk pasti kita bisa menggesernya baik archive, delete , dan lain sebagainya. Itu kita bisa lakukan dengan menggunakan package Slidable. Sliable adalah item daftar yang dapat digeser dengan tindakan penggeseran arah yang dapat ditutup. Kita langsung saja masuk ke dalam tutorialnya. 1. Kunjungi Website Pub.Dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Sliadble Langkah kedua adalah ketik keyword Slidable. Pilih yang paling atas. 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Implementasi Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: ListView(children: [ sliableExample( icon1: Icons.archive_outlined, icon2: Icons.delete, listTile: ListTile( tileColor: Colors.cyan, title: Text('Slide me Please', style: TextStyle( fontWeight: FontWeight.w700, color: Colors.white)), ), ), SizedBox(height: 30), sliableExample( listTile: ListTile( title: Text('Slide me please'), tileColor: Colors.amber, ), icon1: Icons.send_and_archive, icon2: Icons.delete) ]), ), ), ); } } class sliableExample extends StatelessWidget { final ListTile listTile; final IconData icon1; final IconData icon2; const sliableExample({ super.key, required this.listTile, required this.icon1, required this.icon2, }); @override Widget build(BuildContext context) { return Slidable( startActionPane: ActionPane(motion: ScrollMotion(), children: [ SlidableAction( onPressed: (context) {}, backgroundColor: Colors.blue, flex: 10, icon: icon1, autoClose: true, ), SlidableAction( onPressed: (context) {}, icon: icon2, backgroundColor: Colors.red, flex: 10, ) ]), child: listTile, ); } } Disini kita akan menggunakan 2 StatelessWidget yaitu MyApp dan sliadbleExample. Untuk slideableExample nantinya akan kita gunakan atau turunkan ke class MyApp. Untuk slideableExample kita akan buat variable seperti diatas dan dimasukkan ke dalam constructor. Fungsinya nantinya untuk menginisialisasikan nilai yang kita masukkan nanti. Dalam widget build kita mengembalikan nilai Packagenya yaitu Sliadble. Ada banyak properti yang kita gunakan. Untuk startActionPane fungsinya kita bisa menggeser ke kanan. untuk ScrollMotion adalah jenis animasi scrollnya, dan untuk children kita bisa isi dengan 2 SliableAction. Juga cukup banyak properti. Lalu kita turunkan ke dalam class MyApp. Namun sebelumnya kita isi dengan widget ListView dan diisi dengan 2 slidableExample. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Lowongan Freelancer Front-End Vue JS Developer 2023 di BuildWith Angga

Lowongan Freelancer Front-End Vue JS Developer 2023

Goals Bekerja sama dengan backend developer, quality assurance, dan UI designer dalam proses imeplementasi fitur terbaru pada website buildwithangga.com. Saat ini BuildWith Angga sedang fokus membangun Notification module untuk forum belajar (real-time). Requirements Menggunakan Vue JS 3Terbiasa menggunakan Laravel MixTerbiasa integrasi REST APIBersedia mengerjakan projek 3-6 jam sehariTingkat skills minimal Intermediate How to apply Persiapkan CV dan portfolio terbaik kamu misalnya link github atau personal websiteJelaskan cara kamu bekerja biasanya pada body emailKirim lamaran ke [email protected] dengan judul Vue JS Freelancer 2023 Silahkan apply dan jika tidak keberatan boleh bagikan lowongan ini kepada rekan terdekat yang sekiranya membutuhkan, terima kasih, sukses selalu.

Kelas Cara Install dan Menggunakan Package Loading Animation Widget  Pada Project Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Loading Animation Widget Pada Project Flutter Development

Hello people spirit of learning! Dalam flutter, terdapat bermacam-macam jenis package yang bisa kita pakai. Salah satunya adalah Laoding Animation Widget, yang fungsinya membuat animasi loading menjadi lebih cantik. untuk tutorialnya kita langsung saja mulai ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari Keyword Loading Animation 3. Install package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Install Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:loading_animation_widget/loading_animation_widget.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isLoading = false; @override Widget build(BuildContext context) { return isLoading ? loading() : MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 3)); setState(() { isLoading = false; }); }, child: Text('Load data'))), ), ); } } class loading extends StatelessWidget { const loading({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: LoadingAnimationWidget.waveDots(color: Colors.blue, size: 100)), ), ); } } Disini kita menggunakan 2 state ya yaitu Stateful dan Stateless. kita pakai stateful karena nantinya ada perubahan data jika kita melakukan action. Untuk membuat halaman loading kita bisa menggunakan stateless saja. kita bisa menggunakan packagenya dengan memanggil widget LoadingANimationWidget dan getter dengan jenis macam nama animasi loadingnya. dan setelah itu ada 2 properti yang harus diisi yaitu Color dan size. Fungsi dari masing-masing properti yaitu untuk mengatur warna dan ukuran pada animasi loading. Setelah kita membuat halaman pada loading, Kita membuat statefulWidget. Kita buat var bertipe bool yang diisi dengan nilai false. Setelah kita membuat variable, Pada widget build stateful kita buat pekondisian, Jika loading maka Animasi Loading akan berjalan, Jika tidak maka tampilkan halaman khusus untuk Load data. Pada button, kita buat fungsi saat ditekan maka akan ubah state menjadi true, Saat di klik maka akan loading selama 3 detik, Setelah 3 detik maka state akan berubah menjadi false. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button di BuildWith Angga

Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button

Hello people spirit of learning! Dalam flutter terdapat widget elevated button yang fungsinya adalah untuk membuat button dengan kustomisasi kita sendiri. Disini kita akan membuat button tanpa menggunakan shadow. 1. Membuat Elevated Button ElevatedButton(onPressed: () {}, child: Text('Confirm')) Pertama, pastinya kita memanggil widget Elevated Button untuk membuat widget button nya. Nanti hasilnya akan seperti gambar diatas. Untuk isinya kita isi dengan text terlebih dahulu ya dan untuk properti OnPressed nya kita isi dengan function kosong. 2. Membuat Styling Button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), primary: Colors.red, ); Kedua, untuk styling pada button kita membuatnya dengan file terpisah. Tipe data untuk syling button adalah ButtonStyle. dan di getter dengan stlyeFrom. ada banyak properti untuk styling pada button yaitu minimumSize, yang fungsinya membuat ukuran minimum pada button. Lalu shape yang fungsinya memodifikasi bentuk pada button. Primary adalah mengubah background warna pada button, Dan masih banyak lagi. 3. Implementasi Style ke dalam Elevated Button ElevatedButton( style: button, onPressed: () {}, child: Text('Confirm')) Yang ketiga, kita tinggal implementasikan style button pada elevated button. Caranya sangat mudah tinggal panggil properti style lalu isi dengan nama variable style yang baru saja kita buat. 4. Menghilangkan shadow pada elevated button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), elevation: 0, primary: Colors.red, ); Pada Button, terdapat shadow sedikit di belakang buttonnya. Untuk menghilangkannya, gunakan properti elevation dan diisi dengan 0. fungsi dari properti elevation ialah menambahkan shadow sesuai dengan ukuran yang diisi. Semoga bermanfaat dan terima kasih!

Kelas 5 Website Download Ilustrasi & Icon Gratis Untuk Design di BuildWith Angga

5 Website Download Ilustrasi & Icon Gratis Untuk Design

Di dunia design digital kita bisa menggunakan ilustrasi untuk menyampaikan seluruh tujuan dari produk, karya atau layanan tanpa harus menulis paragraf panjang tentang hal itu, sedangkan icon adalah gambar yang mewakili suatu objek atau fungsi. Banyak ilustrator memberikan banyak karya ilustrasi gratis yang dapat diakses melalui berbagai website penyedia ilustrasi. Di bawah ini, ada beberapa website untuk download berbagai ilustrasi & icon gratis yang bisa kamu gunakan: 1. Icons8 Icons8.com Website Icons8 menyediakan berbagai pilihan icon dan ilustrasi yang cukup lengkap dengan berbagai kategori. Untuk icon bahkan kamu bisa memilih icon style seperti pada iOS atau Windows. Pada website ini ada berbagai fitur yang memudahkan kamu dalam men-download assets yang dibutuhkan. Kamu juga dapat mengganti warna, ukuran pixel hingga mengubah beberapa komponen sebelum diunduh. 2. Freepik Freepik.com Freepik adalah website ilustrasi yang banyak diminati, kamu bisa menemukan berbagai assets (Foto, ilustrasi, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 3. Iconfinder Iconfinder.com Di Iconfinder kamu bisa menemukan berbagai pilihan icon, vektor 3D hingga ilustrasi. Selain itu, kamu juga bisa dengan mudah mengganti warna pada ikon yang dipilih. Tersedia juga fitur integrasi Iconfinder API yang membantumu untuk mengakses koleksi icon dan grafis yang menarik. Website ini juga menyediakan layanan untuk para creator dan designer untuk menjadi kontributor platform mereka sehingga kamu bisa mendapat penghasilan tambahan. 4. Reshot Reshot.com Reshot sendiri adalah website gambar ilustrasi dan icon gratis yang berbasis komunitas. Reshot menyediakan banyak koleksi icon dan ilustrasi, kamu bisa men-download secara instant dan gratis dengan berbagai format tanpa khawatir dengan lisensi untuk komersial. 5. IconScout IconScout.com IconScout menyediakan hingga 5,7 juta design assets seperti ilustrasi 2D & 3D, icons, dan lottie animations. Pada website IconScout memiliki fitur sama seperti website-website yang disebutkan sebelumnya yaitu dapat mengganti warna dan background assets sebelum men-download nya. Assets yang di-download dapat diimplementasikan di berbagai platforms. Terima kasih telah membaca artikel ini dan jangan lupa bagikan artikel ini jika bermanfaat.

Kelas 6 Website Penyedia Stock Image Gratis Untuk Design di BuildWith Angga

6 Website Penyedia Stock Image Gratis Untuk Design

Ketika kita mengerjakan design project sering kali membutuhkan gambar atau stock image untuk melengkapi design kita agar lebih menarik, dengan kualitas gambar yang tinggi. Stock Image saat ini sudah banyak ditemukan di internet, namun kita perlu memperhatikan jenis lisensi dari stock image yang diunduh apakah dapat digunakan untuk komersial atau tidak. Sebagian stock image di internet memiliki persyaratan hak cipta dan harus membayar royalti untuk keperluan komersial atau dapat memodifikasi karya yang diunduh. Ada berbagai website yang menyediakan stock image bebas royalti. Berikut di antaranya: 1. Freepik.com Disini kamu bisa menemukan berbagai assets (Foto, vector, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 2. Unsplash Kamu dapat mengunduh berbagai pilihan gambar di Unsplash secara gratis dengan berbagai ukuran sesuai kebutuhan. Setiap gambar yang dipublikasikan di Unsplash dilisensikan di bawah Creative Commons Zero (CC0), yang memberi kebebasan kepada pengguna untuk menyalin, memodifikasi, mendistribusikan, dan menggunakan semua gambar tanpa izin atau atribusi. 3. Pixabay Pixabay merupakan website yang sangat lengkap karena menyediakan jutaan gambar, vector, ilustrasi bahkan video dan sound effects. Pixabay juga dirilis di bawah lisensi Creative Commons (CC0) ke dalam domain publik. 4. Burst Burst adalah website yang didirikan oleh Shopify. Burst dibuat dengan tujuan untuk membantu para entrepreneurs baik dalam membuat website, campaign marketing, dan produk yang lebih menarik. Kebanyakan foto ini diambil oleh tim Burst dan Shopify sendiri. Website ini juga di bawah lisensi Creative Commons (CC0). 5. Pexels Pexels memiliki ribuan gambar dan video gratis yang dapat diunduh, karena di bawah lisensi Creative Commons (CC0). Dari tampilannya, Pexels punya kemiripan dengan web Unsplash 6. Picjumbo Website Picjumbo tidak hanya menyediakan stock image gratis, namun juga menyediakan stock image premium untuk penggunya yang berlangganan (membership). Nah, itu dia 6 website penyedia stock image gratis untuk design, kita bisa mengunduh foto dan gambar gratis tanpa perlu pusing memikirkan pelanggaran hak cipta konten. Terima kasih dan semoga bermanfaat.

Kelas Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar di BuildWith Angga

Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar

Saat ini design tool Figma banyak digunakan oleh para Designer, baik oleh para Product Designer, UI/UX Designer dan bahkan Graphic Designer. Figma memiliki banyak plugin yang dapat digunakan untuk membantu kita bekerja lebih cepat dan efisien. Disini saya akan berbagi bagaimana cara mengunakan plugin “Background Remover” untuk membantu kamu bekerja lebih cepat dalam menghapus background gambar. Berikut cara menggunakan plugin Background Remover di Figma: 1. Buka File Design atau Buat File Design Baru Plugin bisa dijalankan pada file design yang sedang kamu kerjakan atau kamu dapat membuat file design baru. 2. Tambahkan gambar Tambahkan gambar yang akan dihapus backgroundnya. Kamu bisa menambahkan gambar dengan cara klik logo Figma dibagian kiri > File > Place image (Ctrl/Cmd+Shift+K) atau kamu dapat drag gambar ke file project design kamu. 3. Menjalankan Plugin Background Remover Kamu bisa mencari plugin tersebut dengan klik kanan pada gambar > Plugins > Find more plugins (Apabila belum pernah menjalankan plugin tersebut). Lalu kamu bisa ketik “Remove background” > Run > Remove Background untuk menjalankan plugin. Ada banyak jenis plugin background remover yang serupa, namun pada artikel ini saya menggunakan plugin ‘Icons8 Background Remover’. 4. Menunggu Plugin bekerja untuk menghapus background Dalam proses running plugin tersebut, lamanya waktu loading tergantung dengan ukuran atau resolusi gambar yang dipilih. Dan plugin di Figma ini memiliki batas ukuran gambar yaitu 5 MB. Apabila kamu memilih gambar dengan ukuran lebih dari 5 MB, akan muncul peringatan seperti ini: Untuk hasil akhirnya akan seperti ini: Background menjadi transparan Background pada gambar tersebut sudah terhapus dengan rapi. Tips: Untuk hasil ‘potongan’ yang lebih rapi kamu bisa menggunakan gambar dengan background/latar belakang yang polos, tidak terdapat bayangan atau gradasi. Terima kasih telah membaca artikel ini dan semoga bermanfaat!

Kelas Lowongan Magang Jr. Product Manager (WFA & Dibayar Bulanan) di BuildWith Angga

Lowongan Magang Jr. Product Manager (WFA & Dibayar Bulanan)

Goals Bekerja sama dengan ui/ux designer, software engineer, dan marketing untuk menciptakan produk yang bermanfaat untuk masyarakat. Dimulai dari melakukan research, prototyping, dan melakukan usability-testing untuk validasi ide. Responsibilities Melakukan proses Design ThinkingMembuat prototype sederhanaMelakukan usability-testingBelajar ilmu bisnis dan startup Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahTerbiasa menggunakan FigmaBersedia magang selama 3-6 bulan ke depanSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (SMK/kuliah) boleh apply magangSudah mengikuti minimal 1 kelas Premium (untuk memastikan bahwa kamu telah terbiasa menggunakan fitur-fitur di website BWA). Benefits Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang gaji atau saku bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Riset 1 website untuk belajar online misalnya Skillshare.comBuatlah tabel perbandingan antara website tersebut dengan buildwithangga.comTulis tabel tersebut pada Notion.so dan siapkan link yang dapat diakses secara publikKirim link tersebut melalui email di bawah How to Apply [Closed] Siapkan Resume (CV) & Hasil test (berupa link Notion public ) dengan rapihIsi subject email dengan Magang Jr Product Manager 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 6 Jan 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, pantau terus Instagram BuildWith Angga untuk informasi terbaru terkait magang. Terima kasih.

Kelas Tips Kerja Cepat Sebagai UI/UX Designer Untuk Pemula di BuildWith Angga

Tips Kerja Cepat Sebagai UI/UX Designer Untuk Pemula

Ketika mengerjakan projek dari klien atau dari perusahaan tempat kita bekerja maka sering sekali kita diminta untuk menyelesaikan dengan cepat, mengerjakan projek dengan cepat dapat menghasilkan projek yang kurang baik. Lalu bagaimana caranya agar kita bisa bekerja lebih cepat sebagai UI/UX designer tanpa harus mengurangi kualitas dari projek tersebut? well, saya akan sharing ilmu tersebut. 1) Menggunakan Metode Design Sprint Design Sprint dapat membantu kita untuk menyelesaikan MVP pada projek tersebut yang di mana kita lebih fokus kepada core business tentang bagaimana kita dapat menyelesaikan masalah pengguna dan menghasilkan profit dari segi bisnis. 2) Menggunakan UI Kit Design Template Perusahaan seperti Shayna Kit telah menyediakan ratusan template UI design yang bisa kita gunakan dengan mudah, semua projeknya menggunakan software gratis yaitu Figma, kita hanya perlu download template yang berkategori sama dengan bisnis kita lalu membuat modifikasi bedasarkan kebutuhan pengguna. 3) Lakukan Usability-Testing Terkadang perfectionist dapat membunuh waktu, usaha, dan goal yang kita miliki saat ini ketika sedang mendesain sebuah projek website atau mobile app. Setelah kita fokus menggunakan metode Design Sprint dan menggunakan template dari Shayna Kit, kita bisa coba membuat prototype dan melakukan uji coba pada pengguna yang sekiranya cocok dengan aplikasi kita. Cepat Bukan Berarti Hasilnya Tidak Bagus Well, dikarenakan sudah banyak resources yang bisa kita gunakan sebagai UI/UX designer untuk menghasilkan projek yang cantik dan menarik serta memberikan UX yang baik dengan waktu yang cepat, kini sudah tidak alasan kembali untuk menunda-nunda pekerjaan.

Kelas 3 Rekomendasi Google Font Cocok Untuk Projek UI/UX Design di BuildWith Angga

3 Rekomendasi Google Font Cocok Untuk Projek UI/UX Design

Google Font dapat kita gunakan secara gratis untuk projek latihan atau komersil, Google Font juga menyediakan lebih dari seribu Font yang cocok untuk projek website atau mobile app design sehingga tampilannya akan menjadi lebih menarik untuk dipandang oleh pengguna. Poppins Google Font Poppins sangat popular digunakan oleh UI/UX designer dikarenakan cocok sekali digunakan pada berbagai kategori design aplikasi seperti health, finance, business, education, atau kategori lainnya. Tampilan font yang terlihat santai dan mudah dibaca adalah kunci suksesnya dari user experience dan user interface design pada projek website atau mobile app kita. Poppins sangat cocok kita gunakan pada element Header dan dapat dikombinasikan dengan jenis font lainnya. Bebas Neue Berbeda dengan Poppins, Google Font Bebas ini terlihat cukup tegas dan biasanya cocok digunakan pada projek seperti website portfolio, berita, atau dunia entertainment. Bebas juga sempurna apabila kita gunakan pada bagian Header element sebuah website. Playfair Display Jika kita sedang design aplikasi untuk bacaan seperti layaknya e-book maka google font yang satu ini bisa kita andalkan dikarenakan bentuknya yang hampir mirip seperti teks pada buku sehingga pembaca tidak merasa pusing dan lebih mudah membacanya. Manfaatkan Google Font Sehingga Projek Menjadi Lebih Menarik Jika kamu masih bimbang untuk memilih font yang tepat untuk projek saat ini maka bisa kunjungi website google font dan browsing beberapa font yang memang lebih cocok dibandingkan ketiga font di atas. Semoga bermanfaat.

Kelas Lowongan Magang Graphic Designer (WFA dan Dibayar) di BuildWith Angga

Lowongan Magang Graphic Designer (WFA dan Dibayar)

Goals Mendesain kebutuhan marketing seperti thumbnail kelas, screenshots, postingan Instagram, dan juga sebagainya menggunakan software Figma bersama copywriter dan lainnya. Responsibilities Mendesain thumbnail kelasMendesain screenshot kelasMendesain postingan Instagram Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSering menggunakan software FigmaSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 5Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium Benefits Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Duplicate file Figma berikut https://www.figma.com/community/file/1078789102725117907Jadikan projek design di atas menjadi thumbnail/cover kelas dengan ukuran 1200px lebar dan 800px tinggiIkuti beberapa referensi di bawahWajib menggunakan software Figma Referensi Rekomendasi Kami https://buildwithangga.com/storage/assets/thumbnails/m0k4ik0t-kelas%20online%20complete%20freelancer%20ui%20ux%20website%20designer%20buildwith%20angga.pnghttps://buildwithangga.com/storage/assets/thumbnails/eqfpgw15-compressorpng-kelas%20online%20design%20system%20react%20js%20story%20book%20buildwith%20angga%202022%20(1).pnghttps://buildwithangga.com/storage/assets/thumbnails/thumbnail%20kelas%20full%20stack%20javascript%20developer%20buildwith%20angga%20mern%20stack.png How to Apply Siapkan Resume (CV) & Hasil test (berupa link Figma public ) dengan rapihIsi subject email dengan Magang Graphic Designer 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 5 December dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWith Angga, stay tuned.

Kelas Dapatkan Hadiah Rp 50K Yang Menyelesaikan Ebook UI Design di BuildWith Angga

Dapatkan Hadiah Rp 50K Yang Menyelesaikan Ebook UI Design

BuildWith Angga saat ini ingin membantu kamu yang lebih suka belajar melalui tulisan seperti ebook salah satu contohnya, kami baru saja merilis ebook gratis untuk kamu yang ingin belajar materi UI design menggunakan software Figma. BuildWith Angga juga akan memberikan hadiah sebesar Rp 50.000 untuk 20 orang yang beruntung yang telah menyelesaikan ebook dengan baik. Kriteria Menjadi Orang Beruntung Menyelesaikan ebook dengan software FigmaMengirimkan link projek Figma yang bisa diakses secara publikMemberikan kritik dan saran yang mendetail (semakin detail semakin bagus) Oke Saya Mau Coba, Gimana Alurnya? Pelajari ebook UI Design terbaru kami yang satu ini buildwithangga.com/ebook/belajar-uiux-figma-design-medication-home-screenSubmit feedback kamu pada form yang terdapat pada hal. 8 dari ebook tersebutBerdoa semoga bisa jadi orang yang beruntung Informasi Lainnya Batas terakhir submit feedback adalah tanggal 30 Desember 202220 orang beruntung akan diumumkan pada tanggal 7 Januari 2023Jika sudah submit dan belum percaya diri karena kurang mendetail namun ingin coba submit ulang lebih baik lagi maka kami perbolehkan Jika ada pertanyaan lainnya boleh DM via Instagram BuildWith Angga.

Kelas 5 Shortcut Figma Paling Sering Digunakan di BuildWith Angga

5 Shortcut Figma Paling Sering Digunakan

Shortcut Figma dapat membantu kita bekerja lebih cepat lagi sebagai ui/ux designer ketika mendesain aplikasi atau sebuah website. Pada kali ini saya akan berbagi beberapa shortcut yang sering saya gunakan agar mendesign lebih produktif dan hasilnya juga sangat baik. 1) Shortcut Figma 'F' Digunakan untuk memilih dan membuat artboard tempat kita bekerja, misalnya kita ingin mendesain aplikasi iOS maka tinggal tekan F pada keyboard lalu pilih iPhone. 2) Shortcut Figma 'T' Apabila kita ingin menambahkan Text pada design kita maka dengan menekan keyboard T kita bisa langsung membuat paragraph untuk kebutuhan design. 3) Shortcut Figma 'R' Membuat background atau button dapat kita lakukan dengan cepat dan mudah dengan menggunakan shortcut R (rectangle) pada software Figma. 4) Shortcut Figma 'P' Biasanya untuk membuat chart maka kita butuh tools yang fleksibel untuk menggambar sebuah garis atau shape, maka dari itu saya mengandalkan shortcut P atau Pen tool pada Figma. 5) Shortcut Figma 'Shift V' dan 'Shift H' Kita dapat mengubah posisi sebuah Icon secara Vertical dengan Shift V atau apabila ingin horizontal bisa gunakan Shift H pada software Figma.

Kelas Persiapan Awal Untuk Belajar UX Design Tahun 2023 di BuildWith Angga

Persiapan Awal Untuk Belajar UX Design Tahun 2023

Belajar UX dapat dikatakan sesuatu yang tidak mudah namun di sini saya akan berbagi hal penting yang perlu kita ketahui apabila kita sedang persiapan awal untuk belajar ux design di tahun 2023 dan seterusnya nanti. UX designer adalah karir yang memiliki bayaran tinggi di Indonesia atau luar negeri, pekerjaan UX designer adalah memastikan bahwa pengguna dapat dengan mudah menggunakan aplikasi atau website buatan dari perusahaan tempat kita bekerja. Jika kamu ingin mulai belajar UX design maka wajib sekali untuk mengikuti setiap materi di bawah in yang saya jabarkan khusus untuk pemula seperti kamu saat ini, let's get started. Meningkatkan Rasa Penasaran Sebagai UX Designer Sebelum terjun mendesain aplikasi pertama kita maka ada hal penting lainnya yang perlu kita lakukan, kita bisa mulai dengan menggunakan aplikasi buatan perusahaan lain misalnya Tokopedia, Traveloka, Tiket, TIX, atau aplikasi lainnya. Tujuan utamanya adalah untuk mempelajari setiap pengalaman pada aplikasi tersebut yang nantinya bisa kita implementasikan juga dari segi user-flow, experience design, dan visual design kepada aplikasi buatan perusahaan kita. Ketika menggunakan aplikasi perusahaan lain maka pada benak pikiran kita berpikir kurang lebih seperti ini 'kira-kira kenapa fitur A berada di halaman B ya?' atau mungkin bisa seperti ini 'kenapa pengguna perlu login dulu untuk membeli tiket ya?' Mempraktikkan Heuristic Evaluation Pada Website atau Mobile Apps Setelah kita berhasil menggunakan lebih dari 10 aplikasi buatan perusahaan lain, lalu kita juga sudah bisa merasakan experience design dari setiap aplikasi tersebut. Kini waktunya untuk mempraktikkan heuristic evaluation pada UX design yang di mana tujuan utamanya adalah membuat beberapa peningkatkan pada design dari website atau aplikasi. Misalnya kita uji coba membeli tiket pesawat melalui Traveloka lalu memilih pembayaran menggunakan kartu kredit, setelah itu kita merasakan pengalaman membayar yang masih di bawah harapan kita sebagai pengguna aplikasi Traveloka. Oleh karena itu kita perlu mencatat beberapa hal yang bisa kita tingkatkan kembali bedasarkan dari pengalaman yang kita rasakan sebelumnya, contohnya seperti ini: "Tadi kan saya bayar pakai kartu kredit, lalu saya lihat tidak ada pilihan apakah akan langsung bayar lunas 100% atau bisa mencicil selama beberapa bulan. Jadi, saya kepikiran untuk meningkatkan dan membuat fitur tersebut pada design aplikasi perusahaan saya nantinya". Di atas adalah salah satu contoh kecil dari mengimplementasikan teknik heuristic evaluation pada UX design pada aplikasi Traveloka, kamu juga bisa mempraktikkannya pada aplikasi lainnya yang mungkin menarik untuk Mempelajari Software Design Seperti Whimsical dan Figma Kita sudah mencatat beberapa hal yang perlu ditingkatkan di dalam aplikasi Traveloka, Tiket, Tokopedia, dan aplikasi lainnya. Sudah waktunya untuk kita mempelajari salah satu software design yang dapat membantu kita untuk membuat projek design pertama kita. Kamu bisa mulai mencoba software seperti Figma atau Whimsical yang dapat digunakan secara gratis, selamanya. Whimsical sangat cocok untuk membuat wireframe atau gambaran kasar dari design aplikasi yang akan kita kerjakan, sedangkan Figma cocok untuk difokuskan pada tahap visual design dan prototype. Berikut beberapa kelas online gratis yang bisa diikuti rekomendasi untuk mempelajari kedua software tersebut di BuildWith Angga: Belajar membuat Wireframe dengan WhimsicalBelajar tools dasar dan design aplikasi Travel dengan Figma Kolaborasi Dengan Developer dan Team Marketing Apabila kamu sudah berhasil design menggunakan software Figma dan Whimsical maka kamu bisa coba diskusi dengan developer atau programmer yang berada di perusahaan tempat kamu bekerja sebagai UX designer. Tujuan dari diskusi tersebut adalah memberikan insight tambahan untuk kamu memahami bagaimana nantinya design yang sudah kamu kerjakan akan diimplementasikan kepada coding atau disebut dengan tahap development. Setelah tahap development selesai maka aplikasi atau website siap digunakan oleh pengguna yang sesuai dari customer persona yang telah kita rancang sebelumnya, dari situ nantinya bisa kita lanjutkan untuk meminta feedback kepada pengguna terkait hal apa saja yang bisa ditingkatkan kembali. Di BuildWith Angga, Belajar UX Tanpa Mengeluarkan Biaya Kamu telah mempelajari beberapa hal penting di atas dan apabila kamu sudah berminat untuk belajar lebih tentang UX design maka saya dapat sarankan untuk mengikuti beberapa kelas online gratis yang tersedia di BuildWith Angga.

Kelas Cara Menggunakan Bottom Sheet pada Flutter Development di BuildWith Angga

Cara Menggunakan Bottom Sheet pada Flutter Development

Hello people spirit of learning! Dalam aplikasi ketika melakukan suatu interaksi di dalamnya, terdapat muncul dar bawah Pop up container atau lembaran yang berisi komponen-komponen yang bisa kita gunakan. dalam pengembangan aplikasi tersebut, kita bisa menggunakan lembaran tersebut dengan widget showModalBottomSheet. Fungsinya agar kita bisa membuat komponenen atau menu tanpa membuat halaman baru lagi. Langsung saja masuk ke dalam tutorialnya. 1. Kita membuat button sederhana void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: page(), ); } } class page extends StatelessWidget { const page({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton(onPressed: () {}, child: Text('Click me')), )); } } Pertama, kita buat button terlebih dahulu yang nantinya saat kita klik muncul Pop up lembaran yang akan kita buat nanti. 2. Pada properti OnPressed, kita isi dengan showmodalbottomsheet onPressed: () { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(32))), context: context, builder: (BuildContext context) => Container()); }, Kedua kita isi widget dengan showModalBottomSheet dan properti yang harus diisi ialah context dan builder, Fungsinya adalah agar kita bisa menurunkan widget-widget yang biasa kita gunakan. 3. Membuat state widget untuk isi content class content extends StatelessWidget { const content({super.key}); @override Widget build(BuildContext context) { return Container( width: MediaQuery.of(context).size.width, child: Column(children: [ Center( child: Container( width: MediaQuery.of(context).size.width - (2 * 24), height: 60, child: TextFormField( scrollPadding: EdgeInsets.symmetric(vertical: 20), decoration: InputDecoration( prefixIcon: Icon( Icons.search, color: Colors.grey, ), hintText: "Contoh membuat textformfield", focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0xffE5E4E3)), borderRadius: BorderRadius.circular(16)), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Color(0xffE5E4E3)), borderRadius: BorderRadius.circular(16))), ), ), ), ]), ); } } Langkah ketiga kita membuat stateless widget khusus untuk isi dari content modal bottom sheet. Disini saya isi dengan cara membuat TextFormField. 4. Implementasi ke dalam showModalBottomSheet onPressed: () { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(32))), context: context, builder: (BuildContext context) => content()); }, Yang terakhir tinggal kita impementasikan ke dalam buildernya, Maka saat kita klik tombolnya maka akan keluar bottom sheet dan berisikan content textformfield. Terima kasih dan semoga bermanfaat!

Kelas Cara Install Emulator Android Untuk Flutter Development di BuildWith Angga

Cara Install Emulator Android Untuk Flutter Development

Hello people spirit of learning! Dalam pembuatan aplikasi, pastinya kita perlu melihat hasil dari apa yang kita buat baik tampilan aplikasi maupun fungsionalitas aplikasi. Nah disini kita memerlukan emulator. Secara singkat emulator dapat diartikan sebagai software yang memungkinkan suatu sistem komputer meniru fungsi sistem dari perangkat atau komputer lain. Fungsinya adalah untuk menguji coba aplikasi di sistem operasi yang dikembangkan. Pada flutter sendiri, emulator yang bisa digunakan yaitu Xcode untuk perangkat Apple dan Android Studio untuk perangkat android. Namun disini kita akan menginstall emulator HP pada perangkat android. Langsung saja masuk ke tutorialnya 1. Menginstall Android Studio Pertama kita menginstall android studio terlebih dahulu. Android studio ini juga bisa digunakan sebagai IDE seperti Visual Studio Code dan bisa digunakan untuk menggunakan emulator. Untuk mendownloadnya bisa klik disini. Untuk cara menginstallnya bisa mengikuti disini. 2. Buka Android Studio Kedua kita membuka IDE Android Studio. setelah itu pilih Device Manager, dan pilih create device. 3. Pilih jenis emulator yang dipilih Ketiga, kita pilih jenis emulator yang akan kita gunakan, Disini bisa disesuaikan dengan kebutuhan. Biasanya flutter dikenal dengan pembuatan aplikasi pada mobile, maka kita akan gunakan emulator jenis HP, kita pilih saja yang pixel 4. 3. Pilih jenis emulator yang dipilih Ketiga, kita pilih jenis emulator yang akan kita gunakan, Disini bisa disesuaikan dengan kebutuhan. Biasanya flutter dikenal dengan pembuatan aplikasi pada mobile, maka kita akan gunakan emulator jenis HP, kita pilih saja yang pixel 4. 4. Pilih Versi Android yang akan digunakan Yang keempat kita memilih untuk memilih versi android mana yang akan kita gunakan, Disini saya sudah mendownload nya yaitu versi 7 (Nougat) dan versi 12 (S). Kita gunakan versi nougat saja. Untuk yang belum mendownload kita bisa mendownloadnya terlebih dulu. 5. Ubah nama Emulator Untuk langkah 5 kalian bebas untuk menamakan emulator dan orentasi kita bikin potrait saja. 6. Jalankan emulator Langkah keenam kita jalankan emulatornya dengan pilih yang gambar logo HP. pilih Open Android Emulator “Nama Emulator yang sudah dibuat”. Bila tidak muncul, kalian bisa refresh. Maka untuk hasilnya akan seperti ini. 7. Debug Codingan Flutter Lalu jika debug project flutter kita Dengan menklik gambar yang ditandai warna merah, menunggu sebentar dan hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Cara Install dan Menggunakan Package Slidable Widget  Pada Project Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Slidable Widget Pada Project Flutter Development

Hello people spirit of learning! Pada aplikasi messaging seperti email, Saat ada message masuk pasti kita bisa menggesernya baik archive, delete , dan lain sebagainya. Itu kita bisa lakukan dengan menggunakan package Slidable. Sliable adalah item daftar yang dapat digeser dengan tindakan penggeseran arah yang dapat ditutup. Kita langsung saja masuk ke dalam tutorialnya. 1. Kunjungi Website Pub.Dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Sliadble Langkah kedua adalah ketik keyword Slidable. Pilih yang paling atas. 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Implementasi Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: ListView(children: [ sliableExample( icon1: Icons.archive_outlined, icon2: Icons.delete, listTile: ListTile( tileColor: Colors.cyan, title: Text('Slide me Please', style: TextStyle( fontWeight: FontWeight.w700, color: Colors.white)), ), ), SizedBox(height: 30), sliableExample( listTile: ListTile( title: Text('Slide me please'), tileColor: Colors.amber, ), icon1: Icons.send_and_archive, icon2: Icons.delete) ]), ), ), ); } } class sliableExample extends StatelessWidget { final ListTile listTile; final IconData icon1; final IconData icon2; const sliableExample({ super.key, required this.listTile, required this.icon1, required this.icon2, }); @override Widget build(BuildContext context) { return Slidable( startActionPane: ActionPane(motion: ScrollMotion(), children: [ SlidableAction( onPressed: (context) {}, backgroundColor: Colors.blue, flex: 10, icon: icon1, autoClose: true, ), SlidableAction( onPressed: (context) {}, icon: icon2, backgroundColor: Colors.red, flex: 10, ) ]), child: listTile, ); } } Disini kita akan menggunakan 2 StatelessWidget yaitu MyApp dan sliadbleExample. Untuk slideableExample nantinya akan kita gunakan atau turunkan ke class MyApp. Untuk slideableExample kita akan buat variable seperti diatas dan dimasukkan ke dalam constructor. Fungsinya nantinya untuk menginisialisasikan nilai yang kita masukkan nanti. Dalam widget build kita mengembalikan nilai Packagenya yaitu Sliadble. Ada banyak properti yang kita gunakan. Untuk startActionPane fungsinya kita bisa menggeser ke kanan. untuk ScrollMotion adalah jenis animasi scrollnya, dan untuk children kita bisa isi dengan 2 SliableAction. Juga cukup banyak properti. Lalu kita turunkan ke dalam class MyApp. Namun sebelumnya kita isi dengan widget ListView dan diisi dengan 2 slidableExample. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Cara Install dan Menggunakan Package Loading Animation Widget  Pada Project Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Loading Animation Widget Pada Project Flutter Development

Hello people spirit of learning! Dalam flutter, terdapat bermacam-macam jenis package yang bisa kita pakai. Salah satunya adalah Laoding Animation Widget, yang fungsinya membuat animasi loading menjadi lebih cantik. untuk tutorialnya kita langsung saja mulai ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari Keyword Loading Animation 3. Install package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Install Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:loading_animation_widget/loading_animation_widget.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isLoading = false; @override Widget build(BuildContext context) { return isLoading ? loading() : MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 3)); setState(() { isLoading = false; }); }, child: Text('Load data'))), ), ); } } class loading extends StatelessWidget { const loading({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: LoadingAnimationWidget.waveDots(color: Colors.blue, size: 100)), ), ); } } Disini kita menggunakan 2 state ya yaitu Stateful dan Stateless. kita pakai stateful karena nantinya ada perubahan data jika kita melakukan action. Untuk membuat halaman loading kita bisa menggunakan stateless saja. kita bisa menggunakan packagenya dengan memanggil widget LoadingANimationWidget dan getter dengan jenis macam nama animasi loadingnya. dan setelah itu ada 2 properti yang harus diisi yaitu Color dan size. Fungsi dari masing-masing properti yaitu untuk mengatur warna dan ukuran pada animasi loading. Setelah kita membuat halaman pada loading, Kita membuat statefulWidget. Kita buat var bertipe bool yang diisi dengan nilai false. Setelah kita membuat variable, Pada widget build stateful kita buat pekondisian, Jika loading maka Animasi Loading akan berjalan, Jika tidak maka tampilkan halaman khusus untuk Load data. Pada button, kita buat fungsi saat ditekan maka akan ubah state menjadi true, Saat di klik maka akan loading selama 3 detik, Setelah 3 detik maka state akan berubah menjadi false. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button di BuildWith Angga

Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button

Hello people spirit of learning! Dalam flutter terdapat widget elevated button yang fungsinya adalah untuk membuat button dengan kustomisasi kita sendiri. Disini kita akan membuat button tanpa menggunakan shadow. 1. Membuat Elevated Button ElevatedButton(onPressed: () {}, child: Text('Confirm')) Pertama, pastinya kita memanggil widget Elevated Button untuk membuat widget button nya. Nanti hasilnya akan seperti gambar diatas. Untuk isinya kita isi dengan text terlebih dahulu ya dan untuk properti OnPressed nya kita isi dengan function kosong. 2. Membuat Styling Button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), primary: Colors.red, ); Kedua, untuk styling pada button kita membuatnya dengan file terpisah. Tipe data untuk syling button adalah ButtonStyle. dan di getter dengan stlyeFrom. ada banyak properti untuk styling pada button yaitu minimumSize, yang fungsinya membuat ukuran minimum pada button. Lalu shape yang fungsinya memodifikasi bentuk pada button. Primary adalah mengubah background warna pada button, Dan masih banyak lagi. 3. Implementasi Style ke dalam Elevated Button ElevatedButton( style: button, onPressed: () {}, child: Text('Confirm')) Yang ketiga, kita tinggal implementasikan style button pada elevated button. Caranya sangat mudah tinggal panggil properti style lalu isi dengan nama variable style yang baru saja kita buat. 4. Menghilangkan shadow pada elevated button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), elevation: 0, primary: Colors.red, ); Pada Button, terdapat shadow sedikit di belakang buttonnya. Untuk menghilangkannya, gunakan properti elevation dan diisi dengan 0. fungsi dari properti elevation ialah menambahkan shadow sesuai dengan ukuran yang diisi. Semoga bermanfaat dan terima kasih!

Kelas Cara Install dan Menggunakan Package Email Validator Pada Project Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Email Validator Pada Project Flutter Development

Hello people spirit of learning! Dalam melakukan sign up / sign in, pastinya kita harus membuat suatu kondisi yang cukup panjang. Yang dimana jika tidak menggunakan @test.com atau semacamnya, maka kondisinya harus seperti bagaimana dan seterusnya akan seperti apa. Dalam flutter, terdapat package yang bernama Email Validator. Email validator fungsinya mengecheck apakah yang kita input itu berupa email atau bukan. Disini kita langsung saja masuk ke dalam tutorialnya ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Email Validator Langkah kedua adalah ketik keyword email validator. Pilih yang paling atas. 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. 4. Implementasi Package import 'package:email_validator/email_validator.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isEmailValid = true; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Container( width: 325, height: 65, child: TextFormField( style: TextStyle( color: isEmailValid ? Colors.black : Colors.red), onChanged: (value) { print(value); var isValid = EmailValidator.validate(value); print(isValid); if (isValid) { setState(() { isEmailValid = true; }); } else { setState(() { isEmailValid = false; }); } }, decoration: InputDecoration( hintText: "Email", border: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue))), )), ) ], )), ), ); } } State yang kita gunakan disini adalah statefulWidget. Kenapa ? Dengan menggunakan stateful data yang akan kita gunakan nantinya bersifat dinamis. Setelah itu kita membuat textformFieldnya dengan widget TextFormField, Dan mengatur ukurannya kita bisa menggunakan container. Selanjutnya kita styling textformfieldnya dengan menggunakan InputDecoration. Kita akan menggunakan Validasi email pada properti OnChange. properti ini fungsinya bila apa yang kita ketik dalam formfield maka akan terjadi suatu penkondisian yang kita buat. pada OnChange kita masukkan parameter value, dan Membuat variabel khusus untuk mengecheck validasi email menggunakan package EmailValidator dan getter validate diisi dengan parameter value. Setelah itu buat suatu penkondisian jika Validasi email nya benar, Maka setState pada isEmailValid kita jadikan true, Jika tidak maka setState pada isEmailValid kita jadikan false. Begitupun pada warna textnya juga kita buat penkondisian pada properti style. Jika validasi email benar maka warna textnya akan menjadi hitam, Sedangkan validasi email salah maka warna textnya menjadi merah. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Kelas Cara Install dan Menggunakan Package Shimmer Pada Projek Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Shimmer Pada Projek Flutter Development

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satu package favorite adalah shimmer. Fungsi dari shimmer ini adalah membuat widget menjadi berkilau. Biasanya digunakan untuk me ngeload sebuah aplikasi. Seperti pada aplikasi lainnya. Langsung saja ke dalam tutorialnya. Kunjungi pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. Cari keyword Shimmer Langkah kedua adalah ketik keyword shimmer. Lalu pilih paling atas Install package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. Implementasi package void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Shimmer.fromColors( baseColor: Colors.grey, highlightColor: Colors.white, child: Text( 'Loading', textAlign: TextAlign.center, style: TextStyle( fontSize: 40.0, fontWeight: FontWeight.bold, ), ), ), ), ], )), ); } } Untuk menggunakannya kita bisa langsung saja panggil widget Shimmer. didalamnya terdapat 2 properti yaitu child dan gradient. Namun kita menggunakan getter saja yaitu get FromColors. Nantinya didalamnya ada cukup banyak properti. Basecolor untuk warna dasarnya dan highlightColor untuk warna kilaunya, dan child adalah isi dari shimmer nya nanti. Childnya kita isi sebagai text saja dan styling sesuai keinginan kalian. Terima kasih dan semoga bermanfaat!

Kelas Cara Install dan Menggunakan Package Spinner Pada Projek Flutter Development di BuildWith Angga

Cara Install dan Menggunakan Package Spinner Pada Projek Flutter Development

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satunya adalah spinner. Fungsi dari spinner ini adalah membuat animasi scroll sederhana yang menggilir sejumlah widget berukuran tetap. Langsung saja ke dalam tutorialnya. Kunjungi pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. Cari keyword spinner Langkah kedua adalah ketik keyword spinner. Lalu pilih yang ke 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. Implementasi Package import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _timePickertestState(); } class _timePickertestState extends State<MyApp> { DateTime _dateTime = DateTime.now(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Container( child: Center( child: Text( _dateTime.hour.toString().padLeft(2, '0') + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ) ]), ), ), ); } } Disini kita mencoba implementasi packagenya ya. Disini kita gunakan statefulWidget karena datanya dinamis atau bisa berubah-ubah nantinya. Lalu kita bikin variable _datetime yang kita isi dengan Datetime.now() yang fungsi dari variable ini nantinya dijadikan waktu Realtime. Lalu kita tampilkan jam nya mulai dari Jam ,Menit, dan detiknya kita tampilkan. Lalu kita kasih jarak sedikit saja, dan tambahkan ‘0’ Agar jika angka jamnya bukan 2 digit, Maka depannya akan ditambahkan ‘0’. Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } Sesudah itu, Kita membuat widget Spinnernya yaitu Spinner untuk mengatur Jam, menit, dan waktu. Disini kita bisa menggunakan package dengan mengembalikan nilai packagenya yaitu TimePickerSpinner. Dalam TimePickerSPinner terdapat banyak properti yang bisa kita gunakan. Namun disini kita hanya membuat Spinner waktu sederhana saja. Kita hanya memakai 2 saja yaitu isShowSeconds yang fungsinya menampilkan detik waktu, dan onTimeChange fungsinya terjadi perubahan data waktu jika kita spin. Pada onTimeChange, kita isi parameter Time Dalamnya kita isi dengan setState, fungsi dari setState adalah untuk memberitahu framework bahwa ada object yang berubah pada State, kemudian akan melakukan build ulang pada Widget tersebut. Dalam setState kita isi dengan variable _datetime = time. Nanti saat kita melakukan spin, Maka waktu yang ditampilkan juga ikut berubah sesuai spin yang kita atur. Untuk hasil akhirnya, akan seperti ini. import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _timePickertestState(); } class _timePickertestState extends State<MyApp> { DateTime _dateTime = DateTime.now(); Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ hourMinuteSecond(), Center( child: Text( _dateTime.hour.toString().padLeft(2) + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ]), ), ), ); } } Terima kasih dan semoga bermanfaat!

Kelas Cara Menggunakan Widget Stack pada Flutter di BuildWith Angga

Cara Menggunakan Widget Stack pada Flutter

Hello people spirit of learning! Pada aplikasi yang sering kita buat mungkin kita sering melihat gambar yang dilapisi oleh button, kata-kata, dan lain sebagainya. Nah itu kita bisa lakukan dengan menggunakan widget Stack. Seperti namanya, Stack atau tumpukkan. Berarti bisa kita artikan widget yang berfungsi untuk menumpukkan widget-widget atau melapisi widget-widget. Disini kita ingin melakukan cara menggunakan widget stack secara sederhana. Panggil Widget Stack return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ ]), ), ); Pertama, kita panggil widget stack pastinya pada body scaffold. Widget stack ini merupakan multiple children yang artinya pada properti children kita bisa isi lebih dari 1 widget. Kita coba dengan isi 1 container return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ) ]), ), ); Kedua, kita isi dengan container. Disini containernya tidak usah diatur lebar dan tingginya, kita biarkan saja. Anggap container ini sebagai wallpaper. Kita Isi dengan Container Lagi return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ) ]), ), ); Langkah ketiga, kita isi lagi dengan container yang lebar dan tingginya diatur. Bisa dilihat pada gambar container pertama kita tumpuk dengan container ke 2 yang berwarna merah. Tidak harus diisi container ya bisa diisi dengan widget lainnya. Tambahkan widget dan buat rata tengah return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(alignment: Alignment.center, children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ), Container( width: 200, height: 200, color: Colors.green, ), ]), ), ); Langkah terakhir tinggal isi dengan widget apapun. Pada widget stack terdapat banyak properti. Disini kita gunakan aligment yang fungsinya menempatkan baris pada isi widget stack. Disini kita buat rata tengah pada widget stack. Maka hasilnya seperti gambar diatas. Kita baru saja menggunakan widget stack secara sederhana, yang dimana berfungsi untuk menaruh widget secara berlapis. Untuk lebih lengkapnya bisa membaca dokumentasi resmi flutter disini. Terima kasih dan semoga bermanfaat!

Kelas Cara Custom Border Radius Pada Button Flutter di BuildWith Angga

Cara Custom Border Radius Pada Button Flutter

Hello people spirit of learning! Pada aplikasi kita pasti sering menemukan tombol yang beragam-ragam. Mulai dari warna,bentuk, lengkungan tombol, dan lain sebagainya. Disini saya akan membuat custom border radius atau custom lengkungan button pada flutter. Langsung saja ke tutorialnya. Membuat ukuran button Container( width: 130, height: 45, ) Langkah pertama, kita atur ukuran pada buttonnya dengan menggunakan widget Container. Width untuk mengatur panjangnya dan Height untuk mengatur lebarnya. Gunakan Widget-widget Button Container( width: 130, height: 45, child: ElevatedButton(onPressed: () {}, child: Text('Confirm')), ) Widget button ada 3 macam, Yaitu TextButton, ElevatedButton, dan OutlineButton. Disini kita menggunakan ElevatedButton. Maka tampilannya akan seperti gambar diatas. Styling Border Radius Container( width: 130, height: 45, child: ElevatedButton( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(17))), onPressed: () {}, child: Text('Confirm')), ) Untuk melakukan styling, gunakan properti style lalu isi dengan ElevatedButton.stylefrom. Didalamnya diisi dengan properti shape. Lalu shape diisi dengan widget RoundedRectangleBorder. Lalu diisi dengan properti BorderRadius yang fungsinya untuk mengatur lengkungan button. disini kita menggunakan getter circular (bundaran), yang fungsinya membuat radius perbatasan semua radius. Barusan kita sudah bisa membuat custom border radius pada flutter, yang fungsinya untuk mengatur tiap lengkungan sudut pada tombol atau button. Terima kasih dan semoga bermanfaat!

Kelas Lowongan Kerja Customer Service (Remote & Bandung Only) di BuildWith Angga

Lowongan Kerja Customer Service (Remote & Bandung Only)

Goals Membantu student atau customer yang ingin mencapai karir impiannya dengan cara mempelajari banyak ilmu baru serta membangun hasil karya di BuildWith Angga. Responsibilities Membalas pesan pada DM InstagramMembalas komentar pada InstagramMemilihkan alur belajar atau kelas yang cocok untuk studentMemberikan informasi penting lainnya terkait produk BWA Requirements Minimal lulusan S1 jurusan IT atau Sistem InformasiMinimal pengalaman kerja (role apa saja) 1 tahunMengutamakan tinggal di Bandung, jika dari luar Bandung bisa pindah ke BandungMenguasai bahasa Inggris tingkat menengahSedang tidak bekerja freelancer, part time, full timeBekerja dari rumah namun akan ada sesi kerja offline bersama-sama di BandungMinimal telah mengikuti 1 kelas Premium di BuildWith Angga (untuk memastikan bahwa kamu sudah mengenal cara belajar di BWA)Mengerjakan challenge sederhana yang tersedia di bawah Challenge Jawab beberapa pertanyaan berikut: Jika ada customer yang ingin belajar namun belum memiliki biaya, saran apa yang akan kamu berikan kepada customer tersebut?Jika ada customer yang bingung memilih kelas yang perlu dipelajari, saran apa yang akan kamu berikan kepada customer tersebut?Sebutkan 3 kompetitor BuildWith Angga dan benefit yang mereka sediakan tapi tidak tersedia di BuildWith Angga? Kirim jawaban di atas melalui email di bawah. How to Apply Siapkan Resume (CV) & jawaban test pada body emailIsi subject email dengan CS 2023 BandungKirim lamaran ke email [email protected] Lowongan dibuka pada tanggal 9 Januari 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWith Angga, stay tuned.

Kelas Lowongan Kerja HRD Officer di BuildWith Angga

Lowongan Kerja HRD Officer

Goals Membantu perusahaan untuk menjaga perfomance karyawan pada setiap tugas yang mereka jalankan sehingga dapat mencapai goal besar perusahaan dalam membantu masyarakat Indonesia belajar design dan coding dengan baik. Responsibilities Monitor staff performance and attendance activitiesHandling Recruitment, Payroll, Compensation & Benefit, KPI, BPJS, Industrial Relation, etc Prepare and monitoring employee contract agreement Prepare and monitoring Business Trip Prepare, develop and implement HR Procedure and policies Provide advice and recommendations on disciplinary actions Perform other related duties as required Requirements Minimal lulusan S1 Minimal pengalaman 1 tahunMengutamakan tinggal di Bandung, jika dari luar Bandung bisa pindah ke BandungMenguasai bahasa Inggris tingkat menengahSedang tidak bekerja freelancer, part time, full timeBoleh bekerja dari rumah maksimal 2x dalam seminggu dan sisanya akan bekerja pada kafe Starbucks (biaya kopi akan ditanggung perusahaan). Challenge Jawab beberapa pertanyaan berikut: Bagaimana langkah utama yang akan Anda lakukan apabila melihat perfomance kerja karyawan di bawah dari yang diharapkan perusahaan?Bagaimana cara Anda memastikan bahwa karyawan yang under perfomance bisa menjadi lebih baik lagi dalam 1-3 minggu ke depan?Bagaimana cara Anda mengatasi apabila ada karyawan yang mencuri dan memperjualbelikan informasi perusahaan secara ilegal? Kirim jawaban di atas melalui email di bawah. How to Apply Siapkan Resume (CV) & jawaban test pada body emailIsi subject email dengan HRD 2023 BandungKirim lamaran ke email [email protected] Lowongan dibuka pada tanggal 2 Januari 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWith Angga, stay tuned.

Kelas 3 Pertanyaan Penting Dari Klien Freelancer Yang Perlu Kita Jawab di BuildWith Angga

3 Pertanyaan Penting Dari Klien Freelancer Yang Perlu Kita Jawab

Sebagai Freelancer maka kita akan sering masuk pada tahap Interview di mana klien akan menjelaskan sebuah projek yang akan kita kerjakan kedepannya, setelah mereka menjelaskan biasanya kita akan ditanya ketiga pertanyaan penting berikut. 1) Berapa biayanya? Jika mendapatkan pertanyaan seperti ini sebaiknya tidak perlu kita jawab saat itu juga, mereka juga akan memberikan waktu 2-5 hari untuk kita berpikir terlebih dahulu sebelum menjawab, namun masih banyak Freelancer pemula yang langsung menjawab sehingga nantinya ternyata salah budget dan kita juga yang sengsara. Pada kondisi ini lebih baik ambil 1-2 hari untuk memahami brief projek dan rencana kita kedepannya akan mengerjakan seperti apa, apakah kita akan hire orang lain untuk bantu selesaikan projek? apakah kita bisa menyelesaikan dalam waktu yang telah ditentukan klien? semua hal tersebut perlu dipikirkan matang-matang. 2) Bisa langsung dikerjakan? Sebelum memulai bekerja baiknya kita meminta uang down payment dan juga kontrak kerja terlebih dahulu sehingga kita tidak akan dirugikan nantinya seiring projek berjalan, kerugian besar yang sering dirasakan oleh seorang pemula adalah revisi yang tidak terbatas. Oleh karena itu kita perlu menyusun kontrak projek yang tidak akan merugikan kedua belah pihak. Jangan langsung bekerja, terima uang DP dulu dan review kontrak projek yang telah kita susun atau diberikan oleh klien, simpan dengan baik-baik lalu bisa mulai bekerja. Oh ya sebagai tambahan kamu bisa menggunakan HelloBonsai untuk membuat kontrak projek. 3) Kenapa kamu cocok dengan projek ini? Sebenarnya ini adalah pertanyaan jebakan untuk melihat bagaimana cara kita menjual diri kita, faktanya banyak sekali Freelancer pemula yang sembarang jawab misalnya ‘karena butuh duit’, ‘karena saya suka design’, dan juga sebagainya. Pada pertanyaan ini klien berharap kita adalah orang yang bisa diandalkan untuk menyelesaikan projek tersebut, jadi mereka memang butuh memastikan saja sekali lagi. Kita bisa menjawab dengan template berikut: Saya NamaKamu, pernah mengerjakan projek yang serupa bersama dengan NamaTemanKamu. Saya mengerjakan bagian penting yaitu adalah NamaTaskKamu dan memastikan sehingga GoalProjectKamu, oleh karena itu Saya cukup percaya diri untuk mengerjakan projek ini. Terima kasih. Berikut adalah template yang bisa kamu gunakan untuk menjawab pertanyaan menjebak tersebut, kamu juga bisa modifikasi kembali sehingga bisa lebih menarik ya.

Kelas Free Workshop Offline Program: BuildWith Angga Goes to Campus di BuildWith Angga

Free Workshop Offline Program: BuildWith Angga Goes to Campus

Introduction BuildWith Angga adalah sebuah perusahaan edukasi yang menyediakan materi high income skills seperti UI/UX design, Website Development, Mobile App Development, Digital Marketing, Product Management, Copywriting, dan lainnya. Goals BuildWith Angga dan para mentor berpengalaman ingin membagikan ilmu dan pengalaman kepada mahasiswa yang ingin mengenal lebih jauh dunia design dan IT yang terbaru dan dibutuhkan oleh perusahaan di seluruh dunia. Sehingga nantinya ketika para mahasiswa tersebut lulus dari kuliah maka mereka bisa beradaptasi dengan cepat dan tidak adanya gap besar antara apa yang telah mereka pelajari di kampus dengan apa yang dibutuhkan di dunia nyata. Program BuildWith Angga dan kampus Anda dapat bekerja sama untuk mengadakan sebuah workshop secara offline selama 1 atau maksimal 3 hari yang akan dibawakan langsung oleh mentor expert yang disediakan oleh BuildWith Angga secara gratis. BuildWith Angga akan membiayai penginapan, makan, transport, biaya mentor, dan kebutuhan mentor lainnya sehingga pihak kampus Anda hanya perlu fokus pada penyelenggaraan acara. Topic Anda dapat memilih salah satu topik di bawah yang akan dijadikan sebagai materi utama pada workshop offline di kampus Anda nantinya: User Interface DesignUser Experience DesignMobile/Website Front-EndBack-End DevelopmentUX WritingProduct ManagementDigital Marketing How to Request Pastikan Anda seseorang yang memiliki kuasa untuk mengadakan sebuah acara workshop offline di kampus AndaPilih salah satu topik di atas dan Anda juga boleh menjelaskan lebih detail terkait materi dari topik tersebut nantinya yang kampus Anda harapkanPastikan peserta workshop minimal 30 orang dan maksimal adalah 50 orangBuatlah proposal beserta rundown acara workshop nantinya dan atur tanggal minimal 1 bulan sebelum permintaan acara dikirim ke pihak BuildWith AnggaKirim proposal ke email [email protected] dengan subjek ‘BWA Goes to campusName’DM ke Instagram BuildWith Angga untuk mendapatkan follow up Additional Note Dikarenakan permintaan workshop yang tinggi maka demi menghemat waktu kami, kami menghindari terlalu banyak permintaan meeting terkait acara, jadi, alangkah baiknya apabila pihak kampus sudah menyiapkan rundown acara yang di dalamnya sudah diisi oleh salah satu topik workshop di atasPihak kampus akan kami berikan kontak mentor setelah rundown acara tersebut kami approve untuk dijalankan pada tanggal yang telah ditentukanDalam satu tahun kampus hanya boleh request sebanyak maksimal 3 kali yang dijeda minimal 1 bulan dari acara workshop BWA pada kampus tersebut sebelumnya

Kelas 10 Website Recomendasi Untuk Mencari Pekerjaan Copywriter di BuildWith Angga

10 Website Recomendasi Untuk Mencari Pekerjaan Copywriter

Hello People With The Spirit Of Learning! Menjelang akhir tahun 2022 menuju 2023 ini, kebutuhan akan SDM copywriter kian meningkat. Terlebih dalam hal konten marketing. Menurut penelitian oleh Content Marketing Institute, lebih dari 90% bisnis saat ini memproduksi konten khusus untuk meningkatkan penjualan serta 60% menyatakan bahwa mereka (para pebisnis) berencana untuk meningkatkan anggaran mereka untuk fokus memproduksi konten marketing dalam bentuk artikel online, forum/sosial media, email marketer campaign, dan banyak lagi. Berdasarkan penyataan dari survey diatas, terbukti bahwa konten diperlukan disemua sektor industri, seperti sektor finance, e-commerce, dan lainnya. Copywriting merupakan elemen penting dalam memasarkan bisnis secara efektif. Untuk dapat melihat peluang terkait perusahaan/perorangan yang sedang membutuhkan role copywriter, berikut ini kami rangkumkan 10 Website Remote Job Copywriter rekomendasi BuildWith Angga. 1) Weworkremotely WeWorkRemotely adalah marketplace remote job. Website ini membantu orang-orang yang ingin bekerja secara remote part-time maupun full-time. Sekitar 3 juta orang menggunakan situs ini untuk mencari pekerjaan setiap bulan. Beberapa kategori pekerjaan teratas di website ini termasuk skill copywriting, design, pemrograman, dan manajemen. Situs web ini memiliki posisi dari beberapa perusahaan terkemuka seperti Google dan Amazon. 2) Remotive Remotive adalah platform remote job board dimana pemberi job (company/client) dapat memposting dan mengelola opportunity remote job. Dengan Remotive, pemberi job (company/client) dapat memposting pekerjaan berdasarkan wilayah dan menyiapkan profil perusahaan untuk menampilkan brand perusahaan mereka. 3) Upwork Upwork merupakan platform kerja remote yang menghubungkan klien dengan pekerja freelance dari seluruh dunia. Sama seperti platform kerja lainnya, disini juga terdapat banyak posisi untuk masing-masing role pekerjaan seperti copywriter, web developer, web designer, dan lainnya. Pada platform ini, client dapat memposting jasa apa yang sedang mereka butuhkan dan juga freelancer dapat memposting CV maupun introduction video terkait jasa yang mereka tawarkan. Benefit : Terdapat fitur yang menampilkan reputasi client yang ingin membayar freelancer dengan harga yang kompetitif.Terdapat fitur payment protection untuk client dan freelancerTerdapat banyak metode pembayaran untuk bertransaksi 4) Fiverr Fiverr memiliki cara kerja yang hampir sama dengan Upwork. Freelancer dapat membuat profil gratis yang mencantumkan jasa yang mereka tawarkan tanpa mengirimkan proposal melamar kerja. Seingga client dapat langsung membeli jasa yang mereka tawarkan sesuai dengan kebutuhan. Benefit : Memiliki banyak jasa yang ditawarkanMenyediakan course online untuk membantu freelancer dalam mempelajari hardskill yang diinginkan 5) PeoplePerHour PeoplePerHour menghubungkan client dengan freelance dengan memberi perekrut akses gratis ke profil dan portofolio freelance. PeoplePerHour tidak melayani industri tertentu, tetapi mereka memiliki komunitas freelance yang terampil dalam segala hal. Freelancer dapat membuat akun dan profil secara gratis. Setelah profil dibuat, maka dapat ditambahkan ke dalam list yang dapat dijelajahi oleh perekrut untuk kualifikasi, riwayat kerja, dan portofolio. Pada saat yang sama, freelancer dapat mencari pekerjaan berdasarkan proyek. 6) Linkedln LinkedIn merupakan situs social networking untuk para profesional, dan merupakan salah satu sumber daya karier paling terkemuka. Di situs tersebut, kita dapat membuat profil untuk showcase pengalaman, pendidikan, riwayat kerja, proyek sebelumnya, dan keterampilan untuk recruiter yang sedang mencari pegawai baru. LinkedIn bukan situs khusus untuk freelancer, namun menampilkan berbagai opportunity untuk pekerja profesional, job seeker, dan lainnya untuk menemukan pekerjaan baik itu remote maupun offline. Benefit : Dapat membantu untuk menjalin social networking dengan profesional dari berbagai industri.Dapat memudahkan untuk mengetahui informasi berita dan tren terkini tentang industri yang relevant dengan kita. 7) RemoteOK RemoteOK merupakan platform pencari remote job yang menyediakan list daftar pekerjaan. Kita dapat menggunakan filter untuk pekerjaan yang sesuai dengan keinginan kita, termasuk pekerjaan yang diposting oleh perekrut, berdasarkan tingkat pengalaman (junior, senior, dll.), berdasarkan jenis pekerjaan (copywriter, web developer, dll). 8) AngelList AngelList Talent menghubungkan freelancer dan job seekers lainnya dengan berbagai posisi termasuk copywriter di perusahaan startup. Kita dapat mendaftar ke berbagai perusahaan startup yang sedang berkembang . Kita juga dapat membuat profil untuk showcase keahlian dan menunggu perusahaan tersebut untuk menghubungi kita. 9) Working Nomads Working Nomands adalah layanan buletin yang didedikasikan untuk pekerja digital yang sibuk. Saat mendaftar untuk buletin, Working Nomads akan mengirimkan daftar pekerjaan remote yang dikurasi langsung melalui newsletter/email. Kita dapat memilih email harian atau mingguan untuk dikirimkan. 10) ServiceScape ServiceScape platform freelance/remote yang berspesialisasi di bidang penulisan, seperti copywriting, translator, dan lainnya . Platform Ini membantu pekerja membuat dan menyajikan sampel tulisan lepas ke database besar klien potensial. Cara kerja platform ini yaitu dengan client menghubungi writers, bukan sebaliknya. Writer’s juga tidak menawarkan jasa atau mengirim proposal kepada client. Namun ketika sudah menerima job, kita diwajibkan membayar patform ini sebesar 50% dari total penghasilan kita. Benefit : Patokan harga yang dapat di custom sesuai kebutuhanDapat bekerja sesuai dengan jadwal yang telah kita atur 10 platform tersebut bisa kamu explorasi dan melihat opportunity yang tersedia. Semoga bermanfaat dan Terimakasih!🙌😉 Perfect Place To Begin Your Career Development BuildWith Angga.

Kelas Belajar Dari Elon Musk dan Nadiem Makarim Untuk Meningkatkan Karir di BuildWith Angga

Belajar Dari Elon Musk dan Nadiem Makarim Untuk Meningkatkan Karir

Elon Musk dikenal dengan cara berpikirnya yang hebat, selain itu juga ia dapat mengerjakan lebih dari satu hal-hal besar secara bersamaan. Pada acara kali ini Elon akan memberikan beberapa saran penting untuk kita bisa meningkatkan kualitas diri dari cara kita berpikir, bekerja, membangun sesuatu dan hal-hal bermanfaat lainnya. Intergenerational Dialogue for Our Emerging Future G20 Critical Thinking Berpikir kritis adalah hal yang perlu diajarkan kepada setiap orang sehingga mereka bisa menjadi lebih kreatif dalam memecahkan sebuah masalah, sebagai contohnya Elon Musk saat ini menjalankan misinya pada perusahaan Tesla untuk membuat dunia menjadi lebih baik lagi dalam segi transportasi dan juga energi (sustainable technology). Artificial Intelligence Setelah kita belajar berpikir kritis maka bisa kita lanjutkan untuk mulai mempelajari Aftificial Intellegence (A.I) untuk membantu manusia bekerja lebih cepat dan ringan. Robot yang diberikan kecerdasan buatan dapat membuat manusia memiliki waktu luang lebih banyak untuk mempelajari atau menikmati hidup lebih baik. Curiousity Selama kita hidup maka kita perlu memiliki rasa penasaran yang tinggi tentang dunia ini, bagaimana jika kita membuat A atau bagaimana caranya meningkatkan perfomance pada alat B. Tujuan utamanya adalah membuat kehidupan menjadi lebih baik, dengan seperti itu maka kita akan tertantang untuk belajar hal baru pada setiap harinya, ini adalah motivasi yang kuat. Kesimpulan Beberapa saran yang diberikan oleh Elon Musk pada video di atas adalah perspektif dari seorang yang memiliki expertise pada teknologi dan jika kamu mencintai teknologi, mungkin bisa mulai mengikuti beberapa saran dari Elon Musk.

Kelas 15-60 Juta Per Bulan Pekerjaan Dari Rumah Atau Cafe Favorit di BuildWith Angga

15-60 Juta Per Bulan Pekerjaan Dari Rumah Atau Cafe Favorit

Zaman sudah cukup canggih dan banyak sekali profesi baru yang telah hadir semenjak awal tahun 2018 di mana startup baru mulai bermunculan di dalam atau luar negeri Indonesia. Beberapa pekerjaan berikut juga bisa dikerjakan dari mana saja tanpa harus datang ke kantor pada setiap harinya, biasanya pekerjaan ini disebut dengan remote job. Saya pribadi semenjak tahun 2017 sudah mulai bekerja dari mana saja dan bekerja dengan beberapa perusahaan dari luar seperti Malaysia, China, Canada, USA, Japan, dan negara-negara lainnya. Manfaat utama bekejra dengan perusahaan dari luar Indonesia adalah memberikan kita penghasilan yang lebih besar dibandingkan bekerja di startup atau perusahaan dalam negeri. Copywriter Saat ini perusahaan mempromosikan jasa atau produk mereka melalui sosial media seperti TikTok, Instagram, YouTube, atau platform lainnya. Peran copywriter sangat penting untuk memikat hati calon customer yang akan menggunakan jasa atau produk dari perusahaan tersebut. Pada dasarnya perusahaan tidak dapat berbicara langsung kepada calon customer selain melalui kata-kata, oleh karena itu copywriting yang ditulis wajib sesuai dengan apa yang dipromosikan dan menggunakan kalimat yang menarik untuk dipahami calon customer. UI/UX Designer Startup yang sudah mendapatkan investasi dari angel investor atau venture capital akan membutuhkan banyak sekali UI/UX Designer untuk merombak design yang mereka miliki sebelumnya. Tujuan utamanya adalah agar pengguna lebih mudah lagi ketika menggunakan aplikasi atau website dari perusahaan tersebut. Menggunakan software andalan seperti Figma, Principle, Dribbble, mereka dapat menciptakan sebuah design yang menarik dan sekaligus membantu pengguna untuk menyelesaikan masalah mereka pada setiap harinya seperti memesan ojek online atau membeli tiket pesawat. Software Engineer Tanpa adanya peran seorang software engineer maka design dan copywriting yang telah disediakan tidak akan digunakan dengan baik oleh pengguna atau calon customer. Software engineer membantu perusahaan untuk membangun aplikasi dan website yang nantinya digunakan oleh customer untuk membeli sebuah produk secara online. Anda dapat memulai karir software engineer ini dengan cara memahami bagaimana algoritma di dalam sebuah software itu bekerja, lalu bisa melanjutkan untuk mempelajari salah satu bahasa pemrograman yang menjadi rekomendasi Anda yaitu adalah Python. Kesimpulan Selama Internet masih berjalan dengan baik maka beberapa pekerjaan di atas akan terus tetap dibutuhkan dan kesempatan untuk mendapatkan gaji puluhan juta juga akan lebih banyak, saat ini keputusan ada pada diri kita masing-masing apakah kita ingin mulai belajar dari awal kembali atau menerima nasib yang sudah kita miliki saat ini. Jika Anda memiliki pertanyaan terkait ketiga karir di atas, maka Anda boleh kirim pesan via Instagram pribadi saya yaitu adalah BuildWith Angga. Terima kasih dan semoga bermanfaat ya.

Kelas 5 Prospek Karir Digital Menjanjikan! di BuildWith Angga

5 Prospek Karir Digital Menjanjikan!

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

Kelas Perbedaan Profesi Quality Control dan Quality Assurance di BuildWith Angga

Perbedaan Profesi Quality Control dan Quality Assurance

Hello, People With The Spirit Of Learning! Apa sih perbedaan dari Quality Control dengan Quality Assurance? Perbedaannya akan dijelaskan di dalam artikel di bawah ini, yuk dibaca dan disimak. Apa itu Quality Control Quality Control merupakan suatu profesi yang bertugas untuk mengecek, mengontrol dan memanajemen mutu kualitas dari suatu produk sesuai dengan persyaratan dari Perusahaan yang bertujuan untuk meminimalisir adanya cacat produk pada proses produksi suatu produk. Apa Jobdesk dari Quality Control Jobdesk dari Quality Control akan dijelaskan pada bagian di bawah ini 1.) Menganalisa spesifikasi dan persyaratan dari produk Analisa dari spesifikasi dan persyaratan dari produk dilakukan agar mengetahui spesifikasi dari produk serta batas penggunaan, kapasitas suatu produk dan perlakuan dalam penggunaan serta perawatan dari suatu produk. 2.) Melakukan cek kontrol mutu produk Cek kontrol dari mutu produk dilakukan dengan cara melakukan pengujian pada produk, dapat dengan mengecek mutu produk secara satu per satu dan dapat pula dilakukan dengan pengujian metode sampling produk yang dicek dan diuji berdasarkan sample produk. Cek kontrol mutu produk dilakukan dengan melakukan mengecek mutu produk secara manual yang dilakukan dengan melihat detail dan permukaan dari suatu produk serta menyesuaikan dengan persyaratan dari produknya dan dapat juga dilakukan dengan bantuan otomasi yaitu menguji produk menggunakan bantuan mesin seperti contohnya uji hardness atau kekerasan produk. 3.) Mendokumentasikan laporan hasil kontrol mutu produk Setelah melakukan pengujian dan cek kontrol mutu dari produk, hasil dari pengujian dan cek kontrol mutu produk tersebut dimasukkan ke dalam sertifikat uji atau laporan cek kontrol mutu dari produk yang selanjutnya dari sertifikat atau laporan tersebut dilaporkan kepada kepala pengawas bagian produksi. Apa itu Quality Assurance Quality assurance merupakan suatu profesi yang memastikan bahwa suatu kualitas produk software yang dihasilkan telah terjamin sesuai dengan requirement yang telah ditentukan. Apa Jobdesk dari Quality Assurance Jobdesk dari Quality Assurance akan dijelaskan pada bagian di bawah ini 1.) Melakukan Analisa Requirements Produk Software Analisa requirements produk software dilakukan dengan mengalisa dari product requirements documents yang telah dibuat oleh Project Manager dan Product Owner serta mendiskusikan mengenai requirements yang telah dibuat. Analisa ini dilakukan dengan tujuan agar SQA mengetahui requirements yang akan dilakukan dan yang akan diuji pada testing produk software. 2.) Melakukan Testing Produk Software Setelah analisa requirements dilakukan, hasil dari analisa tersebut dimasukkan ke dalam test script yang berupa test cases dan test scenario yang akan dilakukan pada testing produk software. Pada testing produk software dilakukan dengan dua metode, yang pertama menggunakan metode manual yakni dengan mengetes masing-masing fitur secara satu per satu yang terdapat pada produk software. Metode kedua yaitu merupakan metode automation, yakni melakukan testing produk software secara otomatis dengan menggunakan software seperti Katalon Studio dan Postman. 3.) Melakukan Analisa pada Hasil Testing Hasil dari testing produk software yang telah dilakukan dianalisa statusnya dan apabila berstatus “Failed” atau “Gagal” maka dilakukan analisa kembali dan dari kesalahan tersebut dikategorikan ke “Bug” atau “Error” beserta dengan prioritas dari kesalahan tersebut dengan kategori prioritas “High”, “Medium”, atau “Low”. 4.) Mendokumentasikan Hasil Testing yang Telah di Analisa Mendokumentasikan hasil testing yang telah dianalisa merupakan tahap final dari jobdesk Software Quality Assurance yang dilakukan dengan mendokumentasikan test cases dari testing produk software yang telah diuji dan dianalisa, yang selanjutnya dari hasil dokumentasi tersebut diserahkan ke Lead QA, yang kemudian dari Lead QA menyerahkan hasil testing kepada Project Manager yang selanjutnya dari Project Manager menyerahkan hasil testing kepada developer untuk ditinjau ulang dan diperbaiki kesalahan pada produk software. Kesimpulan Jadi berdasarkan penjelasan di atas ada yang berminat engga nih buat jadi Quality Assurance atau Quality Control untuk karir masa depanmu?? Ditambah lagi sektor IT dan industri sedang dalam perkembangan yang pesat, jadi baik Quality Assurance maupun Quality Control akan sangat diperlukan dalam menunjang perkemabangan sektor IT dan Industri. Saat kamu telah memutuskan untuk berkarir sebagai Quality Assurance maupun Quality Control, pastikan kamu selalu update dengan ilmu terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Kelas Mengenal Profesi Software Quality Assurance : 101 SQA di BuildWith Angga

Mengenal Profesi Software Quality Assurance : 101 SQA

Hello, People With The Spirit Of Learning! Apa sih profesi Software Quality Assurance itu? Profesi Software Quality Assurance akan dijelaskan di dalam artikel di bawah ini, yuk dibaca dan disimak. Apa itu Profesi Software Quality Asssurance Software Quality Assurance (SQA) merupakan suatu proses yang berlangsung secara continue dalam memastikan bahwa suatu produk software yang dihasilkan telah sesuai dengan requirement yang telah ditentukan. Apa Jobdesk dari Software Quality Assurance Jobdesk dari Software Quality Assurance akan dijelaskan pada bagian di bawah ini 1.) Melakukan Analisa Requirements Produk Software Analisa requirements produk software dilakukan dengan mengalisa dari product requirements documents yang telah dibuat oleh Project Manager dan Product Owner serta mendiskusikan mengenai requirements yang telah dibuat. Analisa ini dilakukan dengan tujuan agar SQA mengetahui requirements yang akan dilakukan dan yang akan diuji pada testing produk software. 2.) Melakukan Testing Produk Software Setelah analisa requirements dilakukan, hasil dari analisa tersebut dimasukkan ke dalam test script yang berupa test cases dan test scenario yang akan dilakukan pada testing produk software. Pada testing produk software dilakukan dengan dua metode, yang pertama menggunakan metode manual yakni dengan mengetes masing-masing fitur secara satu per satu yang terdapat pada produk software. Metode kedua yaitu merupakan metode automation, yakni melakukan testing produk software secara otomatis dengan menggunakan software seperti Katalon Studio dan Postman. 3.) Melakukan Analisa pada Hasil Testing Hasil dari testing produk software yang telah dilakukan dianalisa statusnya dan apabila berstatus “Failed” atau “Gagal” maka dilakukan analisa kembali dan dari kesalahan tersebut dikategorikan ke “Bug” atau “Error” beserta dengan prioritas dari kesalahan tersebut dengan kategori prioritas “High”, “Medium”, atau “Low”. 4.) Mendokumentasikan Hasil Testing yang Telah di Analisa Mendokumentasikan hasil testing yang telah dianalisa merupakan tahap final dari jobdesk Software Quality Assurance yang dilakukan dengan mendokumentasikan test cases dari testing produk software yang telah diuji dan dianalisa, yang selanjutnya dari hasil dokumentasi tersebut diserahkan ke Lead QA, yang kemudian dari Lead QA menyerahkan hasil testing kepada Project Manager yang selanjutnya dari Project Manager menyerahkan hasil testing kepada developer untuk ditinjau ulang dan diperbaiki kesalahan pada produk software. Software yang Sering Digunakan oleh Software Quality Assurance Software yang sering digunakan oleh SQA yaitu 1.) Jira Tampilan Scrum Board pada JiraSumber : https://www.atlassian.com/software/jira/features Jira biasanya digunakan oleh Software Quality Assurance dalam melakukan analisis dan mengatur project serta mendokumentasikan hasil dari testing produk software. 2.) Notion Tampilan Roadmap pada NotionSumber : https://www.notion.so/ Notion biasanya digunakan oleh Software Quality Assurance dalam melakukan analisis dan mengatur project serta mendokumentasikan hasil dari testing produk software. 3.) Katalon Studio Tampilan Software Katalon StudioSumber : https://katalon.com/ Katalon Studio biasanya digunakan oleh Software Quality Assurance dalam melakukan automation testing pada produk software. 4.) Postman Tampilan API PostmanSumber : https://www.postman.com/ Postman biasanya digunakan oleh Software Quality Assurance dalam melakukan automation testing pada produk software. Kesimpulan Jadi berdasarkan penjelasan di atas ada yang berminat engga nih buat jadi Software Quality Assurance??? Tentu saja selain melakukan jobdesk yang telah disebutkan diatas, yang tidak kalah penting adalah komitmen dan sikap mampu bekerja dalam tim. Saat kamu telah memutuskan untuk berkarir sebagai Software Quality Assurance, pastikan kamu selalu update dengan ilmu terbaru ya! karena teknologi akan terus berkembang. Terimakasih telah membaca, semoga bermanfaat 😉🙌

Kelas Berkenalan Dengan Karir UI Engineer: Tools, Skills, dan Prospek Kerja di BuildWith Angga

Berkenalan Dengan Karir UI Engineer: Tools, Skills, dan Prospek Kerja

Jika karir UI/UX designer memiliki tugas utama dalam mendesain sebuah website atau aplikasi mobile maka UI engineer yang akan melanjutkan tugas tersebut dengan cara mengubah tampilan design menjadi barisan koding sehingga dapat digunakan secara online oleh masyarakat nantinya. UI Engineer berfokus membawa design kepada tahap development sebelum dikerjakan oleh tim Front-End Developer dan Back-End Developer. UI Engineer perlu berhati-hati dan juga teliti sehingga design yang telah diimplementasikan kepada tahap development sudah sesuai setidaknya 98% dari apa yang telah dikerjakan oleh UI/UX designer sebelumnya. Tools Yang Digunakan UI Engineer Sebelum Figma popular seperti saat ini, dulu UI engineer dan designer menggunakan software seperti Zeplin atau InvisionApp sehingga mereka dapat melakukan proses inspection pada design projek tersebut seperti melihat kode warna, typography, layout, margins, paddings, dan juga sebagainya. Namun saat ini proses design handoff dapat dilakukan oleh UI engineer hanya menggunakan Figma saja, jadi tidak perlu pindah ke software lain. UI engineer akan mulai melakukan slicing dan exporting dari asset-asset yang dibutuhkan seperti Icon, Photo, Illustration, yang digunakan pada projek website tersebut. Untuk Jadi UI Engineer Butuh Skills Apa Saja? Kita bisa berkarir dan fokus pada website atau mobile, jika saat ini kita lebih memilih website maka kita bisa mulai belajar HTML, CSS, dan juga JavaScript. Tugas kita menggunakan HTML dan CSS untuk membangun struktur layout website yang sempurna yang sesuai dari design yang telah dikerjakan oleh designer. UI Engineer juga perlu melatih critical thinking sehingga nanti mereka juga bisa peduli pada perfomance website tersebut, karena pengguna website akan frustasi apabila website yang digunakan membutuhkan waktu yang lama untuk proses loading, so, yes, pelajari juga ya ilmu meningkatkan perfomance website. Prospek Kerjaan UI Engineer Bagaimana? Well, di zaman yang serba digital saat ini sudah banyak perusahaan yang mulai membangun website pribadi mereka untuk dijadikan company profile, jual beli jasa atau produk, dan bahkan hal lainnya yang bisa menguntungkan customer dan perusahaan. Pekerjaan kita sebagai UI Engineer tentunya sangat dibutuhkan untuk membantu perusahaan dalam menjual produk mereka via website, dan kita bisa memperdalam skills website optimization dalam membangun website yang baik.

Kelas Lowongan Freelancer Front-End Vue JS Developer 2023 di BuildWith Angga

Lowongan Freelancer Front-End Vue JS Developer 2023

Goals Bekerja sama dengan backend developer, quality assurance, dan UI designer dalam proses imeplementasi fitur terbaru pada website buildwithangga.com. Saat ini BuildWith Angga sedang fokus membangun Notification module untuk forum belajar (real-time). Requirements Menggunakan Vue JS 3Terbiasa menggunakan Laravel MixTerbiasa integrasi REST APIBersedia mengerjakan projek 3-6 jam sehariTingkat skills minimal Intermediate How to apply Persiapkan CV dan portfolio terbaik kamu misalnya link github atau personal websiteJelaskan cara kamu bekerja biasanya pada body emailKirim lamaran ke [email protected] dengan judul Vue JS Freelancer 2023 Silahkan apply dan jika tidak keberatan boleh bagikan lowongan ini kepada rekan terdekat yang sekiranya membutuhkan, terima kasih, sukses selalu.

Kelas Alasan Utama Menggunakan Webflow: Bikin Website Tanpa Koding di BuildWith Angga

Alasan Utama Menggunakan Webflow: Bikin Website Tanpa Koding

Memiliki website dapat memberikan manfaat yang besar dan banyak, beberapa di antaranya adalah dapat meningkatkan bisnis yang kita miliki dalam menjangkau lebih banyak customer secara online, seluruh dunia dengan cepat dan murah. Untuk membangun website kita membutuhkan keahlian koding seperti HTML, CSS, JavaScript, dan juga PHP. Well, pada kali ini kita akan berkenalan dengan Webflow untuk membantu kita dalam membangun website tanpa harus menggunakan koding. 1) Tidak Perlu Install, Daftar dan Mulai Bikin Website Yes, alasan utamanya adalah tidak perlu diribetkan dengan download dan install software terlebih dahulu. Kita hanya perlu mengunjungi website Webflow dan daftar menggunakan email atau akun google yang sudah kita miliki saat ini. 2) Tersedia Ratusan Template, Jadi Lebih Cepat Apabila kita tidak punya bakat design namun ingin memiliki website yang menarik, cantik, dan memiliki user experience yang baik maka kita bisa menggunakan template yang telah disediakan oleh profressional developer dan designer pada website Webflow. 3) Gratis, Bahkan Untuk Projek Komersil Untuk kamu yang belum punya kartu kredit atau budget untuk membangun website dari klien maka bisa menggunakan Webflow secara gratis, ya walaupun hanya untuk 1 projek saja tapi sudah lumayan banget sih, nanti hasil uang dari klien bisa kita pake untuk langganan premium. 4) Bikin Website Lalu Deploy Tidak perlu memikirkan biaya server atau cara membeli server karena pada Webflow kita bisa melakukan deployment dengan mudah sehingga projek website yang kita bangun dapat diakses secara online oleh jutaan orang dari seluruh dunia, kamu perlu cobain nih. 5) Banyak Resource Untuk Belajar Webflow Karena popularitas Webflow yang cukup tinggi maka di luar sana juga banyak yang menyediakan kelas atau tutorial untuk mempelajari Webflow, salah satunya adalah website BuildWith Angga yang didirikan oleh mentor-mentor professional dari Indonesia.

Kelas Cara Berkarir Front-End Developer Tanpa Harus Kuliah di BuildWith Angga

Cara Berkarir Front-End Developer Tanpa Harus Kuliah

Pekerjaan Front-End Developer dapat dikatakan memiliki jenjang karir yang panjang dan sangat dibutuhkan, selain itu juga gaji yang ditawarkan untuk fresh graduate juga tergolong besar, dimulai dari 5-10 juta per bulannya, siapa yang tidak mau? hehehe. Banyak yang dari kita berpikir bahwa untuk jadi Front-End Developer harus kuliah dulu dengan jurusan sistem informasi atau teknik informatika, well, faktanya apabila kita belum punya biaya kuliah maka bisa menggunakan beberapa langkah berikut. Cara Berkarir Front-End Developer Tanpa Harus Kuliah 1) Pelajari Karir HandBook Karir HandBook adalah panduan lengkap dan resmi yang dibuat oleh BuildWith Angga, pada handbook tersebut kita bisa mengenal cara menjadi Front-End Developer serta tanggungjawab utamanya sehingga langkah awal kita menjadi lebih mudah lagi tanpa harus membuang waktu browsing sana sini. 2) Ikuti Alur Belajar BuildWith Angga BuildWith Angga saat ini menyediakan banyak sekali alur belajar untuk pekerjaan IT yang bergaji tinggi, salah satunya yaitu adalah Front-End Developer yang bisa kita pelajari saat ini juga. Pada alur belajar tersebut tersedia banyak kelas gratis yang bisa kita pelajari untuk membangun fundamental skills sebagai Front-End Developer. 3) Bangun Sebuah Mini Project Ketika mempelajari fundamental skills seperti HTML, CSS, dan JavaScript. Selanjutnya kita bisa membuat projek pertama kita misalnya landing page untuk jualan baju atau sepatu, atau bahkan website untuk cari penginapan secara online. Mini projek dapat membantu kita untuk mendapatkan pekerjaan karena perusahaan bukan hanya bertanya kita bisa skills apa saja, akan tetapi portfolio juga dibutuhkan untuk memvalidasi apakah kita sudah bisa dikatakan sebagai Front-End Developer. Ketika membangun Mini Project kita bisa mengenal beberapa tools Front-End Developer seperti Bootstrap CSS, Visual Studio Code, Postman API, Netlify, dan tools bagus lainnya. Untuk Kamu Yang Ingin Berkarir di Bidang IT Jangan menyerah apabila belum memiliki dana kuliah karena kamu bisa memulai dengan gratis dan bekerja untuk 1-2 tahun sebagai Front-End Developer lalu menabung dan melanjutkan kuliah jika dirasa dibutuhkan saat itu, tetap semangat ya.

Kelas Lowongan Magang Dibayar Bulanan: UI Engineer Website Design di BuildWith Angga

Lowongan Magang Dibayar Bulanan: UI Engineer Website Design

Goals Bekerja sama dengan UI Designer, Backend Developer, dan Copywriter untuk mengubah tampilan design dari Figma ke HTML CSS menggunakan framework Bootstrap di dalam sebuah Laravel Blade yang nantikan akan dibantu oleh Backend Developer. Responsibilities Melakukan Slicing design di Figma ke HTML CSSBelajar meningkatkan perfomance client-side website Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahTerbiasa menggunakan framework BootstrapSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (SMK/kuliah) boleh apply magangSudah mengikuti minimal 1 kelas Premium (untuk memastikan bahwa kamu telah terbiasa menggunakan fitur-fitur di website BWA). Benefits Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang gaji atau saku bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Download projek Figma pada link berikut https://shaynakit.com/details/landing-page-of-building-leasesImport pada projek Figma kamuSlicing ke kodingan HTML dan CSS menggunakan framework BootstrapUpload ke Netlify dan kirimkan link projek melalui e-mail How to Apply Siapkan Resume (CV) & Hasil test (berupa link Netlify public ) dengan rapihIsi subject email dengan Magang UI Engineer 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 16 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, pantau terus Instagram BuildWith Angga untuk informasi terbaru terkait magang. Terima kasih. Lowongan sudah ditutup karena sudah terisi oleh 2 pemagang, terima kasih.

Kelas 5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design di BuildWith Angga

5 Hal Penting Perlu Dipelajari Sebelum Lanjut Belajar UI Design

UI Design adalah sebuah tampilan yang sering kita lihat pada aplikasi mobile misalnya aplikasi gojek, ovo, dana, tokopedia, netflix, dan aplikasi lainnya. Tugas kita sebagai UI Designer bekerja sama dengan developer dan UX designer untuk merancang aplikasi tersebut menjadi lebih menarik ketika digunakan oleh pengguna. Sebelum kita berkarir sebagai UI designer maka ada beberapa hal utama yang perlu kita pelajari sehingga hasil design yang kita buat nanti juga memberikan kualitas yang tinggi, terlebih lagi apabila kamu saat ini belum punya background design. Mulai Dari Belajar Graphic Designer Saya mengawali karir sebagai Graphic Designer untuk memperkuat beberapa komponen design seperti color, grid, layout, typography, dan lainnya. Maka dari itu kamu juga bisa memulainya dengan mempelajari komponen-komponen pada graphic design untuk membuat sebuah design guideline pada perusahaan tempat kamu bekerja nantinya. Mempelajari Color Combination Color memiliki peran penting pada sebuah design aplikasi, setiap aplikasi memiliki tujuan dan vision yang berbeda-beda maka dari itu mereka menggunakan warna yang berbeda, misalnya aplikasi keuangan menggunakan warna biru yang memiliki arti kepercayaan dengan loyalitas yang sangat tinggi. Mulai Belajar Typography Pengguna website atau aplikasi seperti diri kita, orang tua, dan saudara tentunya membaca beberapa informasi yang disajikan pada aplikasi tersebut, misalnya ingin membeli makanan martabak maka kita akan cari item yang berjudul martabak pada app tersebut. Oleh karena itu kita perlu mempelajari typography sebagai pondasi utama UI designer sehingga kita bisa memilih jenis font yang sesuai dengan tema aplikasi yang kita design ke depannya, beda tema maka beda jenis font. Belajar Tata Letak (Layout) Setelah kita mempelajari color dan typography maka kita bisa masuk kepada layout yang di mana kita akan belajar menata judul, harga, foto produk, dan lainnya pada posisi yang benar. Kita juga bisa mulai mengenal istilah-istilah UX sehingga melakukan proses layouting menjadi lebih mudah untuk menciptakan aplikasi dan website yang menarik dan mudah digunakan. Membuat MoodBoard Design Kita butuh sebuah moodboard yang berisi inspirasi-inspirasi design yang akan kita gunakan sebagai benchmark dari design aplikasi kita nantinya, oleh karena itu kita perlu belajar memilih referensi yang tepat, tidak harus banyak tidak juga sedikit, intinya cukup dari segi warna, illustration, layout, dan interaction (animation). Kita bisa menggunakan beberapa software design gratis seperti Figma, Miro, Dribbble, Adobe XD, dan software lainnya untuk mulai pembuatan moodboard dan melakukan pembelajaran utama kita sebagai UI designer.