Tips Code

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.

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.

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 :)

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.

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

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!

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!

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.

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!

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.