flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Program Mentor Affiliate: Hasilkan Ratusan Juta Rupiah Dari Rumah di BuildWithAngga

Program Mentor Affiliate: Hasilkan Ratusan Juta Rupiah Dari Rumah

Goals Mengajak seseorang yang kamu kenal untuk sharing ilmu dan pengalaman di bidang UI UX dan graphic design, web development, software development, data science, atau bidang lainnya untuk dibagikan kepada student di BuildWithAngga. Mari kita bekerja sama menyediakan konten edukasi terbaru untuk membantu masyarakat Indonesia bersaing dengan negara lainnya, terutama di bidang IT. Catatan Siapa saja boleh jadi affiliator tanpa harus dari background ITHasilkan hadiah sebanyak Rp 5.000.000 dari setiap kelasnyaJika 10 mentor yang berhasil kamu ajak telah membuat 10 kelas, maka jika ditotalkan kamu bisa menghasilkan hadiah sekitar Rp 500.000.000Sebagai affiliator kamu boleh mengajak lebih dari 1 mentor, semakin banyak mentor diajak semakin besar kesempatan hadiah yang diterimaMentor tidak bisa menjadi seorang affiliator namun affiliator bisa jadi seorang mentor (dengan catatan program affiliatenya akan dibatalkan) Cara memulai program Daftarkan diri kamu pada Google Form berikut joinbwa.com/smapPahami cara kerja program affiliate mentor pada Pitch Deck: Mentor Affiliate ProgramBaca Pitch Deck Menjadi Mentor BWA terlebih dahulu setelah itu mulai mengajak mentor mengajar di BuildWithAngga Jika kamu memiliki pertanyaan program berikut boleh menghubungi via DM Instagram BuildWithAngga, let's grow together everyone.

Kelas Tutorial Fundamental Python: Belajar Operator Aritmetika di BuildWithAngga

Tutorial Fundamental Python: Belajar Operator Aritmetika

Operator aritmetika pada bahasa pemrograman python dapat membantu programmer dalam membangun website dan mobile app yang memiliki fitur untuk menghitung penjualan sebuah bisnis dengan data yang lebih kompleks dan akurat. Seperti matematika pada umumnya Beberapa hal yang dapat kita lakukan dengan operator aritmetika adalah seperti penambahan, pengurangan, perkalian, pembagian, dan lain-lainnya pada sebuah data integer atau pun float number di python. Mari kita coba latihan sedikit dengan memahami kodingan python di bawah: # membuat variable integer Umur dengan value 26 tahun umur = 26 # membuat variable batasan umur kita hidup misalnya 126 tahun batas_umur = 126 # membuat variable sisa umur yang kita miliki # menggunakan - sebagai operator aritmetika pengurangan sisa_umur = batas_umur - umur # cetak sisa umur yang kita miliki print(sisa_umur) Kodingan python di atas contoh sederhana melakukan pengurangan pada sebuah aplikasi pemeriksaan umur manusia, sekarang kita coba untuk menggunakan tipe data float. angka1 = 3.14 angka2 = 22.5 total = angka1 + angka2 print(total) Mengatur program menghitung yang mana dulu Pada operator aritmetika di python, kita dapat mengatur program untuk menghitung angka yang mana dulu sehingga sesuai dengan kebutuhan bisnis kita, caranya mudah hanya perlu menambahkan tanda kurung awal dan akhir, contohnya sebagai berikut: # variable mengatur data total belanja, pajak, dan ongkir total_belanja = 350000 pajak = 23 # 23 persen # kita hitung pajaknya berapa, dan di sini kita bagi dengan 100 # lalu kita kalikan dengan 23 # menggunakan (...) membungkus bagian mana yang perlu dihitung pajak = (total_belanja / 100) * 23 # cetak pajak perlu dibayar print(pajak) Bikin kodingan jadi lebih ringkas Di python, kita dapat menjumlahkan sebuah angka awal dengan angka terbaru menggunakan kodingan yang lebih ringkas, agar mudah dipahami mari kita coba dengan contoh: # atur variable score awal kita sebelum bermain score = 0 # atur variable penambahan score jika menang 1 round round_reward = 30 # sebagai contoh pengguna menang dan berhasil selesai satu round # di sini kita update nilai dari score kita score += round_reward # cetak hasil score saat ini print(score) Well, kodingan di atas kita menggunakan += untuk menjalankan perintah score di update dengan nilai score + round_reward yaitu menjadi 30, ketika menang satu round lagi maka akan di update kembali score-nya menjadi 60 dan begitu juga seterusnya. Begitulah contoh penggunaan operator aritmetika yang lebih simple.

Kelas Tutorial Fundamental Python: Tipe Data String di BuildWithAngga

Tutorial Fundamental Python: Tipe Data String

