flash sale
Most Searched
Full-Stack Laravel Flutter 2021: Building E-Commerce and Chat Apps
Full-Stack Laravel Flutter 2021: Building E-Commerce and Chat Apps
Rp 599,000
Complete Freelancer UI/UX & Illustration Designer: Brief, Wireframe, Visual Design, Portfolio
Complete Freelancer UI/UX & Illustration Designer: Brief, Wireframe, Visual Design, Portfolio
Rp 569,000
Intro to Design System
Intro to Design System
Rp 425,000
Learn Data Analysis For Beginners with Excel
Learn Data Analysis For Beginners with Excel
Rp 450,000
Full-Stack Web Developer
Full-Stack Web Developer
Rp 389,000
Browse Tips

Meningkatkan skills menjadi 1% lebih baik

Kelas Perbedaan Test Scenario dengan Test Cases : 101 SQA di BuildWith Angga

Perbedaan Test Scenario dengan Test Cases : 101 SQA

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

Kelas Perbedaan QA Analyst, QA Tester, dan QA Engineer : 101 SQA di BuildWith Angga

Perbedaan QA Analyst, QA Tester, dan QA Engineer : 101 SQA

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

Kelas 6 Tipe Button Populer Flutter di BuildWith Angga

6 Tipe Button Populer Flutter

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

Kelas Manfaat Utama Menggunakan Flutter Buatan Google di BuildWith Angga

Manfaat Utama Menggunakan Flutter Buatan Google

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

Kelas 6 Tools Terbaik Data Analytics di BuildWith Angga

6 Tools Terbaik Data Analytics

Dalam mengembangkan startup digital, analisis data menjadi salah satu hal krusial yang perlu diperhatikan. Analisis data dapat menjadi acuan bagi startup dalam proses mengolah data mentah menjadi data yang dapat dipahami. Dimana dari hasil data tersebut dapat ditarik kesimpulan informasi atau sebagai langkah pengambilan keputusan. 6 Great Data Analytics Tools Seiring perkembangan teknologi, kini banyak jenis data analytics tools yang dapat membantu kamu dalam menganalisa data. Berikut 6 rekomendasi data analytics tools terbaik yang wajib kamu coba! *Analystics Graph* R & PythonPower BITableauGoogle Data StudioMicrosoft ExcelRapidMiner R & Python R & Python adalah bahasa pemrograman teratas yang digunakan dalam bidang Analisis Data. R adalah open source tools yang biasa digunakan untuk Statistik dan Analisis dataPython memiliki aneka library dengan fungsi analisis data, data pre-processing tools, machine learning dan visualisasi data. Power BI Analisis data dengan Power BI menjadi salah satu alternatif bagi kamu pemula yang baru terjun dalam dunia analisis data. Power BI memiliki tools yang lengkap untuk memvisualkan data bisnis. Tools ini mampu menggabungkan, menganalisis, memvisualisasikan, hingga menghasilkan data yang mudah dipahami. Tableau Tableau merupakan tools yang dapat menghubungkan data dari berbagai sumber. Hasil pengolahan data Tableau juga bermacam-macam, bisa berupa data visualisasi dalam bentuk bagan ataupun dashboard. Hasil pengolahan data tersebut juga dapat diperbarui secara real time. Google Data Studio Google Data Studio merupakan salah satu tools gratis yang disediakan google untuk membantu proses analisa data. Tidak hanya menampilkan visualisasi data yang menarik dan mudah dipahami, Google Data Studio mampu mengolah data dari berbagai sumber secara terpusat dan ditampilkan dalam bentuk dashboard. Microsoft Excel Excel menjadi salah satu tools yang sering digunakan karena penggunaannya yang cukup mudah dimengerti bagi pemula. Excel sangat cocok bagi kamu yang baru memulai perjalanan karir di bidang analisa data. RapidMiner RapidMiner adalah open-source tool dengan banyak kelebihan yang dapat digunakan untuk analisa data secara mendalam pada berbagai jenis bisnis startup ataupun company besar. Beberapa kelebihan lain dari RapidMiner adalah melakukan data tracking dan analytics secara real-time, menunjang transformasi dan data cleansing, mendukung integrasi pihak ketiga, dan adanya fitur keamanan yang superior. *Data Analytics* Data analytics is the future Analisis data menjadi salah satu tren penting yang harus diperhatikan oleh bisnis startup. Analisis data dapat membantu bisnis startup berjalan lebih efektif dan mampu meningkatkan brand awareness seperti startup yang sudah mempunyai nama besar Tokopedia, Shopee, Lazada, dan banyak lainnya. Yuk mulai belajar analisis data lebih lanjut untuk kamu yang ingin terjun di dunia analisa data dengan menggunakan Microsoft Excel. BuildWith Angga.

Kelas 5 Website Untuk Mencari Inspirasi Website Design di BuildWith Angga

5 Website Untuk Mencari Inspirasi Website Design

Pernah mendapatkan projek untuk membuat website atau ingin melakukan eksplorasi web design tapi bingung untuk memulai? Terkadang kita sebagai seorang UI Designer atau Front-end Developer merasakan yang namanya stuck atau creative block, situasi dimana tidak bisa memikirkan sebuah ide atau inspirasi sama sekali, kalaupun ada biasanya ide tersebut tidak tereksekusi secara maksimal. Maka dari itu, salah satu cara untuk mendapatkan ide atau inspirasi yaitu dengan membuka situs atau website yang memuat inspirasi-inspirasi web design. Berikut 5 website yang dapat kalian kunjungi untuk mencari inspirasi web design: 1. Siteinspire Homepage Siteinspire (https://www.siteinspire.com/) Di Siteinspire kalian dapat mencari inspirasi web design berdasarkan Styles, Types, Subjects, dan Platforms yang digunakan. Atau juga bisa mencari secara spesifik dengan menulis kata kuncinya pada menu Search. Selain itu, kalian juga bisa membuat koleksi referensi web design sendiri jika mendaftar sebagai member gratis di Siteinspire. 2. Awwwards Homepage Awwwards (https://www.awwwards.com/) Awwwards merupakan situs yang berisi website pemenang yang dipilih tiap harinya. Kalian dapat melihat nominasi maupun pemenang dari beberapa kategori, tag, teknologi, warna, dan negara. 3. Best Website Gallery Best Website Gallery Sites Menu (https://bestwebsite.gallery/sites) Berawal dari koleksi referensi website yang dikumpulkan oleh seorang desainer dan developer David Hellman, Best Website Gallery sekarang menjadi salah satu sumber inspirasi website yang dapat diakses oleh siapapun. Web ini juga menyediakan screenshot tiap halaman dari website yang kita pilih. 4. Behance Homepage Behance (https://www.behance.net/) Behance berisikan portofolio - portofolio desain dari para desainer di seluruh dunia. Tidak hanya tampilan desainnya saja, kalian juga bisa menemukan beberapa case study dari desainer ataupun agensi. 5. Dribbble Homepage Dribbble (https://dribbble.com/) Dribbble mungkin salah satu situs yang tidak asing lagi bagi para desainer. Komunitas Dribbble sendiri masih aktif sampai sekarang dan berisi desainer - desainer dari seluruh dunia. Untuk mencari inspirasi web design, kalian bisa memilih menu Web Design atau menulis kata kunci secara spesifik pada kotak pencarian. Kesimpulan Dalam mencari sebuah ide atau inspirasi web design kita bisa mencarinya dengan cara membuka situs atau web yang menyediakan inspirasi desain. Tetapi, jangan lupa contoh - contoh desain yang di tampilkan dalam web tersebut hanya untuk sebagai bahan inspirasi bukan untuk di-copy atau diduplikasi. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

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 3 Software Design Popular Untuk Membuat Prototype Website dan Mobile Apps di BuildWith Angga

3 Software Design Popular Untuk Membuat Prototype Website dan Mobile Apps

Ketika kita ingin menunjukan bagaimana website atau aplikasi kita bekerja dan membantu permasalahan kehidupan sehari-hari pengguna, maka kita perlu membuat sebuah prototype sederhana yang sesuai dari core business dari startup yang kita bangun. Sebenarnya dengan menggunakan kertas dan pulpen, kita dapat membuat wireframe dan prototype, namun dengan beberapa software design berikut maka kita bisa membuat prototype yang kualitasnya lebih tinggi. Adobe After Effect Selain digunakan untuk edit video tingkat atas, software After Effect juga sering digunakan oleh beberapa designer dalam membuat prototype sederhana terkait dari projek yang sedang dikerjakan, dengan fitur-fitur canggih seperti mask, animation, dan lain-lainya maka prototype akan lebih mudah untuk dibuat. Framer Ketika kita selesai mengerjakan projek design menggunakan Figma, maka dapat kita import langsung kepada software Framer untuk kita jadikan prototype yang dapat diklik, mengisi input seperti nama atau alamat email, dan memberikan animasi. Dengan Framer kita dapat membuat prototype aplikasi website atau mobile yang memiliki animasi yang menarik tanpa harus menggunakan koding, ditambah lagi Framer sudah menyediakan template yang siap digunakan untuk kita, wah enak juga ya sebagai UI/UX designer. Principle Principle adalah salah satu software yang tersedia pada Mac OS yang bisa kita gunakan untuk membuat high fidelity prototype, kebanyakan designer lebih memilih untuk menggunakan Principle karena memang experience dan juga fitur yang mereka tawarkan lebih banyak dibandingkan software prototype lainnya. Sayangnya Principle ini hanya tersedia pada Mac OS saja, apabila kamu menggunakan Windows OS maka kami sarankan untuk menggunakan After Effect atau Framer. https://dribbble.com/shots/19503359-Sleep-Magic-App-FREE Kesimpulan Sebagai seorang UI/UX designer alangkah baiknya untuk mempelajari lebih banyak software di luar sana, sehingga ketika klien atau perusahaan membutuhkan kita untuk beradaptasi dengan software yang baru maka kita bisa memulai lebih mudah dan mengerjakan projek.

Kelas Roadmap Belajar ReactJS di BuildWith Angga

Roadmap Belajar ReactJS

ReactJS adalah Framework dari JavaScript yang deklaratif dan efisien untuk membangun antarmuka pengguna interaktif (UI) dengan kemudahan dan fleksibilitas yang lebih besar. ReactJS biasanya digunakan oleh web developer dalam membangun website yang lebih interactive, fast, dan responsive. Library ini sering digunakan untuk membuat Single Page Application (SPA). Mengapa Belajar ReactJS di 2022 Ini? Adapun alasan yang perlu kamu tahu mengapa sangat direkomendasikan untuk belajar ReactJS. 1) Populer dan High-Paying Alasan utama mempelajari ReactJS pada tahun 2022 ini adalah karena sedang populer dan memiliki average salary yang cukup tinggi . Seperti yang telah dibahas sebelumnya, ReactJS menawarkan banyak manfaat bagi para developer. Selain itu, ReactJS merupakan bahasa pemrograman yang populer untuk para pemula karena memiliki kurva belajar yang cukup mudah. Average salary ReactJS Developer Indonesia berdasarkan survey payscale.com Selain karena mudah diterapkan, banyak perusahaan yang sedang merekrut ReactJS Developer untuk proyek IT mereka. Faktanya, banyak raksasa perusahaan teknologi seperti Facebook, Instagram, Dropbox, Netflix, dan Drupal mengembangkan platform mereka menggunakan ReactJS. Maka dari itu, menjadikannya pekerjaan dengan average salary yang tinggi di tahun 2022. 2) Memiliki Performa Yang Tinggi Dalam Mengembangkan Aplikasi Selain menjadi framework Front-End yang populer, ReactJS juga mempromosikan Web Development dengan performa tinggi. Nah, bagaimana ReactJS memfasilitasi aplikasi agar memiliki performa tinggi? Jawabannya adalah - melalui penggunaan Virtual DOM ( Document Object Model ). Virtual DOM (Document Object Model) adalah aspek pemrograman Front-end yang diterapkan dalam ReactJS. Pertama, objek dummy divalidasi oleh React untuk memeriksa bagian UI. Jika aplikasi web berkinerja baik, React akan merender komponen utama. Jadi kamu dapat memeriksa antarmuka pengguna (UI) aplikasi web tanpa mengganggu DOM yang sebenarnya. 3) Flexible dan SEO Friendly Situs web yang SEO Friendly menjadi indikator penting dalam perkembangan bisnis yang kompetitif. Selain memiliki antarmuka pengguna (UI) yang interaktif, situs web kamu juga harus SEO Friendly. Terlebih jika kamu ingin mengembangkan bisnismu secara organik. Roadmap Belajar ReactJS Setelah kamu memahami terkait apa itu ReactJS dan alasan mengapa mempelajarinya, kamu perlu tahu alur belajar yang tepat. Tentu saja dengan mengetahui alur belajar yang tepat, akan membantu meminimalisir kesulitanmu ketika memulai belajar ReactJS. 1) Belajar UX Pada tahap pembuatan aplikasi/website, tentu saja kita harus mempelajari UX (User Experience). Tujuan dari mempelajari UX ini agar kita memiliki target audience yang jelas dan rancangan aplikasi yang detail. 2) Pelajari Design UI Karena output dari belajar ReactJS ini adalah membuat tampilan antarmuka/UI (User Interface) yang interaktif, maka kamu juga perlu mempelajari cara mendesign. Dalam mendesign, biasanya para developer menggunakan Figma untuk membuat design tampilan antarmuka/UI untuk website dan mobile apps. 3) Belajar Fundamental Web Development Setelah mampu menetapkan rancangan aplikasi, hal yang selanjutnya perlu kamu pahami adalah materi fundamental Web Development seperti HTML, CSS, dan JavaScript. 4) Mulai Belajar Dasar ReactJS Jika sudah cukup paham dan memiliki penguasaan materi yang baik terkait fundamental Web Development, kamu bisa mulai mencoba belajar dasar-dasar ReactJS. 5) Belajar Membuat CRUD CRUD adalah singkatan dari create, read, update, dan delete. Kegunaan dari pemrograman CRUD adalah untuk membaca, menyisipkan, memanipulasi, mengedit, dan menghapus data tabel. Peran CRUD sangat penting karena berkaitan dengan sistem informasi perusahaan. Bisnis yang melacak data seperti akun, informasi pembayaran, dan catatan lainnya membutuhkan sistem penyimpanan yang tahan lama. Ini biasanya diatur atau disimpan dalam database. 6) Mulai Membuat Project Pada pembuatan project ini, kamu akan belajar mengtransformasi dari Design di Figma ke bentuk code (tahap development) menggunakan React Native. Dengan adanya panduan Roadmap belajar ini, akan membantumu supaya belajar lebih konsisten dan terarah. Semoga artikel ini bermanfaat untuk kamu dan selamat belajar ya!😉🙌. BuildWith Angga

Kelas Tips & Trick Jadi Programmer Handal Tanpa Kuliah di BuildWith Angga

Tips & Trick Jadi Programmer Handal Tanpa Kuliah

Seiring dengan perkembangan teknologi saat ini, programming skills menjadi kemampuan yang tinggi permintaannya di bidang industri. Programming skills ini membutuhkan pengetahuan khususnya pada Software dan Hardware. Walaupun membutuhkan kemampuan khusus, kamu bisa mempelajari skill ini tanpa menempuh pendidikan formal (tanpa gelar). Tugas Seorang Programmer Sebelum memutuskan untuk berkarir sebagai programmer, kamu perlu memahami jobdesc yang akan kamu jalani nantinya sebagai programmer. Programmer bertugas untuk mengembangkan, merancang, serta menguji dan memastikan kinerja sebuah software dari segi keamanan dan performa. Programmer dapat bekerja diberbagai macam sektor industri seperti game development, mobile applications, web development, UI/UX designer, dan lainnya. Skill Yang Dibutuhkan Untuk Menjadi Programmer Programmer biasanya berkolaborasi dengan developer dan designer lain untuk merancang konsep program/aplikasi yang hendak dibuat. Mereka sering melakukan iterasi dalam pengimplementasian design, pengembangan dan pengujian untuk mendapatkan feedback dari client guna meningkatkan kinerja software. Beberapa tugas yang mungkin menjadi tanggung jawab programmer dapat mencakup: Planning software: Kamu dapat menggunakan model dan flowchart untuk merincikan cara menulis kode.Design dan membuat aplikasi: Kamu dapat membuat aplikasi mobile atau bahkan sistem operasi yang kompleks. Menulis program: Kamu dapat menggunakan berbagai macam bahasa pemrograman untuk menulis program software. Selain Hardskill seperti mengetahui cara membuat kode, kamu juga akan mendapat menfaat dari memiliki programming skill, yaitu sebagai berikut: Critical ThinkingProblem SolvingAttention to detailLateral Thinking Cara Mendapatkan Programming Job Tanpa Kuliah Jika kamu baru memulai atau sudah memiliki latar belakang dalam pemrograman, berikut ini beberapa hal yang perlu disiapkan untuk mendapatkan Programming Job tanpa harus memiliki gelar: 1) Mulai Belajar Bahasa Pemrograman Langkah terbaik untuk memulai belajar pemrograman adalah mempelajari bahasanya terlebih dahulu. Kamu dapat mengambil sertifikasi pemrograman (online/offline), mengikuti webinar, membaca buku, dan mendengarkan podcast mengenai pemrograman. Beberapa bahasa pemrograman populer yang kami rekomendasikan untuk pemula adalah Python, JavaScript, Kotlin, dan Java. Masing-masing bahasa ini berguna dengan cara yang berbeda, seperti: JavaScript: Cocok dipelajari untuk Web developmentKotlin: Cocok dipelajari untuk Mobile DevelopmentJava: Cocok dipelajari untuk pemula sebagai fondasi dari semua bahasa pemrogramanPython: Cocok untuk di berbagai industri karena flexibilitas 2) Menguasai Paradigma Pemrograman Paradigma pemrograman adalah cara untuk mengklasifikasikan bahasa pemrograman berdasarkan fitur-fiturnya. Ada berbagai macam gaya pemrograman yang berbeda.Namun ada dua yang paling populer, yaitu berorientasi objek dan fungsional. Perbedaannya adalah: Object-Oriented Programming: Memperlakukan semuanya sebagai objekFunctional programming: Menekankan evaluasi fungsi 3) Terbiasa Dengan Tools Programming Programmer memiliki tools yang digunakan secara teratur baik dalam pekerjaan dan belajar. Jika kamu mampu memahami cara menggunakannya, hal ini akan memudahkanmu untuk mendapatkan pekerjaan sebagai programmer. Beberapa tools yang dapat kamu pelajari: Version control daily: Tools ini akan memudahkan programmer untuk berkomunikasi dan sharing satu sama lain.Open-source website: Tools ini akan memudahkanmu untuk meng-upload dan memanajemen kode. Command-line: Terminal yang memudahkanmu untuk berkomunikasi dengan sistem operasi. 4) Mencoba Berkontribusi Pada Open Source Project maupun Freelance Kamu dapat bergabung dengan situs web yang mendukung kontribusi open-source untuk programmer dan temukan project yang bisa kamu kontribusikan. Banyak perusahaan secara aktif mempekerjakan programmer dari kontributor open-source sehingga kamu bisa menunjukkan keterampilan kepada calon employer. Kamu juga dapat memulai sebagai pekerja Freelance. Jika kamu sudah cukup menguasai pemrograman, membaca dokumen, menggunakan tools yang ada, serta mampu mengukur peluang kerja Freelance dimana kamu dapat bekerja berdasarkan per project. Dengan begitu, kamu bisa menunjukkan kepada calon employer terkait kemampuan yang kamu miliki dan bisa menjadi bekal untuk membangun portofolio pekerjaan. Adapun beberapa platform yang kami rekomendasikan untuk Freelancer: UpworkFiverrPeopleperhour 5) Mulai Membangun Project Sendiri Selain berkontribusi pada project lain, Kamu juga dapat mulai membangun softwaremu sendiri. Misalnya, Kamu dapat membuat website yang digunakan untuk memudahkan transaksi jual beli seperti e-commerce, membuat website streaming film seperti Netflix, membuat website platform untuk Freelancer, dan masih banyak lagi project yang bisa kamu coba. Dengan membangun sesuatu yang membantu perusahaan meningkatkan produktivitas, makan dapat meningkatkan peluangmu untuk direkrut oleh calon employer. Tentu saja selain tips yang telah disebutkan diatas, yang tidak kalah penting adalah niat dan komitmen. Saat kamu telah memutuskan untuk berkarir sebagai programmer, pastikan kamu selalu update dengan ilmu terbaru ya! karena teknologi akan terus berkembang 😉🙌 . BuildWith Angga

Kelas Super Tools Untuk Menggunakan Tailwind CSS Lebih Cepat dan Menarik di BuildWith Angga

Super Tools Untuk Menggunakan Tailwind CSS Lebih Cepat dan Menarik

Hello, People With The Spirit Of Learning! Salah satu jenis framework pada CSS (Cascading Style Sheet), yaitu Tailwind CSS. Kamu akan mengetahui Tools yang terdapat pada Tailwind CSS. Framework CSS ini dapat mempermudah pekerjaan kamu sebagai Developer. Yuk, Simak! Perkenalan Tailwind CSS Tailwind CSS merupakan framework yang bersifat utility first untuk membangun UI yang kompleks dan memiliki ciri khas tersendiri. Framework yang dirilis oleh Adam Wathan pada tahun 2019, dan pada tahun 2020 Tailwind CSS merilis v2 atau versi kedua yang dibuat oleh Steve Schoger dengan design visual komponennya. Components Tailwind CSS Lima Tools Tailwind CSS, yaitu: Tailwind ToolboxTailwind ComponentsTailwind TemplatesTailblocksMeraki UI 1) Tailwind Toolbox Tailwind Toolbox dibuat oleh Amrit Nagi berisi lebih dari 45 landing page templates dan 16 components. Tailwind Toolbox bersifat open source, beberapa template dan component berasal dari kontribusi suatu komunitas. Pada component ini terdapat plugins, tools, kits, dan generatos yang dapat membantu kamu menggunakan Tailwind CSS dengan lebih baik. Selain itu, Tailwind Toolbox juga menyediakan template scripts untuk JS, seperti penutup dan pembuka. Kamu bisa menggunakan components dengan klik template atau component yang ingin digunakan, lalu mengunduh template CSS atau menyalin kode, dan pindahkan ke projek yang sedang kamu buat. 2) Tailwind Components Tailwind Components bersifat open source, memiliki beberapa pilihan template yang bisa kamu gunakan secara gratis, kamu bisa gunakan untuk Bootstrap sebuah aplikasi baru. Components ini terdiri dari dropdown, login, modals, tab, input, dan ready made options yang dibuat oleh Tailwind CSS. kamu juga bisa membuat component kamu sendiri yang dimana component tersebut bisa digunakan oleh orang lain. Untuk menggunakan components, kamu bisa memilih component terlebih dahulu, lalu kamu klik unduh atau langsung menyalin kode dari component tersebut. 3) Tailwind Templates Tools ini dibuat oleh J-hiz, terdiri dari 30 design components, seperti buttons, cards, forms, search inputs, dan modals. Untuk menggunakan templates apapun yang terdapat pada Tailwind Templates, kamu hanya perlu klik templates yang kamu suka, lalu salin kode tersebut ke projek kamu. 4) Tailblocks Tailblocks dibuat oleh Mert Curuken, tools ini terdiri dari 60 layout blocks, seperti layout testimonials, teams, steps, stats, prices, heroes, headers, galleries, footers, features dan ecommerce. Kamu dapat menggunakan component ini dengan mode gelap atau dark mode, kamu juga dapat mengubah warna yang kamu inginkan dari UI yang ada di component Tailblocks. Untuk menggunakan layout blocks apapun, kamu bisa langsung klik “The View Code”, lalu copy atau salin kode, dan pindahkan kode tersebut ke projek yang sedang kamu buat. 5) Meraki UI Meraki UI dibuat oleh Khatab Wedaa dan Mosab Ibrahim. Tools ini terdiri dari 50 componen Tailwind CSS, dan tools ini mendukung RTL layout. Meraki UI bersifat sederhana, dan ringan. Mulai dari button, team sections, dan cards, kamu dapat menggunakan element yang tersedia untuk membuat prototype. Component yang terdapat pada Meraki UI, yaitu alerts, login forms, buttons, cards, dropdowns, navbars, pagination, dan footers. Untuk menggunakan component tersebut, kamu hanya perlu menyalin dan memindahkan ke projek yang sedang kamu buat. By using this utility first framework, you don't have to write custom CSS to style your application. You can use Tailwind CSS to control the padding, margin, color, font, shadow, and more of your application. Setelah kamu sudah mengetahui component pada Tailwind CSS, kamu bisa langsung belajar dan praktik menggunakan Tailwind CSS. Semoga artikel ini bermanfaat, selamat belajar. BuildWith Angga.

Kelas Konsep Web Yang Harus Kamu Pahami Sebelum Belajar ReactJS di BuildWith Angga

Konsep Web Yang Harus Kamu Pahami Sebelum Belajar ReactJS

Permintaan dalam mengembangkan aplikasi web kian hari semakin kompleks. Pasalnya, aplikasi web saat ini dapat berperan layaknya aplikasi native. Selaras dengan rumitnya permintaan, semakin canggih pula tools yang dapat kamu gunakan, khususnya dalam bidang pengembangan web. Salah satu tools yang dapat digunakan adalah ReactJS. ReactJS diciptakan oleh facebook yang saat ini adalah meta dan mulai dipublikasikan pada sejak tahun 2012. Penggunaan framework ReactJS lebih banyak dibanding framework lain berdasar stateofjs.com. Dengan ReactJS, kamu dapat membangun antarmuka pengguna (UI) javascript dengan pengalaman yang lebih baik. Hingga saat ini, menurut survey terbaik dari stateofjs.com , ReactJS menjadi library dengan pengguna terbanyak sejak 6 tahun belakangan ini. Maka tak heran, saat ini banyak sekali yang mulai tertarik belajar ReactJS. Namun, Sebelum memulai belajar ReactJS, ada beberapa konsep dasar web development yang perlu dikuasai. 1) Konsep HTML dan CSS Penting untuk memahami konsep HTML dan CSS terlebih dahulu. Kedua hal ini merupakan fondasi dari web development. Setidaknya kamu sudah bisa memahami bagaimana dan kapan untuk menggunakannya: Tag semantik HTMLCara styling elemen dengan CSS menggunakan inline styles, style yang dideklarasikan di head atau dalam file CSS terpisahModel Block ElementSet up page layout dengan float atau flexboxMenggunakan forms dan inputsMenginputkan gambar dengan tag tag dan background-image-property HTML dan CSS memang bagus untuk konten dan desain statis, tetapi bagaimana dengan pemrograman yang sebenarnya? Dengan demikian, kamu juga harus paham dengan konsep pemrograman dasar. Karena apa pun yang dapat dilakukan dengan React, kamu juga dapat melakukannya dengan JavaScript murni. React memudahkanmu untuk membuat alur kerja development dengan lebih cepat, konsisten, dan lebih dapat dipertahankan. 2) Konsep Dasar Pemrograman Penting untuk memahami konsep dasar pemrograman sebelum belajar bahasa pemrograman apapun. Konsep dasar yang perlu kamu pahami terlebih dahulu agar lebih memudahkan kedepannya: VariabelAssignment OperatorsMath OperatorsLogical operators && conditionalsTipe data dan Struktur (boolean, number, string, array, object, dll.)Loop (while, do while, for)Fungsi Masih banyak yang perlu dipahami selain konsep dasar yang telah disebutkan di atas. Setelah kamu memahami syntax pemrograman dasar baik itu dari bahasa pemrograman Javascript, Python, dan lainnya, kamu juga perlu terbiasa dengan memanipulasi Document Object Model (DOM). 3) Checklist Belajar Manipulasi DOM Memanipulasi DOM sangat penting dalam pengembangan website untuk meningkatkan interaktivitas dan kedinamisan. Memahami Window dan Document ObjectTransversing dan Modifying DOMListening di beberapa DOM events Setelah kamu terbiasa dengan sintaks JavaScript dasar, selanjutnya kamu bisa mempelajari JavaScript ES6. 4) ES6 Sintaks ES6 merupakan singkatan dari ECMAScript 6. ECMAScript 6 sendiri digunakan untuk memperkuat Javascript. Adapun sintaks yang perlu kamu pahami agar kodinganmu lebih efektif: Arrow FunctionsES6+ ClassesOperator SpreadArray dan Object DestructuringArray functions (map, filter, reduce, dll.)ES6 Imports and Exports 5) Konsep Pemrograman Tingkat Lanjut Dan setelah kamu cukup menguasai dan terbiasa dalam menggunakan ES6, kamu bisa mempelajari tiga komponen penting berikut ini: Dasar HTTPObject-Oriented ProgrammingPola desain populer seperti Modular, Singleton, Factory, Observer, State Pattern, dll. Setidaknya lima hal tersebut yang perlu kamu kuasai sebelum belajar ReactJS. Kami sarankan agar kamu mempelajari dasar-dasar yang telah disebutkan diatas agar tidak mengalami kesulitan saat belajar ReactJS. Apakah kamu sudah siap belajar ReactJS untuk memberikan impact besar pada Industri? Semoga artikel ini bermanfaat untuk kamu 😉 BuildWith Angga.

Kelas Waktu Yang Tepat Untuk Memutuskan Untuk Menjadi Freelancer di BuildWith Angga

Waktu Yang Tepat Untuk Memutuskan Untuk Menjadi Freelancer

Saya sering mendapatkan pertanyaan terkait kapan sih waktu yang tepat untuk kita berkari sebagai seorang Freelancer? well jawabannya adalah secepat mungkin, mengapa demikian? cek beberapa alasan berikut. The New Freedom Ketika kamu jadi seorang Freelancer maka kamu akan mendapatkan beberapa kebebasan yang tidak didapatkan oleh mereka pekerja kantoran (full-time), yaitu adalah: Bebas dalam memilih waktu kerja, siang atau malamBebas untuk mengerjakan projek apa saja, ini cocok untuk mental healthDan juga bebas untuk menentukan harga dari value yang kita berikan kepada klien Oleh karena itu, jika kamu memang memiliki komitmen yang tinggi untuk memulai menjadi seorang Freelancer, lakukan saat ini juga, dengan konsisten dan penuh kesabaran. Sebelum Kamu Memutuskan Untuk Jadi Freelancer Ada beberapa persiapan penting yang perlu kita lakukan sebelum terjun payung menjadi seorang Freelancer, hindari beberapa kesalahan terbesar saya sehingga kamu bisa lebih cepat dalam mengejar kesuksesan berkarir sebagai Freelancer. 1) Simpan Uang Untuk 1 Tahun Penting untuk memiliki emergency fund sebelum memutuskan untuk jadi Freelancer, karena kehidupan Freelancer pemula itu tidak sebaik dibandingkan mereka yang sudah punya long-term client/project. 1 tahun adalah waktu yang cukup untuk kita berjuang dalam membangun personal branding dan mengasah skills kita untuk mendapatkan klien pertama yang mungkin akan menjadi seorang klien jangka panjang. 2) Perdalam Bahasa Inggris, Wajib! Jika ingin mendapatkan biaya projek yang cukup besar maka target pasar kamu adalah orang-orang dari luar Indonesia, mereka berani membayar kita lebih mahal karena bagi mereka nilai tersebut cukup adil di negara mereka (efek dari nilai mata uang kita lebih rendah). Misalnya diminta untuk mengerjakan projek website design untuk pemesanan tiket pesawat, mungkin projek dengan harga Rp 100.000.000 terasa lebih kecil bagi mereka yang tinggal di negara Amerika, dan untuk kita yang tinggal di Indonesia maka nilai tersebut cukup besar. Bahasa Inggris juga membantu kita untuk berkomunikasi dengan mereka sehingga projek yang dikerjakan akan lebih cepat selesai dan meminimalisir kesalahan yang dapat merugikan kita dari segi tenaga, waktu dan juga reputasi. 3) Baca Buku Tentang Marketing & Business Saingan di luar sana cukup banyak, dari India yang lebih terkenal. Mereka jago sekali ketika menulis copywriting, menentukan harga, dan juga menyampaikan ide-ide yang terkait pada projek Freelance tersebut. Jika kita belum ada modal untuk membeli buku, pelajari beberapa hal tersebut di Medium karena sudah tersedia jutaan artikel terkait hal marketing dan juga business yang dapat kita pelajari dan praktekkan untuk meningkatkan karir kita sebagai Freelancer. Kesuksesan Dibangun Dari Persiapan Yang Baik dan Kesempatan Yang Ada Kesempatan saja tidak cukup, oleh karena itu kita perlu menyiapkan diri kita lebih baik lagi dengan fokus kepada 3 hal di atas. Well, semoga bisa bermanfaat dan bila ada pertanyaan terkait Freelancer boleh DM aja melalui Instagram BuildWith Angga.

Kelas 5 Langkah Mudah Membuat Aplikasi Android di BuildWith Angga

5 Langkah Mudah Membuat Aplikasi Android

Meningkatnya penggunaan aplikasi Android, tidak luput dengan peningkatan pengguna smartphone beberapa tahun belakangan ini. Berdasarkan data dari Statista tahun 2020, pengguna smartphone meningkat sebanyak 89% Fungsionalitas yang dimiliki setiap aplikasi saat ini juga bermacam-macam sesuai dengan kebutuhan masing-masing sektor yang ada di Indonesia. Hampir semua sektor baik itu kesehatan, bisnis, keuangan, properti, dan lainnya berlomba-lomba membuat aplikasi untuk memudahkan pekerjaan. Dari pembuatan aplikasi ini juga meraup banyak keuntungan ketika sudah terpublikasi di App Store maupun Playstore. Maka tak heran, saat ini orang-orang mulai berlomba untuk membuat aplikasi Android karena profitnya yang cukup besar. Namun, dalam membuat aplikasi juga tidak mudah. Perlu melalui proses yang cukup kompleks agar aplikasi dapat bermanfaat untuk masyarakat dan diterima oleh market. 1) Menentukan Konsep Aplikasi Dalam menentukan konsep aplikasi juga butuh berdiskusi dengan tim. Sebelum memulai proses pengerjaan aplikasi, kamu harus menentukan aplikasi apa yang ingin kamu buat beserta tujuannya. Kira-kira digunakan untuk apakah aplikasimu ini? apa impactnya untuk masyarakat? solusi apa yang tercipta dengan adanya aplikasimu ini? target market seperti apa yang ingin dituju? bagaimana strategi marketingnya agar lebih mudah menggait user? Ide tersebut perlu kamu gambar untuk memberikan presentasi yang lebih solid, detail, dan luas. 2) Melakukan Research dan Membuat Wireframe Salah satu tahapan dalam pembuatan aplikasi yang tidak boleh terlewatkan adalah UX Research. Tahapan selanjutnya yang wajib dilakukan setelah menentukan konsep aplikasi adalah melakukan UX Research. Tujuan utama dilakukannya UX Research adalah mengenal calon pengguna, memahami kebutuhan pengguna, dan membangun fitur yang sangat dibutuhkan oleh pengguna. Pada proses UX Research ini, kamu bisa melakukan survey dengan memberikan beberapa poin pertanyaan untuk menambah insight dan data dari calon pengguna yang nantinya akan digunakan dalam pembuatan aplikasi. Membuat wireframe agar proses design dan visualisasi ide lebih terarah. Setelah mendapatkan semua data tersebut, kamu bisa memulai membuat wireframe. Wireframe adalah gambar rangka dengan fokus pada penataan konten dan fungsionalitas suatu screen aplikasi. Pada tahapan ini Designer harus memperhatikan kebutuhan user beserta user flow agar menciptakan UX yang baik. Bila wireframe dibangun dengan baik oleh sang Designer dan penyampaiannya kepada rekan lain (Stakeholder, Developer, UX Designer) berjalan lancar, proses pengembangan aplikasi tentunya menjadi lebih hemat uang dan waktu. 3) Membuat Front-End dan Back-End Aplikasi Front-End adalah design aplikasi yang nampak oleh pengguna. Fokus utama Front-End Developer berada di “sisi pengguna” yang berarti setiap bagian dari aplikasi dapat berinteraksi langsung dengan pengguna. Pekerjaan ini mencakup tata letak, warna, design hingga user behaviour. Back-End memerlukan pemahaman yang luas dalam beberapa bahasa pemrograman. Back-End adalah mesin (program) yang bekerja di dalam sebuah aplikasi yang berhubungan dengan server (contohnya pada situs atau cloud) dan database. Jadi, peran Back-End dalam suatu aplikasi adalah merancang alur aplikasi, mengatur keamanan aplikasi serta melakukan perancangan database. 4) Melakukan Testing Proses testing penting dilakukan untuk memastikan kelayakan penggunaan aplikasi. Testing merupakan contoh implementasi dari Quality Assurance. Salah satu tujuan dari testing yaitu untuk melakukan uji coba kelayakan produk aplikasi sebelum digunakan oleh pengguna. Pada proses ini, kamu akan menguji coba aplikasimu untuk melihat apakah Back-End berfungsi dengan baik terhadap Front-End (user interface) yang sudah dibuat. 5) Rilis Aplikasi Setelah melakukan testing kelayakan aplikasi, perilisan aplikasi bisa dilakukan. Setelah melalui proses uji coba kelayakan aplikasi, kamu sudah bisa mempublikasikan aplikasi buatanmu. Kamu dapat merilis aplikasi Android dengan beberapa cara. Biasanya, aplikasi dirilis melalui marketplace aplikasi seperti Google Playstore (untuk Android) dan App Store (untuk iOS), tetapi kamu juga dapat merilis aplikasi di situsmu sendiri atau dengan mengirimkan aplikasi langsung kepada pengguna. Tentu saja setelah tahap publikasi masih ada sejumlah langkah yang perlu dilakukan jika kamu ingin aplikasimu terus berkembang. Salah satu caranya adalah dengan melakukan update fitur aplikasi secara berkala. Dengan adanya update fitur, pengguna biasanya akan lebih loyal dalam menggunakan aplikasimu. Nah, apakah kamu sudah siap untuk membuat aplikasi Android buatanmu sendiri? semoga artikel ini bermanfaat dan bisa memberikan kamu gambaran terkait pembuatan aplikasi dengan baik ya!🙌😉

Kelas Cara Angga Memulai Freelance Untuk Pemula - Interview Angga di BuildWith Angga

Cara Angga Memulai Freelance Untuk Pemula - Interview Angga

Menjadi seorang Freelancer dapat memberikan kebebasan yang cukup banyak untuk diri kita, misalnya kita bebas milih kerja dengan siapa, dibayar berapa, dan kerja di mana. Kebebasan ini biasanya dibutuhkan oleh mereka yang bekerja kreatif, contohnya graphic designer, website designer, atau SEO specialist. Kita akan belajar untuk memulai Freelancer khusus pemula dari ahlinya itu Angga, seorang Freelancer Product Designer yang telah bekerja lebih dari 100 klien dari seluruh negara, bukan cuma Indonesia saja. Q1: Halo mas Angga, sedang sibuk apa belakangan ini? Saya sedang memperbesar perusahaan edukasi yang telah saya bentuk untuk membantu orang-orang yang ingin belajar website design, product design, mobile app development, dan lainnya. Saya ingin mereka memiliki sumber belajar yang tepat dengan biaya lebih terjangkau, Sehingga ketika mereka belum ada biaya kuliah maka mereka bisa belajar di BuildWith Angga. Q2: Apa saja yang perlu dilakukan sebagai orang yang ingin memulai Freelance? Well, pertama adalah wajib punya skills yang bisa dikerjakan secara remote atau dari mana saja, karena tujuan utama Freelance itu ya bisa kerja dari mana saja. Beberapa skills di antaranya dengan bayaran tinggi adalah: UI designerUX designerSEO SpecialistWebsite DesignerBackend DeveloperData ScientistMobile App DeveloperCopywriter Jika sudah memiliki skills tersebut, tinggal perbanyak saja portfolio dan networking dengan Freelancer lainnya yang mungkin nanti akan memberikan pintu untuk kita mendapatkan projek Freelance pertama. Q3: Bagaimana meningkatkan personal branding kita untuk menarik klien pertama? Biasanya saya riset dulu projek apa yang sedang naik daun, misalnya aplikasi-aplikasi seperti Gojek, AirBnb, atau Cryptocurrency. Dari situ saya coba ngerjain projek latihan yang terkait pada aplikasi tersebut, dan juga biasanya saya menambahkan beberapa improvement sehingga ini dapat melatih cara saya berpikir sebagai seorang product designer. Baik, kurang lebih seperti itu yang bisa kita dapatkan untuk Interview kali ini. Jika kamu punya pertanyaan yang lebih mendalam boleh request langsung ke Instagram BuildWith Angga agar kami buatkan untuk sesi selanjutnya. Semoga bermanfaat dan terima kasih.

Kelas 3 Plugin Unggulan Figma Untuk Belajar UI/UX Design di BuildWith Angga

3 Plugin Unggulan Figma Untuk Belajar UI/UX Design

Bekerja lebih cepat dan produktif untuk menghasilkan projek yang lebih baik adalah impian semua UI/UX designer, kali ini kita akan coba bagikan 3 plugin Figma yang sering digunakan oleh top designers around the world, let's go. Plugin Wireframer di Figma Sering kita mengerjakan projek dimulai dari tahap pembuatan wireframe, namun mengerjakan sesuatu yang berulang adalah hal yang membosankan. Dengan menggunakan plugin Wireframer pada software Figma, maka kita tidak perlu membuat bagian-bagian pada website atau mobile desgin dari awal, tinggal pake yang sudah tersedia dan modifikasi saja. Plugin ProtoFlow di Figma Membuat sebuah prototype yang akan digunakan untuk usability-testing pada design process seperti Design Thinking atau Design Sprint kini menjadi lebih cepat dengan Plugin ProtoFlow yang tersedia pada Figma saat ini. Feather Icons di Figma Icon adalah bagian yang penting pada sebuah user-interface design, Icon dapat membuat tampilan website atau mobile app kita terlihat lebih menarik, Icon juga dapat memberikan emotional effect pada pengguna. Membuat Icon agak tricky untuk kita yang tidak pandai gambar, oleh karena itu Feather Icons sangat wajib kita install pada projek Figma kita untuk mempermudah kita menambahkan icon pada menu navigation, header, atau di dalam sebuah button. Summary for you Jika mengejar deadline maka tidak perlu panik, cukup gunakan ketiga plugin Figma di atas yang sudah kami bagikan sehingga kamu bisa bekerja lebih baik, cepat, dan produktif sebagai seorang UI/UX designer pemula atau expert. Goodluck ya.

Kelas 3 Keuntungan Menggunakan Software Figma Sebagai UI/UX Designer di BuildWith Angga

3 Keuntungan Menggunakan Software Figma Sebagai UI/UX Designer

Figma telah dikategorikan menjadi software design yang cukup popular karena dikenal dari fitur-fitur canggih serta kemudahan menggunakan software tersebut. Jika kamu sudah pernah menggunakan Adobe XD atau Sketch, maka ketika menggunakan Figma bakalan lebih terasa lebih mudah lagi dari kedua software tersebut. Kali ini, kita mau sharing nih beberapa manfaat yang bisa kita rasakan saat ini juga ketika menggunakan Figma sebagai UI/UX atau graphic designer. Gratis digunakan, bahkan untuk projek komersil, makin cuan deh Yes, Figma menyediakan beberapa paket yang berbayar, namun untuk kita yang belum punya modal maka bisa menggunakan Figma secara gratis, dan paket gratis ini bisa kita gunakan untuk tujuan mengerjakan projek yang berbayar, misalnya dari klien atau perusahaan. Tapi nanti ketika kita sudah menghasilkan uang, lebih baik upgrade ke paket yang berbayar ya untuk mendapatkan kemudahan bekerja lebih baik lagi, ya sekalian kita bayar balas budi kepada developer dan designer yang telah membangun software Figma. Plugin apa aja ada, sehingga kerja bisa lebih ngebut lagi wuzz wuzz, supafast! Well, begini enaknya menggunakan Figma untuk menyelesaikan projek design website atau mobile app, Figma telah dibentuk oleh komunitas yang kuat, mereka juga sering menyediakan plugin canggih sehingga kita bisa lebih cepat dalam bekerja. Resources belajar Figma itu banyak banget, bikin skills kita makin up to date Untuk kita yang baru memulai untuk menggunakan Figma, jika kita baru pindah dari software Adobe XD atau Sketch, maka kita tidak perlu khawatir. Karena di luar sana banyak sekali resources untuk mempelajari Figma. Kami, BuildWith Angga, juga saat ini menyediakan puluhan kelas gratis yang membahas UI/UX design, dan banyak dari kelas-kelas online tersebut menggunakan software Figma. Pokoknya, progress belajar kamu jadi lebih terarah dari pada sebelumnya. Well, begitulah beberapa manfaat utama ketika menggunakan software Figma, untuk yang masih ragu maka silahkan langsung cobain aja, dijamin deh gak akan lari kepada software-software design lainnya.

Kelas Lowongan Magang Junior Flutter Developer (WFA & Dibayar) di BuildWith Angga

Lowongan Magang Junior Flutter Developer (WFA & Dibayar)

Goals Sebagai Junior Flutter Developer, kamu akan lebih sering latihan slicing dari Figma ke Flutter yang telah disediakan oleh designer di BuildWith Angga. Hal ini sangat baik untuk meningkatkan keahlian kita sebagai UI engineer. Responsibilities Belajar dari kelas Premium untuk memperdalam keahlian Flutter DeveloperMelakukan slicing design-design di Figma ke bentuk mobile app (Flutter)Mempelajari tools terbaru yang terkait dari Flutter (belajar dan dibayar oleh BWA) Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSering menggunakan software Figma dan FlutterSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium Benefits Dipinjamkan MacBook Pro M1Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Untuk mengikuti program magang maka anda wajib menyelesaikan challenge sederhana dari kami, hal ini sebagai bentuk bahwa anda memang serius dengan program magang Junior Flutter Developer Download file Figma pada link shaynakit.com/details/moviez-streamingLakukan proses Slicing kedua halaman tersebut kepada projek FlutterUpload di repository Github anda secara publik How to Apply Siapkan Resume (CV) & Hasil test (berupa link GitHub public ) dengan rapihIsi subject email dengan Magang Jr. Flutter 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat.

Kelas 3 Rekomendasi Kelas Online Gratis Untuk Belajar Figma & UI/UX Design di BuildWith Angga

3 Rekomendasi Kelas Online Gratis Untuk Belajar Figma & UI/UX Design

Figma adalah software design yang dapat digunakan secara gratis, terlebih lagi ketika kamu ingin belajar menjadi seorang UI/UX designer di tahun 2022 atau 2023 mendatang. BuildWith Angga telah menyediakan beberapa kelas online gratis untuk belajar Figma dan UI/UX design mulai dari awal sampai dapat memiliki portoflio pribadi. Belajar Design Style Guide Menggunakan Figma Style guide sangat penting untuk dipelajari oleh pemula, karena kita bisa memahami komponen apa saja yang tersedia pada product design. Hal ini dapat membuat kita menjadi seseorang UI/UX designer yang lebih professional. Bikin Wireframe dan Visual Design Menggunakan Figma Setelah memahami style guide di dalam product design, kita bisa latihan untuk membuat wireframe sederhana yang nantinya akan dijadikan design aplikasi. Pada kali ini kita akan menggunakan software Whimsical dan Figma untuk mempelajarinya. Tingkatkan Skills Figma Kita, Belajar Design Website Dari Workshop Gratis Workshop kali ini menantang kita untuk design sebuah website Charity untuk menampung dana yang akan digunakan untuk membantu orang yang belum beruntung, terutama di bidang pendidikan. Mulai dari awal menggunakan Figma, sampai bisa memiliki portfolio yang bisa digunakan sebagai modal bekerja. Alright, are you ready? Figma dapat menjadikan diri kita sebagai seseorang designer yang hebat. Graphic designer, product designer, ui/ux, illustration designer, semua bisa kita capai hanya menggunakan Figma. Baik, silahkan pelajari beberapa kelas online rekomendasi untuk belajar Figma secara gratis di BuildWith Angga.

Kelas Lowongan Magang UI Design (WFA) di BuildWith Angga

Lowongan Magang UI Design (WFA)

Goals Membantu Product Designer dalam membangun aplikasi/website yang mudah digunakan dan terlihat menarik di mata pengguna, sehingga pengguna jadi lebih nyaman ketika menggunakan dan menghabiskan lebih banyak waktu pada produk tersebut. Responsibilities Mendesain tampilan visual bedasarkan wireframeMembuat prototype sederhanaBekerja sama dengan develop pada tahap slicing 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 3Fresh graduate (kuliah) boleh applySudah 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 kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Kerjakan visual design (color, typography, layout, etc) pada wireframe yang sudah kami sediakan di bawahGunakan referensi design berikut https://dribbble.com/buildwithangga/collections/5358948-ux-protoSiapkan link projek Figma yang dapat diakses secara publik Wireframe How to Apply Siapkan Resume (CV) & Hasil test (berupa link Figma public ) dengan rapihIsi subject email dengan Magang UI Designer 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat.

Kelas Lowongan Magang Quality Assurance (WFA) di BuildWith Angga

Lowongan Magang Quality Assurance (WFA)

Goal Software Quality Assurance sangat dibutuhkan oleh kebanyakan Startup atau perusahaan besar, menjaga sistem berjalan dengan semestinya dan berkolaborasi dengan tim product dan developer yang membangun fitur tersebut. Responsibilities Melakukan uji coba setiap adanya fitur terbaruMemeriksa fitur-fitur lama apakah berjalan dengan baikMendokumentasikan hasil kerjaan dengan rapih Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah 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 kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Membuat dokumentasi sederhana menggunakan Notion.so terkait 3 fitur yang tersedia pada website BuildWith Angga. Buatlah sebuah table dengan kolom URL, Goal, Criteria, Status (lihat contoh A) Simpan sebagai .PDF Untuk list Criteria, posisikan diri kamu sebagai pengguna website BuildWith Angga, kami ingin kamu menjadi kreatif, memikirkan kemungkinan apa saja yang bakalan terjadi pada setiap URL page terkait, buatlah minimal 3 Criteria pada setiap URL-nya. Contoh A URLFungsi/GoalCriteriaStatushttps://buildwithangga.com/bootcampMenampilkan beberapa Bootcamp yang tersedia di BWA sehingga student dapat melihat secara details dan mendaftar pada Bootcamp tersebutApakah student dapat melihat konten via mobile?SUCCESSApakah student dapat melihat details dari setiap Bootcamp?SUCCESSApakah student dapat melihat video trailer dari setiap Bootcamp?FAILED How to Apply Jika sudah menyelesaikan tugas sederhana di atas, waktunya untuk apply magang software quality assurance (wfa) di BuildWith Angga. Siapkan Resume (CV) & Hasil test dengan rapihIsi subject email dengan Magang SQA 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami yaitu BuildWith Angga. Terima kasih.

Kelas Perbedaan Figma dan FigJam Untuk UI/UX Designer di BuildWith Angga

Perbedaan Figma dan FigJam Untuk UI/UX Designer

Perbandingan Antara Figma dan FigmaJam Hello People With The Spirit Of Learning! 🙌 Pada artikel kali ini, kami akan membahas mengenai perbedaan Figma dan FigmaJam dari segi fungsionalitas, fitur dan juga cara kerjanya. Yuk simak dan kenali perbedaan antara Figma dan FigmaJam! Figma Figma merupakan salah satu aplikasi berbasis web di mana para user/contributor dapat mengubah ide-ide kreatif mereka menjadi sebuah design yang responsif dan interaktif. Design ini bisa diekspresikan melalui beberapa jenis seperti design web, aplikasi, poster, dan lainnya. Bagi UI/UX Designer, Figma biasanya digunakan untuk mendesign tampilan antarmuka (UI) untuk website maupun aplikasi mobile. Dalam Figma ini, kamu bisa berkolaborasi dengan designer lainnya untuk membuat suatu design secara bersama-sama. Ada banyak macam-macam tools di Figma ini yang akan mempermudah kamu saat mendesign, diantaranya: Menambahkan bentuk, gambar, teks, dan layers di KanvasLeft sidebar untuk melihat layer dan assets yang digunakan pada designRight sidebar untuk melihat dan menyesuaikan seperti ukuran, letak, font dan lain nya dari properti designToggle rulers dan pixel grid untuk presisi design agar lebih rapi dan sempurnaMacam-macam plugin untuk mempermudah design, seperti plugin logo, foto, live tracking map, ilustrasi, dan lain nya. source: Figma FigmaJam FigJam adalah alat kolaborasi masa kini yang inovatif untuk brainstorming ide dan solusi kreatif saat pengembangan sebuah aplikasi. Alat dari Figma ini memungkinkan tim untuk kerja sama secara real time, menuangkan ide mereka dengan banyak fitur menyenangkan dan bermanfaat seperti draw, shape, sticky note, stamp dan add text. FigmaJam bisa menjadi opsi yang tepat untuk mempermudah manajemen pekerjaan maupun tugas bersama tim kamu! 🙌😉 source: Figma Nah, apakah kamu sudah pernah menggunakan Figma dan FigmaJam? dan manfaat apa sih yang kamu dapatkan dengan menggunakan kedua tools ini? Silahkan share artikel ini jika bermanfaat untuk kamu ya!🤗 Untuk kamu yang baru mengenal Figma dan FigmaJam serta ingin mempelajari penggunaan kedua tools ini lebih dalam, kamu bisa bergabung di kelas Learn Figma For Beginner dan Mastering FigmaJam: Brainstorming to User Journey BuildWith Angga.

Kelas QA Engineer: Karir Yang Cocok Untuk Wanita di Bidang IT di BuildWith Angga

QA Engineer: Karir Yang Cocok Untuk Wanita di Bidang IT

Hello People With The Spirit Of Learning!🙌 Salah satu pekerjaan dengan demand yang cukup tinggi di Indonesia 5 tahun kedepan adalah Software Quality Assurance. Hal ini karena di Indonesia sendiri sudah mulai banyak perusahaan Start-Up di bidang IT maupun non-IT yang mulai memproduksi software untuk melancarkan kebutuhan perusahaan mereka. Tiap perusahaan, pastinya memiliki tujuan agar software yang dibuat dapat bekerja secara optimal. Agar software dapat bekerja dengan optimal, maka diperlukan peran dari seorang QA Engineer. Quality Assurance (QA) merupakan seseorang yang bertanggung jawab untuk menyiapkan dan memastikan segala kebutuhan dari aplikasi yang dibangun oleh suatu perusahaan agar dapat bekerja dengan baik. Fokus utama pekerjaan ini ialah melakukan pengujian produk meliputi: fitur, elemen, visual dan fungsionalitas sistem, dan juga maintenance. Adapun beberapa tanggung jawab dari seorang QA Engineer yang perlu kamu ketahui, diantaranya : Merancang panduan untuk report dan data record.Merencanakan pengukuran kualitas terhadap produk dengan checklist.Mengevaluasi dan mengembangkan standar produk sesuai dengan prosedur QA/QC.Memastikan produk telah memenuhi kebutuhan dan permintaan user.Membuat laporan hasil dari pemantauan dan evaluasi mengenai kualitas produk source: unsplash Nah, setelah kamu mengetahui tanggung jawab dari seorang QA Engineer, lalu faktor apa sih yang membuat pekerjaan ini menjadi opsi karir yang cocok untuk wanita? . Perlu kamu ketahui, bahwa skillset yang dimiliki seorang QA Engineer antara lain sebagai berikut : Memiliki analytical thinking yang baikMemiliki kemampuan problem solving yang baikMampu bekerja sama dengan tim yang relevanDapat mengoperasikan tools testing source: Unsplash Dilihat dari skillset dan tanggung jawab seorang QA Engineer yang sudah disebutkan diatas, mereka tidak terlalu memerlukan pemahaman yang mendalam pada bahasa pemrograman tertentu. Namun, bagaimana proses pengujian yang dilakukan oleh seorang quality assurance? tugas mereka lebih kepada menguji dari sisi design, terutama user experience dan menguji fitur serta fungsional dari sistem. Namun ketika respon sistem salah, Quality Assurance bisa memasukkannya dalam daftar bug report. Pengujian sistem juga termasuk dalam pengujian back end. Dalam tahap ini, Quality Assurance melakukan pengujian terhadap API menggunakan tools bernama Postman API dimana rangkaian alurnya sudah dibuat oleh developer. Setelah sistem telah stabil, maka Quality Assurance akan membuat automation test. Dalam tahap ini, Quality assurance melakukan pengujian sistem dengan menggunakan beberapa tools tertentu dan melakukan koding. Namun, koding yang dilakukan oleh Quality Assurance hanya untuk menjalankan alur sistem. Hal inilah yang menjadi alasan Quality Assurance menjadi pilihan karir yang tepat untuk wanita yang ingin tetap berkarir di dunia IT namun tidak perlu memahami banyak bahasa pemrograman. Kelebihan lain nya ketika menjadi QA Engineer, pekerjaan ini bisa dilakukan secara hybrid maupun full-remote. Sangat cocok untuk wanita yang ingin bekerja di rumah ataupun untuk Ibu Rumah Tangga sekalipun. Mereka bisa multitasking untuk bekerja dan mengurus pekerjaan rumah. Untuk gaji seorang QA Engineer pertahun nya berada di kisaran Rp. 6.000.000/bulan atau Rp. 72.000.000/tahun. Nah, untuk kamu para wanita, sudah siap belum berkarir sebagai QA Engineer?. Jika masih bingung, kamu bisa bergabung di kelas Complete Beginner QA Engineer: E2E Testing With Cypress. Semoga artikel ini bermanfaat untuk kamu ya!🙌😉 BuildWith Angga

Kelas Membuat Project Baru Pada Figma di BuildWith Angga

Membuat Project Baru Pada Figma

Hello, People With The Spirit Of Learning! Artikel kali ini akan menjelaskan cara bagaimana membuat suatu project baru di Figma, dan siapa saja yang bisa melihat suatu project yang sudah di buat di Figma. Artikel ini cocok sekali untuk kamu pemula yang ingin beralih menggunakan Figma secara individu maupun secara tim. Bagaimana cara membuat project baru di Figma ? Terdapat dua cara dalam membuat suatu project baru di Figma: 1.Membuat Project Baru Melalui The Team Klik New Project pada halaman menu 2.Membuat Project Baru Melalui Left Sidebar Pada cara kedua kamu dapat membuat project baru dengan tim secara spesifik, dimana kamu atau tim dapat melihat project melalui browser file. Klik the team pada bilah sisi kiriKlik (+) untuk membuat project baru By: Figma.com Beri nama pada project dengan nama yang mudah diingat, kamu bisa mengganti nama pada project kamu kapan saja By: Figma.com Untuk tim profesional atau tim organisasi dapat mengatur project dengan merubah izin pengaturan (permissions setting) untuk semua orang (everyone) pada nama tim (team name), dan dapat mengedit serta memilih dengan pilihan melalui: Mengedit: anggota tim dapat mengakses project dengan level izin pada tim. Dapat melihat: anggota tim hanya dapat melihat file project, mesikpun anggota tim memiliki izin untuk edit Khusus Undangan: yang dapat mengakses file dalam project hanya anggota tim atau kolaborator yang kamu undang. By: Figma.com Catatan: Untuk tim pemula hanya dapat membuat project yang dapat diedit, dan anggota tim dapat mengakses project berdasarkan tingkat izin tim mereka. Selanjutnya, klik create project untuk membuat project baruKlik add a description pada halaman project, dan Figma akan menampilan halaman project di file browser. Selanjutnya, pada Figma suatu project dapat dilihat melalui: 👀 View-only project Hanya pemilik atau pembuat suatu project yang dapat mengedit project tersebut. Anggota tim hanya dapat melihat file dalam project, mesikpun anggota tim memiliki izin mengedit. 🔒Invite-only project Project ini tidak tersedia untuk semua anggota tim karena merupakan project khusus yang dimana anggota tim hanya dapat mengakses project khusus undangan jika anggota tim diundang. Project khusus undangan sangat cocok untuk anggota tim dalam membangun suatu desain tim. Nah, itu adalah penjelasan tentang bagaimana cara membuat suatu project baru di Figma. Yuk, segera memulai membuat project baru di Figma, dan menambah portofolio kamu. Semoga artikel ini bermanfaat, semangat! BuildWith Angga.

Kelas Syarat Figma Pada Browser di BuildWith Angga

Syarat Figma Pada Browser

Hello, People With The Spirit Of Learning! Artikel kali ini cocok untuk kamu yang ingin beralih menggunakan Figma pada browser karena artikel ini akan membahas syarat untuk pengguna Figma pada browser. Sebelumnya, kita perkenalan singkat dulu terkait Figma. Apa itu Figma? Figma merupakan perangkat lunak berbasis browser yang dapat dijalankan di semua sistem desktop, seperti MacOs, Windows, Linux, dan Chrome OS. Figma juga dapat kamu unduh pada aplikasi seluler yang tersedia di perangkat iOS dan Android. Operating Systems Pada sistem operasi, Figma menggunakan WebGL (Web Graphics Library) yang dapat berjalan dengan baik pada browser karena memiliki syarat grafis yang sangat rendah. Persyaratan browser untuk pengguna Figma minimum: Chrome 66+Firefox 78+Safari 13+Microsoft Edge 79+ Catatan: Jika kamu menggunakan Microsoft Edge, kamu harus menonaktifkan strict mode atau mode ketat yang ada di web Figma.com. Sedangkan, persyaratan untuk sistem operasi Figma minimum: Windows 8.1Apple MacOS 10.12 (macOS Sierra) dan versi lebih baruJenis OS Linux apapun yang dapat mengakses browserJenis Chrome OS apapun yang dapat mengakses browser. Catatan: Silahkan kunjungi What’s my Browser untuk mengetahui browser dan versi sistem operasi apa yang kamu gunakan. Graphics Cards (Kartu Grafis) Graphics Cards atau kartu grafis merupakan komponen penting dari perangkat keras pada komputer. Figma tidak membatasi pengguna kartu grafis tertentu, jenis dukungan browser apa pun seperti, Windows, Linux, OS, Safari akan memberikan perbaikan bug apa pun yang terkait dengan WebGL. Kartu Grafis Khusus Biasanya, beberapa laptop baru memiliki kartu grafis khusus, seperti Nvidia atau AMD, dan prosesor grafis terintegrasi, seperti Intel atau AMD. Biasanya, beberapa laptop baru memiliki kartu grafis khusus, seperti Nvidia atau AMD, dan prosesor grafis terintegrasi, seperti Intel atau AMD. Jika kamu memiliki laptop dengan prosesor dual-GPU, kamu dapat memilih untuk menggunakan GPU khusus, ini akan membantu kamu dalam peningkatan kerja di Figma. Informasi untuk kamu pengguna prosesor GPU khusus: 1. MacOs Cari tahu prosesor grafis mana yang digunakan pada MacBook Pro,Mengatur kinerja grafis pada Macbook Pro (menonaktifkan pengalihan otomatis). 2.Windows (Nvidia) Pada panel kontrol Nvidia, atur chrome.exe untuk menggunakan kartu grafis diskrit. 3. Windows (AMD) Pada panel kontrol AMD, atur chrome.exe untuk menggunakan kartu grafis diskrit. Kartu Grafis yang Tidak Didukung Figma Kartu Grafis yang tidak didukung oleh Figma, yaitu Intel HD Graphics 3000 karena GPU memiliki bug yang diketahui dapat menyebabkan gangguan rendering saat menggunakan Figma. Syarat dan Ketentuan Perangkat seluler (Mobile) pada Figma Jika kamu menggunakan mobile atau perangkat seluler pada Figma, kamu hanya dapat mengakses dan melihat dari file Figma. Ketentuan tersebut berlaku untuk pengguna iPad, tablet, atau perangkat seluler, dan juga berlaku pada tablet yang menjalankan OS dekstop lengkap, seperti Microsoft Surface. Selain itu, kamu juga dapat melihat prototipe pada browser seluler dengan membuka tautan pembuatan prototipe di perangkat seluler. Syarat Minimum untuk mengakses file Figma pada browser perangkat seluler: Chrome pada Android (7.0-9.0)Safari di iOS 11.4+ Catatan: Jika kamu ingin menggunakan Figma secara langsung pada perangkat seluler, kami sarankan untuk mengunduh aplikasi seluler Figma yang tersedia di perangkat iOS dan Android. Nah, kamu sudah mengetahui syarat dan ketentuan browser pada Figma. Jika kamu sudah memenuhi syarat yang ada pada artikel, kamu sudah bisa menggunakan Figma pada browser kamu. Semoga artikel ini bermanfaat buat kamu, ya! BuildWith Angga.

Kelas Figma: Konfigurasi Browser Untuk Figma di BuildWith Angga

Figma: Konfigurasi Browser Untuk Figma

Ada beberapa hal yang perlu kamu set-up di browser mu sebelum memulai menggunakan Figma. Pastikan kamu telah menginstal dan mengaktifkan WebGLAtur zoom browser kamu hingga 100%Pastikan juga bahwa browser kamu adalah versi yang terbaru saat iniNonaktifkan fitur swipe kanan/kiri (khusu MacOS)Install Figma Font Helper untuk menggunakan font default/lokal (Buka tab baru) Note: Jika kamu menginstall Aplikasi Figma di Desktop, kamu tidak perlu menggunakan pengaturan konfigurasi ini. Karena pengaturan konfigurasi ini hanya berlaku untuk Figma yang dijalankan di browser. Berikut ini tutorial untuk mengkonfigurasikan Figma di beberapa browser seperti Google, Safari, Mozila Firefox, Microsoft Edge, Mac. 1. GOOGLE Buka Google Chrome dan pergi ke Chrome Settings MacOS: pergi ke Chrome Preferences (Preferensi Chrome) pada menu, atau juga bisa menggunakan shortcuts Command + ,Windows: Buka File > Preferences atau bisa klik elips vertikal yang ada di pojok kanan atas, dan pilih Settings (Pengaturan) Appearance (Tampilan) Di bagian **Appearance (**Tampilan), pastikan zoom halaman kamu sudah diatur ke 100%. Hal ini untuk memastikan file ditampilkan secara akurat pada resolusi yang lebih tinggi. source: Figma Advanced Scroll ke bawah dan klik link Advanced untuk memperbesar halaman pengaturan. Pada bagian System, Enable Use Hardware Acceleration jika ada. Source: Figma Enable WebGL Jika saat ini WebGL tidak diaktifkan, Kamu dapat menuju ke pengaturan Chrome Flags di browser: chrome://flags/ Update daftar ganti rendering software agar diaktifkan. Ini harus di dekat bagian atas list: Source: Figma Atau, Kamu dapat mencari Flags terkait WebGL dan diubah ke enabled. 2. MOZILA FIREFOX Buka Firefox dan buka menu pada pojok kanan atasDengan melakukan step diatas, kamu dapat melihat seberapa level zoom mu. Kamu juga dapat menggunakan icon - (untuk mengecilkan) dan + (untuk memperbesar)Pada menu yang sama, pilih Prefrences untuk opsi yang lain: scroll ke bawah menuju Firefox Updates. Kamu dapat melihat versi terbaru saat ini dan apakah statusnya sudah ter update atau belum: Source: Figma klik Check for Updates untuk cek informasi seputar update an. Jika kamu belum update browser ke versi terbaru, maka akan ada notifikasi peringatan untuk update browser versi terbaru dan Firefox akan secara otomatis me-restart setelah menginstall.Sebaiknya perbarui pengaturan Allow Firefox untuk Automatically Updates (Update Otomatis). SAFARI Safari diupdate secara otomatis oleh macOS setiap ada versi terbaru. Jika ada versi baru macOS yang tersedia, kamu dapat memperbaruinya di komputer secara langsung, yang juga akan meng-update Safari dengan pembaruan yang diperlukan. Buka Figma di SafariBuka Safari > Preferences (Preferensi) pada menu utamaBuka Websites dan klik Page ZoomDi bagian Situs web yang saat ini terbuka, pastikan Figma diatur ke skala100%: Source: Figma Note: Kamu harus menggunakan setidaknya V10.11.1 (El Capitan) jika Anda ingin menggunakan pinch-and-zoom. MICROSOFT EDGE Figma tidak lagi mendukung Internet Explorer: Jelajahi browser yang didukung → Untuk update Microsoft Edge ke versi yang terbaru: Pada menu, pilih Settings > Updates & SecurityPilih Windows Updates di bagian atas daftar lalu Check For UpdatesJika ada pembaruan, mereka akan mulai mengunduh Microsoft Edge dan di re-start secara otomatis. Untuk mengatur default zoom: Pilih Menu di sudut kanan atas jendela.Pilih Settings pada opsi.Pilih Appearance pada menu di kolom kiri.Di bagian Zoom, update pengaturan halaman zoom untuk memilih tingkat zoom default baru. Enhanced Security Untuk menggunakan Figma di Microsoft Edge, Kamu harus memastikan pengaturan Strict Mode dinonaktifkan untuk Figma.com. MAC Jika Kamu menggunakan trackpad di macOS, mungkin kamu perlu menonaktifkan gerakan scroll kiri/kanan. Hal ini akan mencegah jika kamu secara tidak sengaja menutup file Figma, ketika sedang scroll ke kiri dan ke kanan di dalam kanvas. Buka System Preferences dan buka Trackpad settings: Source; Figma Source; Figma Disable opsi Swipe between pages Source: Figma Nah, kita telah belajar bagaimana cara mengkonfigurasikan figma dengan berbagai browser. Semoga artikel ini bermanfaat untuk kamu ya!🙌😉. BuildWith Angga

Kelas Alasan Mengapa Kamu Harus Belajar Bahasa Pemograman Dart di BuildWith Angga

Alasan Mengapa Kamu Harus Belajar Bahasa Pemograman Dart

Hello, People with the spirit of learning! Sebagai Mobile Developer, bahasa pemograman harus kamu kuasai dalam membuat mobile aplikasi. Artikel kali ini akan menjelaskan alasan mengapa kamu harus belajar Bahasa Pemograman Dart atau Dart Programming Language Sebelum menampilkan alasan kamu harus belajar Bahasa Pemograman Dart, artikel ini akan menjelaskan apa itu dart, dan sejarah mengenai bahasa pemograman Dart karena pepatah berkata ‘tak kenal maka tak sayang’. Yuk, mengenal Dart terlebih dahulu! Apa itu Dart? Dart adalah salah satu bahasa pemograman yang dikembangkan oleh Google (By: Lars Bark & Kasper Lund), dan merupakan bahasa pemograman pada platform Flutter. Bahasa pemograman Dart juga merupakan bahasa modern yang lengkap serta memiliki kemiripan dengan bahasa pemograman lain, seperti JavaScript/JS. By: Dart.dev Sejarah tentang Bahasa Pemograman Dart Bahasa pemograman Dart secara resmi diperkenalkan pada 10 Oktober 2011 dan versi pertama bahasa pemograman Dart yaitu versi 1.0 resmi dirilis pada 14 November 2013. Versi terbaru bahasa pemograman Dart adalah versi 2.13.0 yang dirilis pada 18 Mei, 2021. Tujuan Google membangun Dart adalah kebutuhan untuk membangun mobile aplikasi, front-end, back-end, loT. Alasan mengapa kamu harus belajar Dart 1. Bersifat Fleksibel Dart bersifat fleksibel dan dinamis, dapat dikompilasi ke dalam bahasa pemograman JavaScript dengan compiler yang disertakan di dalamnya, seperti kode x64 untuk perangkat seluler, JavaScript untuk browser web, dan executable untuk windows, Mac OS, dan Linux. By: Fireship 2. Mudah Dipelajari Bahasa Pemograman Dart mudah untuk kamu pemula yang ingin menjadi Developer, khususnya Flutter Developer karena Dart merupakan Bahasa pemograman Flutter. Dart mudah dipelajari karena memiliki kurva belajar yang pendek dan bahasa ini mendukung pengetikan yang longgar dan kuat. Dart juga terstruktur dengan baik, jika kamu sudah mengetahui C, Java, atau C# maka Dart akan sangat mudah kamu pelajari. 3. Bersifat Open Source Yang dimaksud Open Source dalam Dart, yaitu Dart tidak memerlukan lisensi apapun, atau siapa pun dapat mengunduh dan menggunakannya dari situs resminya secara gratis. 3. Memiliki Syntax yang Bersih dan Aman Pada bahasa pemograman Dart, syntax atau struktur kode bersifat sederhana, terstuktur dengan baik, dan bersifat familiar. Dart menggunakan C-Style syntax sehingga mekanismenya mirip dengan bahasa pemrograman C, Java, JavaScript, dan Swift. Bahasa pemograman Dart memiliki kemampuan untuk mengidentifikasi kesalahan saat kompilasi oleh karena itu, struktur kode Dart bersifat aman. By: Michael Thomsen 5. Kompiler Dart bersifat Cepat Dengan mengkompilasi kode selama proses pembuatan, developer juga dapat mencapai rendering UI yang lebih cepat di browser. Kompiler Dart juga memperingatkan developer tentang kesalahan yang ada sebelum kode berjalan. Selanjutnya, ini adalah beberapa perusahaan dan aplikasi yang menggunakan bahasa pemograman Dart: Nah, itu adalah beberapa alasan yang dapat meyakinkan diri kamu untuk belajar bahasa pemograman Dart. Masih bingung? Yuk, belajar bareng mentor berpengalaman mengenai Dart Programming, kamu bisa bergabung di kelas Dart Programming Untuk Persiapan Belajar Flutter Sampai bertemu di kelas, selamat bergabung dan selamat belajar! kelas rekomendasi: Dart Programming Untuk Persiapan Belajar Flutter BuildWith Angga.

Kelas Basic Flutter Developer: Menambahkan Theme Style di BuildWith Angga

Basic Flutter Developer: Menambahkan Theme Style

Hello, People with the spirit of learning! Pada artikel kali ini kita akan membahas cara menambahkan Theme Style pada Flutter. Sangat cocok untuk kamu pemula yang ingin menjadi Flutter Developer! Pada Flutter kita belajar cara mengatur jenis teks, warna teks, ukuran teks, dan ketebalan teks. Namun, kita hanya dapat mengatur teks tertentu saja, sehingga jika ingin menggunakan preset yang sama untuk di halaman atau route lain maka kita harus mengatur ulang preset tersebut. Oleh karena itu, kita kali ini akan belajar bagaimana cara menambahkan theme style agar dapat membagi preset tema yang sudah kita atur ke semua route aplikasi. Buka link Pub.dev Kita mulai dari searching Google fonts pada web pub.dev, copy paste dependencies google fonts pada halaman dart di bagian Pubspec.yaml, lalu save. Setelah itu, import material dan menambahkan import google fonts pada file baru di lib dart. 2. Menuliskan jenis warna teks, dan kode warna sesuai yang diinginkan. 3. Membuat Teks style pada Title. Pada title text style kita harus menuliskan font type, color, font weight, dan font size sesuai yang diinginkan lalu jangan lupa untuk save. 4. Membuat teks style pada subTitle Selanjutnya, pada bagian subTitle Text Style kita harus menuliskan font type, color, font weight, dan font size sesuai yang diinginkan lalu save. 5. Lakukan ulang cara ke empat untuk membuat text style yang lain, seperti membuat plan text style, desc text style, price text style, dan button text style. Nah, itu adalah tahap untuk membuat theme style yang akan mempermudah kamu dalam membuat sebuah projek mobile aplikasi. Kalau kamu ingin belajar lebih dalam mengenai basic flutter developer, kamu bisa bergabung di kelas Flutter Developer: Basic State Management. Silahkan bergabung dan selamat belajar! Kelas Rekomendasi: Flutter Developer: Basic State Management BuildWith Angga.

Kelas Update Terbaru dan Menarik dari Figma untuk UI/UX Designer di BuildWith Angga

Update Terbaru dan Menarik dari Figma untuk UI/UX Designer

Hello people with the spirit of learning! Kali ini, kita ingin berbagi informasi menarik seputar update terbaru dari Figma special untuk kalian UI/UX Designer pengguna setia Figma. Simak yuk! 1. Dark Mode Sebagai seorang UI/UX Designer, apakah kamu menyukai bekerja di malam hari? Jika iya, tidakkah kamu merasa tidak nyaman saat melihat interface Figma yang menggunakan warna putih? Saat ini, Figma memiliki fitur Dark Mode sebagai solusi atas permasalahan tersebut. Kamu dapat memilih tema terang maupun gelap, atau membiarkan pengaturan sistem kamu menentukan temanya. Jika tampilan sistem diatur menjadi gelap, maka Figma akan menggunakan tema gelap. Begitupun sebaliknya. Lalu, bagaimana cara mengaturnya? Caranya cukup sederhana, kamu dapat mengubahnya dengan langkah-langkah berikut : Buka file design FigmaBuka Preferensi > TemaPilih opsi dari daftar tema, light atau darkTada! Tema file Figma kamu telah berubah! Fitur ini bersifat device-specific. Artinya, jika kamu menggunakan akun Figma di beberapa perangkat, pengaturan tema dari satu perangkat tidak akan terbawa ke perangkat lain. Bagaimana, sudah siap bekerja di malam hari menggunakan fitur dark mode? 2. Figma and Slack Di era dimana pekerjaan banyak dilakukan secara hybrid, memastikan rekan kerja satu tim tetap update dengan segala perubahan yang ada mungkin sulit untuk dilakukan. Tetapi sekarang, kamu bisa menghubungkan Figma dengan Slack untuk mendapatkan update secara real time. Apa saja manfaatnya? Dengan mengintegrasikan Figma dengan Slack, kamu dapat melakukan beberapa hal di bawah ini: Membuat channel baru yang didedikasikan untuk menerima pemberitahuan pada file khusus proyek.Notifikasi channel tim tentang file yang baru ditambahkan ke proyek atau tim Figma.Kostumisasi channel Slack dengan pembaruan tentang percakapan yang terjadi di file yang relevan. Setelah kamu berhasil mengintegrasikan Figma dengan Slack, setiap anggota workspace Slack dapat menghubungkan akun Figma mereka dan subscribe channel untuk mendapat notifikasi. Menarik bukan? 3. Spotlight Spotlight memungkinkan kamu mengumpulkan kolaborator dalam file untuk mengikuti apa yang sedang kamu lihat pada desain Figma atau papan FigJam. Bagaimana cara menggunakannya? Simple saja, cukup lakukan dua hal berikut : Arahkan kursor ke avatar kamu di toolbar atas file desain FigJam atau Figma.Klik Spotlight me Setelahnya, semua orang yang sedang melihat file tersebut akan diberi tahu bahwa kamu ingin mereka mengikuti apa yang sedang kamu lihat. Kamu juga akan melihat berapa banyak orang dalam file yang mengikuti spotlight kamu. Ohya, untuk menghentikannya, kamu cukup klik Stop dan spotlight pun akan berhenti. 4. Play favorites Pernahkan kalian kebingungan untuk mencari file penting yang berhubungan dengan design yang sedang dikerjakan? Dengan fitur Play Favorites kita bisa menandai favorit pada design atau layer penting dan mengaksesnya dengan cepat dari bilah sisi kiri file browser kalian. Kita bisa mengklik dan menyeret file atau project favorit dan menyusunnya di bar sebelah kiri. Kemudian, Figma akan memberi bintang pada file favorit kamu. Berikut beberapa cara untuk menambahkan file ke tab favorit: Tampilan bergaris Klik logo bintang di sudut kanan bawah layar untuk ditambahkan ke favoritKlik kanan layar lalu pilih Tambahkan ke favorit AndaAtau, klik dan seret layar langsung ke bagian Favorit Tampilan daftar Klik logo bintang di sebelah kiri nama file untuk ditambahkan ke favoritAtau klik kanan nama filenya lalu pilih Add to your favoritesKita juga dapat mengklik dan menyeret file dari daftar ke bagian Favorit File yang tidak disukai Kita juga dapat menghapus file dari Favorit dengan beberapa cara berbeda, yaitu: Di browser file, klik logo bintang di sebelah file yang tidak disukaiDi editor, klik Hapus dari favorit Anda di sebelah nama file 5. Safe and sound Kita sering kali dihadapkan dengan situasi dimana kita ingin berbagi sebuah file secara publik, tapi hanya orang tertentu yang dapat mengaksesnya. Sekarang kita dapat menambahkan kata sandi menggunakan pengaturan berbagi tautan file. Dimana kita bisa mengontrol akses mereka yang tidak mempunyai izin untuk membuka file dengan bantuan fitur Tambahkan perlindungan kata sandi: 1. Buka file dan klik Bagikan2. Perbarui pengaturan viewers ke Siapapun dengan link dan password 3. Masukkan kata sandi di bidang Pilih kata sandi. Tidak ada persyaratan untuk panjang kata sandi atau tipe karakter.4. Klik Simpan. Figma akan menunjukkan kapan kata sandi ditetapkan dan oleh siapa kata sandi itu dibuat.5. Kita dapat memperbarui izin file untuk siapa saja yang mengaksesnya menggunakan tautan dan kata sandi. Pilih dari dapat mengedit sampai hanya dapat melihat prototipe.6. Figma akan memperbarui akses file dan memuat ulang file. Untuk mengakses file lagi, new user perlu memasukkan kata sandi.7. Pilih Salin tautan Bagaimana, dari keseluruhan update terbaru Figma, manakah yang menjadi favoritmu? Nantikan berbagai informasi menarik lainnya seputar UI UX design dan web-development di website kami ya! See you people.

Kelas Belajar Integrasi Cloud Hosting untuk WordPress di BuildWith Angga

Belajar Integrasi Cloud Hosting untuk WordPress

Hello people with the spirit of learning! Memahami bagaimana integrasi CloudHosting adalah hal yang penting bagi seorang WordPress Developer. Mengapa demikian? Yuk langsung saja simak penjelasannya! CloudHosing merupakan jenis web hosting yang menggunakan beberapa server untuk menjalankan website sehingga beban server menjadi lebih seimbang dan lebih stabil. CloudHosting juga memungkinkan kamu memiliki resource yang tidak terbatas. Menarik bukan? Nah, salah satu penyedia web hosting yang telah dipercaya banyak perusahaan besar di Indonesia ialah IDCloudHost. IDCloudHost akan membantumu mengelola website secara fleksibel dengan memastikan server website selalu aktif, aman dari cyber threat, dan tentunya akses konten dari server ke browser pengunjung bisa berjalan efisien berkat bantuan Object Storage. Jika kamu ingin mempelajari lebih lanjut mengenai IDCloudHost dan bagamina cara mengintegrasikannya dengan WordPress, kami memiliki rekomendasi kelasnya khusus untukmu! Mastering Cloud VPS for Website Developer with IDCloudHost Key Points Mempelajari VPS dan Cloud VPSMempelajari Object Storage IS3 dari IDCloudHostMempelajari pengembangan WordPress dengan Cloud VPSMelakukan integrasi WordPress ke Object Storage IS3 IDCloudHost Bersama Mentor Achmad Fauzi, kamu akan belajar konfigurasi server dengan Cloud VPS agar website memiliki skalabilitas dan performa penyimpanan data SSD bisa lebih cepat. Untuk mulai belajar, silahkan bergabung pada kelas dengan klik link dibawah ini ya! https://buildwithangga.com/kelas/mastering-cloud-vps-for-website-developer-with-idcloudhost?thumbnail=8NRtDwUEdB.274&main_leads=searchresult Kamu juga dapat mempelajari hal lain seputar pengembangan website dengan bergabung pada kelas lainnya yang telah kami sediakan. Silahkan kunjungi buildwithangga.com untuk informasi lebih lengkapnya. Semoga bermanfaat dan sukses selalu!

Kelas Rekomendasi Kelas Online Membuat Website Tanpa Coding di BuildWith Angga

Rekomendasi Kelas Online Membuat Website Tanpa Coding

Hello people with the spirit of learning! Apakah kamu ingin membuat website tanpa harus melakukan coding? Tentu saja bisa dengan CMS yang satu ini, WordPress! Sebagai Content Management System, WordPress memungkinkan kamu untuk membuat dan mengelola konten di website dengan mudah melalui fitur yang telah disediakan. Untuk kamu yang ingin belajar menggunakan WordPress, kamu bisa memulainya dengan mengikuti rekomendasi kelas di bawah ini ya! 1. Wordpress.com Website Development Untuk membuat website, kita membutuhkan keahlian coding, design, server, database, dan masih banyak lainnya. Tapi di sini, mentor Angga akan membantumu untuk membuat website tanpa membutuhkan keahlian tersebut. Sudah siap untuk mencoba? Pada kelas ini, kita menggunakan wordpress.com untuk mengelola sebuah website yang dapat diakses oleh siapa saja dengan gratis tanpa proses yang rumit. Ohya, jangan ragu untuk bergabung karena kelas ini sangat beginner friendly dan mudah dipahami. Key Points Mempublikasikan website agar diakses masyarakatMembangun suatu website untuk bisnisMemodifikasi tema pada websiteMemodifikasi tema pada website So, teruntuk kamu yang ingin membuat website dengan cepat dan mudah, cobalah ikuti kelas WordPress gratis kali ini dari BuildWith Angga! https://buildwithangga.com/kelas/wordpresscom-website-development?thumbnail=Ke6cTQXPwT.58&main_leads=searchresult 2. Wordpress.org Website Development Berbeda dengan wordpress.com, wordpress.org memungkinkan kamu untuk melakukan kostumisasi penuh terhadap website. Plugin dan tema yang disediakan pun lebih beragam. Sangat sesuai untuk kamu yang ingin lebih mengeksplorasi tampilan dari website berbasis WordPress. Melalui kelas ini kamu akan diajarkan berbagai hal dari mulai instalasi WordPress, XAMPP, plugin, dan tema. Sangat sesuai untuk kamu yang ingin berkenalan dengan wordpress.org. Key Points Mengenal Content Management SystemBelajar membuat halaman dan artikel pada Wordpress.orgBelajar kustomisasi pada Wordpress.orgBelajar kustomisasi pada Wordpress.org Sudah siap mengeksplorasi tampilan website tanpa coding? Yuk segera bergabung di kelas dan selamat belajar yaa! https://buildwithangga.com/kelas/wordpressorg-website-development?thumbnail=TsRZS5E15F.84&main_leads=searchresult Nah, itu adalah dua rekomendasi kelas WordPress dari BuildWith Angga yang pastinya dapat kamu ikuti tanpa mengeluarkan biaya. Untuk mempelajari WordPress lebih mendalam, kamu bisa memilih kelas yang sesuai kebutuhanmu di buildwithangga.com, semoga bermanfaat dan suskses selalu!

Kelas 3 Kelas Online Gratis Untuk Pemula UI/UX Berdasarkan Rolenya di BuildWith Angga

3 Kelas Online Gratis Untuk Pemula UI/UX Berdasarkan Rolenya

Hello people with the spirit of learning! Tahukah kamu bahwa UI/UX adalah bidang yang luas? Jika diamati secara lebih mendalam, ada berbagai role dalam bidang UI/UX seperti UI Designer, UX Designer, UX Researcher, UX Engineer, UX Writer dan lain sebagainnya. Nah pada kesempatan ini, kami akan memberikan tiga rekomendasi kelas UI/UX berdasarkan role nya sehingga kamu bisa memilih mana yang paling sesuai untukmu. 1. UI Design : Wireframe to Visual Design Jika kamu ingin menjadi seorang UI Designer, kamu bisa mengawalinya dengan bergabung pada kelas ini. Di kelas ini kamu akan mempelajari bagaimana mengubah wireframe ke visual design dengan menggunakan Figma. Kamu juga akan mempelajari bagaimana menentukan hirarki pada konten, membuat moodboard untuk referensi design, dan masih banyak lagi. Menarik bukan? Key Points Import Gambar dan Icon untuk Tampilan UI DesignMengubah Tampilan Wireframe menjadi Visual DesignMenentukan Hirarki Teks pada KontenMembuat Moodboard untuk Referensi Design Ayo segera bergabung di kelas UI Design dengan klik link pendaftaran kelas di bawah ini ya https://buildwithangga.com/kelas/ui-design-wireframe-to-visual-design?thumbnail=FjEfJ0b3GM.61&main_leads=searchresult 2. UX Design : Userflow Pada kelas ini kamu akan memperdalam keahlian UX Design terutama pada bagian User-Flow, di sini kamu akan mengenal apa itu User-Flow dan bagaimana cara mengimplementasikan hal tersebut pada suatu design aplikasi. Sebelum memulai pembelajaran kamu akan diminta untuk mendownload Tools Whimsical. Jangan khawatir, tools ini juga gratis loh. Key Points Mengenal apa itu User-Flow dan ManfaatnyaMengimplementasikan User-Flow pada design aplikasiMenggunakan Whimsical untuk mendesain Flow aplikasiMenggunakan Whimsical untuk mendesain Flow aplikasi Sudah siap untuk mengeksplorasi dunia UX Design? Yuk bergabung pada link berikut untuk segera memulai pembelajaran! https://buildwithangga.com/kelas/ux-design-user-flow?thumbnail=cYPaBIdP1J.83&main_leads=searchresult 3. Learn UX User Persona Ingin terjun ke dunia UI/UX tapi kamu kurang suka dalam membuat visual design? Sudah kenal dengan UX Researcher belum? Role ini bisa jadi sesuai untukmu. UX Researcher adalah seseorang yang bertanggung jawab untuk meenganalisis perilaku dan kebutuhan pengguna. Melalui kelas ini, kamu akan mempelajari cara membuat user persona dan user story board yang merupakan dua hal yang penting dalam UX research. Pasalnya, persona dan story board dapat membantu menciptakan UX yang baik pada suatu aplikasi. Untuk bergabung pada kelas UX User Persona, kamu dapat mengakses link yang sudah kami sediakan. Sampai jumpa di kelas ya! https://buildwithangga.com/kelas/learn-ux-user-persona?thumbnail=Y2qxhXI7TQ.297&main_leads=searchresult Setalah mengetahui beberapa role yang ada di dalam UI/UX, manakah yang paling menarik perhatianmu? Ohya, untuk mempelajari skill yang dibutuhkan role tersebut secara lebih mendalam, kamu bisa melanjutkannya dengan bergabung pada kelas premium yang kami sediakan. Silahkan kunjungi buildwithangga.com untuk informasi lebih lanjut ya!

Kelas Kesempatan Internship Sebagai Developer di 10 Perusahaan di BuildWith Angga

Kesempatan Internship Sebagai Developer di 10 Perusahaan

Ingin mendapatkan pengalaman kerja sebelum lulus? Internship solusinya. Dengan mengikuti internship kamu akan mendapatkan keterampilan dan pengalaman dalam lingkungan kerja secara langsung. Berikut telah kami kumpulkan 10 perusahaan yang saat ini sedang membuka program internship sebagai Developer sehingga kamu tidak perlu repot mencarinya di internet. 1. OCBC NISP Developer Internship Program NEON (iOS Engineer) Jakarta Ingin mencoba rasanya bekerja di bank? OCBC NISP merupakan salah satu bank swasta di Indonesia. OCBC NISP sedang menyelenggarakan program internship untuk iOS Engineer. Siap untuk bergabung? Link pendaftaran: https://www.linkedin.com/jobs/view/2946209881 2. ShopeePay Software Engineer Intern (Jakarta) Sudah tidak asing lagi bukan dengan ShopeePay? Apa kamu termasuk salah satu penggunanya? Saat ini, ShoopePay sedang membuka intern untuk posisi Software Engineer di Jakarta. Yuk buruan daftar! Link pendaftaran: https://boards.greenhouse.io/shopee/jobs/5701353002?gh_src=3175716a2us 3. OY! Indonesia Full-time Software Engineering Intern (Jakarta) Aplikasi finansial yang memungkinkan transfer antar bank dan lain sebagainya, OY, sedang membuka lowongan intrenship sebagai Software Engineer. Segera daftar untuk bekerja di kantornya yang berada di Jakarta. Link pendaftaran: https://www.kalibrr.com/c/oy-indonesia/jobs/160604/software-engineering-intern 4.Fintax 6 Months Backend Engineer Intern Pernah mendengar Fintax? Fintax merupakan mitra resmi Otoritas Pajak Indonesia (Direktorat Jenderal Pajak). Rasakan pengalaman internship selama 6 bulan sebagai Backend Engineer di perusahan yang bergerak dalam bidang pajak dengan mendaftar di Fintax. Link pendaftaran: https://www.kalibrr.com/id-ID/c/pt-fintek-integrasi-digital/jobs/197257/backend-engineer-intern 5. Pegipegi Frontend Engineer Intern (Jakarta) Saat ini, Pegipegi sedang membuka kesempatan intern sebagai Frontend Engineer di Jakarta. Pegipegi merupakan platform yang menangani booking hotel, pembelian tiket pesawat dan lain sebagainya. Langsung aja daftar di link di bawah ini ya! Link pendaftaran: https://ptgold.darwinbox.com/ms/candidate/careers/a622f1db975ad0 6. UR (PT. Rahmat Tuhan Lestari) Internship Flutter Developer (Bandung) Kali ini, kabar baik datang dari Bandung. Untuk kamu yanng berlokasi di Bandung dan sekitarnya, saat ini PT Rahmat Tuhan Lestari sedang membuka lowongan internship. Yuk segera daftar! Link pendaftaran: https://glints.com/opportunities/jobs/mobile-app-developer-flutter-intern/5e2bd768-28bd-49d0-86f9-51337652ee3e  7. Widya Analytic Software Engineer Paid Intern (Yogyakarta) Perusahaan Widya Analytic berfokus pada Big Data dan Artificial Intelligence. Jika kamu tertarik, kamu bisa bergabung sebagai intern software engineer disini. Ohya, ini merupakan program internship berbayar loh! Link pendaftaran: https://glints.com/opportunities/jobs/software-engineer-paid-intern/746273c1-b6b8-475f-bdbf-57b39ff1c7b0 8. Doku Software Engineer Intern (Jakarta) DOKU yang sebelumnya bernama PT. Nusa Satu Inti Artha dikenal sebagai perusahaan penyedia layanan pembayaran elektronik dan manajemen resiko pertama di Indonesia. Bergabung sebagai intern Software Engineer di DOKU dengan mendaftar pada link di bawah ini ya! Link pendaftaran: https://glints.com/opportunities/jobs/software-engineer-intern/d5654db7-8b7a-4274-83b8-5fb14951e862 9. Ninja Van Software Engineer Intern (Jakarta) Ninja Van adalah perusahaan logistik yang telah berkembang pesat menjadi salah satu perusahaan logistik terbesar dan tercepat di Asia Tenggara. Program internship yang dibuka pada saat ini ialah untuk posisi Software Engineer. Link pendaftaran: https://jobs.lever.co/ninjavan/dbf2946a-1d8e-4907-b495-6bfaa039308a 10. PT. Venturo Pro Indonesia Mobile Programmer Internship (Malang) Yuk segera daftar untuk mendapatkan kesempatan internship sebelum program-program tersebut ditutup. Ohya, kamu dapat membekali diri dengan mengikuti kelas kami sebelum memutuskan mendaftar intern agar kamu lebih siap dan percaya diri. Semoga bermanfaat dan sukses selalu yaa!

Kelas Lowongan Pekerjaan Khusus Golang Developer di BuildWith Angga

Lowongan Pekerjaan Khusus Golang Developer

Golang merupakan slaah satu bahasa pemrograman yang cukup populer belakangan ini. Pada kesempatan kali ini, kami akan membagikan informasi lowongan pekerjaan khusus untuk kamu yang mendalami pengembangan aplikasi dengan menggunakan Golang. 1. RebelWorks Full-time Jakarta RebelWorks merupakan perusahaan penyedia layanan pengembangan web dan aplikasi yang dimaksudkan untuk menawarkan konsultasi penelitian pemrograman untuk kepentingan bisnis. Berminat bergabung sebagai golang developer di perusahaan ini? Langsung aja klik link di bawah ini ya! Link pendaftaran : https://glints.com/opportunities/jobs/golang-developer/12312109-733a-4de1-97e5-9be5c8a3f689 2. Kiddo.id Kiddo.id adalah marketplace aktivitas anak yang menyediakan fitur tes, pemantauan, dan stimulasi bagi orang tua untuk memaksimalkan pertumbuhan dan potensi anak-anak mereka sedini mungkin. Saat ini Kiddo.id sedang mencari Full-time Golang Developer untuk bekerja di Jakarta. Link Pendaftaran: https://glints.com/opportunities/jobs/junior-golang-developer/6a75e5a6-fb8f-4437-83e6-d6e19b418352 3. Senja Full-time Jakarta / Remote Jika kamu sedang mencari lowongan pekerjaan Golang Developer yang memungkinkan untuk bekerja secara remote, Senja adalah solusinya. Perusahaan ini sudah lebih dari 7 tahun berfokus pada layanan teknologi seperti pembuatan web dan aplikasi mobile. Link pendaftaran: https://glints.com/opportunities/jobs/golang-developer/3c1ff540-4ca4-48bb-81d7-707b8986be4f 4. Gits.id Full-time Bandung / Remote Untuk kamu yang tinggal di Bandung dan sekitarnya, kamu bisa mencoba melamar posisi Golang Developer di Gits.id. Ini merupakan perusahaan yang bergerak pada bidang digital agensi, khususnya adalah konsultasi IT. Link pendaftaran: https://gits.id/job-vacancy/golang-developer-bandung/ 5. Celerates Full-time Jakarta est: IDR6,000,000 - 12,000,000/month Celerates sedang membuka kesempatan untuk kamu yang ingin berkarir sebagai Golang Developer, dengan menawarkan salary 6 sampai 12 juta per bulan. Sama seperti beberapa perusahaan yang sudah disebutkan tadi, celerates juga merupakan perusahana penyedia layanan teknologi. Link pendaftaran: https://glints.com/opportunities/jobs/golang-developer/347d8a47-1464-4a94-b842-1de7ae1c4f7d 6. Mitrais Full-time Mitras sudah lebih dari 30 tahun berkembang sebagai perusahaan pengembangan perangkat lunak. Bergabung bersama Mitras sebagai Golang Developer untuk bekerja secara remote dari mana saja dengan mendaftar pada link yang sudah disediakan. Link pendaftaran: https://apply.mitrais.com/jobs/72 7. Lawencon Full-time Jakarta Lawenson adalah perusahaan dengan layanan penyedia solusi IT untuk kebutuhan dan tantangan bisnis seperi ERP dan lain sebagainya. Lawenson sedang mencari Golang Developer untuk bergabung bersama tim developernya. Link pendaftaran: https://www.karir.com/opportunities/1330573 8. Code.id Full-time Jakarta Code.id membuka lowongan pekerjaan sebagai Golang developer utnuk bekerja di Jakarta, Fokus dari perusahaan tersebut adalah software developmeent dan IP Produv Link pendaftaran: https://www.kalibrr.com/c/code-id/jobs/186304/golang-back-end-developer 9. FinAccel Full-time FinAccel adalah perusahaan fintech yang salah satu productnya ialah Kredivo. Jika kamu ingin merasakan pengalaman bekerja pada perusahaan fintech sebagai Golang Developer, kamu bisa mendaftar pada link berikut. Link pendaftaran: https://finaccel.co/careers/#213 10. Happy Fresh Full-time Terakhir, Happry Fresh, supermarket online yang mmengantarkan pesanan sampai dengan depan rumah. Happy Fresh sedang membutuhkan Golang Developer untuk bekerja secara Full-time. Lowongannya dapat diakses pada link di bawah ini. Link pendaftaran: https://jobs.lever.co/happyfresh/41967e85-7055-4d20-8055-774ad880c304 Kesempatan untuk berkarir sebagai Golang Developer sangatlah luas. Tunngu apa lagi? Daftarkan dirimu pada perusahaan yang kamu minati. Semoga bermanfaat, dan sukses selalu yaa!

Kelas 10 Lowongan Pekerjaan Remote Terbaru untuk Developer di BuildWith Angga

10 Lowongan Pekerjaan Remote Terbaru untuk Developer

Sejak pandemi covid-19, tren mengenai pekerjaan remote terus meningkat. Pekerjaan remote memungkinkan kamu untuk bekerja tanpa harus datang langsung ke kantor. Dengan bekerja secara remote, kamu gak perlu pusing menghadapi jalanan yang macet dan memiliki fleksibilitas untuk memilih dimana tempat yang kamu inginkan untuk bekerja. Menarik bukan? Nah, berikut kami lampirkan 10 lowongan pekerjaan remote terbaru untuk Developer dari berbagai perusahaan beserta link pendaftarannya. 1. Schoters Full-time Mobile Application Developer Schoters adalah sebuah perusahaan yang bergerak pada bidang edukasi dengan layanan bimbingan bahasa dan bimbingan kuliah ke luar negeri. Saat ini, Schoters sedang membuka lowongan pekerjaan untuk posisi Mobile Developer.Link pendaftaran: https://www.jotform.com/form/210202680994454 2. Bukalapak Full-time Software Development Engineer, Frontend Kamu sudah tidak asing lagi dengan yang satu ini bukan? Yups bener banget, Bukalapak merupakan salah satu e-commerce besar di Indonesia. Yuk manfaatkan kesempatan menjadi Frontend Engineer di Bukalapak dengan mendaftar pada link berikut. Link pendaftaran: https://careers.bukalapak.com/jobs/196367 3. Mazecare Full-time Back End Developer Mazecare adalah platform perawatan kesehatan digital, yang menghubungkan pasien, penyedia layanan kesehatan, dan perusahaan asuransi. Sistem pekerjaan perusahaan ini seluruhnya berbasis remote. Jika kamu ingin bergabung menjadi salah satu bagiannya, langsung aja daftar pada link berikut ya! Link pendaftaran: https://www.linkedin.com/jobs/view/2974371403 4. Evermos Full-time Back End Developer - Go Evermos adalah sebuah platform social commerce untuk bisnis reseller dropship. Saat ini Evermos membuka lowongan pada posisi Back-End Developer. Cocok banget untuk kamu yang ingin merasakan bekerja di perusahan yang bergerak pada bidang e-commerce. Link pendaftaran: https://www.linkedin.com/jobs/view/2988234831 5. Tab Square Full-time Android Developer Ingin menjadi Android Developer? Yuk coba daftar yang satu ini. Perusahaan ini bergerak pada bidang Artificial Intelligence dengan menawarkan sistem pemesanan digital untuk restoran. Link pendaftaran: https://www.linkedin.com/jobs/view/3019174787 6. Spiralyze Full-time Frontend Developer Belakangan ini, kebutuhan Frontend Developer memang sedang tinggi. Saat ini Spiralyze, perusahaan yang memberikan jasa menaikan traffic website sedang mencari salah satunya. Link pendaftaran: https://www.linkedin.com/jobs/view/3020903283 7. eFishery Full-time Frontend Engineer Pernah mendengar akuakultur? eFishery merupakan salah satu perusahaan pada bidang akuakultur atau yang lebih dikenal sebagai budidaya perikanan. Saat ini eFishery sedang membuka lowongan pekerjaan untuk Frontend Engineer. Link pendaftaran: https://www.linkedin.com/jobs/view/3026311943 8. DOT Indonesia Full-time Mobile Developer (Flutter) Tertarik berkarir sebagai Mobile Developer? Kamu bisa mencoba melamar di DOT Indonesia. DOT berfokus memberikan layanan berbasis teknologi, salah satunya ialah pembuatan website dan aplikasi mobile untuk keperluan bisnis. Link pendaftaran: https://www.linkedin.com/jobs/view/3015506774 9. Sayurbox Full-time Software Engineer (Frontend) Seperti namanya, Sayurbox merupakan e-commerce yang berfokus pada penjualan sayur dan buah. Jika kamu berminat menjadi Frontend Developer di Sayurbox, kamu dapat mendaftar melalui link di bawah ini. Link pendaftaran: https://jobs.lever.co/sayurbox/caf89479-0725-43f9-827e-968aec5df715/ 10. SoftwareSeni Indonesia Full-time React Js Developer Untuk kamu yang ingin merasakan pengalaman bekerja di Perusahaan Software House, kamu bisa melamar di SoftwareSeni Indonesia. Rasakan pengalaman bekerja di perusahaan yang sudah pasti IT banget! Link pendaftaran: https://softwareseni.bamboohr.com/jobs/view.php?id=35 Bagaimana? Diantara sepuluh lowongan tersebut, perusahaan dan posisi apa yang kamu rencanakan untuk lamar? Apapun itu, semoga diberi hasil yang terbaik ya! Sekian informasi yang dapat kami sampaikan. Semoga bermanfaat dan sukses selalu!

Kelas Kumpulan Lowongan Kerja Developer dengan Sistem Hybrid di BuildWith Angga

Kumpulan Lowongan Kerja Developer dengan Sistem Hybrid

Sistem kerja hybrid merupakan sistem kerja yang mengkombinasikan pekerjaan remote dan from office. Biasanya, karyawan boleh menyesuaikan dari mana mereka ingin bekerja, baik di kantor atau bekerja dari rumah. Berikut telah kami kumpulkan beberapa pekerjaan dengan sistem hybrid untuk para Developer. 1. AlteaCare Full-time Flutter Developer (Tangerang Selatan) Berdiri di bawah naungan PT. Sehat Digital Nusantara, AlteaCare menawarkan berbagai layanan kesehatan, mulai dari telekonsultasi via panggilan video dengan dokter spesialis, pembelian  obat, dsb. Bagaimana, tertarik bergabung? Link pendaftaran: https://www.linkedin.com/jobs/view/2910287438 2. Halodoc Full-time Full Stack Developer (Jakarta) Aplikasi yang cukup populer pada bidang kesehatan ini sedang mencari Full Stack Developer. Jika kamu berminat, jangan ragu untuk mencoba ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3026312445 3, CIMB Niaga Full-time Android Developer (Yogyakarta) Untuk kamu yang tinggal di daerah Yogyakarta, kamu berkesempatan mendaftar sebagai Android Developer di Bank CIMB Niaga. Tunggu apa lagi? Jangan lewatkan kesempatan ini ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3005804307 4. Detikcom Full-time Web Developer (Jakarta) Pasti kamu pernah kan membaca berita di Detikcom? Saat ini, Detikcom sedang mencari Hybrid Web Developer untuk bekerja di Jakarta. Link pendaftaran: https://www.linkedin.com/jobs/view/3022688038 5. DEOS Group Full-time Mobile Developer (Tangerang) DEOS merupakan perusahaan yang dapat memberikan layanan digitalisasi spesifik berdasarkan kebutuhan client. DEOS Group sedang membuka lowongan untuk Hybrid Mobile Developer. Link pendaftaran: https://www.linkedin.com/jobs/view/3008528097 6. SayaKaya Full-time Flutter Developer (Jakarta) SayaKaya merupakan aplikasi investasi yang pastinya sudah terdaftar di Kominfo dan OJK. SayaKaya sedang mencari Flutter Developer untuk bekerja secara hybrid di Jakarta. Link pendaftaran: https://www.linkedin.com/jobs/view/2991291227 7. Tiket.com Full-time Android Engineer for Fresh graduate (Jakarta) Salah satu perusahaan yang bergerak pada bidang pariwisata, khususnya pembelian tiket secara online, Traveloka, sedang membuka kesempatan untuk Fresh Graduate. Pendaftaran di: https://www.linkedin.com/jobs/view/3003382493 8. Tokopedia Full-time Software Engineer (Yogyakarta) Ingin merasakan pengalaman bekerja di salah satu unicorn terbesar di Indonesia? Pas banget, Tokopedia sedang membuka lowongan pekerjaan sebagai Software Engineer. Silahkan mendaftar ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3025887443 9. Kebun Pintar Flutter Developer Intern (Malang) Yuk Flutter Enthusiast merapat! Saat ini Kebun Pintar membuka internship untuk posisi Flutter Developer. Cocok untuk kamu yang sedang mencari tempat magang, ataupun belum merasa skill kamu cukup untuk posisi Full-time. Link Pendaftaran: https://www.linkedin.com/jobs/view/3024688706 10. GoToko Full-time Platform Engineer - Web (Bali) GoToko, unit bisnis patungan Gojek dengan Unilever Group yang berfokus pada digitalisasi warung. GoToko membuka lowongan pekerjaan hybrid di Bali sebagai Full-time Platform Engineer. Link pendaftaran: https://boards.eu.greenhouse.io/gotoko/jobs/4021477101?gh_src=6c826d72teu Setelah membaca beberapa informasi lowongan pekerjaan sebagai developer, kamu dapat mencoba melamar yang salah satu atau beberapa pekerjaan yang sesuai untukmu. Jika belum yakin dengan kemampuanmu, BuildWith Angga siap untuk mendampingi proses belajarmu

Kelas Best Database Tools for Developer di BuildWith Angga

Best Database Tools for Developer

Setiap Developer dalam melakukan pengembangan aplikasi pasti membutuhan sebuah tools untuk mempermudah mereka dalam hal mengatur data yang akan mereka gunakan. Apa saja tools tersebut ... Navicat Navicat pertama kali release ditahun 2002, saat itu Navicat hanya untuk DBMS MySQL dan hanya untuk system operation Windows. Saat ini Navicat sudah berada di version 16, yang dimana Navicat makin multiconnection development tool dan dapat digunakan bukan hanya di 1 Operation System, tapi dapat digunakan di Windows, macOS & Linux. Berikut adalah tampilan workspace dari Navicat : Navicat sendiri, sangat compatible untuk cloud database seperti Amazon RDS, Amazon Aurora, Amazon Redshift, Microsoft Azure, Oracle Cloud, Google Cloud & MongoDB Atlas. Features utama yang dimiliki Navicat antara lain adalah : Seamless Data MigrationDiversified Manipulation ToolEasy SQL/Query EditingIntelligent Database DesignerData Visualization ToolData Generation ToolSmart Schema AnalyzerMake Collaboration Easy Dan beberapa perusahaan besar didunia yang menggunakan Navicat antara lain yaitu Netflix, Microsoft, IKEA dan masih banyak lagi. Navicat adalah database tools yang berbayar 💰💰 alias (tidak gratis). tapi jika kita ingin gunakan yang seperti Navicat untuk version Free / Open Source nya. yaitu menggunakan DBeaver Community Version atau Beekeeper Studio. DBeaver Community DBeaver Community adalah sebuah Universal Database Tool yang free dan beberapa fiturnya hampir sama seperti Navicat. Jadi jika kita ingin menggunakan yang seperti Navicat tetapi free dan open source pilihannya hanya DBeaver ini. BeeKeeper Studio Beekeeper adalah sebuah Open Source SQL Editor and Database Manager, tapi fitur di BeeKeeper Studio tidak selengkap di Navicat & DBeaver. tapi jika kita suka Database Tools yang simple dan tidak terlalu kompleks dalam penggunaan, berarti pilihannya ya BeeKeeper ini. DataGrip Selain 3 hal di atas, ada 1 lagi yang sangat powerfull dan praktis. yaitu DataGrip. DataGrip sendiri ini adalah sebuah product yang dimiliki oleh Jetbrains. DataGrip adalah sebuah IDE Database yang dapat manage semua tipe database. DataGrip ini memang berbayar 💰💰 , tapi kita bisa mendapatkan ini secara premium tanpa bayar sedikitpun dengan menggunakan Github Education Pack. Lalu ada gak sih tool seperti ini pada VSCode ?? Jawabannya ada kok, 😁 Pada VSCode atau Visual Studio Code, kita dapat memiliki Database Tools seperti diatas pada editor kita. yaitu menggunakan extension yang di publish oleh cweijan. cweijan Oke sekarang kita sudah tau apa saja database tools yang terbaik untuk membantu kita dalam development. selanjutnya bagaimana kita mengetahui lebih dalam tentang terkait lingkup database, dbms, sql dan query - query nya ?? Kalian bisa ikuti dan bergabung pada kelas SQL for Beginners: Learn SQL using MySQL and Database Design. Pada kelas ini kita akan belajar banyak hal , antara lain : Memahami Database & Apa saja DBMS yang adaMemahami User Management, Backup & Restore pada DatabaseMemahami Field & Data Type pada DatabaseBelajar Membangun Database dengan banyaknya relasi antar tableBelajar Menggunakan Foreign Keys untuk relasi antar TableUpdate Kelas terkait Function, Constraint, Transaction & Locking Terima Kasih, Selamat Belajar ya :)

Kelas 5 Soft Skill Penting untuk Freelancer di BuildWith Angga

5 Soft Skill Penting untuk Freelancer

Di era teknologi yang berkembang pesat saat ini, persaingan kerja semakin kompetitif, termasuk menjadi freelancer di dunia IT. Mungkin di benak orang awam jadi freelancer itu mudah dan menyenangkan, bisa kerja di mana pun dan kapan pun sesuka hati. Dan mereka juga kerap kali beranggapan bahwa freelancer itu bukan pekerjaan yang menjanjikan untuk masa depan. Padahal nyatanya belum tentu demikian. Banyak profesional muda yang berhasil melalui karir freelance mereka, dan bahkan bisa membangun perusahaan rintisan atau berkontribusi kepada masyarakat. Sama seperti pekerjaan kantoran pada umumnya, memiliki kemampuan teknis atau hard skill saja tidak cukup untuk menjadi freelancer yang sukses. Penguasaan soft skill yang baik adalah wajib bagi setiap freelancer karena erat kaitannya dengan Emotional Intelligence di mana freelancer tersebut dapat menyelesaikan setiap proyek yang menantang secara mandiri dan bertanggung jawab. Berikut rekomendasi soft skill yang bisa bermanfaat untuk karir sebagai freelancer dalam jangka panjang. 1. Mampu Berkomunikasi dengan Baik By Mimi T. Mampu berkomunikasi yakni menyampaikan informasi secara jelas, to the point, mudah dipahami, bukanlah sesuatu hal yang mudah. Butuh kemauan untuk belajar dan jam terbang untuk menjadi komunikator yang handal. Komunikasi yang berkualitas menunjukan kepiawaian komunikator mengungkapkan pendapatnya, disertai alasan yang jelas, pada waktu dan media yang sesuai. Sebagai contoh, kita tidak bisa langsung berbicara informal kepada prospect client melalui email seperti halnya kita meninggalkan komentar di Instagram. Hal semacam itu akan menurunkan respect klien dan menghilangkan kesempatan bekerja sama. Ada beberapa jenis komunikasi yang penting untuk dikuasai saat ini: komunikasi lisan, komunikasi tulisan, komunikasi visual dan menyimak dengan penuh perhatian (attentive listening). Banyak hal yang bisa dilakukan untuk meningkatkan skill komunikasi, seperti menonton channel Youtube inspiratif, membaca buku, atau bahkan hal paling sederhana yaitu menjadi pendengar yang baik untuk orang-orang di sekitar kita. Sangat penting untuk bisa berkomunikasi dengan baik, karena nantinya akan menjadi jembatan untuk membangun skill bermanfaat lainnya untuk karir freelance yang menjanjikan. 2. Memahami Etika Kerja By Cytonn Photography Banyak yang memilih karir freelance dengan tujuan awal ingin bebas dari tekanan kerja oleh atasan kantor. Nyatanya, menjadi freelancer tidak semudah itu. Butuh komitmen dan kedisiplinan yang konsisten agar bisa bekerja secara mandiri. Akan tetapi, seringkali kita menghadapi klien yang membutuhkan kita untuk bekerja sama dengan timnya di kantor. Maka, kita harus selalu bersedia bekerja sama dengan klien mana pun. Cobalah berkolaborasi dengan baik agar nantinya timbul rasa percaya pada klien yang nantinya bagus untuk hubungan kerja jangka panjang. Entah itu bekerja sendiri atau bersama-sama, kita harus tetap mempertahankan profesionalitas—selalu membiasakan tepat waktu (punctuality) seperti bekerja mengikuti deadline yang telah disetujui, mengikuti meeting, menyajikan hasil kerja yang sesuai dan memuaskan atau bahkan juga bisa memberikan value yang lebih dari perjanjian kerja di awal 3. Mampu Berpikir Kritis untuk Penyelesaian Masalah By Sigmund Kemampuan memecahkan masalah berhubungan dengan seberapa paham kita dalam melihat tujuan akhir pekerjaan, dan outcome atau hasil akhir apa yang kita inginkan. Hasil akhir itu harus diprediksi secara realistis agar kita bisa lebih mudah meraihnya. aat kita mengerjakan proyek, kita pasti menemui kendala. Hal itu adalah tantangan yang bisa jadi ruang belajar untuk pengembangan diri. Diskusikan kendala dengan klien atau mereka yang ahli, lalu berikan solusi yang mungkin bisa diterapkan. Untuk meningkatkan kemampuan problem solving sebenarnya bisa kita lakukan di aktivitas menganalisa sehari-hari seperti membiasakan diri menonton berita, double check berita hoax yang sering kita jumpai dan bergaul dengan orang-orang dari berbagai latar belakang. 4. Mengenal Dasar Penting dalam Berbisnis By Dylan G. Dengan menjadi freelancer, berarti kita harus siap menghadapi ketidakpastian pemasukan bulanan. Namun, bila kita mau meluangkan waktu untuk belajar ilmu tentang bisnis, kemungkinan kita bisa menghasilkan uang dari freelance yang bahkan melebihi untuk kebutuhan sehari-hari. Untuk bisa mendapatkan penghasilan sesuai yang diharapkan, kita harus bisa mengorganisir segala aspek pekerjaan kita. Sekalipun bekerja sendiri, kita harus membuat aturan jelas untuk proyek freelance yang diambil. Selain itu, kemampuan negosiasi dari komunikasi yang baik bisa sangat membantu untuk menentukan harga penawaran proyek. Dengan menerapkan hal-hal ini nantinya kita akan lebih bisa menjaga hubungan baik dengan klien karena cara kerja bisnis kita sudah tersusun dengan matang. 5. Mampu Beradaptasi By Austin D. Pada banyak kesempatan, klien dapat memajukan deadline secara tiba-tiba atau meminta freelancer merevisi kembali hasil kerja. Hal ini terjadi karena pada era digital sekarang, pesatnya arus informasi membuat kompetisi penjualan terutama produk/jasa online semakin sengit. Sebagai freelancer, kita harus terbuka akan cara kerja tersebut. Tidak selalu hasil kerja kita dapat langsung diterima oleh klien. Berusahalah untuk dapat menerima setiap kritikan dari klien dengan lapang dada karena mungkin mereka memiliki ide lain yang lebih baik atau bahkan belum terpikirkan oleh kita. Jadilah pribadi yang fleksibel dan terus update dengan perkembangan zaman agar bisa menjadi freelancer yang sukses. Bagaimana? Apa Kamu sudah menguasai semua soft skill di atas? Tidak pernah ada kata terlambat untuk belajar, ya. Kamu bisa mempelajari semuanya dengan mulai mengamati orang di sekitarmu atau mungkin mengikuti kelas soft skill di BuildWith Angga. Miliki growth mindset supaya Kamu bisa terus berkembang, karena membangun karir freelance yang cemerlang itu butuh waktu dan kegigihan.

Kelas Cara Jaga Mental Health saat Freelance di BuildWith Angga

Cara Jaga Mental Health saat Freelance

Berbeda dengan pekerja kantoran yang harus bekerja sesuai jadwal tetap perusahaan, pekerja freelance tidak mengenal aturan waktu seperti itu. Bekerja freelance memiliki privilege tersendiri, kita bisa work from anywhere dan menyelesaikan project sesuai dengan jadwal yang kita punya. Namun ada kalanya stres melanda untuk para pekerja freelance yang kerap berjuang sendirian. Kendala yang dihadapi saat kerja kemungkinan disebabkan beragam faktor, Anda tidak bisa secara langsung menyalahkan pihak luar karena bisa jadi penyebabnya dari dalam diri. Cobalah mulai kenali diri sendiri. Apakah perhatian yang Anda berikan pada pribadi sudah cukup? Apakah Anda sudah menjaga kesehatan mental dengan baik? Kesehatan mental atau yang belakangan ini populer disebut mental health adalah suatu bentuk perhatian pada diri sendiri yang amat sangat penting. Dengan mengelola mental health, artinya Anda menjaga badan secara menyeluruh. Anda berarti tahu apa saja yang dikonsumsi (makan, minum, tontonan, dll) dan apa pun yang dilakukan (tidur, olahraga, kerja overtime, dll) dapat berpengaruh kepada badan. Berikut adalah tips membangun mental health agar Anda lebih siap menghadapi segala tantangan kerja saat freelance. Semoga bermanfaat, ya! 1. Makan yang sehat By Jasmin S Sumber badan yang sehat berawal dari makanan. You are what you eat. Apa yang Anda makan dapat dirasakan pengaruhnya pada kesehatan secara langsung dan untuk jangka panjang. Ada baiknya Anda memulai diet untuk setiap makanan yang dikonsumsi. Asumsi yang umum di masyarakat tentang diet adalah situasi di mana kita harus mengurangi porsi makan secara drastis hanya untuk kurus. Definisi itu salah karena sebenarnya diet adalah bagaimana pola makan diatur sesuai kebutuhan badan. Setiap orang porsi makanannya tidak bisa disamakan karena genetika dan aktifitas yang dilakukan pasti berbeda. Tidak jarang makanan/ minuman kita beli hanya sebagai pelampiasan emosi, padahal bisa jadi yang kita konsumsi tersebut membahayakan bagi kesehatan. Mulailah kebiasaan baik dengan mengatur diri melalui makanan. Bila pola makan teratur, saat kerja Anda akan selalu merasa bugar, berat badan pun terjaga, dan bisa terhindar dari berbagai penyakit berbahaya. 2. Istirahat yang cukup By Elijah H Olahraga bisa meningkatkan konsentrasi, kualitas tidur hingga penampilan. Pilihlah olahraga sesuai budget dan kemampuan, dengan begitu berolahraga jadi terasa menyenangkan. Olahraga bisa di mana saja serta bisa di mana saja, namun baiknya dilakukan 30 menit setiap hari agar manfaatnya terasa di badan. Nantinya Anda tidak mudah terganggu atau mengantuk, dan pekerjaan bisa selesai sesuai deadline. Membaca buku juga bisa jadi aktifitas yang bagus untuk meningkatkan daya pikir. Umumnya kita membaca lewat social media, namun faktanya kebiasaan itu berpengaruh buruk bagi otak karena kebiasaan scanning atau membaca cepat di social media bisa merusak susunan jaringan otak. Untuk sebagian orang, membaca buku itu berat dan sungguh membosankan, akan tetapi kontennya lebih kredibel dan sangat bagus untuk meningkatkan kemampuan analytical thinking yang dipakai ketika bekerja. 3. Pikiran lebih sehat dengan olahraga & baca buku By Jennie Hill Olahraga bisa meningkatkan konsentrasi, kualitas tidur hingga penampilan. Pilihlah olahraga sesuai budget dan kemampuan, dengan begitu berolahraga jadi terasa menyenangkan. Olahraga bisa di mana saja serta bisa di mana saja, namun baiknya dilakukan 30 menit setiap hari agar manfaatnya terasa di badan. Nantinya Anda tidak mudah terganggu atau mengantuk, dan pekerjaan bisa selesai sesuai deadline. Membaca buku juga bisa jadi aktifitas yang bagus untuk meningkatkan daya pikir. Umumnya kita membaca lewat social media, namun faktanya kebiasaan itu berpengaruh buruk bagi otak karena kebiasaan scanning atau membaca cepat di social media bisa merusak susunan jaringan otak. Untuk sebagian orang, membaca buku itu berat dan sungguh membosankan, akan tetapi kontennya lebih kredibel dan sangat bagus untuk meningkatkan kemampuan analytical thinking yang dipakai ketika bekerja. 4. Disiplin melakukan rutinitas untuk jangka panjang By Brett Jordan Membiasakan pola hidup yang baik adalah tantangan seumur hidup. Mulailah dari hal yang bisa dilakukan, dengan apa yang sudah dimiliki. Mungkin awalnya Anda berpikir akan membosankan untuk melakukan rutinitas yang sama, namun ingat kembali goal yang ingin diraih dan betapa pentingnya peran kesehatan untuk mewujudkan semua tujuan tersebut. Menjadi pekerja freelance identik dengan 'ketidakpastian', namun bila Anda bisa manage waktu bekerja dan me time dengan baik, Anda bisa menjadi pekerja freelance profesional yang sukses. Awalnya mungkin akan terasa berat, entah itu kondisi keuangan yang tidak stabil, atau mungkin penolakan dari klien yang tidak puas dengan hasil project, tapi dengan Anda terus membenahi kemampuan dan membangun mental health, semua tantangan pada akhirnya bisa terlewati. 5. Aktif bertukar pikiran dengan pekerja freelance lain By LinkedIn Saat freelance, ada masanya Anda merasa stuck dan butuh bantuan orang lain. Beruntung sekali kini kita dimudahkan dengan kecanggihan internet, 'hanya' dengan bermodalkan kemampuan bahasa kita bisa berdiskusi dengan teman freelance lain di seluruh dunia. Dalam grup komunitas online, Anda bisa berbagi keluh kesah dan mungkin juga mengenal mentor yang bisa mengecek dan memberi feedback langsung pada karyamu. Bertukar pikiran dengan teman yang berprofesi sama bisa membuatmu lebih bahagia, banyak ilmu yang bisa didapatkan dari teman-teman yang lebih berpengalaman dan komunitas dapat jadi ajang showcase hasil karya satu sama lain. Penting bagi Anda untuk turut aktif demi tingkatkan skill komunikasi dan siapa tahu Anda bisa mendapatkan kesempatan kerja untuk project freelance berikutnya.

Kelas Sumber Belajar Mandiri untuk Developer di BuildWith Angga

Sumber Belajar Mandiri untuk Developer

Saat ini sumber belajar IT khususnya design dan coding sudah banyak tersedia di internet. Dengan mudahnya kita bisa mendapat ilmu hanya dengan googling melalui smartphone. Berkat kemajuan teknologi, Developer yang berpengalaman bisa sharing pengetahuan mereka di berbagai platform online. Siapa pun yang berniat menjadi Developer profesional, bisa langsung mengunjungi platform tersebut kapan saja mereka butuhkan. Faktor terpenting dalam mendalami development adalah niat yang kuat untuk terus belajar dan berlatih membangun project. Berikut adalah rekomendasi belajar dari Kami, yang diantaranya bahkan gratis namun bisa Anda aplikasikan untuk membuat project yang berguna. Selamat membaca & semoga bermanfaat! 😊 1. Stackoverflow dan GitHub By stackoverflow Untuk Anda yang masih pemula, kemungkinan besar akan menghadapi banyak kendala saat mengembangkan aplikasi. Salah satu solusi yang mungkin bisa membantu adalah dengan bergabung ke Stackoverflow. Dengan menjadi bagian dari komunitasnya, Anda bisa mendapatkan informasi terbaru terkait teknologi dan juga jawaban atas permasalahan yang dialami saat coding. Banyak Developer yang berpengalaman secara sukarela menjadi kontributor di Stackoverflow, dan Anda pun juga bisa melakukan hal yang sama agar bisa membantu Developer lainnya. Tulisan pada blog, artikel, atau bahkan video tutorial bisa menambah banyak pengetahuan Developer, namun pengalaman-pengalaman asli yang dituangkan melalui Stackoverflow bisa jadi lebih tepat sasaran untuk menyelesaikan masalah yang kerap dialami Developer. By GitHub Selain Stackoverflow, Anda juga bisa memperoleh insight dengan mempelajari repo milik Developer lain melalui GitHub. Anda bisa melihat keseluruhan sistem apa saja yang dipakai Developer lain dalam membangun aplikasi atau website, lengkap dari front-end sampai back-end. Bila Anda tertarik menggunakan suatu repo, Anda cukup pakai fitur forking yang mana tidak akan mengubah repo utama. Dan yang terpenting, sebagai bentuk apresiasi, selalu ingat untuk berikan star dan pesan kepada Developer pemilik akun GitHub tersebut. 2. YouTube By BWA Saat ini YouTube sudah menjadi sarana umum untuk belajar apa pun yang Kita mau. Para Developer juga bisa belajar banyak dari YouTube, lho. Dari banyak channel IT yang aktif saat ini, seperti Programmer Zaman Now, CodePolitan dan Web Programming UNPAS, Anda bisa belajar banyak hal mengenai pemrograman jaman sekarang. Anda bisa betah belajar melalui Youtube karena video di platform ini punya ciri khas menarik dan materi yang disampaikan pas atau lebih ringan ketimbang materi belajar di sekolah. Selain itu, YouTube juga media yang interaktif karena sang content creator bisa melakukan live streaming untuk para subscriber atau penonton setia channel tersebut. Sebagian besar konten pada YouTube tidak dipungut biaya untuk menontonnya, namun bukan berarti kontennya dibuat sembarangan, ya. Dari beberapa channel yang telah disebutkan, pembuatnya adalah para praktisi ahli di bidang IT, di mana melalui YouTube mereka sharing ilmu yang berdasarkan pengalaman pribadi dan hasil riset mendalam. Dunia IT itu sangat luas, maka tidak jarang pula mereka berkolaborasi dengan para Designer atau Developer lain agar lebih banyak lagi materi yang bisa disampaikan. Saat ini YouTube adalah platform dengan traffic kunjungan tertinggi dan semakin hari semakin banyak topik tentang IT yang bermunculan. Anda mungkin menggunakan YouTube saat ini untuk belajar, namun tidak menutup kemungkinan Anda showcase project melalui channel Anda suatu hari nanti. Semangat terus belajarnya, ya! 3. BuildWith Angga By BuildWith Angga BuildWith Angga atau yang biasa juga disebut BWA adalah platform belajar IT, dengan fokus pada materi design dan coding. Melalui BWA, Anda bisa belajar dari dasar hingga membuat project aplikasi yang bermanfaat. Ada banyak konten (webinar, e-book, artikel) dan materi belajar yang bisa dilihat secara gratis maupun berbayar. Namun jangan khawatir terkait jumlah biayanya, ya. Belajar di BWA terbilang berbeda dibanding dengan platform edukasi serupa, karena harga yang ditawarkan lebih terjangkau di mana hal ini sejalan dengan visi BWA yaitu belajar IT tidak harus mahal. Untuk Anda yang ingin berprofesi di bidang IT, ada baiknya Anda memahami jenis pekerjaan apa yang diinginkan dengan membaca terlebih dulu HandBook BWA. Pilihlah pekerjaan yang sesuai dengan bakat dan minat agar saat kerja Anda tidak mudah stres dan pekerjaan bisa diselesaikan dengan baik. Pada BWA ada banyak kelas untuk tingkatan pemula hingga mahir. Anda harus menguasai dasar-dasar untuk bisa membuat sebuah project yang utuh. Membuat aplikasi memang proses yang kompleks, namun jangan ragu untuk belajar di BWA karena ada Mentor yang siap membantumu membuat project keren yang bisa dipakai untuk melamar kerja. Bersama BWA, ayo bangun keahlianmu untuk masa depan! 😊

Kelas Cara Sukses Cari Kerja di BuildWith Angga

Cara Sukses Cari Kerja

Apakah Kamu fresh graduate yang sedang mencari pekerjaan pertamamu? Atau mungkin Kamu sudah bekerja dan ingin pindah ke perusahaan dengan jenjang karir lebih baik? Apa pun situasi yang Kamu hadapi saat ini, mencari pekerjaan yang sesuai dengan cita-cita adalah suatu tantangan tersendiri. Faktanya, ada banyak sekali info cara untuk memperoleh pekerjaan, namun ketahuilah hal-hal dasar berikut ini agar pekerjaan yang dijalani mampu mencukupi kebutuhan dan keinginanmu. Happy reading! 😊 Pilih pekerjaan sesuai kemampuan by Brooke Cagle Sebelum mencari di aplikasi lowongan kerja, ada baiknya Kamu mengetahui jenis pekerjaan yang kamu inginkan. Memiliki rencana yang tersusun matang bisa mempercepat proses mencari pekerjaan, dengan begitu Kamu bisa langsung fokus mencari referensi yang berguna untuk proses perekrutan nantinya. Buatlah sebuah daftar mengenai segala hal yang berhubungan dengan pekerjaan idamanmu. Coba pelajari apa saja kriteria yang diinginkan klien atau perusahaan terhadap profesi yang ingin kamu tekuni,  di mana saja kemungkinan lokasi pekerjaan tersebut tersedia, apakah Kamu bisa menyelesaikan pekerjaan itu secara part time atau harus full time, dan masih banyak hal lainnya yang bisa Kamu cari tahu sesuai kebutuhan pribadi. Setelah melakukan riset pasar, mulailah lamar pekerjaan sesuai kemampuan yang Kamu miliki. Jangan pernah asal melamar, ya 😊. Sebaiknya, setiap resume yang Kamu kirim itu memiliki perbedaan, karena kebutuhan setiap pekerjaan pasti berbeda. Bila Kamu memilih bekerja pada industri kreatif, Kamu harus menyertakan portfolio sebagai bukti kemampuanmu dalam membuat suatu karya. Mencari kerja itu membutuhkan banyak waktu dan tenaga, bila Kamu meremehkan salah satu prosesnya Kamu akan sulit mendapatkan pekerjaan sesuai bakatmu. Mengapa hal itu penting? Pekerjaan yang Kamu pilih nantinya bisa jadi akan berlangsung dalam kurun waktu yang lama, bahkan mungkin saja hingga masa pensiunmu tiba. Mencari kerja itu memang sulit, tapi saat berhasil diterima kerja, Kamu akan temui jauh lebih banyak tantangan sulit yang harus Kamu temukan sendiri solusinya. Bila Kamu memilih pekerjaan sesuai kemampuan dari dalam dirimu, proses menjalani semuanya akan menjadi lebih mudah dan dengan demikian kesehatan mentalmu akan tetap terjaga. Be a lifelong learner 🙌 by Annie Spratt Agar bisa survive di industri kerja, kita harus bisa beradaptasi dengan terus mengembangkan kemampuan diri. Saat bekerja mengeluh itu hal biasa, tapi jangan sampai dibiarkan berlarut-larut karena hal itu sama sekali tidak akan mengubah situasi menjadi lebih baik. Mulailah bergabung dengan para praktisi di bidang yang sama dengan Kamu, cobalah berkomunikasi melalui social media atau jika mungkin bertemu langsung dengan mereka. Belajar langsung dari orang yang berpengalaman bisa meningkatkan motivasi dan memunculkan ide-ide baru yang bisa diaplikasikan saat bekerja. Selain itu, Kamu juga bisa mengasah diri dengan mengikuti pelatihan-pelatihan yang berhubungan dengan pekerjaanmu. Akan selalu ada talenta-talenta baru yang lebih muda dan berkualitas, maka jangan pernah Kamu merasa sudah hebat dan berhenti belajar, ya. Buat dirimu spesial dengan segudang pengalaman kerja yang telah Kamu lalui dan selalu upgrade diri mengikuti perkembangan jaman. Saat ini sudah banyak sekali pelatihan baik itu lewat Zoom meeting atau workshop offline, yang bisa Kamu pilih sesuai ketersediaan budget dan waktumu. Bila Kamu berminat mendalami bidang IT dan desain, silahkan cek BuildWith Angga untuk mengetahui informasi pelatihan online dengan harga terjangkau. Nantinya tidak hanya ilmu yang Kamu dapat, Kamu juga bisa punya portfolio untuk karirmu, lho! 😊 Showcase karya terbaikmu secara online by John S. Pernahkah Kamu mencari tahu tentang dirimu di Google? Apa yang muncul pertama kali saat Kamu mengetikkan namamu? Pada era digital saat ini, keberadaan diri kita di internet kerap dinilai oleh rekruter. Jejak digital yang kita miliki erat kaitannya dengan personal branding, hal yang tanpa kita sadari telah kita bangun selama ini. Agar mencari kerja jadi lebih mudah, mulailah membangun personal branding yang baik. Tidak ada kata terlambat untuk memulainya, gunakanlah media paling sederhana yaitu dari social media yang Kamu pakai setiap hari. Sebaiknya tambah juga akun profesional seperti LinkedIn agar Kamu terlihat lebih kompeten. Dari situ, Kamu pun bisa koneksikan akun lain untuk showcase hasil karyamu, entah itu channel YouTube, blog, GitHub, Medium, dll. Ada banyak cara memamerkan atau showcase hasil pekerjaan kita di internet, namun dengan mengumpulkannya dalam satu akun, klien atau siapa pun yang ingin bekerjasama dengan kita dapat lebih mudah mengenal kita. Sebenarnya banyak hal yang bisa ditunjukkan, seperti membuat postingan cerita mengenai proses kerja, bagaimana cara berinteraksi dengan rekan-rekan kerja, dan hal-hal lain yang bisa diungkapkan tentunya dilengkapi dengan foto-foto sebagai pemanis. Untuk Kamu yang berprofesi sebagai Developer, Kamu bisa share akun landing page yang berisi pengalaman coding secara lengkap dan portfolio pengembangan aplikasi terbaik yang dimiliki. Bila senang menulis, Kamu juga bisa menceritakan seluruh prosesnya melalui Medium. Satu hal yang terpenting, semua akun yang kita pakai harus selalu aktif dan update, ya. Karena kita tidak pernah tahu kapan kesempatan kerja itu bisa datang, namun dengan terus konsisten menjaga personal branding, kita berarti membuka peluang baik kepada siapa pun untuk bekerja sama secara profesional dengan kita.

Kelas Alat Kerja Gratis untuk App Developer di BuildWith Angga

Alat Kerja Gratis untuk App Developer

Pengembangan aplikasi merupakan suatu alur yang kompleks di mana banyak pihak yang terlibat agar prosesnya berjalan mulus seperti penentuan desain, sistem database, prototype, integrasi API, dan lainnya. Bagi kalian App Developer pemula, bisa jadi bingung untuk mulai belajar dari mana. Menguasai tool dasar adalah fundamental penting agar kamu nantinya bisa bekerja secara efisien. Tidak perlu cemas akan biaya yang mahal, banyak tool gratis yang bisa digunakan guna melancarkan proses coding dan berkolaborasi dengan pihak lain seperti Designer dan Product Manager. Berikut informasi lengkapnya, semoga bermanfaat! 😊 Build codebase with Visual Studio Code By: Wikipedia Secara umum, aplikasi mobile bisa dibangun menggunakan berbagai pilihan bahasa pemrograman seperti Kotlin, Javascript, C#, dan Dart. Pada mulanya, banyak yang memakai Android Studio untuk membangun aplikasi lewat coding. Namun, saat ini sudah ada tool yang lebih modern bernama Visual Studio Code (VS Code) yang memungkinkan proses membuat logika data lebih mudah karena ukurannya yang lebih ringan. VS Code adalah suatu IDE (Integrated Development Environment), sebuah tool lengkap bagi Developer untuk menulis source code saat membangun sebuah aplikasi mobile. Dengan VS Code, aplikasi yang dihasilkan bisa dipakai untuk Android dan iOS. Menjalankan VS Code terbilang mudah yakni hanya dengan menginstal Android SDK. VS Code lebih terasa ringan dipakai ketimbang saat coding lewat Android Studio, dan juga tampilan VS Code minimalis sehingga nyaman saat dipakai. Prototype your app with Framer By: Framer Sebagai Developer, penting untuk mengetahui proses prototype agar aplikasi bisa dibangun sesuai rencana awal projek, tanpa perlu melalui banyak revisi. Dengan Framer, Developer bisa memahami keseluruhan bagian desain untuk aplikasi yang akan dibangun, meliputi layout, komponen UI, interaction, dll. Sederhananya, saat prototype Developer seperti melihat bentuk desain yang real buatan Designer dan mencoba mengecek apakah desain aplikasinya bisa direalisasikan pada saat melakukan coding. Bila ditemukan kekurangan pada desain, improvement bisa diberikan melalui pemberian feedback dari para pihak yang terlibat pada proses pengembangan. Framer membuat kolaborasi prosesnya menjadi lebih mudah, karena tim bisa langsung memberikan komentar dan editing secara bersamaan pada hasil prototype. Develop easily with service from Firebase By: Firebase Firebase adalah BaaS (Backend as a Service), sebuah paket layanan komplit buatan Google untuk memudahkan pekerjaan Developer. Dengan Firebase, Developer bisa fokus menciptakan dasar sistem pemrograman yang baik untuk aplikasi, dan Firebase yang akan mengurus bagian-bagian lain seperti analytic, file storage, dan authentication. Benefit ini tentunya sangat menguntungkan Developer karena bisa mempercepat proses pengembangan, terutama saat membuat aplikasi yang berskala besar dengan kebutuhan maintenance dan update fitur yang harus sering dilakukan. Selain itu, integrasi Google Analytics pada Firebase sangat bermanfaat di era digital saat ini. Singkatnya, Developer dapat dengan mudah memantau user behavior, yang mana nantinya bisa dipakai untuk menambah fitur yang lebih sesuai dengan kebutuhan pengguna aplikasi. Build API with Postman By: Postman Postman digunakan oleh Developer untuk mengembangkan, mengetes, hingga memonitor API (Application Programming Interface) lebih cepat. Melalui Postman, Developer bisa menggunakan banyak tool untuk menyederhanakan proses integrasi API yang mencakup proses create, import, generate, sync, dan validate data. Secara sederhana, dengan Postman Developer bisa mengatur alur sistem dari beberapa platform berbeda saat proses pemindahan data yang sama. Logika data cukup dibangun sekali, dan nantinya bisa digunakan secara berulang saat dibutuhkan. Postman bisa juga membantu Developer mendokumentasikan API secara terstruktur, dan hal ini tentunya dapat mempermudah maintenance aplikasi yang umumnya bisa dilakukan oleh beberapa Developer sekaligus. Collaborate effectively with Zeplin By: Zeplin Saat membuat aplikasi, kolaborasi yang baik antara Designer, Developer, dan seluruh tim pengembangan adalah hal utama. Bagi kalian Developer pemula, silahkan coba Zeplin untuk mempermudah proses karena lewat Zeplin, tim bisa tahu progres pekerjaan pada satu tempat yang sama. Developer bisa mulai membangun sistem back-end setelah paham keseluruhan desain aplikasi. Designer harus memasang plugin Zeplin pada aplikasi desain yang mereka pakai dan menginfokannya ke Developer. Melalui Zeplin, Developer akan mengecek hasil desain dan bila perlu akan memberi saran guna memudahkan proses coding dengan tetap mengikuti styleguide yang sudah dirancang Designer. Pengembangan akan memakan banyak waktu dan tenaga dimulai dari tahap pre-production sampai post-production. Maka dari itu, alangkah baiknya bila tim mengintegrasikan semua aplikasi komunikasi yang dipakai agar segala update bisa terpantau dengan baik. Design handoff with Figma by @figmadesign Figma adalah tool praktis untuk mengkomunikasikan desain kepada Developer atau yang biasa dikenal dengan istilah design handoff. Sudah banyak sekali perusahaan dunia yang memakai Figma karena banyak sekali fitur bermanfaat yang bisa dipakai untuk brainstorming bersama tim pengembangan aplikasi. Hanya dengan mengakses Figma lewat website, Developer bisa mendapat akses penuh desain. Mereka bisa tahu apa saja screen, komponen user interface, copy yang dipakai sampai coba prototype atau model uji coba aplikasi. Prototype perlu diuji langsung ke pengguna melalui usability testing, dan bila dinilai berhasil maka proses akan berlanjut dengan mengekspor assets dari Figma ke VS Code. Menjadi Developer menguasai ilmu desain bukanlah hal wajib, namun dengan mengenal design tool modern seperti Figma, Developer jadi bisa lebih memahami proses desain dan pengerjaan aplikasi tentunya lebih hemat uang dan waktu.

Kelas Manfaat Magang Sebelum Kerja di BuildWith Angga

Manfaat Magang Sebelum Kerja

Bagi pemilik perusahaan, keuntungan utama mengadakan program magang, atau yang biasa dikenal internship, adalah untuk mendatangkan talenta muda yang berkualitas. Mereka dapat dikatakan sebagai lulusan yang 'melek' teknologi, memahami tool kerja terbaru, dan secara positif aktif di sosial media. Namun, ada kalanya perusahaan memberikan kesempatan magang murni sebagai bentuk kontribusi sosial kepada masyarakat. Apa pun alasannya, program magang adalah momen yang tepat bagi para lulusan khususnya fresh graduate untuk menyiapkan diri agar bisa bersaing di industri kerja yang kian hari semakin kompetitif. Untuk Kamu yang sedang bersiap-siap mencari pekerjaan, berikut adalah manfaat-manfaat magang yang perlu diketahui 🙌 1) Adaptasi dengan Lingkungan Profesional By: Christina Saat sedang magang, Kamu bisa mendapat pengetahuan terkait industri kerja dan mempraktikkan langsung prosedurnya. Kamu bisa mengerti sejauh mana teori yang diajarkan di bangku sekolah bisa diaplikasikan di dunia nyata. Bagaimana teori tersebut bisa benar-benar dipakai untuk membuat sebuah projek yang bermanfaat. Tidak hanya kemampuan yang bersifat teknis, ada banyak soft skill  yang bisa dilatih saat magang. Bertemu bos dan rekan kerja yang membina saat magang bisa membantu meningkatkan kemampuanmu berkomunikasi. Kamu juga belajar manajemen waktu yang baik, lewat membiasakan diri datang tepat waktu hingga mematuhi deadline pekerjaan. Bila Kamu terus mengembangkan soft skill, kemungkinan besar perusahaan apa pun bisa tertarik untuk merekrutmu. Kini teknologi semakin maju, maka mau tidak mau kita harus selalu belajar hal-hal baru. Dalam bekerja, kita bertemu banyak sekali orang dengan berbagai latar belakang, dengan dasar komunikasi yang baik dan benar tentunya bisa memudahkan proses pekerjaan kita dan kerjasama dalam bentuk apa pun dapat berjalan lancar. Maka, kolaborasi yang baik antara ilmu dan attitude bisa menjadikan Kamu kandidat yang berkualitas karena Kamu dianggap mampu mengikuti work culture perusahaan yang dilamar sesuai perkembangan jaman. 2) Bangun Portofolio dan Koneksi 😉 By: Krakenimages Internship bisa membantu Kamu membangun hubungan profesional yang kelak bisa jadi referensi bagus untuk masa depan. Hasil kerja saat magang, bisa diceritakan melalui sebuah portofolio sebagai bukti telah mengikuti internship secara memuaskan. Saat magang, cobalah untuk meninggalkan kesan baik, seperti dengan selalu menunjukkan antusiasme dan inisiatif lebih saat bekerja. Bila berhasil, Kamu akan dianggap memiliki potensi lebih dan bisa pula dipercaya untuk menjadi karyawan tetap. Dengan mengenal para praktisi yang ahli, Kamu bisa mendapat tips dan trik terkait pekerjaan yang diimpikan. Kamu bisa terus berkomunikasi dengan mereka melalui LinkedIn agar lebih sopan dan mendapat update lowongan pekerjaan langsung dari mereka. Keberhasilan pencarian kerja melalui jalur referensi memiliki kemungkinan diterima lebih besar ketimbang saat kita melamar langsung pada job portal. Proses perekrutan yang berlangsung juga jauh lebih efisien, tidak akan memakan waktu lama. 3) Mendapat Pengalaman Kerja yang Nyata By: Firmbee.com Pada informasi 'loker', sering tertulis persyaratan terkait pengalaman bekerja. Bila Kamu fresh graduate, kemungkinan besar pasti belum berpengalaman, maka mengikuti internship adalah salah satu cara yang tepat untuk buktikan Kamu bisa bekerja. Dengan riset terlebih dulu, Kamu bisa magang di perusahaan idaman, pilih bidang pekerjaan yang Kamu kuasai dan selesaikan proses internship secara bertanggung jawab. Biasanya setelah magang akan diberikan sertifikat, atau Kamu juga bisa membuat portofolio hasil magang. Pakai bukti magangmu sebagai pelengkap dokumen kerja saat melamar, ya. Banyak perusahaan yang membutuhkan lulusan berpengalaman karena mereka dianggap sudah terbiasa dengan situasi lingkungan kerja yang penuh tantangan, dan dapat bekerja sama dengan berbagai pihak sehingga beban pekerjaan yang ditugaskan bisa diselesaikan tepat pada waktunya. 4) Gain Confidence to Build Future Career 🙌 By: Bruce M. Setelah melalui internship, Kamu menjadi lebih percaya diri dan semakin semangat untuk menghadapi dunia kerja yang berada di luar zona nyaman Kamu sebelumnya. Kamu bisa memahami ekspektasi sebenarnya atas pekerjaan yang kamu inginkan, mungkin baik itu lifestyle atau skill apa saja yang cocok untuk menggeluti pekerjaan tersebut. Sebaiknya sesuaikan dengan kemampuan dari dalam diri dan goal yang Kamu miliki dalam hidup agar nantinya tidak menyesal bekerja di bidang tersebut. Manfaatkan dan atur prioritas sebaik mungkin agar uang dan waktu yang Kamu gunakan bisa selalu bermanfaat untuk membangun karir masa depanmu. Lalu hal yang tak kalah penting saat magang adalah Kamu secara tidak langsung memahami bagaimana work culture bisa mempengaruhi proses bekerja. Setiap perusahaan, baik itu startup atau perusahaan multinasional, pasti memiliki cara kerja yang berbeda sesuai kepentingan bisnis masing-masing. Lulus dari internship adalah bekal awal yang Kamu miliki, setelah itu teruslah semangat dan selalu belajar di perusahaan mana pun agar masa depan yang Kamu impikan bisa tercapai. Good luck! 😊

Kelas Inspirasi Terbaik untuk UI Designer di BuildWith Angga

Inspirasi Terbaik untuk UI Designer

Kreatifitas seorang Desainer tidak semata-mata muncul hanya karena bakat alami. Untuk tetap menjadi kreatif, Desainer harus berada di lingkungan yang suportif, mempunyai Mentor yang berpengalaman, terus mencari inspirasi dari buku atau sumber termudah saat ini yaitu internet. Kali ini kami berikan tips untuk menambah pengetahuan desain dari sumber-sumber yang sudah biasa kita temui sehari-hari. Tren di industri kreatif saat ini berkembang begitu cepat, maka agar bisa survive, Anda sebagai Desainer harus bisa fleksibel menyesuaikan diri dengan segala update yang sesuai kebutuhan kerja. Akan selalu ada inovasi agar kita bisa mendesain lebih efisien, entah itu terkait tool atau proses desain  terbaru. Dengan tips berikut, Anda bisa selalu mengikuti tren dan tentunya mengaplikasikannya untuk pekerjaan. Selamat membaca dan semoga bermanfaat. 😊 Finding Inspiration in Popular Platform By: Thor Schroeder Dalam sebuah aplikasi, pengalaman pengguna adalah hal terpenting. UI Designer sudah pasti terlibat di dalam prosesnya karena tampilan antarmuka atau UI adalah hal pertama yang menjadi fokus pemakaian aplikasi pertama kali. Bila pengguna merasa tidak 'sreg' dengan desain, pengguna bisa seketika menutup aplikasi dan membuka aplikasi serupa milik kompetitor, atau the worst scenario yang mungkin terjadi, mereka bisa uninstall aplikasinya. Maka, semua aspek visual (button, proximity, balance, contrast, dll) harus dipikirkan secara terstruktur  agar aplikasi nyaman digunakan. Agar paham UI seperti apa yang laku di pasaran, Anda bisa cari inspirasi pada platform khusus para seniman kreatif di dunia seperti Behance dan Dribbble. Kedua platform ini mudah dipakai seperti sosial media pada umumnya. Anda pun bisa pamer portofolio desain aplikasi/web dan mencari kerja dengan mengubah status menjadi "Hire Me". Ada segudang inspirasi desain pada platform tersebut untuk terus memotivasi diri menjadi desainer yang lebih baik lagi. Selain itu, desain baru yang Anda temukan tentunya bisa langsung diaplikasikan pada projek Anda pribadi dengan metode ATM. Learn from Case Study By: UX Indonesia. Mempelajari desain tidaklah cukup dengan mengetahui komponen-komponen pembangunnya saja secara terpisah, tapi juga harus mengetahui prosesnya secara menyeluruh dari pre-production sampai post-production. Membaca case study di Medium bisa jadi cara mengenal proses desain yang menyenangkan. Tidak seperti text book, pembahasannya di Medium ringan untuk dibaca dan menarik karena sering dilengkapi gambar atau animasi yang interaktif. Membangun case study bisa jadi sarana yang efektif untuk menggaet klien dari mana saja. Selain itu, case study adalah salah satu cara yang baik untuk mendokumentasi suatu projek. Melalui case study, Anda bisa melihat bagaimana proses berpikir Desainer saat membangun tampilan aplikasi, apa saja pertimbangan yang dipilih entah itu berdasarkan data (kualitatif dan kuantitatif) saat research atau mungkin ada aspek-aspek lain yang mempengaruhi saat app development. Di sisi lain, Desainer pemula bisa belajar banyak dari sebuah case study karena bisa belajar proses desain sebenarnya dari orang yang lebih berpengalaman secara mudah dan gratis. Figure Out How Design Works in Apps By: freestocks Cara terdekat memahami desain adalah dengan sering memakai aplikasi untuk kebutuhan sehari-hari. Saat ini apa pun serba mobile, banyak hal yang bisa dilakukan secara singkat lewat aplikasi. Jadi bila ingin menjadi UI Designer yang profesional, ada baiknya Anda memang secara aktif memakai aplikasi yang sama setiap hari. Dengan begitu Anda bisa memahami user journey dan tampilan yang tepat untuk kondisi dan waktu yang berbeda berdasarkan pengalaman Anda pribadi. Selain itu, cobalah untuk download beragam aplikasi di handphone Anda. Cara ini bisa menyegarkan pikiran Anda saat sedang merasa stuck merancang UI. Referensi aplikasi bisa sangat beragam, dari yang lokal sampai mancanegara. Dengan melihat aplikasi buatan orang lain, Anda bisa belajar menilai kekurangan dan kelebihan Anda saat mendesain. Dan kebiasaan tersebut bisa pula memunculkan inspirasi baru yang bisa Anda pakai untuk pembuatan projek desain berikutnya. Enroll Design Course to Build Real-World Projects By: Avel C. Menjadi Desainer profesional itu butuh proses panjang dari mulai menguasai dasar sampai membangun karya-karya yang bisa dikumpulkan ke dalam satu portofolio. Setelah menguasai dasar, mungkin bisa dari buku cetak atau sumber online, langkah tepat berikutnya adalah mengikuti kelas yang memiliki case study  projek yang benar-benar dipakai di dunia nyata. Sudah banyak kelas Desain yang tersedia baik itu online atau offline, yang memungkinkan konsultasi projek bersama Mentor bahkan sampai penyaluran kerja setelah case study diselesaikan. Dengan bergabung di kelas, Anda bisa terus semangat dan belajar jadi lebih terarah. Pilihlah kelas yang sesuai minat dan bakat agar portofolionya nanti bisa langsung dipakai untuk mencari pekerjaan impian. BuildWith Angga bisa menjadi pilihan untuk Anda yang ingin membuat projek desain yang cantik dan fungsional. Materi yang ada pun beragam diantaranya tentang prototype dengan Adobe XD, membuat UI Animation atau tutorial lengkap UI Design di Figma. Case study yang Anda buat di kelas, nantinya bisa Anda susun menjadi portofolio dan tampilkan di platform online agar mudah diakses siapa pun, termasuk  calon rekruter atau klien yang bisa jadi adalah rekan kerja Anda di masa depan.

Kelas Freelance 101 : Modal Sejuta Bisa Untung Puluhan Juta di BuildWith Angga

Freelance 101 : Modal Sejuta Bisa Untung Puluhan Juta

Meraih sukses melalui jalur freelance bukanlah hal yang mustahil. Sama halnya pekerjaan kantoran, freelance adalah pekerjaan yang menjanjikan. Dengan menjadi pekerja lepas, kita bisa mencukupi kebutuhan sehari-hari dan bahkan mampu mewujudkan semua wishlist yang kita miliki selama ini. Ada beberapa strategi penting yang menjadi kunci keberhasilan freelance, dari yang gratis sampai berbayar. Siapa pun bisa freelance, namun hanya sedikit yang benar-benar bisa menghasilkan dalam jangka panjang. Penting bagi pekerja lepas untuk konsisten mengembangkan diri melalui berbagai projek, namun ada baiknya mereka mulai investasi sedikit uang untuk portofolio online agar personal branding mereka menjadi lebih baik. Berikut kami rangkum cara meraih keuntungan freelance puluhan juta per bulan untuk Anda yang ingin membangun masa depan lebih baik. Semoga bermanfaat, ya 😊 Beli domain .Com & shared hosting sesuai kebutuhan By: Wikipedia Saat ini .Com adalah salah satu domain yang paling banyak digunakan di internet. Domain ini sangat cocok bagi siapa pun yang ingin membuat website untuk tujuan komersial. Dengan memakai .Com, portofolio Anda bisa lebih stand out dan nampak profesional. Untuk langkah awal pada website, Anda bisa buat landing page sederhana berisi informasi kontak yang aktif dan bisa juga cantumkan logo sesuai bidang bisnis. Bila sudah pernah mengambil projek, pilihlah beberapa projek terbaik dan cantumkan pada laman website agar meningkatkan trust para klien terhadap Anda. Kalau Anda tidak paham coding, Anda bisa memakai jasa shared hosting untuk mengelola website. Sekarang sudah banyak penyedia hosting di pasaran yang biayanya terjangkau, bahkan pelajar pun dapat dengan mudah menggunakan jasanya. Dengan pakai shared hosting, nantinya Anda bisa tinggal fokus mengatur konten website Anda agar kelihatan lebih kredibel. Bangun website portofolio dengan free template dan Webflow By: Panka Cara mudah pertama untuk membangun website adalah dengan memakai template gratis. Bagi para pemula, template siap pakai sangat berguna karena biayanya murah, proses pengerjaan cepat serta desain tampilan yang dihasilkan sudah teruji berkualitas dan bisa responsif untuk versi mobile. Ada banyak penyedia template seperti Website Builder BWA yang bisa jadi cara praktis namun bermanfaat bagi Anda yang ingin membuat website cepat dengan desain terkini agar bisa menarik perhatian para klien dari seluruh dunia. Nah untuk Anda para desainer, mungkin akan lebih tertarik untuk membuat website dari desain milik Anda pribadi dengan bantuan Webflow. Desain website yang original dapat menunjukkan daya tarik tersendiri di mata klien, dan dengan Webflow Anda tidak perlu repot-repot lagi untuk mengurus back-end website. Anda hanya fokus mendesain, dan Webflow yang akan melakukan coding sekaligus hosting untuk website Anda. Mudah bukan membuatnya? 😉 Cantumkan link website pribadi di Upwork atau Fiverr By: Domenico Loia Setelah berhasil membangun website, mulailah bergabung pada platform pencarian kerja khusus freelance seperti Upwork dan Fiverr. Pada situs ini, banyak sekali praktisi di bidang kreatif yang mencari kesempatan remote working diantaranya penulis, graphic designer, hingga web developer. Untuk para pemula, mulailah dari melengkapi profil pada situs secara lengkap, dan tunjukkan kredibilitas dengan menyertakan link website portofolio agar calon klien bisa melihat track record pengalaman kerja Anda. Supaya mendapat klien dengan prospek yang bagus, Anda bisa memilih untuk berlangganan pada situs tersebut, tentunya disesuaikan dengan budget Anda, ya. Agar memudahkan proses pencarian kerja, ada baiknya Anda memahami bahasa Inggris dan cara pitching yang baik dan benar. Anda bisa mempelajarinya di BuildWith Angga, YouTube, atau sumber belajar lainnya. Kemampuan komunikasi yang baik tidak hanya berguna untuk proses perekrutan, namun juga saat proses kerja berlangsung hingga projek berhasil diselesaikan. Bila klien merasa cocok dan puas, Anda bisa terus bekerjasama dengan mereka dalam jangka panjang. Bangun real-time project bersama tim By: Leon Saat membangun portofolio, Anda harus bisa menampilkan semua skill yang Anda miliki agar klien mengetahui sejauh mana projek yang bisa Anda ciptakan. Bila Anda seorang Full Stack Developer, Anda bisa langsung menunjukkannya melalui fitur-fitur pada website portofolio. Fitur tersebut harus memiliki UI yang menarik dan dapat diakses langsung oleh klien saat sedang menjelajahi website Anda. Lalu yang tak kalah penting, selalu cantumkan update projek yang telah Anda kerjakan, terutama projek kompleks yang membutuhkan tim untuk pengerjaannya. Hasil projek untuk klien bisa Anda taruh juga di portofolio dan ceritakanlah proses behind the scene agar klien memahami pola pikir dan cara kerja Anda. Dengan semakin sering bekerja bersama orang-orang dari berbagai spesialisasi, Anda berarti memperluas koneksi dan meningkatkan berbagai skill yang Anda miliki. Kedepannya Anda bisa menjadi pribadi yang lebih profesional, mampu menghadapi situasi kerja freelance apa pun. Dan tentunya pekerjaan Anda akan terasa lebih efisien dengan hasil yang jauh lebih memuaskan.

Kelas Cara Split Component di React JS di BuildWith Angga

Cara Split Component di React JS

Split Component? Kenapa harus di-split? Ok, ini berat kaitannya sama maintainable code dan performance. Penerus kodemu gak bakal betah liat 500++ line lebih hanya karena logic yang tidak reusable. Tidak reusable dalam artian, tidak pernah di refractor sama sekali! So Sad! Previous Article Kalau kalian pengikut saya yang setia, di article ini (React Props? Sebenarnya itu cuma state biasa) sebenarnya tanpa sadar kalian sudah belajar splitting component dimana saya memecah row perulangannya ke komponen yang lebih kecil. Real-world Study Case Ok mungkin sebagian dari kalian belum tau kalau saya punya side-hustle, nama aplikasi saya itu mejadokter. Ini bagian screenshot yang pernah saya refractor khususnya code splitting. Yang awalnya bisa sampai 2000 lines of code bisa saya pangkas jadi sekitar 700an, ok masih gak make-sense karna abis di-refractor tapi linesnya masih lewat 600an. Tapi gak kenapa, karena selain saya pangkas lines of codenya saya juga pecah logic yang berulang. Dan sebenernya komponen di halaman ini sama persis dengan di halaman detail/edit rekam medis, tapi somehow saya buat mereka beda komponen 😓. Nah setelah saya refractor dan lakukan proper code-splitting akhirnya mereka bisa pakai shared-reusable-component. Ingat, kalian gak bisa buat code clean at first place (ok mungkin bisa, saya gak mau takabur bilang kalian gak bisa) tapi pasti susah sekali di awal-awal buat se-clean itu. Gak Sabar Ngoding? Potongan kode RowEmployee.js Ok lanjut ke materi ya, kalian bisa buka code example di article sebelumnya. Buat penyegaran saya sertakan potongan kodenya diatas.  Tambahkan Proptypes import React from "react"; import PropTypes from "prop-types"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } RowEmployee.PropTypes = { name: PropTypes.string, dateJoin: PropTypes.string, }; Pada line 20 dan 21 kita bisa sebutkan semua propTypes yang ada pada komponen tersebut. Kita juga bisa assign si props name atau dateJoin tersebut nantinya akan memiliki tipe data apa, pada contoh tersebut karena sangat sederhana alhasil baru saya tunjukkan dengan tipe data string saja. Benefit Penambahan PropTypes Kita bisa melihat props yang tersedia pada komponen tersebut Kalian bisa ctrl+space untuk melihat props yang tersedia pada komponen tersebut, untuk membedakan yang mana props dan autocompletion yang lain, kalian bisa perhatikan pada icon kunci inggris di kolom autocompletenya Summary Ok dari semua penjelasan diatas baru sebutir contoh tentang split component, dengan memecah komponen menjadi kecil-kecil seperti itu kita bisa memaksimalkan komponen yang mana yang bisa kita gunakan di komponen lain juga (reusable component), tapi hati-hati dan rencanakan dengan baik karena bisa saja split komponen menjadi menyusahkan kalau kita salah dalam melakukan perencanaan.

Kelas React Props? Sebenarnya Itu Cuma State Biasa di BuildWith Angga

React Props? Sebenarnya Itu Cuma State Biasa

Apa sih props di react? Ngomongin props di react nggak jauh-jauh dari yang namanya components, baik smart-components atau komponen penyusun tampilan biasa. Pada dasarnya props memungkinkan kita memberikan hak akses pada state/variable di parent komponen supaya bisa di konsumsi oleh child komponen. Contoh sederhana {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Potongan kode di atas menunjukkan bahwa ada sebuah komponen react dengan nama <RowEmployee /> yang kita beri props dateJoindan name,jangan lupa kita sisipkan props key pada element di setiap kita melakukan perulangan Lanjut ngoding... 1.    Bahan Dasar function App() { const employees = [ { name: "Avriza Hakim", dateJoin: new Date(2021, 3, 19) }, { name: "Danny Bramantyo", dateJoin: new Date(2021, 8, 27) }, { name: "Angga Berdikari", dateJoin: new Date(2021, 0, 30) }, ]; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Aplikasi kepegawaian sangat cetar membahana!</p> <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>Nama Lengkap</div> <div>Tanggal Bergabung</div> </div> {employees.map((item) => { return ( <div key={item.dateJoin} style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{item.name}</div> <div>{JSON.stringify(item.dateJoin)}</div> </div> ); })} </header> </div> ); } Berikut potongan kode awal sebelum baris dari data employee kita pecah ke child komponen <RowEmployee />, pada line 5 ada sebuah variable menggunakan const yang berisi data employees, lanjut di line 29-39 adalah potongan kode yang harus kita improve menjadi child komponen dan akan kita lewati props 2.    Refractoring code Intinya refractoring code itu kita pecah komponen yang sering berulang-ulang sehingga kita bisa gunakan secara efisien, tentunya juga bisa memangkas line of code , mulai dengan membuat file baru dengan nama RowEmployee.js.  import React from "react"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } Kita bisa cut line 29-39 (pada bagian bahan dasar) untuk kita paste di file RowEmployee.js di line 5 seperti potongan kode diatas. Lalu kita hapus props keynya karena yang di ulang bukan div ini melainkan komponen RowEmployee yang nanti kita pasang di file parentnya. Perhatikan pada line 3 kita juga menerima props dimana pada kasus ini langsung kita destructure si props ini menjadi name dan dateJoin  3.    Render <RowEmployee / > {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Dari baris div yang panjang tadi bisa kita gantikan dengan single line komponen <RowEmployee … dengan list props seperti potongan kode diatas, jangan lupa menambahkan props key karena reactjs butuh informasi ini untuk mengetahui item mana yang sedang diberlakukan perulangan. PRO TIPS Usahakan props pada child komponen seperti ini menjadi primitive variables, maksudnya bukan object dalam kata lain seperti, string, number dan semacamnya. Kenapa harus primitive variable, ini dampaknya ke performance, naturalnya setiap komponen sudah melakukan pengecekan pada setiap perubahan props, ketika kita lewatkan object pada props, kita harus melakukan pengecekan extra untuk menahan re-render pada semua komponen. Summary Sebenernya kita bisa lewatkan hampir apapun pada props, tapi ingat jangan sampai terjebak props ini dari siapa dan akan kemana. Jika ingin melewatkan state ke deep-nested komponen sebaiknya kamu belajar Redux atau state management lainnya

Kelas Flutter Insight: Top 7 Packages pada Flutter (Part-2) di BuildWith Angga

Flutter Insight: Top 7 Packages pada Flutter (Part-2)

Pada saat mengembangkan sebuah aplikasi menggunakan Flutter, maka akan ada banyak sekali jenis package yang dapat kita gunakan. Kita juga pernah membahas mengenai 5 packages lain yaitu pada Flutter Insight: Top 5 Package pada Flutter.  Dengan menggunakan package, proses pengembangan sebuah aplikasi dapat berjalan lebih mudah dan cepat. Pada tips kali ini kita akan membahas mengenai top 5 packages yang pastinya akan sangat membantu seorang Flutter Developer dalam mengembangkan aplikasi. 1. Flutter SVG Package yang pertama yaitu Flutter SVG. Dengan menggunakan package tersebut, kita dapat memuat sebuah icon dengan resolusi yang lebih baik jika dibandingkan dengan png. Selain itu, format SVG juga lebih ringan dibanding dengan png. 2. Google Sign In Flutter juga menyediakan sebuah package yang dapat memudahkan kita dalam menambahkan fitur sign in dengan menggunakan akun google. Selain itu, kita dapat menggunakan package ini pada platform iOS dan Android. 3. Video Player Package yang ketiga yaitu video player. Dengan menggunakan package ini, kita dapat memasukkan sebuah video yang dapat dijalankan pada aplikasi Flutter kita. 4. Pull to Refresh Sesuai namanya, packagePull to Refresh memungkinkan kita untuk memberikan kemudahan jika ingin menambahkan fitur refresh pada aplikasi kita. Jika ada sebuah update tertentu atau update pada aplikasi kita, fitur pull to refresh dapat memperlihatkan perubahan yang ada pada sekali pull. 5. Flutter Table Calendar Package yang terakhir yaitu Flutter table calendar. Dengan menggunakan package ini, kita dapat menambahkan fitur kalender pada aplikasi yang kita kembangkan. 6. Flutter Facebook Authentication Selain dapat menggunakan Google Sign In, Flutter juga memberikan kemudahan pada developer jika ingin menggunakan Facebook authentication. Sehingga user dapat login dengan menggunakan akun Facebook. 7. Flutter Just Audio Jika kita ingin menambahkan sebuah audio ke dalam aplikasi Flutter, kita dapat menggunakan package just audio dari Flutter ini. Nah, itu adalah 7 package yang dapat kita gunakan untuk membuat fitur di dalam aplikasi Flutter kita semakin menarik. Oiya, jika kita ingin belajar lebih dalam mengenai Flutter, kita bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar!

Kelas Membuat Design Burger dengan Illustrator di BuildWith Angga

Membuat Design Burger dengan Illustrator

Hello people with the spirit of learning! Penggunaan illustrator dalam berbagai kebutuhan grafis dapat memudahkan seorang designer grafis untuk menyelesaikan projectnya. Sebagai pemula, berikut kami berikan proses dalam membuat desain burger dengan menggunakan illustrator. Lets Go! Step 1 : Color Palette Gunakan color palette berikut untuk memberikan pewarnaan desain burger yang akan dibuat. Step 2 : New Document Buatlah lembar kerja baru dengan cara "Pilih File > New > Masukkan ukuran artboard 2500 px x 2500 px " Tekan Create. Step 3 : Outline Roti Burger Buatlah bentuk rectangle dengan cara "Pilih icon rectangle dengan menekan "M" > Tekan Shift + Drag di artboard sehingga membentuk kotak"Hilangkan fill dengan menekan "Shift+X", jadi pastikan hanya tinggal stroke atau garis nya saja (Lihat Step 1)Buat kotak bagian atas melengkung dengan menekan "A", seleksi pada titik atas bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung secara penuh (Step 2).Buat kotak bagian bawah melengkung dengan menekan "A", seleksi pada titik bawah bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung sedikit (Step 3).Buat persegi panjang dengan menekan "M" dan tempatkan di tengah-tengah objek melengkung (Step 4)Jadikan objek melengkung menjadi 2 bagian, "Pilih kedua objek" kemudian pilih "Pathfinder pada Panel Properties >Minus Front"Buat melengkung bagian tengah objek dengan menekan "A", seleksi pada titik tengah saja dan tarik ke bagian dalam (Step 6) Step 4: Outline, Sayuran, Daging dan Keju 1. Buatlah persegi panjang dengan menekan "M" dan tempatkan dibagian roti bawah (Step 1). Pisahkan garis yang bawah dengan menekan "A" pilih titik kanan dan kiri bagian bawah kemudian pilih Cut path at selected anchor point (Lihat gambar di bawah). 2. Garis bagian bawah yang sudah terpisah, dibuat melengkung dengan "Pilih Effect > Pilih Transform and Distort > Pilih Zig Zag". Masukkan Size dan sesuaikan, Pada bagian Points pilih "Smooth" (Lihat gambar di bawah). 3. Gabungkan garis lengkung dengan persegi panjang dengan menekan "A" kemudian pilih kedua titik, selanjutnya pilih Connect selected end points (Lihat gambar di bawah). 4. Jadikan lengkung disetiap sisinya untuk sayurannya, dengan menekan "A" kemudian memilih titik atas dan titik bawah dan tarik ke bagian dalam sampai melengkung (Lihat gambar di bawah). 5. Memisahkan sayuran dengan roti burger bagian bawah, pilih kedua objek kemudian pilih Shape Builder Tool "Shift+M", arsir bagian perpotongan antara roti dan sayuran (Lihat gambar di bawah). 6. Buatlah kembali persegi panjang dengan menekan "M" dan buat persegi panjang dibagian atas sayuran, kemudian jadikan lengkung dengan memilih salah satu titik sudutnya selanjutnya tarik kebagian dalam (Lihat gambar dibawah). 7. Buatlah dua objek persegi panjang, persegi panjang yang kecil (warna biru) diposisikan pada persegi panjang pertama (warna merah). Kemudian gabungkan keduanya dengan menggunakan Shape Builder Tool "Shift+M" Selanjutnya buat lengkung semua sudutnya. (Lihat gambar di bawah). Step 5 : Colouring Berikan warna pada masing-masing objek, yaitu : Kode warna #EC9F1F untuk rotiKode warna #F5D812untuk kejuKode warna #C0522d untuk daging,Kode warna #55BD53 untuk sayuran, danKode warna #4D0B00 untuk outlinenya Step 6 : Shadow & Highlights 1. Membuat hightlights pada roti burger, pilih roti burger kemudian pilih pada Object selanjutnya pilih Path dan Offset Path. Pada panel Offset Path, silahkan masukan nilai pada kolom Offset. (Lihat gambar di bawah). 2. Buatlah efek sinar pada roti bagian atas, dengan menduplikat objek kemudian potong menggunakan click to minus front (Lihat gambar di bawah). 3. Buatlah efek bayangan pada bagian keju, Pilih objek keju, kemudian copy dan geser ke bawah dan keatas untuk membentuk bayangan pada bagian atas dan bawah. Berikan warna #FFFFFF untuk bayangan atas dan warna #DB6420 untu bayangan bawah (Lihat gambar di bawah). 4. Buatlah efek bayangan pada bagian dagingnya, "copy (Ctrl+C)" bagian daging dan paste (Ctrl+F) pada bagian daging, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #A04330 pada bayangan dan warna #C2522D pada bagian dagingnya (Lihat gambar di bawah). 5. Buatlah efek bayangan pada bagian sayurannya, "copy (Ctrl+C)" bagian sayuran dan paste (Ctrl+F) pada bagian sayuran, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #B1D49B pada bayangan bawah dan warna #52964B pada bayangan bawah (Lihat gambar di bawah). Step 7 : Finishing Setelah semua tahapan di buat, sekarang tinggal finishing dengan menambahkan shadow pada bagian bawah burgernya. Buatlah objek elips, Pilih "L" kemudian arahkan elips dibagian bawah burger.Simpan elips dibelakang burger, Klik kanan pada elips, Pilih Arange > Pilih Send to Back.Berikan warna #280501 pada bayangannya. Good Job! Akhirnya telah menyelesaikan desain sederhana dengan membuat objek burger. Buat kalian yang ingin mendalami menjadi seorang desain grafis, Saya sudah buatkan kelas khusus untuk kalian, agar mahir menggunakan Adobe Illustrator mulai dari Basic sampai Advance. Tidak lupa di kelas juga Saya memberikan project grafis yang bisa kalian jadikan portfolio untuk karyamu. Sekian tips kali ini, semoga bermanfaat, dan Semangat Belajar!

Kelas Konfigurasi Firebase Flutter pada iOS di BuildWith Angga

Konfigurasi Firebase Flutter pada iOS

Hello, people with the spirit of learning. Beberapa tahun terakhir ini Firebase mulai banyak dikenal dan digunakan oleh para developer termasuk di Indonesia. Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk mempercepat pekerjaan developer. Ada banyak sekali fitur-fitur yang dapat kita gunakan dalam Firebase. Pada tips kali ini, kita akan mempelajari bagaimana cara mengkonfigurasi Firebase. Untuk menggunakan Firebase dengan Flutter pada iOS, kita perlu untuk mengkonfigurasi proyek Flutter agar dapat menggunakan library FlutterFire dengan benar. Konfigurasi Dependencies Pertama-tama kita perlu menambahkan dependencies ke dalam file pubspec.yaml seperti pada contoh di bawah ini. dependencies: flutter: sdk: flutter cloud_firestore: ^1.0.0 firebase_auth: ^1.0.0 google_fonts: ^2.0.0 Membuat Projek Firebase 1. Kunjungi Website Firebase Console. 2. Pilih "Add Project" seperti pada gambar di atas. 3. Lalu masukkan nama projek sesuai dengan projek yang sedang kita kerjakan. 4. Jika ingin mengaktifkan google analytics pada projek Firebase, klik Continue. 5. All done! Sekarang tinggal pilih Create Project. Konfigurasi iOS Pada tampilan awal Firebase, maka akan terlihat beberapa pilihan app yang bisa kita gunakan seperti iOS, Android dan Web. Namun, karena pada tips kali ini kita akan melakukan konfigurasi iOS, maka cukup pilih icon iOS seperti pada gambar di atas. Untuk dapat mengetahui iOS bundle ID ikuti langkah-langkah di bawah ini: Buka XcodeBuka Terminal open ios/Runner.xcworkspace Sebelum mengetikkan kode di atas, pastikan direktori nya sudah pada direktori projek Flutter yang akan kita buat. Jika sudah, maka tampilannya akan seperti pada gambar di atas. Lalu, pilih Runner dan copy Bundle Identifier yang akan menjadi iOS bundle ID. Selanjutnya tinggal copy dan paste ID tersebut pada halaman sebelumnya. Lalu masukkan nickname sesuai dengan kebutuhan kita dan pilih Register app Selanjutnya download GoogleService-Info.plist  Tambahkan pada bagian Runner di dalam Xcode seperti pada gambar di atas. Lalu centang pilhan-pilihan seperti di atas.Langkah selanjutnya tinggal pilih next dan Continue to Console Selesai! Sekarang kita telah berhasil mengkonfigurasi Firebase ke dalam projek Flutter kita menggunakan iOS. Tunggu tips berikutnya dan kita akan membahas mengenai Konfigurasi di Android. Untuk temen-temen yang mau belajar lebih dalam mengenai Firebase pada Flutter, kita bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Temukan Color Palette yang Cocok dari 3 Website Ini! di BuildWith Angga

Temukan Color Palette yang Cocok dari 3 Website Ini!

Hello people with the spirit of learning! Kamu sering tidak merasa kesulitan cari color palette yang cocok baik untuk UI Design maupun ilustrasimu? Color palette sangat berpengaruh lho pada aspek desain kamu, karena warna selain memperindah namun juga mempunyai kemampuan untuk "mempengaruhi" psikologis kita. Oleh karena itu, kita perlu memilih warna yang tepat sesuai dengan tujuan karya kita. Terus bagaimana dong? Apa pinterest jadi jalan ninja nya? Oh tidak, selain pinterest berikut adalah 3 website yang bisa jadi preferensi kamu saat cari color palette! Coolors Website ini selain menyediakan macam-macam color palette tapi juga up-to-date lho! Karena disini kita dapat eksplorasi color palette yang lagi trendy di jaman kekinian tanpa harus searching dua kali. Selain itu, Coolors juga menyediakan extension yang bisa digenerate langsung ke Adobe & Chrome kita, efektif banget yah? Color Tool - Material Design Salah satu fitur dari Material Design ini dibuat khusus bagi kalian yang ingin eksplor color palette untuk User Interface kalian dengan 6 screen yang berbeda! Uniknya, kita juga bisa terapin primary, secondary dan color text secara langsung di website ini. Jadi kamu tidak perlu khawatir revisi warna untuk klien, karena Color Tool ini bisa di share link sehingga semua orang bisa mengaksesnya! Color Palette Generator - Canva Lhoo, kok ada Canva disini? Jadi, ternyata Canva juga menyediakan fitur color palette namun tidak seperti biasanya. Karena kita bisa mendapatkan color palette kita sendiri dari image / foto kita! Tidak perlu pusing lagi menghadapi klien yang masih ragu dengan color palette, karena bisa kita sesuaikan karakteristik dan produk klien kita dengan generator ini! Bagaimana? Jangan lupa dicatat yah websitenya karena siapa tau bisa digunakan kedepannya! Bagi kalian yang ingin mempelajari cara menggunakan color palette yang benar pada User Interface kalian, kalian bisa mengikuti kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Karena selain visual design, kita juga bisa mempelajari User Interface secara menyeluruh. Jadi tunggu apa lagi? Selamat belajar!

Kelas 3 Keuntungan Brainstorming dengan Whimsical di BuildWith Angga

3 Keuntungan Brainstorming dengan Whimsical

Hello people with spirit of learning! Suka merasa ribet ga kalau harus sedia alat tulis dan kertas buat brainstorming product yang mau dibuat? Atau mungkin kalian sedang kerja dan kolaborasi secara remote yang pastinya ga mungkin rekan kerja kalian bisa brainstorming bareng apalagi ngerevisi di waktu yang bersamaan kan? Nah kalo punya kendala seperti itu, coba deh pakai whimsical. Disini saya coba merangkum jadi 3 point kenapa whimsical bisa jadi solusi kalian dalam brainstorming sebelum ngedesign. Dashboard Pertama, kalian bisa kunjungin website whimsical.com, disini saya ga akan ngasih tau cara daftar dan loginnya karena saya yakin kalian udah pada bisa ya. Cukup daftar akun emailnya aja, atau kalo ga mau ribet juga bisa daftar pakai akun google mail yang udah kalian punya. Kerja Bareng Secara Real Time Sebelum kalian bisa kerja bareng, di whimsical perlu invite akunnya dulu (ya jelas juga ya, kalo ga diundang nanti siapa aja bisa ngacak-ngacak projectnya dong ya). Caranya simple, pilih menu Share, Export & Print. Setelah itu, lanjut pilih menu Get Shareable Link yang ada pada baris menunya. Nah, setelah itu kalian bisa masukkan email akun teman kolaborasinya dan pastinya udah terdaftar di whimsical yaa. Oya, perhatiin juga nih ketiga menu yang ada di bagian Add guest. Karena masing-masing menu itu fungsinya beda-beda. Viewer: Akun ini cuma bisa melihat project yang kalian buat aja.Commenter: Akun ini bisa melihat dan juga komen revisi sama brainstorming yang udah kalian buat.Editor: Akun ini punya kendali yang sama seperti pemilik utama. Bisa mengubah tampilannya atau bisa juga hapus tampilan yang udah kalian buat. So, pastiin tipe guestnya ya sebelum ngundang akunnya. Ok, kalo tadi udah ngebahas tentang whimsical dan cara kolaborasi bareng. Sekarang kita cari tau, emangnya di whimsical bisa buat brainstorming apa aja sih? 1. User Flow Pertama, di whimsical kalian bisa membuat user flow atau mungkin ada yang nyebutnya flowchart. User Flow ini jadi tahap yang penting banget buat kalian nentuin alur produk yang akan dibuat. Sehingga kalian punya gambaran tentang halaman apa saja yang akan dibuat nantinya. And the next step is... 2. Sitemap Kalo udah selesai bikin user flow, kalian bisa lanjut ke bagian sitemap biar kalian bisa lebih punya gambaran tentang design yang akan dibuat. Nah, di sitemap ini kalian bisa nentuin screen apa aja yang akan dibuat dan ga hanya itu, dengan membuat sitemap kalian juga bisa punya gambaran tentang konten apa aja yang harus dibuat dalam setiap halamannya. 3. Wireframe Yang terakhir ada wireframe yang mungkin dari kalian udah tau proses ini ya. Jadi, di wireframe ini kalian menuangkan semua hasil brainstorming dari tahap user flow dan juga sitemap dan mengubahnya ke tampilan visual dalam bentuk layouting (tanpa memikirkan warna dan tipografinya). Nah itu dia beberapa keuntungan brainstorming menggunakan whimsical yang pastinya bakal bikin proses brainstorming kalian jadi makin lebih cepat. Jika kalian tertarik mempelajari lebih dalam tentang proses brainstorming di whimsical, silahkan bergabung pada kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Dalam kelas itu, kita akan bersama-sama membedah dan mempelajari proses apa saja yang harus dilakukan dalam mendesign biar prosesnya jadi lebih cepat dan efisien. Ga hanya itu, kalian juga akan mempelajari bagaimana caranya mengubah brainstorming menjadi product design yang menarik dan menjual. Sampai jumpa di kelas yaa! Terima kasih.

Kelas Flutter Tutorial: Tips Belajar Flutter Untuk Pemula di BuildWith Angga

Flutter Tutorial: Tips Belajar Flutter Untuk Pemula

Hello people with the spirit of learning! Flutter merupakan SDK yang dikembangkan oleh Google untuk membangun aplikasi Android, iOS, Website, dan Desktop dalam single codebase. Sejak pertama kali diluncurkannya, hingga saat ini Flutter sudah digunakan oleh berbagai perusahaan besar seperti Alibaba, Tencent, Ebay, Grab, dan masih banyak lainnya. Namun, banyak developer pemula yang masih kebingungan bagaimana cara belajar Flutter secara efisien. Pada artikel kali ini, saya akan membagikan tips kepada kalian bagaimana cara yang efisien untuk belajar flutter. Konsep OOP Hal yang pertama perlu kita pelajari untuk menjadi seorang Flutter Developer adalah Konsep Object Oriented Programming (OOP). Karena di dalam Flutter hampir semua Widgets menggunakan konsep OOP, sehingga mudah digunakan secara berulang kali. Basic Widgets Setelah kita paham konsep OOP, hal berikutnya yang perlu kita pelajari adalah Basic Widgets yang ada di dalam Flutter. Seperti AppBar, Container, Text, Image, BottomNavigationBar, dan widget-widget lainnya. Karena nantinya widget-widget tersebut akan sering kita gunakan saat membuat aplikasi menggunakan Flutter. Layouting Kemudian, setelah mempelajari basic widgets, hal yang berikutnya kita pelajari adalah bagaimana cara membuat layout yang baik pada Flutter. Menurut saya belajar layouting ini sangat penting dalam proses development aplikasi kita. Karena seringkali terdapat UI Design yang memiliki layout yang sulit diimplementasi, sehingga kita harus lebih kreatif dalam melakukan slicing layout pada aplikasi. State Management Hal berikutnya yang perlu dipelajari adalah State Management. Kita bisa belajar menggunakan berbagai API baik yang sederhana seperti setState pada Stateful Widget, ataupun Plugin State Management seperti Provider, BLoC, dan GetX. Dengan adanya State Management, data-data pada aplikasi kita dapat dikelola dengan baik. Consume API Yang terakhir adalah Consume API. Kita bisa menggunakan berbagai API yang disediakan secara global atau membuatnya sendiri dengan teknologi Backend seperti Firebase, Laravel ataupun Node Js. Dengan menggunakan Consume API, data yang ada pada aplikasi kita bisa lebih dinamis. Bagaimana? Apakah kalian sudah siap menjadi seorang Flutter Developer Profesional? Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian bisa mengikuti kelas Fullstack Laravel Flutter E-Commerce App. Pada kelas ini kita akan belajar membuat aplikasi menggunakan Flutter dan Laravel dengan studi kasus toko online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar dapat mencapai target pasar kita.

Kelas Flutter Tutorial: Menambahkan Icon SVG pada Flutter di BuildWith Angga

Flutter Tutorial: Menambahkan Icon SVG pada Flutter

Hello, people with the spirit of learning. Ketika kita sedang mengembangkan sebuah aplikasi akan ada banyak komponen di dalamnya untuk mendukung seluruh tampilan aplikasi tersebut. Mulai dari teks, icon, gambar, button dan masih banyak lagi komponen di dalamnya. Pada tutorial kali ini, kita akan belajar bersama-sama bagaimana caranya menambahkan Icon dengan format SVG pada projek Flutter kita. Mempersiapakan Komponen Download Icon Pertama-tama kita perlu mempersiapkan Icon yang ingin kita tambahkan pada projek kita. Flaticon merupakan salah satu platform yang memiliki banyak Icon yang dapat kita download secara gratis.  Kita bisa download Icon tersebut di link berikut:https://www.flaticon.com/free-sticker/woman_5046936?related_id=5046936 Lalu pilih SVG seperti contoh di atas. Nantinya Icon akan terunduh secara otomatis dan simpan file svg tersebut pada folder assets yang ada pada projek Flutter. 2. Menambahkan Package Flutter SVG Jika sudah berhasil mengunduh Icon di atas, maka selanjutnya kunjungi website Dart Packages pada link berikut: https://pub.dev/ Setelah itu search "flutter svg", dan pilih pilihan yang paling atas. Langkah selanjutnya, pilih installing menambahkan dependencies serta import flutter svg pada file pubspec.yaml yang ada dalam projek Flutter kita. flutter_svg: ^0.22.0 3. Mengubah Assets Step ketiga adalah mengubah assets pada file pubspec.yaml agar Icon yang akan kita tampilkan dapat ditampilkan pada projek Flutter. Kita dapat mengganti bagian assets ini seperti pada contoh di atas Proses Code Pada Flutter Tutorial kali ini, kita akan membuat tampilan seperti gambar di atas. Seluruh komponen yang diperlukan agar Icon SVG dapat ditampilkan sudah kita persiapkan pada step sebelumnya. Sekarang kita akan mengimplementasikan cara menambahkan Icon pada kodingan projek Flutter. Pada poin kedua Menambahkan Package Flutter SVG, kita telah menambahkan dependencies pada file pubspec.yaml, namun dibawahnya ada satu step lagi yang perlu kita lakukan, yaitu mengimport flutter_svg.dart, Oleh karena itu, langkah pertama adalah kita perlu mengimpor flutter_svg.dart pada file main.dart. import 'package:flutter_svg/flutter_svg.dart'; Menambahkan Teks pada main.dart import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), ], ), ), ), ); } } Hasil: 3. Menambahkan Icon SVG SvgPicture.asset( 'assets/woman.svg',), Hasil: Full Code import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), SvgPicture.asset( 'assets/woman.svg', ), ], ), ), ), ); } } Well done! Sekarang kita telah berhasil menambahkan Icon SVG pada projek Flutter kita. Nantikan tips-tips menarik yang lainnya yah! Ohya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas-kelas Flutter premium serta gratis yang ada di website Buildwith Angga. Disini, kita dapat memperdalam pengenalan kita terhadap Flutter serta membangun portofolio yang nantinya akan sangat berguna buat kita.  Selamat mencoba!

Kelas 5 Website Icon Gratis untuk UI/UX Designer di BuildWith Angga

5 Website Icon Gratis untuk UI/UX Designer

Hello people with the spirit of learning 👋. Siapa disini masih bingung mencari Icon untuk Visual Design kita? Jika iya, di artikel ini kita membahas tentang 5 website Icon Gratis untuk UI/UX Designer🤩. Lets Go🔥 1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita. 2. Feather Apa itu Feather? Feather adalah kumpulan ikon open source yang cantik. Setiap ikon dirancang pada kisi 24x24 dengan penekanan pada kesederhanaan, konsistensi, dan fleksibilitas. Disini kita bisa mengatur Size dan juga Stroke widthnya sesuka kita sebelum mendownloadnya. selain itu, icon yang disediakan oleh feather berstyle outline. 3. HeroIcons Apa itu HeroIcons? Heroicons merupakan Satu set 450+ ikon SVG berkualitas tinggi berlisensi MIT gratis untuk Anda gunakan dalam proyek web Anda. Tersedia sebagai ikon SVG dasar dan melalui perpustakaan React dan Vue pihak pertama. Selain mudah kita pakai, Heroicons juga menyediakan soft file Figmanya juga. Selain Style Outline, Heroicons juga memiliki Style Solid 4. Flaticon Apa itu Flaticon? Flaticon adalah layanan web yang dapat digunakan untuk mengunduh ikon vektor dengan cepat dan mudah, untuk digunakan secara bebas pada situs web atau blog Anda. 5. Material Icon Apa itu Material Icon? Material Icon adalah simbol yang menyenangkan dan dibuat dengan indah untuk tindakan dan item umum. unduh di desktop untuk menggunakannya dalam produk digital Anda untuk android, ios, dan web Okay people with the spirit of learning👋. Itulah 5 website Icon Gratis untuk visual design kita sebagai seorang UI/UX Designer. Semoga artikel ini bermanfaat

Kelas Cara Membuat Fancy Bottom Navigation di Figma di BuildWith Angga

Cara Membuat Fancy Bottom Navigation di Figma

Hello people with the spirit of learning 👋. Di artikel ini kita akan membuat fancy navigation dengan sangat mudah di figma🤩. oke langsung saja kita mulai, lets go🔥 Step 1: Buatlah Rectangle Buatlah Rectangle (r) dengan ukuran 375x80 (*Weightnya harus sesuaikan dengan ukuran frame yang kita pakai) Step 2: Buatlah Ellipse Buatlah Ellipse (e) dengan ukuran 80x80Lalu Pastikan Rata tengah dengan rectangle seperti digambar diatas. Setelah itu Duplicate Ellipse tadi,Lalu jadikan ukurannya menjadi 64x64Pastikan rata tengah dengan Ellipse sebelumnya Step 3: Boolean Groups Seleksi Rectangle dan Ellipse yang kita duplicate tadiLalu pergi ke menu Boolean GroupsSetelah itu pilih Subtract selection Step 4: Outline Stroke Pilih Rectangle yang sudah kita Subtract selection tadiLalu Klik kananPilih Outline stroke Step 5: Corner Radius 1. Klik 2x pada Rectangle 2. Pilih 2 Titik Anchor Point seperti di gambar (*pastikan sudah melakukan step 4) 3. Setelah itu diberi Corner Radius 24 Step 6: Finishing Terakhir kita tambahkan beberapa component: Tambahkan beberapa IconTambahkan juga corner radius di beberapa sudut Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :) Oiya, kalau kita mau meng convert fancy navigation ini kedalam bentuk code, kita bisa mengikuti kelas Full-Stack Laravel Flutter: E-Commerce App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus membeli sepatu online.

Kelas Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development di BuildWith Angga

Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development

Dalam dunia programming, sudah pasti kita tidak asing dengan yang namanya IDE. Integrated Development Environment (IDE) merupakan sebuah tools yang digunakan untuk memudahkan para developer dalam menuliskan kode untuk pengembangan perangkat lunak. Nah dalam tips kali ini, kita akan membahas keyboard shortcut yang akan mempercepat proses kita dalam pengembangan software. 1. Show All Shortcut Jika kita baru pertama kali menggunakan Visual Studio Code dan ingin mencari sebuah keyboard shortcut yang akan kita butuhkan, kita tinggal menekan Ctrl + K + S untuk pengguna Windows atau ⌘ + K + S untuk pengguna Mac. 2. Toggle Sidebar Pada saat proses koding, terkadang kita perlu untuk menutup sidebar agar kita dapat melihat tampilan layar kodingan kita terlihat lebih luas. Nah, agar proses tersebut dapat berjalan lebih cepat kita cukup menggunakan keyboard shortcut Ctrl + B untuk pengguna Windows atau ⌘ + B untuk pengguna Mac. 3. Toggle Build-in Terminal Terminal atau biasa dikenal sebagai command lines atau consoles memungkinkan user bisa mengetikkan perintah dalam bentuk teks dan memberikan instruksi pada komputer untuk mengerjakan tugas tertentu. Pada Visual Studio Code, kita dapat dengan cepat membuka terminal dengan menggunakan keyboard shortcut Ctrl + ` untuk pengguna Windows atau ^ + ` untuk pengguna Mac.  4. Trigger Suggest Terkadang saat kita sedang mengkoding sesuatu, kita mungkin kadang dapat sewaktu-waktu lupa opsi syntax yang akan kita gunakan. Visual studio code mempunyai keyboard shortcut yang dapat menjadi Code Assist atau bisa kita kenal dengan Trigger Suggest yang dapat membantu kita jika kita bingung atau lupa kode apa yang akan kita gunakan selanjutnya. Kita dapat menggunakan keyboard shortcut Ctrl + Space untuk pengguna Windows atau ^ + Space untuk pengguna Mac. 5. Tab Through Open Files Pada saat proses koding, kita seringkali perlu untuk membuka file-file lain untuk menambahkan, menghapus, ataupun mengedit kodingan kita yang sebelumnya. Pada Visual Studio Code, kita dapat dengan cepat membuka file-file yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + Tab untuk pengguna Windows atau ^ + Tab untuk pengguna Mac.  6. Toggle Comment a Line Saat kita ingin menambahkan pesan atau penjelasan pada kodingan kita, kita dapat menggunakan comment agar pesan tersebut tidak dieksekusi. Kita dapat menggunakan keyboard shortcut Ctrl + / untuk pengguna Windows atau ⌘ + / untuk pengguna Mac. 7. Select Word Keyboard shortcut select word dapat digunakan untuk memilih kata yang ingin kita edit ataupun hapus. Kita dapat dengan cepat memilih kata dengan menggunakan keyboard shortcut Ctrl + D untuk pengguna Windows atau ⌘ + D untuk pengguna Mac.  8. Quick Fix Kesalahan saat penulisan kodingan merupakan hal yang sangat wajar dan terkadang untuk memperbaiki hal tersebut akan membutuhkan waktu. Pada Visual Studio Code, kita dapat dengan cepat mengganti atau mengubah kodingan yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + . untuk pengguna Windows atau ⌘ + . untuk pengguna Mac. 9. Reopen Closed Editor Pada Visual Studio Code, kita dapat dengan cepat membuka kembali file-file yang sebelumnya sudah kita buka hanya dengan menggunakan keyboard shortcut Ctrl + Shift + T untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.   10.  Zoom Out and Zoom In Keyboard shortcut yang terakhir yaitu untuk mempermudah kita dalam memperbesar atau memperkecil tampilan layar kita atau zoom out dan zoom In. kita dapat menggunakan keyboard shortcut Ctrl + Shift untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.  Nah, itulah 10 Top Shortcut yang akan meningkatkan efisiensi ketika kita sedang mengembangkan software menggunakan Visual Studio Code. Semoga tips ini bermanfaat. 

Kelas 5 Website Inspirasi Desain untuk Flutter Developer di BuildWith Angga

5 Website Inspirasi Desain untuk Flutter Developer

Hello people with the spirit of learning.  Dalam pengembangan sebuah aplikasi mobile, akan ada banyak aspek  yang perlu diperhatikan, salah satunya adalah tampilan dari sebuah aplikasi. Tampilan yang menarik dalam sebuah aplikasi mobile seringkali menjadi hal yang cukup penting untuk diperhatikan. Oleh karena itu, pada tips ini kita akan membahas mengenai 5 website yang dapat kita jadikan sebagai inspirasi sebagai Flutter Developer.  1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita.  2. Dribbble Mungkin sebagian banyak orang sudah tahu apa itu Dribble. Dribbble merupakan sebuah website yang dapat menjadi platform untuk designer dalam memamerkan karya mereka. Selain itu, dribbble juga dapat menjadi platform untuk designer sebagai tempat untuk menaruh portofolio desain-desain yang telah mereka buat serta mencari pekerjaan secara online. Oleh karena itu, Dribbble dapat menjadi platform yang tepat untuk developer juga dalam mencari inspirasi desain yang baik jika sedang ingin mengembangkan sebuah aplikasi.  3. Pinterest Pinterest merupakan sebuah sosial media asal Amerika yang dibuat untuk menemukan ide dalam bentuk gambar seperti resep, inspirasi rumah dan gaya, UI/UX Design dan banyak lagi. Kita juga dapat mencari inspirasi-inspirasi desain jika ingin mengembangkan sebuah aplikasi. Cukup ketik kata kunci seperti “UI Design” dan kita akan menemukan banyak sekali UI Design yang sangat bagus.  4. Uplabs Uplabs merupakan sebuah platform asal California yang dapat menjadi referensi kita dalam mencari ide design pada saat mengembangkan aplikasi. Uplabs juga menyediakan fitur dimana kita dapat mendownload UI Kits yang kita inginkan dalam bentuk File Figma, Adobe XD dan bahkan Sketch.  5. Collect UI Collect UI merupakan platform yang menyediakan banyak sekali inspirasi UI Design. Kita juga dapat memilih kategori UI Design sesuai dengan apa yang sedang kita butuhkan. Collect UI menampilkan desain-design pilihan atau hand picked yang berasal dari Dribbble, sehingga Collect UI hanya akan menerima desain yang berasal dari Dribbble. Okay people with the spirit of learning, itulah 5 website yang dapat kita jadikan sebagai referensi ketika sedang mengembangkan aplikasi kita. Semoga tips ini bermanfaat. 

Kelas Top 5 Most Used Widgets In Flutter di BuildWith Angga

Top 5 Most Used Widgets In Flutter

Hello people with the spirit of learning. Pada saat mengembangkan aplikasi menggunakan Flutter, kita akan selalu membutuhkan widget-widget untuk membangun aplikasi Flutter kita. Widget adalah komponen-komponen pendukung pada Flutter seperti Button, Text, Icon dan lain sebagainya. Semua yang berada pada tampilan aplikasi kita disebut dengan Widget. Dibawah ini kita akan membahas widget-widget yang paling sering dipakai pada Flutter. 1. Image Image.asset( 'assets/images.png', width: 267, height: 200, ), Image merupakan sebuah widget untuk menambahkan dan menampilkan gambar pada Flutter. Gambar sangat penting untuk setiap aplikasi. Gambar juga dapat memberikan informasi penting atau berfungsi sebagai alat bantu visual untuk meningkatkan estetika aplikasi kita. Contoh diatas merupakan kodingan untuk menampilkan gambar. 2. Text Text( 'Hello people with the spirit of learning', style: TextStyle( color: Color(0xff007DFF), fontSize: 26, fontWeight: FontWeight.bold, ), ), Pada saat membangun sebuah aplikasi, pasti akan membutuhkan banyak sekali text di dalamnya, karena Text merupakan bagian penting dalam UI aplikasi mobile manapun. Text pada Flutter juga dapat dimodifikasi mulai dari ukuran teks, ketebalan hingga jenis font yang ingin kita gunakan seperti pada contoh diatas.  3. AppBar AppBar( title: Text('AppBar Demo'), backgroundColor: Colors.blue, ), AppBar atau Application Bar adalah salah satu widget yang digunakan sebagai menu penunjuk atau dapat menampilkan beberapa navigasi dari aplikasi. Biasanya widget AppBar ini terletak pada bagian paling atas aplikasi seperti pada contoh gambar di atas. Kodingan di atas merupakan contoh kodingan untuk membuat sebuah AppBar.  4. Container Container( width: 370, height: 51, color: Colors.black, ), Pada saat slicing UI Design dengan Flutter, Container merupakan widget yang cukup akan sering kita gunakan. Widget container akan sangat membantu kita dalam menempatkan widget serta mengatur layout atau ukuran serta jarak antar Widget. Container memiliki properti-properti seperti padding, margin, border, border radius dan lain sebagainya. 5. Bottom Navigation Bar BottomNavigationBar( selectedItemColor: Color(0xff6A6AE3), items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Padding( padding: const EdgeInsets.only(top: 8.0, bottom: 15.0), child: Image.asset( 'assets/calls.png', width: 24, height: 24, ), ), label: 'Calls', ) ], ), Bottom Navigation Bar merupakan sebuah widget material yang dapat digunakan untuk membuat sebuah navigasi antar halaman yang ada pada sebuah aplikasi Flutter. Contohnya icon home pada gambar dibawah ini menunjukkan navigasi jika kita ingin masuk ke halaman home tersebut. Nah, itulah 5 widget Flutter yang akan sering kita gunakan pada saat kita ingin mengembangkan aplikasi kita. Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Mastering UI Design to Flutter: Jobs App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana proses Design to Code menggunakan Flutter.

Kelas Flutter Tutorial: Simple Notes App Using Provider di BuildWith Angga

Flutter Tutorial: Simple Notes App Using Provider

Hello people with the spirit of learning. Pada tips kali ini, kita akan belajar bagaimana mengimplementasikan State Management menggunakan provider pada Flutter. Untuk demo aplikasi, kalian dapat melihat pada video di bawah ini : Pada Flutter, ada beberapa jenis State Management selain Provider, seperti Bloc, Redux, GetIt dan lain sebagainya. Nah pada tips kali ini, kita akan langsung coba belajar untuk membuat aplikasi sederhana menggunakan Provider. So, let’s begin. Step 1: Install Package Provider Install provider di Provider Pacakage.Masukkan provider: ^5.0.0  pada pubspec.yaml pada depedencies Step 2: Menambahkan 2 Folder Baru Membuat folder models untuk memasukkan kelas Note dan NotesOperation yang berfungsi untuk membuat String dan membuat object note serta list note.Membuat folder screen untuk membuat tampilan notes dan tampilan notes ketika akan menambahkan note atau task baru. Source Code Step 3: Membuat File NotesOperation (User Model Folder) import 'package:flutter/cupertino.dart'; import 'package:task_manager/models/note.dart'; class NotesOperation with ChangeNotifier { //List of note List<Note> _notes = []; List<Note> get getNotes { return _notes; } NotesOperation() { addNewNote('First Note', 'First Note Description'); } void addNewNote(String title, String description) { //Note object Note note = Note(title, description); _notes.add(note); notifyListeners(); } } Kita perlu membuat file notes_operation.dart pada folder models yang telah kita buat pada step ke-2. Pada kelas NotesOperation mempunya list dengan tipe note di mana kita akan menyimpan semua data yang dibuat pengguna untuk menyimpan catatan ToDo List. Fungsi addNewNote berfungsi untuk menambahkan data ke List catatan Array. Step 4: Membuat File Note (User Model Folder) class Note { String title; String description; Note(this.title, this.description); } Selanjutnya, kita perlu membuat file note.dart pada folder models. Pada file note ini terdapat dua field String untuk menyimpan data, yaitu title, description serta sebuah constructor. Step 5: Membuat File Home Screen (Screen Folder) import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/note.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/add_screen.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blueGrey, floatingActionButton: FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => AddScreen(), ), ); }, child: Icon(Icons.add, size: 30, color: Colors.blueGrey), backgroundColor: Colors.white, ), appBar: AppBar( title: Text( 'Task Manager', style: TextStyle( fontSize: 25, fontWeight: FontWeight.bold, ), ), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Consumer<NotesOperation>( builder: (context, NotesOperation data, child) { return ListView.builder( itemCount: data.getNotes.length, itemBuilder: (context, index) { return NotesCard(data.getNotes[index]); }, ); }, ), ); } } class NotesCard extends StatelessWidget { final Note note; NotesCard(this.note); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(15), padding: EdgeInsets.all(15), height: 150, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( note.title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), SizedBox(height: 5), Text( note.description, style: TextStyle(fontSize: 17), ), ], ), ); } } File home_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. Step 6: Membuat File Main import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/home_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider<NotesOperation>( create: (context) => NotesOperation(), child: MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ), ); } } File main.dart ini perlu kita masukkan ke folder lib. Step 7: Membuat File Add Screen (Screen Folder) import 'package:flutter/material.dart';import 'package:provider/provider.dart';import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {String titleText;String descriptionText; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget { @override Widget build(BuildContext context) { String titleText; String descriptionText; return Scaffold( backgroundColor: Colors.blueGrey, appBar: AppBar( title: Text('Task Manager'), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Padding( padding: EdgeInsets.only( top: 15, left: 15, right: 15, bottom: 80, ), child: Column( children: [ TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Title', hintStyle: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), ), style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), onChanged: (value) { titleText = value; }, ), Expanded( child: TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter Description', hintStyle: TextStyle( fontSize: 18, color: Colors.white, ), ), style: TextStyle( fontSize: 18, color: Colors.white, ), onChanged: (value) { descriptionText = value; }, ), ), TextButton( onPressed: () { Provider.of<NotesOperation>(context, listen: false) .addNewNote(titleText, descriptionText); Navigator.pop(context); }, style: TextButton.styleFrom( padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10), backgroundColor: Colors.white, ), child: Text('Add Note', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blueGrey, )), ) ], ), ), ); } } File add_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. All done! Akhirnya kita dapat membuat sebuah aplikasi notes sederhana untuk dapat memasukkan task atau to-do list kita menggunakan provider.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar! File Github: Task Manager 

Kelas Testing Node Menggunakan Mocha Dan Chai di BuildWith Angga

Testing Node Menggunakan Mocha Dan Chai

Hello people with the spirit of learning! Node.js memiliki sejumlah package di npm yang mempermudah proses menulis kode testing. Dalam tutorial ini, kami menggunakan dua modul Node paling populer untuk pengujian: Mocha dan Chai . Mocha dan Chai dalam melakukan unit testing. Mocha merupakan framework untuk testing pada NodeJS, sedangkan Chai merupakan assertion library yang akan digunakan untuk mengetes kode. 1. Membuat aplikasi TODO Kita akan membuat sebuah aplikasi todo list dari data dummy dan kita akan membuat file dan folder berikut ini : app todo controller.js dummy.js router.js tests index.js package.json server.js npm init Untuk mengelola data todo list. Kita perlu membuat file “app/todo/dummy.js” yang berisi data berbentuk array object. Selanjutnya, melakukan npm init : npm init perintah npm init akan membuat 1 file dengan nama package.json Lalu, install express sebagai frameworknya dan body-parser : npm i express body-parser --save Lalu install beberapa dependency lainnya : npm i mocha chai chai-http nodemon --save-dev dan tambahkan scripts yang ada di file package.json "scripts": { "test": "mocha tests/*.js --exit", "dev": "nodemon ./server.js" }, perintah npm run test akan menjalan semua perintah testing yang ada di file tests project yang telah dibuat dan untuk perintah npm run dev untuk menjalan local development di komputer.  sekarang buka file “app/todo/dummy.js” dan ketikan kode berikut ini: const todos = [ { id: 1, text: 'Checkout kelas di buildwithangga', createdAt: new Date() }, { id: 2, text: 'Membaca Tips dibuildwithangga', createdAt: new Date() }, { id: 3, text: 'Belajar MERN Stack di buildwithangga', createdAt: new Date() }, { id: 3, text: 'Ibadah', createdAt: new Date() }, ]; module.exports = todos; sekarang buka file “app/todo/dummy.js” dan ketikan kode seperti gambar diatas.sekarang buka file “app/todo/controller.js” dan ketikan kode berikut ini: const todos = require('./dummy'); module.exports = { // get all todos getAllTodos: async (req, res) => { try { res.status(200).json({ message: "All the todos", todos }) } catch (error) { res.status(500).json({ message: "Internal server error" }) } }, // get single todo findTodo: async (req, res) => { const { id } = req.params try { const findTodo = todos.find(todo => todo.id === parseInt(id)); if (findTodo) { return res.status(200).json({ todo: findTodo, message: "A single todo", }); } return res.status(404).json({ message: "Todo not found", }); } catch (error) { res.status(500).json({ message: "Internal server error" }) } }, } Baris pertama kita import todo list dummy yang data nya akan kita gunakan.Method pertama, getAllTodos untuk mendapatkan semua data todo list dari data dummy dan mereturn data dengan status code HTTP 200.Method kedua, findTodo digunakan untuk mendapatkan satu data dan mereturn data dengan status code HTTP 200. Jika data tidak ditemukan, akan mereturn dengan status code HTTP 404. sekarang buka file “app/todo/router.js” dan ketikan kode berikut ini: const router = require("express").Router(); const { getAllTodos, findTodo } = require("./controller"); router.get("/", getAllTodos); router.get("/:id", findTodo); module.exports = router; sekarang buka file “server.js” dan ketikan kode berikut ini: const express = require('express'); const bodyParser = require('body-parser'); const todoRouter = require('./app/todo/router') const app = express(); const port = process.env.PORT || 4004; app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/todos', todoRouter); app.listen(port, () => { console.log(`Server started on port ${port}`); }); module.exports = app; sekarang kita sudah dapat lakukan uji coba todo list kita di komputer dengan menjalan perintah “npm run dev” lalu buka postman dan hasil nya akan seperti berikut ini: Endpoint get all todos Endpoint get single todo todo not found kita telah berhasil melakukan testing aplikasi todo list yang telah dibuat dengan menggunakan postman. sekarang kita akan mencoba membuat automated testingnya. 2. Membuat Unit Testing Aplikasi todo list kita telah berhasil dijalankan, tetapi kita perlu melakukan testing. Untuk memastikan dengan benar bahwa aplikasi yang kita buat sudah berjalan sesuai dengan apa yang kita harapkan dan mengurangi kemungkinan terjadinya bug dan error. Automated testing ditulis pada file tests/index.js, seperti berikut: const chai = require('chai'); const chaiHttp = require('chai-http'); const app = require('../server'); chai.use(chaiHttp); chai.should(); describe("Todos", () => { describe("GET /", () => { it("should get all todos", (done) => { chai.request(app) .get('/todos') .end((err, res) => { res.should.have.status(200); res.body.should.be.a('object'); done(); }); }); it("should get a single todo", (done) => { const id = 1; chai.request(app) .get(`/todos/${id}`) .end((err, res) => { res.should.have.status(200); res.body.should.be.a('object'); done(); }); }); it("should not get a single todo", (done) => { const id = 10; chai.request(app) .get(`/todos/${id}`) .end((err, res) => { res.should.have.status(404); done(); }); }); }); }); Pada line pertama file, kita mengimpor semua package yang diperlukan untuk menjalankan unit testing, kemudian kita mengonfigurasi chai untuk menggunakan package chai-http. Kita juga mengonfigurasi chai untuk menggunakan antarmuka should dengan menjalankan chai.should (). Setiap blok describe digunakan untuk mengelompokkan pengujian dengan akses yang lebih mudah dan pengaturan yang lebih baik.Pada blok it pertama, test yang menguji endpoint get(‘ /todos ‘) untuk mendapatkan semua data todo list, response harus memiliki status code 200 dan return harus berupa sebuah object.Lalu blok it kedua, adalah test untuk endpoint get(‘/todos/${id}’) untuk mendapatkan data tunggal todo yang di query melalui id todo dan response harus memiliki status code 200 dan return harus berupa sebuah object.Dan pada block it ketiga, masih test untuk endpoint get(‘/toods/${id}’) endpoint masih sama seperti it kedua tapi hanya berbeda response. Dengan asumsi jika data todo tidak ada, it response harus memiliki status code 404. Sekarang kita akan mencoba menjalan hasil dari testing kita dengan perintah “npm run test” bila benar maka hasilnya akan seperti berikut: Repository Selamat kita telah berhasil menyelesaikan “testing in node using mocha and chai”. oiya apabila kamu tertarik belajar lebih lanjut tentang Node JS kamu bisa join di Full Stack Javasctipt (MERN) . pada kelas tersebut kita akan membuat aplikasi booking hotel online. difokuskan kepada JavaScript (Full-Stack JavaScript Developer (MERN). M untuk MongoDB, E untuk ExpressJS, R untuk ReactJS, dan N untuk NodeJS. Kalian akan mempelajari semua hal tersebut pada kelas ini. Tapi bukan hanya sekedar ngoding aja namun kalian akan mulai dari bagian UI dan UX sehingga paham betul bagaimana caranya membangun suatu website yang memiliki better experience. Selamat mencoba dan selamat belajar!

Kelas Flutter Insight: Top 5 Package pada Flutter di BuildWith Angga

Flutter Insight: Top 5 Package pada Flutter

Hello people with the spirit of learning. Pada flutter, ada berbagai macam jenis package yang dapat mempermudah dan mempercepat proses kita dalam mengembangkan aplikasi. Semua package yang kita butuhkan dapat kita temukan di website Flutter Packages. Nah kali ini, kita akan membahas mengenai 5 package-package yang menarik untuk dapat kita gunakan. 1. Google Fonts Kita dapat mengakses packages Google Fonts dengan link berikut: Package Google Fonts Package Google Fonts ini berfungsi agar kita dapat menggunakan fonts dari Google Fonts agar tampilan teks menjadi lebih menarik. Ada berbagai macam pilihan fonts yang dapat kita pilih sesuai dengan style yang kita inginkan. 2. Email Validator Kita dapat mengakses packages Email Validator dengan link berikut: Email Validator Packages Package Email Validator ini dapat kita gunakan jika kita ingin membuat sebuah validasi pada form email yang telah kita buat seperti contoh pada gambar di atas. 3. Shimmer Kita dapat mengakses Packages Shimmer dengan link berikut: Shimmer Flutter Packages Package Shimmer ini dapat memberikan efek shimmer(berkilau) pada project yang sedang kita buat. Seperti jika sedang loading sesuatu, maka kita dapat menambahkan package ini ke dalamnya agar tampilannya lebih menarik dan hidup seperti terlihat pada contoh gambar di atas. 4. Slidable Kita dapat mengakses Packages Slidable dengan link berikut: Flutter Slidable Packages Package Slidable akan sangat berguna jika kita ingin membuat sebuah list item kita dapat memiliki menu tambahan seperti remove, share, archive dan lain sebagainya cukup dengan menggeser list item tersebut ke kanan atau ke kiri seperti contoh di atas. 5. Expandable Kita dapat mengakses Packages Expandable dengan link berikut: Flutter Expandable Packages Package Expandable dapat membuat widget kita diperluas dan diperkecil hanya dengan satu klik saja, sehingga hal tersebut akan menghemat ruang halaman yang kita buat. Nah, itu adalah 5 package yang dapat kita gunakan untuk membuat fitur di dalam aplikasi Flutter kita semakin menarik. Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar!

Kelas Modeling Objek Coin 3 Dimensi dengan Software Blender di BuildWith Angga

Modeling Objek Coin 3 Dimensi dengan Software Blender

Hello people with the spirit of learning! Banyak objek yang dapat kita buat dengan menggunakan software Blender. Dan jika kita masih pemula, Coin adalah salah satu objek yang paling mudah untuk dibuat dan memiliki beberapa komponen yang bisa kita pelajari sekaligus. Nah, untuk membuatnya, kita hanya perlu menyiapkan objek Cylinder dan objek Text. Dan untuk langkah-langkahnya adalah sebagai berikut: Step 1: Menambahkan Objek Cylinder Buka Software Blendernya, dan hapus objek Cube yang ada pada tampilan awal Blender dengan menekan “X” dan pilih DeleteSetelah itu kita bisa tekan “Shift + A”, kemudian pilih “Mesh” dan kita pilih “Cylinder” Step 2: Membuat Base Objek Coin  Kita bisa pipihkan objek Cylinder tersebut dengan menekan “S” dan “Z” dan kita arahkan cursornya kedalam objek Cylinder untuk mengubah skalanya ke sumbu Z atau verticalKemudian kita bisa masuk ke “Edit Mode” dengan menekan “Tab” pada KeyboardSelanjutnya kita seleksi Face yang ada di bagian atas dan bagian bawah objek Coinnya dengan menggunakan “Face Select” yang ada pada samping menu Edit ModeKalau sudah, kita tekan “i” untuk “Inset Face” dan kita tarik kedalam (Lebarnya bisa dilihat di contoh gambar)Setelah itu kita akan Extrude kedalam dengan menekan “E” “S” dan “Z” dan kita tarik kedalam untuk menambahkan segment kedalam objek coinnya. (Bisa dilihat di contoh gambar) Step 3: Menambahkan Bevel pada Objek Coin Sebelum menambahkan Bevel, kita akan masuk dulu ke Object Mode atau tekan “Tab”Dan kita tekan “Ctrl + A” kemudian pilih “Scale” untuk meng-Apply Objek Coinnya Kemudian kita masuk ke Edit Mode lagi dengan menekan “Tab”Kita bisa seleksi setiap garis melingkar pada objek Coin dengan seleksi garis atau “Edge Select”Kemudian kita tekan “Ctrl + B” dan Scroll ke atas, dan kita tambahkan kurang lebih 3 atau 4 garis Step 4: Menambahkan Modifier Subdivision Surface Kita bisa masuk ke area Properties yang ada di bagian kanan, dan kita pilih icon bergambar kunci inggris atau “Modifier Properties”Kemudian kita klik “Add Modifier” dan pilih “Subdivision Surface”Kalau sudah, kita akan masuk lagi ke Objek Mode dengan menekan “Tab” Setelah itu kita tekan “W” dan pilih “Shade Smooth” Step 5: Menambahkan Object Text Tekan “Shift + A” dan pilih “Text”Kemudian masuk ke Edit Mode atau “Tab” dan ketikkan “$” atau dollar Kalau sudah, kita masuk lagi ke Objek Mode atatu tekan “Tab”Setelah itu letakkan posisi text “$” di tengah objek Coin dengan menekan angka “7” untuk melihat view dari arah atasDan tekan “G” untuk memindahkan posisinya, dan juga “S” untuk mengubah skalanya. Step 6: Finishing Setelah selesai menambahkan Text, kita akan Extrude objek Textnya agar memiliki tinggi yang sama dengan objek Coinnya. Kita akan masuk ke “Object Data Properties” atau icon yang bergambar huruf ”a”Kemudian pilih “Geometry” dan tambahkan 0.1m pada bagian “Extrude” Oiya, jumlahnya bisa berbeda, jika size objek yang kita buat juga berbeda, jadi sesuaikan saja tingginya dengan objek Coinnya. Dannn akhirnya selesai! Itu tadi adalah cara simple untuk membuat objek Coin. Temen-temen tinggal tambahkan material dan lighting, agar objek coinnya jadi lebih realistis (untuk dasarnya bisa dilihat di kelas gratisnya buildwithangga) Oiya, materi ini juga ada pada kelas Mastering Blender 3D: Design Icon Set, disitu saya jelaskan secara detail, dan juga ada beberapa tambahan yang buat objek 3D nya menjadi lebih menarik dan enak untuk di lihat. Dan yang lebih penting, di kelas itu juga saya ajarkan bagaimana cara menyiapkan objek 3D yang siap digunakan dan siap untuk dijual! Sekian Tips kali ini, semoga bermanfaat, dan Selamat Belajar!

Kelas Berlatih Membuat User Flow Menggunakan Whimsical di BuildWith Angga

Berlatih Membuat User Flow Menggunakan Whimsical

Hello people with the spirit of learning! Ketika membangun suatu aplikasi/website maka tahap utama yang perlu dilakukan adalah merancang alurnya/user flow.  User flow adalah kumpulan langkah-langkah yang harus dilakukan oleh user saat menggunakan suatu produk untuk menyelesaikan suatu tugas tertentu. Pada tips kali ini kita akan membuat user flow dengan tugas memesan ojek online. tools yang akan kita gunakan yaitu Whimsical yang bisa kalian akses melalui website https://whimsical.com. Oke langsung aja kita mulai. Step 1 :  Menentukan Study Case Disini kita akan merancang user flow untuk fitur memesan ojek online. berikut adalah langkah-langkah untuk membuat user flow : Menentukan kebutuhan userMembuat langkah-langkah yang dilakukan userMembuat User Flow Step 2 :  Menentukan Kebutuhan User Untuk menentukan kebutuhan user biasanya kita dapat melakukan riset untuk memahami lebih dalam apa yang user butuhkan dan harapkan. Contoh nya sepeti ini:  Sebagai user, saya dapat mengetahui lokasi driver ojek terdekatSebagai user saya dapat menentukan kemana saya ingin pergiSebagai user, saya dapat menentukan dimana saya ingin dijemput Step 3 : Membuat Langkah-langkah yang dilakukan user Langkah 1 : User membuka aplikasiLangkah 2 : User menentukan lokasi kemana dia ingin pergiLangkah 3 : User menentukan lokasi penjemputanLangkah 4 : User order ojek Step 4 : Membuat User Flow Menggunakan Whimsical Pertama buka website https://whimsical.com/, kemudian daftar atau login. Step 5 : Buat Project Flowchart Setelah daftar, kemudian buat project baru, lalu pilih menu +Flowchart Step 6 : Membuat Shape Baru Berikutnya, untuk membuat sebuah shape baru, kalian bisa menekan S pada keyboard, atau pilih menu Add Shape lalu pilih shape yang ingin kalian pakai. Step 7 : Membuat User Flow Untuk menambahkan shape, kalian dapat memilih menu Add Shape lalu pilih element yang ingin digunakan seperti Rectangle, Oval, atau yang lainnya namun harus kita sesuaikan bedasarkan fungsinya. Fungsi Simbol-simbol dalam Flowchart Step 8 Finishing User Flow Setelah itu, kalian bisa lanjut mebuat user flow hingga selesai seperti gambar diatas.  Dan kalian telah menyelesaikan sebuah user flow yang akan diubah menjadi wireframe pada tahap design berikutnya. Nah, Sekarang kalian sudah paham kan? Jika masih kesulitan kalian bisa tulis pertanyaan di DM Instagram saya @fransfeby.  Jika kalian ingin mempelajari user flow lebih lanjut, kalian bisa mengikuti kelas UI/UX Design: Gestalt Principle. Terimakasih sudah membaca artikel ini. Semoga bermanfaat. :))

Kelas Membuat Form Sederhana Pada Flutter di BuildWith Angga

Membuat Form Sederhana Pada Flutter

Hello people with the spirit of learning. Pada pembahasan kali ini, kita akan membahas tentang bagaimana membuat form sederhana pada projek Flutter yang sedang kita buat dengan menggunakan widget TextFormField. Step 1: Menambahkan widget TextFormField TextFormField( decoration: InputDecoration( labelText: 'Name *', ), ), Menambahkan widget TextFormField paling dasar dengan cara seperti di atas. Ohya, untuk dapat melihat widget-widget pada Flutter, kalian bisa cek di Flutter Material Library ya.Jika sudah, tampilan form akan terlihat seperti gambar di atas. Step 2: Memberi border pada form TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Menambahkan widget enableborder: OutlineInputBorder pada widget TextFormField yang sudah dibuat.Jika sudah makan tampilan form akan terlihat seperti gambar di atas. Step 3: Menambahkan focusedborder TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Berbeda dengan enabledborder yang sudah kita buat di atas. Focusedborder berfungsi untuk memberikan border pada form jika border sedang di klik atau jika akan sedang diisi(aktif). Step 4: Menambahkan warna pada form TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Untuk lebih mempercantik tampilan form, kita juga dapat menambahkan warna dengan cara menambahkan fillcolor seperti contoh di atas yah. Oh ya! untuk menambahkan field form yang lain kamu tinggal menambahkan widget TextFormField lagi sesuai dengan step-step di atas. Complete Code: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 120, left: 24, right: 24), child: Center( child: Column( children: [ Text( 'Welcome Back', style: TextStyle(fontSize: 20), ), SizedBox(height: 20), Column( children: [ TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), ], ) ], ), ), ), ), ); } } Selesai! Sekarang kamu udah bisa nih membuat form pada projek Flutter mu. Oh iya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Membangun Web Berbasis SPA dengan Mudah Menggunakan VueJS di BuildWith Angga

Membangun Web Berbasis SPA dengan Mudah Menggunakan VueJS

Hello people with the spirit of learning! Tentunya sebagai web developer yang baik, kita harus belajar bagaimana membuat aplikasi yang baik dan menggunakan teknologi terbaru, salah satunya adalah aplikasi berbasis Single Page Apps (SPA). Namun banyaknya tools atau framework yang dapat kita gunakan, terkadang membuat kita sebagai developer menjadi bingung dan pusing, terlebih lagi kebanyakan dari tools yang digunakan memerlukan waktu untuk dapat kita pahami. Tentunya, tools atau framework yang mudah digunakan dan cepat dapat membantu kita dalam membuat aplikasi. Salah satunya adalah menggunakan framework VueJS. VueJS menjadi suatu solusi framework untuk teman-teman yang sedang membangun aplikasi website berbasis SPA. VueJS memudahkan kita untuk membuat aplikasi dengan konsep yang mudah dipahami oleh Developer, terutama teman-teman yang sudah menguasai HTML, CSS dan Javascript. VueJS pun menjadi salah satu framework yang ringan yang dapat kamu gunakan di browser-browser modern manapun, tentunya ini akan memudahkan kamu untuk menjangkau pengguna tanpa harus memikirkan apakah aplikasi kalian berjalan di browser tertentu atau tidak. Sebelum mempelajari tutorial ini, alangkah lebih baiknya jika kalian memahami terlebih dahulu dasar HTML, CSS dan Javascript. Kalian bisa pelajari materi-nya di kelas Starter BuildWith Angga yang dapat kamu kunjungi di tautan ini. Mempersiapkan Tools Sebelum kita dapat membuat aplikasi VueJS kita, langkah awal yang harus kita lakukan adalah mempersiapkan tools. Ada dua cara yang dapat kamu gunakan, menggunakan code editor online atau memasang tools di komputer masing-masing. Untuk tips kali ini, cara yang akan kita gunakan yaitu menggunakan code editor online untuk memudahkan teman-teman membuat aplikasi. Code Editor yang akan kita gunakan yaitu CodeSandbox. Memasang Framework VueJS Untuk dapat memasang framework VueJS di CodeSandbox, kalian dapat membuat Sandbox dengan menekan tombol Create Sandbox yang terletak di pojok kanan atas. Setelah itu, maka akan muncul halaman welcome. Kalian dapat klik tombol Create Sandbox untuk melanjutkan dan memilih framework Vue. Jika sudah, maka halaman Code Editor yang sudah terpasang VueJS dapat kamu gunakan. Yay! Memahami Struktur Project Dalam aplikasi VueJS, ada beberapa aturan dasar yang perlu kamu pahami, salah satunya adalah struktur direktori dari project VueJS. Struktur folder ini merupakan pondasi dasar dari aplikasi kalian, dan dapat dikustomisasi tergantung dari kebutuhan kalian. Komponen utama dari sebuah aplikasi VueJS adalah file main.js yang berisi inisialisasi aplikasi. Secara default, aplikasi VueJS berada di file App.vue Pada file App.vue, terdapat kode aplikasi kita yang dapat kita gunakan dalam membuat aplikasi. Setiap file Vue akan memiliki 3 struktur utama, yaitu template, script, dan style. Aplikasi yang kita buat pun dapat kita bagi lagi ke file yang berbeda dengan menggunakan components. Hal ini akan sangat membantu kalian terlebih jika kalian membuat aplikasi kompleks yang membutuhkan kode yang banyak, tentunya components ini akan membantu kalian. Contoh component yang dapat kamu gunakan pada project ini yaitu component HelloWorld Membuat Kalkulator Sederhana Tentunya teman-teman ingin tahu bagaimana cara membuat aplikasi pada VueJS. Pada kali ini kita akan mencoba membuat kalkulator sederhana, yang akan menghitung angka dari variable yang sudah kita tentukan sebelumnya. Berikut dibawah ini merupakan aplikasi yang akan kita buat. Pertama-tama, kalian dapat membuat components baru dengan membuat file baru pada folder components, lalu kalian beri nama Calculator.vue Lalu, pada file App.vue, ubah kode HelloWorld dan ganti menjadi Calculator, karena kita tidak membutuhkan component HelloWorld. Sebagai contoh lengkapnya, kalian dapat mereferensikan foto dibawah ini. Pada component Calculator, ketikkan kode dibawah ini. Kita akan bahas satu persatu setelah ini. Pada bagian ini, kita menginisialisasi variable pada component Calculator pada VueJS, agar dapat digunakan oleh aplikasi. Pada kasus kali ini, kita membuat 3 variable, yaitu a, b dan result. Pada bagian ini, kita membuat fungsi kalkulasi pada aplikasi kita, dengan nama fungsi calculate(). Untuk dapat mengakses variable, kita perlu menambahkan keyword this. Pada bagian ini, kita membuat tampilan interface untuk digunakan oleh pengguna. Kita dapat menggunakan tag layaknya di HTML, dengan beberapa tambahan fitur. Pada bagian input, kita tambahkan v-model agar data yang dimasukkan ke input secara otomatis akan masuk ke variable yang sudah kita tentukan. Kita tambahkan .number agar VueJS dapat membaca value tersebut sebagai number. Pada bagian tombol, kita tambahkan @click atau v-on:click untuk dapat memanggil fungsi calculate() yang sudah kita buat sebelumnya di bagian script. Pada bagian paragraph, kita akan memunculkan data result yang berisi hasil kalkulasi dari data a dan b dengan menggunakan {{ }} Viola! Maka aplikasi kalkulator sederhana kalian sudah selesai. Sangat mudah bukan? Tentunya aplikasi yang akan kalian buat akan lebih kompleks dari ini, dan tentunya akan banyak fitur yang kalian buat dalam aplikasi tersebut. Untuk teman-teman yang ingin mempelajari VueJS lebih lanjut, kalian dapat mengikuti kelas-kelas Starter dibawah ini: Vue JavaScript FrameworkNuxtJS Javascript Framework Dan untuk teman-teman yang tertarik untuk membuat aplikasi kompleks yang tentunya dapat kalian gunakan untuk membuat project, kalian dapat mengikuti rekomendasi kelas Premium dibawah ini, tentunya dengan studi kasus yang lengkap! Selamat Belajar! :) 

Kelas Mulai menggunakan redux pada ReactJS di BuildWith Angga

Mulai menggunakan redux pada ReactJS

Apa sih redux? Redux adalah salah satu state management yang sangat hype pada waktunya dan masih relevan sampai sekarang. Redux juga menawarkan tools untuk masing-masing browser contoh chrome redux devtools untuk memonitor keadaan state kita saat ini. Package middleware-nya juga sudah banyak di kembangkan gratis dan siap digunakan untuk memudahkan kita mengembangkan aplikasi yang kita sedang kerjakan. Kenapa redux? Kenapa enggak? Haha sebenarnya semua state management itu cuman tools, kita lah sebagai operator yang baik harus bisa memaksimalkan potensinya, tapi jujur aja redux didukung package middleware yang bertebaran di npm yang mana memudahkan kita untuk melakukan development seperti redux-thunk, redux-saga, redux-persist dan sebagainya. Kalau kita memilih context API dibanding redux bisa-bisa saja tapi untuk logic seperti thunk nanti kita butuh melakukan extra karena harus buat dari scratch. 1. Setup Redux Ada banyak contoh penerapan redux atau state management pada aplikasi nantinya, harapan saya kalian tidak terpaku pada contoh ini tapi berikut adalah penerapan best practice menurut saya, pada aplikasi ReactJS anda, mulai dengan menginstall: npm install redux react-redux Yang pasti kita akan menginstall redux dan react-redux sebagai jembatan untuk mengkomunikasikan react dengan redux state. Dua package ini saja sudah cukup untuk menjalankan redux di aplikasi ReactJS kita. Siapkan folder redux di dalam src/ Folder redux pada /src/ 2. File Store Buat file store.js pada folder redux [/src/redux/store.js] dan sematkan kode berikut: Pada contoh kali ini kita akan membahas redux sederhana yang hanya menyimpan state counter 3. Types Ada yang menyebut sebagai constants atau types dimana kita mendeklarasi setiap kegiatan yang akan terjadi pada reducer counter agar tidak ada salah sebut nama variable ketika digunakan. Maka sebaiknya kita buat 1 folder types pada redux [/src/redux/types] dan sebuah file baru dengan nama counter.js dengan kode berikut: Tidak ada yang terlalu istimewa dari kode diatas, kita hanya mengexport constanta dengan nama kegiatan tertentu. 4. Actions Pada folder ini kita harus setuju bahwa semua action atau kegiatan atau juga bisa disebut kejadian akan kita letakkan pada folder ini. Buat folder baru actions di dalam folder redux [/src/redux/actions/] dan buat sebuah file dengan nama counter.js Pada baris pertama kita import semua kegiatan yang kita miliki pada tipe kegiatan yang akan terjadi pada reducer counterPada baris 3-5 adalah sebuah arrow function dengan nama increment yang hanya mengirim sebuah object (dispatch) ke reducer kita dengan isian object seperti tertera pada line 4. Jika action kita cukup kompleks dan memiliki data yang akan dikirim, kita bisa sematkan sebagai kode snippet berikut: Abaikan langkah berikut jika kalian ingin melanjutkan reducer counter Pada baris 7-9 sama dengan baris function sebelumnya hanya beda kegiatan. 5. Reducer Pada folder ini dimana semua states kita tinggal, kita perlu membuat folder reducer [/src/redux/reducers/] dan file pertama yaitu index.js yang akan kita gunakan untuk indexing setiap reducer kita dan menggabungkan semua state yang kita miliki. Line pertama kita import combineReducers sebuah function dari package redux untuk menggabungkan object-object state yang kita miliki.Line 3 kita import counter dari file counter.jsLine 5 kita export secara default object yang sudah digabung menggunakan combineReducers. Jika kalian memiliki banyak reducers, inilah tempat yang pas untuk menggabungnya seperti contoh berikut: Abaikan jika kalian hanya ingin melanjutkan redux counter Nah sekarang kita buat reducer pertama kita dengan nama counter.js pada folder reducers [/src/redux/reducers/counter.js] Pada line pertama sama seperti pada file actions/counter.js dimana kita import semua kegiatan yang akan terjadi pada reducer counterBerikutnya pada line 3 kita buat sebuah variable dengan nama initialState yang mana isinya adalah sebuah object untuk menampung keadaan state dari reducer counter pada saat aplikasi pertama kali di loadPada line 7 kita buat function reducer kita yang mana function ini menerima arguments state yang akan di isi dengan initialState ketika pertama di load, dan argument kedua yaitu action, argument action ini akan berisi sesuai dengan object yang dikirim dari file [/src/redux/actions/counter.js] Contoh jika kita nanti panggil function increment ini pada logic aplikasi kita nanti, argument action nanti akan berisi sebuah object seperti berikut: { type: INCREMENT } Selanjutnya di line 8-15 kita buat logic pemisah setiap kegiatan dengan code switch dan di cek berdasarkan action.typePada line 9-10 kita deklarasikan setiap case/kejadian/kegiatan kita, kita bisa taruh logic penyimpanan state kita pada baris tersebut seperti melakukan mapping data, memfilter data, data penjumlahan dan sebagainya. Sangat saya merekomendasikan kalian untuk benar-benar paham dengan object pada javascript untuk melakukan pengolahan pada reducer ini. Saya sendiri sangat tersesat ketika belajar redux tanpa memahami basic-basic object sendiri.Pada line berikutnya kita bisa sisipkan case yang lain dan di akhiri dengan line 18 dimana kita export reducer kita agar bisa digunakan pada file [/src/redux/reducers/index.js] 6. Provider Kini reducer counter kita siap digunakan, kita bisa implementasi store kita dengan cara berikut: Perhatikan hanya kode-kode yang saya blokade diatas Pada line 7-8 kita butuh import Provider dari react-redux dan store data kita pada folder [redux/store/index.js]Langkah terakhir di file ini kita hanya butuh membungkus aplikasi kita paling luar dengan seperti pada line 12-14 dan jangan lupa sertakan props store pada component Provider diisi dengan store yang kita sudah siapkan diatas. 7. The App Kita akan membuat aplikasi yang sangat canggih dengan redux counter diatas yaitu aplikasi penjumlahan +1 dan pengurangan -1 Pada contoh artikel ini saya hanya pakai template create-react-app jadi tidak ada desain yang terlalu wah untuk layoutnya. Pada file App.js ini: Di line 3 kita import useSelector dan useDispatch dari react-reduxKita juga import tiap kegiatan yang kita butuhkan di line 5 yaitu increment dan decrement dari file [/src/redux/actions/counter.js]Pada line 8 kita buat variable baru dengan nama counter, lalu kita isi variable ini dengan cara panggil function useSelector dan kita sisipkan arrow function. Function callback tersebut menerima 1 argument yaitu state lalu pada bagian returnnya kita panggil state.counter atau state[namaReducer] jika memiliki reducer lainnyaLine 9 kita kan siapkan function dispatch untuk melakukan action nantinyaPerhatikan line 15-17, disana saya siapkan 2 button untuk menambah atau mengurangi state saat ini dan 1 text untuk menunjukkan keadaan state saat ini, pada setiap function kita beri event onClick dimana ketika kita click button tersebut akan menjalankan sebuah function dispatch dan kita sisipkan action yang sudah kita buat sebelumnya pada file [/src/redux/actions/counter.js] Jika kalian mengikuti dari awal dengan baik dan benar, paling tidak tampilannya akan seperti gambar di bawah. Akhir kata Redux sendiri hanya sebagai tools untuk mengelola state kita yang berada di layer berbeda, dan setiap perubahan harus dicatat pada actions. Pelajari lebih lanjut mengenai redux pada kelas Full-stack Javascript dengan stack MERN (Mongo, Express, ReactJS, Node).

Kelas Membuat Header Lebih Menarik Dengan Video Background di BuildWith Angga

Membuat Header Lebih Menarik Dengan Video Background

Hello people with the spirit of learning! Di tips ini kita akan coba membuat header menggunakan HTML dan CSS yang menarik dengan menambahkan video sebagai background dari header tersebut. Nah, header itu apa sih? Umumnya header adalah section paling atas yang berada pada halaman utama website. Header berisi navigation links, company logo, Call To Action (CTA) button dan company tagline & caption. Section header cukup penting untuk sebuah website. Dengan adanya header, user yang berkunjung ke dapat memberi informasi mengenai layanan atau tujuan apa yang dimiliki oleh company tersebut. Anggaplah header website sebagai halaman depan sebuah toko, maka orang yang melihat toko tersebut dapat melihat informasi singkat mengenai toko tersebut. Untuk melihat contoh section header menarik sekaligus ingin belajar membuatnya, bisa langsung cek saja di sini ya! Kalian bisa langsung download dan pakai component yang tersedia di Elements BuildWith Angga loh. Ayo langsung aja kita mulai cara membuat header lebih menarik dengan video background! STEP 1: Menyiapkan file HTML dan CSS Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan, Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> STEP 2: Menambahkan video sebagai background Pada file HTML, kita dapat membuat tag <section> di dalam <body> untuk setiap section yang nantinya akan dibuat. Pada header kali ini akan ada tiga section yaitu video, navigation bar dan hero. Pada step dua ini, kita akan membuat <section> untuk video background terlebih dahulu. Didalam <section> tersebut akan kita tambahkan tag <video> yang berfungsi melampirkan file video pada website. Tambahkan link video pada atribut "src" dalam tag <video> agar video dapat tampil di website. Untuk lebih jelasnya seperti berikut, <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> Kemudian berikan styling pada file style.css. Styling ini akan membuat video memiliki ukuran lebar dan panjang mengikuti perangkat. Untuk CSSnya seperti ini, /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } STEP 3: Membuat section navigation bar  Untuk membuat navigation bar, kita dapat menggunakan navigation bar component yang sudah disediakan oleh Bootstrap. Sebelum itu, kita buat dahulu tag <section> untuk meletakkan code component navigation bar. Di sini kita akan memilih navigation bar ini untuk kita copy dan paste ke dalam file index.html yang sudah dibuat. Copy dan paste code HTML navigation bar component tersebut kemudian kita ubah beberapa nilai classnya pada file index.html menjadi seperti berikut: <!-- Create navbar --> <section id="navbar"> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> Kemudian kita berikan styling pada style.css untuk merapikan tampilan navigation bar, /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } Nah untuk section navigation bar sudah selesai kita buat. Yeay! STEP 4: Membuat section hero Sebagai pelengkap header website, perlu adanya hero yang berisi CTA button serta informasi yang menjelaskan secara singkat mengenai website tersebut. Untuk membuat hero dapat menambahkan tag berikut pada index.html, <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> Kemudian kita beri styling pada style.css. Styling ini akan membuat hero berada ditengah layar kita serta bersifat responsif. /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } STEP 5: Menggunakan google font Jika dilihat dari CSS yang kita buat pada step 4 terdapat "font-family" dibeberapa CSS selector namun jika kita jalankan file index.html, font tersebut belum diterapkan. Hal ini karena kita belum melakukan import Google Font ke dalam projek kita. Ada dua font yang kita gunakan pada projek ini yaitu Poppins, Abhaya Libre dan Pacifico. Untuk menggunakan Google Font, dapat kita import font tersebut ke dalam projek kita. Ada dua cara melakukan import font kedalam sebuah projek, 1. Melakukan import ke dalam file style.css Setelah memilih font yang diinginkan, copy dan paste nilai @import pada bagian paling atas style.css, /* Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:[email protected];500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); 2. Melakukan import ke dalam file index.html Setelah memilih font yang diinginkan, copy dan paste tag <link> pada bagian <header> index.html diatas tag <link> style.css, <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Import Google Font --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> Nah selesai sudah cara membuat header dengan video background dengan hasil seperti ini: Untuk kode lengkapnya dapat dilihat disini ya, Index.html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> <!-- Create navbar --> <section> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> Style.css /* Import Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:[email protected];500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } Bagaimana? mudah bukan! Yuk kreasikan dengan kreativitasmu untuk membuat header yang lebih menarik lagi! Kalau kalian butuh membuat header dengan cepat dan menarik, langsung aja cek di Elements BuildWith Angga ya! Ada banyak component lain yang bisa kalian gunakan juga loh. Terima kasih!

Kelas Membuat Prototype Sederhana di BuildWith Angga

Membuat Prototype Sederhana

Hello people with the spirit of learning! Pada kali ini kita akan membuat prototype sederhana. Gimana caranya ? Simak sampai akhir yuk. 1. Menyiapkan asset design Sebelum kita melakukan prototyping, sebaiknya kita sudah memiliki design yang sudah siap untuk prototyping. Kamu bisa mencari asset design pada halaman website pixel.buildwithangga.com 2. Import to Figma Setelah berhasil unduh asset design yang kita inginkan, Import file asset design ke Figma. Caranya, klik icon import pada cursor yang ada di gambar atau kamu langsung bisa drag file ke figma secara langsung. 3. Ubah device ke Prototype Jika sudah berhasil import file design, selanjutnya open project tersebut kemudian pada right sidebar, ubah device menjadi prototype Jika berhasil, maka screen akan terdapat tanda node untuk menghubungkan screen yang lain. 4. Buat koneksi pertamamu Pilih screen pertama kamu, lalu click tanda plus, dan tarik ke tujuan screen berikutnya. Selain itu kamu juga bisa melakukan hotspot menggunakan element. Seperti gambar di bawah ini. Pilih input field email kemudian tarik ke tujuan screen berikutnya. 5. Buat interaksi dan animasi sederhana a. Buat frame terbaru untuk membungkus elements plane menjadi 2 screen. b. Pada screen screen pertama, putar element pesawat 180 derajat, Dan ubah layer opacity menjadi 0% c. Select semua screen dan buat menjadi multiplayer component d. Kemudian klik combine as variant pada right sidebar e. Hasilnya akan menjadi seperti ini f. Kemudian koneksikan screen 1 ke screen 2, ubah aturan menjadi seperti ini g. Kemudian pada left sidebar terdapat asset, pilih component plane tadi kemudian tarik ke splashscreen. Oh ya, sebelumnya logo splashscreen tersebut sudah dihapus ya, dan hasilnya akan jadi seperti gambar dibawah ini. h. Kemudian pada screen login, lakukan duplikasi menggunakan ctrl+D atau alt+D i. Kemudian tarik tiap component, disini saya membagi 2 menjadi atas dan bawah. Untuk inputan saya sembunyikan di bawah, sedangkan untuk illutrasi dan title saya sembunyikan diatas, namun masih di dalam screen/frame tersebut. j. Selanjutnya, buat koneksi screen splashscreen ke screen login, dan atur animasi menjadi seperti gambar dibawah ini. k. Dilanjutkan dengan mengoneksikan screen login ke screen login ke 2 dengan detail animasi seperti dibawah ini l. Tadaa, prototype animasi sederhana kamu sudah jadi. Untuk menguji prototype kamu udah berhasil apa belum kita lanjut ke step 6. 6. Menjalankan prototyping a. Ketika kamu sudah membuat prototyping, kamu perlu untuk menjalankan prototype tersebut sudah berhasil apa belum, dengan cara pastikan starting frame kamu sudah benar. Dengan melihat pada rightsidebar-prototype. b. Klik pojok kanan atas, dengan icon play c. Kemudian akan muncul tab baru yang berarti prototype sedang dijalankan. Hello people with the spirit of learning! Gimana untuk tips kali ini? Sangat mudah bukan ? Jika terdapat kendala bisa DM langsung ke @buildwithangga atau @cika.design. Terima kasih telah membaca artikel ini dan jangan lupa untuk tag kami.

Kelas Flutter Tutorial: Membuat Button Sederhana Pada Flutter di BuildWith Angga

Flutter Tutorial: Membuat Button Sederhana Pada Flutter

Hello people with the spirit of learning! Pada Flutter ada beberapa jenis button yang dapat kita gunakan seperti ElevatedButton, TextButton, OutlinedButton dan lain sebagainya. Nah kali ini, kita akan coba untuk membuat TextButton. Tapi, kalian bisa coba ikutin dulu tutorial sebelumnya Flutter Tutorial: Step by Step Import Icon ke Projek Flutter. Step 1: Menambahkan Widget TextButton TextButton( onPressed: () {}, child: Text( "Let's take a picture", ), ), Pertama-tama kita menambahkan widget TextButton dan kita tambahkan widget Teks seperti contoh di atas. Step pertama ini adalah langkah paling dasar dalam membuat TextButton. Step 2: Menambahkan warna pada button. TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", ), ), Setelah itu untuk lebih mempercantik tampilan button, kita perlu untuk menambahkan warna pada button dengan cara seperti di atas. Kamu juga bisa sesuaikan warna yang kamu mau yah! Cukup dengan mengganti kode pada Color(0xff+kode hex warna yang kamu inginkan). Step 3: Mengganti warna teks. TextButton( style: TextButton.styleFrom(backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengganti warna teks, kita hanya cukup menambahkan style pada widget teks yang sudah kita buat tadi. Kamu juga bisa sesuaikan dengan keinginan kamu dengan cara seperti di atas yah! Step 4: Mengatur ukuran button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengatur ukuran button, dapat kita tambahkan container seperti contoh di atas. Container juga dapat digunakan untuk mengatur bentuk dari button yang kita buat. Step 5: Menambahkan border radius pada button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), ), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), ), ), Untuk menambahkan border pada pinggir-pinggir button, kita dapat memberikan shape RoundedRectangleBorder dan menambahkan borderRadius sesuai dengan keinginan kita. Disini saya menggunakan ukuran radius 20. All done! Sekarang kamu udah bisa nih bikin button sederhana di projek Flutter-mu. Sekarang aku tantang kamu untuk modifikasi button ini sesuai dengan keinginan-mu. Boleh mengganti warna, atau mengganti teks dengan font dari google font agar tampilan button lebih menarik dengan mengikuti tutorial Menggunakan Google Fonts Pada Projek Flutter. Jangan lupa tag @buildwithangga kalo kamu uda berhasil mencoba. Good luck!

Kelas Cara Menjalankan Aplikasi Flutter Pada Real Device di BuildWith Angga

Cara Menjalankan Aplikasi Flutter Pada Real Device

Hello people with the spirit of learning! Selain melakukan testing pada emulator, dalam pengembangan aplikasi mobile juga diperlukan testing pada Real Device atau perangkat nyata. Supaya, kita bisa merasakan apa yang nantinya akan dirasakan oleh pengguna setelah aplikasi tersebut rilis. Pada artikel kali ini, kita akan belajar bagaimana cara menghubungkan aplikasi yang kita buat menggunakan Flutter pada Real Device. Step 1: Melakukan Pengaturan Pada Smartphone Kamu Hal pertama yang harus dilakukan adalah, melakukan pengaturan (Settings) pada smartphone yang ingin kamu gunakan. Caranya: 1. Pilih menu Settings atau Setelan pada smartphone kamu. 2. Pilih Additional Settings atau Setelan Tambahan. 3. Pilih Developer options. 0 4. Aktifkan USB debugging pada menu Debugging. Step 2: Membuka Project Flutter Setelah mengatur pengaturan pada smartphone kamu, langkah berikutnya adalah membuka project Flutter yang telah kamu buat. Misalnya disini project flutter yang digunakan diambil dari repository github https://github.com/rifqieh/fintech_pay. Step 3: Menjalankan Pada Real Device Langkah berikutnya adalah menjalankan aplikasi pada smartphone kamu. 1. Pertama-tama klik Run, kemudian pilih Start Debugging. 2. Kemudian pilih device yang ingin digunakan. Misalnya disini saya memilih Mi 9T Pro. 3. Tunggu sampai prosesnya selesai. Jika sudah selesai, tada!! hasilnya akan seperti gambar berikut: Bagaimana? mudah bukan! Jika kamu tertarik untuk mempelajari Flutter lebih lanjut, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

Kelas Project UI Design Jadi Lebih Efektif Dengan Component di BuildWith Angga

Project UI Design Jadi Lebih Efektif Dengan Component

Hello people with the spirit of learning! Pernah ga kalian sudah membuat screen yang banyak pada project UI Design lalu tiba-tiba kalian ingin mengganti warna dari sebuah button? Apa yang akan kalian lakukan? menggantinya satu persatu? Well, itu akan memakan waktu yang sangat lama. Bayangkan jika kalian memiliki 100 button, apakah kalian akan rela membuang waktu hanya untuk mengganti button saja? Tapi tenang, pada artikel ini kita akan mempelajari bagaimana caranya membuat component pada figma, agar proses revisi dan pembuatan design kalian jadi lebih cepat dan efisien. Oke, siapkan koneksi internet kalian dan juga akun figmanya ya. Let’s Start! Step 1 : Buat Project Baru Pertama, buat sebuah project baru dengan memilih + New pada menu yang ada di bagian atas tampilan dashboard figma. Step 2 : Ubah Nama Project Kalian bisa ubah nama dari project yang baru saja dibuat dengan mengklik bagian Untitled, lalu ubah namanya sesuai kemauan kalian. Step 3 : Menambahkan Frame Baru Untuk menambahkan wireframe baru, kalian dapat menekan F pada keyboard atau memilih icon pagar seperti menu yang ada pada gambar diatas. Setelah itu kalian bisa klik bagian artboard dimana saja untuk membuat wireframe baru, lalu atur ukuran dari framenya menjadi W: 400 x H: 100. Step 4 : Membuat Button Utama Dalam membuat button, kalian bisa menggunakan Rectangle Tool dengan cara memilih menu seperti gambar diatas atau menekan R pada keyboard. Setelah membuat objectnya, atur ukuran buttonnya menjadi W: 300 x H:60. Step 5 : Mengatur Bentuk Radius Button Agar bentuk buttonnya tidak terlalu kaku, kalian bisa mengubah ujung tepinya atau biasa disebut dengan radius, dengan mengubah bagian yang ada seperti gambar diatas. Ubah radiusnya menjadi 40. Step 6 : Ubah Warna Button Untuk mengubah warnanya, kalian bisa seleksi terlebih dahulu object button yang telah dibuat. Setelah itu, pilih persegi kecil seperti gambar diatas untuk masuk ke pengaturan warna. Ubah kode warnanya menjadi 6A67FB pada bagian kolom Hex. Jika kalian memiliki kode warna yang lain, silahkan digunakan sesuai kebutuhan yaa. Step 7 : Menambahkan Teks Pada Button Gunakan menu Text (T) untuk membuat sebuah tulisan baru yang akan kalian gunakan pada bagian button. Untuk pengaturan teksnya, kalian bisa ikuti seperti ini yaa. Typeface: Roboto, Typefont: Medium, Size: 22px. Lalu, jangan lupa atur rata tengah teksnya dengan memilih menu Text align center. Step 8 : Membuat Component Setelah semuanya tersusun rapih, seleksi kedua objectnya (button + teks) dengan cara klik pada layer dan jangan lupa tahan tombol Ctrl atau Command. Langkah selanjutnya, klik kanan pada layer yang telah terseleksi. Lalu pilih Create component dan kalian telah membuat satu komponen yang siap dipakai ulang dalam membuat project lebih cepat. Step 9 : Menggunakan Component Untuk mengecek component yang telah kalian buat sebelumnya, kalian bisa cek pada bagian Assets, lalu pilih Local components, setelah itu buka nama frame dari component yang kalian buat. Untuk menggunakan componentnya, kalian hanya perlu menggeser object componentnya, lalu letakkan pada tempat yang kalian inginkan. Step 10 : Mengubah Tampilan Dengan Cepat Untuk mengubah tampilan dari semua componentnya dengan satu langkah, kalian perlu double click pada component yang ada pada bagian Assets. Setelah itu kalian bisa ganti tampilannya, seperti contoh diatas saya mengganti warna dari component utamanya, lalu component lainnya secara otomatis akan berganti warna juga. Wow cepat banget kan, gak perlu ganti satu persatu. Sekarang proses membuat UI Design jadi lebih cepat dan efisien banget pokoknya. Jangan lupa tag hasil belajar kalian ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian penasaran dan tertarik untuk mempelajari tips-tips UI Design, silahkan bergabung pada kelas 3D Blender & UI UX Landing Page. Dalam kelas itu, kita akan bersama-sama mempelajari bagaimana caranya mendesign tampilan UI Design secara cepat, dan juga kita akan mempelajari bagaimana caranya membuat 3D Modelling agar tampilan UI Design lebih terlihat unik dan menarik. Silahkan bergabung, sampai jumpa di kelas yaa! Terima kasih.

Kelas Flutter Tutorial: Step by Step Import Icon ke Projek Flutter di BuildWith Angga

Flutter Tutorial: Step by Step Import Icon ke Projek Flutter

Hello people with the spirit of learning! Banyak sekali nih hal-hal yang bisa kita lakukan untuk mempercantik tampilan aplikasi Flutter yang ingin kita buat. Nah, kali ini kita akan belajar gimana caranya menambahkan icon atau gambar agar aplikasi yang kita buat lebih menarik. Yuk langsung aja ikutin step-step di bawah ini yah! Step 1: Membuat folder aplikasi yang ingin kita buat pada Visual Studio Code. Siapkan folder project flutter terlebih dahulu.Jika sudah, tampilan awal folder akan seperti gambar di atas ini. Step 2: Menyiapkan Icon atau Gambar Kemudian, kita perlu menyiapkan gambar atau icon yang ingin kita import atau masukkan ke dalam projek Flutter yang sudah kita buat pada step pertama. Pada artikel kali ini, kita akan menggunakan icon camera seperti di atas ini. Step 3: Menambahkan folder assets pada project Flutter. Untuk dapat memasukkan gambar camera tersebut, kita perlu menambahkan folder bernama "assets" pada project Flutter yang sudah kita buat pada step pertama diatas. Jika sudah, struktur folder project kita akan menjadi seperti gambar di atas ini. Step 4: Memasukkan gambar atau icon ke dalam folder assets. Jika folder assets sudah ada, kita perlu untuk memasukan icon camera ke dalam folder assets. Jika sudah dimasukkan, maka struktur folder kita akan tampak seperti gambar di atas ini. Step 5: Edit file pubspec.yaml Untuk dapat mengenerate gambar assets yang sudah kita masukkan, kita perlu edit file pubspec.yaml dan di sesuaikan dengan directory assets gambar menjadi contoh gambar di atas ini. assets/camera_illustration.png atau cukup dengan mengganti dengan assets/ Step 6: Proses code. Jika step-step di atas sudah berhasil kita buat, maka langkah terakhir adalah proses koding. Untuk dapat memunculkan gambar pada aplikasi kita, kita dapat menggunakan widget Image.asset seperti contoh di bawah ini. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Padding( padding: EdgeInsets.only( top: 40, ), child: Center( child: Column( children: [ Text( 'Import Assets ke Project Flutter', style: TextStyle(fontSize: 20), ), SizedBox(height: 5), Image.asset( 'assets/camera_Illustration.png', height: 350, width: 350, ) ], ), ), ), ), ), ); } } Step 7: DONE! Jika sudah selesai, tampilan awal aplikasi kita akan menjadi seperti gambar di atas ini. Voila! Sekarang kita sudah bisa nih mempercantik tampilan aplikasi kita dan pastikan ngga ada step yang terlewat yah.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Cara Mendesign UI Login Mobile Sederhana di BuildWith Angga

Cara Mendesign UI Login Mobile Sederhana

Hello people with the spirit of learning! Kali ini kita akan mendesign tampilan Login UI Mobile Sederhana melalui Figma. Mari kita coba! Step 1: Menyiapkan Referensi Sebelum kita memulai mendesign suatu tampilan, pasti kita perlu mencari inspirasi terlebih dahulu. seperti layout, warna, Illustration, icon dan lainnya. Biasanya saya mencari referensi di Pixel.buildwithangga.com dan dribbble.com Step 2:  Membuat Frame (Artboard) Untuk membuat framenya, bisa kita tekan huruf “F” pada keyboard, Lalu pilih ukuran yang diinginkan. Biasanya saya menggunakan ukuran iphone 11 Pro (375 x 812). Step 3: Membuat Headline Setelah berhasil membuat Frame Langsung saja kita buat Title teks agar pengguna bisa mengetahui bahwa mereka sedang berada di Login Page.  Pertama kita tekan huruf “T” pada keyboard lalu klik di area Frame.selanjutnya langsung saja kita ketik teksnya “Welcome Back,”. lalu kasih margin 30px dari kiri dan margin 30px dari atas.Setelah itu, kita atur terlebih dahulu typeface, jenis font, ukuran fontnya dan warnanyaKemudian untuk membuat subtitlenya, kita copy saja bagian teks titlenya. lalu kita ubah caption teksnya dan juga teks propertiesnya. jangan lupa kasih margin 6px dari title teks dan margin 30px dari kiri. Step 4: Menambahkan Ilustrasi Oke langsung saja kita tambahkan ilustrasi agar lebih menarik. lalu Kasih margin 30px dari bawah Headline dan margin 30px dari kiri dan juga kanan. oiya Disini saya menggunakan illustration dari pixel.buildwithangga.com. Kita bisa mendownloadnya dari website tersebut. Step 5: Membuat Form Input Login Selanjutnya, mari kita membuat form input login pagenya. Pertama kita buat title teks “Email Address”, lalu kasih jarak 30px dari ilustrasiSetelah itu buatlah rectangle dengan menekan huruf “R” pada keyboard, lalu klik di area frame.Selanjutnya ubahlah Width dan Height rectangle tersebut menjadi 315 x 50 dan kasih corner radius 12. Jangan lupa kasih margin 6px dari teks “Email Address” dan margin kiri kanan 30pxKemudian ubahlah rectangle tersebut menjadi outline dengan cara menghapus Fillnya dan menambahkan stroke, Lalu beri warna light “9FADBC”.Setelah itu, tambahkan icon di dalam rectangle tadi lalu kasih padding 12px dari kiri dan 13px dari atas dan juga bawah. oiya disini saya menggunakan icon gratis buatan Alexander berikut ini linknya: https://www.figma.com/file/IQ2DGwDh2zWHb9bU4Hg9K9/Free-Basic-%26-Essentials-Icons-Set?node-id=0%3A1 (Pastikan Icon yang di copy seluruh grup iconnya).Selanjutnya tambahkan juga teks di dalam rectangle, lalu kasih padding 12px dari icon dan padding 14px dari atas dan bawahNah untuk membuat form input passwordnya. tinggal duplicate saja dengan cara tekan shortcut “Command + D” untuk pengguna Mac os dan “CTRL + D” untuk pengguna windows. Setelah di duplicate ubahlah caption tersebut dan kasih margin 30px dari form email address, seperti gambar diatas Step 6: Membuat Button CTA Forgot Password Oke selanjutnya mari kita buat button teks untuk forgot password. Caranya sangat mudah Pertama buatlah teks “Forgot Password” Lalu atur properties teks tersebut pada di gambar diatas ini. Setelah itu kasih margin 6px dari atas form input password dan margin 30px dari kanan Step 7: Membuat Button CTA Login Buatlah rectangle berukuran 315x50 lalu beri corner radius 12Buatlah rectangle berukuran 315x50Setelah itu beri jarak 30px dari teks “Forget password?” dan 30px dari kiri dan juga kananKemudian beri warna Biru “0079FB”Selanjutnya buatlah teks “Login” di dalam rectangle tersebut dengan padding 14px atas bawah dan padding 138px kiri kanan (Pastikan diatas layer rectangle tadi) Step 8: Membuat Button CTA Daftar akun Duplicate Button CTA “Forgot Password”Setelah itu ubah teks tersebut menjadi “Don’t have an account? Sign Up”Kemudian Bloklah teks “Don’t have an account? Sign Up” tersebutLalu ubahlah warna dan Jenis font seperti yang digambar (Pastikan “Don’t have an account?” dalam keaadan diblok)Selanjutnya kasih margin 30px dari bawah dan 90px dari kiri dan juga kanan Step 9: Finishing & Upload Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :)

Kelas Membuat Wireframe Jadi Lebih Cepat dengan Whimsical di BuildWith Angga

Membuat Wireframe Jadi Lebih Cepat dengan Whimsical

Hello people with the spirit of learning! membuat wireframe secara cepat, kalian dapat menggunakan tools Whimsical yang bisa diakses melalui website. Oke langsung aja kita mulai. Step 1 : Kunjungi Website Whimsical Pertama, kunjungi website whimsical.com, setelah itu bisa daftarkan akun menggunakan Google mail atau membuat akun email baru pada whimsical. Step 2 : Halaman Utama Dashboard Setelah mendaftarkan akun dan juga masuk menggunakan akun yang telah terdaftar sebelumnya, kalian akan masuk ke bagian dashboard utamanya. Step 3 : Tambahkan Project Wireframe Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 4 : Menambahkan Frame Baru Berikutnya, untuk membuat sebuah frame baru, kalian bisa menekan F pada keyboard, atau pilih menu Add Frame lalu pilih ukuran frame yang ingin kalian pakai. Step 5 : Menambahkan Element Pada Frame Untuk menambahkan element atau objek pada tampilan wireframe, kalian dapat memilih menu Add Element lalu pilih element yang ingin digunakan seperti Rectangle, Solid Button, atau yang lainnya. Step 6 : Ubah Warna Background Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 7 : Tambahkan Text dan Icon Setelah itu, buat header menu menggunakan Add Text (T) lalu untuk iconnya kalian bisa gunakan icon yang telah tersedia pada whimsical menggunakan menu Add Icon (X). Step 8 : Menambahkan Object Lain (Button & Wireframe Image) Setelah menambahkan dan mengatur ukuran teks, tambahkan sebuah button menggunakan Solid Button (B) dan juga tambahkan satu buah wireframe untuk gambar menggunakan menu Image (I). Step 9 : Finishing dengan Menambahkan Element Lain Setelah itu, kalian bisa lanjut mebuat tampilan wireframe pada section berikutnya hingga selesai pada bagian footer suatu halaman. Dan kalian telah menyelesaikan satu tampilan wireframe yang akan diubah ke visual design pada tahap design berikutnya. Nice! kalian telah menyelesaikan tampilan wireframenya, jangan lupa untuk tag hasil belajarnya ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian tertarik untuk mempelajari proses design mulai dari wireframe, visual design, dan juga prototyping, kalian bisa mengikuti kelas Wordpress & UI/UX Design, di dalam kelas itu kita akan mempelajari proses design UI hingga mengubah ke dalam bentuk website menggunakan Wordpress.

Kelas Menggunakan Google Fonts Pada Projek Flutter di BuildWith Angga

Menggunakan Google Fonts Pada Projek Flutter

Hello people with the spirit of learning! Fonts merupakan salah satu komponen yang dapat membuat tampilan aplikasi kita menjadi lebih menarik. Flutter menyediakan sebuah package bernama google_fonts yang dapat kita gunakan untuk melakukan kustomisasi fonts pada aplikasi yang sedang kita buat. Beberapa contoh fonts yang tersedia dalam google_fonts adalah: RobotoLatoPoppinsMontserrat Pada artikel kali ini, kita akan belajar bagaimana cara menggunakan package google_fonts dalam aplikasi yang sedang kita kembangkan menggunakan Flutter. Step 1: Menambahkan Google_Fonts Pada Dependencies Project Hal pertama yang harus kita dilakukan adalah menambahkan package google_fonts ke dalam project kita. Caranya: Kunjungi pub.dev, kemudian ketikkan "google_fonts" pada kolom pencarian package.Pilih package google_fonts.Pilih tab "Installing".Copy baris berikut: 5. Tambahkan pada file pubspec.yaml di project Flutter kita. Misalnya seperti ini: 6. Tekan shortcut save "command + s" untuk pengguna macOS atau "ctrl + s" untuk pengguna windows. Step 2: Menambahkan Widget Text Setelah menambahkan pada dependencies project, langkah berikutnya adalah menambahkan widget Text pada project kita. Kamu bisa copy code berikut dan paste kan pada file main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 3: Menambahkan Widget TextStyle Setelah menambahkan widget Text, langkah berikutnya adalah menambahkan properti style pada widget Text yang telah dibuat. Misalnya seperti ini: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: TextStyle( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 4: Menambahkan Style Dengan Google Fonts Untuk menggunakan package google_fonts, pertama-tama kita perlu melakukan import terlebih dahulu. Tambahkan code berikut sebelum fungsi main(): import 'package:google_fonts/google_fonts.dart'; Kemudian ubah widget TextStyle dengan widget GoogleFonts, dan pilihlah font family yang ingin digunakan. Apabila kamu ingin menggunakan font family Montserrat, kamu bisa menuliskannya seperti ini: import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: GoogleFonts.montserrat( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Sekarang coba bandingkan dengan versi sebelumnya: Bagaimana? mudah bukan! Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian dapat mengikuti rekomendasi kelas dibawah ini. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

Kelas Cara Design Icon Rocket dengan Figma di BuildWith Angga

Cara Design Icon Rocket dengan Figma

Hello people with the spirit of learning! Kali ini kita akan coba membuat Icon Rocket melalui Figma. Let's dive in! Step 1 : Color Palette Color 1 : FFFFFFColor 2 : FCC69BColor 3 : FFAE48Color 4 : FE4881 Tentukan color palette untuk icon agar dengan lebih mudah kita modifikasi warnanya dengan memakai eye-dropper Step 2 : Size & Frame Buatlah frame ( F ) dengan size 256 x 256 px (size yang dianjurkan untuk icon karena high-resolution) Step 3 : Background Untuk background icon bisa kita tambahkan Gradient linear warna orange-pink seperti ini. Step 4 : Dasar Rocket Sekarang kita membuat dasar rocket. Buat Ellipse ( O ) lalu atur Anchor Point atas dengan double-click pada elips tersebut.Gabungkan kedua Anchor Point (sebelah kanan kiri) hingga ke tengah Anchor Point.Lalu atur radius Anchor Point atas elips sebesar 10 Step 5 : Substract selection Buatlah Ellipse ( O ) lagi dan Rectangle ( R ) di atas layer dasar rocketBlock semua shapes (termasuk dasar roket & lakukan Substract selection) Step 6 : Sayap Rocket Buat Rectangle ( R )Atur Anchor Point nya seperti sayap dan berikan radius 1 . Lalu duplicate untuk sayap sebelahnya Step 7 : Extras Tambahkan Ellipse ( O ) ditengah rocket agar terlihat seperti jendela & Rectangle (R) dibawah dasar rocketTambah Lines ( L ) sebagai arah luncur rocket dengan stroke 5 dan cap Rounded Step 8 : Finish Modifikasi arah rocket menjadi menyamping dengan memblok semua layersIcon Rocket sudah finish dan siap di export Good effort teman-teman! Kita sudah selesai finishing Icon Rocket, dan kami berharap steps ini dapat membantu dalam project mu yang mendatang, Goodluck! Oh iya, jangan lupa untuk mengikuti rekomendasi kelas Mastering Blender 3D: Design Icon Set dan juga share karyamu dengan tag @Buildwithangga

Kelas 5 Website Untuk Mencari Inspirasi Website Design di BuildWith Angga

5 Website Untuk Mencari Inspirasi Website Design

Pernah mendapatkan projek untuk membuat website atau ingin melakukan eksplorasi web design tapi bingung untuk memulai? Terkadang kita sebagai seorang UI Designer atau Front-end Developer merasakan yang namanya stuck atau creative block, situasi dimana tidak bisa memikirkan sebuah ide atau inspirasi sama sekali, kalaupun ada biasanya ide tersebut tidak tereksekusi secara maksimal. Maka dari itu, salah satu cara untuk mendapatkan ide atau inspirasi yaitu dengan membuka situs atau website yang memuat inspirasi-inspirasi web design. Berikut 5 website yang dapat kalian kunjungi untuk mencari inspirasi web design: 1. Siteinspire Homepage Siteinspire (https://www.siteinspire.com/) Di Siteinspire kalian dapat mencari inspirasi web design berdasarkan Styles, Types, Subjects, dan Platforms yang digunakan. Atau juga bisa mencari secara spesifik dengan menulis kata kuncinya pada menu Search. Selain itu, kalian juga bisa membuat koleksi referensi web design sendiri jika mendaftar sebagai member gratis di Siteinspire. 2. Awwwards Homepage Awwwards (https://www.awwwards.com/) Awwwards merupakan situs yang berisi website pemenang yang dipilih tiap harinya. Kalian dapat melihat nominasi maupun pemenang dari beberapa kategori, tag, teknologi, warna, dan negara. 3. Best Website Gallery Best Website Gallery Sites Menu (https://bestwebsite.gallery/sites) Berawal dari koleksi referensi website yang dikumpulkan oleh seorang desainer dan developer David Hellman, Best Website Gallery sekarang menjadi salah satu sumber inspirasi website yang dapat diakses oleh siapapun. Web ini juga menyediakan screenshot tiap halaman dari website yang kita pilih. 4. Behance Homepage Behance (https://www.behance.net/) Behance berisikan portofolio - portofolio desain dari para desainer di seluruh dunia. Tidak hanya tampilan desainnya saja, kalian juga bisa menemukan beberapa case study dari desainer ataupun agensi. 5. Dribbble Homepage Dribbble (https://dribbble.com/) Dribbble mungkin salah satu situs yang tidak asing lagi bagi para desainer. Komunitas Dribbble sendiri masih aktif sampai sekarang dan berisi desainer - desainer dari seluruh dunia. Untuk mencari inspirasi web design, kalian bisa memilih menu Web Design atau menulis kata kunci secara spesifik pada kotak pencarian. Kesimpulan Dalam mencari sebuah ide atau inspirasi web design kita bisa mencarinya dengan cara membuka situs atau web yang menyediakan inspirasi desain. Tetapi, jangan lupa contoh - contoh desain yang di tampilkan dalam web tersebut hanya untuk sebagai bahan inspirasi bukan untuk di-copy atau diduplikasi. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Kelas 3 Software Design Popular Untuk Membuat Prototype Website dan Mobile Apps di BuildWith Angga

3 Software Design Popular Untuk Membuat Prototype Website dan Mobile Apps

Ketika kita ingin menunjukan bagaimana website atau aplikasi kita bekerja dan membantu permasalahan kehidupan sehari-hari pengguna, maka kita perlu membuat sebuah prototype sederhana yang sesuai dari core business dari startup yang kita bangun. Sebenarnya dengan menggunakan kertas dan pulpen, kita dapat membuat wireframe dan prototype, namun dengan beberapa software design berikut maka kita bisa membuat prototype yang kualitasnya lebih tinggi. Adobe After Effect Selain digunakan untuk edit video tingkat atas, software After Effect juga sering digunakan oleh beberapa designer dalam membuat prototype sederhana terkait dari projek yang sedang dikerjakan, dengan fitur-fitur canggih seperti mask, animation, dan lain-lainya maka prototype akan lebih mudah untuk dibuat. Framer Ketika kita selesai mengerjakan projek design menggunakan Figma, maka dapat kita import langsung kepada software Framer untuk kita jadikan prototype yang dapat diklik, mengisi input seperti nama atau alamat email, dan memberikan animasi. Dengan Framer kita dapat membuat prototype aplikasi website atau mobile yang memiliki animasi yang menarik tanpa harus menggunakan koding, ditambah lagi Framer sudah menyediakan template yang siap digunakan untuk kita, wah enak juga ya sebagai UI/UX designer. Principle Principle adalah salah satu software yang tersedia pada Mac OS yang bisa kita gunakan untuk membuat high fidelity prototype, kebanyakan designer lebih memilih untuk menggunakan Principle karena memang experience dan juga fitur yang mereka tawarkan lebih banyak dibandingkan software prototype lainnya. Sayangnya Principle ini hanya tersedia pada Mac OS saja, apabila kamu menggunakan Windows OS maka kami sarankan untuk menggunakan After Effect atau Framer. https://dribbble.com/shots/19503359-Sleep-Magic-App-FREE Kesimpulan Sebagai seorang UI/UX designer alangkah baiknya untuk mempelajari lebih banyak software di luar sana, sehingga ketika klien atau perusahaan membutuhkan kita untuk beradaptasi dengan software yang baru maka kita bisa memulai lebih mudah dan mengerjakan projek.

Kelas Super Tools Untuk Menggunakan Tailwind CSS Lebih Cepat dan Menarik di BuildWith Angga

Super Tools Untuk Menggunakan Tailwind CSS Lebih Cepat dan Menarik

Hello, People With The Spirit Of Learning! Salah satu jenis framework pada CSS (Cascading Style Sheet), yaitu Tailwind CSS. Kamu akan mengetahui Tools yang terdapat pada Tailwind CSS. Framework CSS ini dapat mempermudah pekerjaan kamu sebagai Developer. Yuk, Simak! Perkenalan Tailwind CSS Tailwind CSS merupakan framework yang bersifat utility first untuk membangun UI yang kompleks dan memiliki ciri khas tersendiri. Framework yang dirilis oleh Adam Wathan pada tahun 2019, dan pada tahun 2020 Tailwind CSS merilis v2 atau versi kedua yang dibuat oleh Steve Schoger dengan design visual komponennya. Components Tailwind CSS Lima Tools Tailwind CSS, yaitu: Tailwind ToolboxTailwind ComponentsTailwind TemplatesTailblocksMeraki UI 1) Tailwind Toolbox Tailwind Toolbox dibuat oleh Amrit Nagi berisi lebih dari 45 landing page templates dan 16 components. Tailwind Toolbox bersifat open source, beberapa template dan component berasal dari kontribusi suatu komunitas. Pada component ini terdapat plugins, tools, kits, dan generatos yang dapat membantu kamu menggunakan Tailwind CSS dengan lebih baik. Selain itu, Tailwind Toolbox juga menyediakan template scripts untuk JS, seperti penutup dan pembuka. Kamu bisa menggunakan components dengan klik template atau component yang ingin digunakan, lalu mengunduh template CSS atau menyalin kode, dan pindahkan ke projek yang sedang kamu buat. 2) Tailwind Components Tailwind Components bersifat open source, memiliki beberapa pilihan template yang bisa kamu gunakan secara gratis, kamu bisa gunakan untuk Bootstrap sebuah aplikasi baru. Components ini terdiri dari dropdown, login, modals, tab, input, dan ready made options yang dibuat oleh Tailwind CSS. kamu juga bisa membuat component kamu sendiri yang dimana component tersebut bisa digunakan oleh orang lain. Untuk menggunakan components, kamu bisa memilih component terlebih dahulu, lalu kamu klik unduh atau langsung menyalin kode dari component tersebut. 3) Tailwind Templates Tools ini dibuat oleh J-hiz, terdiri dari 30 design components, seperti buttons, cards, forms, search inputs, dan modals. Untuk menggunakan templates apapun yang terdapat pada Tailwind Templates, kamu hanya perlu klik templates yang kamu suka, lalu salin kode tersebut ke projek kamu. 4) Tailblocks Tailblocks dibuat oleh Mert Curuken, tools ini terdiri dari 60 layout blocks, seperti layout testimonials, teams, steps, stats, prices, heroes, headers, galleries, footers, features dan ecommerce. Kamu dapat menggunakan component ini dengan mode gelap atau dark mode, kamu juga dapat mengubah warna yang kamu inginkan dari UI yang ada di component Tailblocks. Untuk menggunakan layout blocks apapun, kamu bisa langsung klik “The View Code”, lalu copy atau salin kode, dan pindahkan kode tersebut ke projek yang sedang kamu buat. 5) Meraki UI Meraki UI dibuat oleh Khatab Wedaa dan Mosab Ibrahim. Tools ini terdiri dari 50 componen Tailwind CSS, dan tools ini mendukung RTL layout. Meraki UI bersifat sederhana, dan ringan. Mulai dari button, team sections, dan cards, kamu dapat menggunakan element yang tersedia untuk membuat prototype. Component yang terdapat pada Meraki UI, yaitu alerts, login forms, buttons, cards, dropdowns, navbars, pagination, dan footers. Untuk menggunakan component tersebut, kamu hanya perlu menyalin dan memindahkan ke projek yang sedang kamu buat. By using this utility first framework, you don't have to write custom CSS to style your application. You can use Tailwind CSS to control the padding, margin, color, font, shadow, and more of your application. Setelah kamu sudah mengetahui component pada Tailwind CSS, kamu bisa langsung belajar dan praktik menggunakan Tailwind CSS. Semoga artikel ini bermanfaat, selamat belajar. BuildWith Angga.

Kelas Cara Angga Memulai Freelance Untuk Pemula - Interview Angga di BuildWith Angga

Cara Angga Memulai Freelance Untuk Pemula - Interview Angga

Menjadi seorang Freelancer dapat memberikan kebebasan yang cukup banyak untuk diri kita, misalnya kita bebas milih kerja dengan siapa, dibayar berapa, dan kerja di mana. Kebebasan ini biasanya dibutuhkan oleh mereka yang bekerja kreatif, contohnya graphic designer, website designer, atau SEO specialist. Kita akan belajar untuk memulai Freelancer khusus pemula dari ahlinya itu Angga, seorang Freelancer Product Designer yang telah bekerja lebih dari 100 klien dari seluruh negara, bukan cuma Indonesia saja. Q1: Halo mas Angga, sedang sibuk apa belakangan ini? Saya sedang memperbesar perusahaan edukasi yang telah saya bentuk untuk membantu orang-orang yang ingin belajar website design, product design, mobile app development, dan lainnya. Saya ingin mereka memiliki sumber belajar yang tepat dengan biaya lebih terjangkau, Sehingga ketika mereka belum ada biaya kuliah maka mereka bisa belajar di BuildWith Angga. Q2: Apa saja yang perlu dilakukan sebagai orang yang ingin memulai Freelance? Well, pertama adalah wajib punya skills yang bisa dikerjakan secara remote atau dari mana saja, karena tujuan utama Freelance itu ya bisa kerja dari mana saja. Beberapa skills di antaranya dengan bayaran tinggi adalah: UI designerUX designerSEO SpecialistWebsite DesignerBackend DeveloperData ScientistMobile App DeveloperCopywriter Jika sudah memiliki skills tersebut, tinggal perbanyak saja portfolio dan networking dengan Freelancer lainnya yang mungkin nanti akan memberikan pintu untuk kita mendapatkan projek Freelance pertama. Q3: Bagaimana meningkatkan personal branding kita untuk menarik klien pertama? Biasanya saya riset dulu projek apa yang sedang naik daun, misalnya aplikasi-aplikasi seperti Gojek, AirBnb, atau Cryptocurrency. Dari situ saya coba ngerjain projek latihan yang terkait pada aplikasi tersebut, dan juga biasanya saya menambahkan beberapa improvement sehingga ini dapat melatih cara saya berpikir sebagai seorang product designer. Baik, kurang lebih seperti itu yang bisa kita dapatkan untuk Interview kali ini. Jika kamu punya pertanyaan yang lebih mendalam boleh request langsung ke Instagram BuildWith Angga agar kami buatkan untuk sesi selanjutnya. Semoga bermanfaat dan terima kasih.

Kelas 3 Plugin Unggulan Figma Untuk Belajar UI/UX Design di BuildWith Angga

3 Plugin Unggulan Figma Untuk Belajar UI/UX Design

Bekerja lebih cepat dan produktif untuk menghasilkan projek yang lebih baik adalah impian semua UI/UX designer, kali ini kita akan coba bagikan 3 plugin Figma yang sering digunakan oleh top designers around the world, let's go. Plugin Wireframer di Figma Sering kita mengerjakan projek dimulai dari tahap pembuatan wireframe, namun mengerjakan sesuatu yang berulang adalah hal yang membosankan. Dengan menggunakan plugin Wireframer pada software Figma, maka kita tidak perlu membuat bagian-bagian pada website atau mobile desgin dari awal, tinggal pake yang sudah tersedia dan modifikasi saja. Plugin ProtoFlow di Figma Membuat sebuah prototype yang akan digunakan untuk usability-testing pada design process seperti Design Thinking atau Design Sprint kini menjadi lebih cepat dengan Plugin ProtoFlow yang tersedia pada Figma saat ini. Feather Icons di Figma Icon adalah bagian yang penting pada sebuah user-interface design, Icon dapat membuat tampilan website atau mobile app kita terlihat lebih menarik, Icon juga dapat memberikan emotional effect pada pengguna. Membuat Icon agak tricky untuk kita yang tidak pandai gambar, oleh karena itu Feather Icons sangat wajib kita install pada projek Figma kita untuk mempermudah kita menambahkan icon pada menu navigation, header, atau di dalam sebuah button. Summary for you Jika mengejar deadline maka tidak perlu panik, cukup gunakan ketiga plugin Figma di atas yang sudah kami bagikan sehingga kamu bisa bekerja lebih baik, cepat, dan produktif sebagai seorang UI/UX designer pemula atau expert. Goodluck ya.

Kelas 3 Keuntungan Menggunakan Software Figma Sebagai UI/UX Designer di BuildWith Angga

3 Keuntungan Menggunakan Software Figma Sebagai UI/UX Designer

Figma telah dikategorikan menjadi software design yang cukup popular karena dikenal dari fitur-fitur canggih serta kemudahan menggunakan software tersebut. Jika kamu sudah pernah menggunakan Adobe XD atau Sketch, maka ketika menggunakan Figma bakalan lebih terasa lebih mudah lagi dari kedua software tersebut. Kali ini, kita mau sharing nih beberapa manfaat yang bisa kita rasakan saat ini juga ketika menggunakan Figma sebagai UI/UX atau graphic designer. Gratis digunakan, bahkan untuk projek komersil, makin cuan deh Yes, Figma menyediakan beberapa paket yang berbayar, namun untuk kita yang belum punya modal maka bisa menggunakan Figma secara gratis, dan paket gratis ini bisa kita gunakan untuk tujuan mengerjakan projek yang berbayar, misalnya dari klien atau perusahaan. Tapi nanti ketika kita sudah menghasilkan uang, lebih baik upgrade ke paket yang berbayar ya untuk mendapatkan kemudahan bekerja lebih baik lagi, ya sekalian kita bayar balas budi kepada developer dan designer yang telah membangun software Figma. Plugin apa aja ada, sehingga kerja bisa lebih ngebut lagi wuzz wuzz, supafast! Well, begini enaknya menggunakan Figma untuk menyelesaikan projek design website atau mobile app, Figma telah dibentuk oleh komunitas yang kuat, mereka juga sering menyediakan plugin canggih sehingga kita bisa lebih cepat dalam bekerja. Resources belajar Figma itu banyak banget, bikin skills kita makin up to date Untuk kita yang baru memulai untuk menggunakan Figma, jika kita baru pindah dari software Adobe XD atau Sketch, maka kita tidak perlu khawatir. Karena di luar sana banyak sekali resources untuk mempelajari Figma. Kami, BuildWith Angga, juga saat ini menyediakan puluhan kelas gratis yang membahas UI/UX design, dan banyak dari kelas-kelas online tersebut menggunakan software Figma. Pokoknya, progress belajar kamu jadi lebih terarah dari pada sebelumnya. Well, begitulah beberapa manfaat utama ketika menggunakan software Figma, untuk yang masih ragu maka silahkan langsung cobain aja, dijamin deh gak akan lari kepada software-software design lainnya.

Kelas 3 Rekomendasi Kelas Online Gratis Untuk Belajar Figma & UI/UX Design di BuildWith Angga

3 Rekomendasi Kelas Online Gratis Untuk Belajar Figma & UI/UX Design

Figma adalah software design yang dapat digunakan secara gratis, terlebih lagi ketika kamu ingin belajar menjadi seorang UI/UX designer di tahun 2022 atau 2023 mendatang. BuildWith Angga telah menyediakan beberapa kelas online gratis untuk belajar Figma dan UI/UX design mulai dari awal sampai dapat memiliki portoflio pribadi. Belajar Design Style Guide Menggunakan Figma Style guide sangat penting untuk dipelajari oleh pemula, karena kita bisa memahami komponen apa saja yang tersedia pada product design. Hal ini dapat membuat kita menjadi seseorang UI/UX designer yang lebih professional. Bikin Wireframe dan Visual Design Menggunakan Figma Setelah memahami style guide di dalam product design, kita bisa latihan untuk membuat wireframe sederhana yang nantinya akan dijadikan design aplikasi. Pada kali ini kita akan menggunakan software Whimsical dan Figma untuk mempelajarinya. Tingkatkan Skills Figma Kita, Belajar Design Website Dari Workshop Gratis Workshop kali ini menantang kita untuk design sebuah website Charity untuk menampung dana yang akan digunakan untuk membantu orang yang belum beruntung, terutama di bidang pendidikan. Mulai dari awal menggunakan Figma, sampai bisa memiliki portfolio yang bisa digunakan sebagai modal bekerja. Alright, are you ready? Figma dapat menjadikan diri kita sebagai seseorang designer yang hebat. Graphic designer, product designer, ui/ux, illustration designer, semua bisa kita capai hanya menggunakan Figma. Baik, silahkan pelajari beberapa kelas online rekomendasi untuk belajar Figma secara gratis di BuildWith Angga.

Kelas Lowongan Magang UI Design (WFA) di BuildWith Angga

Lowongan Magang UI Design (WFA)

Goals Membantu Product Designer dalam membangun aplikasi/website yang mudah digunakan dan terlihat menarik di mata pengguna, sehingga pengguna jadi lebih nyaman ketika menggunakan dan menghabiskan lebih banyak waktu pada produk tersebut. Responsibilities Mendesain tampilan visual bedasarkan wireframeMembuat prototype sederhanaBekerja sama dengan develop pada tahap slicing 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 3Fresh graduate (kuliah) boleh applySudah 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 kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Kerjakan visual design (color, typography, layout, etc) pada wireframe yang sudah kami sediakan di bawahGunakan referensi design berikut https://dribbble.com/buildwithangga/collections/5358948-ux-protoSiapkan link projek Figma yang dapat diakses secara publik Wireframe How to Apply Siapkan Resume (CV) & Hasil test (berupa link Figma public ) dengan rapihIsi subject email dengan Magang UI Designer 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat.

Kelas Perbedaan Figma dan FigJam Untuk UI/UX Designer di BuildWith Angga

Perbedaan Figma dan FigJam Untuk UI/UX Designer

Perbandingan Antara Figma dan FigmaJam Hello People With The Spirit Of Learning! 🙌 Pada artikel kali ini, kami akan membahas mengenai perbedaan Figma dan FigmaJam dari segi fungsionalitas, fitur dan juga cara kerjanya. Yuk simak dan kenali perbedaan antara Figma dan FigmaJam! Figma Figma merupakan salah satu aplikasi berbasis web di mana para user/contributor dapat mengubah ide-ide kreatif mereka menjadi sebuah design yang responsif dan interaktif. Design ini bisa diekspresikan melalui beberapa jenis seperti design web, aplikasi, poster, dan lainnya. Bagi UI/UX Designer, Figma biasanya digunakan untuk mendesign tampilan antarmuka (UI) untuk website maupun aplikasi mobile. Dalam Figma ini, kamu bisa berkolaborasi dengan designer lainnya untuk membuat suatu design secara bersama-sama. Ada banyak macam-macam tools di Figma ini yang akan mempermudah kamu saat mendesign, diantaranya: Menambahkan bentuk, gambar, teks, dan layers di KanvasLeft sidebar untuk melihat layer dan assets yang digunakan pada designRight sidebar untuk melihat dan menyesuaikan seperti ukuran, letak, font dan lain nya dari properti designToggle rulers dan pixel grid untuk presisi design agar lebih rapi dan sempurnaMacam-macam plugin untuk mempermudah design, seperti plugin logo, foto, live tracking map, ilustrasi, dan lain nya. source: Figma FigmaJam FigJam adalah alat kolaborasi masa kini yang inovatif untuk brainstorming ide dan solusi kreatif saat pengembangan sebuah aplikasi. Alat dari Figma ini memungkinkan tim untuk kerja sama secara real time, menuangkan ide mereka dengan banyak fitur menyenangkan dan bermanfaat seperti draw, shape, sticky note, stamp dan add text. FigmaJam bisa menjadi opsi yang tepat untuk mempermudah manajemen pekerjaan maupun tugas bersama tim kamu! 🙌😉 source: Figma Nah, apakah kamu sudah pernah menggunakan Figma dan FigmaJam? dan manfaat apa sih yang kamu dapatkan dengan menggunakan kedua tools ini? Silahkan share artikel ini jika bermanfaat untuk kamu ya!🤗 Untuk kamu yang baru mengenal Figma dan FigmaJam serta ingin mempelajari penggunaan kedua tools ini lebih dalam, kamu bisa bergabung di kelas Learn Figma For Beginner dan Mastering FigmaJam: Brainstorming to User Journey BuildWith Angga.

Kelas Membuat Project Baru Pada Figma di BuildWith Angga

Membuat Project Baru Pada Figma

Hello, People With The Spirit Of Learning! Artikel kali ini akan menjelaskan cara bagaimana membuat suatu project baru di Figma, dan siapa saja yang bisa melihat suatu project yang sudah di buat di Figma. Artikel ini cocok sekali untuk kamu pemula yang ingin beralih menggunakan Figma secara individu maupun secara tim. Bagaimana cara membuat project baru di Figma ? Terdapat dua cara dalam membuat suatu project baru di Figma: 1.Membuat Project Baru Melalui The Team Klik New Project pada halaman menu 2.Membuat Project Baru Melalui Left Sidebar Pada cara kedua kamu dapat membuat project baru dengan tim secara spesifik, dimana kamu atau tim dapat melihat project melalui browser file. Klik the team pada bilah sisi kiriKlik (+) untuk membuat project baru By: Figma.com Beri nama pada project dengan nama yang mudah diingat, kamu bisa mengganti nama pada project kamu kapan saja By: Figma.com Untuk tim profesional atau tim organisasi dapat mengatur project dengan merubah izin pengaturan (permissions setting) untuk semua orang (everyone) pada nama tim (team name), dan dapat mengedit serta memilih dengan pilihan melalui: Mengedit: anggota tim dapat mengakses project dengan level izin pada tim. Dapat melihat: anggota tim hanya dapat melihat file project, mesikpun anggota tim memiliki izin untuk edit Khusus Undangan: yang dapat mengakses file dalam project hanya anggota tim atau kolaborator yang kamu undang. By: Figma.com Catatan: Untuk tim pemula hanya dapat membuat project yang dapat diedit, dan anggota tim dapat mengakses project berdasarkan tingkat izin tim mereka. Selanjutnya, klik create project untuk membuat project baruKlik add a description pada halaman project, dan Figma akan menampilan halaman project di file browser. Selanjutnya, pada Figma suatu project dapat dilihat melalui: 👀 View-only project Hanya pemilik atau pembuat suatu project yang dapat mengedit project tersebut. Anggota tim hanya dapat melihat file dalam project, mesikpun anggota tim memiliki izin mengedit. 🔒Invite-only project Project ini tidak tersedia untuk semua anggota tim karena merupakan project khusus yang dimana anggota tim hanya dapat mengakses project khusus undangan jika anggota tim diundang. Project khusus undangan sangat cocok untuk anggota tim dalam membangun suatu desain tim. Nah, itu adalah penjelasan tentang bagaimana cara membuat suatu project baru di Figma. Yuk, segera memulai membuat project baru di Figma, dan menambah portofolio kamu. Semoga artikel ini bermanfaat, semangat! BuildWith Angga.

Kelas Syarat Figma Pada Browser di BuildWith Angga

Syarat Figma Pada Browser

Hello, People With The Spirit Of Learning! Artikel kali ini cocok untuk kamu yang ingin beralih menggunakan Figma pada browser karena artikel ini akan membahas syarat untuk pengguna Figma pada browser. Sebelumnya, kita perkenalan singkat dulu terkait Figma. Apa itu Figma? Figma merupakan perangkat lunak berbasis browser yang dapat dijalankan di semua sistem desktop, seperti MacOs, Windows, Linux, dan Chrome OS. Figma juga dapat kamu unduh pada aplikasi seluler yang tersedia di perangkat iOS dan Android. Operating Systems Pada sistem operasi, Figma menggunakan WebGL (Web Graphics Library) yang dapat berjalan dengan baik pada browser karena memiliki syarat grafis yang sangat rendah. Persyaratan browser untuk pengguna Figma minimum: Chrome 66+Firefox 78+Safari 13+Microsoft Edge 79+ Catatan: Jika kamu menggunakan Microsoft Edge, kamu harus menonaktifkan strict mode atau mode ketat yang ada di web Figma.com. Sedangkan, persyaratan untuk sistem operasi Figma minimum: Windows 8.1Apple MacOS 10.12 (macOS Sierra) dan versi lebih baruJenis OS Linux apapun yang dapat mengakses browserJenis Chrome OS apapun yang dapat mengakses browser. Catatan: Silahkan kunjungi What’s my Browser untuk mengetahui browser dan versi sistem operasi apa yang kamu gunakan. Graphics Cards (Kartu Grafis) Graphics Cards atau kartu grafis merupakan komponen penting dari perangkat keras pada komputer. Figma tidak membatasi pengguna kartu grafis tertentu, jenis dukungan browser apa pun seperti, Windows, Linux, OS, Safari akan memberikan perbaikan bug apa pun yang terkait dengan WebGL. Kartu Grafis Khusus Biasanya, beberapa laptop baru memiliki kartu grafis khusus, seperti Nvidia atau AMD, dan prosesor grafis terintegrasi, seperti Intel atau AMD. Biasanya, beberapa laptop baru memiliki kartu grafis khusus, seperti Nvidia atau AMD, dan prosesor grafis terintegrasi, seperti Intel atau AMD. Jika kamu memiliki laptop dengan prosesor dual-GPU, kamu dapat memilih untuk menggunakan GPU khusus, ini akan membantu kamu dalam peningkatan kerja di Figma. Informasi untuk kamu pengguna prosesor GPU khusus: 1. MacOs Cari tahu prosesor grafis mana yang digunakan pada MacBook Pro,Mengatur kinerja grafis pada Macbook Pro (menonaktifkan pengalihan otomatis). 2.Windows (Nvidia) Pada panel kontrol Nvidia, atur chrome.exe untuk menggunakan kartu grafis diskrit. 3. Windows (AMD) Pada panel kontrol AMD, atur chrome.exe untuk menggunakan kartu grafis diskrit. Kartu Grafis yang Tidak Didukung Figma Kartu Grafis yang tidak didukung oleh Figma, yaitu Intel HD Graphics 3000 karena GPU memiliki bug yang diketahui dapat menyebabkan gangguan rendering saat menggunakan Figma. Syarat dan Ketentuan Perangkat seluler (Mobile) pada Figma Jika kamu menggunakan mobile atau perangkat seluler pada Figma, kamu hanya dapat mengakses dan melihat dari file Figma. Ketentuan tersebut berlaku untuk pengguna iPad, tablet, atau perangkat seluler, dan juga berlaku pada tablet yang menjalankan OS dekstop lengkap, seperti Microsoft Surface. Selain itu, kamu juga dapat melihat prototipe pada browser seluler dengan membuka tautan pembuatan prototipe di perangkat seluler. Syarat Minimum untuk mengakses file Figma pada browser perangkat seluler: Chrome pada Android (7.0-9.0)Safari di iOS 11.4+ Catatan: Jika kamu ingin menggunakan Figma secara langsung pada perangkat seluler, kami sarankan untuk mengunduh aplikasi seluler Figma yang tersedia di perangkat iOS dan Android. Nah, kamu sudah mengetahui syarat dan ketentuan browser pada Figma. Jika kamu sudah memenuhi syarat yang ada pada artikel, kamu sudah bisa menggunakan Figma pada browser kamu. Semoga artikel ini bermanfaat buat kamu, ya! BuildWith Angga.

Kelas Figma: Konfigurasi Browser Untuk Figma di BuildWith Angga

Figma: Konfigurasi Browser Untuk Figma

Ada beberapa hal yang perlu kamu set-up di browser mu sebelum memulai menggunakan Figma. Pastikan kamu telah menginstal dan mengaktifkan WebGLAtur zoom browser kamu hingga 100%Pastikan juga bahwa browser kamu adalah versi yang terbaru saat iniNonaktifkan fitur swipe kanan/kiri (khusu MacOS)Install Figma Font Helper untuk menggunakan font default/lokal (Buka tab baru) Note: Jika kamu menginstall Aplikasi Figma di Desktop, kamu tidak perlu menggunakan pengaturan konfigurasi ini. Karena pengaturan konfigurasi ini hanya berlaku untuk Figma yang dijalankan di browser. Berikut ini tutorial untuk mengkonfigurasikan Figma di beberapa browser seperti Google, Safari, Mozila Firefox, Microsoft Edge, Mac. 1. GOOGLE Buka Google Chrome dan pergi ke Chrome Settings MacOS: pergi ke Chrome Preferences (Preferensi Chrome) pada menu, atau juga bisa menggunakan shortcuts Command + ,Windows: Buka File > Preferences atau bisa klik elips vertikal yang ada di pojok kanan atas, dan pilih Settings (Pengaturan) Appearance (Tampilan) Di bagian **Appearance (**Tampilan), pastikan zoom halaman kamu sudah diatur ke 100%. Hal ini untuk memastikan file ditampilkan secara akurat pada resolusi yang lebih tinggi. source: Figma Advanced Scroll ke bawah dan klik link Advanced untuk memperbesar halaman pengaturan. Pada bagian System, Enable Use Hardware Acceleration jika ada. Source: Figma Enable WebGL Jika saat ini WebGL tidak diaktifkan, Kamu dapat menuju ke pengaturan Chrome Flags di browser: chrome://flags/ Update daftar ganti rendering software agar diaktifkan. Ini harus di dekat bagian atas list: Source: Figma Atau, Kamu dapat mencari Flags terkait WebGL dan diubah ke enabled. 2. MOZILA FIREFOX Buka Firefox dan buka menu pada pojok kanan atasDengan melakukan step diatas, kamu dapat melihat seberapa level zoom mu. Kamu juga dapat menggunakan icon - (untuk mengecilkan) dan + (untuk memperbesar)Pada menu yang sama, pilih Prefrences untuk opsi yang lain: scroll ke bawah menuju Firefox Updates. Kamu dapat melihat versi terbaru saat ini dan apakah statusnya sudah ter update atau belum: Source: Figma klik Check for Updates untuk cek informasi seputar update an. Jika kamu belum update browser ke versi terbaru, maka akan ada notifikasi peringatan untuk update browser versi terbaru dan Firefox akan secara otomatis me-restart setelah menginstall.Sebaiknya perbarui pengaturan Allow Firefox untuk Automatically Updates (Update Otomatis). SAFARI Safari diupdate secara otomatis oleh macOS setiap ada versi terbaru. Jika ada versi baru macOS yang tersedia, kamu dapat memperbaruinya di komputer secara langsung, yang juga akan meng-update Safari dengan pembaruan yang diperlukan. Buka Figma di SafariBuka Safari > Preferences (Preferensi) pada menu utamaBuka Websites dan klik Page ZoomDi bagian Situs web yang saat ini terbuka, pastikan Figma diatur ke skala100%: Source: Figma Note: Kamu harus menggunakan setidaknya V10.11.1 (El Capitan) jika Anda ingin menggunakan pinch-and-zoom. MICROSOFT EDGE Figma tidak lagi mendukung Internet Explorer: Jelajahi browser yang didukung → Untuk update Microsoft Edge ke versi yang terbaru: Pada menu, pilih Settings > Updates & SecurityPilih Windows Updates di bagian atas daftar lalu Check For UpdatesJika ada pembaruan, mereka akan mulai mengunduh Microsoft Edge dan di re-start secara otomatis. Untuk mengatur default zoom: Pilih Menu di sudut kanan atas jendela.Pilih Settings pada opsi.Pilih Appearance pada menu di kolom kiri.Di bagian Zoom, update pengaturan halaman zoom untuk memilih tingkat zoom default baru. Enhanced Security Untuk menggunakan Figma di Microsoft Edge, Kamu harus memastikan pengaturan Strict Mode dinonaktifkan untuk Figma.com. MAC Jika Kamu menggunakan trackpad di macOS, mungkin kamu perlu menonaktifkan gerakan scroll kiri/kanan. Hal ini akan mencegah jika kamu secara tidak sengaja menutup file Figma, ketika sedang scroll ke kiri dan ke kanan di dalam kanvas. Buka System Preferences dan buka Trackpad settings: Source; Figma Source; Figma Disable opsi Swipe between pages Source: Figma Nah, kita telah belajar bagaimana cara mengkonfigurasikan figma dengan berbagai browser. Semoga artikel ini bermanfaat untuk kamu ya!🙌😉. BuildWith Angga

Kelas Update Terbaru dan Menarik dari Figma untuk UI/UX Designer di BuildWith Angga

Update Terbaru dan Menarik dari Figma untuk UI/UX Designer

Hello people with the spirit of learning! Kali ini, kita ingin berbagi informasi menarik seputar update terbaru dari Figma special untuk kalian UI/UX Designer pengguna setia Figma. Simak yuk! 1. Dark Mode Sebagai seorang UI/UX Designer, apakah kamu menyukai bekerja di malam hari? Jika iya, tidakkah kamu merasa tidak nyaman saat melihat interface Figma yang menggunakan warna putih? Saat ini, Figma memiliki fitur Dark Mode sebagai solusi atas permasalahan tersebut. Kamu dapat memilih tema terang maupun gelap, atau membiarkan pengaturan sistem kamu menentukan temanya. Jika tampilan sistem diatur menjadi gelap, maka Figma akan menggunakan tema gelap. Begitupun sebaliknya. Lalu, bagaimana cara mengaturnya? Caranya cukup sederhana, kamu dapat mengubahnya dengan langkah-langkah berikut : Buka file design FigmaBuka Preferensi > TemaPilih opsi dari daftar tema, light atau darkTada! Tema file Figma kamu telah berubah! Fitur ini bersifat device-specific. Artinya, jika kamu menggunakan akun Figma di beberapa perangkat, pengaturan tema dari satu perangkat tidak akan terbawa ke perangkat lain. Bagaimana, sudah siap bekerja di malam hari menggunakan fitur dark mode? 2. Figma and Slack Di era dimana pekerjaan banyak dilakukan secara hybrid, memastikan rekan kerja satu tim tetap update dengan segala perubahan yang ada mungkin sulit untuk dilakukan. Tetapi sekarang, kamu bisa menghubungkan Figma dengan Slack untuk mendapatkan update secara real time. Apa saja manfaatnya? Dengan mengintegrasikan Figma dengan Slack, kamu dapat melakukan beberapa hal di bawah ini: Membuat channel baru yang didedikasikan untuk menerima pemberitahuan pada file khusus proyek.Notifikasi channel tim tentang file yang baru ditambahkan ke proyek atau tim Figma.Kostumisasi channel Slack dengan pembaruan tentang percakapan yang terjadi di file yang relevan. Setelah kamu berhasil mengintegrasikan Figma dengan Slack, setiap anggota workspace Slack dapat menghubungkan akun Figma mereka dan subscribe channel untuk mendapat notifikasi. Menarik bukan? 3. Spotlight Spotlight memungkinkan kamu mengumpulkan kolaborator dalam file untuk mengikuti apa yang sedang kamu lihat pada desain Figma atau papan FigJam. Bagaimana cara menggunakannya? Simple saja, cukup lakukan dua hal berikut : Arahkan kursor ke avatar kamu di toolbar atas file desain FigJam atau Figma.Klik Spotlight me Setelahnya, semua orang yang sedang melihat file tersebut akan diberi tahu bahwa kamu ingin mereka mengikuti apa yang sedang kamu lihat. Kamu juga akan melihat berapa banyak orang dalam file yang mengikuti spotlight kamu. Ohya, untuk menghentikannya, kamu cukup klik Stop dan spotlight pun akan berhenti. 4. Play favorites Pernahkan kalian kebingungan untuk mencari file penting yang berhubungan dengan design yang sedang dikerjakan? Dengan fitur Play Favorites kita bisa menandai favorit pada design atau layer penting dan mengaksesnya dengan cepat dari bilah sisi kiri file browser kalian. Kita bisa mengklik dan menyeret file atau project favorit dan menyusunnya di bar sebelah kiri. Kemudian, Figma akan memberi bintang pada file favorit kamu. Berikut beberapa cara untuk menambahkan file ke tab favorit: Tampilan bergaris Klik logo bintang di sudut kanan bawah layar untuk ditambahkan ke favoritKlik kanan layar lalu pilih Tambahkan ke favorit AndaAtau, klik dan seret layar langsung ke bagian Favorit Tampilan daftar Klik logo bintang di sebelah kiri nama file untuk ditambahkan ke favoritAtau klik kanan nama filenya lalu pilih Add to your favoritesKita juga dapat mengklik dan menyeret file dari daftar ke bagian Favorit File yang tidak disukai Kita juga dapat menghapus file dari Favorit dengan beberapa cara berbeda, yaitu: Di browser file, klik logo bintang di sebelah file yang tidak disukaiDi editor, klik Hapus dari favorit Anda di sebelah nama file 5. Safe and sound Kita sering kali dihadapkan dengan situasi dimana kita ingin berbagi sebuah file secara publik, tapi hanya orang tertentu yang dapat mengaksesnya. Sekarang kita dapat menambahkan kata sandi menggunakan pengaturan berbagi tautan file. Dimana kita bisa mengontrol akses mereka yang tidak mempunyai izin untuk membuka file dengan bantuan fitur Tambahkan perlindungan kata sandi: 1. Buka file dan klik Bagikan2. Perbarui pengaturan viewers ke Siapapun dengan link dan password 3. Masukkan kata sandi di bidang Pilih kata sandi. Tidak ada persyaratan untuk panjang kata sandi atau tipe karakter.4. Klik Simpan. Figma akan menunjukkan kapan kata sandi ditetapkan dan oleh siapa kata sandi itu dibuat.5. Kita dapat memperbarui izin file untuk siapa saja yang mengaksesnya menggunakan tautan dan kata sandi. Pilih dari dapat mengedit sampai hanya dapat melihat prototipe.6. Figma akan memperbarui akses file dan memuat ulang file. Untuk mengakses file lagi, new user perlu memasukkan kata sandi.7. Pilih Salin tautan Bagaimana, dari keseluruhan update terbaru Figma, manakah yang menjadi favoritmu? Nantikan berbagai informasi menarik lainnya seputar UI UX design dan web-development di website kami ya! See you people.

Kelas Belajar Integrasi Cloud Hosting untuk WordPress di BuildWith Angga

Belajar Integrasi Cloud Hosting untuk WordPress

Hello people with the spirit of learning! Memahami bagaimana integrasi CloudHosting adalah hal yang penting bagi seorang WordPress Developer. Mengapa demikian? Yuk langsung saja simak penjelasannya! CloudHosing merupakan jenis web hosting yang menggunakan beberapa server untuk menjalankan website sehingga beban server menjadi lebih seimbang dan lebih stabil. CloudHosting juga memungkinkan kamu memiliki resource yang tidak terbatas. Menarik bukan? Nah, salah satu penyedia web hosting yang telah dipercaya banyak perusahaan besar di Indonesia ialah IDCloudHost. IDCloudHost akan membantumu mengelola website secara fleksibel dengan memastikan server website selalu aktif, aman dari cyber threat, dan tentunya akses konten dari server ke browser pengunjung bisa berjalan efisien berkat bantuan Object Storage. Jika kamu ingin mempelajari lebih lanjut mengenai IDCloudHost dan bagamina cara mengintegrasikannya dengan WordPress, kami memiliki rekomendasi kelasnya khusus untukmu! Mastering Cloud VPS for Website Developer with IDCloudHost Key Points Mempelajari VPS dan Cloud VPSMempelajari Object Storage IS3 dari IDCloudHostMempelajari pengembangan WordPress dengan Cloud VPSMelakukan integrasi WordPress ke Object Storage IS3 IDCloudHost Bersama Mentor Achmad Fauzi, kamu akan belajar konfigurasi server dengan Cloud VPS agar website memiliki skalabilitas dan performa penyimpanan data SSD bisa lebih cepat. Untuk mulai belajar, silahkan bergabung pada kelas dengan klik link dibawah ini ya! https://buildwithangga.com/kelas/mastering-cloud-vps-for-website-developer-with-idcloudhost?thumbnail=8NRtDwUEdB.274&main_leads=searchresult Kamu juga dapat mempelajari hal lain seputar pengembangan website dengan bergabung pada kelas lainnya yang telah kami sediakan. Silahkan kunjungi buildwithangga.com untuk informasi lebih lengkapnya. Semoga bermanfaat dan sukses selalu!

Kelas Rekomendasi Kelas Online Membuat Website Tanpa Coding di BuildWith Angga

Rekomendasi Kelas Online Membuat Website Tanpa Coding

Hello people with the spirit of learning! Apakah kamu ingin membuat website tanpa harus melakukan coding? Tentu saja bisa dengan CMS yang satu ini, WordPress! Sebagai Content Management System, WordPress memungkinkan kamu untuk membuat dan mengelola konten di website dengan mudah melalui fitur yang telah disediakan. Untuk kamu yang ingin belajar menggunakan WordPress, kamu bisa memulainya dengan mengikuti rekomendasi kelas di bawah ini ya! 1. Wordpress.com Website Development Untuk membuat website, kita membutuhkan keahlian coding, design, server, database, dan masih banyak lainnya. Tapi di sini, mentor Angga akan membantumu untuk membuat website tanpa membutuhkan keahlian tersebut. Sudah siap untuk mencoba? Pada kelas ini, kita menggunakan wordpress.com untuk mengelola sebuah website yang dapat diakses oleh siapa saja dengan gratis tanpa proses yang rumit. Ohya, jangan ragu untuk bergabung karena kelas ini sangat beginner friendly dan mudah dipahami. Key Points Mempublikasikan website agar diakses masyarakatMembangun suatu website untuk bisnisMemodifikasi tema pada websiteMemodifikasi tema pada website So, teruntuk kamu yang ingin membuat website dengan cepat dan mudah, cobalah ikuti kelas WordPress gratis kali ini dari BuildWith Angga! https://buildwithangga.com/kelas/wordpresscom-website-development?thumbnail=Ke6cTQXPwT.58&main_leads=searchresult 2. Wordpress.org Website Development Berbeda dengan wordpress.com, wordpress.org memungkinkan kamu untuk melakukan kostumisasi penuh terhadap website. Plugin dan tema yang disediakan pun lebih beragam. Sangat sesuai untuk kamu yang ingin lebih mengeksplorasi tampilan dari website berbasis WordPress. Melalui kelas ini kamu akan diajarkan berbagai hal dari mulai instalasi WordPress, XAMPP, plugin, dan tema. Sangat sesuai untuk kamu yang ingin berkenalan dengan wordpress.org. Key Points Mengenal Content Management SystemBelajar membuat halaman dan artikel pada Wordpress.orgBelajar kustomisasi pada Wordpress.orgBelajar kustomisasi pada Wordpress.org Sudah siap mengeksplorasi tampilan website tanpa coding? Yuk segera bergabung di kelas dan selamat belajar yaa! https://buildwithangga.com/kelas/wordpressorg-website-development?thumbnail=TsRZS5E15F.84&main_leads=searchresult Nah, itu adalah dua rekomendasi kelas WordPress dari BuildWith Angga yang pastinya dapat kamu ikuti tanpa mengeluarkan biaya. Untuk mempelajari WordPress lebih mendalam, kamu bisa memilih kelas yang sesuai kebutuhanmu di buildwithangga.com, semoga bermanfaat dan suskses selalu!

Kelas 3 Kelas Online Gratis Untuk Pemula UI/UX Berdasarkan Rolenya di BuildWith Angga

3 Kelas Online Gratis Untuk Pemula UI/UX Berdasarkan Rolenya

Hello people with the spirit of learning! Tahukah kamu bahwa UI/UX adalah bidang yang luas? Jika diamati secara lebih mendalam, ada berbagai role dalam bidang UI/UX seperti UI Designer, UX Designer, UX Researcher, UX Engineer, UX Writer dan lain sebagainnya. Nah pada kesempatan ini, kami akan memberikan tiga rekomendasi kelas UI/UX berdasarkan role nya sehingga kamu bisa memilih mana yang paling sesuai untukmu. 1. UI Design : Wireframe to Visual Design Jika kamu ingin menjadi seorang UI Designer, kamu bisa mengawalinya dengan bergabung pada kelas ini. Di kelas ini kamu akan mempelajari bagaimana mengubah wireframe ke visual design dengan menggunakan Figma. Kamu juga akan mempelajari bagaimana menentukan hirarki pada konten, membuat moodboard untuk referensi design, dan masih banyak lagi. Menarik bukan? Key Points Import Gambar dan Icon untuk Tampilan UI DesignMengubah Tampilan Wireframe menjadi Visual DesignMenentukan Hirarki Teks pada KontenMembuat Moodboard untuk Referensi Design Ayo segera bergabung di kelas UI Design dengan klik link pendaftaran kelas di bawah ini ya https://buildwithangga.com/kelas/ui-design-wireframe-to-visual-design?thumbnail=FjEfJ0b3GM.61&main_leads=searchresult 2. UX Design : Userflow Pada kelas ini kamu akan memperdalam keahlian UX Design terutama pada bagian User-Flow, di sini kamu akan mengenal apa itu User-Flow dan bagaimana cara mengimplementasikan hal tersebut pada suatu design aplikasi. Sebelum memulai pembelajaran kamu akan diminta untuk mendownload Tools Whimsical. Jangan khawatir, tools ini juga gratis loh. Key Points Mengenal apa itu User-Flow dan ManfaatnyaMengimplementasikan User-Flow pada design aplikasiMenggunakan Whimsical untuk mendesain Flow aplikasiMenggunakan Whimsical untuk mendesain Flow aplikasi Sudah siap untuk mengeksplorasi dunia UX Design? Yuk bergabung pada link berikut untuk segera memulai pembelajaran! https://buildwithangga.com/kelas/ux-design-user-flow?thumbnail=cYPaBIdP1J.83&main_leads=searchresult 3. Learn UX User Persona Ingin terjun ke dunia UI/UX tapi kamu kurang suka dalam membuat visual design? Sudah kenal dengan UX Researcher belum? Role ini bisa jadi sesuai untukmu. UX Researcher adalah seseorang yang bertanggung jawab untuk meenganalisis perilaku dan kebutuhan pengguna. Melalui kelas ini, kamu akan mempelajari cara membuat user persona dan user story board yang merupakan dua hal yang penting dalam UX research. Pasalnya, persona dan story board dapat membantu menciptakan UX yang baik pada suatu aplikasi. Untuk bergabung pada kelas UX User Persona, kamu dapat mengakses link yang sudah kami sediakan. Sampai jumpa di kelas ya! https://buildwithangga.com/kelas/learn-ux-user-persona?thumbnail=Y2qxhXI7TQ.297&main_leads=searchresult Setalah mengetahui beberapa role yang ada di dalam UI/UX, manakah yang paling menarik perhatianmu? Ohya, untuk mempelajari skill yang dibutuhkan role tersebut secara lebih mendalam, kamu bisa melanjutkannya dengan bergabung pada kelas premium yang kami sediakan. Silahkan kunjungi buildwithangga.com untuk informasi lebih lanjut ya!

Kelas Membuat Design Burger dengan Illustrator di BuildWith Angga

Membuat Design Burger dengan Illustrator

Hello people with the spirit of learning! Penggunaan illustrator dalam berbagai kebutuhan grafis dapat memudahkan seorang designer grafis untuk menyelesaikan projectnya. Sebagai pemula, berikut kami berikan proses dalam membuat desain burger dengan menggunakan illustrator. Lets Go! Step 1 : Color Palette Gunakan color palette berikut untuk memberikan pewarnaan desain burger yang akan dibuat. Step 2 : New Document Buatlah lembar kerja baru dengan cara "Pilih File > New > Masukkan ukuran artboard 2500 px x 2500 px " Tekan Create. Step 3 : Outline Roti Burger Buatlah bentuk rectangle dengan cara "Pilih icon rectangle dengan menekan "M" > Tekan Shift + Drag di artboard sehingga membentuk kotak"Hilangkan fill dengan menekan "Shift+X", jadi pastikan hanya tinggal stroke atau garis nya saja (Lihat Step 1)Buat kotak bagian atas melengkung dengan menekan "A", seleksi pada titik atas bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung secara penuh (Step 2).Buat kotak bagian bawah melengkung dengan menekan "A", seleksi pada titik bawah bagian kanan dan kiri kemudian drag ke arah dalam sampai melengkung sedikit (Step 3).Buat persegi panjang dengan menekan "M" dan tempatkan di tengah-tengah objek melengkung (Step 4)Jadikan objek melengkung menjadi 2 bagian, "Pilih kedua objek" kemudian pilih "Pathfinder pada Panel Properties >Minus Front"Buat melengkung bagian tengah objek dengan menekan "A", seleksi pada titik tengah saja dan tarik ke bagian dalam (Step 6) Step 4: Outline, Sayuran, Daging dan Keju 1. Buatlah persegi panjang dengan menekan "M" dan tempatkan dibagian roti bawah (Step 1). Pisahkan garis yang bawah dengan menekan "A" pilih titik kanan dan kiri bagian bawah kemudian pilih Cut path at selected anchor point (Lihat gambar di bawah). 2. Garis bagian bawah yang sudah terpisah, dibuat melengkung dengan "Pilih Effect > Pilih Transform and Distort > Pilih Zig Zag". Masukkan Size dan sesuaikan, Pada bagian Points pilih "Smooth" (Lihat gambar di bawah). 3. Gabungkan garis lengkung dengan persegi panjang dengan menekan "A" kemudian pilih kedua titik, selanjutnya pilih Connect selected end points (Lihat gambar di bawah). 4. Jadikan lengkung disetiap sisinya untuk sayurannya, dengan menekan "A" kemudian memilih titik atas dan titik bawah dan tarik ke bagian dalam sampai melengkung (Lihat gambar di bawah). 5. Memisahkan sayuran dengan roti burger bagian bawah, pilih kedua objek kemudian pilih Shape Builder Tool "Shift+M", arsir bagian perpotongan antara roti dan sayuran (Lihat gambar di bawah). 6. Buatlah kembali persegi panjang dengan menekan "M" dan buat persegi panjang dibagian atas sayuran, kemudian jadikan lengkung dengan memilih salah satu titik sudutnya selanjutnya tarik kebagian dalam (Lihat gambar dibawah). 7. Buatlah dua objek persegi panjang, persegi panjang yang kecil (warna biru) diposisikan pada persegi panjang pertama (warna merah). Kemudian gabungkan keduanya dengan menggunakan Shape Builder Tool "Shift+M" Selanjutnya buat lengkung semua sudutnya. (Lihat gambar di bawah). Step 5 : Colouring Berikan warna pada masing-masing objek, yaitu : Kode warna #EC9F1F untuk rotiKode warna #F5D812untuk kejuKode warna #C0522d untuk daging,Kode warna #55BD53 untuk sayuran, danKode warna #4D0B00 untuk outlinenya Step 6 : Shadow & Highlights 1. Membuat hightlights pada roti burger, pilih roti burger kemudian pilih pada Object selanjutnya pilih Path dan Offset Path. Pada panel Offset Path, silahkan masukan nilai pada kolom Offset. (Lihat gambar di bawah). 2. Buatlah efek sinar pada roti bagian atas, dengan menduplikat objek kemudian potong menggunakan click to minus front (Lihat gambar di bawah). 3. Buatlah efek bayangan pada bagian keju, Pilih objek keju, kemudian copy dan geser ke bawah dan keatas untuk membentuk bayangan pada bagian atas dan bawah. Berikan warna #FFFFFF untuk bayangan atas dan warna #DB6420 untu bayangan bawah (Lihat gambar di bawah). 4. Buatlah efek bayangan pada bagian dagingnya, "copy (Ctrl+C)" bagian daging dan paste (Ctrl+F) pada bagian daging, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #A04330 pada bayangan dan warna #C2522D pada bagian dagingnya (Lihat gambar di bawah). 5. Buatlah efek bayangan pada bagian sayurannya, "copy (Ctrl+C)" bagian sayuran dan paste (Ctrl+F) pada bagian sayuran, kemudian geser ke atas untuk bayangan atas dan geser kebawah untuk bayangan bawah. Berikan warna #B1D49B pada bayangan bawah dan warna #52964B pada bayangan bawah (Lihat gambar di bawah). Step 7 : Finishing Setelah semua tahapan di buat, sekarang tinggal finishing dengan menambahkan shadow pada bagian bawah burgernya. Buatlah objek elips, Pilih "L" kemudian arahkan elips dibagian bawah burger.Simpan elips dibelakang burger, Klik kanan pada elips, Pilih Arange > Pilih Send to Back.Berikan warna #280501 pada bayangannya. Good Job! Akhirnya telah menyelesaikan desain sederhana dengan membuat objek burger. Buat kalian yang ingin mendalami menjadi seorang desain grafis, Saya sudah buatkan kelas khusus untuk kalian, agar mahir menggunakan Adobe Illustrator mulai dari Basic sampai Advance. Tidak lupa di kelas juga Saya memberikan project grafis yang bisa kalian jadikan portfolio untuk karyamu. Sekian tips kali ini, semoga bermanfaat, dan Semangat Belajar!

Kelas Temukan Color Palette yang Cocok dari 3 Website Ini! di BuildWith Angga

Temukan Color Palette yang Cocok dari 3 Website Ini!

Hello people with the spirit of learning! Kamu sering tidak merasa kesulitan cari color palette yang cocok baik untuk UI Design maupun ilustrasimu? Color palette sangat berpengaruh lho pada aspek desain kamu, karena warna selain memperindah namun juga mempunyai kemampuan untuk "mempengaruhi" psikologis kita. Oleh karena itu, kita perlu memilih warna yang tepat sesuai dengan tujuan karya kita. Terus bagaimana dong? Apa pinterest jadi jalan ninja nya? Oh tidak, selain pinterest berikut adalah 3 website yang bisa jadi preferensi kamu saat cari color palette! Coolors Website ini selain menyediakan macam-macam color palette tapi juga up-to-date lho! Karena disini kita dapat eksplorasi color palette yang lagi trendy di jaman kekinian tanpa harus searching dua kali. Selain itu, Coolors juga menyediakan extension yang bisa digenerate langsung ke Adobe & Chrome kita, efektif banget yah? Color Tool - Material Design Salah satu fitur dari Material Design ini dibuat khusus bagi kalian yang ingin eksplor color palette untuk User Interface kalian dengan 6 screen yang berbeda! Uniknya, kita juga bisa terapin primary, secondary dan color text secara langsung di website ini. Jadi kamu tidak perlu khawatir revisi warna untuk klien, karena Color Tool ini bisa di share link sehingga semua orang bisa mengaksesnya! Color Palette Generator - Canva Lhoo, kok ada Canva disini? Jadi, ternyata Canva juga menyediakan fitur color palette namun tidak seperti biasanya. Karena kita bisa mendapatkan color palette kita sendiri dari image / foto kita! Tidak perlu pusing lagi menghadapi klien yang masih ragu dengan color palette, karena bisa kita sesuaikan karakteristik dan produk klien kita dengan generator ini! Bagaimana? Jangan lupa dicatat yah websitenya karena siapa tau bisa digunakan kedepannya! Bagi kalian yang ingin mempelajari cara menggunakan color palette yang benar pada User Interface kalian, kalian bisa mengikuti kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Karena selain visual design, kita juga bisa mempelajari User Interface secara menyeluruh. Jadi tunggu apa lagi? Selamat belajar!

Kelas 3 Keuntungan Brainstorming dengan Whimsical di BuildWith Angga

3 Keuntungan Brainstorming dengan Whimsical

Hello people with spirit of learning! Suka merasa ribet ga kalau harus sedia alat tulis dan kertas buat brainstorming product yang mau dibuat? Atau mungkin kalian sedang kerja dan kolaborasi secara remote yang pastinya ga mungkin rekan kerja kalian bisa brainstorming bareng apalagi ngerevisi di waktu yang bersamaan kan? Nah kalo punya kendala seperti itu, coba deh pakai whimsical. Disini saya coba merangkum jadi 3 point kenapa whimsical bisa jadi solusi kalian dalam brainstorming sebelum ngedesign. Dashboard Pertama, kalian bisa kunjungin website whimsical.com, disini saya ga akan ngasih tau cara daftar dan loginnya karena saya yakin kalian udah pada bisa ya. Cukup daftar akun emailnya aja, atau kalo ga mau ribet juga bisa daftar pakai akun google mail yang udah kalian punya. Kerja Bareng Secara Real Time Sebelum kalian bisa kerja bareng, di whimsical perlu invite akunnya dulu (ya jelas juga ya, kalo ga diundang nanti siapa aja bisa ngacak-ngacak projectnya dong ya). Caranya simple, pilih menu Share, Export & Print. Setelah itu, lanjut pilih menu Get Shareable Link yang ada pada baris menunya. Nah, setelah itu kalian bisa masukkan email akun teman kolaborasinya dan pastinya udah terdaftar di whimsical yaa. Oya, perhatiin juga nih ketiga menu yang ada di bagian Add guest. Karena masing-masing menu itu fungsinya beda-beda. Viewer: Akun ini cuma bisa melihat project yang kalian buat aja.Commenter: Akun ini bisa melihat dan juga komen revisi sama brainstorming yang udah kalian buat.Editor: Akun ini punya kendali yang sama seperti pemilik utama. Bisa mengubah tampilannya atau bisa juga hapus tampilan yang udah kalian buat. So, pastiin tipe guestnya ya sebelum ngundang akunnya. Ok, kalo tadi udah ngebahas tentang whimsical dan cara kolaborasi bareng. Sekarang kita cari tau, emangnya di whimsical bisa buat brainstorming apa aja sih? 1. User Flow Pertama, di whimsical kalian bisa membuat user flow atau mungkin ada yang nyebutnya flowchart. User Flow ini jadi tahap yang penting banget buat kalian nentuin alur produk yang akan dibuat. Sehingga kalian punya gambaran tentang halaman apa saja yang akan dibuat nantinya. And the next step is... 2. Sitemap Kalo udah selesai bikin user flow, kalian bisa lanjut ke bagian sitemap biar kalian bisa lebih punya gambaran tentang design yang akan dibuat. Nah, di sitemap ini kalian bisa nentuin screen apa aja yang akan dibuat dan ga hanya itu, dengan membuat sitemap kalian juga bisa punya gambaran tentang konten apa aja yang harus dibuat dalam setiap halamannya. 3. Wireframe Yang terakhir ada wireframe yang mungkin dari kalian udah tau proses ini ya. Jadi, di wireframe ini kalian menuangkan semua hasil brainstorming dari tahap user flow dan juga sitemap dan mengubahnya ke tampilan visual dalam bentuk layouting (tanpa memikirkan warna dan tipografinya). Nah itu dia beberapa keuntungan brainstorming menggunakan whimsical yang pastinya bakal bikin proses brainstorming kalian jadi makin lebih cepat. Jika kalian tertarik mempelajari lebih dalam tentang proses brainstorming di whimsical, silahkan bergabung pada kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Dalam kelas itu, kita akan bersama-sama membedah dan mempelajari proses apa saja yang harus dilakukan dalam mendesign biar prosesnya jadi lebih cepat dan efisien. Ga hanya itu, kalian juga akan mempelajari bagaimana caranya mengubah brainstorming menjadi product design yang menarik dan menjual. Sampai jumpa di kelas yaa! Terima kasih.

Kelas 5 Website Icon Gratis untuk UI/UX Designer di BuildWith Angga

5 Website Icon Gratis untuk UI/UX Designer

Hello people with the spirit of learning 👋. Siapa disini masih bingung mencari Icon untuk Visual Design kita? Jika iya, di artikel ini kita membahas tentang 5 website Icon Gratis untuk UI/UX Designer🤩. Lets Go🔥 1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita. 2. Feather Apa itu Feather? Feather adalah kumpulan ikon open source yang cantik. Setiap ikon dirancang pada kisi 24x24 dengan penekanan pada kesederhanaan, konsistensi, dan fleksibilitas. Disini kita bisa mengatur Size dan juga Stroke widthnya sesuka kita sebelum mendownloadnya. selain itu, icon yang disediakan oleh feather berstyle outline. 3. HeroIcons Apa itu HeroIcons? Heroicons merupakan Satu set 450+ ikon SVG berkualitas tinggi berlisensi MIT gratis untuk Anda gunakan dalam proyek web Anda. Tersedia sebagai ikon SVG dasar dan melalui perpustakaan React dan Vue pihak pertama. Selain mudah kita pakai, Heroicons juga menyediakan soft file Figmanya juga. Selain Style Outline, Heroicons juga memiliki Style Solid 4. Flaticon Apa itu Flaticon? Flaticon adalah layanan web yang dapat digunakan untuk mengunduh ikon vektor dengan cepat dan mudah, untuk digunakan secara bebas pada situs web atau blog Anda. 5. Material Icon Apa itu Material Icon? Material Icon adalah simbol yang menyenangkan dan dibuat dengan indah untuk tindakan dan item umum. unduh di desktop untuk menggunakannya dalam produk digital Anda untuk android, ios, dan web Okay people with the spirit of learning👋. Itulah 5 website Icon Gratis untuk visual design kita sebagai seorang UI/UX Designer. Semoga artikel ini bermanfaat

Kelas Cara Membuat Fancy Bottom Navigation di Figma di BuildWith Angga

Cara Membuat Fancy Bottom Navigation di Figma

Hello people with the spirit of learning 👋. Di artikel ini kita akan membuat fancy navigation dengan sangat mudah di figma🤩. oke langsung saja kita mulai, lets go🔥 Step 1: Buatlah Rectangle Buatlah Rectangle (r) dengan ukuran 375x80 (*Weightnya harus sesuaikan dengan ukuran frame yang kita pakai) Step 2: Buatlah Ellipse Buatlah Ellipse (e) dengan ukuran 80x80Lalu Pastikan Rata tengah dengan rectangle seperti digambar diatas. Setelah itu Duplicate Ellipse tadi,Lalu jadikan ukurannya menjadi 64x64Pastikan rata tengah dengan Ellipse sebelumnya Step 3: Boolean Groups Seleksi Rectangle dan Ellipse yang kita duplicate tadiLalu pergi ke menu Boolean GroupsSetelah itu pilih Subtract selection Step 4: Outline Stroke Pilih Rectangle yang sudah kita Subtract selection tadiLalu Klik kananPilih Outline stroke Step 5: Corner Radius 1. Klik 2x pada Rectangle 2. Pilih 2 Titik Anchor Point seperti di gambar (*pastikan sudah melakukan step 4) 3. Setelah itu diberi Corner Radius 24 Step 6: Finishing Terakhir kita tambahkan beberapa component: Tambahkan beberapa IconTambahkan juga corner radius di beberapa sudut Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :) Oiya, kalau kita mau meng convert fancy navigation ini kedalam bentuk code, kita bisa mengikuti kelas Full-Stack Laravel Flutter: E-Commerce App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus membeli sepatu online.

Kelas 5 Website Inspirasi Desain untuk Flutter Developer di BuildWith Angga

5 Website Inspirasi Desain untuk Flutter Developer

Hello people with the spirit of learning.  Dalam pengembangan sebuah aplikasi mobile, akan ada banyak aspek  yang perlu diperhatikan, salah satunya adalah tampilan dari sebuah aplikasi. Tampilan yang menarik dalam sebuah aplikasi mobile seringkali menjadi hal yang cukup penting untuk diperhatikan. Oleh karena itu, pada tips ini kita akan membahas mengenai 5 website yang dapat kita jadikan sebagai inspirasi sebagai Flutter Developer.  1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita.  2. Dribbble Mungkin sebagian banyak orang sudah tahu apa itu Dribble. Dribbble merupakan sebuah website yang dapat menjadi platform untuk designer dalam memamerkan karya mereka. Selain itu, dribbble juga dapat menjadi platform untuk designer sebagai tempat untuk menaruh portofolio desain-desain yang telah mereka buat serta mencari pekerjaan secara online. Oleh karena itu, Dribbble dapat menjadi platform yang tepat untuk developer juga dalam mencari inspirasi desain yang baik jika sedang ingin mengembangkan sebuah aplikasi.  3. Pinterest Pinterest merupakan sebuah sosial media asal Amerika yang dibuat untuk menemukan ide dalam bentuk gambar seperti resep, inspirasi rumah dan gaya, UI/UX Design dan banyak lagi. Kita juga dapat mencari inspirasi-inspirasi desain jika ingin mengembangkan sebuah aplikasi. Cukup ketik kata kunci seperti “UI Design” dan kita akan menemukan banyak sekali UI Design yang sangat bagus.  4. Uplabs Uplabs merupakan sebuah platform asal California yang dapat menjadi referensi kita dalam mencari ide design pada saat mengembangkan aplikasi. Uplabs juga menyediakan fitur dimana kita dapat mendownload UI Kits yang kita inginkan dalam bentuk File Figma, Adobe XD dan bahkan Sketch.  5. Collect UI Collect UI merupakan platform yang menyediakan banyak sekali inspirasi UI Design. Kita juga dapat memilih kategori UI Design sesuai dengan apa yang sedang kita butuhkan. Collect UI menampilkan desain-design pilihan atau hand picked yang berasal dari Dribbble, sehingga Collect UI hanya akan menerima desain yang berasal dari Dribbble. Okay people with the spirit of learning, itulah 5 website yang dapat kita jadikan sebagai referensi ketika sedang mengembangkan aplikasi kita. Semoga tips ini bermanfaat. 

Kelas Modeling Objek Coin 3 Dimensi dengan Software Blender di BuildWith Angga

Modeling Objek Coin 3 Dimensi dengan Software Blender

Hello people with the spirit of learning! Banyak objek yang dapat kita buat dengan menggunakan software Blender. Dan jika kita masih pemula, Coin adalah salah satu objek yang paling mudah untuk dibuat dan memiliki beberapa komponen yang bisa kita pelajari sekaligus. Nah, untuk membuatnya, kita hanya perlu menyiapkan objek Cylinder dan objek Text. Dan untuk langkah-langkahnya adalah sebagai berikut: Step 1: Menambahkan Objek Cylinder Buka Software Blendernya, dan hapus objek Cube yang ada pada tampilan awal Blender dengan menekan “X” dan pilih DeleteSetelah itu kita bisa tekan “Shift + A”, kemudian pilih “Mesh” dan kita pilih “Cylinder” Step 2: Membuat Base Objek Coin  Kita bisa pipihkan objek Cylinder tersebut dengan menekan “S” dan “Z” dan kita arahkan cursornya kedalam objek Cylinder untuk mengubah skalanya ke sumbu Z atau verticalKemudian kita bisa masuk ke “Edit Mode” dengan menekan “Tab” pada KeyboardSelanjutnya kita seleksi Face yang ada di bagian atas dan bagian bawah objek Coinnya dengan menggunakan “Face Select” yang ada pada samping menu Edit ModeKalau sudah, kita tekan “i” untuk “Inset Face” dan kita tarik kedalam (Lebarnya bisa dilihat di contoh gambar)Setelah itu kita akan Extrude kedalam dengan menekan “E” “S” dan “Z” dan kita tarik kedalam untuk menambahkan segment kedalam objek coinnya. (Bisa dilihat di contoh gambar) Step 3: Menambahkan Bevel pada Objek Coin Sebelum menambahkan Bevel, kita akan masuk dulu ke Object Mode atau tekan “Tab”Dan kita tekan “Ctrl + A” kemudian pilih “Scale” untuk meng-Apply Objek Coinnya Kemudian kita masuk ke Edit Mode lagi dengan menekan “Tab”Kita bisa seleksi setiap garis melingkar pada objek Coin dengan seleksi garis atau “Edge Select”Kemudian kita tekan “Ctrl + B” dan Scroll ke atas, dan kita tambahkan kurang lebih 3 atau 4 garis Step 4: Menambahkan Modifier Subdivision Surface Kita bisa masuk ke area Properties yang ada di bagian kanan, dan kita pilih icon bergambar kunci inggris atau “Modifier Properties”Kemudian kita klik “Add Modifier” dan pilih “Subdivision Surface”Kalau sudah, kita akan masuk lagi ke Objek Mode dengan menekan “Tab” Setelah itu kita tekan “W” dan pilih “Shade Smooth” Step 5: Menambahkan Object Text Tekan “Shift + A” dan pilih “Text”Kemudian masuk ke Edit Mode atau “Tab” dan ketikkan “$” atau dollar Kalau sudah, kita masuk lagi ke Objek Mode atatu tekan “Tab”Setelah itu letakkan posisi text “$” di tengah objek Coin dengan menekan angka “7” untuk melihat view dari arah atasDan tekan “G” untuk memindahkan posisinya, dan juga “S” untuk mengubah skalanya. Step 6: Finishing Setelah selesai menambahkan Text, kita akan Extrude objek Textnya agar memiliki tinggi yang sama dengan objek Coinnya. Kita akan masuk ke “Object Data Properties” atau icon yang bergambar huruf ”a”Kemudian pilih “Geometry” dan tambahkan 0.1m pada bagian “Extrude” Oiya, jumlahnya bisa berbeda, jika size objek yang kita buat juga berbeda, jadi sesuaikan saja tingginya dengan objek Coinnya. Dannn akhirnya selesai! Itu tadi adalah cara simple untuk membuat objek Coin. Temen-temen tinggal tambahkan material dan lighting, agar objek coinnya jadi lebih realistis (untuk dasarnya bisa dilihat di kelas gratisnya buildwithangga) Oiya, materi ini juga ada pada kelas Mastering Blender 3D: Design Icon Set, disitu saya jelaskan secara detail, dan juga ada beberapa tambahan yang buat objek 3D nya menjadi lebih menarik dan enak untuk di lihat. Dan yang lebih penting, di kelas itu juga saya ajarkan bagaimana cara menyiapkan objek 3D yang siap digunakan dan siap untuk dijual! Sekian Tips kali ini, semoga bermanfaat, dan Selamat Belajar!

Kelas Membuat Prototype Sederhana di BuildWith Angga

Membuat Prototype Sederhana

Hello people with the spirit of learning! Pada kali ini kita akan membuat prototype sederhana. Gimana caranya ? Simak sampai akhir yuk. 1. Menyiapkan asset design Sebelum kita melakukan prototyping, sebaiknya kita sudah memiliki design yang sudah siap untuk prototyping. Kamu bisa mencari asset design pada halaman website pixel.buildwithangga.com 2. Import to Figma Setelah berhasil unduh asset design yang kita inginkan, Import file asset design ke Figma. Caranya, klik icon import pada cursor yang ada di gambar atau kamu langsung bisa drag file ke figma secara langsung. 3. Ubah device ke Prototype Jika sudah berhasil import file design, selanjutnya open project tersebut kemudian pada right sidebar, ubah device menjadi prototype Jika berhasil, maka screen akan terdapat tanda node untuk menghubungkan screen yang lain. 4. Buat koneksi pertamamu Pilih screen pertama kamu, lalu click tanda plus, dan tarik ke tujuan screen berikutnya. Selain itu kamu juga bisa melakukan hotspot menggunakan element. Seperti gambar di bawah ini. Pilih input field email kemudian tarik ke tujuan screen berikutnya. 5. Buat interaksi dan animasi sederhana a. Buat frame terbaru untuk membungkus elements plane menjadi 2 screen. b. Pada screen screen pertama, putar element pesawat 180 derajat, Dan ubah layer opacity menjadi 0% c. Select semua screen dan buat menjadi multiplayer component d. Kemudian klik combine as variant pada right sidebar e. Hasilnya akan menjadi seperti ini f. Kemudian koneksikan screen 1 ke screen 2, ubah aturan menjadi seperti ini g. Kemudian pada left sidebar terdapat asset, pilih component plane tadi kemudian tarik ke splashscreen. Oh ya, sebelumnya logo splashscreen tersebut sudah dihapus ya, dan hasilnya akan jadi seperti gambar dibawah ini. h. Kemudian pada screen login, lakukan duplikasi menggunakan ctrl+D atau alt+D i. Kemudian tarik tiap component, disini saya membagi 2 menjadi atas dan bawah. Untuk inputan saya sembunyikan di bawah, sedangkan untuk illutrasi dan title saya sembunyikan diatas, namun masih di dalam screen/frame tersebut. j. Selanjutnya, buat koneksi screen splashscreen ke screen login, dan atur animasi menjadi seperti gambar dibawah ini. k. Dilanjutkan dengan mengoneksikan screen login ke screen login ke 2 dengan detail animasi seperti dibawah ini l. Tadaa, prototype animasi sederhana kamu sudah jadi. Untuk menguji prototype kamu udah berhasil apa belum kita lanjut ke step 6. 6. Menjalankan prototyping a. Ketika kamu sudah membuat prototyping, kamu perlu untuk menjalankan prototype tersebut sudah berhasil apa belum, dengan cara pastikan starting frame kamu sudah benar. Dengan melihat pada rightsidebar-prototype. b. Klik pojok kanan atas, dengan icon play c. Kemudian akan muncul tab baru yang berarti prototype sedang dijalankan. Hello people with the spirit of learning! Gimana untuk tips kali ini? Sangat mudah bukan ? Jika terdapat kendala bisa DM langsung ke @buildwithangga atau @cika.design. Terima kasih telah membaca artikel ini dan jangan lupa untuk tag kami.

Kelas Project UI Design Jadi Lebih Efektif Dengan Component di BuildWith Angga

Project UI Design Jadi Lebih Efektif Dengan Component

Hello people with the spirit of learning! Pernah ga kalian sudah membuat screen yang banyak pada project UI Design lalu tiba-tiba kalian ingin mengganti warna dari sebuah button? Apa yang akan kalian lakukan? menggantinya satu persatu? Well, itu akan memakan waktu yang sangat lama. Bayangkan jika kalian memiliki 100 button, apakah kalian akan rela membuang waktu hanya untuk mengganti button saja? Tapi tenang, pada artikel ini kita akan mempelajari bagaimana caranya membuat component pada figma, agar proses revisi dan pembuatan design kalian jadi lebih cepat dan efisien. Oke, siapkan koneksi internet kalian dan juga akun figmanya ya. Let’s Start! Step 1 : Buat Project Baru Pertama, buat sebuah project baru dengan memilih + New pada menu yang ada di bagian atas tampilan dashboard figma. Step 2 : Ubah Nama Project Kalian bisa ubah nama dari project yang baru saja dibuat dengan mengklik bagian Untitled, lalu ubah namanya sesuai kemauan kalian. Step 3 : Menambahkan Frame Baru Untuk menambahkan wireframe baru, kalian dapat menekan F pada keyboard atau memilih icon pagar seperti menu yang ada pada gambar diatas. Setelah itu kalian bisa klik bagian artboard dimana saja untuk membuat wireframe baru, lalu atur ukuran dari framenya menjadi W: 400 x H: 100. Step 4 : Membuat Button Utama Dalam membuat button, kalian bisa menggunakan Rectangle Tool dengan cara memilih menu seperti gambar diatas atau menekan R pada keyboard. Setelah membuat objectnya, atur ukuran buttonnya menjadi W: 300 x H:60. Step 5 : Mengatur Bentuk Radius Button Agar bentuk buttonnya tidak terlalu kaku, kalian bisa mengubah ujung tepinya atau biasa disebut dengan radius, dengan mengubah bagian yang ada seperti gambar diatas. Ubah radiusnya menjadi 40. Step 6 : Ubah Warna Button Untuk mengubah warnanya, kalian bisa seleksi terlebih dahulu object button yang telah dibuat. Setelah itu, pilih persegi kecil seperti gambar diatas untuk masuk ke pengaturan warna. Ubah kode warnanya menjadi 6A67FB pada bagian kolom Hex. Jika kalian memiliki kode warna yang lain, silahkan digunakan sesuai kebutuhan yaa. Step 7 : Menambahkan Teks Pada Button Gunakan menu Text (T) untuk membuat sebuah tulisan baru yang akan kalian gunakan pada bagian button. Untuk pengaturan teksnya, kalian bisa ikuti seperti ini yaa. Typeface: Roboto, Typefont: Medium, Size: 22px. Lalu, jangan lupa atur rata tengah teksnya dengan memilih menu Text align center. Step 8 : Membuat Component Setelah semuanya tersusun rapih, seleksi kedua objectnya (button + teks) dengan cara klik pada layer dan jangan lupa tahan tombol Ctrl atau Command. Langkah selanjutnya, klik kanan pada layer yang telah terseleksi. Lalu pilih Create component dan kalian telah membuat satu komponen yang siap dipakai ulang dalam membuat project lebih cepat. Step 9 : Menggunakan Component Untuk mengecek component yang telah kalian buat sebelumnya, kalian bisa cek pada bagian Assets, lalu pilih Local components, setelah itu buka nama frame dari component yang kalian buat. Untuk menggunakan componentnya, kalian hanya perlu menggeser object componentnya, lalu letakkan pada tempat yang kalian inginkan. Step 10 : Mengubah Tampilan Dengan Cepat Untuk mengubah tampilan dari semua componentnya dengan satu langkah, kalian perlu double click pada component yang ada pada bagian Assets. Setelah itu kalian bisa ganti tampilannya, seperti contoh diatas saya mengganti warna dari component utamanya, lalu component lainnya secara otomatis akan berganti warna juga. Wow cepat banget kan, gak perlu ganti satu persatu. Sekarang proses membuat UI Design jadi lebih cepat dan efisien banget pokoknya. Jangan lupa tag hasil belajar kalian ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian penasaran dan tertarik untuk mempelajari tips-tips UI Design, silahkan bergabung pada kelas 3D Blender & UI UX Landing Page. Dalam kelas itu, kita akan bersama-sama mempelajari bagaimana caranya mendesign tampilan UI Design secara cepat, dan juga kita akan mempelajari bagaimana caranya membuat 3D Modelling agar tampilan UI Design lebih terlihat unik dan menarik. Silahkan bergabung, sampai jumpa di kelas yaa! Terima kasih.

Kelas Cara Mendesign UI Login Mobile Sederhana di BuildWith Angga

Cara Mendesign UI Login Mobile Sederhana

Hello people with the spirit of learning! Kali ini kita akan mendesign tampilan Login UI Mobile Sederhana melalui Figma. Mari kita coba! Step 1: Menyiapkan Referensi Sebelum kita memulai mendesign suatu tampilan, pasti kita perlu mencari inspirasi terlebih dahulu. seperti layout, warna, Illustration, icon dan lainnya. Biasanya saya mencari referensi di Pixel.buildwithangga.com dan dribbble.com Step 2:  Membuat Frame (Artboard) Untuk membuat framenya, bisa kita tekan huruf “F” pada keyboard, Lalu pilih ukuran yang diinginkan. Biasanya saya menggunakan ukuran iphone 11 Pro (375 x 812). Step 3: Membuat Headline Setelah berhasil membuat Frame Langsung saja kita buat Title teks agar pengguna bisa mengetahui bahwa mereka sedang berada di Login Page.  Pertama kita tekan huruf “T” pada keyboard lalu klik di area Frame.selanjutnya langsung saja kita ketik teksnya “Welcome Back,”. lalu kasih margin 30px dari kiri dan margin 30px dari atas.Setelah itu, kita atur terlebih dahulu typeface, jenis font, ukuran fontnya dan warnanyaKemudian untuk membuat subtitlenya, kita copy saja bagian teks titlenya. lalu kita ubah caption teksnya dan juga teks propertiesnya. jangan lupa kasih margin 6px dari title teks dan margin 30px dari kiri. Step 4: Menambahkan Ilustrasi Oke langsung saja kita tambahkan ilustrasi agar lebih menarik. lalu Kasih margin 30px dari bawah Headline dan margin 30px dari kiri dan juga kanan. oiya Disini saya menggunakan illustration dari pixel.buildwithangga.com. Kita bisa mendownloadnya dari website tersebut. Step 5: Membuat Form Input Login Selanjutnya, mari kita membuat form input login pagenya. Pertama kita buat title teks “Email Address”, lalu kasih jarak 30px dari ilustrasiSetelah itu buatlah rectangle dengan menekan huruf “R” pada keyboard, lalu klik di area frame.Selanjutnya ubahlah Width dan Height rectangle tersebut menjadi 315 x 50 dan kasih corner radius 12. Jangan lupa kasih margin 6px dari teks “Email Address” dan margin kiri kanan 30pxKemudian ubahlah rectangle tersebut menjadi outline dengan cara menghapus Fillnya dan menambahkan stroke, Lalu beri warna light “9FADBC”.Setelah itu, tambahkan icon di dalam rectangle tadi lalu kasih padding 12px dari kiri dan 13px dari atas dan juga bawah. oiya disini saya menggunakan icon gratis buatan Alexander berikut ini linknya: https://www.figma.com/file/IQ2DGwDh2zWHb9bU4Hg9K9/Free-Basic-%26-Essentials-Icons-Set?node-id=0%3A1 (Pastikan Icon yang di copy seluruh grup iconnya).Selanjutnya tambahkan juga teks di dalam rectangle, lalu kasih padding 12px dari icon dan padding 14px dari atas dan bawahNah untuk membuat form input passwordnya. tinggal duplicate saja dengan cara tekan shortcut “Command + D” untuk pengguna Mac os dan “CTRL + D” untuk pengguna windows. Setelah di duplicate ubahlah caption tersebut dan kasih margin 30px dari form email address, seperti gambar diatas Step 6: Membuat Button CTA Forgot Password Oke selanjutnya mari kita buat button teks untuk forgot password. Caranya sangat mudah Pertama buatlah teks “Forgot Password” Lalu atur properties teks tersebut pada di gambar diatas ini. Setelah itu kasih margin 6px dari atas form input password dan margin 30px dari kanan Step 7: Membuat Button CTA Login Buatlah rectangle berukuran 315x50 lalu beri corner radius 12Buatlah rectangle berukuran 315x50Setelah itu beri jarak 30px dari teks “Forget password?” dan 30px dari kiri dan juga kananKemudian beri warna Biru “0079FB”Selanjutnya buatlah teks “Login” di dalam rectangle tersebut dengan padding 14px atas bawah dan padding 138px kiri kanan (Pastikan diatas layer rectangle tadi) Step 8: Membuat Button CTA Daftar akun Duplicate Button CTA “Forgot Password”Setelah itu ubah teks tersebut menjadi “Don’t have an account? Sign Up”Kemudian Bloklah teks “Don’t have an account? Sign Up” tersebutLalu ubahlah warna dan Jenis font seperti yang digambar (Pastikan “Don’t have an account?” dalam keaadan diblok)Selanjutnya kasih margin 30px dari bawah dan 90px dari kiri dan juga kanan Step 9: Finishing & Upload Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :)

Kelas Membuat Wireframe Jadi Lebih Cepat dengan Whimsical di BuildWith Angga

Membuat Wireframe Jadi Lebih Cepat dengan Whimsical

Hello people with the spirit of learning! membuat wireframe secara cepat, kalian dapat menggunakan tools Whimsical yang bisa diakses melalui website. Oke langsung aja kita mulai. Step 1 : Kunjungi Website Whimsical Pertama, kunjungi website whimsical.com, setelah itu bisa daftarkan akun menggunakan Google mail atau membuat akun email baru pada whimsical. Step 2 : Halaman Utama Dashboard Setelah mendaftarkan akun dan juga masuk menggunakan akun yang telah terdaftar sebelumnya, kalian akan masuk ke bagian dashboard utamanya. Step 3 : Tambahkan Project Wireframe Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 4 : Menambahkan Frame Baru Berikutnya, untuk membuat sebuah frame baru, kalian bisa menekan F pada keyboard, atau pilih menu Add Frame lalu pilih ukuran frame yang ingin kalian pakai. Step 5 : Menambahkan Element Pada Frame Untuk menambahkan element atau objek pada tampilan wireframe, kalian dapat memilih menu Add Element lalu pilih element yang ingin digunakan seperti Rectangle, Solid Button, atau yang lainnya. Step 6 : Ubah Warna Background Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 7 : Tambahkan Text dan Icon Setelah itu, buat header menu menggunakan Add Text (T) lalu untuk iconnya kalian bisa gunakan icon yang telah tersedia pada whimsical menggunakan menu Add Icon (X). Step 8 : Menambahkan Object Lain (Button & Wireframe Image) Setelah menambahkan dan mengatur ukuran teks, tambahkan sebuah button menggunakan Solid Button (B) dan juga tambahkan satu buah wireframe untuk gambar menggunakan menu Image (I). Step 9 : Finishing dengan Menambahkan Element Lain Setelah itu, kalian bisa lanjut mebuat tampilan wireframe pada section berikutnya hingga selesai pada bagian footer suatu halaman. Dan kalian telah menyelesaikan satu tampilan wireframe yang akan diubah ke visual design pada tahap design berikutnya. Nice! kalian telah menyelesaikan tampilan wireframenya, jangan lupa untuk tag hasil belajarnya ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian tertarik untuk mempelajari proses design mulai dari wireframe, visual design, dan juga prototyping, kalian bisa mengikuti kelas Wordpress & UI/UX Design, di dalam kelas itu kita akan mempelajari proses design UI hingga mengubah ke dalam bentuk website menggunakan Wordpress.

Kelas Cara Design Icon Rocket dengan Figma di BuildWith Angga

Cara Design Icon Rocket dengan Figma

Hello people with the spirit of learning! Kali ini kita akan coba membuat Icon Rocket melalui Figma. Let's dive in! Step 1 : Color Palette Color 1 : FFFFFFColor 2 : FCC69BColor 3 : FFAE48Color 4 : FE4881 Tentukan color palette untuk icon agar dengan lebih mudah kita modifikasi warnanya dengan memakai eye-dropper Step 2 : Size & Frame Buatlah frame ( F ) dengan size 256 x 256 px (size yang dianjurkan untuk icon karena high-resolution) Step 3 : Background Untuk background icon bisa kita tambahkan Gradient linear warna orange-pink seperti ini. Step 4 : Dasar Rocket Sekarang kita membuat dasar rocket. Buat Ellipse ( O ) lalu atur Anchor Point atas dengan double-click pada elips tersebut.Gabungkan kedua Anchor Point (sebelah kanan kiri) hingga ke tengah Anchor Point.Lalu atur radius Anchor Point atas elips sebesar 10 Step 5 : Substract selection Buatlah Ellipse ( O ) lagi dan Rectangle ( R ) di atas layer dasar rocketBlock semua shapes (termasuk dasar roket & lakukan Substract selection) Step 6 : Sayap Rocket Buat Rectangle ( R )Atur Anchor Point nya seperti sayap dan berikan radius 1 . Lalu duplicate untuk sayap sebelahnya Step 7 : Extras Tambahkan Ellipse ( O ) ditengah rocket agar terlihat seperti jendela & Rectangle (R) dibawah dasar rocketTambah Lines ( L ) sebagai arah luncur rocket dengan stroke 5 dan cap Rounded Step 8 : Finish Modifikasi arah rocket menjadi menyamping dengan memblok semua layersIcon Rocket sudah finish dan siap di export Good effort teman-teman! Kita sudah selesai finishing Icon Rocket, dan kami berharap steps ini dapat membantu dalam project mu yang mendatang, Goodluck! Oh iya, jangan lupa untuk mengikuti rekomendasi kelas Mastering Blender 3D: Design Icon Set dan juga share karyamu dengan tag @Buildwithangga

Kelas Perbedaan Test Scenario dengan Test Cases : 101 SQA di BuildWith Angga

Perbedaan Test Scenario dengan Test Cases : 101 SQA

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

Kelas Perbedaan QA Analyst, QA Tester, dan QA Engineer : 101 SQA di BuildWith Angga

Perbedaan QA Analyst, QA Tester, dan QA Engineer : 101 SQA

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

Kelas 6 Tipe Button Populer Flutter di BuildWith Angga

6 Tipe Button Populer Flutter

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

Kelas Manfaat Utama Menggunakan Flutter Buatan Google di BuildWith Angga

Manfaat Utama Menggunakan Flutter Buatan Google

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

Kelas 6 Tools Terbaik Data Analytics di BuildWith Angga

6 Tools Terbaik Data Analytics

Dalam mengembangkan startup digital, analisis data menjadi salah satu hal krusial yang perlu diperhatikan. Analisis data dapat menjadi acuan bagi startup dalam proses mengolah data mentah menjadi data yang dapat dipahami. Dimana dari hasil data tersebut dapat ditarik kesimpulan informasi atau sebagai langkah pengambilan keputusan. 6 Great Data Analytics Tools Seiring perkembangan teknologi, kini banyak jenis data analytics tools yang dapat membantu kamu dalam menganalisa data. Berikut 6 rekomendasi data analytics tools terbaik yang wajib kamu coba! *Analystics Graph* R & PythonPower BITableauGoogle Data StudioMicrosoft ExcelRapidMiner R & Python R & Python adalah bahasa pemrograman teratas yang digunakan dalam bidang Analisis Data. R adalah open source tools yang biasa digunakan untuk Statistik dan Analisis dataPython memiliki aneka library dengan fungsi analisis data, data pre-processing tools, machine learning dan visualisasi data. Power BI Analisis data dengan Power BI menjadi salah satu alternatif bagi kamu pemula yang baru terjun dalam dunia analisis data. Power BI memiliki tools yang lengkap untuk memvisualkan data bisnis. Tools ini mampu menggabungkan, menganalisis, memvisualisasikan, hingga menghasilkan data yang mudah dipahami. Tableau Tableau merupakan tools yang dapat menghubungkan data dari berbagai sumber. Hasil pengolahan data Tableau juga bermacam-macam, bisa berupa data visualisasi dalam bentuk bagan ataupun dashboard. Hasil pengolahan data tersebut juga dapat diperbarui secara real time. Google Data Studio Google Data Studio merupakan salah satu tools gratis yang disediakan google untuk membantu proses analisa data. Tidak hanya menampilkan visualisasi data yang menarik dan mudah dipahami, Google Data Studio mampu mengolah data dari berbagai sumber secara terpusat dan ditampilkan dalam bentuk dashboard. Microsoft Excel Excel menjadi salah satu tools yang sering digunakan karena penggunaannya yang cukup mudah dimengerti bagi pemula. Excel sangat cocok bagi kamu yang baru memulai perjalanan karir di bidang analisa data. RapidMiner RapidMiner adalah open-source tool dengan banyak kelebihan yang dapat digunakan untuk analisa data secara mendalam pada berbagai jenis bisnis startup ataupun company besar. Beberapa kelebihan lain dari RapidMiner adalah melakukan data tracking dan analytics secara real-time, menunjang transformasi dan data cleansing, mendukung integrasi pihak ketiga, dan adanya fitur keamanan yang superior. *Data Analytics* Data analytics is the future Analisis data menjadi salah satu tren penting yang harus diperhatikan oleh bisnis startup. Analisis data dapat membantu bisnis startup berjalan lebih efektif dan mampu meningkatkan brand awareness seperti startup yang sudah mempunyai nama besar Tokopedia, Shopee, Lazada, dan banyak lainnya. Yuk mulai belajar analisis data lebih lanjut untuk kamu yang ingin terjun di dunia analisa data dengan menggunakan Microsoft Excel. BuildWith Angga.

Kelas Roadmap Belajar ReactJS di BuildWith Angga

Roadmap Belajar ReactJS

ReactJS adalah Framework dari JavaScript yang deklaratif dan efisien untuk membangun antarmuka pengguna interaktif (UI) dengan kemudahan dan fleksibilitas yang lebih besar. ReactJS biasanya digunakan oleh web developer dalam membangun website yang lebih interactive, fast, dan responsive. Library ini sering digunakan untuk membuat Single Page Application (SPA). Mengapa Belajar ReactJS di 2022 Ini? Adapun alasan yang perlu kamu tahu mengapa sangat direkomendasikan untuk belajar ReactJS. 1) Populer dan High-Paying Alasan utama mempelajari ReactJS pada tahun 2022 ini adalah karena sedang populer dan memiliki average salary yang cukup tinggi . Seperti yang telah dibahas sebelumnya, ReactJS menawarkan banyak manfaat bagi para developer. Selain itu, ReactJS merupakan bahasa pemrograman yang populer untuk para pemula karena memiliki kurva belajar yang cukup mudah. Average salary ReactJS Developer Indonesia berdasarkan survey payscale.com Selain karena mudah diterapkan, banyak perusahaan yang sedang merekrut ReactJS Developer untuk proyek IT mereka. Faktanya, banyak raksasa perusahaan teknologi seperti Facebook, Instagram, Dropbox, Netflix, dan Drupal mengembangkan platform mereka menggunakan ReactJS. Maka dari itu, menjadikannya pekerjaan dengan average salary yang tinggi di tahun 2022. 2) Memiliki Performa Yang Tinggi Dalam Mengembangkan Aplikasi Selain menjadi framework Front-End yang populer, ReactJS juga mempromosikan Web Development dengan performa tinggi. Nah, bagaimana ReactJS memfasilitasi aplikasi agar memiliki performa tinggi? Jawabannya adalah - melalui penggunaan Virtual DOM ( Document Object Model ). Virtual DOM (Document Object Model) adalah aspek pemrograman Front-end yang diterapkan dalam ReactJS. Pertama, objek dummy divalidasi oleh React untuk memeriksa bagian UI. Jika aplikasi web berkinerja baik, React akan merender komponen utama. Jadi kamu dapat memeriksa antarmuka pengguna (UI) aplikasi web tanpa mengganggu DOM yang sebenarnya. 3) Flexible dan SEO Friendly Situs web yang SEO Friendly menjadi indikator penting dalam perkembangan bisnis yang kompetitif. Selain memiliki antarmuka pengguna (UI) yang interaktif, situs web kamu juga harus SEO Friendly. Terlebih jika kamu ingin mengembangkan bisnismu secara organik. Roadmap Belajar ReactJS Setelah kamu memahami terkait apa itu ReactJS dan alasan mengapa mempelajarinya, kamu perlu tahu alur belajar yang tepat. Tentu saja dengan mengetahui alur belajar yang tepat, akan membantu meminimalisir kesulitanmu ketika memulai belajar ReactJS. 1) Belajar UX Pada tahap pembuatan aplikasi/website, tentu saja kita harus mempelajari UX (User Experience). Tujuan dari mempelajari UX ini agar kita memiliki target audience yang jelas dan rancangan aplikasi yang detail. 2) Pelajari Design UI Karena output dari belajar ReactJS ini adalah membuat tampilan antarmuka/UI (User Interface) yang interaktif, maka kamu juga perlu mempelajari cara mendesign. Dalam mendesign, biasanya para developer menggunakan Figma untuk membuat design tampilan antarmuka/UI untuk website dan mobile apps. 3) Belajar Fundamental Web Development Setelah mampu menetapkan rancangan aplikasi, hal yang selanjutnya perlu kamu pahami adalah materi fundamental Web Development seperti HTML, CSS, dan JavaScript. 4) Mulai Belajar Dasar ReactJS Jika sudah cukup paham dan memiliki penguasaan materi yang baik terkait fundamental Web Development, kamu bisa mulai mencoba belajar dasar-dasar ReactJS. 5) Belajar Membuat CRUD CRUD adalah singkatan dari create, read, update, dan delete. Kegunaan dari pemrograman CRUD adalah untuk membaca, menyisipkan, memanipulasi, mengedit, dan menghapus data tabel. Peran CRUD sangat penting karena berkaitan dengan sistem informasi perusahaan. Bisnis yang melacak data seperti akun, informasi pembayaran, dan catatan lainnya membutuhkan sistem penyimpanan yang tahan lama. Ini biasanya diatur atau disimpan dalam database. 6) Mulai Membuat Project Pada pembuatan project ini, kamu akan belajar mengtransformasi dari Design di Figma ke bentuk code (tahap development) menggunakan React Native. Dengan adanya panduan Roadmap belajar ini, akan membantumu supaya belajar lebih konsisten dan terarah. Semoga artikel ini bermanfaat untuk kamu dan selamat belajar ya!😉🙌. BuildWith Angga

Kelas Konsep Web Yang Harus Kamu Pahami Sebelum Belajar ReactJS di BuildWith Angga

Konsep Web Yang Harus Kamu Pahami Sebelum Belajar ReactJS

Permintaan dalam mengembangkan aplikasi web kian hari semakin kompleks. Pasalnya, aplikasi web saat ini dapat berperan layaknya aplikasi native. Selaras dengan rumitnya permintaan, semakin canggih pula tools yang dapat kamu gunakan, khususnya dalam bidang pengembangan web. Salah satu tools yang dapat digunakan adalah ReactJS. ReactJS diciptakan oleh facebook yang saat ini adalah meta dan mulai dipublikasikan pada sejak tahun 2012. Penggunaan framework ReactJS lebih banyak dibanding framework lain berdasar stateofjs.com. Dengan ReactJS, kamu dapat membangun antarmuka pengguna (UI) javascript dengan pengalaman yang lebih baik. Hingga saat ini, menurut survey terbaik dari stateofjs.com , ReactJS menjadi library dengan pengguna terbanyak sejak 6 tahun belakangan ini. Maka tak heran, saat ini banyak sekali yang mulai tertarik belajar ReactJS. Namun, Sebelum memulai belajar ReactJS, ada beberapa konsep dasar web development yang perlu dikuasai. 1) Konsep HTML dan CSS Penting untuk memahami konsep HTML dan CSS terlebih dahulu. Kedua hal ini merupakan fondasi dari web development. Setidaknya kamu sudah bisa memahami bagaimana dan kapan untuk menggunakannya: Tag semantik HTMLCara styling elemen dengan CSS menggunakan inline styles, style yang dideklarasikan di head atau dalam file CSS terpisahModel Block ElementSet up page layout dengan float atau flexboxMenggunakan forms dan inputsMenginputkan gambar dengan tag tag dan background-image-property HTML dan CSS memang bagus untuk konten dan desain statis, tetapi bagaimana dengan pemrograman yang sebenarnya? Dengan demikian, kamu juga harus paham dengan konsep pemrograman dasar. Karena apa pun yang dapat dilakukan dengan React, kamu juga dapat melakukannya dengan JavaScript murni. React memudahkanmu untuk membuat alur kerja development dengan lebih cepat, konsisten, dan lebih dapat dipertahankan. 2) Konsep Dasar Pemrograman Penting untuk memahami konsep dasar pemrograman sebelum belajar bahasa pemrograman apapun. Konsep dasar yang perlu kamu pahami terlebih dahulu agar lebih memudahkan kedepannya: VariabelAssignment OperatorsMath OperatorsLogical operators && conditionalsTipe data dan Struktur (boolean, number, string, array, object, dll.)Loop (while, do while, for)Fungsi Masih banyak yang perlu dipahami selain konsep dasar yang telah disebutkan di atas. Setelah kamu memahami syntax pemrograman dasar baik itu dari bahasa pemrograman Javascript, Python, dan lainnya, kamu juga perlu terbiasa dengan memanipulasi Document Object Model (DOM). 3) Checklist Belajar Manipulasi DOM Memanipulasi DOM sangat penting dalam pengembangan website untuk meningkatkan interaktivitas dan kedinamisan. Memahami Window dan Document ObjectTransversing dan Modifying DOMListening di beberapa DOM events Setelah kamu terbiasa dengan sintaks JavaScript dasar, selanjutnya kamu bisa mempelajari JavaScript ES6. 4) ES6 Sintaks ES6 merupakan singkatan dari ECMAScript 6. ECMAScript 6 sendiri digunakan untuk memperkuat Javascript. Adapun sintaks yang perlu kamu pahami agar kodinganmu lebih efektif: Arrow FunctionsES6+ ClassesOperator SpreadArray dan Object DestructuringArray functions (map, filter, reduce, dll.)ES6 Imports and Exports 5) Konsep Pemrograman Tingkat Lanjut Dan setelah kamu cukup menguasai dan terbiasa dalam menggunakan ES6, kamu bisa mempelajari tiga komponen penting berikut ini: Dasar HTTPObject-Oriented ProgrammingPola desain populer seperti Modular, Singleton, Factory, Observer, State Pattern, dll. Setidaknya lima hal tersebut yang perlu kamu kuasai sebelum belajar ReactJS. Kami sarankan agar kamu mempelajari dasar-dasar yang telah disebutkan diatas agar tidak mengalami kesulitan saat belajar ReactJS. Apakah kamu sudah siap belajar ReactJS untuk memberikan impact besar pada Industri? Semoga artikel ini bermanfaat untuk kamu 😉 BuildWith Angga.

Kelas 5 Langkah Mudah Membuat Aplikasi Android di BuildWith Angga

5 Langkah Mudah Membuat Aplikasi Android

Meningkatnya penggunaan aplikasi Android, tidak luput dengan peningkatan pengguna smartphone beberapa tahun belakangan ini. Berdasarkan data dari Statista tahun 2020, pengguna smartphone meningkat sebanyak 89% Fungsionalitas yang dimiliki setiap aplikasi saat ini juga bermacam-macam sesuai dengan kebutuhan masing-masing sektor yang ada di Indonesia. Hampir semua sektor baik itu kesehatan, bisnis, keuangan, properti, dan lainnya berlomba-lomba membuat aplikasi untuk memudahkan pekerjaan. Dari pembuatan aplikasi ini juga meraup banyak keuntungan ketika sudah terpublikasi di App Store maupun Playstore. Maka tak heran, saat ini orang-orang mulai berlomba untuk membuat aplikasi Android karena profitnya yang cukup besar. Namun, dalam membuat aplikasi juga tidak mudah. Perlu melalui proses yang cukup kompleks agar aplikasi dapat bermanfaat untuk masyarakat dan diterima oleh market. 1) Menentukan Konsep Aplikasi Dalam menentukan konsep aplikasi juga butuh berdiskusi dengan tim. Sebelum memulai proses pengerjaan aplikasi, kamu harus menentukan aplikasi apa yang ingin kamu buat beserta tujuannya. Kira-kira digunakan untuk apakah aplikasimu ini? apa impactnya untuk masyarakat? solusi apa yang tercipta dengan adanya aplikasimu ini? target market seperti apa yang ingin dituju? bagaimana strategi marketingnya agar lebih mudah menggait user? Ide tersebut perlu kamu gambar untuk memberikan presentasi yang lebih solid, detail, dan luas. 2) Melakukan Research dan Membuat Wireframe Salah satu tahapan dalam pembuatan aplikasi yang tidak boleh terlewatkan adalah UX Research. Tahapan selanjutnya yang wajib dilakukan setelah menentukan konsep aplikasi adalah melakukan UX Research. Tujuan utama dilakukannya UX Research adalah mengenal calon pengguna, memahami kebutuhan pengguna, dan membangun fitur yang sangat dibutuhkan oleh pengguna. Pada proses UX Research ini, kamu bisa melakukan survey dengan memberikan beberapa poin pertanyaan untuk menambah insight dan data dari calon pengguna yang nantinya akan digunakan dalam pembuatan aplikasi. Membuat wireframe agar proses design dan visualisasi ide lebih terarah. Setelah mendapatkan semua data tersebut, kamu bisa memulai membuat wireframe. Wireframe adalah gambar rangka dengan fokus pada penataan konten dan fungsionalitas suatu screen aplikasi. Pada tahapan ini Designer harus memperhatikan kebutuhan user beserta user flow agar menciptakan UX yang baik. Bila wireframe dibangun dengan baik oleh sang Designer dan penyampaiannya kepada rekan lain (Stakeholder, Developer, UX Designer) berjalan lancar, proses pengembangan aplikasi tentunya menjadi lebih hemat uang dan waktu. 3) Membuat Front-End dan Back-End Aplikasi Front-End adalah design aplikasi yang nampak oleh pengguna. Fokus utama Front-End Developer berada di “sisi pengguna” yang berarti setiap bagian dari aplikasi dapat berinteraksi langsung dengan pengguna. Pekerjaan ini mencakup tata letak, warna, design hingga user behaviour. Back-End memerlukan pemahaman yang luas dalam beberapa bahasa pemrograman. Back-End adalah mesin (program) yang bekerja di dalam sebuah aplikasi yang berhubungan dengan server (contohnya pada situs atau cloud) dan database. Jadi, peran Back-End dalam suatu aplikasi adalah merancang alur aplikasi, mengatur keamanan aplikasi serta melakukan perancangan database. 4) Melakukan Testing Proses testing penting dilakukan untuk memastikan kelayakan penggunaan aplikasi. Testing merupakan contoh implementasi dari Quality Assurance. Salah satu tujuan dari testing yaitu untuk melakukan uji coba kelayakan produk aplikasi sebelum digunakan oleh pengguna. Pada proses ini, kamu akan menguji coba aplikasimu untuk melihat apakah Back-End berfungsi dengan baik terhadap Front-End (user interface) yang sudah dibuat. 5) Rilis Aplikasi Setelah melakukan testing kelayakan aplikasi, perilisan aplikasi bisa dilakukan. Setelah melalui proses uji coba kelayakan aplikasi, kamu sudah bisa mempublikasikan aplikasi buatanmu. Kamu dapat merilis aplikasi Android dengan beberapa cara. Biasanya, aplikasi dirilis melalui marketplace aplikasi seperti Google Playstore (untuk Android) dan App Store (untuk iOS), tetapi kamu juga dapat merilis aplikasi di situsmu sendiri atau dengan mengirimkan aplikasi langsung kepada pengguna. Tentu saja setelah tahap publikasi masih ada sejumlah langkah yang perlu dilakukan jika kamu ingin aplikasimu terus berkembang. Salah satu caranya adalah dengan melakukan update fitur aplikasi secara berkala. Dengan adanya update fitur, pengguna biasanya akan lebih loyal dalam menggunakan aplikasimu. Nah, apakah kamu sudah siap untuk membuat aplikasi Android buatanmu sendiri? semoga artikel ini bermanfaat dan bisa memberikan kamu gambaran terkait pembuatan aplikasi dengan baik ya!🙌😉

Kelas Lowongan Magang Junior Flutter Developer (WFA & Dibayar) di BuildWith Angga

Lowongan Magang Junior Flutter Developer (WFA & Dibayar)

Goals Sebagai Junior Flutter Developer, kamu akan lebih sering latihan slicing dari Figma ke Flutter yang telah disediakan oleh designer di BuildWith Angga. Hal ini sangat baik untuk meningkatkan keahlian kita sebagai UI engineer. Responsibilities Belajar dari kelas Premium untuk memperdalam keahlian Flutter DeveloperMelakukan slicing design-design di Figma ke bentuk mobile app (Flutter)Mempelajari tools terbaru yang terkait dari Flutter (belajar dan dibayar oleh BWA) Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSering menggunakan software Figma dan FlutterSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium Benefits Dipinjamkan MacBook Pro M1Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Untuk mengikuti program magang maka anda wajib menyelesaikan challenge sederhana dari kami, hal ini sebagai bentuk bahwa anda memang serius dengan program magang Junior Flutter Developer Download file Figma pada link shaynakit.com/details/moviez-streamingLakukan proses Slicing kedua halaman tersebut kepada projek FlutterUpload di repository Github anda secara publik How to Apply Siapkan Resume (CV) & Hasil test (berupa link GitHub public ) dengan rapihIsi subject email dengan Magang Jr. Flutter 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat.

Kelas Lowongan Magang Quality Assurance (WFA) di BuildWith Angga

Lowongan Magang Quality Assurance (WFA)

Goal Software Quality Assurance sangat dibutuhkan oleh kebanyakan Startup atau perusahaan besar, menjaga sistem berjalan dengan semestinya dan berkolaborasi dengan tim product dan developer yang membangun fitur tersebut. Responsibilities Melakukan uji coba setiap adanya fitur terbaruMemeriksa fitur-fitur lama apakah berjalan dengan baikMendokumentasikan hasil kerjaan dengan rapih Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 3Fresh graduate (kuliah) boleh applySudah 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 kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Membuat dokumentasi sederhana menggunakan Notion.so terkait 3 fitur yang tersedia pada website BuildWith Angga. Buatlah sebuah table dengan kolom URL, Goal, Criteria, Status (lihat contoh A) Simpan sebagai .PDF Untuk list Criteria, posisikan diri kamu sebagai pengguna website BuildWith Angga, kami ingin kamu menjadi kreatif, memikirkan kemungkinan apa saja yang bakalan terjadi pada setiap URL page terkait, buatlah minimal 3 Criteria pada setiap URL-nya. Contoh A URLFungsi/GoalCriteriaStatushttps://buildwithangga.com/bootcampMenampilkan beberapa Bootcamp yang tersedia di BWA sehingga student dapat melihat secara details dan mendaftar pada Bootcamp tersebutApakah student dapat melihat konten via mobile?SUCCESSApakah student dapat melihat details dari setiap Bootcamp?SUCCESSApakah student dapat melihat video trailer dari setiap Bootcamp?FAILED How to Apply Jika sudah menyelesaikan tugas sederhana di atas, waktunya untuk apply magang software quality assurance (wfa) di BuildWith Angga. Siapkan Resume (CV) & Hasil test dengan rapihIsi subject email dengan Magang SQA 2022/23Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 11 September dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami yaitu BuildWith Angga. Terima kasih.

Kelas QA Engineer: Karir Yang Cocok Untuk Wanita di Bidang IT di BuildWith Angga

QA Engineer: Karir Yang Cocok Untuk Wanita di Bidang IT

Hello People With The Spirit Of Learning!🙌 Salah satu pekerjaan dengan demand yang cukup tinggi di Indonesia 5 tahun kedepan adalah Software Quality Assurance. Hal ini karena di Indonesia sendiri sudah mulai banyak perusahaan Start-Up di bidang IT maupun non-IT yang mulai memproduksi software untuk melancarkan kebutuhan perusahaan mereka. Tiap perusahaan, pastinya memiliki tujuan agar software yang dibuat dapat bekerja secara optimal. Agar software dapat bekerja dengan optimal, maka diperlukan peran dari seorang QA Engineer. Quality Assurance (QA) merupakan seseorang yang bertanggung jawab untuk menyiapkan dan memastikan segala kebutuhan dari aplikasi yang dibangun oleh suatu perusahaan agar dapat bekerja dengan baik. Fokus utama pekerjaan ini ialah melakukan pengujian produk meliputi: fitur, elemen, visual dan fungsionalitas sistem, dan juga maintenance. Adapun beberapa tanggung jawab dari seorang QA Engineer yang perlu kamu ketahui, diantaranya : Merancang panduan untuk report dan data record.Merencanakan pengukuran kualitas terhadap produk dengan checklist.Mengevaluasi dan mengembangkan standar produk sesuai dengan prosedur QA/QC.Memastikan produk telah memenuhi kebutuhan dan permintaan user.Membuat laporan hasil dari pemantauan dan evaluasi mengenai kualitas produk source: unsplash Nah, setelah kamu mengetahui tanggung jawab dari seorang QA Engineer, lalu faktor apa sih yang membuat pekerjaan ini menjadi opsi karir yang cocok untuk wanita? . Perlu kamu ketahui, bahwa skillset yang dimiliki seorang QA Engineer antara lain sebagai berikut : Memiliki analytical thinking yang baikMemiliki kemampuan problem solving yang baikMampu bekerja sama dengan tim yang relevanDapat mengoperasikan tools testing source: Unsplash Dilihat dari skillset dan tanggung jawab seorang QA Engineer yang sudah disebutkan diatas, mereka tidak terlalu memerlukan pemahaman yang mendalam pada bahasa pemrograman tertentu. Namun, bagaimana proses pengujian yang dilakukan oleh seorang quality assurance? tugas mereka lebih kepada menguji dari sisi design, terutama user experience dan menguji fitur serta fungsional dari sistem. Namun ketika respon sistem salah, Quality Assurance bisa memasukkannya dalam daftar bug report. Pengujian sistem juga termasuk dalam pengujian back end. Dalam tahap ini, Quality Assurance melakukan pengujian terhadap API menggunakan tools bernama Postman API dimana rangkaian alurnya sudah dibuat oleh developer. Setelah sistem telah stabil, maka Quality Assurance akan membuat automation test. Dalam tahap ini, Quality assurance melakukan pengujian sistem dengan menggunakan beberapa tools tertentu dan melakukan koding. Namun, koding yang dilakukan oleh Quality Assurance hanya untuk menjalankan alur sistem. Hal inilah yang menjadi alasan Quality Assurance menjadi pilihan karir yang tepat untuk wanita yang ingin tetap berkarir di dunia IT namun tidak perlu memahami banyak bahasa pemrograman. Kelebihan lain nya ketika menjadi QA Engineer, pekerjaan ini bisa dilakukan secara hybrid maupun full-remote. Sangat cocok untuk wanita yang ingin bekerja di rumah ataupun untuk Ibu Rumah Tangga sekalipun. Mereka bisa multitasking untuk bekerja dan mengurus pekerjaan rumah. Untuk gaji seorang QA Engineer pertahun nya berada di kisaran Rp. 6.000.000/bulan atau Rp. 72.000.000/tahun. Nah, untuk kamu para wanita, sudah siap belum berkarir sebagai QA Engineer?. Jika masih bingung, kamu bisa bergabung di kelas Complete Beginner QA Engineer: E2E Testing With Cypress. Semoga artikel ini bermanfaat untuk kamu ya!🙌😉 BuildWith Angga

Kelas Alasan Mengapa Kamu Harus Belajar Bahasa Pemograman Dart di BuildWith Angga

Alasan Mengapa Kamu Harus Belajar Bahasa Pemograman Dart

Hello, People with the spirit of learning! Sebagai Mobile Developer, bahasa pemograman harus kamu kuasai dalam membuat mobile aplikasi. Artikel kali ini akan menjelaskan alasan mengapa kamu harus belajar Bahasa Pemograman Dart atau Dart Programming Language Sebelum menampilkan alasan kamu harus belajar Bahasa Pemograman Dart, artikel ini akan menjelaskan apa itu dart, dan sejarah mengenai bahasa pemograman Dart karena pepatah berkata ‘tak kenal maka tak sayang’. Yuk, mengenal Dart terlebih dahulu! Apa itu Dart? Dart adalah salah satu bahasa pemograman yang dikembangkan oleh Google (By: Lars Bark & Kasper Lund), dan merupakan bahasa pemograman pada platform Flutter. Bahasa pemograman Dart juga merupakan bahasa modern yang lengkap serta memiliki kemiripan dengan bahasa pemograman lain, seperti JavaScript/JS. By: Dart.dev Sejarah tentang Bahasa Pemograman Dart Bahasa pemograman Dart secara resmi diperkenalkan pada 10 Oktober 2011 dan versi pertama bahasa pemograman Dart yaitu versi 1.0 resmi dirilis pada 14 November 2013. Versi terbaru bahasa pemograman Dart adalah versi 2.13.0 yang dirilis pada 18 Mei, 2021. Tujuan Google membangun Dart adalah kebutuhan untuk membangun mobile aplikasi, front-end, back-end, loT. Alasan mengapa kamu harus belajar Dart 1. Bersifat Fleksibel Dart bersifat fleksibel dan dinamis, dapat dikompilasi ke dalam bahasa pemograman JavaScript dengan compiler yang disertakan di dalamnya, seperti kode x64 untuk perangkat seluler, JavaScript untuk browser web, dan executable untuk windows, Mac OS, dan Linux. By: Fireship 2. Mudah Dipelajari Bahasa Pemograman Dart mudah untuk kamu pemula yang ingin menjadi Developer, khususnya Flutter Developer karena Dart merupakan Bahasa pemograman Flutter. Dart mudah dipelajari karena memiliki kurva belajar yang pendek dan bahasa ini mendukung pengetikan yang longgar dan kuat. Dart juga terstruktur dengan baik, jika kamu sudah mengetahui C, Java, atau C# maka Dart akan sangat mudah kamu pelajari. 3. Bersifat Open Source Yang dimaksud Open Source dalam Dart, yaitu Dart tidak memerlukan lisensi apapun, atau siapa pun dapat mengunduh dan menggunakannya dari situs resminya secara gratis. 3. Memiliki Syntax yang Bersih dan Aman Pada bahasa pemograman Dart, syntax atau struktur kode bersifat sederhana, terstuktur dengan baik, dan bersifat familiar. Dart menggunakan C-Style syntax sehingga mekanismenya mirip dengan bahasa pemrograman C, Java, JavaScript, dan Swift. Bahasa pemograman Dart memiliki kemampuan untuk mengidentifikasi kesalahan saat kompilasi oleh karena itu, struktur kode Dart bersifat aman. By: Michael Thomsen 5. Kompiler Dart bersifat Cepat Dengan mengkompilasi kode selama proses pembuatan, developer juga dapat mencapai rendering UI yang lebih cepat di browser. Kompiler Dart juga memperingatkan developer tentang kesalahan yang ada sebelum kode berjalan. Selanjutnya, ini adalah beberapa perusahaan dan aplikasi yang menggunakan bahasa pemograman Dart: Nah, itu adalah beberapa alasan yang dapat meyakinkan diri kamu untuk belajar bahasa pemograman Dart. Masih bingung? Yuk, belajar bareng mentor berpengalaman mengenai Dart Programming, kamu bisa bergabung di kelas Dart Programming Untuk Persiapan Belajar Flutter Sampai bertemu di kelas, selamat bergabung dan selamat belajar! kelas rekomendasi: Dart Programming Untuk Persiapan Belajar Flutter BuildWith Angga.

Kelas Basic Flutter Developer: Menambahkan Theme Style di BuildWith Angga

Basic Flutter Developer: Menambahkan Theme Style

Hello, People with the spirit of learning! Pada artikel kali ini kita akan membahas cara menambahkan Theme Style pada Flutter. Sangat cocok untuk kamu pemula yang ingin menjadi Flutter Developer! Pada Flutter kita belajar cara mengatur jenis teks, warna teks, ukuran teks, dan ketebalan teks. Namun, kita hanya dapat mengatur teks tertentu saja, sehingga jika ingin menggunakan preset yang sama untuk di halaman atau route lain maka kita harus mengatur ulang preset tersebut. Oleh karena itu, kita kali ini akan belajar bagaimana cara menambahkan theme style agar dapat membagi preset tema yang sudah kita atur ke semua route aplikasi. Buka link Pub.dev Kita mulai dari searching Google fonts pada web pub.dev, copy paste dependencies google fonts pada halaman dart di bagian Pubspec.yaml, lalu save. Setelah itu, import material dan menambahkan import google fonts pada file baru di lib dart. 2. Menuliskan jenis warna teks, dan kode warna sesuai yang diinginkan. 3. Membuat Teks style pada Title. Pada title text style kita harus menuliskan font type, color, font weight, dan font size sesuai yang diinginkan lalu jangan lupa untuk save. 4. Membuat teks style pada subTitle Selanjutnya, pada bagian subTitle Text Style kita harus menuliskan font type, color, font weight, dan font size sesuai yang diinginkan lalu save. 5. Lakukan ulang cara ke empat untuk membuat text style yang lain, seperti membuat plan text style, desc text style, price text style, dan button text style. Nah, itu adalah tahap untuk membuat theme style yang akan mempermudah kamu dalam membuat sebuah projek mobile aplikasi. Kalau kamu ingin belajar lebih dalam mengenai basic flutter developer, kamu bisa bergabung di kelas Flutter Developer: Basic State Management. Silahkan bergabung dan selamat belajar! Kelas Rekomendasi: Flutter Developer: Basic State Management BuildWith Angga.

Kelas Best Database Tools for Developer di BuildWith Angga

Best Database Tools for Developer

Setiap Developer dalam melakukan pengembangan aplikasi pasti membutuhan sebuah tools untuk mempermudah mereka dalam hal mengatur data yang akan mereka gunakan. Apa saja tools tersebut ... Navicat Navicat pertama kali release ditahun 2002, saat itu Navicat hanya untuk DBMS MySQL dan hanya untuk system operation Windows. Saat ini Navicat sudah berada di version 16, yang dimana Navicat makin multiconnection development tool dan dapat digunakan bukan hanya di 1 Operation System, tapi dapat digunakan di Windows, macOS & Linux. Berikut adalah tampilan workspace dari Navicat : Navicat sendiri, sangat compatible untuk cloud database seperti Amazon RDS, Amazon Aurora, Amazon Redshift, Microsoft Azure, Oracle Cloud, Google Cloud & MongoDB Atlas. Features utama yang dimiliki Navicat antara lain adalah : Seamless Data MigrationDiversified Manipulation ToolEasy SQL/Query EditingIntelligent Database DesignerData Visualization ToolData Generation ToolSmart Schema AnalyzerMake Collaboration Easy Dan beberapa perusahaan besar didunia yang menggunakan Navicat antara lain yaitu Netflix, Microsoft, IKEA dan masih banyak lagi. Navicat adalah database tools yang berbayar 💰💰 alias (tidak gratis). tapi jika kita ingin gunakan yang seperti Navicat untuk version Free / Open Source nya. yaitu menggunakan DBeaver Community Version atau Beekeeper Studio. DBeaver Community DBeaver Community adalah sebuah Universal Database Tool yang free dan beberapa fiturnya hampir sama seperti Navicat. Jadi jika kita ingin menggunakan yang seperti Navicat tetapi free dan open source pilihannya hanya DBeaver ini. BeeKeeper Studio Beekeeper adalah sebuah Open Source SQL Editor and Database Manager, tapi fitur di BeeKeeper Studio tidak selengkap di Navicat & DBeaver. tapi jika kita suka Database Tools yang simple dan tidak terlalu kompleks dalam penggunaan, berarti pilihannya ya BeeKeeper ini. DataGrip Selain 3 hal di atas, ada 1 lagi yang sangat powerfull dan praktis. yaitu DataGrip. DataGrip sendiri ini adalah sebuah product yang dimiliki oleh Jetbrains. DataGrip adalah sebuah IDE Database yang dapat manage semua tipe database. DataGrip ini memang berbayar 💰💰 , tapi kita bisa mendapatkan ini secara premium tanpa bayar sedikitpun dengan menggunakan Github Education Pack. Lalu ada gak sih tool seperti ini pada VSCode ?? Jawabannya ada kok, 😁 Pada VSCode atau Visual Studio Code, kita dapat memiliki Database Tools seperti diatas pada editor kita. yaitu menggunakan extension yang di publish oleh cweijan. cweijan Oke sekarang kita sudah tau apa saja database tools yang terbaik untuk membantu kita dalam development. selanjutnya bagaimana kita mengetahui lebih dalam tentang terkait lingkup database, dbms, sql dan query - query nya ?? Kalian bisa ikuti dan bergabung pada kelas SQL for Beginners: Learn SQL using MySQL and Database Design. Pada kelas ini kita akan belajar banyak hal , antara lain : Memahami Database & Apa saja DBMS yang adaMemahami User Management, Backup & Restore pada DatabaseMemahami Field & Data Type pada DatabaseBelajar Membangun Database dengan banyaknya relasi antar tableBelajar Menggunakan Foreign Keys untuk relasi antar TableUpdate Kelas terkait Function, Constraint, Transaction & Locking Terima Kasih, Selamat Belajar ya :)

Kelas Cara Split Component di React JS di BuildWith Angga

Cara Split Component di React JS

Split Component? Kenapa harus di-split? Ok, ini berat kaitannya sama maintainable code dan performance. Penerus kodemu gak bakal betah liat 500++ line lebih hanya karena logic yang tidak reusable. Tidak reusable dalam artian, tidak pernah di refractor sama sekali! So Sad! Previous Article Kalau kalian pengikut saya yang setia, di article ini (React Props? Sebenarnya itu cuma state biasa) sebenarnya tanpa sadar kalian sudah belajar splitting component dimana saya memecah row perulangannya ke komponen yang lebih kecil. Real-world Study Case Ok mungkin sebagian dari kalian belum tau kalau saya punya side-hustle, nama aplikasi saya itu mejadokter. Ini bagian screenshot yang pernah saya refractor khususnya code splitting. Yang awalnya bisa sampai 2000 lines of code bisa saya pangkas jadi sekitar 700an, ok masih gak make-sense karna abis di-refractor tapi linesnya masih lewat 600an. Tapi gak kenapa, karena selain saya pangkas lines of codenya saya juga pecah logic yang berulang. Dan sebenernya komponen di halaman ini sama persis dengan di halaman detail/edit rekam medis, tapi somehow saya buat mereka beda komponen 😓. Nah setelah saya refractor dan lakukan proper code-splitting akhirnya mereka bisa pakai shared-reusable-component. Ingat, kalian gak bisa buat code clean at first place (ok mungkin bisa, saya gak mau takabur bilang kalian gak bisa) tapi pasti susah sekali di awal-awal buat se-clean itu. Gak Sabar Ngoding? Potongan kode RowEmployee.js Ok lanjut ke materi ya, kalian bisa buka code example di article sebelumnya. Buat penyegaran saya sertakan potongan kodenya diatas.  Tambahkan Proptypes import React from "react"; import PropTypes from "prop-types"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } RowEmployee.PropTypes = { name: PropTypes.string, dateJoin: PropTypes.string, }; Pada line 20 dan 21 kita bisa sebutkan semua propTypes yang ada pada komponen tersebut. Kita juga bisa assign si props name atau dateJoin tersebut nantinya akan memiliki tipe data apa, pada contoh tersebut karena sangat sederhana alhasil baru saya tunjukkan dengan tipe data string saja. Benefit Penambahan PropTypes Kita bisa melihat props yang tersedia pada komponen tersebut Kalian bisa ctrl+space untuk melihat props yang tersedia pada komponen tersebut, untuk membedakan yang mana props dan autocompletion yang lain, kalian bisa perhatikan pada icon kunci inggris di kolom autocompletenya Summary Ok dari semua penjelasan diatas baru sebutir contoh tentang split component, dengan memecah komponen menjadi kecil-kecil seperti itu kita bisa memaksimalkan komponen yang mana yang bisa kita gunakan di komponen lain juga (reusable component), tapi hati-hati dan rencanakan dengan baik karena bisa saja split komponen menjadi menyusahkan kalau kita salah dalam melakukan perencanaan.

Kelas React Props? Sebenarnya Itu Cuma State Biasa di BuildWith Angga

React Props? Sebenarnya Itu Cuma State Biasa

Apa sih props di react? Ngomongin props di react nggak jauh-jauh dari yang namanya components, baik smart-components atau komponen penyusun tampilan biasa. Pada dasarnya props memungkinkan kita memberikan hak akses pada state/variable di parent komponen supaya bisa di konsumsi oleh child komponen. Contoh sederhana {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Potongan kode di atas menunjukkan bahwa ada sebuah komponen react dengan nama <RowEmployee /> yang kita beri props dateJoindan name,jangan lupa kita sisipkan props key pada element di setiap kita melakukan perulangan Lanjut ngoding... 1.    Bahan Dasar function App() { const employees = [ { name: "Avriza Hakim", dateJoin: new Date(2021, 3, 19) }, { name: "Danny Bramantyo", dateJoin: new Date(2021, 8, 27) }, { name: "Angga Berdikari", dateJoin: new Date(2021, 0, 30) }, ]; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Aplikasi kepegawaian sangat cetar membahana!</p> <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>Nama Lengkap</div> <div>Tanggal Bergabung</div> </div> {employees.map((item) => { return ( <div key={item.dateJoin} style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{item.name}</div> <div>{JSON.stringify(item.dateJoin)}</div> </div> ); })} </header> </div> ); } Berikut potongan kode awal sebelum baris dari data employee kita pecah ke child komponen <RowEmployee />, pada line 5 ada sebuah variable menggunakan const yang berisi data employees, lanjut di line 29-39 adalah potongan kode yang harus kita improve menjadi child komponen dan akan kita lewati props 2.    Refractoring code Intinya refractoring code itu kita pecah komponen yang sering berulang-ulang sehingga kita bisa gunakan secara efisien, tentunya juga bisa memangkas line of code , mulai dengan membuat file baru dengan nama RowEmployee.js.  import React from "react"; export default function RowEmployee({ name, dateJoin }) { return ( <div style={{ display: "flex", justifyContent: "space-between", width: "50vw", }} > <div>{name}</div> <div>{JSON.stringify(dateJoin)}</div> </div> ); } Kita bisa cut line 29-39 (pada bagian bahan dasar) untuk kita paste di file RowEmployee.js di line 5 seperti potongan kode diatas. Lalu kita hapus props keynya karena yang di ulang bukan div ini melainkan komponen RowEmployee yang nanti kita pasang di file parentnya. Perhatikan pada line 3 kita juga menerima props dimana pada kasus ini langsung kita destructure si props ini menjadi name dan dateJoin  3.    Render <RowEmployee / > {employees.map((item) => { return ( <RowEmployee key={item.dateJoin} dateJoin={item.dateJoin} name={item.name} /> ); })} Dari baris div yang panjang tadi bisa kita gantikan dengan single line komponen <RowEmployee … dengan list props seperti potongan kode diatas, jangan lupa menambahkan props key karena reactjs butuh informasi ini untuk mengetahui item mana yang sedang diberlakukan perulangan. PRO TIPS Usahakan props pada child komponen seperti ini menjadi primitive variables, maksudnya bukan object dalam kata lain seperti, string, number dan semacamnya. Kenapa harus primitive variable, ini dampaknya ke performance, naturalnya setiap komponen sudah melakukan pengecekan pada setiap perubahan props, ketika kita lewatkan object pada props, kita harus melakukan pengecekan extra untuk menahan re-render pada semua komponen. Summary Sebenernya kita bisa lewatkan hampir apapun pada props, tapi ingat jangan sampai terjebak props ini dari siapa dan akan kemana. Jika ingin melewatkan state ke deep-nested komponen sebaiknya kamu belajar Redux atau state management lainnya

Kelas Flutter Insight: Top 7 Packages pada Flutter (Part-2) di BuildWith Angga

Flutter Insight: Top 7 Packages pada Flutter (Part-2)

Pada saat mengembangkan sebuah aplikasi menggunakan Flutter, maka akan ada banyak sekali jenis package yang dapat kita gunakan. Kita juga pernah membahas mengenai 5 packages lain yaitu pada Flutter Insight: Top 5 Package pada Flutter.  Dengan menggunakan package, proses pengembangan sebuah aplikasi dapat berjalan lebih mudah dan cepat. Pada tips kali ini kita akan membahas mengenai top 5 packages yang pastinya akan sangat membantu seorang Flutter Developer dalam mengembangkan aplikasi. 1. Flutter SVG Package yang pertama yaitu Flutter SVG. Dengan menggunakan package tersebut, kita dapat memuat sebuah icon dengan resolusi yang lebih baik jika dibandingkan dengan png. Selain itu, format SVG juga lebih ringan dibanding dengan png. 2. Google Sign In Flutter juga menyediakan sebuah package yang dapat memudahkan kita dalam menambahkan fitur sign in dengan menggunakan akun google. Selain itu, kita dapat menggunakan package ini pada platform iOS dan Android. 3. Video Player Package yang ketiga yaitu video player. Dengan menggunakan package ini, kita dapat memasukkan sebuah video yang dapat dijalankan pada aplikasi Flutter kita. 4. Pull to Refresh Sesuai namanya, packagePull to Refresh memungkinkan kita untuk memberikan kemudahan jika ingin menambahkan fitur refresh pada aplikasi kita. Jika ada sebuah update tertentu atau update pada aplikasi kita, fitur pull to refresh dapat memperlihatkan perubahan yang ada pada sekali pull. 5. Flutter Table Calendar Package yang terakhir yaitu Flutter table calendar. Dengan menggunakan package ini, kita dapat menambahkan fitur kalender pada aplikasi yang kita kembangkan. 6. Flutter Facebook Authentication Selain dapat menggunakan Google Sign In, Flutter juga memberikan kemudahan pada developer jika ingin menggunakan Facebook authentication. Sehingga user dapat login dengan menggunakan akun Facebook. 7. Flutter Just Audio Jika kita ingin menambahkan sebuah audio ke dalam aplikasi Flutter, kita dapat menggunakan package just audio dari Flutter ini. Nah, itu adalah 7 package yang dapat kita gunakan untuk membuat fitur di dalam aplikasi Flutter kita semakin menarik. Oiya, jika kita ingin belajar lebih dalam mengenai Flutter, kita bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar!

Kelas Konfigurasi Firebase Flutter pada iOS di BuildWith Angga

Konfigurasi Firebase Flutter pada iOS

Hello, people with the spirit of learning. Beberapa tahun terakhir ini Firebase mulai banyak dikenal dan digunakan oleh para developer termasuk di Indonesia. Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk mempercepat pekerjaan developer. Ada banyak sekali fitur-fitur yang dapat kita gunakan dalam Firebase. Pada tips kali ini, kita akan mempelajari bagaimana cara mengkonfigurasi Firebase. Untuk menggunakan Firebase dengan Flutter pada iOS, kita perlu untuk mengkonfigurasi proyek Flutter agar dapat menggunakan library FlutterFire dengan benar. Konfigurasi Dependencies Pertama-tama kita perlu menambahkan dependencies ke dalam file pubspec.yaml seperti pada contoh di bawah ini. dependencies: flutter: sdk: flutter cloud_firestore: ^1.0.0 firebase_auth: ^1.0.0 google_fonts: ^2.0.0 Membuat Projek Firebase 1. Kunjungi Website Firebase Console. 2. Pilih "Add Project" seperti pada gambar di atas. 3. Lalu masukkan nama projek sesuai dengan projek yang sedang kita kerjakan. 4. Jika ingin mengaktifkan google analytics pada projek Firebase, klik Continue. 5. All done! Sekarang tinggal pilih Create Project. Konfigurasi iOS Pada tampilan awal Firebase, maka akan terlihat beberapa pilihan app yang bisa kita gunakan seperti iOS, Android dan Web. Namun, karena pada tips kali ini kita akan melakukan konfigurasi iOS, maka cukup pilih icon iOS seperti pada gambar di atas. Untuk dapat mengetahui iOS bundle ID ikuti langkah-langkah di bawah ini: Buka XcodeBuka Terminal open ios/Runner.xcworkspace Sebelum mengetikkan kode di atas, pastikan direktori nya sudah pada direktori projek Flutter yang akan kita buat. Jika sudah, maka tampilannya akan seperti pada gambar di atas. Lalu, pilih Runner dan copy Bundle Identifier yang akan menjadi iOS bundle ID. Selanjutnya tinggal copy dan paste ID tersebut pada halaman sebelumnya. Lalu masukkan nickname sesuai dengan kebutuhan kita dan pilih Register app Selanjutnya download GoogleService-Info.plist  Tambahkan pada bagian Runner di dalam Xcode seperti pada gambar di atas. Lalu centang pilhan-pilihan seperti di atas.Langkah selanjutnya tinggal pilih next dan Continue to Console Selesai! Sekarang kita telah berhasil mengkonfigurasi Firebase ke dalam projek Flutter kita menggunakan iOS. Tunggu tips berikutnya dan kita akan membahas mengenai Konfigurasi di Android. Untuk temen-temen yang mau belajar lebih dalam mengenai Firebase pada Flutter, kita bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Flutter Tutorial: Tips Belajar Flutter Untuk Pemula di BuildWith Angga

Flutter Tutorial: Tips Belajar Flutter Untuk Pemula

Hello people with the spirit of learning! Flutter merupakan SDK yang dikembangkan oleh Google untuk membangun aplikasi Android, iOS, Website, dan Desktop dalam single codebase. Sejak pertama kali diluncurkannya, hingga saat ini Flutter sudah digunakan oleh berbagai perusahaan besar seperti Alibaba, Tencent, Ebay, Grab, dan masih banyak lainnya. Namun, banyak developer pemula yang masih kebingungan bagaimana cara belajar Flutter secara efisien. Pada artikel kali ini, saya akan membagikan tips kepada kalian bagaimana cara yang efisien untuk belajar flutter. Konsep OOP Hal yang pertama perlu kita pelajari untuk menjadi seorang Flutter Developer adalah Konsep Object Oriented Programming (OOP). Karena di dalam Flutter hampir semua Widgets menggunakan konsep OOP, sehingga mudah digunakan secara berulang kali. Basic Widgets Setelah kita paham konsep OOP, hal berikutnya yang perlu kita pelajari adalah Basic Widgets yang ada di dalam Flutter. Seperti AppBar, Container, Text, Image, BottomNavigationBar, dan widget-widget lainnya. Karena nantinya widget-widget tersebut akan sering kita gunakan saat membuat aplikasi menggunakan Flutter. Layouting Kemudian, setelah mempelajari basic widgets, hal yang berikutnya kita pelajari adalah bagaimana cara membuat layout yang baik pada Flutter. Menurut saya belajar layouting ini sangat penting dalam proses development aplikasi kita. Karena seringkali terdapat UI Design yang memiliki layout yang sulit diimplementasi, sehingga kita harus lebih kreatif dalam melakukan slicing layout pada aplikasi. State Management Hal berikutnya yang perlu dipelajari adalah State Management. Kita bisa belajar menggunakan berbagai API baik yang sederhana seperti setState pada Stateful Widget, ataupun Plugin State Management seperti Provider, BLoC, dan GetX. Dengan adanya State Management, data-data pada aplikasi kita dapat dikelola dengan baik. Consume API Yang terakhir adalah Consume API. Kita bisa menggunakan berbagai API yang disediakan secara global atau membuatnya sendiri dengan teknologi Backend seperti Firebase, Laravel ataupun Node Js. Dengan menggunakan Consume API, data yang ada pada aplikasi kita bisa lebih dinamis. Bagaimana? Apakah kalian sudah siap menjadi seorang Flutter Developer Profesional? Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian bisa mengikuti kelas Fullstack Laravel Flutter E-Commerce App. Pada kelas ini kita akan belajar membuat aplikasi menggunakan Flutter dan Laravel dengan studi kasus toko online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar dapat mencapai target pasar kita.

Kelas Flutter Tutorial: Menambahkan Icon SVG pada Flutter di BuildWith Angga

Flutter Tutorial: Menambahkan Icon SVG pada Flutter

Hello, people with the spirit of learning. Ketika kita sedang mengembangkan sebuah aplikasi akan ada banyak komponen di dalamnya untuk mendukung seluruh tampilan aplikasi tersebut. Mulai dari teks, icon, gambar, button dan masih banyak lagi komponen di dalamnya. Pada tutorial kali ini, kita akan belajar bersama-sama bagaimana caranya menambahkan Icon dengan format SVG pada projek Flutter kita. Mempersiapakan Komponen Download Icon Pertama-tama kita perlu mempersiapkan Icon yang ingin kita tambahkan pada projek kita. Flaticon merupakan salah satu platform yang memiliki banyak Icon yang dapat kita download secara gratis.  Kita bisa download Icon tersebut di link berikut:https://www.flaticon.com/free-sticker/woman_5046936?related_id=5046936 Lalu pilih SVG seperti contoh di atas. Nantinya Icon akan terunduh secara otomatis dan simpan file svg tersebut pada folder assets yang ada pada projek Flutter. 2. Menambahkan Package Flutter SVG Jika sudah berhasil mengunduh Icon di atas, maka selanjutnya kunjungi website Dart Packages pada link berikut: https://pub.dev/ Setelah itu search "flutter svg", dan pilih pilihan yang paling atas. Langkah selanjutnya, pilih installing menambahkan dependencies serta import flutter svg pada file pubspec.yaml yang ada dalam projek Flutter kita. flutter_svg: ^0.22.0 3. Mengubah Assets Step ketiga adalah mengubah assets pada file pubspec.yaml agar Icon yang akan kita tampilkan dapat ditampilkan pada projek Flutter. Kita dapat mengganti bagian assets ini seperti pada contoh di atas Proses Code Pada Flutter Tutorial kali ini, kita akan membuat tampilan seperti gambar di atas. Seluruh komponen yang diperlukan agar Icon SVG dapat ditampilkan sudah kita persiapkan pada step sebelumnya. Sekarang kita akan mengimplementasikan cara menambahkan Icon pada kodingan projek Flutter. Pada poin kedua Menambahkan Package Flutter SVG, kita telah menambahkan dependencies pada file pubspec.yaml, namun dibawahnya ada satu step lagi yang perlu kita lakukan, yaitu mengimport flutter_svg.dart, Oleh karena itu, langkah pertama adalah kita perlu mengimpor flutter_svg.dart pada file main.dart. import 'package:flutter_svg/flutter_svg.dart'; Menambahkan Teks pada main.dart import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), ], ), ), ), ); } } Hasil: 3. Menambahkan Icon SVG SvgPicture.asset( 'assets/woman.svg',), Hasil: Full Code import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), SvgPicture.asset( 'assets/woman.svg', ), ], ), ), ), ); } } Well done! Sekarang kita telah berhasil menambahkan Icon SVG pada projek Flutter kita. Nantikan tips-tips menarik yang lainnya yah! Ohya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas-kelas Flutter premium serta gratis yang ada di website Buildwith Angga. Disini, kita dapat memperdalam pengenalan kita terhadap Flutter serta membangun portofolio yang nantinya akan sangat berguna buat kita.  Selamat mencoba!

Kelas Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development di BuildWith Angga

Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development

Dalam dunia programming, sudah pasti kita tidak asing dengan yang namanya IDE. Integrated Development Environment (IDE) merupakan sebuah tools yang digunakan untuk memudahkan para developer dalam menuliskan kode untuk pengembangan perangkat lunak. Nah dalam tips kali ini, kita akan membahas keyboard shortcut yang akan mempercepat proses kita dalam pengembangan software. 1. Show All Shortcut Jika kita baru pertama kali menggunakan Visual Studio Code dan ingin mencari sebuah keyboard shortcut yang akan kita butuhkan, kita tinggal menekan Ctrl + K + S untuk pengguna Windows atau ⌘ + K + S untuk pengguna Mac. 2. Toggle Sidebar Pada saat proses koding, terkadang kita perlu untuk menutup sidebar agar kita dapat melihat tampilan layar kodingan kita terlihat lebih luas. Nah, agar proses tersebut dapat berjalan lebih cepat kita cukup menggunakan keyboard shortcut Ctrl + B untuk pengguna Windows atau ⌘ + B untuk pengguna Mac. 3. Toggle Build-in Terminal Terminal atau biasa dikenal sebagai command lines atau consoles memungkinkan user bisa mengetikkan perintah dalam bentuk teks dan memberikan instruksi pada komputer untuk mengerjakan tugas tertentu. Pada Visual Studio Code, kita dapat dengan cepat membuka terminal dengan menggunakan keyboard shortcut Ctrl + ` untuk pengguna Windows atau ^ + ` untuk pengguna Mac.  4. Trigger Suggest Terkadang saat kita sedang mengkoding sesuatu, kita mungkin kadang dapat sewaktu-waktu lupa opsi syntax yang akan kita gunakan. Visual studio code mempunyai keyboard shortcut yang dapat menjadi Code Assist atau bisa kita kenal dengan Trigger Suggest yang dapat membantu kita jika kita bingung atau lupa kode apa yang akan kita gunakan selanjutnya. Kita dapat menggunakan keyboard shortcut Ctrl + Space untuk pengguna Windows atau ^ + Space untuk pengguna Mac. 5. Tab Through Open Files Pada saat proses koding, kita seringkali perlu untuk membuka file-file lain untuk menambahkan, menghapus, ataupun mengedit kodingan kita yang sebelumnya. Pada Visual Studio Code, kita dapat dengan cepat membuka file-file yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + Tab untuk pengguna Windows atau ^ + Tab untuk pengguna Mac.  6. Toggle Comment a Line Saat kita ingin menambahkan pesan atau penjelasan pada kodingan kita, kita dapat menggunakan comment agar pesan tersebut tidak dieksekusi. Kita dapat menggunakan keyboard shortcut Ctrl + / untuk pengguna Windows atau ⌘ + / untuk pengguna Mac. 7. Select Word Keyboard shortcut select word dapat digunakan untuk memilih kata yang ingin kita edit ataupun hapus. Kita dapat dengan cepat memilih kata dengan menggunakan keyboard shortcut Ctrl + D untuk pengguna Windows atau ⌘ + D untuk pengguna Mac.  8. Quick Fix Kesalahan saat penulisan kodingan merupakan hal yang sangat wajar dan terkadang untuk memperbaiki hal tersebut akan membutuhkan waktu. Pada Visual Studio Code, kita dapat dengan cepat mengganti atau mengubah kodingan yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + . untuk pengguna Windows atau ⌘ + . untuk pengguna Mac. 9. Reopen Closed Editor Pada Visual Studio Code, kita dapat dengan cepat membuka kembali file-file yang sebelumnya sudah kita buka hanya dengan menggunakan keyboard shortcut Ctrl + Shift + T untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.   10.  Zoom Out and Zoom In Keyboard shortcut yang terakhir yaitu untuk mempermudah kita dalam memperbesar atau memperkecil tampilan layar kita atau zoom out dan zoom In. kita dapat menggunakan keyboard shortcut Ctrl + Shift untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.  Nah, itulah 10 Top Shortcut yang akan meningkatkan efisiensi ketika kita sedang mengembangkan software menggunakan Visual Studio Code. Semoga tips ini bermanfaat. 

Kelas Top 5 Most Used Widgets In Flutter di BuildWith Angga

Top 5 Most Used Widgets In Flutter

Hello people with the spirit of learning. Pada saat mengembangkan aplikasi menggunakan Flutter, kita akan selalu membutuhkan widget-widget untuk membangun aplikasi Flutter kita. Widget adalah komponen-komponen pendukung pada Flutter seperti Button, Text, Icon dan lain sebagainya. Semua yang berada pada tampilan aplikasi kita disebut dengan Widget. Dibawah ini kita akan membahas widget-widget yang paling sering dipakai pada Flutter. 1. Image Image.asset( 'assets/images.png', width: 267, height: 200, ), Image merupakan sebuah widget untuk menambahkan dan menampilkan gambar pada Flutter. Gambar sangat penting untuk setiap aplikasi. Gambar juga dapat memberikan informasi penting atau berfungsi sebagai alat bantu visual untuk meningkatkan estetika aplikasi kita. Contoh diatas merupakan kodingan untuk menampilkan gambar. 2. Text Text( 'Hello people with the spirit of learning', style: TextStyle( color: Color(0xff007DFF), fontSize: 26, fontWeight: FontWeight.bold, ), ), Pada saat membangun sebuah aplikasi, pasti akan membutuhkan banyak sekali text di dalamnya, karena Text merupakan bagian penting dalam UI aplikasi mobile manapun. Text pada Flutter juga dapat dimodifikasi mulai dari ukuran teks, ketebalan hingga jenis font yang ingin kita gunakan seperti pada contoh diatas.  3. AppBar AppBar( title: Text('AppBar Demo'), backgroundColor: Colors.blue, ), AppBar atau Application Bar adalah salah satu widget yang digunakan sebagai menu penunjuk atau dapat menampilkan beberapa navigasi dari aplikasi. Biasanya widget AppBar ini terletak pada bagian paling atas aplikasi seperti pada contoh gambar di atas. Kodingan di atas merupakan contoh kodingan untuk membuat sebuah AppBar.  4. Container Container( width: 370, height: 51, color: Colors.black, ), Pada saat slicing UI Design dengan Flutter, Container merupakan widget yang cukup akan sering kita gunakan. Widget container akan sangat membantu kita dalam menempatkan widget serta mengatur layout atau ukuran serta jarak antar Widget. Container memiliki properti-properti seperti padding, margin, border, border radius dan lain sebagainya. 5. Bottom Navigation Bar BottomNavigationBar( selectedItemColor: Color(0xff6A6AE3), items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Padding( padding: const EdgeInsets.only(top: 8.0, bottom: 15.0), child: Image.asset( 'assets/calls.png', width: 24, height: 24, ), ), label: 'Calls', ) ], ), Bottom Navigation Bar merupakan sebuah widget material yang dapat digunakan untuk membuat sebuah navigasi antar halaman yang ada pada sebuah aplikasi Flutter. Contohnya icon home pada gambar dibawah ini menunjukkan navigasi jika kita ingin masuk ke halaman home tersebut. Nah, itulah 5 widget Flutter yang akan sering kita gunakan pada saat kita ingin mengembangkan aplikasi kita. Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Mastering UI Design to Flutter: Jobs App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana proses Design to Code menggunakan Flutter.

Kelas Flutter Tutorial: Simple Notes App Using Provider di BuildWith Angga

Flutter Tutorial: Simple Notes App Using Provider

Hello people with the spirit of learning. Pada tips kali ini, kita akan belajar bagaimana mengimplementasikan State Management menggunakan provider pada Flutter. Untuk demo aplikasi, kalian dapat melihat pada video di bawah ini : Pada Flutter, ada beberapa jenis State Management selain Provider, seperti Bloc, Redux, GetIt dan lain sebagainya. Nah pada tips kali ini, kita akan langsung coba belajar untuk membuat aplikasi sederhana menggunakan Provider. So, let’s begin. Step 1: Install Package Provider Install provider di Provider Pacakage.Masukkan provider: ^5.0.0  pada pubspec.yaml pada depedencies Step 2: Menambahkan 2 Folder Baru Membuat folder models untuk memasukkan kelas Note dan NotesOperation yang berfungsi untuk membuat String dan membuat object note serta list note.Membuat folder screen untuk membuat tampilan notes dan tampilan notes ketika akan menambahkan note atau task baru. Source Code Step 3: Membuat File NotesOperation (User Model Folder) import 'package:flutter/cupertino.dart'; import 'package:task_manager/models/note.dart'; class NotesOperation with ChangeNotifier { //List of note List<Note> _notes = []; List<Note> get getNotes { return _notes; } NotesOperation() { addNewNote('First Note', 'First Note Description'); } void addNewNote(String title, String description) { //Note object Note note = Note(title, description); _notes.add(note); notifyListeners(); } } Kita perlu membuat file notes_operation.dart pada folder models yang telah kita buat pada step ke-2. Pada kelas NotesOperation mempunya list dengan tipe note di mana kita akan menyimpan semua data yang dibuat pengguna untuk menyimpan catatan ToDo List. Fungsi addNewNote berfungsi untuk menambahkan data ke List catatan Array. Step 4: Membuat File Note (User Model Folder) class Note { String title; String description; Note(this.title, this.description); } Selanjutnya, kita perlu membuat file note.dart pada folder models. Pada file note ini terdapat dua field String untuk menyimpan data, yaitu title, description serta sebuah constructor. Step 5: Membuat File Home Screen (Screen Folder) import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/note.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/add_screen.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blueGrey, floatingActionButton: FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => AddScreen(), ), ); }, child: Icon(Icons.add, size: 30, color: Colors.blueGrey), backgroundColor: Colors.white, ), appBar: AppBar( title: Text( 'Task Manager', style: TextStyle( fontSize: 25, fontWeight: FontWeight.bold, ), ), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Consumer<NotesOperation>( builder: (context, NotesOperation data, child) { return ListView.builder( itemCount: data.getNotes.length, itemBuilder: (context, index) { return NotesCard(data.getNotes[index]); }, ); }, ), ); } } class NotesCard extends StatelessWidget { final Note note; NotesCard(this.note); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(15), padding: EdgeInsets.all(15), height: 150, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( note.title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), SizedBox(height: 5), Text( note.description, style: TextStyle(fontSize: 17), ), ], ), ); } } File home_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. Step 6: Membuat File Main import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/home_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider<NotesOperation>( create: (context) => NotesOperation(), child: MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ), ); } } File main.dart ini perlu kita masukkan ke folder lib. Step 7: Membuat File Add Screen (Screen Folder) import 'package:flutter/material.dart';import 'package:provider/provider.dart';import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {String titleText;String descriptionText; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget { @override Widget build(BuildContext context) { String titleText; String descriptionText; return Scaffold( backgroundColor: Colors.blueGrey, appBar: AppBar( title: Text('Task Manager'), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Padding( padding: EdgeInsets.only( top: 15, left: 15, right: 15, bottom: 80, ), child: Column( children: [ TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Title', hintStyle: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), ), style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), onChanged: (value) { titleText = value; }, ), Expanded( child: TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter Description', hintStyle: TextStyle( fontSize: 18, color: Colors.white, ), ), style: TextStyle( fontSize: 18, color: Colors.white, ), onChanged: (value) { descriptionText = value; }, ), ), TextButton( onPressed: () { Provider.of<NotesOperation>(context, listen: false) .addNewNote(titleText, descriptionText); Navigator.pop(context); }, style: TextButton.styleFrom( padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10), backgroundColor: Colors.white, ), child: Text('Add Note', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blueGrey, )), ) ], ), ), ); } } File add_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. All done! Akhirnya kita dapat membuat sebuah aplikasi notes sederhana untuk dapat memasukkan task atau to-do list kita menggunakan provider.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar! File Github: Task Manager 

Kelas Testing Node Menggunakan Mocha Dan Chai di BuildWith Angga

Testing Node Menggunakan Mocha Dan Chai

Hello people with the spirit of learning! Node.js memiliki sejumlah package di npm yang mempermudah proses menulis kode testing. Dalam tutorial ini, kami menggunakan dua modul Node paling populer untuk pengujian: Mocha dan Chai . Mocha dan Chai dalam melakukan unit testing. Mocha merupakan framework untuk testing pada NodeJS, sedangkan Chai merupakan assertion library yang akan digunakan untuk mengetes kode. 1. Membuat aplikasi TODO Kita akan membuat sebuah aplikasi todo list dari data dummy dan kita akan membuat file dan folder berikut ini : app todo controller.js dummy.js router.js tests index.js package.json server.js npm init Untuk mengelola data todo list. Kita perlu membuat file “app/todo/dummy.js” yang berisi data berbentuk array object. Selanjutnya, melakukan npm init : npm init perintah npm init akan membuat 1 file dengan nama package.json Lalu, install express sebagai frameworknya dan body-parser : npm i express body-parser --save Lalu install beberapa dependency lainnya : npm i mocha chai chai-http nodemon --save-dev dan tambahkan scripts yang ada di file package.json "scripts": { "test": "mocha tests/*.js --exit", "dev": "nodemon ./server.js" }, perintah npm run test akan menjalan semua perintah testing yang ada di file tests project yang telah dibuat dan untuk perintah npm run dev untuk menjalan local development di komputer.  sekarang buka file “app/todo/dummy.js” dan ketikan kode berikut ini: const todos = [ { id: 1, text: 'Checkout kelas di buildwithangga', createdAt: new Date() }, { id: 2, text: 'Membaca Tips dibuildwithangga', createdAt: new Date() }, { id: 3, text: 'Belajar MERN Stack di buildwithangga', createdAt: new Date() }, { id: 3, text: 'Ibadah', createdAt: new Date() }, ]; module.exports = todos; sekarang buka file “app/todo/dummy.js” dan ketikan kode seperti gambar diatas.sekarang buka file “app/todo/controller.js” dan ketikan kode berikut ini: const todos = require('./dummy'); module.exports = { // get all todos getAllTodos: async (req, res) => { try { res.status(200).json({ message: "All the todos", todos }) } catch (error) { res.status(500).json({ message: "Internal server error" }) } }, // get single todo findTodo: async (req, res) => { const { id } = req.params try { const findTodo = todos.find(todo => todo.id === parseInt(id)); if (findTodo) { return res.status(200).json({ todo: findTodo, message: "A single todo", }); } return res.status(404).json({ message: "Todo not found", }); } catch (error) { res.status(500).json({ message: "Internal server error" }) } }, } Baris pertama kita import todo list dummy yang data nya akan kita gunakan.Method pertama, getAllTodos untuk mendapatkan semua data todo list dari data dummy dan mereturn data dengan status code HTTP 200.Method kedua, findTodo digunakan untuk mendapatkan satu data dan mereturn data dengan status code HTTP 200. Jika data tidak ditemukan, akan mereturn dengan status code HTTP 404. sekarang buka file “app/todo/router.js” dan ketikan kode berikut ini: const router = require("express").Router(); const { getAllTodos, findTodo } = require("./controller"); router.get("/", getAllTodos); router.get("/:id", findTodo); module.exports = router; sekarang buka file “server.js” dan ketikan kode berikut ini: const express = require('express'); const bodyParser = require('body-parser'); const todoRouter = require('./app/todo/router') const app = express(); const port = process.env.PORT || 4004; app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/todos', todoRouter); app.listen(port, () => { console.log(`Server started on port ${port}`); }); module.exports = app; sekarang kita sudah dapat lakukan uji coba todo list kita di komputer dengan menjalan perintah “npm run dev” lalu buka postman dan hasil nya akan seperti berikut ini: Endpoint get all todos Endpoint get single todo todo not found kita telah berhasil melakukan testing aplikasi todo list yang telah dibuat dengan menggunakan postman. sekarang kita akan mencoba membuat automated testingnya. 2. Membuat Unit Testing Aplikasi todo list kita telah berhasil dijalankan, tetapi kita perlu melakukan testing. Untuk memastikan dengan benar bahwa aplikasi yang kita buat sudah berjalan sesuai dengan apa yang kita harapkan dan mengurangi kemungkinan terjadinya bug dan error. Automated testing ditulis pada file tests/index.js, seperti berikut: const chai = require('chai'); const chaiHttp = require('chai-http'); const app = require('../server'); chai.use(chaiHttp); chai.should(); describe("Todos", () => { describe("GET /", () => { it("should get all todos", (done) => { chai.request(app) .get('/todos') .end((err, res) => { res.should.have.status(200); res.body.should.be.a('object'); done(); }); }); it("should get a single todo", (done) => { const id = 1; chai.request(app) .get(`/todos/${id}`) .end((err, res) => { res.should.have.status(200); res.body.should.be.a('object'); done(); }); }); it("should not get a single todo", (done) => { const id = 10; chai.request(app) .get(`/todos/${id}`) .end((err, res) => { res.should.have.status(404); done(); }); }); }); }); Pada line pertama file, kita mengimpor semua package yang diperlukan untuk menjalankan unit testing, kemudian kita mengonfigurasi chai untuk menggunakan package chai-http. Kita juga mengonfigurasi chai untuk menggunakan antarmuka should dengan menjalankan chai.should (). Setiap blok describe digunakan untuk mengelompokkan pengujian dengan akses yang lebih mudah dan pengaturan yang lebih baik.Pada blok it pertama, test yang menguji endpoint get(‘ /todos ‘) untuk mendapatkan semua data todo list, response harus memiliki status code 200 dan return harus berupa sebuah object.Lalu blok it kedua, adalah test untuk endpoint get(‘/todos/${id}’) untuk mendapatkan data tunggal todo yang di query melalui id todo dan response harus memiliki status code 200 dan return harus berupa sebuah object.Dan pada block it ketiga, masih test untuk endpoint get(‘/toods/${id}’) endpoint masih sama seperti it kedua tapi hanya berbeda response. Dengan asumsi jika data todo tidak ada, it response harus memiliki status code 404. Sekarang kita akan mencoba menjalan hasil dari testing kita dengan perintah “npm run test” bila benar maka hasilnya akan seperti berikut: Repository Selamat kita telah berhasil menyelesaikan “testing in node using mocha and chai”. oiya apabila kamu tertarik belajar lebih lanjut tentang Node JS kamu bisa join di Full Stack Javasctipt (MERN) . pada kelas tersebut kita akan membuat aplikasi booking hotel online. difokuskan kepada JavaScript (Full-Stack JavaScript Developer (MERN). M untuk MongoDB, E untuk ExpressJS, R untuk ReactJS, dan N untuk NodeJS. Kalian akan mempelajari semua hal tersebut pada kelas ini. Tapi bukan hanya sekedar ngoding aja namun kalian akan mulai dari bagian UI dan UX sehingga paham betul bagaimana caranya membangun suatu website yang memiliki better experience. Selamat mencoba dan selamat belajar!

Kelas Flutter Insight: Top 5 Package pada Flutter di BuildWith Angga

Flutter Insight: Top 5 Package pada Flutter

Hello people with the spirit of learning. Pada flutter, ada berbagai macam jenis package yang dapat mempermudah dan mempercepat proses kita dalam mengembangkan aplikasi. Semua package yang kita butuhkan dapat kita temukan di website Flutter Packages. Nah kali ini, kita akan membahas mengenai 5 package-package yang menarik untuk dapat kita gunakan. 1. Google Fonts Kita dapat mengakses packages Google Fonts dengan link berikut: Package Google Fonts Package Google Fonts ini berfungsi agar kita dapat menggunakan fonts dari Google Fonts agar tampilan teks menjadi lebih menarik. Ada berbagai macam pilihan fonts yang dapat kita pilih sesuai dengan style yang kita inginkan. 2. Email Validator Kita dapat mengakses packages Email Validator dengan link berikut: Email Validator Packages Package Email Validator ini dapat kita gunakan jika kita ingin membuat sebuah validasi pada form email yang telah kita buat seperti contoh pada gambar di atas. 3. Shimmer Kita dapat mengakses Packages Shimmer dengan link berikut: Shimmer Flutter Packages Package Shimmer ini dapat memberikan efek shimmer(berkilau) pada project yang sedang kita buat. Seperti jika sedang loading sesuatu, maka kita dapat menambahkan package ini ke dalamnya agar tampilannya lebih menarik dan hidup seperti terlihat pada contoh gambar di atas. 4. Slidable Kita dapat mengakses Packages Slidable dengan link berikut: Flutter Slidable Packages Package Slidable akan sangat berguna jika kita ingin membuat sebuah list item kita dapat memiliki menu tambahan seperti remove, share, archive dan lain sebagainya cukup dengan menggeser list item tersebut ke kanan atau ke kiri seperti contoh di atas. 5. Expandable Kita dapat mengakses Packages Expandable dengan link berikut: Flutter Expandable Packages Package Expandable dapat membuat widget kita diperluas dan diperkecil hanya dengan satu klik saja, sehingga hal tersebut akan menghemat ruang halaman yang kita buat. Nah, itu adalah 5 package yang dapat kita gunakan untuk membuat fitur di dalam aplikasi Flutter kita semakin menarik. Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar!

Kelas Membuat Form Sederhana Pada Flutter di BuildWith Angga

Membuat Form Sederhana Pada Flutter

Hello people with the spirit of learning. Pada pembahasan kali ini, kita akan membahas tentang bagaimana membuat form sederhana pada projek Flutter yang sedang kita buat dengan menggunakan widget TextFormField. Step 1: Menambahkan widget TextFormField TextFormField( decoration: InputDecoration( labelText: 'Name *', ), ), Menambahkan widget TextFormField paling dasar dengan cara seperti di atas. Ohya, untuk dapat melihat widget-widget pada Flutter, kalian bisa cek di Flutter Material Library ya.Jika sudah, tampilan form akan terlihat seperti gambar di atas. Step 2: Memberi border pada form TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Menambahkan widget enableborder: OutlineInputBorder pada widget TextFormField yang sudah dibuat.Jika sudah makan tampilan form akan terlihat seperti gambar di atas. Step 3: Menambahkan focusedborder TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Berbeda dengan enabledborder yang sudah kita buat di atas. Focusedborder berfungsi untuk memberikan border pada form jika border sedang di klik atau jika akan sedang diisi(aktif). Step 4: Menambahkan warna pada form TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Untuk lebih mempercantik tampilan form, kita juga dapat menambahkan warna dengan cara menambahkan fillcolor seperti contoh di atas yah. Oh ya! untuk menambahkan field form yang lain kamu tinggal menambahkan widget TextFormField lagi sesuai dengan step-step di atas. Complete Code: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 120, left: 24, right: 24), child: Center( child: Column( children: [ Text( 'Welcome Back', style: TextStyle(fontSize: 20), ), SizedBox(height: 20), Column( children: [ TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), ], ) ], ), ), ), ), ); } } Selesai! Sekarang kamu udah bisa nih membuat form pada projek Flutter mu. Oh iya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Membangun Web Berbasis SPA dengan Mudah Menggunakan VueJS di BuildWith Angga

Membangun Web Berbasis SPA dengan Mudah Menggunakan VueJS

Hello people with the spirit of learning! Tentunya sebagai web developer yang baik, kita harus belajar bagaimana membuat aplikasi yang baik dan menggunakan teknologi terbaru, salah satunya adalah aplikasi berbasis Single Page Apps (SPA). Namun banyaknya tools atau framework yang dapat kita gunakan, terkadang membuat kita sebagai developer menjadi bingung dan pusing, terlebih lagi kebanyakan dari tools yang digunakan memerlukan waktu untuk dapat kita pahami. Tentunya, tools atau framework yang mudah digunakan dan cepat dapat membantu kita dalam membuat aplikasi. Salah satunya adalah menggunakan framework VueJS. VueJS menjadi suatu solusi framework untuk teman-teman yang sedang membangun aplikasi website berbasis SPA. VueJS memudahkan kita untuk membuat aplikasi dengan konsep yang mudah dipahami oleh Developer, terutama teman-teman yang sudah menguasai HTML, CSS dan Javascript. VueJS pun menjadi salah satu framework yang ringan yang dapat kamu gunakan di browser-browser modern manapun, tentunya ini akan memudahkan kamu untuk menjangkau pengguna tanpa harus memikirkan apakah aplikasi kalian berjalan di browser tertentu atau tidak. Sebelum mempelajari tutorial ini, alangkah lebih baiknya jika kalian memahami terlebih dahulu dasar HTML, CSS dan Javascript. Kalian bisa pelajari materi-nya di kelas Starter BuildWith Angga yang dapat kamu kunjungi di tautan ini. Mempersiapkan Tools Sebelum kita dapat membuat aplikasi VueJS kita, langkah awal yang harus kita lakukan adalah mempersiapkan tools. Ada dua cara yang dapat kamu gunakan, menggunakan code editor online atau memasang tools di komputer masing-masing. Untuk tips kali ini, cara yang akan kita gunakan yaitu menggunakan code editor online untuk memudahkan teman-teman membuat aplikasi. Code Editor yang akan kita gunakan yaitu CodeSandbox. Memasang Framework VueJS Untuk dapat memasang framework VueJS di CodeSandbox, kalian dapat membuat Sandbox dengan menekan tombol Create Sandbox yang terletak di pojok kanan atas. Setelah itu, maka akan muncul halaman welcome. Kalian dapat klik tombol Create Sandbox untuk melanjutkan dan memilih framework Vue. Jika sudah, maka halaman Code Editor yang sudah terpasang VueJS dapat kamu gunakan. Yay! Memahami Struktur Project Dalam aplikasi VueJS, ada beberapa aturan dasar yang perlu kamu pahami, salah satunya adalah struktur direktori dari project VueJS. Struktur folder ini merupakan pondasi dasar dari aplikasi kalian, dan dapat dikustomisasi tergantung dari kebutuhan kalian. Komponen utama dari sebuah aplikasi VueJS adalah file main.js yang berisi inisialisasi aplikasi. Secara default, aplikasi VueJS berada di file App.vue Pada file App.vue, terdapat kode aplikasi kita yang dapat kita gunakan dalam membuat aplikasi. Setiap file Vue akan memiliki 3 struktur utama, yaitu template, script, dan style. Aplikasi yang kita buat pun dapat kita bagi lagi ke file yang berbeda dengan menggunakan components. Hal ini akan sangat membantu kalian terlebih jika kalian membuat aplikasi kompleks yang membutuhkan kode yang banyak, tentunya components ini akan membantu kalian. Contoh component yang dapat kamu gunakan pada project ini yaitu component HelloWorld Membuat Kalkulator Sederhana Tentunya teman-teman ingin tahu bagaimana cara membuat aplikasi pada VueJS. Pada kali ini kita akan mencoba membuat kalkulator sederhana, yang akan menghitung angka dari variable yang sudah kita tentukan sebelumnya. Berikut dibawah ini merupakan aplikasi yang akan kita buat. Pertama-tama, kalian dapat membuat components baru dengan membuat file baru pada folder components, lalu kalian beri nama Calculator.vue Lalu, pada file App.vue, ubah kode HelloWorld dan ganti menjadi Calculator, karena kita tidak membutuhkan component HelloWorld. Sebagai contoh lengkapnya, kalian dapat mereferensikan foto dibawah ini. Pada component Calculator, ketikkan kode dibawah ini. Kita akan bahas satu persatu setelah ini. Pada bagian ini, kita menginisialisasi variable pada component Calculator pada VueJS, agar dapat digunakan oleh aplikasi. Pada kasus kali ini, kita membuat 3 variable, yaitu a, b dan result. Pada bagian ini, kita membuat fungsi kalkulasi pada aplikasi kita, dengan nama fungsi calculate(). Untuk dapat mengakses variable, kita perlu menambahkan keyword this. Pada bagian ini, kita membuat tampilan interface untuk digunakan oleh pengguna. Kita dapat menggunakan tag layaknya di HTML, dengan beberapa tambahan fitur. Pada bagian input, kita tambahkan v-model agar data yang dimasukkan ke input secara otomatis akan masuk ke variable yang sudah kita tentukan. Kita tambahkan .number agar VueJS dapat membaca value tersebut sebagai number. Pada bagian tombol, kita tambahkan @click atau v-on:click untuk dapat memanggil fungsi calculate() yang sudah kita buat sebelumnya di bagian script. Pada bagian paragraph, kita akan memunculkan data result yang berisi hasil kalkulasi dari data a dan b dengan menggunakan {{ }} Viola! Maka aplikasi kalkulator sederhana kalian sudah selesai. Sangat mudah bukan? Tentunya aplikasi yang akan kalian buat akan lebih kompleks dari ini, dan tentunya akan banyak fitur yang kalian buat dalam aplikasi tersebut. Untuk teman-teman yang ingin mempelajari VueJS lebih lanjut, kalian dapat mengikuti kelas-kelas Starter dibawah ini: Vue JavaScript FrameworkNuxtJS Javascript Framework Dan untuk teman-teman yang tertarik untuk membuat aplikasi kompleks yang tentunya dapat kalian gunakan untuk membuat project, kalian dapat mengikuti rekomendasi kelas Premium dibawah ini, tentunya dengan studi kasus yang lengkap! Selamat Belajar! :) 

Kelas Mulai menggunakan redux pada ReactJS di BuildWith Angga

Mulai menggunakan redux pada ReactJS

Apa sih redux? Redux adalah salah satu state management yang sangat hype pada waktunya dan masih relevan sampai sekarang. Redux juga menawarkan tools untuk masing-masing browser contoh chrome redux devtools untuk memonitor keadaan state kita saat ini. Package middleware-nya juga sudah banyak di kembangkan gratis dan siap digunakan untuk memudahkan kita mengembangkan aplikasi yang kita sedang kerjakan. Kenapa redux? Kenapa enggak? Haha sebenarnya semua state management itu cuman tools, kita lah sebagai operator yang baik harus bisa memaksimalkan potensinya, tapi jujur aja redux didukung package middleware yang bertebaran di npm yang mana memudahkan kita untuk melakukan development seperti redux-thunk, redux-saga, redux-persist dan sebagainya. Kalau kita memilih context API dibanding redux bisa-bisa saja tapi untuk logic seperti thunk nanti kita butuh melakukan extra karena harus buat dari scratch. 1. Setup Redux Ada banyak contoh penerapan redux atau state management pada aplikasi nantinya, harapan saya kalian tidak terpaku pada contoh ini tapi berikut adalah penerapan best practice menurut saya, pada aplikasi ReactJS anda, mulai dengan menginstall: npm install redux react-redux Yang pasti kita akan menginstall redux dan react-redux sebagai jembatan untuk mengkomunikasikan react dengan redux state. Dua package ini saja sudah cukup untuk menjalankan redux di aplikasi ReactJS kita. Siapkan folder redux di dalam src/ Folder redux pada /src/ 2. File Store Buat file store.js pada folder redux [/src/redux/store.js] dan sematkan kode berikut: Pada contoh kali ini kita akan membahas redux sederhana yang hanya menyimpan state counter 3. Types Ada yang menyebut sebagai constants atau types dimana kita mendeklarasi setiap kegiatan yang akan terjadi pada reducer counter agar tidak ada salah sebut nama variable ketika digunakan. Maka sebaiknya kita buat 1 folder types pada redux [/src/redux/types] dan sebuah file baru dengan nama counter.js dengan kode berikut: Tidak ada yang terlalu istimewa dari kode diatas, kita hanya mengexport constanta dengan nama kegiatan tertentu. 4. Actions Pada folder ini kita harus setuju bahwa semua action atau kegiatan atau juga bisa disebut kejadian akan kita letakkan pada folder ini. Buat folder baru actions di dalam folder redux [/src/redux/actions/] dan buat sebuah file dengan nama counter.js Pada baris pertama kita import semua kegiatan yang kita miliki pada tipe kegiatan yang akan terjadi pada reducer counterPada baris 3-5 adalah sebuah arrow function dengan nama increment yang hanya mengirim sebuah object (dispatch) ke reducer kita dengan isian object seperti tertera pada line 4. Jika action kita cukup kompleks dan memiliki data yang akan dikirim, kita bisa sematkan sebagai kode snippet berikut: Abaikan langkah berikut jika kalian ingin melanjutkan reducer counter Pada baris 7-9 sama dengan baris function sebelumnya hanya beda kegiatan. 5. Reducer Pada folder ini dimana semua states kita tinggal, kita perlu membuat folder reducer [/src/redux/reducers/] dan file pertama yaitu index.js yang akan kita gunakan untuk indexing setiap reducer kita dan menggabungkan semua state yang kita miliki. Line pertama kita import combineReducers sebuah function dari package redux untuk menggabungkan object-object state yang kita miliki.Line 3 kita import counter dari file counter.jsLine 5 kita export secara default object yang sudah digabung menggunakan combineReducers. Jika kalian memiliki banyak reducers, inilah tempat yang pas untuk menggabungnya seperti contoh berikut: Abaikan jika kalian hanya ingin melanjutkan redux counter Nah sekarang kita buat reducer pertama kita dengan nama counter.js pada folder reducers [/src/redux/reducers/counter.js] Pada line pertama sama seperti pada file actions/counter.js dimana kita import semua kegiatan yang akan terjadi pada reducer counterBerikutnya pada line 3 kita buat sebuah variable dengan nama initialState yang mana isinya adalah sebuah object untuk menampung keadaan state dari reducer counter pada saat aplikasi pertama kali di loadPada line 7 kita buat function reducer kita yang mana function ini menerima arguments state yang akan di isi dengan initialState ketika pertama di load, dan argument kedua yaitu action, argument action ini akan berisi sesuai dengan object yang dikirim dari file [/src/redux/actions/counter.js] Contoh jika kita nanti panggil function increment ini pada logic aplikasi kita nanti, argument action nanti akan berisi sebuah object seperti berikut: { type: INCREMENT } Selanjutnya di line 8-15 kita buat logic pemisah setiap kegiatan dengan code switch dan di cek berdasarkan action.typePada line 9-10 kita deklarasikan setiap case/kejadian/kegiatan kita, kita bisa taruh logic penyimpanan state kita pada baris tersebut seperti melakukan mapping data, memfilter data, data penjumlahan dan sebagainya. Sangat saya merekomendasikan kalian untuk benar-benar paham dengan object pada javascript untuk melakukan pengolahan pada reducer ini. Saya sendiri sangat tersesat ketika belajar redux tanpa memahami basic-basic object sendiri.Pada line berikutnya kita bisa sisipkan case yang lain dan di akhiri dengan line 18 dimana kita export reducer kita agar bisa digunakan pada file [/src/redux/reducers/index.js] 6. Provider Kini reducer counter kita siap digunakan, kita bisa implementasi store kita dengan cara berikut: Perhatikan hanya kode-kode yang saya blokade diatas Pada line 7-8 kita butuh import Provider dari react-redux dan store data kita pada folder [redux/store/index.js]Langkah terakhir di file ini kita hanya butuh membungkus aplikasi kita paling luar dengan seperti pada line 12-14 dan jangan lupa sertakan props store pada component Provider diisi dengan store yang kita sudah siapkan diatas. 7. The App Kita akan membuat aplikasi yang sangat canggih dengan redux counter diatas yaitu aplikasi penjumlahan +1 dan pengurangan -1 Pada contoh artikel ini saya hanya pakai template create-react-app jadi tidak ada desain yang terlalu wah untuk layoutnya. Pada file App.js ini: Di line 3 kita import useSelector dan useDispatch dari react-reduxKita juga import tiap kegiatan yang kita butuhkan di line 5 yaitu increment dan decrement dari file [/src/redux/actions/counter.js]Pada line 8 kita buat variable baru dengan nama counter, lalu kita isi variable ini dengan cara panggil function useSelector dan kita sisipkan arrow function. Function callback tersebut menerima 1 argument yaitu state lalu pada bagian returnnya kita panggil state.counter atau state[namaReducer] jika memiliki reducer lainnyaLine 9 kita kan siapkan function dispatch untuk melakukan action nantinyaPerhatikan line 15-17, disana saya siapkan 2 button untuk menambah atau mengurangi state saat ini dan 1 text untuk menunjukkan keadaan state saat ini, pada setiap function kita beri event onClick dimana ketika kita click button tersebut akan menjalankan sebuah function dispatch dan kita sisipkan action yang sudah kita buat sebelumnya pada file [/src/redux/actions/counter.js] Jika kalian mengikuti dari awal dengan baik dan benar, paling tidak tampilannya akan seperti gambar di bawah. Akhir kata Redux sendiri hanya sebagai tools untuk mengelola state kita yang berada di layer berbeda, dan setiap perubahan harus dicatat pada actions. Pelajari lebih lanjut mengenai redux pada kelas Full-stack Javascript dengan stack MERN (Mongo, Express, ReactJS, Node).

Kelas Membuat Header Lebih Menarik Dengan Video Background di BuildWith Angga

Membuat Header Lebih Menarik Dengan Video Background

Hello people with the spirit of learning! Di tips ini kita akan coba membuat header menggunakan HTML dan CSS yang menarik dengan menambahkan video sebagai background dari header tersebut. Nah, header itu apa sih? Umumnya header adalah section paling atas yang berada pada halaman utama website. Header berisi navigation links, company logo, Call To Action (CTA) button dan company tagline & caption. Section header cukup penting untuk sebuah website. Dengan adanya header, user yang berkunjung ke dapat memberi informasi mengenai layanan atau tujuan apa yang dimiliki oleh company tersebut. Anggaplah header website sebagai halaman depan sebuah toko, maka orang yang melihat toko tersebut dapat melihat informasi singkat mengenai toko tersebut. Untuk melihat contoh section header menarik sekaligus ingin belajar membuatnya, bisa langsung cek saja di sini ya! Kalian bisa langsung download dan pakai component yang tersedia di Elements BuildWith Angga loh. Ayo langsung aja kita mulai cara membuat header lebih menarik dengan video background! STEP 1: Menyiapkan file HTML dan CSS Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan, Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> STEP 2: Menambahkan video sebagai background Pada file HTML, kita dapat membuat tag <section> di dalam <body> untuk setiap section yang nantinya akan dibuat. Pada header kali ini akan ada tiga section yaitu video, navigation bar dan hero. Pada step dua ini, kita akan membuat <section> untuk video background terlebih dahulu. Didalam <section> tersebut akan kita tambahkan tag <video> yang berfungsi melampirkan file video pada website. Tambahkan link video pada atribut "src" dalam tag <video> agar video dapat tampil di website. Untuk lebih jelasnya seperti berikut, <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> Kemudian berikan styling pada file style.css. Styling ini akan membuat video memiliki ukuran lebar dan panjang mengikuti perangkat. Untuk CSSnya seperti ini, /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } STEP 3: Membuat section navigation bar  Untuk membuat navigation bar, kita dapat menggunakan navigation bar component yang sudah disediakan oleh Bootstrap. Sebelum itu, kita buat dahulu tag <section> untuk meletakkan code component navigation bar. Di sini kita akan memilih navigation bar ini untuk kita copy dan paste ke dalam file index.html yang sudah dibuat. Copy dan paste code HTML navigation bar component tersebut kemudian kita ubah beberapa nilai classnya pada file index.html menjadi seperti berikut: <!-- Create navbar --> <section id="navbar"> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> Kemudian kita berikan styling pada style.css untuk merapikan tampilan navigation bar, /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } Nah untuk section navigation bar sudah selesai kita buat. Yeay! STEP 4: Membuat section hero Sebagai pelengkap header website, perlu adanya hero yang berisi CTA button serta informasi yang menjelaskan secara singkat mengenai website tersebut. Untuk membuat hero dapat menambahkan tag berikut pada index.html, <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> Kemudian kita beri styling pada style.css. Styling ini akan membuat hero berada ditengah layar kita serta bersifat responsif. /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } STEP 5: Menggunakan google font Jika dilihat dari CSS yang kita buat pada step 4 terdapat "font-family" dibeberapa CSS selector namun jika kita jalankan file index.html, font tersebut belum diterapkan. Hal ini karena kita belum melakukan import Google Font ke dalam projek kita. Ada dua font yang kita gunakan pada projek ini yaitu Poppins, Abhaya Libre dan Pacifico. Untuk menggunakan Google Font, dapat kita import font tersebut ke dalam projek kita. Ada dua cara melakukan import font kedalam sebuah projek, 1. Melakukan import ke dalam file style.css Setelah memilih font yang diinginkan, copy dan paste nilai @import pada bagian paling atas style.css, /* Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:[email protected];500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); 2. Melakukan import ke dalam file index.html Setelah memilih font yang diinginkan, copy dan paste tag <link> pada bagian <header> index.html diatas tag <link> style.css, <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Import Google Font --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> Nah selesai sudah cara membuat header dengan video background dengan hasil seperti ini: Untuk kode lengkapnya dapat dilihat disini ya, Index.html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> <!-- Create navbar --> <section> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> Style.css /* Import Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:[email protected];500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } Bagaimana? mudah bukan! Yuk kreasikan dengan kreativitasmu untuk membuat header yang lebih menarik lagi! Kalau kalian butuh membuat header dengan cepat dan menarik, langsung aja cek di Elements BuildWith Angga ya! Ada banyak component lain yang bisa kalian gunakan juga loh. Terima kasih!

Kelas Flutter Tutorial: Membuat Button Sederhana Pada Flutter di BuildWith Angga

Flutter Tutorial: Membuat Button Sederhana Pada Flutter

Hello people with the spirit of learning! Pada Flutter ada beberapa jenis button yang dapat kita gunakan seperti ElevatedButton, TextButton, OutlinedButton dan lain sebagainya. Nah kali ini, kita akan coba untuk membuat TextButton. Tapi, kalian bisa coba ikutin dulu tutorial sebelumnya Flutter Tutorial: Step by Step Import Icon ke Projek Flutter. Step 1: Menambahkan Widget TextButton TextButton( onPressed: () {}, child: Text( "Let's take a picture", ), ), Pertama-tama kita menambahkan widget TextButton dan kita tambahkan widget Teks seperti contoh di atas. Step pertama ini adalah langkah paling dasar dalam membuat TextButton. Step 2: Menambahkan warna pada button. TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", ), ), Setelah itu untuk lebih mempercantik tampilan button, kita perlu untuk menambahkan warna pada button dengan cara seperti di atas. Kamu juga bisa sesuaikan warna yang kamu mau yah! Cukup dengan mengganti kode pada Color(0xff+kode hex warna yang kamu inginkan). Step 3: Mengganti warna teks. TextButton( style: TextButton.styleFrom(backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengganti warna teks, kita hanya cukup menambahkan style pada widget teks yang sudah kita buat tadi. Kamu juga bisa sesuaikan dengan keinginan kamu dengan cara seperti di atas yah! Step 4: Mengatur ukuran button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengatur ukuran button, dapat kita tambahkan container seperti contoh di atas. Container juga dapat digunakan untuk mengatur bentuk dari button yang kita buat. Step 5: Menambahkan border radius pada button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), ), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), ), ), Untuk menambahkan border pada pinggir-pinggir button, kita dapat memberikan shape RoundedRectangleBorder dan menambahkan borderRadius sesuai dengan keinginan kita. Disini saya menggunakan ukuran radius 20. All done! Sekarang kamu udah bisa nih bikin button sederhana di projek Flutter-mu. Sekarang aku tantang kamu untuk modifikasi button ini sesuai dengan keinginan-mu. Boleh mengganti warna, atau mengganti teks dengan font dari google font agar tampilan button lebih menarik dengan mengikuti tutorial Menggunakan Google Fonts Pada Projek Flutter. Jangan lupa tag @buildwithangga kalo kamu uda berhasil mencoba. Good luck!

Kelas Cara Menjalankan Aplikasi Flutter Pada Real Device di BuildWith Angga

Cara Menjalankan Aplikasi Flutter Pada Real Device

Hello people with the spirit of learning! Selain melakukan testing pada emulator, dalam pengembangan aplikasi mobile juga diperlukan testing pada Real Device atau perangkat nyata. Supaya, kita bisa merasakan apa yang nantinya akan dirasakan oleh pengguna setelah aplikasi tersebut rilis. Pada artikel kali ini, kita akan belajar bagaimana cara menghubungkan aplikasi yang kita buat menggunakan Flutter pada Real Device. Step 1: Melakukan Pengaturan Pada Smartphone Kamu Hal pertama yang harus dilakukan adalah, melakukan pengaturan (Settings) pada smartphone yang ingin kamu gunakan. Caranya: 1. Pilih menu Settings atau Setelan pada smartphone kamu. 2. Pilih Additional Settings atau Setelan Tambahan. 3. Pilih Developer options. 0 4. Aktifkan USB debugging pada menu Debugging. Step 2: Membuka Project Flutter Setelah mengatur pengaturan pada smartphone kamu, langkah berikutnya adalah membuka project Flutter yang telah kamu buat. Misalnya disini project flutter yang digunakan diambil dari repository github https://github.com/rifqieh/fintech_pay. Step 3: Menjalankan Pada Real Device Langkah berikutnya adalah menjalankan aplikasi pada smartphone kamu. 1. Pertama-tama klik Run, kemudian pilih Start Debugging. 2. Kemudian pilih device yang ingin digunakan. Misalnya disini saya memilih Mi 9T Pro. 3. Tunggu sampai prosesnya selesai. Jika sudah selesai, tada!! hasilnya akan seperti gambar berikut: Bagaimana? mudah bukan! Jika kamu tertarik untuk mempelajari Flutter lebih lanjut, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

Kelas Flutter Tutorial: Step by Step Import Icon ke Projek Flutter di BuildWith Angga

Flutter Tutorial: Step by Step Import Icon ke Projek Flutter

Hello people with the spirit of learning! Banyak sekali nih hal-hal yang bisa kita lakukan untuk mempercantik tampilan aplikasi Flutter yang ingin kita buat. Nah, kali ini kita akan belajar gimana caranya menambahkan icon atau gambar agar aplikasi yang kita buat lebih menarik. Yuk langsung aja ikutin step-step di bawah ini yah! Step 1: Membuat folder aplikasi yang ingin kita buat pada Visual Studio Code. Siapkan folder project flutter terlebih dahulu.Jika sudah, tampilan awal folder akan seperti gambar di atas ini. Step 2: Menyiapkan Icon atau Gambar Kemudian, kita perlu menyiapkan gambar atau icon yang ingin kita import atau masukkan ke dalam projek Flutter yang sudah kita buat pada step pertama. Pada artikel kali ini, kita akan menggunakan icon camera seperti di atas ini. Step 3: Menambahkan folder assets pada project Flutter. Untuk dapat memasukkan gambar camera tersebut, kita perlu menambahkan folder bernama "assets" pada project Flutter yang sudah kita buat pada step pertama diatas. Jika sudah, struktur folder project kita akan menjadi seperti gambar di atas ini. Step 4: Memasukkan gambar atau icon ke dalam folder assets. Jika folder assets sudah ada, kita perlu untuk memasukan icon camera ke dalam folder assets. Jika sudah dimasukkan, maka struktur folder kita akan tampak seperti gambar di atas ini. Step 5: Edit file pubspec.yaml Untuk dapat mengenerate gambar assets yang sudah kita masukkan, kita perlu edit file pubspec.yaml dan di sesuaikan dengan directory assets gambar menjadi contoh gambar di atas ini. assets/camera_illustration.png atau cukup dengan mengganti dengan assets/ Step 6: Proses code. Jika step-step di atas sudah berhasil kita buat, maka langkah terakhir adalah proses koding. Untuk dapat memunculkan gambar pada aplikasi kita, kita dapat menggunakan widget Image.asset seperti contoh di bawah ini. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Padding( padding: EdgeInsets.only( top: 40, ), child: Center( child: Column( children: [ Text( 'Import Assets ke Project Flutter', style: TextStyle(fontSize: 20), ), SizedBox(height: 5), Image.asset( 'assets/camera_Illustration.png', height: 350, width: 350, ) ], ), ), ), ), ), ); } } Step 7: DONE! Jika sudah selesai, tampilan awal aplikasi kita akan menjadi seperti gambar di atas ini. Voila! Sekarang kita sudah bisa nih mempercantik tampilan aplikasi kita dan pastikan ngga ada step yang terlewat yah.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Kelas Menggunakan Google Fonts Pada Projek Flutter di BuildWith Angga

Menggunakan Google Fonts Pada Projek Flutter

Hello people with the spirit of learning! Fonts merupakan salah satu komponen yang dapat membuat tampilan aplikasi kita menjadi lebih menarik. Flutter menyediakan sebuah package bernama google_fonts yang dapat kita gunakan untuk melakukan kustomisasi fonts pada aplikasi yang sedang kita buat. Beberapa contoh fonts yang tersedia dalam google_fonts adalah: RobotoLatoPoppinsMontserrat Pada artikel kali ini, kita akan belajar bagaimana cara menggunakan package google_fonts dalam aplikasi yang sedang kita kembangkan menggunakan Flutter. Step 1: Menambahkan Google_Fonts Pada Dependencies Project Hal pertama yang harus kita dilakukan adalah menambahkan package google_fonts ke dalam project kita. Caranya: Kunjungi pub.dev, kemudian ketikkan "google_fonts" pada kolom pencarian package.Pilih package google_fonts.Pilih tab "Installing".Copy baris berikut: 5. Tambahkan pada file pubspec.yaml di project Flutter kita. Misalnya seperti ini: 6. Tekan shortcut save "command + s" untuk pengguna macOS atau "ctrl + s" untuk pengguna windows. Step 2: Menambahkan Widget Text Setelah menambahkan pada dependencies project, langkah berikutnya adalah menambahkan widget Text pada project kita. Kamu bisa copy code berikut dan paste kan pada file main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 3: Menambahkan Widget TextStyle Setelah menambahkan widget Text, langkah berikutnya adalah menambahkan properti style pada widget Text yang telah dibuat. Misalnya seperti ini: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: TextStyle( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 4: Menambahkan Style Dengan Google Fonts Untuk menggunakan package google_fonts, pertama-tama kita perlu melakukan import terlebih dahulu. Tambahkan code berikut sebelum fungsi main(): import 'package:google_fonts/google_fonts.dart'; Kemudian ubah widget TextStyle dengan widget GoogleFonts, dan pilihlah font family yang ingin digunakan. Apabila kamu ingin menggunakan font family Montserrat, kamu bisa menuliskannya seperti ini: import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: GoogleFonts.montserrat( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Sekarang coba bandingkan dengan versi sebelumnya: Bagaimana? mudah bukan! Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian dapat mengikuti rekomendasi kelas dibawah ini. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

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 Tips & Trick Jadi Programmer Handal Tanpa Kuliah di BuildWith Angga

Tips & Trick Jadi Programmer Handal Tanpa Kuliah

Seiring dengan perkembangan teknologi saat ini, programming skills menjadi kemampuan yang tinggi permintaannya di bidang industri. Programming skills ini membutuhkan pengetahuan khususnya pada Software dan Hardware. Walaupun membutuhkan kemampuan khusus, kamu bisa mempelajari skill ini tanpa menempuh pendidikan formal (tanpa gelar). Tugas Seorang Programmer Sebelum memutuskan untuk berkarir sebagai programmer, kamu perlu memahami jobdesc yang akan kamu jalani nantinya sebagai programmer. Programmer bertugas untuk mengembangkan, merancang, serta menguji dan memastikan kinerja sebuah software dari segi keamanan dan performa. Programmer dapat bekerja diberbagai macam sektor industri seperti game development, mobile applications, web development, UI/UX designer, dan lainnya. Skill Yang Dibutuhkan Untuk Menjadi Programmer Programmer biasanya berkolaborasi dengan developer dan designer lain untuk merancang konsep program/aplikasi yang hendak dibuat. Mereka sering melakukan iterasi dalam pengimplementasian design, pengembangan dan pengujian untuk mendapatkan feedback dari client guna meningkatkan kinerja software. Beberapa tugas yang mungkin menjadi tanggung jawab programmer dapat mencakup: Planning software: Kamu dapat menggunakan model dan flowchart untuk merincikan cara menulis kode.Design dan membuat aplikasi: Kamu dapat membuat aplikasi mobile atau bahkan sistem operasi yang kompleks. Menulis program: Kamu dapat menggunakan berbagai macam bahasa pemrograman untuk menulis program software. Selain Hardskill seperti mengetahui cara membuat kode, kamu juga akan mendapat menfaat dari memiliki programming skill, yaitu sebagai berikut: Critical ThinkingProblem SolvingAttention to detailLateral Thinking Cara Mendapatkan Programming Job Tanpa Kuliah Jika kamu baru memulai atau sudah memiliki latar belakang dalam pemrograman, berikut ini beberapa hal yang perlu disiapkan untuk mendapatkan Programming Job tanpa harus memiliki gelar: 1) Mulai Belajar Bahasa Pemrograman Langkah terbaik untuk memulai belajar pemrograman adalah mempelajari bahasanya terlebih dahulu. Kamu dapat mengambil sertifikasi pemrograman (online/offline), mengikuti webinar, membaca buku, dan mendengarkan podcast mengenai pemrograman. Beberapa bahasa pemrograman populer yang kami rekomendasikan untuk pemula adalah Python, JavaScript, Kotlin, dan Java. Masing-masing bahasa ini berguna dengan cara yang berbeda, seperti: JavaScript: Cocok dipelajari untuk Web developmentKotlin: Cocok dipelajari untuk Mobile DevelopmentJava: Cocok dipelajari untuk pemula sebagai fondasi dari semua bahasa pemrogramanPython: Cocok untuk di berbagai industri karena flexibilitas 2) Menguasai Paradigma Pemrograman Paradigma pemrograman adalah cara untuk mengklasifikasikan bahasa pemrograman berdasarkan fitur-fiturnya. Ada berbagai macam gaya pemrograman yang berbeda.Namun ada dua yang paling populer, yaitu berorientasi objek dan fungsional. Perbedaannya adalah: Object-Oriented Programming: Memperlakukan semuanya sebagai objekFunctional programming: Menekankan evaluasi fungsi 3) Terbiasa Dengan Tools Programming Programmer memiliki tools yang digunakan secara teratur baik dalam pekerjaan dan belajar. Jika kamu mampu memahami cara menggunakannya, hal ini akan memudahkanmu untuk mendapatkan pekerjaan sebagai programmer. Beberapa tools yang dapat kamu pelajari: Version control daily: Tools ini akan memudahkan programmer untuk berkomunikasi dan sharing satu sama lain.Open-source website: Tools ini akan memudahkanmu untuk meng-upload dan memanajemen kode. Command-line: Terminal yang memudahkanmu untuk berkomunikasi dengan sistem operasi. 4) Mencoba Berkontribusi Pada Open Source Project maupun Freelance Kamu dapat bergabung dengan situs web yang mendukung kontribusi open-source untuk programmer dan temukan project yang bisa kamu kontribusikan. Banyak perusahaan secara aktif mempekerjakan programmer dari kontributor open-source sehingga kamu bisa menunjukkan keterampilan kepada calon employer. Kamu juga dapat memulai sebagai pekerja Freelance. Jika kamu sudah cukup menguasai pemrograman, membaca dokumen, menggunakan tools yang ada, serta mampu mengukur peluang kerja Freelance dimana kamu dapat bekerja berdasarkan per project. Dengan begitu, kamu bisa menunjukkan kepada calon employer terkait kemampuan yang kamu miliki dan bisa menjadi bekal untuk membangun portofolio pekerjaan. Adapun beberapa platform yang kami rekomendasikan untuk Freelancer: UpworkFiverrPeopleperhour 5) Mulai Membangun Project Sendiri Selain berkontribusi pada project lain, Kamu juga dapat mulai membangun softwaremu sendiri. Misalnya, Kamu dapat membuat website yang digunakan untuk memudahkan transaksi jual beli seperti e-commerce, membuat website streaming film seperti Netflix, membuat website platform untuk Freelancer, dan masih banyak lagi project yang bisa kamu coba. Dengan membangun sesuatu yang membantu perusahaan meningkatkan produktivitas, makan dapat meningkatkan peluangmu untuk direkrut oleh calon employer. Tentu saja selain tips yang telah disebutkan diatas, yang tidak kalah penting adalah niat dan komitmen. Saat kamu telah memutuskan untuk berkarir sebagai programmer, pastikan kamu selalu update dengan ilmu terbaru ya! karena teknologi akan terus berkembang 😉🙌 . BuildWith Angga

Kelas Waktu Yang Tepat Untuk Memutuskan Untuk Menjadi Freelancer di BuildWith Angga

Waktu Yang Tepat Untuk Memutuskan Untuk Menjadi Freelancer

Saya sering mendapatkan pertanyaan terkait kapan sih waktu yang tepat untuk kita berkari sebagai seorang Freelancer? well jawabannya adalah secepat mungkin, mengapa demikian? cek beberapa alasan berikut. The New Freedom Ketika kamu jadi seorang Freelancer maka kamu akan mendapatkan beberapa kebebasan yang tidak didapatkan oleh mereka pekerja kantoran (full-time), yaitu adalah: Bebas dalam memilih waktu kerja, siang atau malamBebas untuk mengerjakan projek apa saja, ini cocok untuk mental healthDan juga bebas untuk menentukan harga dari value yang kita berikan kepada klien Oleh karena itu, jika kamu memang memiliki komitmen yang tinggi untuk memulai menjadi seorang Freelancer, lakukan saat ini juga, dengan konsisten dan penuh kesabaran. Sebelum Kamu Memutuskan Untuk Jadi Freelancer Ada beberapa persiapan penting yang perlu kita lakukan sebelum terjun payung menjadi seorang Freelancer, hindari beberapa kesalahan terbesar saya sehingga kamu bisa lebih cepat dalam mengejar kesuksesan berkarir sebagai Freelancer. 1) Simpan Uang Untuk 1 Tahun Penting untuk memiliki emergency fund sebelum memutuskan untuk jadi Freelancer, karena kehidupan Freelancer pemula itu tidak sebaik dibandingkan mereka yang sudah punya long-term client/project. 1 tahun adalah waktu yang cukup untuk kita berjuang dalam membangun personal branding dan mengasah skills kita untuk mendapatkan klien pertama yang mungkin akan menjadi seorang klien jangka panjang. 2) Perdalam Bahasa Inggris, Wajib! Jika ingin mendapatkan biaya projek yang cukup besar maka target pasar kamu adalah orang-orang dari luar Indonesia, mereka berani membayar kita lebih mahal karena bagi mereka nilai tersebut cukup adil di negara mereka (efek dari nilai mata uang kita lebih rendah). Misalnya diminta untuk mengerjakan projek website design untuk pemesanan tiket pesawat, mungkin projek dengan harga Rp 100.000.000 terasa lebih kecil bagi mereka yang tinggal di negara Amerika, dan untuk kita yang tinggal di Indonesia maka nilai tersebut cukup besar. Bahasa Inggris juga membantu kita untuk berkomunikasi dengan mereka sehingga projek yang dikerjakan akan lebih cepat selesai dan meminimalisir kesalahan yang dapat merugikan kita dari segi tenaga, waktu dan juga reputasi. 3) Baca Buku Tentang Marketing & Business Saingan di luar sana cukup banyak, dari India yang lebih terkenal. Mereka jago sekali ketika menulis copywriting, menentukan harga, dan juga menyampaikan ide-ide yang terkait pada projek Freelance tersebut. Jika kita belum ada modal untuk membeli buku, pelajari beberapa hal tersebut di Medium karena sudah tersedia jutaan artikel terkait hal marketing dan juga business yang dapat kita pelajari dan praktekkan untuk meningkatkan karir kita sebagai Freelancer. Kesuksesan Dibangun Dari Persiapan Yang Baik dan Kesempatan Yang Ada Kesempatan saja tidak cukup, oleh karena itu kita perlu menyiapkan diri kita lebih baik lagi dengan fokus kepada 3 hal di atas. Well, semoga bisa bermanfaat dan bila ada pertanyaan terkait Freelancer boleh DM aja melalui Instagram BuildWith Angga.

Kelas Kesempatan Internship Sebagai Developer di 10 Perusahaan di BuildWith Angga

Kesempatan Internship Sebagai Developer di 10 Perusahaan

Ingin mendapatkan pengalaman kerja sebelum lulus? Internship solusinya. Dengan mengikuti internship kamu akan mendapatkan keterampilan dan pengalaman dalam lingkungan kerja secara langsung. Berikut telah kami kumpulkan 10 perusahaan yang saat ini sedang membuka program internship sebagai Developer sehingga kamu tidak perlu repot mencarinya di internet. 1. OCBC NISP Developer Internship Program NEON (iOS Engineer) Jakarta Ingin mencoba rasanya bekerja di bank? OCBC NISP merupakan salah satu bank swasta di Indonesia. OCBC NISP sedang menyelenggarakan program internship untuk iOS Engineer. Siap untuk bergabung? Link pendaftaran: https://www.linkedin.com/jobs/view/2946209881 2. ShopeePay Software Engineer Intern (Jakarta) Sudah tidak asing lagi bukan dengan ShopeePay? Apa kamu termasuk salah satu penggunanya? Saat ini, ShoopePay sedang membuka intern untuk posisi Software Engineer di Jakarta. Yuk buruan daftar! Link pendaftaran: https://boards.greenhouse.io/shopee/jobs/5701353002?gh_src=3175716a2us 3. OY! Indonesia Full-time Software Engineering Intern (Jakarta) Aplikasi finansial yang memungkinkan transfer antar bank dan lain sebagainya, OY, sedang membuka lowongan intrenship sebagai Software Engineer. Segera daftar untuk bekerja di kantornya yang berada di Jakarta. Link pendaftaran: https://www.kalibrr.com/c/oy-indonesia/jobs/160604/software-engineering-intern 4.Fintax 6 Months Backend Engineer Intern Pernah mendengar Fintax? Fintax merupakan mitra resmi Otoritas Pajak Indonesia (Direktorat Jenderal Pajak). Rasakan pengalaman internship selama 6 bulan sebagai Backend Engineer di perusahan yang bergerak dalam bidang pajak dengan mendaftar di Fintax. Link pendaftaran: https://www.kalibrr.com/id-ID/c/pt-fintek-integrasi-digital/jobs/197257/backend-engineer-intern 5. Pegipegi Frontend Engineer Intern (Jakarta) Saat ini, Pegipegi sedang membuka kesempatan intern sebagai Frontend Engineer di Jakarta. Pegipegi merupakan platform yang menangani booking hotel, pembelian tiket pesawat dan lain sebagainya. Langsung aja daftar di link di bawah ini ya! Link pendaftaran: https://ptgold.darwinbox.com/ms/candidate/careers/a622f1db975ad0 6. UR (PT. Rahmat Tuhan Lestari) Internship Flutter Developer (Bandung) Kali ini, kabar baik datang dari Bandung. Untuk kamu yanng berlokasi di Bandung dan sekitarnya, saat ini PT Rahmat Tuhan Lestari sedang membuka lowongan internship. Yuk segera daftar! Link pendaftaran: https://glints.com/opportunities/jobs/mobile-app-developer-flutter-intern/5e2bd768-28bd-49d0-86f9-51337652ee3e  7. Widya Analytic Software Engineer Paid Intern (Yogyakarta) Perusahaan Widya Analytic berfokus pada Big Data dan Artificial Intelligence. Jika kamu tertarik, kamu bisa bergabung sebagai intern software engineer disini. Ohya, ini merupakan program internship berbayar loh! Link pendaftaran: https://glints.com/opportunities/jobs/software-engineer-paid-intern/746273c1-b6b8-475f-bdbf-57b39ff1c7b0 8. Doku Software Engineer Intern (Jakarta) DOKU yang sebelumnya bernama PT. Nusa Satu Inti Artha dikenal sebagai perusahaan penyedia layanan pembayaran elektronik dan manajemen resiko pertama di Indonesia. Bergabung sebagai intern Software Engineer di DOKU dengan mendaftar pada link di bawah ini ya! Link pendaftaran: https://glints.com/opportunities/jobs/software-engineer-intern/d5654db7-8b7a-4274-83b8-5fb14951e862 9. Ninja Van Software Engineer Intern (Jakarta) Ninja Van adalah perusahaan logistik yang telah berkembang pesat menjadi salah satu perusahaan logistik terbesar dan tercepat di Asia Tenggara. Program internship yang dibuka pada saat ini ialah untuk posisi Software Engineer. Link pendaftaran: https://jobs.lever.co/ninjavan/dbf2946a-1d8e-4907-b495-6bfaa039308a 10. PT. Venturo Pro Indonesia Mobile Programmer Internship (Malang) Yuk segera daftar untuk mendapatkan kesempatan internship sebelum program-program tersebut ditutup. Ohya, kamu dapat membekali diri dengan mengikuti kelas kami sebelum memutuskan mendaftar intern agar kamu lebih siap dan percaya diri. Semoga bermanfaat dan sukses selalu yaa!

Kelas Lowongan Pekerjaan Khusus Golang Developer di BuildWith Angga

Lowongan Pekerjaan Khusus Golang Developer

Golang merupakan slaah satu bahasa pemrograman yang cukup populer belakangan ini. Pada kesempatan kali ini, kami akan membagikan informasi lowongan pekerjaan khusus untuk kamu yang mendalami pengembangan aplikasi dengan menggunakan Golang. 1. RebelWorks Full-time Jakarta RebelWorks merupakan perusahaan penyedia layanan pengembangan web dan aplikasi yang dimaksudkan untuk menawarkan konsultasi penelitian pemrograman untuk kepentingan bisnis. Berminat bergabung sebagai golang developer di perusahaan ini? Langsung aja klik link di bawah ini ya! Link pendaftaran : https://glints.com/opportunities/jobs/golang-developer/12312109-733a-4de1-97e5-9be5c8a3f689 2. Kiddo.id Kiddo.id adalah marketplace aktivitas anak yang menyediakan fitur tes, pemantauan, dan stimulasi bagi orang tua untuk memaksimalkan pertumbuhan dan potensi anak-anak mereka sedini mungkin. Saat ini Kiddo.id sedang mencari Full-time Golang Developer untuk bekerja di Jakarta. Link Pendaftaran: https://glints.com/opportunities/jobs/junior-golang-developer/6a75e5a6-fb8f-4437-83e6-d6e19b418352 3. Senja Full-time Jakarta / Remote Jika kamu sedang mencari lowongan pekerjaan Golang Developer yang memungkinkan untuk bekerja secara remote, Senja adalah solusinya. Perusahaan ini sudah lebih dari 7 tahun berfokus pada layanan teknologi seperti pembuatan web dan aplikasi mobile. Link pendaftaran: https://glints.com/opportunities/jobs/golang-developer/3c1ff540-4ca4-48bb-81d7-707b8986be4f 4. Gits.id Full-time Bandung / Remote Untuk kamu yang tinggal di Bandung dan sekitarnya, kamu bisa mencoba melamar posisi Golang Developer di Gits.id. Ini merupakan perusahaan yang bergerak pada bidang digital agensi, khususnya adalah konsultasi IT. Link pendaftaran: https://gits.id/job-vacancy/golang-developer-bandung/ 5. Celerates Full-time Jakarta est: IDR6,000,000 - 12,000,000/month Celerates sedang membuka kesempatan untuk kamu yang ingin berkarir sebagai Golang Developer, dengan menawarkan salary 6 sampai 12 juta per bulan. Sama seperti beberapa perusahaan yang sudah disebutkan tadi, celerates juga merupakan perusahana penyedia layanan teknologi. Link pendaftaran: https://glints.com/opportunities/jobs/golang-developer/347d8a47-1464-4a94-b842-1de7ae1c4f7d 6. Mitrais Full-time Mitras sudah lebih dari 30 tahun berkembang sebagai perusahaan pengembangan perangkat lunak. Bergabung bersama Mitras sebagai Golang Developer untuk bekerja secara remote dari mana saja dengan mendaftar pada link yang sudah disediakan. Link pendaftaran: https://apply.mitrais.com/jobs/72 7. Lawencon Full-time Jakarta Lawenson adalah perusahaan dengan layanan penyedia solusi IT untuk kebutuhan dan tantangan bisnis seperi ERP dan lain sebagainya. Lawenson sedang mencari Golang Developer untuk bergabung bersama tim developernya. Link pendaftaran: https://www.karir.com/opportunities/1330573 8. Code.id Full-time Jakarta Code.id membuka lowongan pekerjaan sebagai Golang developer utnuk bekerja di Jakarta, Fokus dari perusahaan tersebut adalah software developmeent dan IP Produv Link pendaftaran: https://www.kalibrr.com/c/code-id/jobs/186304/golang-back-end-developer 9. FinAccel Full-time FinAccel adalah perusahaan fintech yang salah satu productnya ialah Kredivo. Jika kamu ingin merasakan pengalaman bekerja pada perusahaan fintech sebagai Golang Developer, kamu bisa mendaftar pada link berikut. Link pendaftaran: https://finaccel.co/careers/#213 10. Happy Fresh Full-time Terakhir, Happry Fresh, supermarket online yang mmengantarkan pesanan sampai dengan depan rumah. Happy Fresh sedang membutuhkan Golang Developer untuk bekerja secara Full-time. Lowongannya dapat diakses pada link di bawah ini. Link pendaftaran: https://jobs.lever.co/happyfresh/41967e85-7055-4d20-8055-774ad880c304 Kesempatan untuk berkarir sebagai Golang Developer sangatlah luas. Tunngu apa lagi? Daftarkan dirimu pada perusahaan yang kamu minati. Semoga bermanfaat, dan sukses selalu yaa!

Kelas 10 Lowongan Pekerjaan Remote Terbaru untuk Developer di BuildWith Angga

10 Lowongan Pekerjaan Remote Terbaru untuk Developer

Sejak pandemi covid-19, tren mengenai pekerjaan remote terus meningkat. Pekerjaan remote memungkinkan kamu untuk bekerja tanpa harus datang langsung ke kantor. Dengan bekerja secara remote, kamu gak perlu pusing menghadapi jalanan yang macet dan memiliki fleksibilitas untuk memilih dimana tempat yang kamu inginkan untuk bekerja. Menarik bukan? Nah, berikut kami lampirkan 10 lowongan pekerjaan remote terbaru untuk Developer dari berbagai perusahaan beserta link pendaftarannya. 1. Schoters Full-time Mobile Application Developer Schoters adalah sebuah perusahaan yang bergerak pada bidang edukasi dengan layanan bimbingan bahasa dan bimbingan kuliah ke luar negeri. Saat ini, Schoters sedang membuka lowongan pekerjaan untuk posisi Mobile Developer.Link pendaftaran: https://www.jotform.com/form/210202680994454 2. Bukalapak Full-time Software Development Engineer, Frontend Kamu sudah tidak asing lagi dengan yang satu ini bukan? Yups bener banget, Bukalapak merupakan salah satu e-commerce besar di Indonesia. Yuk manfaatkan kesempatan menjadi Frontend Engineer di Bukalapak dengan mendaftar pada link berikut. Link pendaftaran: https://careers.bukalapak.com/jobs/196367 3. Mazecare Full-time Back End Developer Mazecare adalah platform perawatan kesehatan digital, yang menghubungkan pasien, penyedia layanan kesehatan, dan perusahaan asuransi. Sistem pekerjaan perusahaan ini seluruhnya berbasis remote. Jika kamu ingin bergabung menjadi salah satu bagiannya, langsung aja daftar pada link berikut ya! Link pendaftaran: https://www.linkedin.com/jobs/view/2974371403 4. Evermos Full-time Back End Developer - Go Evermos adalah sebuah platform social commerce untuk bisnis reseller dropship. Saat ini Evermos membuka lowongan pada posisi Back-End Developer. Cocok banget untuk kamu yang ingin merasakan bekerja di perusahan yang bergerak pada bidang e-commerce. Link pendaftaran: https://www.linkedin.com/jobs/view/2988234831 5. Tab Square Full-time Android Developer Ingin menjadi Android Developer? Yuk coba daftar yang satu ini. Perusahaan ini bergerak pada bidang Artificial Intelligence dengan menawarkan sistem pemesanan digital untuk restoran. Link pendaftaran: https://www.linkedin.com/jobs/view/3019174787 6. Spiralyze Full-time Frontend Developer Belakangan ini, kebutuhan Frontend Developer memang sedang tinggi. Saat ini Spiralyze, perusahaan yang memberikan jasa menaikan traffic website sedang mencari salah satunya. Link pendaftaran: https://www.linkedin.com/jobs/view/3020903283 7. eFishery Full-time Frontend Engineer Pernah mendengar akuakultur? eFishery merupakan salah satu perusahaan pada bidang akuakultur atau yang lebih dikenal sebagai budidaya perikanan. Saat ini eFishery sedang membuka lowongan pekerjaan untuk Frontend Engineer. Link pendaftaran: https://www.linkedin.com/jobs/view/3026311943 8. DOT Indonesia Full-time Mobile Developer (Flutter) Tertarik berkarir sebagai Mobile Developer? Kamu bisa mencoba melamar di DOT Indonesia. DOT berfokus memberikan layanan berbasis teknologi, salah satunya ialah pembuatan website dan aplikasi mobile untuk keperluan bisnis. Link pendaftaran: https://www.linkedin.com/jobs/view/3015506774 9. Sayurbox Full-time Software Engineer (Frontend) Seperti namanya, Sayurbox merupakan e-commerce yang berfokus pada penjualan sayur dan buah. Jika kamu berminat menjadi Frontend Developer di Sayurbox, kamu dapat mendaftar melalui link di bawah ini. Link pendaftaran: https://jobs.lever.co/sayurbox/caf89479-0725-43f9-827e-968aec5df715/ 10. SoftwareSeni Indonesia Full-time React Js Developer Untuk kamu yang ingin merasakan pengalaman bekerja di Perusahaan Software House, kamu bisa melamar di SoftwareSeni Indonesia. Rasakan pengalaman bekerja di perusahaan yang sudah pasti IT banget! Link pendaftaran: https://softwareseni.bamboohr.com/jobs/view.php?id=35 Bagaimana? Diantara sepuluh lowongan tersebut, perusahaan dan posisi apa yang kamu rencanakan untuk lamar? Apapun itu, semoga diberi hasil yang terbaik ya! Sekian informasi yang dapat kami sampaikan. Semoga bermanfaat dan sukses selalu!

Kelas Kumpulan Lowongan Kerja Developer dengan Sistem Hybrid di BuildWith Angga

Kumpulan Lowongan Kerja Developer dengan Sistem Hybrid

Sistem kerja hybrid merupakan sistem kerja yang mengkombinasikan pekerjaan remote dan from office. Biasanya, karyawan boleh menyesuaikan dari mana mereka ingin bekerja, baik di kantor atau bekerja dari rumah. Berikut telah kami kumpulkan beberapa pekerjaan dengan sistem hybrid untuk para Developer. 1. AlteaCare Full-time Flutter Developer (Tangerang Selatan) Berdiri di bawah naungan PT. Sehat Digital Nusantara, AlteaCare menawarkan berbagai layanan kesehatan, mulai dari telekonsultasi via panggilan video dengan dokter spesialis, pembelian  obat, dsb. Bagaimana, tertarik bergabung? Link pendaftaran: https://www.linkedin.com/jobs/view/2910287438 2. Halodoc Full-time Full Stack Developer (Jakarta) Aplikasi yang cukup populer pada bidang kesehatan ini sedang mencari Full Stack Developer. Jika kamu berminat, jangan ragu untuk mencoba ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3026312445 3, CIMB Niaga Full-time Android Developer (Yogyakarta) Untuk kamu yang tinggal di daerah Yogyakarta, kamu berkesempatan mendaftar sebagai Android Developer di Bank CIMB Niaga. Tunggu apa lagi? Jangan lewatkan kesempatan ini ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3005804307 4. Detikcom Full-time Web Developer (Jakarta) Pasti kamu pernah kan membaca berita di Detikcom? Saat ini, Detikcom sedang mencari Hybrid Web Developer untuk bekerja di Jakarta. Link pendaftaran: https://www.linkedin.com/jobs/view/3022688038 5. DEOS Group Full-time Mobile Developer (Tangerang) DEOS merupakan perusahaan yang dapat memberikan layanan digitalisasi spesifik berdasarkan kebutuhan client. DEOS Group sedang membuka lowongan untuk Hybrid Mobile Developer. Link pendaftaran: https://www.linkedin.com/jobs/view/3008528097 6. SayaKaya Full-time Flutter Developer (Jakarta) SayaKaya merupakan aplikasi investasi yang pastinya sudah terdaftar di Kominfo dan OJK. SayaKaya sedang mencari Flutter Developer untuk bekerja secara hybrid di Jakarta. Link pendaftaran: https://www.linkedin.com/jobs/view/2991291227 7. Tiket.com Full-time Android Engineer for Fresh graduate (Jakarta) Salah satu perusahaan yang bergerak pada bidang pariwisata, khususnya pembelian tiket secara online, Traveloka, sedang membuka kesempatan untuk Fresh Graduate. Pendaftaran di: https://www.linkedin.com/jobs/view/3003382493 8. Tokopedia Full-time Software Engineer (Yogyakarta) Ingin merasakan pengalaman bekerja di salah satu unicorn terbesar di Indonesia? Pas banget, Tokopedia sedang membuka lowongan pekerjaan sebagai Software Engineer. Silahkan mendaftar ya! Link pendaftaran: https://www.linkedin.com/jobs/view/3025887443 9. Kebun Pintar Flutter Developer Intern (Malang) Yuk Flutter Enthusiast merapat! Saat ini Kebun Pintar membuka internship untuk posisi Flutter Developer. Cocok untuk kamu yang sedang mencari tempat magang, ataupun belum merasa skill kamu cukup untuk posisi Full-time. Link Pendaftaran: https://www.linkedin.com/jobs/view/3024688706 10. GoToko Full-time Platform Engineer - Web (Bali) GoToko, unit bisnis patungan Gojek dengan Unilever Group yang berfokus pada digitalisasi warung. GoToko membuka lowongan pekerjaan hybrid di Bali sebagai Full-time Platform Engineer. Link pendaftaran: https://boards.eu.greenhouse.io/gotoko/jobs/4021477101?gh_src=6c826d72teu Setelah membaca beberapa informasi lowongan pekerjaan sebagai developer, kamu dapat mencoba melamar yang salah satu atau beberapa pekerjaan yang sesuai untukmu. Jika belum yakin dengan kemampuanmu, BuildWith Angga siap untuk mendampingi proses belajarmu

Kelas 5 Soft Skill Penting untuk Freelancer di BuildWith Angga

5 Soft Skill Penting untuk Freelancer

Di era teknologi yang berkembang pesat saat ini, persaingan kerja semakin kompetitif, termasuk menjadi freelancer di dunia IT. Mungkin di benak orang awam jadi freelancer itu mudah dan menyenangkan, bisa kerja di mana pun dan kapan pun sesuka hati. Dan mereka juga kerap kali beranggapan bahwa freelancer itu bukan pekerjaan yang menjanjikan untuk masa depan. Padahal nyatanya belum tentu demikian. Banyak profesional muda yang berhasil melalui karir freelance mereka, dan bahkan bisa membangun perusahaan rintisan atau berkontribusi kepada masyarakat. Sama seperti pekerjaan kantoran pada umumnya, memiliki kemampuan teknis atau hard skill saja tidak cukup untuk menjadi freelancer yang sukses. Penguasaan soft skill yang baik adalah wajib bagi setiap freelancer karena erat kaitannya dengan Emotional Intelligence di mana freelancer tersebut dapat menyelesaikan setiap proyek yang menantang secara mandiri dan bertanggung jawab. Berikut rekomendasi soft skill yang bisa bermanfaat untuk karir sebagai freelancer dalam jangka panjang. 1. Mampu Berkomunikasi dengan Baik By Mimi T. Mampu berkomunikasi yakni menyampaikan informasi secara jelas, to the point, mudah dipahami, bukanlah sesuatu hal yang mudah. Butuh kemauan untuk belajar dan jam terbang untuk menjadi komunikator yang handal. Komunikasi yang berkualitas menunjukan kepiawaian komunikator mengungkapkan pendapatnya, disertai alasan yang jelas, pada waktu dan media yang sesuai. Sebagai contoh, kita tidak bisa langsung berbicara informal kepada prospect client melalui email seperti halnya kita meninggalkan komentar di Instagram. Hal semacam itu akan menurunkan respect klien dan menghilangkan kesempatan bekerja sama. Ada beberapa jenis komunikasi yang penting untuk dikuasai saat ini: komunikasi lisan, komunikasi tulisan, komunikasi visual dan menyimak dengan penuh perhatian (attentive listening). Banyak hal yang bisa dilakukan untuk meningkatkan skill komunikasi, seperti menonton channel Youtube inspiratif, membaca buku, atau bahkan hal paling sederhana yaitu menjadi pendengar yang baik untuk orang-orang di sekitar kita. Sangat penting untuk bisa berkomunikasi dengan baik, karena nantinya akan menjadi jembatan untuk membangun skill bermanfaat lainnya untuk karir freelance yang menjanjikan. 2. Memahami Etika Kerja By Cytonn Photography Banyak yang memilih karir freelance dengan tujuan awal ingin bebas dari tekanan kerja oleh atasan kantor. Nyatanya, menjadi freelancer tidak semudah itu. Butuh komitmen dan kedisiplinan yang konsisten agar bisa bekerja secara mandiri. Akan tetapi, seringkali kita menghadapi klien yang membutuhkan kita untuk bekerja sama dengan timnya di kantor. Maka, kita harus selalu bersedia bekerja sama dengan klien mana pun. Cobalah berkolaborasi dengan baik agar nantinya timbul rasa percaya pada klien yang nantinya bagus untuk hubungan kerja jangka panjang. Entah itu bekerja sendiri atau bersama-sama, kita harus tetap mempertahankan profesionalitas—selalu membiasakan tepat waktu (punctuality) seperti bekerja mengikuti deadline yang telah disetujui, mengikuti meeting, menyajikan hasil kerja yang sesuai dan memuaskan atau bahkan juga bisa memberikan value yang lebih dari perjanjian kerja di awal 3. Mampu Berpikir Kritis untuk Penyelesaian Masalah By Sigmund Kemampuan memecahkan masalah berhubungan dengan seberapa paham kita dalam melihat tujuan akhir pekerjaan, dan outcome atau hasil akhir apa yang kita inginkan. Hasil akhir itu harus diprediksi secara realistis agar kita bisa lebih mudah meraihnya. aat kita mengerjakan proyek, kita pasti menemui kendala. Hal itu adalah tantangan yang bisa jadi ruang belajar untuk pengembangan diri. Diskusikan kendala dengan klien atau mereka yang ahli, lalu berikan solusi yang mungkin bisa diterapkan. Untuk meningkatkan kemampuan problem solving sebenarnya bisa kita lakukan di aktivitas menganalisa sehari-hari seperti membiasakan diri menonton berita, double check berita hoax yang sering kita jumpai dan bergaul dengan orang-orang dari berbagai latar belakang. 4. Mengenal Dasar Penting dalam Berbisnis By Dylan G. Dengan menjadi freelancer, berarti kita harus siap menghadapi ketidakpastian pemasukan bulanan. Namun, bila kita mau meluangkan waktu untuk belajar ilmu tentang bisnis, kemungkinan kita bisa menghasilkan uang dari freelance yang bahkan melebihi untuk kebutuhan sehari-hari. Untuk bisa mendapatkan penghasilan sesuai yang diharapkan, kita harus bisa mengorganisir segala aspek pekerjaan kita. Sekalipun bekerja sendiri, kita harus membuat aturan jelas untuk proyek freelance yang diambil. Selain itu, kemampuan negosiasi dari komunikasi yang baik bisa sangat membantu untuk menentukan harga penawaran proyek. Dengan menerapkan hal-hal ini nantinya kita akan lebih bisa menjaga hubungan baik dengan klien karena cara kerja bisnis kita sudah tersusun dengan matang. 5. Mampu Beradaptasi By Austin D. Pada banyak kesempatan, klien dapat memajukan deadline secara tiba-tiba atau meminta freelancer merevisi kembali hasil kerja. Hal ini terjadi karena pada era digital sekarang, pesatnya arus informasi membuat kompetisi penjualan terutama produk/jasa online semakin sengit. Sebagai freelancer, kita harus terbuka akan cara kerja tersebut. Tidak selalu hasil kerja kita dapat langsung diterima oleh klien. Berusahalah untuk dapat menerima setiap kritikan dari klien dengan lapang dada karena mungkin mereka memiliki ide lain yang lebih baik atau bahkan belum terpikirkan oleh kita. Jadilah pribadi yang fleksibel dan terus update dengan perkembangan zaman agar bisa menjadi freelancer yang sukses. Bagaimana? Apa Kamu sudah menguasai semua soft skill di atas? Tidak pernah ada kata terlambat untuk belajar, ya. Kamu bisa mempelajari semuanya dengan mulai mengamati orang di sekitarmu atau mungkin mengikuti kelas soft skill di BuildWith Angga. Miliki growth mindset supaya Kamu bisa terus berkembang, karena membangun karir freelance yang cemerlang itu butuh waktu dan kegigihan.

Kelas Cara Jaga Mental Health saat Freelance di BuildWith Angga

Cara Jaga Mental Health saat Freelance

Berbeda dengan pekerja kantoran yang harus bekerja sesuai jadwal tetap perusahaan, pekerja freelance tidak mengenal aturan waktu seperti itu. Bekerja freelance memiliki privilege tersendiri, kita bisa work from anywhere dan menyelesaikan project sesuai dengan jadwal yang kita punya. Namun ada kalanya stres melanda untuk para pekerja freelance yang kerap berjuang sendirian. Kendala yang dihadapi saat kerja kemungkinan disebabkan beragam faktor, Anda tidak bisa secara langsung menyalahkan pihak luar karena bisa jadi penyebabnya dari dalam diri. Cobalah mulai kenali diri sendiri. Apakah perhatian yang Anda berikan pada pribadi sudah cukup? Apakah Anda sudah menjaga kesehatan mental dengan baik? Kesehatan mental atau yang belakangan ini populer disebut mental health adalah suatu bentuk perhatian pada diri sendiri yang amat sangat penting. Dengan mengelola mental health, artinya Anda menjaga badan secara menyeluruh. Anda berarti tahu apa saja yang dikonsumsi (makan, minum, tontonan, dll) dan apa pun yang dilakukan (tidur, olahraga, kerja overtime, dll) dapat berpengaruh kepada badan. Berikut adalah tips membangun mental health agar Anda lebih siap menghadapi segala tantangan kerja saat freelance. Semoga bermanfaat, ya! 1. Makan yang sehat By Jasmin S Sumber badan yang sehat berawal dari makanan. You are what you eat. Apa yang Anda makan dapat dirasakan pengaruhnya pada kesehatan secara langsung dan untuk jangka panjang. Ada baiknya Anda memulai diet untuk setiap makanan yang dikonsumsi. Asumsi yang umum di masyarakat tentang diet adalah situasi di mana kita harus mengurangi porsi makan secara drastis hanya untuk kurus. Definisi itu salah karena sebenarnya diet adalah bagaimana pola makan diatur sesuai kebutuhan badan. Setiap orang porsi makanannya tidak bisa disamakan karena genetika dan aktifitas yang dilakukan pasti berbeda. Tidak jarang makanan/ minuman kita beli hanya sebagai pelampiasan emosi, padahal bisa jadi yang kita konsumsi tersebut membahayakan bagi kesehatan. Mulailah kebiasaan baik dengan mengatur diri melalui makanan. Bila pola makan teratur, saat kerja Anda akan selalu merasa bugar, berat badan pun terjaga, dan bisa terhindar dari berbagai penyakit berbahaya. 2. Istirahat yang cukup By Elijah H Olahraga bisa meningkatkan konsentrasi, kualitas tidur hingga penampilan. Pilihlah olahraga sesuai budget dan kemampuan, dengan begitu berolahraga jadi terasa menyenangkan. Olahraga bisa di mana saja serta bisa di mana saja, namun baiknya dilakukan 30 menit setiap hari agar manfaatnya terasa di badan. Nantinya Anda tidak mudah terganggu atau mengantuk, dan pekerjaan bisa selesai sesuai deadline. Membaca buku juga bisa jadi aktifitas yang bagus untuk meningkatkan daya pikir. Umumnya kita membaca lewat social media, namun faktanya kebiasaan itu berpengaruh buruk bagi otak karena kebiasaan scanning atau membaca cepat di social media bisa merusak susunan jaringan otak. Untuk sebagian orang, membaca buku itu berat dan sungguh membosankan, akan tetapi kontennya lebih kredibel dan sangat bagus untuk meningkatkan kemampuan analytical thinking yang dipakai ketika bekerja. 3. Pikiran lebih sehat dengan olahraga & baca buku By Jennie Hill Olahraga bisa meningkatkan konsentrasi, kualitas tidur hingga penampilan. Pilihlah olahraga sesuai budget dan kemampuan, dengan begitu berolahraga jadi terasa menyenangkan. Olahraga bisa di mana saja serta bisa di mana saja, namun baiknya dilakukan 30 menit setiap hari agar manfaatnya terasa di badan. Nantinya Anda tidak mudah terganggu atau mengantuk, dan pekerjaan bisa selesai sesuai deadline. Membaca buku juga bisa jadi aktifitas yang bagus untuk meningkatkan daya pikir. Umumnya kita membaca lewat social media, namun faktanya kebiasaan itu berpengaruh buruk bagi otak karena kebiasaan scanning atau membaca cepat di social media bisa merusak susunan jaringan otak. Untuk sebagian orang, membaca buku itu berat dan sungguh membosankan, akan tetapi kontennya lebih kredibel dan sangat bagus untuk meningkatkan kemampuan analytical thinking yang dipakai ketika bekerja. 4. Disiplin melakukan rutinitas untuk jangka panjang By Brett Jordan Membiasakan pola hidup yang baik adalah tantangan seumur hidup. Mulailah dari hal yang bisa dilakukan, dengan apa yang sudah dimiliki. Mungkin awalnya Anda berpikir akan membosankan untuk melakukan rutinitas yang sama, namun ingat kembali goal yang ingin diraih dan betapa pentingnya peran kesehatan untuk mewujudkan semua tujuan tersebut. Menjadi pekerja freelance identik dengan 'ketidakpastian', namun bila Anda bisa manage waktu bekerja dan me time dengan baik, Anda bisa menjadi pekerja freelance profesional yang sukses. Awalnya mungkin akan terasa berat, entah itu kondisi keuangan yang tidak stabil, atau mungkin penolakan dari klien yang tidak puas dengan hasil project, tapi dengan Anda terus membenahi kemampuan dan membangun mental health, semua tantangan pada akhirnya bisa terlewati. 5. Aktif bertukar pikiran dengan pekerja freelance lain By LinkedIn Saat freelance, ada masanya Anda merasa stuck dan butuh bantuan orang lain. Beruntung sekali kini kita dimudahkan dengan kecanggihan internet, 'hanya' dengan bermodalkan kemampuan bahasa kita bisa berdiskusi dengan teman freelance lain di seluruh dunia. Dalam grup komunitas online, Anda bisa berbagi keluh kesah dan mungkin juga mengenal mentor yang bisa mengecek dan memberi feedback langsung pada karyamu. Bertukar pikiran dengan teman yang berprofesi sama bisa membuatmu lebih bahagia, banyak ilmu yang bisa didapatkan dari teman-teman yang lebih berpengalaman dan komunitas dapat jadi ajang showcase hasil karya satu sama lain. Penting bagi Anda untuk turut aktif demi tingkatkan skill komunikasi dan siapa tahu Anda bisa mendapatkan kesempatan kerja untuk project freelance berikutnya.

Kelas Sumber Belajar Mandiri untuk Developer di BuildWith Angga

Sumber Belajar Mandiri untuk Developer

Saat ini sumber belajar IT khususnya design dan coding sudah banyak tersedia di internet. Dengan mudahnya kita bisa mendapat ilmu hanya dengan googling melalui smartphone. Berkat kemajuan teknologi, Developer yang berpengalaman bisa sharing pengetahuan mereka di berbagai platform online. Siapa pun yang berniat menjadi Developer profesional, bisa langsung mengunjungi platform tersebut kapan saja mereka butuhkan. Faktor terpenting dalam mendalami development adalah niat yang kuat untuk terus belajar dan berlatih membangun project. Berikut adalah rekomendasi belajar dari Kami, yang diantaranya bahkan gratis namun bisa Anda aplikasikan untuk membuat project yang berguna. Selamat membaca & semoga bermanfaat! 😊 1. Stackoverflow dan GitHub By stackoverflow Untuk Anda yang masih pemula, kemungkinan besar akan menghadapi banyak kendala saat mengembangkan aplikasi. Salah satu solusi yang mungkin bisa membantu adalah dengan bergabung ke Stackoverflow. Dengan menjadi bagian dari komunitasnya, Anda bisa mendapatkan informasi terbaru terkait teknologi dan juga jawaban atas permasalahan yang dialami saat coding. Banyak Developer yang berpengalaman secara sukarela menjadi kontributor di Stackoverflow, dan Anda pun juga bisa melakukan hal yang sama agar bisa membantu Developer lainnya. Tulisan pada blog, artikel, atau bahkan video tutorial bisa menambah banyak pengetahuan Developer, namun pengalaman-pengalaman asli yang dituangkan melalui Stackoverflow bisa jadi lebih tepat sasaran untuk menyelesaikan masalah yang kerap dialami Developer. By GitHub Selain Stackoverflow, Anda juga bisa memperoleh insight dengan mempelajari repo milik Developer lain melalui GitHub. Anda bisa melihat keseluruhan sistem apa saja yang dipakai Developer lain dalam membangun aplikasi atau website, lengkap dari front-end sampai back-end. Bila Anda tertarik menggunakan suatu repo, Anda cukup pakai fitur forking yang mana tidak akan mengubah repo utama. Dan yang terpenting, sebagai bentuk apresiasi, selalu ingat untuk berikan star dan pesan kepada Developer pemilik akun GitHub tersebut. 2. YouTube By BWA Saat ini YouTube sudah menjadi sarana umum untuk belajar apa pun yang Kita mau. Para Developer juga bisa belajar banyak dari YouTube, lho. Dari banyak channel IT yang aktif saat ini, seperti Programmer Zaman Now, CodePolitan dan Web Programming UNPAS, Anda bisa belajar banyak hal mengenai pemrograman jaman sekarang. Anda bisa betah belajar melalui Youtube karena video di platform ini punya ciri khas menarik dan materi yang disampaikan pas atau lebih ringan ketimbang materi belajar di sekolah. Selain itu, YouTube juga media yang interaktif karena sang content creator bisa melakukan live streaming untuk para subscriber atau penonton setia channel tersebut. Sebagian besar konten pada YouTube tidak dipungut biaya untuk menontonnya, namun bukan berarti kontennya dibuat sembarangan, ya. Dari beberapa channel yang telah disebutkan, pembuatnya adalah para praktisi ahli di bidang IT, di mana melalui YouTube mereka sharing ilmu yang berdasarkan pengalaman pribadi dan hasil riset mendalam. Dunia IT itu sangat luas, maka tidak jarang pula mereka berkolaborasi dengan para Designer atau Developer lain agar lebih banyak lagi materi yang bisa disampaikan. Saat ini YouTube adalah platform dengan traffic kunjungan tertinggi dan semakin hari semakin banyak topik tentang IT yang bermunculan. Anda mungkin menggunakan YouTube saat ini untuk belajar, namun tidak menutup kemungkinan Anda showcase project melalui channel Anda suatu hari nanti. Semangat terus belajarnya, ya! 3. BuildWith Angga By BuildWith Angga BuildWith Angga atau yang biasa juga disebut BWA adalah platform belajar IT, dengan fokus pada materi design dan coding. Melalui BWA, Anda bisa belajar dari dasar hingga membuat project aplikasi yang bermanfaat. Ada banyak konten (webinar, e-book, artikel) dan materi belajar yang bisa dilihat secara gratis maupun berbayar. Namun jangan khawatir terkait jumlah biayanya, ya. Belajar di BWA terbilang berbeda dibanding dengan platform edukasi serupa, karena harga yang ditawarkan lebih terjangkau di mana hal ini sejalan dengan visi BWA yaitu belajar IT tidak harus mahal. Untuk Anda yang ingin berprofesi di bidang IT, ada baiknya Anda memahami jenis pekerjaan apa yang diinginkan dengan membaca terlebih dulu HandBook BWA. Pilihlah pekerjaan yang sesuai dengan bakat dan minat agar saat kerja Anda tidak mudah stres dan pekerjaan bisa diselesaikan dengan baik. Pada BWA ada banyak kelas untuk tingkatan pemula hingga mahir. Anda harus menguasai dasar-dasar untuk bisa membuat sebuah project yang utuh. Membuat aplikasi memang proses yang kompleks, namun jangan ragu untuk belajar di BWA karena ada Mentor yang siap membantumu membuat project keren yang bisa dipakai untuk melamar kerja. Bersama BWA, ayo bangun keahlianmu untuk masa depan! 😊

Kelas Cara Sukses Cari Kerja di BuildWith Angga

Cara Sukses Cari Kerja

Apakah Kamu fresh graduate yang sedang mencari pekerjaan pertamamu? Atau mungkin Kamu sudah bekerja dan ingin pindah ke perusahaan dengan jenjang karir lebih baik? Apa pun situasi yang Kamu hadapi saat ini, mencari pekerjaan yang sesuai dengan cita-cita adalah suatu tantangan tersendiri. Faktanya, ada banyak sekali info cara untuk memperoleh pekerjaan, namun ketahuilah hal-hal dasar berikut ini agar pekerjaan yang dijalani mampu mencukupi kebutuhan dan keinginanmu. Happy reading! 😊 Pilih pekerjaan sesuai kemampuan by Brooke Cagle Sebelum mencari di aplikasi lowongan kerja, ada baiknya Kamu mengetahui jenis pekerjaan yang kamu inginkan. Memiliki rencana yang tersusun matang bisa mempercepat proses mencari pekerjaan, dengan begitu Kamu bisa langsung fokus mencari referensi yang berguna untuk proses perekrutan nantinya. Buatlah sebuah daftar mengenai segala hal yang berhubungan dengan pekerjaan idamanmu. Coba pelajari apa saja kriteria yang diinginkan klien atau perusahaan terhadap profesi yang ingin kamu tekuni,  di mana saja kemungkinan lokasi pekerjaan tersebut tersedia, apakah Kamu bisa menyelesaikan pekerjaan itu secara part time atau harus full time, dan masih banyak hal lainnya yang bisa Kamu cari tahu sesuai kebutuhan pribadi. Setelah melakukan riset pasar, mulailah lamar pekerjaan sesuai kemampuan yang Kamu miliki. Jangan pernah asal melamar, ya 😊. Sebaiknya, setiap resume yang Kamu kirim itu memiliki perbedaan, karena kebutuhan setiap pekerjaan pasti berbeda. Bila Kamu memilih bekerja pada industri kreatif, Kamu harus menyertakan portfolio sebagai bukti kemampuanmu dalam membuat suatu karya. Mencari kerja itu membutuhkan banyak waktu dan tenaga, bila Kamu meremehkan salah satu prosesnya Kamu akan sulit mendapatkan pekerjaan sesuai bakatmu. Mengapa hal itu penting? Pekerjaan yang Kamu pilih nantinya bisa jadi akan berlangsung dalam kurun waktu yang lama, bahkan mungkin saja hingga masa pensiunmu tiba. Mencari kerja itu memang sulit, tapi saat berhasil diterima kerja, Kamu akan temui jauh lebih banyak tantangan sulit yang harus Kamu temukan sendiri solusinya. Bila Kamu memilih pekerjaan sesuai kemampuan dari dalam dirimu, proses menjalani semuanya akan menjadi lebih mudah dan dengan demikian kesehatan mentalmu akan tetap terjaga. Be a lifelong learner 🙌 by Annie Spratt Agar bisa survive di industri kerja, kita harus bisa beradaptasi dengan terus mengembangkan kemampuan diri. Saat bekerja mengeluh itu hal biasa, tapi jangan sampai dibiarkan berlarut-larut karena hal itu sama sekali tidak akan mengubah situasi menjadi lebih baik. Mulailah bergabung dengan para praktisi di bidang yang sama dengan Kamu, cobalah berkomunikasi melalui social media atau jika mungkin bertemu langsung dengan mereka. Belajar langsung dari orang yang berpengalaman bisa meningkatkan motivasi dan memunculkan ide-ide baru yang bisa diaplikasikan saat bekerja. Selain itu, Kamu juga bisa mengasah diri dengan mengikuti pelatihan-pelatihan yang berhubungan dengan pekerjaanmu. Akan selalu ada talenta-talenta baru yang lebih muda dan berkualitas, maka jangan pernah Kamu merasa sudah hebat dan berhenti belajar, ya. Buat dirimu spesial dengan segudang pengalaman kerja yang telah Kamu lalui dan selalu upgrade diri mengikuti perkembangan jaman. Saat ini sudah banyak sekali pelatihan baik itu lewat Zoom meeting atau workshop offline, yang bisa Kamu pilih sesuai ketersediaan budget dan waktumu. Bila Kamu berminat mendalami bidang IT dan desain, silahkan cek BuildWith Angga untuk mengetahui informasi pelatihan online dengan harga terjangkau. Nantinya tidak hanya ilmu yang Kamu dapat, Kamu juga bisa punya portfolio untuk karirmu, lho! 😊 Showcase karya terbaikmu secara online by John S. Pernahkah Kamu mencari tahu tentang dirimu di Google? Apa yang muncul pertama kali saat Kamu mengetikkan namamu? Pada era digital saat ini, keberadaan diri kita di internet kerap dinilai oleh rekruter. Jejak digital yang kita miliki erat kaitannya dengan personal branding, hal yang tanpa kita sadari telah kita bangun selama ini. Agar mencari kerja jadi lebih mudah, mulailah membangun personal branding yang baik. Tidak ada kata terlambat untuk memulainya, gunakanlah media paling sederhana yaitu dari social media yang Kamu pakai setiap hari. Sebaiknya tambah juga akun profesional seperti LinkedIn agar Kamu terlihat lebih kompeten. Dari situ, Kamu pun bisa koneksikan akun lain untuk showcase hasil karyamu, entah itu channel YouTube, blog, GitHub, Medium, dll. Ada banyak cara memamerkan atau showcase hasil pekerjaan kita di internet, namun dengan mengumpulkannya dalam satu akun, klien atau siapa pun yang ingin bekerjasama dengan kita dapat lebih mudah mengenal kita. Sebenarnya banyak hal yang bisa ditunjukkan, seperti membuat postingan cerita mengenai proses kerja, bagaimana cara berinteraksi dengan rekan-rekan kerja, dan hal-hal lain yang bisa diungkapkan tentunya dilengkapi dengan foto-foto sebagai pemanis. Untuk Kamu yang berprofesi sebagai Developer, Kamu bisa share akun landing page yang berisi pengalaman coding secara lengkap dan portfolio pengembangan aplikasi terbaik yang dimiliki. Bila senang menulis, Kamu juga bisa menceritakan seluruh prosesnya melalui Medium. Satu hal yang terpenting, semua akun yang kita pakai harus selalu aktif dan update, ya. Karena kita tidak pernah tahu kapan kesempatan kerja itu bisa datang, namun dengan terus konsisten menjaga personal branding, kita berarti membuka peluang baik kepada siapa pun untuk bekerja sama secara profesional dengan kita.

Kelas Alat Kerja Gratis untuk App Developer di BuildWith Angga

Alat Kerja Gratis untuk App Developer

Pengembangan aplikasi merupakan suatu alur yang kompleks di mana banyak pihak yang terlibat agar prosesnya berjalan mulus seperti penentuan desain, sistem database, prototype, integrasi API, dan lainnya. Bagi kalian App Developer pemula, bisa jadi bingung untuk mulai belajar dari mana. Menguasai tool dasar adalah fundamental penting agar kamu nantinya bisa bekerja secara efisien. Tidak perlu cemas akan biaya yang mahal, banyak tool gratis yang bisa digunakan guna melancarkan proses coding dan berkolaborasi dengan pihak lain seperti Designer dan Product Manager. Berikut informasi lengkapnya, semoga bermanfaat! 😊 Build codebase with Visual Studio Code By: Wikipedia Secara umum, aplikasi mobile bisa dibangun menggunakan berbagai pilihan bahasa pemrograman seperti Kotlin, Javascript, C#, dan Dart. Pada mulanya, banyak yang memakai Android Studio untuk membangun aplikasi lewat coding. Namun, saat ini sudah ada tool yang lebih modern bernama Visual Studio Code (VS Code) yang memungkinkan proses membuat logika data lebih mudah karena ukurannya yang lebih ringan. VS Code adalah suatu IDE (Integrated Development Environment), sebuah tool lengkap bagi Developer untuk menulis source code saat membangun sebuah aplikasi mobile. Dengan VS Code, aplikasi yang dihasilkan bisa dipakai untuk Android dan iOS. Menjalankan VS Code terbilang mudah yakni hanya dengan menginstal Android SDK. VS Code lebih terasa ringan dipakai ketimbang saat coding lewat Android Studio, dan juga tampilan VS Code minimalis sehingga nyaman saat dipakai. Prototype your app with Framer By: Framer Sebagai Developer, penting untuk mengetahui proses prototype agar aplikasi bisa dibangun sesuai rencana awal projek, tanpa perlu melalui banyak revisi. Dengan Framer, Developer bisa memahami keseluruhan bagian desain untuk aplikasi yang akan dibangun, meliputi layout, komponen UI, interaction, dll. Sederhananya, saat prototype Developer seperti melihat bentuk desain yang real buatan Designer dan mencoba mengecek apakah desain aplikasinya bisa direalisasikan pada saat melakukan coding. Bila ditemukan kekurangan pada desain, improvement bisa diberikan melalui pemberian feedback dari para pihak yang terlibat pada proses pengembangan. Framer membuat kolaborasi prosesnya menjadi lebih mudah, karena tim bisa langsung memberikan komentar dan editing secara bersamaan pada hasil prototype. Develop easily with service from Firebase By: Firebase Firebase adalah BaaS (Backend as a Service), sebuah paket layanan komplit buatan Google untuk memudahkan pekerjaan Developer. Dengan Firebase, Developer bisa fokus menciptakan dasar sistem pemrograman yang baik untuk aplikasi, dan Firebase yang akan mengurus bagian-bagian lain seperti analytic, file storage, dan authentication. Benefit ini tentunya sangat menguntungkan Developer karena bisa mempercepat proses pengembangan, terutama saat membuat aplikasi yang berskala besar dengan kebutuhan maintenance dan update fitur yang harus sering dilakukan. Selain itu, integrasi Google Analytics pada Firebase sangat bermanfaat di era digital saat ini. Singkatnya, Developer dapat dengan mudah memantau user behavior, yang mana nantinya bisa dipakai untuk menambah fitur yang lebih sesuai dengan kebutuhan pengguna aplikasi. Build API with Postman By: Postman Postman digunakan oleh Developer untuk mengembangkan, mengetes, hingga memonitor API (Application Programming Interface) lebih cepat. Melalui Postman, Developer bisa menggunakan banyak tool untuk menyederhanakan proses integrasi API yang mencakup proses create, import, generate, sync, dan validate data. Secara sederhana, dengan Postman Developer bisa mengatur alur sistem dari beberapa platform berbeda saat proses pemindahan data yang sama. Logika data cukup dibangun sekali, dan nantinya bisa digunakan secara berulang saat dibutuhkan. Postman bisa juga membantu Developer mendokumentasikan API secara terstruktur, dan hal ini tentunya dapat mempermudah maintenance aplikasi yang umumnya bisa dilakukan oleh beberapa Developer sekaligus. Collaborate effectively with Zeplin By: Zeplin Saat membuat aplikasi, kolaborasi yang baik antara Designer, Developer, dan seluruh tim pengembangan adalah hal utama. Bagi kalian Developer pemula, silahkan coba Zeplin untuk mempermudah proses karena lewat Zeplin, tim bisa tahu progres pekerjaan pada satu tempat yang sama. Developer bisa mulai membangun sistem back-end setelah paham keseluruhan desain aplikasi. Designer harus memasang plugin Zeplin pada aplikasi desain yang mereka pakai dan menginfokannya ke Developer. Melalui Zeplin, Developer akan mengecek hasil desain dan bila perlu akan memberi saran guna memudahkan proses coding dengan tetap mengikuti styleguide yang sudah dirancang Designer. Pengembangan akan memakan banyak waktu dan tenaga dimulai dari tahap pre-production sampai post-production. Maka dari itu, alangkah baiknya bila tim mengintegrasikan semua aplikasi komunikasi yang dipakai agar segala update bisa terpantau dengan baik. Design handoff with Figma by @figmadesign Figma adalah tool praktis untuk mengkomunikasikan desain kepada Developer atau yang biasa dikenal dengan istilah design handoff. Sudah banyak sekali perusahaan dunia yang memakai Figma karena banyak sekali fitur bermanfaat yang bisa dipakai untuk brainstorming bersama tim pengembangan aplikasi. Hanya dengan mengakses Figma lewat website, Developer bisa mendapat akses penuh desain. Mereka bisa tahu apa saja screen, komponen user interface, copy yang dipakai sampai coba prototype atau model uji coba aplikasi. Prototype perlu diuji langsung ke pengguna melalui usability testing, dan bila dinilai berhasil maka proses akan berlanjut dengan mengekspor assets dari Figma ke VS Code. Menjadi Developer menguasai ilmu desain bukanlah hal wajib, namun dengan mengenal design tool modern seperti Figma, Developer jadi bisa lebih memahami proses desain dan pengerjaan aplikasi tentunya lebih hemat uang dan waktu.

Kelas Manfaat Magang Sebelum Kerja di BuildWith Angga

Manfaat Magang Sebelum Kerja

Bagi pemilik perusahaan, keuntungan utama mengadakan program magang, atau yang biasa dikenal internship, adalah untuk mendatangkan talenta muda yang berkualitas. Mereka dapat dikatakan sebagai lulusan yang 'melek' teknologi, memahami tool kerja terbaru, dan secara positif aktif di sosial media. Namun, ada kalanya perusahaan memberikan kesempatan magang murni sebagai bentuk kontribusi sosial kepada masyarakat. Apa pun alasannya, program magang adalah momen yang tepat bagi para lulusan khususnya fresh graduate untuk menyiapkan diri agar bisa bersaing di industri kerja yang kian hari semakin kompetitif. Untuk Kamu yang sedang bersiap-siap mencari pekerjaan, berikut adalah manfaat-manfaat magang yang perlu diketahui 🙌 1) Adaptasi dengan Lingkungan Profesional By: Christina Saat sedang magang, Kamu bisa mendapat pengetahuan terkait industri kerja dan mempraktikkan langsung prosedurnya. Kamu bisa mengerti sejauh mana teori yang diajarkan di bangku sekolah bisa diaplikasikan di dunia nyata. Bagaimana teori tersebut bisa benar-benar dipakai untuk membuat sebuah projek yang bermanfaat. Tidak hanya kemampuan yang bersifat teknis, ada banyak soft skill  yang bisa dilatih saat magang. Bertemu bos dan rekan kerja yang membina saat magang bisa membantu meningkatkan kemampuanmu berkomunikasi. Kamu juga belajar manajemen waktu yang baik, lewat membiasakan diri datang tepat waktu hingga mematuhi deadline pekerjaan. Bila Kamu terus mengembangkan soft skill, kemungkinan besar perusahaan apa pun bisa tertarik untuk merekrutmu. Kini teknologi semakin maju, maka mau tidak mau kita harus selalu belajar hal-hal baru. Dalam bekerja, kita bertemu banyak sekali orang dengan berbagai latar belakang, dengan dasar komunikasi yang baik dan benar tentunya bisa memudahkan proses pekerjaan kita dan kerjasama dalam bentuk apa pun dapat berjalan lancar. Maka, kolaborasi yang baik antara ilmu dan attitude bisa menjadikan Kamu kandidat yang berkualitas karena Kamu dianggap mampu mengikuti work culture perusahaan yang dilamar sesuai perkembangan jaman. 2) Bangun Portofolio dan Koneksi 😉 By: Krakenimages Internship bisa membantu Kamu membangun hubungan profesional yang kelak bisa jadi referensi bagus untuk masa depan. Hasil kerja saat magang, bisa diceritakan melalui sebuah portofolio sebagai bukti telah mengikuti internship secara memuaskan. Saat magang, cobalah untuk meninggalkan kesan baik, seperti dengan selalu menunjukkan antusiasme dan inisiatif lebih saat bekerja. Bila berhasil, Kamu akan dianggap memiliki potensi lebih dan bisa pula dipercaya untuk menjadi karyawan tetap. Dengan mengenal para praktisi yang ahli, Kamu bisa mendapat tips dan trik terkait pekerjaan yang diimpikan. Kamu bisa terus berkomunikasi dengan mereka melalui LinkedIn agar lebih sopan dan mendapat update lowongan pekerjaan langsung dari mereka. Keberhasilan pencarian kerja melalui jalur referensi memiliki kemungkinan diterima lebih besar ketimbang saat kita melamar langsung pada job portal. Proses perekrutan yang berlangsung juga jauh lebih efisien, tidak akan memakan waktu lama. 3) Mendapat Pengalaman Kerja yang Nyata By: Firmbee.com Pada informasi 'loker', sering tertulis persyaratan terkait pengalaman bekerja. Bila Kamu fresh graduate, kemungkinan besar pasti belum berpengalaman, maka mengikuti internship adalah salah satu cara yang tepat untuk buktikan Kamu bisa bekerja. Dengan riset terlebih dulu, Kamu bisa magang di perusahaan idaman, pilih bidang pekerjaan yang Kamu kuasai dan selesaikan proses internship secara bertanggung jawab. Biasanya setelah magang akan diberikan sertifikat, atau Kamu juga bisa membuat portofolio hasil magang. Pakai bukti magangmu sebagai pelengkap dokumen kerja saat melamar, ya. Banyak perusahaan yang membutuhkan lulusan berpengalaman karena mereka dianggap sudah terbiasa dengan situasi lingkungan kerja yang penuh tantangan, dan dapat bekerja sama dengan berbagai pihak sehingga beban pekerjaan yang ditugaskan bisa diselesaikan tepat pada waktunya. 4) Gain Confidence to Build Future Career 🙌 By: Bruce M. Setelah melalui internship, Kamu menjadi lebih percaya diri dan semakin semangat untuk menghadapi dunia kerja yang berada di luar zona nyaman Kamu sebelumnya. Kamu bisa memahami ekspektasi sebenarnya atas pekerjaan yang kamu inginkan, mungkin baik itu lifestyle atau skill apa saja yang cocok untuk menggeluti pekerjaan tersebut. Sebaiknya sesuaikan dengan kemampuan dari dalam diri dan goal yang Kamu miliki dalam hidup agar nantinya tidak menyesal bekerja di bidang tersebut. Manfaatkan dan atur prioritas sebaik mungkin agar uang dan waktu yang Kamu gunakan bisa selalu bermanfaat untuk membangun karir masa depanmu. Lalu hal yang tak kalah penting saat magang adalah Kamu secara tidak langsung memahami bagaimana work culture bisa mempengaruhi proses bekerja. Setiap perusahaan, baik itu startup atau perusahaan multinasional, pasti memiliki cara kerja yang berbeda sesuai kepentingan bisnis masing-masing. Lulus dari internship adalah bekal awal yang Kamu miliki, setelah itu teruslah semangat dan selalu belajar di perusahaan mana pun agar masa depan yang Kamu impikan bisa tercapai. Good luck! 😊

Kelas Inspirasi Terbaik untuk UI Designer di BuildWith Angga

Inspirasi Terbaik untuk UI Designer

Kreatifitas seorang Desainer tidak semata-mata muncul hanya karena bakat alami. Untuk tetap menjadi kreatif, Desainer harus berada di lingkungan yang suportif, mempunyai Mentor yang berpengalaman, terus mencari inspirasi dari buku atau sumber termudah saat ini yaitu internet. Kali ini kami berikan tips untuk menambah pengetahuan desain dari sumber-sumber yang sudah biasa kita temui sehari-hari. Tren di industri kreatif saat ini berkembang begitu cepat, maka agar bisa survive, Anda sebagai Desainer harus bisa fleksibel menyesuaikan diri dengan segala update yang sesuai kebutuhan kerja. Akan selalu ada inovasi agar kita bisa mendesain lebih efisien, entah itu terkait tool atau proses desain  terbaru. Dengan tips berikut, Anda bisa selalu mengikuti tren dan tentunya mengaplikasikannya untuk pekerjaan. Selamat membaca dan semoga bermanfaat. 😊 Finding Inspiration in Popular Platform By: Thor Schroeder Dalam sebuah aplikasi, pengalaman pengguna adalah hal terpenting. UI Designer sudah pasti terlibat di dalam prosesnya karena tampilan antarmuka atau UI adalah hal pertama yang menjadi fokus pemakaian aplikasi pertama kali. Bila pengguna merasa tidak 'sreg' dengan desain, pengguna bisa seketika menutup aplikasi dan membuka aplikasi serupa milik kompetitor, atau the worst scenario yang mungkin terjadi, mereka bisa uninstall aplikasinya. Maka, semua aspek visual (button, proximity, balance, contrast, dll) harus dipikirkan secara terstruktur  agar aplikasi nyaman digunakan. Agar paham UI seperti apa yang laku di pasaran, Anda bisa cari inspirasi pada platform khusus para seniman kreatif di dunia seperti Behance dan Dribbble. Kedua platform ini mudah dipakai seperti sosial media pada umumnya. Anda pun bisa pamer portofolio desain aplikasi/web dan mencari kerja dengan mengubah status menjadi "Hire Me". Ada segudang inspirasi desain pada platform tersebut untuk terus memotivasi diri menjadi desainer yang lebih baik lagi. Selain itu, desain baru yang Anda temukan tentunya bisa langsung diaplikasikan pada projek Anda pribadi dengan metode ATM. Learn from Case Study By: UX Indonesia. Mempelajari desain tidaklah cukup dengan mengetahui komponen-komponen pembangunnya saja secara terpisah, tapi juga harus mengetahui prosesnya secara menyeluruh dari pre-production sampai post-production. Membaca case study di Medium bisa jadi cara mengenal proses desain yang menyenangkan. Tidak seperti text book, pembahasannya di Medium ringan untuk dibaca dan menarik karena sering dilengkapi gambar atau animasi yang interaktif. Membangun case study bisa jadi sarana yang efektif untuk menggaet klien dari mana saja. Selain itu, case study adalah salah satu cara yang baik untuk mendokumentasi suatu projek. Melalui case study, Anda bisa melihat bagaimana proses berpikir Desainer saat membangun tampilan aplikasi, apa saja pertimbangan yang dipilih entah itu berdasarkan data (kualitatif dan kuantitatif) saat research atau mungkin ada aspek-aspek lain yang mempengaruhi saat app development. Di sisi lain, Desainer pemula bisa belajar banyak dari sebuah case study karena bisa belajar proses desain sebenarnya dari orang yang lebih berpengalaman secara mudah dan gratis. Figure Out How Design Works in Apps By: freestocks Cara terdekat memahami desain adalah dengan sering memakai aplikasi untuk kebutuhan sehari-hari. Saat ini apa pun serba mobile, banyak hal yang bisa dilakukan secara singkat lewat aplikasi. Jadi bila ingin menjadi UI Designer yang profesional, ada baiknya Anda memang secara aktif memakai aplikasi yang sama setiap hari. Dengan begitu Anda bisa memahami user journey dan tampilan yang tepat untuk kondisi dan waktu yang berbeda berdasarkan pengalaman Anda pribadi. Selain itu, cobalah untuk download beragam aplikasi di handphone Anda. Cara ini bisa menyegarkan pikiran Anda saat sedang merasa stuck merancang UI. Referensi aplikasi bisa sangat beragam, dari yang lokal sampai mancanegara. Dengan melihat aplikasi buatan orang lain, Anda bisa belajar menilai kekurangan dan kelebihan Anda saat mendesain. Dan kebiasaan tersebut bisa pula memunculkan inspirasi baru yang bisa Anda pakai untuk pembuatan projek desain berikutnya. Enroll Design Course to Build Real-World Projects By: Avel C. Menjadi Desainer profesional itu butuh proses panjang dari mulai menguasai dasar sampai membangun karya-karya yang bisa dikumpulkan ke dalam satu portofolio. Setelah menguasai dasar, mungkin bisa dari buku cetak atau sumber online, langkah tepat berikutnya adalah mengikuti kelas yang memiliki case study  projek yang benar-benar dipakai di dunia nyata. Sudah banyak kelas Desain yang tersedia baik itu online atau offline, yang memungkinkan konsultasi projek bersama Mentor bahkan sampai penyaluran kerja setelah case study diselesaikan. Dengan bergabung di kelas, Anda bisa terus semangat dan belajar jadi lebih terarah. Pilihlah kelas yang sesuai minat dan bakat agar portofolionya nanti bisa langsung dipakai untuk mencari pekerjaan impian. BuildWith Angga bisa menjadi pilihan untuk Anda yang ingin membuat projek desain yang cantik dan fungsional. Materi yang ada pun beragam diantaranya tentang prototype dengan Adobe XD, membuat UI Animation atau tutorial lengkap UI Design di Figma. Case study yang Anda buat di kelas, nantinya bisa Anda susun menjadi portofolio dan tampilkan di platform online agar mudah diakses siapa pun, termasuk  calon rekruter atau klien yang bisa jadi adalah rekan kerja Anda di masa depan.

Kelas Freelance 101 : Modal Sejuta Bisa Untung Puluhan Juta di BuildWith Angga

Freelance 101 : Modal Sejuta Bisa Untung Puluhan Juta

Meraih sukses melalui jalur freelance bukanlah hal yang mustahil. Sama halnya pekerjaan kantoran, freelance adalah pekerjaan yang menjanjikan. Dengan menjadi pekerja lepas, kita bisa mencukupi kebutuhan sehari-hari dan bahkan mampu mewujudkan semua wishlist yang kita miliki selama ini. Ada beberapa strategi penting yang menjadi kunci keberhasilan freelance, dari yang gratis sampai berbayar. Siapa pun bisa freelance, namun hanya sedikit yang benar-benar bisa menghasilkan dalam jangka panjang. Penting bagi pekerja lepas untuk konsisten mengembangkan diri melalui berbagai projek, namun ada baiknya mereka mulai investasi sedikit uang untuk portofolio online agar personal branding mereka menjadi lebih baik. Berikut kami rangkum cara meraih keuntungan freelance puluhan juta per bulan untuk Anda yang ingin membangun masa depan lebih baik. Semoga bermanfaat, ya 😊 Beli domain .Com & shared hosting sesuai kebutuhan By: Wikipedia Saat ini .Com adalah salah satu domain yang paling banyak digunakan di internet. Domain ini sangat cocok bagi siapa pun yang ingin membuat website untuk tujuan komersial. Dengan memakai .Com, portofolio Anda bisa lebih stand out dan nampak profesional. Untuk langkah awal pada website, Anda bisa buat landing page sederhana berisi informasi kontak yang aktif dan bisa juga cantumkan logo sesuai bidang bisnis. Bila sudah pernah mengambil projek, pilihlah beberapa projek terbaik dan cantumkan pada laman website agar meningkatkan trust para klien terhadap Anda. Kalau Anda tidak paham coding, Anda bisa memakai jasa shared hosting untuk mengelola website. Sekarang sudah banyak penyedia hosting di pasaran yang biayanya terjangkau, bahkan pelajar pun dapat dengan mudah menggunakan jasanya. Dengan pakai shared hosting, nantinya Anda bisa tinggal fokus mengatur konten website Anda agar kelihatan lebih kredibel. Bangun website portofolio dengan free template dan Webflow By: Panka Cara mudah pertama untuk membangun website adalah dengan memakai template gratis. Bagi para pemula, template siap pakai sangat berguna karena biayanya murah, proses pengerjaan cepat serta desain tampilan yang dihasilkan sudah teruji berkualitas dan bisa responsif untuk versi mobile. Ada banyak penyedia template seperti Website Builder BWA yang bisa jadi cara praktis namun bermanfaat bagi Anda yang ingin membuat website cepat dengan desain terkini agar bisa menarik perhatian para klien dari seluruh dunia. Nah untuk Anda para desainer, mungkin akan lebih tertarik untuk membuat website dari desain milik Anda pribadi dengan bantuan Webflow. Desain website yang original dapat menunjukkan daya tarik tersendiri di mata klien, dan dengan Webflow Anda tidak perlu repot-repot lagi untuk mengurus back-end website. Anda hanya fokus mendesain, dan Webflow yang akan melakukan coding sekaligus hosting untuk website Anda. Mudah bukan membuatnya? 😉 Cantumkan link website pribadi di Upwork atau Fiverr By: Domenico Loia Setelah berhasil membangun website, mulailah bergabung pada platform pencarian kerja khusus freelance seperti Upwork dan Fiverr. Pada situs ini, banyak sekali praktisi di bidang kreatif yang mencari kesempatan remote working diantaranya penulis, graphic designer, hingga web developer. Untuk para pemula, mulailah dari melengkapi profil pada situs secara lengkap, dan tunjukkan kredibilitas dengan menyertakan link website portofolio agar calon klien bisa melihat track record pengalaman kerja Anda. Supaya mendapat klien dengan prospek yang bagus, Anda bisa memilih untuk berlangganan pada situs tersebut, tentunya disesuaikan dengan budget Anda, ya. Agar memudahkan proses pencarian kerja, ada baiknya Anda memahami bahasa Inggris dan cara pitching yang baik dan benar. Anda bisa mempelajarinya di BuildWith Angga, YouTube, atau sumber belajar lainnya. Kemampuan komunikasi yang baik tidak hanya berguna untuk proses perekrutan, namun juga saat proses kerja berlangsung hingga projek berhasil diselesaikan. Bila klien merasa cocok dan puas, Anda bisa terus bekerjasama dengan mereka dalam jangka panjang. Bangun real-time project bersama tim By: Leon Saat membangun portofolio, Anda harus bisa menampilkan semua skill yang Anda miliki agar klien mengetahui sejauh mana projek yang bisa Anda ciptakan. Bila Anda seorang Full Stack Developer, Anda bisa langsung menunjukkannya melalui fitur-fitur pada website portofolio. Fitur tersebut harus memiliki UI yang menarik dan dapat diakses langsung oleh klien saat sedang menjelajahi website Anda. Lalu yang tak kalah penting, selalu cantumkan update projek yang telah Anda kerjakan, terutama projek kompleks yang membutuhkan tim untuk pengerjaannya. Hasil projek untuk klien bisa Anda taruh juga di portofolio dan ceritakanlah proses behind the scene agar klien memahami pola pikir dan cara kerja Anda. Dengan semakin sering bekerja bersama orang-orang dari berbagai spesialisasi, Anda berarti memperluas koneksi dan meningkatkan berbagai skill yang Anda miliki. Kedepannya Anda bisa menjadi pribadi yang lebih profesional, mampu menghadapi situasi kerja freelance apa pun. Dan tentunya pekerjaan Anda akan terasa lebih efisien dengan hasil yang jauh lebih memuaskan.

Kelas Berlatih Membuat User Flow Menggunakan Whimsical di BuildWith Angga

Berlatih Membuat User Flow Menggunakan Whimsical

Hello people with the spirit of learning! Ketika membangun suatu aplikasi/website maka tahap utama yang perlu dilakukan adalah merancang alurnya/user flow.  User flow adalah kumpulan langkah-langkah yang harus dilakukan oleh user saat menggunakan suatu produk untuk menyelesaikan suatu tugas tertentu. Pada tips kali ini kita akan membuat user flow dengan tugas memesan ojek online. tools yang akan kita gunakan yaitu Whimsical yang bisa kalian akses melalui website https://whimsical.com. Oke langsung aja kita mulai. Step 1 :  Menentukan Study Case Disini kita akan merancang user flow untuk fitur memesan ojek online. berikut adalah langkah-langkah untuk membuat user flow : Menentukan kebutuhan userMembuat langkah-langkah yang dilakukan userMembuat User Flow Step 2 :  Menentukan Kebutuhan User Untuk menentukan kebutuhan user biasanya kita dapat melakukan riset untuk memahami lebih dalam apa yang user butuhkan dan harapkan. Contoh nya sepeti ini:  Sebagai user, saya dapat mengetahui lokasi driver ojek terdekatSebagai user saya dapat menentukan kemana saya ingin pergiSebagai user, saya dapat menentukan dimana saya ingin dijemput Step 3 : Membuat Langkah-langkah yang dilakukan user Langkah 1 : User membuka aplikasiLangkah 2 : User menentukan lokasi kemana dia ingin pergiLangkah 3 : User menentukan lokasi penjemputanLangkah 4 : User order ojek Step 4 : Membuat User Flow Menggunakan Whimsical Pertama buka website https://whimsical.com/, kemudian daftar atau login. Step 5 : Buat Project Flowchart Setelah daftar, kemudian buat project baru, lalu pilih menu +Flowchart Step 6 : Membuat Shape Baru Berikutnya, untuk membuat sebuah shape baru, kalian bisa menekan S pada keyboard, atau pilih menu Add Shape lalu pilih shape yang ingin kalian pakai. Step 7 : Membuat User Flow Untuk menambahkan shape, kalian dapat memilih menu Add Shape lalu pilih element yang ingin digunakan seperti Rectangle, Oval, atau yang lainnya namun harus kita sesuaikan bedasarkan fungsinya. Fungsi Simbol-simbol dalam Flowchart Step 8 Finishing User Flow Setelah itu, kalian bisa lanjut mebuat user flow hingga selesai seperti gambar diatas.  Dan kalian telah menyelesaikan sebuah user flow yang akan diubah menjadi wireframe pada tahap design berikutnya. Nah, Sekarang kalian sudah paham kan? Jika masih kesulitan kalian bisa tulis pertanyaan di DM Instagram saya @fransfeby.  Jika kalian ingin mempelajari user flow lebih lanjut, kalian bisa mengikuti kelas UI/UX Design: Gestalt Principle. Terimakasih sudah membaca artikel ini. Semoga bermanfaat. :))