Tips Code

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.

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 

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!

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!

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!

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

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). Silahkan pelajari berbagai kelas React JS gratis di BuildWithAngga untuk meningkatkan skills kamu lebih mantap lagi sebagai front-end developer di tahun 2023.

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,wght@0,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:wght@400;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,wght@0,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,wght@0,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:wght@400;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!

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! Well, sebenarnya ada cara yang lebih baik untuk memberikan warna dengan design system dari aplikasi kita, jadi misalnya daripada menggunakan kode 0xffffffff maka kita bisa menggunakan text seperti White, apabila kamu ingin belajar terkait design system bisa coba pelajari kelas online gratis Flutter for Designer di BuildWith Angga. 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!

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.