Tipe data string dapat membantu programmer dan developer dalam menyajikan informasi yang dibutuhkan oleh pengguna website atau mobile app, informasi tersebut contohnya adalah deskripsi produk, alamat rumah, dan nama tokonya. Setelah kita mempelajari tipe data Number atau Integer dan Boolean, maka wajib pelajari juga nih tipe data yang tidak kalah penting yaitu adalah String. Jika bekerja dengan tipe data Number maka kita tidak perlu menggunakan ‘ atau “, sedangkan String perlu dibungkus oleh kedua simbol tersebut atau biasa disebut dengan single quote dan double quote. # penulisan tipe data String yang benar # mendeklarasikan variable nama dengan value Angga nama = "Angga" gender = 'Male' status = "Billionaire" Kodingan di atas kita telah menggunakan single atau double quote pada tipe data String dan program tersebut berjalan lancar, namun apabila kita tidak menggunakan kedua simbol tersebut maka program akan error. String immutable, untuk mengubah value tentu ada caranya Value (String) yang telah dideklarasikan pada variable tidak dapat kita ubah namun masih bisa diatasi dengan cara membuat variable baru atau menggunakan operator aritmetika. Contoh kodingan python seperti berikut: # membuat varible supercar dengan tipe data string # membuat variable huruf pertama untuk akses karakter pertama supercar supercar = "Pagani Super" huruf_pertama = supercar[0] # mencetak karater yang telah diambil print(huruf_pertama) # hasilnya adalah P # sekarang kita coba ubah P menjadi X apakah bisa atau tidaknya supercar[0] = 'X' huruf_pertama = supercar[0] print(huruf_pertama) # hasilnya adalah error Kodingan python di atas tidak berhasil untuk mengubah value pada String tersebut karena memang pada faktanya adalah immutable, lalu solusinya bagaimana? # membuat varible supercar dengan tipe data string # membuat variable huruf pertama untuk akses karakter pertama supercar supercar = "Pagani Super" huruf_pertama = supercar[0] # mencetak karater yang telah diambil print(huruf_pertama) # hasilnya adalah P # membuat variable baru dengan nilai X ditambah agani Super # kodingan [1:] adalah proses slicing karakter pada python new_supercar = 'X' + supercar[1:] huruf_pertama = new_supercar[0] print(huruf_pertama) # hasilnya adalah X Kodingan di atas berhasil mengubah P menjadi X dikarenakan kita membuat variable tipe data String yang baru, memanfaatkan fitur slicing pada python sehingga kita bisa menghapus huruf P dan menghasilkan kalimat tersisa yaitu agani Super. String punya banyak built-in method Terkadang kita ingin menghitung jumlah karakter pada tipe data string tersebut, atau mungkin menjadikan value pada string tersebut menjadi huruf besar, maka kita bisa menggunakan beberapa built-in method yang telah disediakan oleh python pada tipe data string. # bikin variable nama lengkap seseorang nama_lengkap = "Angga Hazza Masayoshi" # cetak panjang karakter yang dimiliki oleh nama orang tersebut print(len(nama_lengkap)) Lalu kita akan coba menggunakan method upper dalam menjadikan value pada tipe data string menjadi huruf besar semua, contohnya sebagai berikut: # bikin variable nama lengkap seseorang nama_lengkap = "Angga Hazza Masayoshi" # cetak panjang karakter yang dimiliki oleh nama orang tersebut print(len(nama_lengkap)) # bikin variable baru nama lengkap dengan method upper upperCase = nama_lengkap.upper() # hasi cetakan maka nama tersebut berubah menjadi ANGGA HAZZA MASAYOSHI print(upperCase) Check kata tertentu pada tipe data String Sebagai programmer ada kalanya di mana kita perlu membuat sebuah fitur untuk memeriksa kata tertentu di dalam sebuah kalimat, beruntungnya kita menggunakan python karena hal ini sangat mudah dilakukan, begini contoh kodingannya: # bikin variable nama lengkap seseorang nama_lengkap = "Angga Hazza Masayoshi" # bikin kondisi untuk memeriksa apakah tamu yang datang adalah salah satu keluarga Hazza if 'Hazza' in nama_lengkap: print('silahkan masuk...') # jika bukan maka kita bilang bahwa ia tidak diundang else: print('kamu tidak diundang...') Kesimpulan menggunakan tipe data string Python benar-benar memudahkan programmer dalam membangun sistem yang baik untuk pengguna, semakin banyak kita belajar hal baru pada fundamental semakin banyak juga fitur yang dapat kita bangun ke depannya. Semangat terus belajarnya ya.

Kelas Apa itu Model pada Framework Laravel? di BuildWithAngga

Apa itu Model pada Framework Laravel?

Framework Laravel merupakan salah satu framework PHP yang populer dan banyak digunakan oleh para developer. Salah satu komponen utama dari framework Laravel adalah Model. Komponen ini merupakan bagian penting dari ORM (Object-Relational Mapping) Laravel. Pada artikel ini, kita akan membahas tentang Model pada framework Laravel dan beberapa fitur yang disediakan dalam Model. Apa itu Model pada Framework Laravel? Model merupakan salah satu komponen penting dalam pengembangan web menggunakan framework Laravel. Secara sederhana, Model merupakan representasi objek dalam database yang memungkinkan kita untuk berinteraksi dengan data pada database secara mudah dan efisien. Folder Models pada projek Laravel Model menjadi salah satu bagian penting dari konsep MVC (Model-View-Controller) pada framework Laravel yang bertanggung jawab untuk mengatur interaksi antara aplikasi dengan database. Dalam konsep MVC, Model dipadukan dengan Controller dan View untuk membentuk sebuah fitur atau halaman pada aplikasi Laravel kita. Model bertanggung jawab untuk memproses data dari database dan mengembalikan data tersebut ke Controller. Pada framework Laravel, Model menyediakan beberapa fitur yang diantaranya seperti berikut: Eloquent ORM (Object-Relational Mapping) Eloquent ORM merupakan fitur utama dalam Model yang memungkinkan kita untuk berinteraksi dengan database menggunakan objek yang mudah dimengerti dan mudah digunakan. Dengan Eloquent ORM, kita dapat melakukan operasi CRUD (Create Read Update Delete) pada database tanpa harus menuliskan query SQL secara manual. Contoh penerapan Eloquent ORM pada Model Relationship Fitur Relationship pada Model memungkinkan kita untuk menghubungkan antara dua atau lebih tabel yang terdapat pada database kita. Misalnya, jika kita memiliki tabel "users" dan tabel "usersubscription", kita dapat menggunakan fitur Relationship untuk membuat relasi antara kedua tabel tersebut. Contoh penerapan Relationship pada Model Soft Deleting Soft deleting merupakan fitur yang memungkinkan kita dapat menghapus data dari database secara "lembut" atau sementara. Dalam hal ini, data yang dihapus tidak benar-benar terhapus dari database, namun hanya ditandai sebagai "dihapus". Sehingga, kita dapat mengembalikan data yang dihapus jika dibutuhkan nantinya. Contoh penerapan Soft Deleting pada Model Kesimpulan Model sangat penting dalam pengembangan aplikasi Laravel kita. Dengan fitur-fitur seperti Eloquent ORM, Relationship, dan Soft Deleting, kita dapat melakukan pengaturan dan manipulasi data dengan mudah, melakukan validasi data secara otomatis, serta membuat atau menambahkan relasi antar tabel pada database. Hal ini mempermudah proses pengembangan dan meningkatkan efisiensi dalam pengelolaan data aplikasi Laravel kita.

