[{"content":"","date":"26 August, 2023","permalink":"/tags/android/","section":"Tags","summary":"","title":"Android"},{"content":" Enumeration # ","date":"26 August, 2023","permalink":"/belajar/mobile/dasarkotlin2/","section":"Materi","summary":" Enumeration # ","title":"Control Flow"},{"content":"","date":"26 August, 2023","permalink":"/tags/dasar-kotlin/","section":"Tags","summary":"","title":"Dasar Kotlin"},{"content":"","date":"26 August, 2023","permalink":"/tags/kotlin/","section":"Tags","summary":"","title":"Kotlin"},{"content":"","date":"26 August, 2023","permalink":"/series/kotlin-mobile-developer/","section":"Series","summary":"","title":"Kotlin Mobile Developer"},{"content":"","date":"26 August, 2023","permalink":"/tags/mobile-developer/","section":"Tags","summary":"","title":"Mobile Developer"},{"content":"","date":"26 August, 2023","permalink":"/series/","section":"Series","summary":"","title":"Series"},{"content":"","date":"26 August, 2023","permalink":"/tags/","section":"Tags","summary":"","title":"Tags"},{"content":" Data Types \u0026amp; Variable # Char String Array Numbers Booleans 1 var identifier: Type = initialization var and val is a key : var can we put a new value but val cannot company is identifier or we call name of variable String is type or we call type data BlocDev is initialize or we call value 1 2 var company: String = \u0026#34;BlocDev\u0026#34; company = \u0026#34;Berkah Tech Indonesia\u0026#34; Char or Character # 1 2 3 4 5 6 var vocal = \u0026#39;A\u0026#39; println(\u0026#34;Voval \u0026#34;+vocal++) // A println(\u0026#34;Voval \u0026#34;+vocal++) // B println(\u0026#34;Voval \u0026#34;+vocal++) // C println(\u0026#34;Voval \u0026#34;+vocal--) // D println(\u0026#34;Voval \u0026#34;+vocal--) // C String # 1 2 3 4 5 6 7 8 var vocal = \u0026#39;A\u0026#39; val textString = \u0026#34;Edwin\u0026#34; val firstChar = textString[0] println(firstChar) for (char in textString){ print(\u0026#34;$char \u0026#34;) } Escaped String # \\t: menambah tab ke dalam teks. \\n: membuat baris baru di dalam teks. \\’: menambah karakter single quote kedalam teks. \\”: menambah karakter double quote kedalam teks. : menambah karakter backslash kedalam teks. 1 2 3 var dataString = \u0026#34;Kotlin is \\\u0026#34;awesome!\\\u0026#34;\u0026#34; dataString = \u0026#34;\\u00A9 2023\u0026#34; // © 2023 println(dataString) Raw String # Sebelum Raw String\n1 2 3 4 5 6 val line = \u0026#34;Line 1\\n\u0026#34; + \u0026#34;Line 2\\n\u0026#34; + \u0026#34;Line 3\\n\u0026#34; + \u0026#34;Line 4\\n\u0026#34; println(line) Setelah Raw String\n1 2 3 4 5 6 7 val line = \u0026#34;\u0026#34;\u0026#34; Line 1 Line 2 Line 3 Line 4 \u0026#34;\u0026#34;\u0026#34;.trimIndent() println(line) Functions # 1 2 3 4 5 6 7 fun tampilData(nama: String, usia: Int,alamat: String): String { return \u0026#34;Hello nama saya $nama berusia $usia beralamat $alamat\u0026#34; } fun tampilData(nama: String, usia: Int,alamat: String) = \u0026#34;Hello nama saya $nama berusia $usia beralamat $alamat\u0026#34; println(tampilData(\u0026#34;Edwin\u0026#34;,21, \u0026#34;Bermis 2 Selong\u0026#34;)) 1 2 3 4 5 fun tampilDataPrint(nama: String, usia: Int, alamat: String): Unit{ println(\u0026#34;Hello nama saya $nama berusia $usia beralamat $alamat\u0026#34;) } tampilDataPrint(nama = \u0026#34;Edwin\u0026#34;, usia = 21, alamat = \u0026#34;Berims 2 Selong cuy\u0026#34;) If Expression # 1 2 3 4 5 6 val angkaSatu = 4 val angkaDua = 9 val hasil = if (angkaSatu \u0026gt; 5){ \u0026#34;Angka lebih dari lima\u0026#34; }else {\u0026#34;Angka kurang dari 5\u0026#34;} println(hasil) Bool # 1 2 3 4 5 val jamBuka = 9 val jamTutup = 15 val waktu = 16 val toko = waktu \u0026gt;= jamBuka \u0026amp;\u0026amp; waktu \u0026lt;= jamTutup println(\u0026#34;Toko sedang buka : $toko\u0026#34;) Numbers # Int 32 : Mengandung data dengan ukuran 32bit Long 64 : Mengandung data dengan ukuran 64bit Short 16 : Mengandung data dengan ukuran 16bit Byte 8: Mengandung data dengan ukuran 8bit Double 64: Mengandung data nilai pecahan dengan ukuran 64bit Float 32: Sama dengan double namun dengan ukuran lebih kecil yaitu 32bit 1 2 3 4 val maxInt = Int.MAX_VALUE // Untuk melihat nilai tertinggi dari int val minInt = Int.MIN_VALUE // Untuk melihat nilai terendah dari int println(minInt) Konversi ke masing-masing type data\ntoByte(): Byte toShort(): Short toInt(): Int toLong(): Long toFloat(): Float toDouble(): Double toChar(): Char 1 2 3 4 val byteNumber: Byte = 7 val intNumber: Int = byteNumber.toInt() println(intNumber) Array # 1 2 3 4 5 6 7 val kumpulanArray = arrayOf(1,3,5,7) val campuranArray = arrayOf(1,3,5,7,\u0026#34;Kotlin\u0026#34;,true) campuranArray[4] = \u0026#34;Edwin\u0026#34; print(campuranArray[4]) Konversi ke masing-masing array\nintArrayOf() : IntArray booleanArrayOf() : BooleanArray charArrayOf() : CharArray longArrayOf() : LongArray shortArrayOf() : ShortArray byteArrayOf() : ByteArray Nullable # NullPointerException(NPE) atau istilahnya The Billioner Dollar Mistake Sebuah kondisi sebuah nilai mengandung null\nAda beberapa cara mengatasi nilai yang null\nDengan menambahkan ? pada type data Memberikan nilai default ketika data bisa jadi null 1 2 3 4 5 6 7 val text: String = null //Akan terjadi error, karena nilai mengandung null val text: String? = null //Tidak error, karena kita mendefinisikan nilai itu boleh null if (text != null){ // Kita juga bisa menggunakan perkondisian untuk mengatasi nilai null print(text) } Safe Call Operator \u0026amp; Elvis Operator # Safe Call Operator # Akan memberikan nilai null. Menggunakan tanda ?.\n1 2 3 val text: String? = null print(text?.length) Elvis Operator # Akan memberikan default nilai jika mendapati nilai null. Menggunakan tanda ?:\n1 2 3 val text: String? = null print(text?.length ?: 7) String Template # Menyisipkan nilai variable pada sebuah string\n1 2 val nama = \u0026#34;Edwin\u0026#34; val alamat = \u0026#34;Bermis 2 Selong\u0026#34; Bisa menggunakan $namaVariable pada sebuah string print\n1 (\u0026#34;Hal nama saya $nama, saya berasal dari $alamat\u0026#34;) Bisa menggunakan + pada sebuah string\n1 print(\u0026#34;Hal nama saya \u0026#34;+ nama+\u0026#34;, saya berasal dari \u0026#34;+alamat) Bisa menggunakan curly braces atau ${ } untuk menambahkan function\n1 2 val angka = 7 print(\u0026#34;toko ${if (angka \u0026gt; 7) \u0026#34;sudah tutup\u0026#34; else \u0026#34;sudah buka\u0026#34;}\u0026#34;) ","date":"24 August, 2023","permalink":"/belajar/mobile/dasarkotlin/","section":"Materi","summary":"Data Types \u0026amp; Variable # Char String Array Numbers Booleans 1 var identifier: Type = initialization var and val is a key : var can we put a new value but val cannot company is identifier or we call name of variable String is type or we call type data BlocDev is initialize or we call value 1 2 var company: String = \u0026#34;BlocDev\u0026#34; company = \u0026#34;Berkah Tech Indonesia\u0026#34; Char or Character # 1 2 3 4 5 6 var vocal = \u0026#39;A\u0026#39; println(\u0026#34;Voval \u0026#34;+vocal++) // A println(\u0026#34;Voval \u0026#34;+vocal++) // B println(\u0026#34;Voval \u0026#34;+vocal++) // C println(\u0026#34;Voval \u0026#34;+vocal--) // D println(\u0026#34;Voval \u0026#34;+vocal--) // C String # 1 2 3 4 5 6 7 8 var vocal = \u0026#39;A\u0026#39; val textString = \u0026#34;Edwin\u0026#34; val firstChar = textString[0] println(firstChar) for (char in textString){ print(\u0026#34;$char \u0026#34;) } Escaped String # \\t: menambah tab ke dalam teks.","title":"Kotlin Fundamental"},{"content":" Pengantar # Dahulu untuk memindahkan suatu barang berat ke tempat lain diperlukan usaha fisik yang berat pula. Problem ini menjadi lebih ringan dengan ditemukannya alat yang bernama roda, di mana pengaplikasiannya memudahkan proses transportasi pengangkutan barang. Dari dahulu sampai sekarang, memang manusia selalu mencari cara untuk mempermudah pekerjaan mereka di segala bidang, baik di bidang transportasi, pertanian, pendidikan, atau perekonomian. Perilaku inilah yang mendorong manusia mampu berkembang seiring zaman.\nSaat ini di abad ke 21, semuanya sudah serba mudah dengan bantuan alat yang dinamakan komputer. Hanya dengan satu komputer, banyak sekali kebutuhan-kebutuhan manusia yang bisa diselesaikan olehnya. Dulu untuk mengirim pesan, kita harus memanfaatkan surat yang tentunya akan memakan waktu tergantung dari jarak tujuan suratnya. Bandingkan dengan menggunakan komputer, untuk mengirim pesan kita cukup meluangkan waktu untuk menulis dan kemudian kirim ke alamat tujuan, tak hanya sampai 5 menit, pesan kita sudah bisa ke manapun tanpa terhalang tembok yang bernama jarak.\nSama halnya dengan penemuan roda, ditemukannya roda adalah karena ada kebutuhan pada aktivitas manusia, yang mendorong seseorang untuk berpikir kemudian mencari solusi untuk kebutuhan tersebut. Begitu pula dengan kebutuhan di era yang serba mudah saat ini, kebutuhan manusia bahkan bertambah berkali-kali lipat dari zaman dahulu, alhasil banyak solusi-solusi mutakhir yang bahkan merevolusi perilaku manusia secara utuh. Ambil saja misal internet dengan website-nya. Website adalah bentuk solusi dari kebutuhan manusia, mulai dari kebutuhan transaksi barang hingga interaksi manusia melewati media sosial.\nTak hanya website, sejak adanya smartphone muncul ribuan bahkan ratusan ribu aplikasi yang bisa diakses melalui marketnya. Ada aplikasi kalkulator yang mempermudah akses ke alat penghitung pada setiap saat, atau bahkan aplikasi dari bank yang mampu melakukan transfer uang kapan pun dan di mana pun. Tapi apakah aplikasi-aplikasi ini bisa muncul secara tiba-tiba di suatu market? Kalau tidak tiba-tiba, bagaimanakah prosesnya? Atau mungkin, siapa sih yang membuat aplikasi-aplikasi tersebut?\nTergantung dari aplikasi yang akan dibuat, pembuatan software bisa memakan waktu dari beberapa minggu hingga tahunan. Aplikasi sederhana seperti kalkulator mungkin cukup dibutuhkan 1-2 orang dengan waktu cukup singkat juga untuk menyelesaikannya. Akan tetapi aplikasi kompleks seperti ojek online dengan segala fiturnya, bisa membutuhkan ratusan orang dengan waktu berbulan-bulan.\nPembuatan aplikasi menjadi satu hal, akan tapi mengelolanya dengan melakukan berbagai macam update sesuai kebutuhan pengguna, juga merupakan hal yang tak kalah penting demi menjaga aplikasi tetap relevan dengan penggunanya.\nDalam dunia software development (pengembangan aplikasi), ada beberapa proses yang bisa diikuti untuk membuat suatu aplikasi. Dimulai dari perencanaan hingga ke pengelolaan, biasanya runtutan ini disebut dengan Software Development Life Cycle (SDLC).\nBerikut ilustrasinya prosesnya:\nPlanning: Perencanaan\nAnalysis: Analisis\nDesign: Desain\nDevelopment: Pengembangan\nTesting: Pengujian\nDeployment : Penggelaran\nMaintenance: Pemeliharaan\nTiap-tiap proses dalam SDLC adalah penting, di mana setiap proses akan memberikan dampak terhadap proses setelahnya. Misalnya jika kita melakukan proses planning, analysis, dan design secara matang, maka proses implementasi dan testing akan bisa dieksekusi secara lebih baik dan juga lancar. Kebalikannya, jika proses implementasi dan testing tidak bisa dilakukan secara baik, maka proses maintenance (pemeliharaan) akan mengalami banyak masalah.Dalam pengembangan aplikasi, untuk mengetahui kebutuhan pengguna secara utuh, biasanya dilakukan proses pembuatan dokumen User Requirements Specification (URS) atau User Requirement Document (URD). Dokumen ini bukan bersifat teknis, melainkan dibikin dengan format agar semua orang dapat membaca dan paham dengan gambaran besarnya.\nTapi yang perlu diingat adalah kebutuhan pengguna sangatlah beragam yang tentunya akan menjadi tantangan tersendiri dalam proses pengembangan aplikasi. Dengan fakta beragamnya kebutuhan pengguna, maka akan menjadi mustahil untuk membuat solusi aplikasi yang bisa memenuhi kebutuhan semua pengguna secara sempurna. Pasti akan bertemu dengan titik di mana kita harus mengambil keputusan dan akan muncul pertanyaan, “Apakah keputusan ini menguntungkan? Bukankah ini akan merugikan kelompok tertentu?”. Hal ini sudah menjadi lazim dalam pengembangan aplikasi, makanya banyak sekali opsi-opsi atau alternatif dalam dunia aplikasi, misalnya ada dua aplikasi yang memiliki tujuan sama akan tetapi fiturnya sangat berbeda.\nSeperti yang kita tahu, User Requirement Specification diperlukan sebelum mengembangkan aplikasi. Lalu pertanyaannya,\nApa saja yang harus diperhatikan ketika membuat User Requirement Specification (URS)? Poin-poin penting apa saja yang tidak boleh terlewatkan ketika membuatnya? Mari kita bahas.\nURS dibuat supaya stakeholder (pemegang kepentingan) dapat memahami suatu aplikasi yang ingin dibuat. Sehingga, ketika ada yang membaca dokumen ini, mereka akan mendapat pemahaman yang sama dan mengurangi kesalahpahaman yang terkadang membuat proses pengembangan menjadi terhambat.\nDalam pembuatan URS tidak boleh menggunakan jargon teknis yang hanya dipahami oleh sekelompok orang saja. Misalnya, kita tidak boleh menggunakan istilah encryption (enkripsi) karena mungkin hanya pengembang aplikasi di bidang security (keamanan) saja yang mengetahui artinya.\nKemudian dalam pembuatan dokumen URS, penggunaan media seperti tabel atau diagram sangat disarankan karena dapat mempermudah penyampaian pesan asli terkait kebutuhan pengguna.\nLalu, bagaimana cara mendapatkan kebutuhan pengguna? Untuk menjawab pertanyaan tersebut, kita perlu melakukan requirement gathering.\nRequirement gathering adalah proses mendapatkan informasi dari para stakeholder (pemegang kepentingan), seperti manajer, developer, customer, dan user. Teknik yang dapat digunakan untuk requirement gathering, antara lain interview, user stories, straw man documents, dan prototyping.\nOke, mari kita bahas satu per satu.\nInterview # Pertama adalah interview. Proses interview pada dasarnya merupakan proses tanya jawab, di mana kita menanyakan suatu pertanyaan, kemudian dijawab oleh peserta wawancara. Selain memberikan pertanyaan, kita juga perlu mencatat apa saja yang disampaikan oleh peserta wawancara.\nBahkan tidak hanya dengan itu, interview juga bisa dilakukan dengan beberapa cara.\nCara pertama adalah Master-apprentice relationship.Cara ini merupakan proses transfer knowledge (transfer pengetahuan) dengan maksud mengajari suatu hal. Di sini seorang master (pengajar) dapat menanyakan beberapa hal sambil memberikan arahan kepada apprentice-nya (yang diajar). Kedua, kita dapat meminta seseorang untuk mengajarkan kepada kita apa yang mereka lakukan. Ketiga, kita dapat mengamati seseorang ketika melakukan suatu tugas. Sehingga, kita dapat mengetahui penyebab terhambatnya suatu proses atau bahkan faktor yang dapat membantu proses mereka menjadi lebih baik. User Stories # Selain menggunakan teknik interview, kita juga bisa menggunakan teknik User Stories.\nUser stories digunakan sebagai kriteria dalam menentukan product acceptance atau produk yang diinginkan. Selain itu, teknik ini juga dapat meningkatkan pemahaman tentang produk yang kita buat. Sebab, melalui user stories, Anda dapat menemukan berbagai kelebihan dan kekurangan dari suatu produk. Sehingga, Anda dapat mengetahui bagian manakah yang harus diperbaiki.\nUser Stories dilakukan dengan menuliskan kebutuhan user sesuai dengan role dan keinginannya. Contoh format penulisan user stories adalah sebagai berikut:\nSebagai seorang [deskripsi dari pengguna], Saya menginginkan [suatu fungsionalitas], sehingga mendapatkan [suatu kemampuan atau fitur tertentu].\nStraw Man Documents # Teknik selanjutnya adalah Straw Man Documents. Teknik ini berguna untuk menyampaikan ide dari aplikasi tanpa menuliskan kode program apa pun. Teknik Straw Man Documents dapat dilakukan dengan berbagai macam media, misalnya storyboards, flowcharts, dan mock-up html.\nPrototyping # Selanjutnya kita beralih ke teknik terakhir yaitu Prototyping. Teknik ini merupakan proses pembuatan prototipe program yang terbatas pada fungsionalitas utama saja. Dengan prototyping, kita bisa mendapatkan feedback yang lebih lengkap karena stakeholder sudah bisa mencoba langsung dan mendapatkan gambaran cara kerja aplikasi ketika sudah selesai nantinya. Namun, prototyping membutuhkan biaya ekstra karena mau tidak mau kita harus membuat programnya terlebih dahulu meskipun fungsionalitasnya terbatas. Selain itu, jika ada feedback dari stakeholder yang bertolak belakang, akan menyebabkan keluarnya biaya tambahan lagi untuk mengubahnya.\nNah, dengan adanya pembahasan materi tadi, diharapkan Anda dapat menerapkannya untuk menentukan kebutuhan aplikasi dari sisi pengguna sebelum membuat sebuah aplikasi. Tetap Semangat, ya!\nUser Requirement Specification # Hai!\nSupaya Anda lebih memahami tentang kebutuhan aplikasi dari sisi pengguna, mari kita coba menerapkannya berdasarkan studi kasus tertentu. Contoh studi kasus yang akan kita buat kali ini adalah User Requirement Specification terkait proses login dan logout.\nPasti Anda sudah sering mendengar proses login dan logout, bukan? Proses login dan logout sudah biasa digunakan dalam suatu aplikasi, sehingga banyak pengguna akan familier dengan proses tersebut. Walaupun sudah umum digunakan dalam suatu aplikasi, terkadang dalam proses implementasi login dan logout akan berbeda antara aplikasi satu dengan aplikasi lainnya. Oleh karena itu, kita perlu menentukan kebutuhan dari sisi pengguna terlebih dahulu.\nKali ini kita akan menggunakan teknik interview untuk mengumpulkan informasi terkait kebutuhan aplikasi yang ditujukan untuk end-user atau calon pengguna nantinya. Salah satu contoh pertanyaan yang dapat diajukan adalah sebagai berikut:\n\u0026ldquo;Apa yang sebenarnya diharapkan pengguna ketika melakukan proses login atau logout?\u0026rdquo;\nSetelah Anda menanyakan hal tersebut, bersiaplah untuk mencatat jawaban dari pengguna. Anggap saja Anda memperoleh beberapa jawaban seperti berikut:\nDi halaman login seharusnya pengguna bisa melakukan proses login dengan memasukkan email dan password. Ketika pengguna melakukan proses logout, ia akan secara otomatis pindah ke halaman login. Oke, kita telah berhasil mendapat 2 user requirements. Sehingga dari dua jawaban tersebut, kita bisa mengetahui kebutuhan pengguna terkait proses login logout. Nah, setelah mengetahui user requirement-nya, langkah apa yang selanjutnya dapat dilakukan?\nUntuk mengetahui jawabannya, mari kita ke materi selanjutnya untuk mulai membahas Spesifikasi Teknis Aplikasi.\nSelamat belajar.\n","date":"16 August, 2023","permalink":"/belajar/becomesome/programming/","section":"Materi","summary":"Pengantar # Dahulu untuk memindahkan suatu barang berat ke tempat lain diperlukan usaha fisik yang berat pula.","title":"Hal yang perlu di pelajari sebelum menjadi programming"},{"content":"","date":"5 August, 2023","permalink":"/belajar/becomesome/","section":"Materi","summary":"","title":"Dasar Belajar Programming"},{"content":" Array # Tipe data yang mendeskripsikan kumpulan elemen (nilai dan variable), yang tiap-tiap elemnnya memiliki index.\nvar bulan = [“januari”, “februari”, “maret”, “April”] 0 1 2 3 Januari Februari Maret April bulan[0]; // januari bulan[3]; // april Array multidimensi # var angka = [1, 2, , 3, 5, [100, 200, 300]]; bulan[4][1]; // 200 Manipulasi array # - Mengubah elemen array var buah = [“apel”, “jeruk”, “mangga”] buah[2] = “semangka” // [‘apel’, ‘semangka’, ‘mangga’] - Menambahkan elemen array var buah = [“apel”, “jeruk”, “mangga”] Buah.push(“semangka”) // [‘apel’, ‘jeruk’, ‘mangga’, ‘semangka’] - Mengahapus elemen var buah = [“apel”, “jeruk”, “mangga”] buah[2] = undefined // [‘apel’, undefined, ‘mangga’] Method array # Method .push() // menambah elemen di akhir (number, string, array dll) Method .push() // menambah elemen di awal (number, string, array dll) Method .pop() // menghapus elemen terakhir Method .shift() // menghapus elemen pertama Method .forEach() // melakukann pengulangan pada array Method .map() // membuat array baru sambil melakukan operasi terhadap elemen array Method .filter() // membuat array baru dengan memperhatikan kondisi tertentu pada setiap elemen array yang sudah ada Method .reduce() // berfungsi menjumlahkan elemen array dari kiri ke kanan Objects # “in JavaScript, objects are king, if you understand objects, you understand JavaScript”\n“an objects is a collection of properties, and a property is an association between a name (or key) and a value”\n@POORCODERS\nMembuat object # var person = { firstname : ‘lionel’, lastname : ‘messi’, age : 40 } // {firstname : ‘lionel’, lastname : ‘messi’, age : 40} objectname.properti/key // person.age or objectname[‘key’] // person[“age”] var person = new Object() person.firsname = ‘lionel’ person.lastname = ‘messi’ person.age = 40 // menambah dan menghapus properti person.tinggi = ‘170 cm’ delete person.tinggi Document Object Model # Saat halaman web dimuat, browser membuat Model Objek Dokumen dari halaman tersebut.\nDengan model objek, JavaScript mendapatkan semua kekuatan yang diperlukan untuk membuat HTML dinamis:\nJavaScript dapat mengubah semua elemen HTML di halaman JavaScript dapat mengubah semua atribut HTML di halaman JavaScript dapat mengubah semua gaya CSS di halaman JavaScript dapat menghapus elemen dan atribut HTML yang ada JavaScript dapat menambahkan elemen dan atribut HTML baru JavaScript dapat bereaksi terhadap semua peristiwa HTML yang ada di halaman JavaScript dapat membuat acara HTML baru di halaman Yang akan kita pelajari :\nCara mengubah konten elemen HTML Cara mengubah gaya (CSS) elemen HTML Bagaimana bereaksi terhadap acara DOM HTML Bagaimana cara menambah dan menghapus elemen HTML \u0026ldquo;Model Objek Dokumen (DOM) adalah platform dan antarmuka bebas bahasa yang memungkinkan program dan skrip mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.“\n~ W3school ~\nMengakses elemen # Method Ket getElementById() Memilih elemen berdasarkan attribute id getElementsByTagName() Memilih elemen berdarkan nama tag (return html collection) getElementsByClassName Memilih elemen bersarkan nama kelas (return html collection) querySelector() Memilih elemen berdasarkan selector querySelectorAll() Memilih semua elemen berdasarkan selector (return html collection) Merubah elemen HTML # Properti Ket elemen.innerHTML = new html content Merubah elemen HTML pada elemen elemen.attribute = new value Merubah nilai attribute elemen elemen.style.property = new style Merubah style elemen Method Ket elemen.setAttribute(attribute, value) Membuat attribute atau merubah nilai attribute elemen.getAttribute(attribute) Mengambil nilai attribute elemen.removAttribute(attribute) Menghapus attribute elemen.classList.add() Menambah kelas pada elemen elemen.classList.remove() Menghapus kelas pada elemen elemen.classList.toggle() Menghapus kelas jika ada dan menambah kelas jika tdak ada elemen.classList.replace(a, b) Mengganti nama kelas a menjadi b pada elemen DOM Events # Event pada javascript merepresentasikan sebuah kejadian yang terjadi di dalam DOM, kejadian tersebut bisa dilakukan oleh user (mouse event, keyboard event, dll) ataupun dilakukan secara otomatis oleh API (animasi selesai dijalankan, halaman selesai diload, dll)\n- Mendengarkan Event Event Handler (inline HTML attribute, elemen method) on\u0026lt;event\u0026gt; - addEventListener() Event List # Mouse Event Keyboard Event Resources Event Focus event View event Form event CSS Animation \u0026amp; Transition Event Drag \u0026amp; Drop Event dll ","date":"27 June, 2023","permalink":"/belajar/web/dasarjs2/","section":"Materi","summary":"Array # Tipe data yang mendeskripsikan kumpulan elemen (nilai dan variable), yang tiap-tiap elemnnya memiliki index.","title":"Dasar JavaScript Lanjutan"},{"content":"","date":"27 June, 2023","permalink":"/tags/dasar-js/","section":"Tags","summary":"","title":"Dasar JS"},{"content":"","date":"27 June, 2023","permalink":"/tags/javascript/","section":"Tags","summary":"","title":"JavaScript"},{"content":"","date":"27 June, 2023","permalink":"/tags/js/","section":"Tags","summary":"","title":"JS"},{"content":"","date":"27 June, 2023","permalink":"/tags/web-developer/","section":"Tags","summary":"","title":"Web Developer"},{"content":"","date":"27 June, 2023","permalink":"/series/web-developer/","section":"Series","summary":"","title":"Web Developer"},{"content":"","date":"26 June, 2023","permalink":"/tags/dart/","section":"Tags","summary":"","title":"Dart"},{"content":"","date":"26 June, 2023","permalink":"/tags/dasar-flutter/","section":"Tags","summary":"","title":"Dasar Flutter"},{"content":"","date":"26 June, 2023","permalink":"/tags/flutter/","section":"Tags","summary":"","title":"Flutter"},{"content":"","date":"26 June, 2023","permalink":"/series/mobile-developer/","section":"Series","summary":"","title":"Mobile Developer"},{"content":"","date":"26 June, 2023","permalink":"/tags/widget/","section":"Tags","summary":"","title":"Widget"},{"content":" Navigasi Multi Page Card Widget Textfield inkWell AppBar Expanded \u0026amp;\u0026amp; Divider ElevatedButton Navigasi Multi Page # Buat 2 file dengan menggunakan StatelessWidget bernama home.dart dan login.dart pada folder lib :\nPada home.dart kita akan memanggil\n1 2 3 4 5 6 7 8 9 10 class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: LoginPage(), ); } } Pada login page, kita menggunakan widget Navigator seperti pada baris 17 dan kita memanggil homepage di dalam MaterialPageRoute seperti pada baris ke 21.\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 class LoginPage extends StatelessWidget { const LoginPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text(\u0026#34;Ini halaman login\u0026#34;), ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) { return const HomePage(); }, ), ); }, child: const Text(\u0026#34;Login\u0026#34;), ), ], ), ), ); } } Pada home page, kita menggunakan widget Navigator seperti pada baris 17 dan kita memanggil homepage di dalam MaterialPageRoute seperti pada baris ke 21.\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text(\u0026#34;Ini halaman Home\u0026#34;), ElevatedButton( onPressed: () { Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) { return const LoginPage(); }, ), ); }, child: const Text(\u0026#34;Logout\u0026#34;), ), ], ), ), ); } } Card # Widget card memiliki ukuran sesuai dengan isi contentnnya.\nParameter widget card :\nParameter Fungsi color untuk memberikan background warna pada card shape untuk mengatur bentuk dari border pada card. Disini kita menggunakan widget RoundedRectangleBorder dan memberikan BorderRadius Circular untuk memberikan efek melengkung shadowColor untuk mengatur warna shadow dari card elevation untuk mengatur size shadow dari card 1 2 3 4 5 6 7 8 9 10 11 12 13 14 body: Center( child: Card( color: Colors.amber, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), shadowColor: Colors.red, elevation: 10, child: const Padding( padding: EdgeInsets.all(100), child: Text(\u0026#34;Ini card\u0026#34;), ), ), ), Textfield # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 body: Center( child: TextField( inputFormatters: [FilteringTextInputFormatter.digitsOnly], keyboardType: TextInputType.number, style: const TextStyle( fontSize: 18, fontWeight: FontWeight.w600, color: Colors.black, ), decoration: const InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.amber, ), ), border: OutlineInputBorder(), contentPadding: EdgeInsets.all(13), prefix: Icon(Icons.lock), ), ), ), Inkwell # body: Center( child: InkWell( borderRadius: BorderRadius.circular(3), splashColor: Colors.amber, highlightColor: Colors.white70, onTap: () {}, child: Padding( padding: EdgeInsets.all(8.0), child: Text(\u0026#34;ini inkwell\u0026#34;), ), ), ), AppBar # appBar: AppBar( title: const Text( \u0026#34;Berkah IT\u0026#34;, style: TextStyle( color: Colors.white, fontWeight: FontWeight.w600, fontSize: 18, ), ), leading: IconButton( icon: const Icon(Icons.arrow_back_ios_new_outlined), iconSize: 22, color: Colors.white, onPressed: () {}, ), elevation: 0, centerTitle: true, backgroundColor: Colors.amber, ), Expanded \u0026amp; Divider # Expanded # Pembungkus widget agar dapat menyesuaikan ukuran dari wdiget utama.\nDivider # Untuk menampilkan garis lurus.\nExpanded( child: Divider( color: Color(0xffA39797), thickness: 1, ), ), ElevatedButton # ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF009688), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), ), child: const Text( \u0026#34;Masuk\u0026#34;, style: TextStyle( fontFamily: \u0026#34;Plus Jakarta Sans\u0026#34;, fontSize: 20, fontWeight: FontWeight.w600), ), ), ","date":"26 June, 2023","permalink":"/belajar/mobile/flutterwidget3/","section":"Materi","summary":"Navigasi Multi Page Card Widget Textfield inkWell AppBar Expanded \u0026amp;\u0026amp; Divider ElevatedButton Navigasi Multi Page # Buat 2 file dengan menggunakan StatelessWidget bernama home.","title":"Widget Flutter Lanjutan 2"},{"content":" “ JavaScript is a High-level, scripting, untyped, and interpreted programming language. “\nType Data # Number :\t23, -5, 3.12, NaN, Infinity String :\t“hello”, ‘world’, `word` Boolean :\ttrue dan false Object :\t{ properti: ‘value }, Function :\tfunction (a, b) {} Undefined Operator # Sebuah symbol yang digunakan untuk melakukan operasi\nBinary (sebuah operator yang membutuhkan 2 operand) Aritmatika Penugasan Perbandingan Logika String Ternary (sebuah operator yang membutuhkan 3 operand) Kondisional Unary (sebuah operator yang membutuhkan 1 operand) typeof Aritmatika # ( + , - , * , / , % ) Penugasan # ( = , += , /= , -= , *= , %= ) Perbandingan # Logika # String # + \u0026#34;Hello\u0026#34; + \u0026#34;World = \u0026#34;Hello World\u0026#34;; Typeof # Digunakan untuk mengetahui tipe data\ntypeof operand; Kondisional # kondisi ? benar : salah; Variable # Sebuah tempat yang memiliki nama, yang fungsinya untuk menampung/menyimpan nilai\nDeclarasi, Inisialisasi, Assignment; var x; // declarasi dan inisialisasi x = 10;\t// assignment var, let, dan const Menulis javascript # \u0026lt;script\u0026gt;\u0026lt;/script\u0026gt;; Internal \u0026amp; eksternal; Popup box # Alert, prompt, dan confirm Pengulagan # while for do while While # while (kondisi) { aksi; } For # for (declarasi; kondisi; increment / decrement) { aksi; } for (var i = 10; i \u0026lt;= 10; i++) { aksi; } Perkondisian # If else # if (kondisi) { aksi; } var angka = 3; if (angka % 2 == 0) { console.log(angka + ‘ bilangan genap’) } else { console.log(angka + ‘ bilangan ganjil’) } ( ELSE IF ) nilai \u0026gt;= 85 == A nilai antara 76 dan 84 == B nilai dibawah 76 == C var nilai = 90; if (nilai \u0026gt;= 85) { console.log(‘A’’) } else if (nilai \u0026gt;= 76 \u0026amp;\u0026amp; nilai \u0026lt;= 84) { console.log(“B’’) } else { console.log(“C”) } Switch # Switch (kondisi) { case 1: aksi break; case 2: aksi break; default: aksi default break; } Function # Sebuah sub-program yang dapat di panggil di bagian lain pada program\nKenapa menggunakan function ?\nReusability (tidak mengulang-ulang script) Dekomposisi / Abstraksi Modularitas Kategori function\nBuilt-in Function (cth: alert(), prompt(), confirm()) User-Defined Function User-Defined Function # function name(parameter) { aksi; return; } function penjumlahan(a, b) { var hasil = a + b; return hasil; } Console.log(penjumlahan(5, 10)); Console.log(penjumlahan(100, 200)); Jenis Function\nDeclaration Expression Function Declaration # Lebih fleksibel (dapat ditulis dimanapun) tampilPesan(“windi”); function tampilPesan (nama) { alert(‘halo ’+nama) } Function Expression # Harus didefinisikan terlebih dahulu baru bisa di panggil Lebih powerfull var tampilPesan = function (nama) { alert(‘halo ‘ + nama) } tampilPesan (‘windi’) ","date":"23 June, 2023","permalink":"/belajar/web/dasarjs/","section":"Materi","summary":"“ JavaScript is a High-level, scripting, untyped, and interpreted programming language.","title":"Dasar Java Script"},{"content":"Widget Flutter Font Family List \u0026amp; List View Animated Container \u0026amp; Gesture Detector Flexibel Widget Stack Image Font Family # From Google : https://fonts.google.com/ flutter: uses-material-design: true fonts: - family: Open Sans fonts: - asset: fonts/OpenSans-VariableFont_wdth,wght.ttf List \u0026amp; List View # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class _MainAppState extends State\u0026lt;MainApp\u0026gt; { List\u0026lt;Widget\u0026gt; widgets = []; _MainAppState() { for (int i = 0; i \u0026lt; 40; i++) { widgets.add( Text( \u0026#34;Ini angka ke - $i\u0026#34;, style: const TextStyle(fontSize: 30), ), ); } } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: ListView( children: widgets, ), ), ); } } Animated Container \u0026amp;\u0026amp; Gesture Detector # Animated Container : Sebuah widget container yang memiliki animasi.\nGesture Detector : Sebuah widget yang akan mendeteksi gerakan atau sentuhan jari kepada layar handphone.\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 class _MainAppState extends State\u0026lt;MainApp\u0026gt; { Random random = Random(); // Random merupakan sebuah liblary bawaan dari flutter // untuk memberikan nilai random. @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: Center( child: GestureDetector( onTap: () { setState( () {}, ); }, child: AnimatedContainer( color: Color.fromARGB( 255, random.nextInt(256), random.nextInt(256), random.nextInt(256), ), duration: const Duration(seconds: 1), width: 50.0 + random.nextInt(101), height: 50.0 + random.nextInt(101), ), ), ), ), ); } } Flexible Widget # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 body: Column( children: [ Flexible( flex: 1, child: Container( color: Colors.red, ), ), Flexible( flex: 2, child: Container( color: Colors.black, ), ), Flexible( flex: 1, child: Container( color: Colors.red, ), ), ], ), Stack # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 body: Column( children: [ Stack( children: [ Container( color: Colors.red, width: double.infinity, height: 200, ), Container( color: Colors.black, width: double.infinity, height: 100, ), ], ), Container( color: Colors.yellow, width: double.infinity, height: 200, ), ], ), image # Pertama kita perlu membuat folder assets. Kemudian masukan file image kedalam folder assets tersebut. Setelah itu. Kita perlu membuka pubspec.yaml kemudian mengetik nama folder \u0026ldquo;assets/\u0026rdquo; seperti dibawah ini :\n1 2 3 4 5 flutter: uses-material-design: true assets: - assets/ Untuk memanggil image, kita gunakan widget Image dan menggunakan AssetImage. Kemudian memasukan \u0026ldquo;namafolder/namafile\u0026rdquo;.\n1 2 3 4 5 body: const Center( child: Image( image: AssetImage(\u0026#34;assets/aizen.jpeg\u0026#34;), ), ), ","date":"22 June, 2023","permalink":"/belajar/mobile/flutterwidget2/","section":"Materi","summary":"Widget Flutter Font Family List \u0026amp; List View Animated Container \u0026amp; Gesture Detector Flexibel Widget Stack Image Font Family # From Google : https://fonts.","title":"Widget Flutter Lanjutan"},{"content":"","date":"20 June, 2023","permalink":"/tags/css/","section":"Tags","summary":"","title":"CSS"},{"content":"","date":"20 June, 2023","permalink":"/tags/css-lanjutan/","section":"Tags","summary":"","title":"CSS Lanjutan"},{"content":"","date":"20 June, 2023","permalink":"/tags/css3/","section":"Tags","summary":"","title":"CSS3"},{"content":"","date":"20 June, 2023","permalink":"/tags/responsive-web/","section":"Tags","summary":"","title":"Responsive Web"},{"content":" Responsive Web Design # Sebuah pendekatan yang menyarankan agar proses perancangan dan pembangunan sebuah web app harus merespon terhadap perilaku pengguna berdasarkan dari ukuran layer, platform dan orientasi layer.\nPrinsip Responsive Web Design # Viewport # \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1.0\u0026#34; /\u0026gt; Viewport Meta Tag Tanpa Viewport Meta Tag Breakpoint # Media Query # @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } @media (min-width: 1400px) { } Fixed vs Fluid Layout # Mobile First Design # ","date":"20 June, 2023","permalink":"/belajar/web/responsivewebdesign/","section":"Materi","summary":"Responsive Web Design # Sebuah pendekatan yang menyarankan agar proses perancangan dan pembangunan sebuah web app harus merespon terhadap perilaku pengguna berdasarkan dari ukuran layer, platform dan orientasi layer.","title":"Responsive Web Design"},{"content":"Widget Flutter Text Widget Column \u0026amp; Row Widget Container Widget Stateless \u0026amp; Statefull Widget Method Anonymous Method Text Widget # Parameter # Parameter pada text widget :\nmaxLines overflow softWrap textAlign body: Center( child: Container( color: Colors.amber, width: 150, height: 150, child: const Text( \u0026#39;hai kami sedang belajar dasar widget flutter menggunakan visual studio code dan virtual device\u0026#39;, maxLines: 2, overflow: TextOverflow.e ellipsis, softWrap: false, textAlign: TextAlign. justify, ), // Text ), // Container ), // Center Text Style # Text Style parameter :\ncolor fontSize fontWeight backgroundColor fontStyle body: Center( child: Container( color: Colors.amber, width: 150, height: 150, child: const Text( \u0026#39;hai kami sedang belajar dasar widget flutter menggunakan visual studio code dan virtual device\u0026#39;, style: TextStyle( color: Colors.white, fontSize: 15, fontWeight: FontWeight.w700, backgroundColor: Colors.black, fontStyle: FontStyle. italic, ), // TextStyle ), // Text ), // Container ), //Center Column \u0026amp; Row # Column : Vertical Row : Horizontal body: const Column( mainAxisAlignment: MainAxisAlignment. center, crossAxisAlignment: CrossAxisAlignment. start, children: [ Text (\u0026#34;Data 1\u0026#34;), Text (\u0026#34;Data 2\u0026#34;), Text (\u0026#34;Data 3\u0026#34;), Text (\u0026#34;Data 4\u0026#34;), Row( children: [ Text (\u0026#34;Data 1\u0026#34;), Text (\u0026#34;Data 2\u0026#34;), Text (\u0026#34;Data 3\u0026#34;), Text (\u0026#34;Data 4\u0026#34;), Text (\u0026#34;Data 5\u0026#34;) ], ), // Row ], ), //Column Container Widget # Padding \u0026amp; Margin # Padding : Mengatur jarak dalam.\nMargin : Mengatur jarak luar.\nProperti Edge.Insets :\nall() fromLTRB() only() symmetric(). body: Container( margin: const EdgeInsets.all(10), padding: const EdgeInsets.all(60), color: Colors.amber, child: Container( color: Colors.black, ),// Container ),// Container BoxDecoration # Untuk styling container\nbody: Center( child: Container( decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(10), border: Border.all(color: Colors.white, width: 10), gradient: const LinearGradient( colors: [Colors.pink, Colors.black], begin: Alignment.bottomCenter, end: Alignment.topCenter, ), // LinearGradient ), // BoxDecoration ), // Container ), Stateless \u0026amp; Stateful # StatelessWidget # Stateles tidak memiliki perubahan pada tampilan atau tampilannya fixed. Tidak ada perubahan lagi dari user.\nStatelessWidget contohnya seperti dibawah ini :\nclass MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center( child: Text(\u0026#34;Berkah IT\u0026#34;), // Container ), ), ); } } StatefulWidget # StatefulWidget biasa kita gunakan jika ada data yang dinamis (dapat berubah ketika user melakukan sebuah aksi). Seperti perhitungan angka atau animasi dalam aplikasi.\nStatefulWidget memiliki tanda State. Seperti dibawah ini :\nclass MainApp extends StatefulWidget { const MainApp({super.key}); @override State\u0026lt;MainApp\u0026gt; createState() =\u0026gt; _MainAppState(); } class _MainAppState extends State\u0026lt;MainApp\u0026gt; { } Contoh aplikasi sederhana penggunaan StatefulWidget :\nclass _MainAppState extends State\u0026lt;MainApp\u0026gt; { int angka = 0; void tambahBilangan() { setState(() { angka++; }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: Center( child: Column( children: [ Text(\u0026#34;Angka ke $angka\u0026#34;), ElevatedButton( onPressed: () { tambahBilangan(); }, child: const Text(\u0026#34;Tambah\u0026#34;), ), ], ), ), ), ); } } Anonymous Method # Anonymous Method merupakan method yang tidak memiliki nama. Penempatannya langsung di dalam fungsi. Seperti contoh di bawah ini :\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 class MainApp extends StatefulWidget { const MainApp({super.key}); @override State\u0026lt;MainApp\u0026gt; createState() =\u0026gt; _MainAppState(); } class _MainAppState extends State\u0026lt;MainApp\u0026gt; { int angka = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text(\u0026#34;Berkah IT\u0026#34;), ), body: Center( child: Column( children: [ Text(\u0026#34;Angka ke $angka\u0026#34;), ElevatedButton( onPressed: () { setState( () { angka++; }, // Anonymous Method ); }, child: const Text(\u0026#34;Tambah\u0026#34;), ), ], ), ), ), ); } } ","date":"19 June, 2023","permalink":"/belajar/mobile/flutterwidget/","section":"Materi","summary":"Widget Flutter Text Widget Column \u0026amp; Row Widget Container Widget Stateless \u0026amp; Statefull Widget Method Anonymous Method Text Widget # Parameter # Parameter pada text widget :","title":"Widget Flutter"},{"content":" CSS 3 # Generasi ke-3 dari dari spesifikasi css\nTopik yang akan di bahas :\nFont Face Transform Transition Animation Flexbox Font Face # font-family: \u0026#34;Arial Narrow\u0026#34;, arial, sans-serif; Kita juga bisa menggunakan font dari google\nhttps://fonts.google.com\nMenggunakan Teknik @font-face\nhttps://www.fontsquirrel.com/\nTransform # Memungkinkan kita dapat memanipulasi format visual (ukuran, bentuk, atau posisi) dari elemen HTML\ntransform: \u0026lt; fungsi \u0026gt; Fungsi transform\nScale =\u0026gt; memberpesar / memperkecil Rotate =\u0026gt; memutar Skew =\u0026gt; membuat condong miring Translate =\u0026gt; mengubah posisi Transition # Memungkinkan kita dapat mengubah nilai dari property HTLM secara halus\ntransition vs animation\ntransition # Transition hanya mempunyai 2 keadaan yaitu keadaan awal dan keadaan akhir, sedangkan animation bisa lebih\ntransition: \u0026lt; durasi \u0026gt; [fungsi] [delay]; Animation # Iteration Count # \u0026lt;angka\u0026gt; | infinite Direction # normal | reverse | alternate | alternate-reverse Fill-mode # none | forwards | backwards | both Play-state # running | paused Flexbox # Digunakan untuk memudahkan kita mengatur layout.\nSebuah modul layout yang dapat mengatur jarak dan penjajaran antar item adalam sebuah container.\nDisplay # .container { display: flex; } Membuat sebuah elemen parent menjadi sebuah flexbox dan membuat elemen-elemen di dalamnya bisa berperilaku flex juga\nFlex-direction # .container { flex-direction: row | row-reverse | column | column-reverse; } Flex-direction # .container { flex-wrap: nowrap | wrap | wrap-reverse; } Justify Content # Align Items # ","date":"16 June, 2023","permalink":"/belajar/web/css3/","section":"Materi","summary":"CSS 3 # Generasi ke-3 dari dari spesifikasi css","title":"CSS 3"},{"content":"","date":"16 June, 2023","permalink":"/tags/dasar-css/","section":"Tags","summary":"","title":"Dasar CSS"},{"content":" Flutter # Apa itu flutter? Widget Material Design \u0026amp; Cupertino Design Membuat aplikasi flutter pertama Apa itu Flutter? # SDK (Software Development Kit) yang di buat oleh Google.\nFlutter dapat membuat aplikasi berbasis :\nMobile (Android \u0026amp; IOS) Web Desktop Widget # Implementasi dari dunia nyata.\nContoh seperti Rak dan Buku. Yang dimana Rak (widget) dapat menampung buku(widget).\nMaterial Design \u0026amp; Cupertino Design # Material Design # Tampilan untuk Android\nMetafora dari dunia nyata :\nbayangan teksture cahaya https://m3.material.io/\nCupertino Design # Tampilan untuk IOS\nhttps://docs.flutter.dev/ui/widgets/cupertino\nMembuat aplikasi flutter pertama # Klik\nctrl + shift + p Shortcut keyboard # shortcut ket ctrl + space menampilakan argumen atau parameter yang bisa di pakai ctrl + shift + R membungkus dan mengekstrak widget menjadi method atau function ctrl + shift + p membuat project baru fitur flutter # fitur ket hot reload refresh yang sedang dicoding restart refresh semua file (semua codingan) ","date":"15 June, 2023","permalink":"/belajar/mobile/dasarflutter/","section":"Materi","summary":"Flutter # Apa itu flutter?","title":"Dasar Flutter"},{"content":"","date":"13 June, 2023","permalink":"/tags/css-layouting/","section":"Tags","summary":"","title":"CSS Layouting"},{"content":" Intro # Teknik css untuk mengatur dan meletakkan atau memposisikan elemen-elemen html yang sudah kita buat menggunakan syntak css, seperti ukuran, posisi, ataupun perilaku dari element-element html tersebut\nDisplay Dimensi \u0026amp; Overflow Box-model Float Position Display # Setiap tag html memiliki nilai default untuk properti display. Tetapi kita juga dapat mengubah perilaku tag tersebut dengan mengganti valuenya.\ninline inline-block block none Inline # Element HTML yang secara default tidak menambahkan baris baru ketika dibuat Lebar dan Tinggi elemennya sebesar isi kontennya dan tidak dapat diatur. Margin dan padding hanya mempengaruhi element secara horizontal, tidak vertikal Inline-block # Tidak ada element yang secara default memiliki display inline-block; Perilaku dasarnya sama dengan inline Perbedaannya kita bisa atur tinggi dan lebar elemennya. Block # Element HTML yang secara default menambahkan baris baru ketika dibuat Lebar elemennya secara default akan memenuhi lebar browser/parennya Kita dapat mengatur lebar dan tinggi elemenya Kita dapat menyimpan/membungkus element inline, inline-block atau bahkan elemen block lagi. None # Digunakan untuk menghilangkan element\nDimensi \u0026amp; Overflow # Dimensi # Terdiri dari :\nwidth heigth width \u0026amp; heigth memiliki beberapa komponen : Overflow # Ada 4 value overflow :\nvisible auto hidden scroll Box Model # Box-model mendefinsikan ‘kotak’ yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai dengan format visualnya\nSetiap elemen HTML berada dalam sebuah box (kotak)\nBox-model terdiri dari margin, border, padding dan content\nMargin Padding Border border: width style color; Box-sizing\nBox-sizing : border-box;\nFloat # Merupakan property css untuk mengatur posisi sebuah elemen. Sebuah elemen dapat dipaksa berada pada kanan/kiri dari paren/pembungkusnya dengan property ini\nnone left right Yang bisa dilakukan dengan float :\ntext wrapping : membuat teks mengelilingi gambar / elemen lain image gallery : membuat serangkaian gambar menjadi galeri multi-column layout : membuat halaman memiliki beberapa kolom dan masih banyak lagi Masalah pada float? Solusinya CSS clear\nclear clear berfungsi menghentikan / membersihkan float\nleft right both Position # Static Relative Absolute Fixed Static # static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti position\nmengunakan position selain static (non-static), akan membuat sebuah elemen menjadi seolah-olah berbeda dimensi dari elemen lainnya\nelemen yang diberi position selain dtatic dapat menggunakan properti top,left bottom dan right untuk mengatur posisinya\nRelative # Ketika kita menggerakkan elemen dengan posisi relative (menggunakan properti top,left,bottom dan right), ruang yang ditempati oleh elemen tersebut masih ada\nKetika kita menggerakka elemen dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nya\njika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya\nAbsolute # Ketika kita menggerakan elemen dengan posisi absolute (menggunakan properti top,left,bottom dan right), ruang yang ditempati oleh lemen tersebut dianggap tidak ada\nKetika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari elemen parent-nya, selama elemen parent-nya memiliki posisi yang juga non-static\nJika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nya\nFixed # ketika kita menggerakkan elemen dengan psisi fixed (menggunakan properti top,left,bottom dan right), ruang yang ditempati oleh lemen tersebut dianggap tidak ada\nketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap window (browser), meskipun elemen parent-nya bernilai non-static\nJika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nya\nelemen akan \u0026rsquo;terkunci\u0026rsquo; dan tidak bergerak dari posisinya meskipun halaman di-scroll\n","date":"13 June, 2023","permalink":"/belajar/web/csslayouting/","section":"Materi","summary":"Intro # Teknik css untuk mengatur dan meletakkan atau memposisikan elemen-elemen html yang sudah kita buat menggunakan syntak css, seperti ukuran, posisi, ataupun perilaku dari element-element html tersebut","title":"CSS Layouting"},{"content":"","date":"12 June, 2023","permalink":"/tags/dart-pbo/","section":"Tags","summary":"","title":"Dart PBO"},{"content":"","date":"12 June, 2023","permalink":"/tags/dasar-dart/","section":"Tags","summary":"","title":"Dasar Dart"},{"content":" Dasar Dart Lanjutan # Perulangan Function List Perulangan # for # while # Function # Mengembalikan Nilai Tidak Mengembalikan Nilai Optional Parameter # Positional Paramter # Default Value # List # List \u0026lt; TypeData \u0026gt; NamaVariable = [ Nilai ];\nMengeluarkan Nilai # Dasar List # List Map # ","date":"12 June, 2023","permalink":"/belajar/mobile/dasardart2/","section":"Materi","summary":"Dasar Dart Lanjutan # Perulangan Function List Perulangan # for # while # Function # Mengembalikan Nilai Tidak Mengembalikan Nilai Optional Parameter # Positional Paramter # Default Value # List # List \u0026lt; TypeData \u0026gt; NamaVariable = [ Nilai ];","title":"Dasar Dart Lanjutan"},{"content":" Pengenalan CSS # Bahasa yang digunakan untuk menentukan tampilan dan gaya elemen-elemen pada halaman web. CSS bukan bahasa pemrograman Jenis-jenis CSS # Inline CSS Internal CSS Eksternal CSS Anatomi CSS # Selector # Selector sederhana # Memilih element berdasarkan tag, id, kelas dan universal\nSelector Combinator # Descendant # Descendant selector (spasi) =\u0026gt; pemilihan secara keturunan Child # Child selector (\u0026gt;) =\u0026gt; pemilihan elemen yang merupakan anak dari element tertentu Adjacent Sibling # Adjacent Sibling Selector (+) =\u0026gt; pemilihan berdasarkan saudara element terdekat General Sibling # General Sibling Selector (~) =\u0026gt; pemilihan berdasarkan saudara element berikutnya Selector Attribute # Dimungkinkan untuk menata elemen HTML yang memiliki atribut atau nilai atribut tertentu.\nPsuedo-class # Kelas semu yang dimiliki oleh element html, yang membuat kita dapat mengimplementasikan style pada Keadaan tertentu dari elemen tersebut\nPsuedo-class yang berhubungan dengan link # :link # style default pada sebuah link (a yang memiliki href)\n:hover # Style Ketika kursor mouse berada di atas elemen\n:active # style Ketika sebuah link di-klik\n:visited # style Ketika sebuah link sudah pernah dikunjungi (mengguanakaan browser yang sama)\nPsuedo-class yang berhubungan dengan posisi element # :first-child # Memilih elemen pertama dari sebuah parent (elemen pembungkusnya)\n:last-child # Memilih elemen terakhir dari sebuah parent\n:nth-child(n) # memilih element ke-n dari sebuah parent, dimana n bisa (1), (2)…..atau bisa menggunakan pola (2n), (3n+1) atau (odd) dan (even)\nSpecificity CSS # Setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut menentukan seberapa spesifik elemen yang dipilih oleh selector\n","date":"9 June, 2023","permalink":"/belajar/web/dasarcss/","section":"Materi","summary":"Pengenalan CSS # Bahasa yang digunakan untuk menentukan tampilan dan gaya elemen-elemen pada halaman web.","title":"Dasar CSS (Cascading Style Sheets)"},{"content":" Dasar-dasar dart # Print Input inline Null safety Variable Komentar Perkondisian Perulangan Print # Hello World in Dart\nInput inline # Input text in terminal\nNull Safety # Null Safety ditandai dengan \u0026ldquo;?\u0026rdquo; dan \u0026ldquo;!\u0026rdquo;\nVariable # TypeData NamaVariable = Nilai;\nKomentar # //\nPerkondisian # if else # Ternary Operator # switch # Perulangan # for # while # ","date":"8 June, 2023","permalink":"/belajar/mobile/dasardart/","section":"Materi","summary":"Dasar-dasar dart # Print Input inline Null safety Variable Komentar Perkondisian Perulangan Print # Hello World in Dart","title":"Dasar Dart"},{"content":"","date":"6 June, 2023","permalink":"/tags/dasar-web/","section":"Tags","summary":"","title":"Dasar Web"},{"content":" Apa itu web ? # Sistem yang memungkinkan pengguna untuk mengakses informasi melalui halaman-halaman yang terhubung secara elektronik, yang biasa disebut sebagai situs web.\nInformasi yang diberikan dibungkus ke dalam sebuah document Markup Language, kemudian disimpan ke dalam server.\nTeknologi utama dalam web # Client-side Scripting # HTML (Hypertext Markup Language) CSS (Cascading Style Sheets) JavaScript Server-side Scripting # PHP NodeJS Python API (Application Programming Interface) # Memungkinkan berbagai aplikasi dan sistem untuk berkomunikasi satu sama lain melalui web\nMemungkinkan pengembang untuk mengintegrasikan fungsionalitas dari layanan pihak ketiga seperti peta, pembayaran, media sosial, dan masih banyak lagi ke dalam aplikasi web mereka.\nCloud Computing # Hosting dan penyediaan infrastruktur untuk aplikasi web\nHTML # (Hypertext Markup Language)\nStruktur HTML # Element HTML # Blok dan inline # Blok inline Kategori Elemen HTML # Metadata : Elemen-elemen yang memberikan informasi tentang halaman web, seperti judul, deskripsi dan metatag lainnya. Contoh :\n\u0026lt;title\u0026gt; \u0026lt;meta\u0026gt; \u0026lt;link\u0026gt; Flow : Elemen-elemen yang biasanya digunakan untuk menyajikan konten utama halaman web. Contoh :\n\u0026lt;p\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;div\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;span\u0026gt;\u0026lt;/span\u0026gt; Heading : Elemen-elemen yang digunakan untuk memberikan judul atau heading pada bagian halaman web. Contoh :\n\u0026lt;h1\u0026gt;\u0026lt;/h1\u0026gt; \u0026lt;h2\u0026gt;\u0026lt;/h2\u0026gt; \u0026lt;h3\u0026gt;\u0026lt;/h3\u0026gt; Interactive : Elemen-elemen yang digunakan untuk memberikan judul atau heading pada bagian halaman web. Contoh :\n\u0026lt;h1\u0026gt;\u0026lt;/h1\u0026gt; \u0026lt;h2\u0026gt;\u0026lt;/h2\u0026gt; \u0026lt;h3\u0026gt;\u0026lt;/h3\u0026gt; Embedded : Elemen-elemen yang digunakan untuk membuat interaksi dengan pengguna, seperti formulir atau tombol. Contoh :\n\u0026lt;form\u0026gt;\u0026lt;/form\u0026gt; \u0026lt;input /\u0026gt; \u0026lt;button\u0026gt;\u0026lt;/button\u0026gt; Link # Form # Atribut HTML # Semantik HTML # Elemen semantik adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu sendiri.\nAlasan menulis semantik # Penggunaan elemen yang tepat\nMeningkatkan aksesibilitas\nManfaat SEO\nContoh elemen semanik # \u0026lt;main\u0026gt;\u0026lt;/main\u0026gt; \u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt; \u0026lt;header\u0026gt;\u0026lt;/header\u0026gt; \u0026lt;footer\u0026gt;\u0026lt;/footer\u0026gt; \u0026lt;article\u0026gt;\u0026lt;/article\u0026gt; ","date":"6 June, 2023","permalink":"/belajar/web/webdev/","section":"Materi","summary":"Apa itu web ?","title":"Pengantar Web Developer"},{"content":"","date":"6 June, 2023","permalink":"/belajar/web/","section":"Materi","summary":"","title":"Web"},{"content":"","date":"5 June, 2023","permalink":"/tags/install-flutter/","section":"Tags","summary":"","title":"Install Flutter"},{"content":" Pengenalan # Apa itu mobile developer? aplikasi mobile? Dart? Flutter? API?\nMobile Developer # Sebuah pekerjaan yang membuat aplikasi mobile berbasis android atau ios. Pekerjaan utama seorang mobile developer ada 2 :\nSlicing UI # Proses untuk mengimplementasikan rancangan design ke codingan. Consume API # Mengkonsumsi atau mengolah data yang di sediakan oleh backend. Aplikasi Mobile # Aplikasi mobile umumnya berbasis android \u0026amp; ios, online maupun offline. Penyimpanan data # Menggunakan layanan cloud:\nFirebase Server (API) Menggunakan penyimpanan internal:\nSQLite \u0026amp; SQFlite Dart # Bahasa pemrograman yang dikembangkan oleh google. Systanksnya mirip seperti java bebasis OOP\nFlutter # Framework untuk membuat aplikasi mobile. Platform yang dapat dibuat oleh flutter :\nAndroid IOS Web Desktop Install tools # Flutter # https://flutter.dev/\nAndroid Studio # https://developer.android.com/studio\nVisual Studio Code # https://code.visualstudio.com/\nTempat belajar dart \u0026amp; Flutter # Erico Darmawan Handoyo Programmer Zaman Now Flutter Documentasi Flutter Chat GPT Berkah IT https://icourse.berkahit.com/ Kolaborasi # LinkedIn Github Notion Discord ","date":"5 June, 2023","permalink":"/belajar/mobile/mobiledev/","section":"Materi","summary":"Pengenalan # Apa itu mobile developer?","title":"Mobile Developer with Flutter"},{"content":"","date":"5 June, 2023","permalink":"/belajar/mobile/","section":"Materi","summary":"","title":"Mobile"},{"content":" Definisi UI/UX # UI (User Interface) # Antar muka pengguna, termasuk elemen visual seperti tata letak, warna, dan ikon.\nUX (User Experience) # Pengalaman yang dirasakan oleh pengguna saat berinteraksi dengan produk.\nMaksud UI/UX # Memaksimalkan kepuasan pengguna Meningkatkan efisiensi penggunaan Menghasilkan desain yang estetis dan fungsional. Role dalam UI/UX # UI Designer: Bertanggung jawab untuk tampilan visual dan estetika produk.\nUX Designer: Fokus pada pengalaman pengguna, penelitian, dan pembuatan prototipe.\nInteraction Designer: Bertanggung jawab untuk mendesain interaksi antara pengguna dan antarmuka produk.\nVisual Designer: Fokus pada aspek visual dalam desain UI/UX. Mereka bekerja dengan desainer UI dan desainer UX untuk menghasilkan antarmuka yang menarik dan konsisten\nTujuan UI/UX # Membuat produk yang mudah digunakan dan menarik Meningkatkan tingkat retensi pengguna Menciptakan pengalaman yang konsisten dan intuitif Proses Design Thinking # Empathize Define Ideate Prototype Testing Pemahaman empatik tentang masalah Mengumpulkan informasi Menghasilkan ide Tools UI/UX # Whimsical # https://whimsical.com/\nFigma # https://www.figma.com/\n","date":"4 June, 2023","permalink":"/belajar/uiux/uiux/","section":"Materi","summary":"Definisi UI/UX # UI (User Interface) # Antar muka pengguna, termasuk elemen visual seperti tata letak, warna, dan ikon.","title":"Pengantar UI/UX"},{"content":"","date":"4 June, 2023","permalink":"/tags/user-experience/","section":"Tags","summary":"","title":"User Experience"},{"content":"","date":"4 June, 2023","permalink":"/tags/user-interface/","section":"Tags","summary":"","title":"User Interface"},{"content":"","date":"4 June, 2023","permalink":"/belajar/uiux/","section":"Materi","summary":"","title":"UI/UX"},{"content":"","date":"30 April, 2023","permalink":"/belajar/blockchain/","section":"Materi","summary":"","title":"Materi Blockchain"},{"content":" Praktik Terbaik # Dalam belajar, kita memiliki best practice atau praktik terbaik yang bisa kita ikuti atau contoh. Nah maka dari itu Freecodecamp memiliki beberapa best practice yang bisa temen-temen contoh.\nHal pertama yang kamu perlu pahami : # Kamu perlu memahami setidaknya Javascript dasar. Tapi jika kamu blm menguasai juga tidak apa-apa. Pada alur belajar solidity kali ini bisa di pelajari dari orang yang baru bergelut pada dunia programmer atau bahkan baru bergelut pada dunia blockchain atau web3.\nApa akan yang kita pelajari? # DeFi NFTs DAOs Upgrades ERC20s More!\nPanduan dan sumber materi ! # Link youtube : https://www.youtube.com/watch?v=gyMwXuJrbJQ Link Github : https://github.com/smartcontractkit/full-blockchain-solidity-course-js.git Jangan lupa untuk selalu mengecek repository github!\nBelajar sesuai kecepatan mu ! # Jangan terburu-buru, kamu punya kecepatan belajar sendiri. Bisa jadi 1 bulan, 2 bulan bahkan 1 tahun.\nPelajari bagian yang ingin kamu pelajari ! # Kalau kamu mau hanya ingin belajar hal basic, kamu cukup pelajari hal basic. Kalau kamu ingin mempelajari full stack, kamu cukup pelajari full stack. Feel free to choose what you want to learn!\nStrategi yang disarankan # Setiap 25 menit - Ambil 5 menit untuk istirahat. Setiap 2 jam - Ambil 30 menit untuk istirahat. Gunakan tools kolaborasi # diskusi di github bertanya di stack overflow atau stack exchange buat issues di github repository dimana tempat kamu bekerja atau bingung bertanya di discord, reddit, twitter dan media sosial lainnya Learning to collaborative is important to be a web3 developer\nDApps Pertama # Kita akan langsung peraktik cara membuat smartcontract pertama kita menggunakan bahasa pemrograman solidity. Tools yang akan kita gunakan :\nsolidity - bahasa pemrograman meta mask - wallet hardhat - menjalankan program etherjs - liblary web3js - liblary Hal yang perlu di siapkan :\nnodejs Setup # ","date":"30 April, 2023","permalink":"/belajar/blockchain/solidity/","section":"Materi","summary":"Disini kamu dapat mempelajari teknologi web3, solidity atau mungkin bahasa yang familiar blockchain. Tidak masalah kamu belum menguasai bahasa pemrograman atau baru terjun di dunia IT, karena pada tutorial kali ini akan di ajarkan dari basic sampai expert","title":"Belajar Solidity dari Freecodecamp"},{"content":"","date":"30 April, 2023","permalink":"/tags/blockchain/","section":"Tags","summary":"","title":"Blockchain"},{"content":"","date":"30 April, 2023","permalink":"/tags/solidity/","section":"Tags","summary":"","title":"Solidity"},{"content":"","date":"30 April, 2023","permalink":"/tags/web3/","section":"Tags","summary":"","title":"Web3"},{"content":" Langkah Awal # Buka browser, kemudian search \u0026ldquo;download visual studio\u0026rdquo;\nSetelah itu temen-temen pilih bagian Community kemudian klik Free download\nInstallasi # Kemudian temen-temen buka file yang sudah di download, lalu klik continue\nSetelah di buka, maka akan muncul menu seperti di bawah ini. Kemudian pilih .Net desktop development. Karena kita hanya ingin membuat aplikasi desktop menggunakan C# maupun VB.Net. Sesuaikan tergantung kebutuhan kalian.\nKemudian kalian pilih bagian Data storage and processing, itu berfungsi untuk menghubungkan database SQL Server ke dalam aplikasi desktop yang akan kita buat nanti.\n","date":"19 April, 2023","permalink":"/belajar/desktop/installvs/","section":"Materi","summary":"Langkah Awal # Buka browser, kemudian search \u0026ldquo;download visual studio\u0026rdquo;","title":"Cara Menginstal Visual Studio"},{"content":"","date":"19 April, 2023","permalink":"/tags/ide/","section":"Tags","summary":"","title":"IDE"},{"content":"","date":"19 April, 2023","permalink":"/tags/programming/","section":"Tags","summary":"","title":"programming"},{"content":"","date":"19 April, 2023","permalink":"/tags/unity/","section":"Tags","summary":"","title":"unity"},{"content":"","date":"19 April, 2023","permalink":"/belajar/desktop/","section":"Materi","summary":"","title":"Desktop"},{"content":" Cooming Soon # ","date":"9 April, 2023","permalink":"/belajar/iot/","section":"Materi","summary":" Cooming Soon # ","title":"IOT (Internet of Things)"},{"content":"Disini kita saling berbagi, dari kita untuk kita ~\n","date":"8 April, 2023","permalink":"/meetup/","section":"Meetup","summary":"Disini kita saling berbagi, dari kita untuk kita ~","title":"Meetup"},{"content":" Technical Feasibility : Sudaryatno as CTO at GITS Indonesia # Gits sebuah perusahaan yang berfokus dalam bidang perkembangan software.\nTechnical Feasibility adalah bagimana cara membuat produk secepat mungkin.\nHal yang perlu di lakukan sebelum membuat sebuah produk :\nMemahami produknya terlebih dahulu Engineering Manager : Harus tau tujuan dari bisnis dan perusahaan.\nDesign Thinking : Mempermudah untuk membuat fitur apa yang dibutuhkan\nTentukan fitur prioritas (MVP - Minimum Valuable Product)\nBisa berkomunikasi dengan tim untuk menentukan Minimum Valuable Product\nList of Technology\nMemilih teknologi. Cara memilih dengan cara listing.\nKemudian kategorikan :\nInfrastructure\nBackend\nDatabase\nFrontend\nMobile Apps\nCommunity Technology\nMaturity Community Great Documentation Strong Team\nKekuatan tim yang bisa :\nSaling menginspirasi dan memandu Melakukan perubahan yang cepat Melakukan micromanaging Setelah itu …\nChoose Infrastructure\nAnalisis sesuai dengan kemampuan\nServer Side : Node JS\nPlatform : Microsoft, Firebase, ASW\nLakukan perbandingan.\nChoose Mobile Technology\nMemilih Flutter\nTim jhony memutuskan :\nNode JS Firebase Flutter Timing Better than Perfect : Jangan terlalu sempurna, yang paling cepat itu paling baik.\nMetrics\nEM harus mempunyai tolak ukur keberhasilan\nMetrics Success Product Quality : Load Testing, Performance Test, Test Coverage, Customer Feedback, Production Incidents. Customer feedback untuk melihat segimana kulitas produk kita. Value : Berapa banyak customer yang make, segimana efisien biaya, jumlah transaksi Productivity : Batch size, cycle time, number of commit. Standar yang benar adalah 1 hari 1 commit. Analytic\nHarus tetap menganalisis\nCrash Tracker\nmenganalisisi menggunakan\nFirebase Crashlytics User angagement\nPush notifications\nEmail\nRepeat\nEngineering Manager : Role model dalam perusahaan yang memanfaatkan teknologi, soft skill dan hard skill. Goals untuk mencapai tujuan produk / perusahaan bersama dengan team.\nASK?\nBagaimana jika sudah produksi namun ketika sudah jalan, teknologi yang digunakan itu tidak efisien dan ingin merubah teknologi. Namun developernya hanya bisa menggunakan teknologi yang sebelumnya tidak dengan teknologi yang akan di update. Jadi apakah tetap menggunakan teknologi yang lama atau bagaimana?\nJawabannya :\nLakukan metrics yang detail untuk fitur atau app tersebut. Kemudian ketika ingin upgrade. Developer juga perlu belajar technology apa yang ingin di upgrade.\nTechnology itu adalah tools bukan job desk.\nIncrease App Performance with Flutter Isolate : Nasrul Alawy as Lead Mobile Dev # Biasa perusahaan menggunakan flutter untuk mempres cost application.\nFlutter : asynchrony = Membaca codingan dari atas sampai bwah.\nBekerja dengan event loop. Meskipun tidak ada aktifitas, flutter akan terus melakukan looping.\nKetika melakukan perhitungan kompleks akan terjadi mengalag. Jadi itu fungsinya isolate.\nKalau ingin memblock error mengguakan “await”.\nSistem :\nOpen\nIdle\nClick Button\nReq API\netc\nFlutter Isolate : Membuat isolasi terpisah. Ketika ada sebuah event yang berat kita akan mengisolasinya, dengan proses sendiri. Memiliki ruang khusus yang di kirim melalui port.\nFungsi :\nMemperbaiki performa aplikasi dengan menjalankan kode secara paralel. Membagi beban kerja di antara core CPU Menjalan kode yang memerlukan lingkungan yang aman Meningkatkan stabilitas apps Kekurangan :\nCodingan makin lebih kompleks : Cost pertambah Tidak semua function di jadikan isolate ASK: Karena tadi tidak semua function bisa kita lakukan isolate. Bagaimana cara menentukan function yang akan di isolate?\nFuzzing The Rest : Rahmat Wahyu Hadi # Critical bugs biasa menemukan 3 dari 10 bug critical.\nApa itu debugging\nMendefinisikan untuk mencari problem pada code.\nApa itu fuzzing\nmenginput secara automate software dengan inputan yang tidak di sangka.\npyload : apa yang dikirim dari user ke backend.\nTraditional Fuzzing\nBreaking things with randoms input. Melakukan testing menggunakan inputan random.\nModern Fuzing\nPayloadnya sudah terstruktur. Tingkat efisiensi mencari bug sangat tinggi. Semakin kompleks payload makan semakin tinggi tingkat keberhasilan mencari bug.\nSebelum melakukan payload harus mendefinisikan payloadnya.\nApa yang bisa di fuzzing?\nSemua yang ada inputan dan output.\nLogger sangat penting dalam fuzzing : apa yang kita input dan output kita simpan dari hasil fuzzing. Agar bisa menganalisis masalah\nTools : bugsmith\nLangkah-langkah :\nMenganalisis inputan atau parameter Membuat payload Paste pada bugsmith Kita lihat requestnya. (anomali) Lakukan eksploitas Decrypt requestnya Automade Testing :\nLogin pake email random dan password random Mengenerate untuk melakukan fuzzing melakukan fuzzing mengunakan nucklei elastic search untuk logging data elastic di simpan melakukan eksploitasi Step :\nFuzzing Debugging Eksploitasi direction rest condition Agile Product Management : Ray Rizaldy as CEO Gits # Kebanyakan konsep bisa membuat nggk perfek”.\nProses pengembangan produk\nBuild Measure Learn Agile : Kita bisa mendevelop sesuatu secepat mungkin.\nPada customer\nVUCA : Harus bisa di jawab dengan prediksi, jadi kita berbicara tentang estimasi.\nVolatillity : ukuran harga Uncertanity : ukuran ketidak pastian Ambiguity : ukuran ambigu dari suatu produk Complexity : ukuran dari kerumitan dari sebuah produk Dimensi dalam bidang developer : Hal yang mempengaruhi development\nProduct : Banyak product yang nggk jalan People : Banyak pemikiran Technology : Bingung memilih teknologi Process : Bentrok memilih proses User Story :\nAs a I want so that Step :\nCard : Requitmen on strory card Conversation : Discuss all details in the team Confirmation : Define acceptance criteria for when a story is done Tips :\nPindahkan card bukan ketika sudah selesai, namun ketika ingin dikerjakan. Informasikan kepada tim apa yang sedang di kerjakan Project Manager tree :\nTo do In Progres Complete Backlog Tools : Gunakan 1 tools\nTaiga Trelo Hasana Estimasi : Bandingkan relatif ambil yang paling lambat. Harus dicatat.\nRun Your Back End App Using Cloud Run : Ibnu Sina Wardy as Google Developer Expert Cloud # Speed is important\nServerless vs Traditional Architecture Servless :\nGoogle Cloud Run : Deploy server apapun yang di manage oleh google. Keuntungan :\nNo server to manage Focus on writing code Scale up fast Scale down to zero pay for exact usage just deploy any staless container : Kirim code ke server lain. Jangan di tempat publish. Aman untuk menghapus aplikasi dan memindahkan data. Memisahkan data. any language any library url in second Cloud Run Servis : Bisa gratis\nKalkulator : Google Cloud Pricing Calculator\nCloud Run Jobs :\nStep :\nBuild pake docker Upload ke google Deploy faster, so we can test it on production Cara Deploy :\nDocker.file untuk resepnya : Harus paham dockerizing or docker.file copy file json tentukan home atau tempat installnya jalankan npm install copy semua source code gcloud run deploy : otomatis switch jika ada update version application VCC\nBuild CI/CD with GitLab : Didiet Agus Pambudiono as Lead DevOps Gits # Apa itu Continuous Integration (CI)?\nDevelopers commit code to a shared repository on a refular basis. Version control system is being monitored. When a commit is detected, a build will be triggered automatically. If the build is not green (gagal), developers will be notified immediately (maka akan ada pemberitahuan). Kenapa ktia butuh Continuoues Integration ?\nMendeteksi bug dan bisa dengan mudah kita deteksi lebih awal. Development before CI :\nRelease manually = semua dirilis secara manual Test happens late = rilis tidak secepat secara otomation Few releases Publish :\nDevelopment\nStaging\nProduction\nVibernate\nGitlabs CI, DevOps bisa memberitahu WA untuk mengetes server.\nDelivery team Version Control Build Automated User Approve Release Continuous Integration Continuous Delivery Continuous Deployment Cara mengimplimintasi CI\nNon hosted solutions jenkins gitlab CE Teamcity Hosted Solutions Circle Kenapa Gitlab CI/CD\nIntegrated : Bisa digunakan gratis Easy to learn : Mudah untuk memulai Beautiful : Familiar, mudah digunakan Scalable : Bisa digunakan di mesin manapun Faster results : Buildnya bisa di split multiple jobs Open source : Fitur :\nMulti Platform Multi language : Java, PHP, Ruby, C, etc Parallel build : Split build in pararel Docker support Pipeline Editor Jobs : Build Deploy Build arifacts Container Registry Environments Autoscaling Real Time logging Versioned test Monorepo : 2 aplikasi menggunakan 1 component\n","date":"8 April, 2023","permalink":"/meetup/meetup4/","section":"Meetup","summary":"Technical Feasibility : Sudaryatno as CTO at GITS Indonesia # Gits sebuah perusahaan yang berfokus dalam bidang perkembangan software.","title":"Lotim Dev MeetUp 4"},{"content":"Dari kami untuk ilmu pengetahuan ~\n","date":"5 April, 2023","permalink":"/belajar/","section":"Materi","summary":"Dari kami untuk ilmu pengetahuan ~","title":"Materi"},{"content":"iCourse adalah sebuah website yang didirikan pada bulan Maret 2023 oleh Edwin Farid, seorang founder dari channel Youtube Berkah IT. Dalam mendirikan iCourse, Edwin memiliki tujuan untuk memberikan informasi dan ilmu pengetahuan khusus dalam dunia IT agar penonton Berkah IT dapat lebih mudah memahami video yang diberikan maupun untuk orang-orang yang baru belajar dunia IT.\nWebsite ini hadir dengan tampilan yang sederhana dan mudah dipahami, sehingga para pengguna dapat mengakses informasi dan ilmu pengetahuan dengan mudah. Selain itu, iCourse juga menawarkan berbagai materi dan tutorial yang bermanfaat untuk pengguna yang ingin belajar lebih dalam tentang dunia IT.\nSejak awal berdirinya, iCourse telah memiliki visi untuk memberikan informasi dan ilmu pengetahuan yang berkualitas untuk masyarakat luas. Oleh karena itu, selogan iCourse adalah \u0026ldquo;dari manusia untuk wawasan manusia\u0026rdquo;, yang memiliki arti bahwa website ini hadir untuk membantu para pengguna memperluas pengetahuan dan wawasan mereka dalam dunia IT.\nDi iCourse, pengguna dapat menemukan berbagai macam materi belajar yang disajikan dengan cara yang mudah dipahami. Mulai dari pemrograman, jaringan komputer, desain grafis, dan masih banyak lagi. Materi-materi tersebut disajikan secara sistematis dan terstruktur, sehingga pengguna dapat mempelajarinya dengan mudah dan teratur.\nDalam kurun waktu yang cukup singkat, iCourse berhasil menjadi salah satu platform belajar yang populer bagi orang-orang yang tertarik dengan dunia IT. Hal ini tidak terlepas dari visi dan misi yang dimiliki iCourse untuk memberikan ilmu pengetahuan yang berkualitas bagi masyarakat luas.\n","date":"5 April, 2023","permalink":"/about/","section":"Welcome to iCourse!","summary":"iCourse adalah sebuah website yang didirikan pada bulan Maret 2023 oleh Edwin Farid, seorang founder dari channel Youtube Berkah IT.","title":"About"},{"content":" \u0026ldquo;Selamat datang di iCourse, tempat belajar teknologi informatika bagi siapa saja yang ingin memperluas pengetahuan mereka di dunia IT. Kami menyediakan materi-materi yang disajikan secara sederhana dan mudah dipahami, cocok untuk pemula yang baru memulai perjalanan di dunia IT. Dari manusia untuk wawasan manusia, kami berkomitmen untuk terus memberikan konten berkualitas dan mendukung komunitas belajar IT yang lebih baik. Lakukan yang terbaik, hidup hanya satu kali !\u0026rdquo;\n\u0026nbsp; Mulai belajar \u0026nbsp; Notif me sensei! ","date":"5 April, 2023","permalink":"/","section":"Welcome to iCourse!","summary":"\u0026ldquo;Selamat datang di iCourse, tempat belajar teknologi informatika bagi siapa saja yang ingin memperluas pengetahuan mereka di dunia IT.","title":"Welcome to iCourse!"},{"content":"","date":"1 January, 0001","permalink":"/authors/","section":"Authors","summary":"","title":"Authors"},{"content":"","date":"1 January, 0001","permalink":"/categories/","section":"Categories","summary":"","title":"Categories"},{"content":"","date":"1 January, 0001","permalink":"/tags/dasar-ui/ux/","section":"Tags","summary":"","title":"Dasar UI/UX"},{"content":"","date":"1 January, 0001","permalink":"/tags/ui/ux/","section":"Tags","summary":"","title":"UI/UX"},{"content":"","date":"1 January, 0001","permalink":"/series/ui/ux/","section":"Series","summary":"","title":"UI/UX"}]