Kelas Apa itu ReactJS dan NextJS ? di BuildWithAngga

Apa itu ReactJS dan NextJS ?

Pekerjaan frontend developer saat ini sangat populer di industri teknologi dan digital. Hal ini karena penggunaan internet dan teknologi semakin luas di berbagai sektor, termasuk dalam bisnis, pendidikan, dan hiburan. Frontend developer bertanggung jawab untuk mengembangkan tampilan dan interaksi pengguna di sebuah website atau aplikasi, sehingga menjadi tugas yang sangat penting dan krusial dalam pengembangan aplikasi web. Seiring dengan perkembangan teknologi dan tren desain web yang terus berkembang, tuntutan akan keterampilan frontend developer semakin tinggi. Dalam pengembangan website atau aplikasi, frontend developer harus memastikan bahwa tampilan dan interaksi pengguna yang dihasilkan terlihat menarik, mudah digunakan, dan responsif pada berbagai perangkat. Apa itu ReactJS dan NextJS ? JavaScript adalah salah satu bahasa pemrograman yang sangat penting dalam pengembangan website. Hal ini karena JavaScript memiliki kemampuan untuk mengubah tampilan dan interaksi pengguna pada website secara dinamis. Salah satu peran utama JavaScript dalam pengembangan website adalah untuk meningkatkan pengalaman pengguna. Dengan JavaScript, developer dapat membuat interaksi pengguna yang lebih menarik, responsif, dan intuitif. Selain itu, JavaScript juga dapat digunakan untuk meningkatkan kinerja website, seperti memuat konten dengan cepat dan mengurangi waktu loading. Mengenal Apa Itu Library pada Javascript Library JavaScript adalah kumpulan kode yang sudah dibuat sebelumnya dan dapat digunakan oleh developer untuk mempercepat dan memudahkan pengembangan aplikasi web.Salah satu keuntungan utama dalam menggunakan library JavaScript adalah kemudahan penggunaannya. Library JavaScript umumnya telah dibuat dengan cara yang mudah dipahami, sehingga developer dapat dengan mudah memahami dan menggunakannya dalam pengembangan aplikasi web mereka. Hal ini memungkinkan developer untuk lebih fokus pada pengembangan aplikasi daripada menghabiskan waktu untuk membuat kode dari awal. Berikut adalah beberapa library Javascript yang cukup populer: ReactVueAngular Apa Itu ReactJS ? Tampilan halaman website ReactJS Sesuai yang tertera pada halaman resmi website nya, ReactJS adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna pada aplikasi web. Library ini dikembangkan oleh Facebook dan sering digunakan dalam pengembangan aplikasi web yang kompleks dan interaktif. ReactJS memungkinkan developer untuk membangun aplikasi web yang responsif dan mudah dikelola, dengan memisahkan antarmuka pengguna dan logika bisnis ke dalam komponen-komponen yang dapat digunakan ulang. Apa itu NextJS ? Tampilan halaman website NextJS NextJS adalah sebuah framework yang dikembangkan oleh Vercel dan sering digunakan dalam pengembangan aplikasi web dengan ReactJS. Dengan fitur-fitur seperti pre-rendering dan server-side rendering, NextJS dapat meningkatkan performa website dan pengalaman pengguna. NextJS juga mendukung pengembangan aplikasi web dengan React Hooks, serta menyediakan fitur-fitur yang memudahkan pengembangan aplikasi web yang kompleks. Mengapa Menggunakan NextJS Jika Sudah Ada ReactJS ? Walaupun hanya dengan menggunakan ReactJS kamu sudah bisa membangun sebuah website namun terdapat alasan mengapa banyak developer memilih menggunakan framework NextJS dibandingkan ReactJS. Salah satu alasan adalah pada saat proses rendering website. Pada ReactJS proses rendering dilakukan pada user atau yang disebut sebagai client-side rendering yang artinya server hanya menyediakan file HTML, CSS, dan Javascript yang diperlukan untuk menampilkan website tersebut. Sedangkan NextJS memiliki fitur server-side rendering yang dimana proses memuat website dilakukan oleh server terlebih dahulu sebelum dikirim ke client atau user. Kelebihan menggunakan server-side rendering sendiri adalah meningkatan kecepatan saat proses pemuatan website. Selain terdapat perbedaan pada saat memuat halaman, NextJS juga memiliki kemampuan SEO yang lebih baik dibandingkan dengan ReactJS. SEO sendiri adalah singkatan dari Search Engine Optimization yang merupakan suatu proses untuk mengoptimalkan kemampuan website berada pada peringkat hasil pencarian pada search engine seperti Google. React sendiri tidak dirancang khusus untuk memiliki kemampuan SEO yang baik, sebab itu bisa dibilang NextJS memiliki kemampuan SEO yang lebih baik dikarenakan memang didesain khusus untuk mendapatkan kemampuan SEO yang lebih optimal. Kesimpulan Secara singkat, React dan NextJS adalah teknologi yang digunakan untuk membangun aplikasi web dengan menggunakan bahasa pemrograman JavaScript dan React. React digunakan untuk membangun UI pada aplikasi web, sedangkan NextJS adalah sebuah framework yang memudahkan pengembangan aplikasi web dengan React. Dengan menggunakan React dan NextJS, developer dapat membangun aplikasi web yang dinamis, responsif, dan dengan performa yang baik. Agar dapat menggunakan React dan NextJS kamu membutuhkan fundamental Javascript, untuk itu kamu dapat mengikuti kelas online gratis belajar Javascript. Setelah kamu memiliki fundamental yang cukup kamu dapat belajar membuat project ReactJS atau mempelajari basic dari NextJS.

Kelas Tutorial Fundamental Python: Apa itu Tipe Data? di BuildWithAngga

Tutorial Fundamental Python: Apa itu Tipe Data?

Programmer menggunakan python untuk membuat aplikasi yang mengelola jutaan data terkait bisnis atau individual. Pemilihan tipe data yang tepat dapat membuat program tersebut berjalan dengan sebagaimana mestinya, pada kali ini kita akan membasa apa itu tipe data pada bahasa pemrograman python, tentunya untuk pemula. Tutorial Fundamental Python: Apa dan Manfaat Tipe Data Pada aplikasi terdapat beraneka ragam informasi seperti nama, harga, alamat rumah, list rumah tersedia, dan juga lainnya biasa disebut dengan data. Data-data tersebut memiliki perbedaan, ada yang String, Integer, List, Float, dan lainnya. Istilah-istilah tersebut yang dinamakan tipe data. Jadi, tipe data adalah sebuah kategori dari value (data) yang kita olah di dalam bahasa pemrograman python, apabila kita ingin mengelola keuangan bapak Sutejo, maka tipe data yang digunakan kebanyakan adalah Integer dan Float, karena mereka semua adalah angka. Tipe data yang lebih dinamis Ketika menggunakan python maka kita tidak perlu mendeklarasikan tipe data apa yang kita gunakan pada variable tersebut, di dalam satu variable kita bisa memberikan tipe data yang berbeda-beda sehingga ini lebih dinamis dan memberikan kebebasan kepada programmer untuk mengelola data lebih ringkas dan cepat, contoh kodingannya sebagai berikut. # membuat variable dengan tipe data umur = 26 # 26 termasuk kepada tipe data Integer umur = 22.5 # 22.5 termasuk kepada tipe data Float umur = "Dua Tiga" # Dua Tiga termasuk kepada tipe data Float Apabila kamu lihat kodingan di atas maka dalam satu variable (umur) memiliki 3 tipe data yang berbeda-beda, sehingga programmer dapat memanipulasi informasi dengan cepat sesuai kebutuhan dari aplikasi pada projek tersebut. Setiap tipe data memiliki tujuan berbeda Sebagai programmer yang menggunakan python maka kita perlu teliti dalam menggunakan tipe data untuk membangun aplikasi, karena setiap tipe data memiliki fungsi dan tujuan yang berbeda-beda. Jika kita ingin mengoleksi informasi nama-nama pengguna maka tipe data yang digunakan adalah String lalu jika datanya berupa uang jajan pengguna maka tipe data yang digunakan adalah Integer atau bisa juga menggunakan Float. programmer menggunakan tipe data python Menggunakan tipe data Float dan Integer, kita dapat melakukan beberapa perintah operator aritmetika seperti pengurangan, pembagian, dan perkalian. Jika kita salah menggunakan tipe data, misalnya String, well, kita tidak dapat melakukan hal aritmetika tersebut. Jadi, memang perlu kita perhatikan ya dalam pemilihan tipe data. Kesimpulan yang perlu diketahui Dalam proses coding, kita tidak perlu terburu-buru sehingga salah memilih tipe data yang sesuai, karena hal tersebut dapat merugikan banyak pihak seperti pengguna, perusahaan, dan bahkan karir kita sendiri. Oleh karena itu pilihlah tipe data yang cocok dari informasi yang ingin kita olah, implementasikan juga clean code architecture sehingga mudah dipahami oleh teman programmer kamu pada perusahaan tersebut.

Kelas Tutorial Fundamental Python: Tipe Data Integer di BuildWithAngga

Tutorial Fundamental Python: Tipe Data Integer

Angka adalah data yang sering kita temui pada berbagai website atau aplikasi mobile seperti website toko online, kelas online, order food online, dan lainnya, terlebih lagi ketika kita bekerja sebagai data scientist. Tipe data integer pada python dapat membantu programmer untuk bekerja dengan angka seperti menambah, mengurang, mengkalikan, dan matematika lainnya. Tutorial Fundamental Python: Tipe Data Integer Tipe data integer digunakan untuk jumlah bilangan yang tidak memiliki koma (angka decimal) pada data tersebut misalnya 7 atau 8 atau 9, bukan 7,3 atau 8.1. Biasanya integer ini digunakan untuk memberikan informasi kepada pengguna terkait harga sepatu sebesar 180000 atau rumah yang bernominal 930000000. Kali ini kita akan coba praktek membuat sebuah informasi jumlah tabungan yang dimiliki oleh Satria Baja Hitam, let’s write some code. # membuat variable dengan tipe data string nama = 'Satria baja hitam' # membuat variable dengan tipe data integer tabungan = 190000000 # mencetak jumlah tabungan yang dimiliki oleh satria print(tabungan) Operator Aritmetika pada tipe data integer Kita dapat menggunakan beberapa operator Aritmetika seperti pertambahan, pengurangan, pembagian, dan sebagainya pada tipe data integer. Misalnya tadinya tabungan satria adalah 190000000 lalu diberikan bonus sebesar 398000000 maka jumlahnya berapa? # membuat variable dengan tipe data string nama = 'Satria baja hitam' # membuat variable dengan tipe data integer tabungan = 190000000 # memberikan bonus bonus = 398000000 # merubah nilai tabungan yang sudah ditambahkan bonus tabungan = tabungan + bonus # mencetak jumlah tabungan yang dimiliki oleh satria print(tabungan) Mengubah angka decimal menjadi integer Apabila kita bertemu dengan data yang nilainya tidak keseluruhan misalnya 3,14 atau 22,5 namun kita diwajibkan bekerja dengan data integer, maka data tersebut dapat kita convert menjadi integer, begini untuk kodingannya. # membuat variable dengan tipe data string nama = 'Satria baja hitam' # membuat variable dengan tipe data float memiliki decimal level_goodlooking = 33,2 # mengubah angka decimal menjadi keseluruhan convert = int(level_goodlooking) # mencetak angka sebelum dijadikan integer yaitu 33,5 print(level_goodlooking) # mencetak angka setelah dijadikan integer yaitu 33 print(convert) Sebenarnya tipe data string juga bisa kita ubah menjadi integer menggunakan built-int function seperti int() pada bahasa pemrograman python. Sehingga hal tersebut memudahkan para programmer untuk menghasilkan aplikasi yang baik bagi pengguna. Menggunakan underscore agar mudah dibaca Data-data integer yang kita miliki biasanya jumlahnya cukup besar sehingga memiliki jumlah karakter lebih dari 10 atau 15, untuk memudahkan programmer menyebut nominal pada angka tersebut kita bisa memecahnya menggunakan underscore (_), contoh kodingan python maka akan seperti di bawah ini. # membuat variable dengan tipe data string nama = 'Satria baja hitam' # membuat variable dengan tipe data integer tabungan = 190000000 # memberikan bonus (tanpa underscore) bonus = 398000000 # memberikan bonus (dengan underscore) bonus = 398_000_000 # merubah nilai tabungan yang sudah ditambahkan bonus tabungan = tabungan + bonus # mencetak jumlah tabungan yaitu 588000000 print(tabungan) Kesimpulan penggunaan tipe data integer Jangan takut apabila bertemu dengan angka karena jika kita tahu rumusnya dengan baik maka dapat kita olah dengan mudah dan sesuai kebutuhan dari projek tersebut, silahkan diolah kembali tipe data integer ini seperti membuat kasir sederhana dari menentukan harga sepatu sampai jumlah uang yang dimiliki oleh pembeli. Mini projek yang dibangun dapat digunakan sebagai portfolio kita sebagai website developer ke depannya nanti.

Kelas 5 Contoh Best Practice UI/UX Design Perlu Dipelajari di BuildWithAngga

5 Contoh Best Practice UI/UX Design Perlu Dipelajari

Kamu mungkin merupakan salah satu orang yang sedang atau tertarik menekuni bidang UI/UX design. Jika demikian, artikel ini adalah bacaan yang tepat untuk kamu yang ingin belajar lebih mendalam mengenai best practice UI/UX design. Sebelumnya mari kita berkenalan dengan UI/UX design. Apa sebenarnya UI/UX design itu? 5 Contoh Best Practice UI/UX Design Perlu Dipelajari UI/UX design merupakan akronim dari User Interface dan User Experience yang berarti antarmuka dan pengalaman pengguna. UI/UX design pada definisinya yaitu sebuah proses merancang antarmuka pengguna pada website, aplikasi mobile, atau produk digital lainnya. Tujuan dari UI/UX design adalah untuk menciptakan pengalaman pengguna yang intuitif, menarik, dan mudah digunakan. Penerapan UI/UX Design pada sebuah website maupun aplikasi mobile adalah faktor penting yang dapat mempengaruhi kesuksesan produk tersebut. Ketika pengguna merasa mudah dan nyaman menggunakan sebuah produk, mereka cenderung akan lebih sering menggunakannya. Oleh karena itu, dalam artikel ini akan dibahas mengenai 5 Contoh Best Practice UI/UX Design yang perlu dipelajari dalam pembuatan website dan aplikasi mobile. 1. Penempatan Konten yang Baik Proses perancangan UI/UX Design Salah satu hal yang perlu diperhatikan dalam penerapan UI/UX Design adalah penempatan konten yang baik. Konten yang disajikan pada sebuah website atau aplikasi mobile harus mudah diakses dan mudah dipahami oleh pengguna. Dengan begitu dapat mempengaruhi peningkatan pengalaman pengguna dan kesuksesan produk secara keseluruhan. Jika informasi dan fungsi ditempatkan dengan tepat, pengguna dapat dengan cepat menemukan apa yang mereka cari. Penempatan konten yang baik dapat membantu meningkatkan peringkat situs di mesin pencari. Jika informasi penting ditempatkan di lokasi yang tepat, halaman akan lebih mudah ditemukan oleh mesin pencari. Dalam hal mempelajari bagaimana cara menempatkan konten dengan baik, perlu memahami prinsip-prinsip desain UX dan mencoba berbagai tata letak untuk melihat apa yang paling efektif untuk produk kamu. 2. Penggunaan Warna yang Tepat Penggunaan warna yang tepat pada UI/UX Design Penggunaan warna yang tepat dapat membantu meningkatkan UX sebuah produk. Warna dapat mempengaruhi mood dan perasaan pengguna. Oleh karena itu, pemilihan warna yang tepat pada sebuah website atau aplikasi mobile adalah faktor yang penting. Warna juga membantu membangun merek dan meninggalkan kesan kuat untuk mengingat produk tersebut. Dengan warna yang konsisten pada setiap elemen, design akan membantu membedakan dengan produk sejenis lainnya. Dalam rangka untuk mempelajari cara menggunakan warna yang tepat, perlu memahami arti dan konotasi warna serta kontras yang tepat untuk memastikan keterbacaan. 3. Penggunaan Font yang Mudah Dibaca Penggunaan font pada UI/UX Design Pemilihan font yang tepat dapat membantu meningkatkan UX sebuah produk. Font menjadi aspek yang dapat mempengaruhi keterbacaan dan pengalaman pengguna sehingga font harus dipilh dengan hati-hati. Font yang mudah dibaca akan membuat pengguna lebih nyaman dan mudah memahami konten yang disajikan. Dalam pengaplikasiannya, font yang lebih formal dan serius dapat digunakan untuk merek yang berkaitan dengan bisnis atau keuangan, sementara font yang lebih bersahabat biasanya akan digunakan untuk merek yang lebih santai dan ramah. Pemilihan font yang baik juga membantu menyoroti elemen-elemen penting halaman aplikasi. Untuk mempelajari bagaimana memilih font yang tepat, kamu perlu memahami jenis-jenis font yang berbeda dan bagaimana font dapat digunakan untuk mencapai tujuan tertentu. 4. Navigasi yang Mudah Dipahami Tampilan navigasi UI/UX Design Navigasi yang mudah dipahami adalah salah satu best practice dalam UI/UX design karena dapat mempengaruhi pengalaman pengguna. Navigasi dapat membantu pengguna untuk menemukan konten dengan mudah. Navigasi yang konsisten di seluruh situs atau aplikasi membantu pengguna memahami bagaimana situs atau aplikasi berfungsi. Dengan menggunakan navigasi yang konsisten, pengguna dapat dengan mudah menavigasi halaman dan menemukan apa yang mereka butuhkan dengan cepat. Untuk mempelajari cara membuat navigasi yang mudah dipahami, perlu memahami prinsip-prinsip desain navigasi yang baik dan bagaimana navigasi dapat digunakan untuk memudahkan pengguna menavigasi situs atau aplikasi Anda. 5. Mobile Responsive Design Tampilan responsive UI/UX design pada tablet Dalam era digital yang semakin berkembang, penggunaan smartphone untuk mengakses website dan aplikasi mobile semakin tinggi. Oleh karena itu, mobile responsive design menjadi sangat penting untuk memastikan website dan aplikasi mudah digunakan pada layar smartphone. Bagaimana contoh penerapan UI/UX yang baik pada website ? Penerapan UI/UX design dapat kita temukan pada beberapa platform terkenal di Indonesia. Berikut penulis rangkum contoh platform yang menerapkan aspek best practice UI/UX design. Tokopedia Tampilan UI/UX design website Tokopedia Tokopedia adalah salah satu platform e-commerce terbesar di Indonesia yang memungkinkan para penjual untuk memasarkan dan menjual produk mereka secara online kepada konsumen di seluruh Indonesia. Tokopedia merupakan contoh penerapan UI/UX yang baik, dapat dilihat dari tampilannya yang jelas dan mudah dipahami. Konten-konten yang dibutuhkan pengguna juga disajikan pada bagian atas halaman website dengan jelas dan mudah diakses seperti pada fitur pencarian. Tokopedia juga telah mengoptimalkan desain nya untuk berbagai perangkat mobile maupun dekstop. Traveloka Tampilan UI/UX design website Traveloka Contoh penerapan yang baik dapat dilihat pada website Traveloka. Traveloka adalah sebuah perusahaan teknologi yang menyediakan platform booking online untuk tiket pesawat, hotel, paket liburan, dan layanan transportasi online di Indonesia. Traveloka menggunakan warna biru dan hijau yang menenangkan dan mudah dipahami oleh pengguna. Selain itu Traveloka memiliki navigasi yang mudah dipahami dengan menu utama yang jelas dan submenu yang terorganisir dengan baik. Amazon Tampilan UI/UX design website Amazon Amazon merupakan website e-commerce terbesar di dunia, dan memperhatikan pengalaman pengguna dengan sangat baik. Hal ini terlihat dari fitur pencarian yang sangat akurat, tampilan produk yang menarik dan informatif, serta fitur checkout yang mudah dan cepat. Amazon juga menyediakan berbagai opsi pengiriman dan pembayaran yang mudah, sehingga membuat proses pembelian menjadi lebih lancar. Bukalapak Tampilan UI/UX design website Bukalapak Bukalapak merupakan website salah satu platform e-commerce terbesar di Indonesia dan telah mengalami perkembangan pesat dalam beberapa tahun terakhir. Bukalapak telah menerapkan best practice UI/UX yang dilihat dari desainnya yang responsif sehingga dapat digunakan dengan baik di berbagai perangkat. Bukalapak juga menggunakan palet warna yang konsisten dan mudah dibaca, sehingga memudahkan pengguna untuk memahami dan menavigasi situs dengan efisien. Wireframe UI/UX Design Kesimpulan Pada intinya sebuah website atau aplikasi dapat dikatakan baik apabila dapat mempermudah pengguna untuk mendapatkan sebuah informasi atau dan juga mendapatkan tujuan yang mereka inginkan. Dengan penerapan design UI/UX yang baik akan membuat pengguna nyaman menggunakan aplikasi tersebut sehingga meningkatkan retensi pengguna. Berbagai platform terkenal baik itu e-commerce atau layanan jasa, akan menerapkan UI/UX design yang baik. Mereka memiliki satu tujuan yaitu agar pengguna lebih puas dalam hal pengalaman penggunaan produk membuat mereka akan lebih cenderung untuk menghabiskan waktu lebih lama pada platform. Sehingga diharapkan dapat meningkatkan tingkat penjualan untuk dapat memberikan keuntungan bisnis yang lebih baik. Kamu dapat belajar menerapkan best practice design UI/UX untuk meningkatkan kemampuan kamu yang akan dibutuhkan ketika kamu bekerja besama klien. Penulis merekomendasikan Kelas Online Gratis Learn Figma For Beginner untuk kamu yang baru sekali mendalami UI/UX design dan kelas Mastering Figma A to Z: E-Commerce UI Animation Design untuk kamu yang ingin meningkatkan skill kamu agar sesuai dengan industri saat ini.

Kelas Tutorial Fundamental Python: Memahami Variable di BuildWithAngga

Tutorial Fundamental Python: Memahami Variable

Variable pada python hampir sering kita gunakan berulang kali dalam membangun aplikasi yang baik dan sesuai dari kebutuhan pengguna, pada kali ini kita akan mempelajari variable yang tersedia di bahasa pemrograman python. Tutorial Fundamental Python: Memahami Variable Pada python, variable kita gunakan untuk menampung data-data seperti nama lengkap, alamat rumah, jumlah uang dimiliki, daftar beberapa mobil kesukaan, status benar atau tidaknya orang tersebut bisa berenang, dan data penting lainnya. 1) Membuat variable pertama kita Apabila saat ini program yang kita ciptakan memiliki informasi terkait nama dan uang yang dimiliki oleh Bapak Helmi, maka kodingan python-nya akan terlihat seperti ini. # membuat variable nama yang berisi value Helmi nama = 'Helmi' # membuat variable balance yang berisi uang milik Helmi balance = 280000000000 Silahkan coba menulis kodingan python di atas pada text editor favorite kamu, kalau saya pribadi menggunakan visual studio code. Setelah itu coba tambahkan variable lainnya seperti warna kesukaan, alamat email, dan bahkan juga password. 2) Nilai dari variable dapat kita ubah (mutable) Kita dapat mengubah nilai-nilai yang tersedia pada variable tersebut, misalnya yang tadinya namanya adalah Helmi lalu tahun depan berubah nama menjadi Surya, maka kita dapat mengubah data tersebut dengan mudah menggunakan python, kodingannya seperti ini. # membuat variable nama yang berisi value Helmi nama = 'Helmi' # membuat variable balance yang berisi uang milik Helmi balance = 280000000000 # mengubah nama helmi menjadi surya nama = 'Surya' # cetak value dari variable nama kepada terminal print(nama) Kodingan python di atas, kita menulis variable nama kembali dengan isi Surya, tujuannya adalah untuk meniban value sebelumnya (helmi) lalu kita menggunakan function bawaanya python yaitu adalah print untuk mencetak value tersebut pada terminal VSCode sehingga ktia bisa memastikan bahwa Helmi sudah berubah menjadi Surya. 3) Penamaan variable itu case sensitive Jika saat ini kita ingin memberikan data warna kesukaan kepada Surya di atas, maka perlu hati-hati dalam memberikan penamaan pada variable dikarenakan ini case sensitive. Variable myFavoriteColor dengan myfavoritecolor adalah berbeda walaupun perbedaannya hanya besar dan kecil pada penamaan variable tersebut. # membuat variable warna kesukaan dengan besar kecil myFavoriteColor = 'purple' myfavoritecolor = 'yellow' print(myFavoriteColor, myfavoritecolor) 4) Varible boleh pake angka tapi tidak bisa di awal Apabila kita dipertemukan dengan kondisi di mana perlu menggunakan angka pada variable, maka kita bisa meletakkannya setelah karakter huruf, karena jika diletakkan di awal maka python akan memberikan pesan error SyntaxError: invalid decimal literal. # membuat dua variable yang dimulai dengan angka dan huruf 1tujuan = 'jadi astronot' # ini salah tujuan1 = 'jadi astronot' # ini diperbolehkan print(1tujuan) print(tujuan1) 5) Reserved keyword tidak bisa dipake sebagai variable Pada bahasa pemrograman tersedia keyword yang tidak bisa digunakan sebagai nama dari variable, contohnya adalah seperti if, else, for, while, dan lainnya. Kita masih bisa menggunakan nama lain misalnya ifmi atau forme. # reserved keyword tidak bisa dipake jadi variable if = 'saya budi' # if+mi=ifmi masih bisa digunakan jadi nama variable ifmi = 'saya budi' print(if) print(ifmi) 6) Tipe data yang dinamis Jika pada bahasa pemrograman selain python maka kita perlu mempersiapkan variable dengan satu tipe data terlebih dahulu misalnya String, Number, atau List. Namun pada python kita tidak perlu melakukan hal tersebut, data yang kita miliki dapat berubah-ubah secara dinamis, contoh kodingannya sebagai berikut. # membuat variable nama dengan isi satu data saja yaitu bakpau nama = 'Bakpau' # membuat variable nama dengan isi 3 nama menggunakan list nama = ['Sutejo', 'Kimi', 'Honda'] # cetak data untuk diperlihatkan kepada kita print(nama) Kodingan di atas awalnya kita hanya menggunakan tipe data String pada variable nama, namun pada barisan koding selanjutnya kita deklarasikan kembali bahwa variable nama memiliki value List pada python yang di dalamnya berisi sebanyak 3 nama. Kesimpulan variable pada python Variable sangat penting kita miliki karena tanpa variable maka kita tidak dapat menyimpan data yang ingin diolah pada bahasa pemrograman python. Saya rekomendasikan untuk mengikuti kelas online gratis mempelajari python dari dasar sehingga fundamental skills python kamu menjadi lebih baik dalam proses website development. Jika kamu suka dengan artikel ini tolong sampaikan ke Instagram BuildWithAngga untuk membuat artikel python lainnya.

Kelas Menggunakan Tailwind CSS pada ReactJS di BuildWithAngga

Menggunakan Tailwind CSS pada ReactJS

Tailwind CSS adalah sebuah framework CSS yang bertujuan untuk mempercepat proses pengembangan tampilan (frontend development) pada website atau aplikasi web. Framework ini menggunakan konsep "utility-first" dimana setiap kelas CSSnya memiliki fungsinya masing-masing sehingga memudahkan pengguna dalam menentukan styling atau tampilan yang diinginkan. Menggunakan Tailwind CSS pada ReactJS Dalam Tailwind CSS, kita tidak perlu menulis CSS dari awal karena sudah tersedia berbagai kelas yang dapat digunakan untuk membuat layout, typography, border, padding, dan margin secara cepat. Framework ini juga memiliki fitur responsive yang memungkinkan kita untuk menyesuaikan tampilan website dengan ukuran layar yang berbeda-beda. Menginstall Next JS sebagai framework ReactJS npx create-next-app@latest my-project --typescript --eslint cd my-project Script tersebut akan menginstall sebuah framework bernama NextJS yang dimana merupakan sebuah framework untuk library ReactJS. Setelah berhasil terinstall maka jangan lupa untuk masuk ke folder yang sudah dibuat menggunakan command “cd”. Menginstall Tailwind CSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Setelah masuk ke dalam folder NextJS, masukkan script di atas ke dalam terminal atau CMD dan tunggu hingga proses installasi Tailwind CSS selesai. Jika proses installasi selesai maka akan muncul beberapa file baru seperti tailwind.config.js Melakukan konfigurasi Tailwind CSS content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ], Script di atas bertujuan untuk melakukan konfigurasi template path yang artinya kita menentukan file apa saja yang akan menggunakan kelas-kelas Tailwind CSS pada folder NextJS. Sederhananya script tersebut berguna agar kita bisa menggunakan Tailwind CSS pada setial file yang ada dalam folder. @tailwind base; @tailwind components; @tailwind utilities; Kemudian kamu perlu untuk menambahkan beberapa script dari Tailwind CSS agar bisa berjalan pada file yang telah dibuat. Kamu tinggal melakukan copy script di atas dan paste script tersebut ke dalam file yang bernama “global.css” yang terletak pada folder “src”. Mencoba Menggunakan Tailwind CSS Setelah semua proses installasi selesai kita bisa langsung mencoba melakukan styling dengan Tailwind CSS. Untuk bisa melihat hasil perubahannya jangan lupa untuk melakukan run pada framework NextJS dengan script di bawah ini. npm run dev Setelah program berjalan kita perlu membuat sebuah komponen yang memiliki teks dengan ukuran “h1” kamu bisa mengikutin script berikut ini. Membuat komponen pada ReactJS Setelah komponen telah selesai dibuat kita akan mengedit teks tersebut menggunakan Tailwind CSS dengan cara menambahkan “className” pada tag “h1” dan kita akan mengubah warna dan ketebalan dari teks tersebut. Menuliskan syntax Tailwind CSS pada komponen ReactJS Untuk menggunakan Tailwind CSS kita perlu menuliskan “className” pada setiap tag yang ingin kita berikan style Tailwind CSS, “className” berguna untuk menampung script dari Tailwind CSS yang akan merubah style dari tag yang akan diubah. Script ‘font-Bold text-red-500’ artinya kita merubah teks “Hello world” dengan tag “h1” dengan ketebalan bold dan dengan warna merah. Kesimpulan Salah satu kelebihan Tailwind CSS adalah mudahnya kustomisasi. Kita dapat menyesuaikan kelas-kelas yang tersedia dengan mengubah variabel atau menambahkan kelas sendiri. Selain itu, Tailwind CSS juga memiliki dokumentasi yang lengkap dan komunitas yang besar sehingga mudah untuk mencari solusi atau dukungan ketika mengalami kendala. Dengan demikian, Tailwind CSS menjadi salah satu pilihan yang populer untuk meningkatkan efisiensi dan kualitas dalam pembuatan tampilan website atau aplikasi web. Untuk mempelajari Tailwind CSS kamu dapat mengikuti kelas gratis Tailwind CSS dari Build With Angga atau kamu bisa mempelajari styling pada Tailwind CSS lebih lanjut dan kamu juga bisa mempelajari dasar ReactJS agar bisa mengimplementasikan Tailwind CSS pada ReactJS