├── README.md
├── build-app-bundle-dengan-flutter.md
├── build-micro-fe-module-federation.md
├── dasar-dasar-sql.md
├── kenalan-dengan-deno.md
├── kenalan-dengan-go.md
├── kenalan-dengan-nodejs.md
├── kenalan-dengan-npm.md
├── kenalan-dengan-react.md
├── kenalan-dengan-typescript.md
├── memulai-dengan-git.md
├── menggunakan-eslint-dan-git-hook.md
├── oop-dalam-php.md
├── penulisan-es6-dan-pengenalan-fitur.md
└── referensi-tool-programing.md
/README.md:
--------------------------------------------------------------------------------
1 | # Programming Notes
2 |
3 | Ini adalah kumpulan catatan tentang teknologi khususnya di bidang
4 | programming & development 😎. silahkan bagi temen-temen yang mau share catatan
5 | hasil belajar temen-temen di repo ini langsung aja fork ya 😎dan jangan lupa
6 | klik ⭐️ nya ya 😃
7 |
8 | ## Cara Menambahkan Catatan Baru
9 |
10 | - Fork repo ini, dan buat branch baru
11 | - PR ke branch master dari repo ini
12 | - Jangan menambahkan kontributor sendiri ! 😃
13 | - Makasih buat kontribusinya, jangan lupa di share dan semoga bermanfaat
14 |
15 | ## List Catatan
16 |
17 | 1. [Penulisan ES6 & Pengenalan Fitur](https://github.com/randyviandaputra/my-notes/blob/master/penulisan-es6-dan-pengenalan-fitur.md)
18 | 2. [Kenalan dengan React](https://github.com/randyviandaputra/my-notes/blob/master/kenalan-dengan-react.md)
19 | 3. [Memulai dengan Git](https://github.com/randyviandaputra/my-notes/blob/master/memulai-dengan-git.md)
20 |
21 | ## Kontak Saya
22 |
23 | - Email : modulloe@gmail.com
24 | - Telegram : [@randyvp](https://t.me/randyvp)
25 |
26 | ## Kontributor
27 |
28 | | [ Randy Vianda Putra](https://github.com/randyviandaputra) | [ Ilham Fadillah](https://github.com/positiveneutron) |
29 | | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
30 |
31 |
32 | ## License
33 |
34 | [MIT](http://opensource.org/licenses/MIT) Copyright (c) 2019 - Randy Vianda
35 | Putra
36 |
--------------------------------------------------------------------------------
/build-app-bundle-dengan-flutter.md:
--------------------------------------------------------------------------------
1 | # Cara Build App Bundle dengan Flutter
2 |
3 | ## Daftar Isi
4 | - [App Bundle](#intro)
5 | - [Mengapa App Bundle](#mengapa-app-bundle)
6 | - [Build App Bundle](#build-app-bundle)
7 | - [Kesimpulan](#kesimpulan)
8 |
9 | ## App Bundle
10 |
11 | App Bundle merupakan format distribusi yang baru dan lebih efisien untuk membuat dan merelease suatu aplikasi. App Bundle mulai dikenalkan oleh Google pada tahun 2018.
12 |
13 | ## Mengapa App Bundle
14 |
15 | - App Bundle memiliki ukuran yang lebih kecil dibandingkan APK.
16 | - Memiliki user experience yang lebih baik untuk pengguna, karena App Bundle menyediakan apa yang benar-benar dibutuhkan. Seperti ukuran density, bahasa, resources.
17 | - Apabila pengembangan aplikasi menggunakan modular App Bundle sangat menguntungkan, dapat melakukan kostumisasi feature delivery.
18 |
19 | ## Build App Bundle
20 |
21 | Pertama, siapkan project aplikasi Flutter yang akan kamu build. Kamu dapat menggunakan Android Studio ataupun Visual Studio Code.
22 |
23 | ### Membuat keystore
24 | Untuk Mac / Linux, ketik perintah berikut di terminal :
25 | ```
26 | keytool -genkey -v -keystore ~/nama_file_.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
27 | ```
28 | Untuk Windows, gunakan perintah berikut :
29 | ```
30 | keytool -genkey -v -keystore c:/Users/USER_NAME/nama_file.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key
31 | ```
32 | Kemudian tekan enter, ikuti langkah-langkah berikut :
33 | 1. Masukan keystore password
34 | 2. Masukan password konfirmasi
35 | 3. Masukan nama depan dan nama belakang
36 | 4. Masukan unit organisasi
37 | 5. Masukan nama organisasi
38 | 6. Masukan nama kota
39 | 7. Masukan negara atau provinsi
40 | 8. Masukan 2 huruf dari kode negara asal
41 | 9. Jika sudah yakin ketik yes, jika belum ketik no
42 | 10. Tunggu beberapa saat, maka file keystore sudah berhasil dibuat
43 |
44 | ### Note
45 | Untuk keystore simpan ditempat yang aman, jangan sampai hilang. Karena apabila kalian lupa atau keystorenya hilang maka aplikasi yang kamu release tidak bisa diupdate lagi.
46 |
47 | ### Integrasi keystore
48 | Buat file baru bernama key.properties didalam folder project_kamu/android/key.properties. Kemudian isi seperti berikut :
49 | ```
50 | storePassword= Masukan password store sebelumnya
51 | keyPassword= Masukan password key sebelumnya
52 | keyAlias= Masukan keyAlias
53 | storeFile= Masukan lokasi file keystore, contoh User/file/key.jks
54 | ```
55 |
56 | ### Konfigurasi gradle
57 | Buka project_flutter/android/app/build.gradle
58 |
59 | Tambahkan kode berikut sebelum android { }
60 | ```
61 | def keystoreProperties = new Properties()
62 | def keystorePropertiesFile = rootProject.file('key.properties')
63 | if (keystorePropertiesFile.exists()) {
64 | keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
65 | }
66 | ```
67 |
68 | Tambahkan dan ubah pada bagian buildTypes { } menjadi seperti berikut :
69 | ```
70 | signingConfigs {
71 | release {
72 | keyAlias keystoreProperties['keyAlias']
73 | keyPassword keystoreProperties['keyPassword']
74 | storeFile file(keystoreProperties['storeFile'])
75 | storePassword keystoreProperties['storePassword']
76 | }
77 | }
78 | buildTypes {
79 | release {
80 | signingConfig signingConfigs.release
81 | minifyEnabled true
82 | useProguard true
83 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
84 | }
85 | }
86 | ```
87 |
88 | ### Menambahkan Proguard
89 | Secara default, Flutter tidak mengamankan dan melakukan minify. Untuk meningkatkan keamanan aplikasi yang akan kita release perlu ditambahkan konfigurasi proguard. Sehingga kode sumber aplikasi yang tergenerate disamarkan.
90 |
91 | Buat file baru pada folder android/app/proguard-rules.pro. Tambahkan kodenya seperti berikut :
92 | ```
93 | ## Flutter wrapper
94 | -keep class io.flutter.app.** { *; }
95 | -keep class io.flutter.plugin.** { *; }
96 | -keep class io.flutter.util.** { *; }
97 | -keep class io.flutter.view.** { *; }
98 | -keep class io.flutter.** { *; }
99 | -keep class io.flutter.plugins.** { *; }
100 | -dontwarn io.flutter.embedding.**
101 | -dontwarn android.**
102 | ```
103 |
104 | ### Konfigurasi Manifest
105 | Sebelum release aplikasi kamu, pastikan file AndroidManifest.xml pada folder android/app/src/main dan cek seperti label, icon, permission. Untuk menambahkan permission internet, tambahkan kode berikut didalam file AndroidManifest
106 |
107 | ```
108 |
109 | ```
110 |
111 | ### Build app bundle
112 | Sebelumnya saya sarankan kamu sudah update Flutter versi terbaru, karena versi lama untuk build App Bundle belum support untuk split app-armeabi-v7a dan app-arm64-v8a.
113 |
114 | Jika kamu ingin build app bundle yang otomatis versi armeabi-v7a dan arm64, gunakan perintah berikut di terminal :
115 |
116 | - Mode release :
117 | ```
118 | flutter build appbundle --release
119 | ```
120 | - Mode debug :
121 | ```
122 | flutter build appbundle --debug
123 | ```
124 |
125 | Jika kamu ingin memisahkan hanya untuk sistem yang spesifik, gunakan perintah seperti berikut contohnya :
126 | ```
127 | flutter build appbundle --release --target-platform=android-arm
128 | ```
129 |
130 | Tunggu sampai proses build app bundle selesai. Untuk mengecek file hasil generate, dapat dilihat pada folder :
131 |
132 | Release :
133 | project/build/app/outputs/bundle/release
134 |
135 | Debug : project/build/app/outputs/bundle/
136 |
137 | ## Kesimpulan
138 |
139 | App Bundle sangat direkomendasikan oleh Google ketika kamu ingin release aplikasi ke Playstore.
140 |
141 | Tentunya catatan ini akan update lagi kedepannya, jangan lupa untuk share. Semoga bermanfaat ya 😃
--------------------------------------------------------------------------------
/build-micro-fe-module-federation.md:
--------------------------------------------------------------------------------
1 | ## What are micro frontends?
2 |
3 | Divide a monolithic app into multiple smaller apps. each smaller app is responsible for a distinct feature of the product. with micro frontends, multiple engineering teams can work in isolation. each smaller app is easier to understand and make changes without accidentally breaking another part of our app.
4 |
5 | ## What is the Module Federation?
6 |
7 | Introduced in Webpack 5, the Module Federation plugin gives developers a way to create multiple separate builds that form a single application. Any JavaScript application that is bundled with Webpack 5.0 or greater can dynamically load or share code and dependencies with any other at runtime.
8 |
9 | ## Why use Module Federation?
10 |
11 | - A better way to share code
12 |
13 | - Environment Independent
14 |
15 | - Resolves Dependency Issues
16 |
17 | ## Module Federation Configuration
18 |
19 | Module Federation is configuration-based, here basic configuration :
20 | ```
21 | import {Configuration, container} from 'webpack';
22 |
23 | export const webpackConfig: Configuration = {
24 | plugins: [
25 | new container.ModuleFederationPlugin({
26 | name: '',
27 | shared: []
28 | })
29 | ]
30 | };
31 | export default webpackConfig;
32 | ```
33 | Here are the key configuration options need to know.
34 |
35 | ### Name
36 |
37 | Name is the unique name for the exposed container. Module Federation uses the ContainerPlugin and when it is initialized, the name you entered will be used as the file name for the container’s relative path.
38 | ```
39 | plugins: [
40 | new container.ModuleFederationPlugin({
41 | name: 'shop',
42 | })
43 | ]
44 | };
45 | ```
46 | ### Filename
47 |
48 | Filename is used to specify the file name for the output bundle that also serves as an entry point to the bundle.
49 | ```
50 | plugins: [
51 | new container.ModuleFederationPlugin({
52 | filename: 'shop/remoteHome.js'
53 | })
54 | ]
55 | ```
56 | ### Remote
57 |
58 | The remote option is a list of static remote modules that can be accessed by the local module. Remote can be an array or an object.
59 | ```
60 | plugins: [
61 | new container.ModuleFederationPlugin({
62 | remotes: {
63 | ShopModule: 'ShopModule@http://localhost:3100/remoteHome.js'
64 | }
65 | })
66 | ]
67 | ```
68 | ### Exposes
69 |
70 | This is the path to the module or files exposed by the container; it can be an object or an array.
71 | ```
72 | plugins: [
73 | new container.ModuleFederationPlugin({
74 | exposes: {
75 | HomeComponent: './projects/app1-home/src/app/home/home.component.ts',
76 | ShopModule: './projects/app1-home/src/app/shop/shop.module.ts'
77 | }
78 | })
79 | ]
80 | ```
81 | With Module Federation you can share not just modules, but other file types. The above configuration shows how to expose two different files.
--------------------------------------------------------------------------------
/dasar-dasar-sql.md:
--------------------------------------------------------------------------------
1 | # Dasar-Dasar SQL
2 |
3 | Structured Query Language (SQL) adalah bahasa database standar yang digunakan dalam operasi basis data relasional. Baik itu untuk membuat, memelihara, dan serta melakukan operasi dasar seperti CRUD (create, retrieve, update, delete) hingga operasi kompleks yang melibatkan manipulasi data serta operasi aritmatika pada basis data relasional. Beberapa contoh basis data relasional yang umum digunakan adalah MySQL, PostgreSQL, dan SQL Server.
4 |
5 | Beberapa hal yang perlu diketahui dalam penggunaan SQL adalah SQL tidak case sensitive, artinya penulisan perintah-perintah pada SQL tidak terpengaruh oleh huruf kecil ataupun huruf besar. Namun disarankan mengkapitalkan kata-kata kunci seperti SELECT, UPDATE, DELETE dst. Untuk pembuatan tabel dan kolom, juga disarankan untuk menggunakan huruf kecil.
6 |
7 | Saat menjalankan beberapa perintah SQL atau umumnya disebut query ada kalanya kita ingin mendisable atau tidak menjalankan baris/query tertentu, hal yang dilakukan adalah dengan menambahkan tanda hubung ganda (--) di awal baris. Hal ini ekivalen dengan garis miring ganda (//) untuk tidak mengeksekusi baris tertentu pada beberapa bahasa pemrograman, misalnya PHP.
8 |
9 | Meskipun ada standar [ISO]() untuk penulisan SQL, namun pada implementasinya ada sedikit perbedaan dalam sintaks masing-masing basis data relasional. Jadi ada beberapa kemungkinan dimana ada sintaks yang berfungis di SQL Server tapi tidak berfungsi jika dijalankan di MySQL, begitupun sebaliknya.
10 |
11 | ### Primary Key
12 | Silahkan ditambahkan
13 |
14 | ### Foreign Key
15 | Silahkan ditambahkan
16 |
17 | ### Collation
18 | Silahkan ditambahkan
19 |
20 | ## Tipe Data
21 | Silahkan ditambahkan
22 |
23 | ## Sintaks Dasar SQL
24 | Beberapa perintah dasar dalam SQL meliputi perintah-perintah yang diperlukan dalam operasi dalam membuat dan menghapus database dan tabel di dalamnya, serta membuat, mengambil, memperbaharui dan memghapus data tertentu pada database.
25 |
26 | ### Membuat Database
27 | ```sql
28 | CREATE DATABASE nama_database;
29 | ```
30 |
31 | ### Menghapus Database
32 | ```sql
33 | DROP DATABASE nama_database;
34 | ```
35 |
36 | ### Membuat Tabel
37 | ```sql
38 | CREATE TABLE nama_tabel (kolom1 tipe_data(ukuran), column2 tipe_data(ukuran), column3 tipe_data(ukuran));
39 | ```
40 |
41 | ### Menghapus Tabel
42 | ```sql
43 | DROP TABLE nama_tabel;
44 | ```
45 |
46 | ### Mengosongkan Tabel
47 | ```sql
48 | TRUNCATE TABLE nama_tabel;
49 | ```
50 |
51 | > **Silahkan tambahkan catatan tambahan apa perbedaan antara perintah `DROP` dan perintah `TRUNCATE`**
52 |
53 | ## Operator
54 |
55 | **tunggu untuk langkah selanjutnya ... 😃**
56 |
--------------------------------------------------------------------------------
/kenalan-dengan-deno.md:
--------------------------------------------------------------------------------
1 | # Kenalan dengan Deno
2 |
--------------------------------------------------------------------------------
/kenalan-dengan-go.md:
--------------------------------------------------------------------------------
1 | # Kenalan dengan Go
2 |
3 | ## Daftar Isi
4 |
5 | - [Hello World](#hello-world)
6 | - [Variable](#variable)
7 | - [Function](#function)
8 | - [Pointer](#pointer)
9 |
10 |
11 |
12 | ## Hello World
13 | Program dalam Go terbuat dari paket - paket (`package`). Dan program mulai berjalan dalam `package` bernama `main`
14 |
15 | ```
16 | package main
17 |
18 | import (
19 | "fmt"
20 | )
21 |
22 | func main() {
23 | fmt.Println("Hello World") // Hello World
24 | }
25 | ```
26 |
27 |
28 |
29 | ## Variable
30 | Variable dalam Go dapat dideklarasikan dengan perintah `var` diikuti nama variable dan tipe data di akhir
31 |
32 | ```
33 | package main
34 |
35 | import (
36 | "fmt"
37 | )
38 |
39 | var name string = "John Doe"
40 | var age int = 19
41 |
42 | func main() {
43 | fmt.Println(name) // John Doe
44 | fmt.Println(age) // 19
45 | }
46 | ```
47 |
48 | Adapun cara singkat dalam medeklarasikan variabel yakni dengan statement `:=`. Dengan cara ini variabel akan secara terdeteksi tipe datanya. Namun cara ini hanya bisa dilakukan dalam fungsi
49 |
50 | ```
51 | package main
52 |
53 | import (
54 | "fmt"
55 | )
56 |
57 | func main() {
58 | name := "John Doe"
59 | age := 19
60 |
61 | fmt.Println(name) // John Doe
62 | fmt.Println(age) // 19
63 | }
64 | ```
65 |
66 | Dalam Go, dapat juga mendeklarasikan varible konstanta (varible yang nilainya tidak dapat diubah) dengan perintah `const`. Konstanta tidak dapat dideklarasikan dengan cara singkat seperti di atas
67 |
68 | ```
69 | package main
70 |
71 | import "fmt"
72 |
73 | func main() {
74 | const name string = "John Doe"
75 |
76 | fmt.Println("Hello my name is", name) // Hello my name is John Doe
77 | }
78 | ```
79 |
80 |
81 |
82 | ## Function
83 | Hampir sama dengan variable. Function dalam Go dapat dideklarasikan dengan perintah `func` diikuti nama function, tanda kurung dan tipe data di akhir. Tipe data tersebut merupakan tipe data dari nilai yang di-return oleh function tersebut (jika ada nilai yang di-return)
84 |
85 | ```
86 | package main
87 |
88 | import (
89 | "fmt"
90 | )
91 |
92 | func greet() string {
93 | return "Hello world, this is my Go demo";
94 | }
95 |
96 | func main() {
97 | fmt.Println(greet()) // Hello world, this is my Go demo
98 | }
99 | ```
100 |
101 | Argumen juga dapat ditambahkan ke function dengan mendeklarasikan nama variable argumen diikuti tipe data dalam tanda kurung function
102 |
103 | ```
104 | package main
105 |
106 | import (
107 | "fmt"
108 | )
109 |
110 | func greet() string {
111 | return "Hello world, this is my Go demo";
112 | }
113 |
114 | func addAge(a int, b int) int {
115 | return a + b
116 | }
117 |
118 | func main() {
119 | age := 19
120 |
121 | fmt.Println(greet()) // Hello world, this is my Go demo
122 | fmt.Println("My age is ", addAge(age, 5)) // My age is 24
123 | }
124 | ```
125 |
126 |
127 |
128 | ## Pointer
129 | Go memiliki pointer. Sebuah pointer menyimpan alamat memori dari sebuah nilai. Jika di-print, alamat memori akan berbentuk hexadesimal dengan awalan 0x. Untuk menggunakan pointer diperlukan operator `*` dan `&`
130 |
131 | Operator `&` mengambil alamat memori dari sebuah variable
132 | ```
133 | i := 42
134 | p = &i
135 |
136 | fmt.Println(p) // 0x******
137 | ```
138 |
139 | Operator `*` mengambail nilai dari alamat memori
140 | ```
141 | fmt.Println(*p) // 42
142 |
143 | *p = 21
144 | ```
145 |
146 | ```
147 | package main
148 |
149 | import "fmt"
150 |
151 | func main() {
152 | i := 42
153 | p := &i
154 |
155 | fmt.Println(p) // 0x******
156 | fmt.Println(*p) // 42
157 |
158 | *p = 21
159 |
160 | fmt.Println(i) // 21
161 | }
162 | ```
163 |
--------------------------------------------------------------------------------
/kenalan-dengan-nodejs.md:
--------------------------------------------------------------------------------
1 | # NodeJS Crash Course
2 |
3 | Untuk memulai belajar NodeJS pertama-tama install terlebih dahulu NodeJS nya. NodeJS bisa didownload di link berikut: . Download versi yang terbaru.
4 |
5 | Apabila instalasi telah selesai, ketikkan `node --v` untuk memastikan bahwa NodeJS telah berhasil terinstall.
6 |
7 | Pada terminal kamu juga bisa secara langsung mencoba menuliskan kode melalui _REPL_ singkatan dari _Read Eval Print Loop_, mudahnya memungkinkan kita menulis kode JavaScript di console.
8 |
9 | 
10 |
11 | Untuk keluar dari REPL, tekan `CTRL + C`. Meski kita bisa menuliskan kode JavaScript di terminal, kita tentu tidak akan menuliskannya disana, disini saya akan menggunakan Visual Studio Code sebagai kode editor.
12 |
13 | Disini saya bekerja di Visual Studio Code pada folder `NODE_CRASH_COURSE`.
14 |
15 | ## Membuat Package.json
16 |
17 | Biasanya yang pertama kali kita lakukan ketika membuat project node adalah membuat `package.json`. Kita tidak perlu membuat file ini secara manual, kita akan menggenerate file nya dengan cara mengetikkan di terminal `npm init`. Kemudian isilah beberapa pertanyaan yang diajukan.
18 |
19 | `package.json` sendiri tujuan utamanya adalah menyimpan daftar _dependency-dependency_ yang aplikasi kita gunakan. Sehingga, ketika kita berganti komputer kita bisa langsung menginstall _dependency_ yang ada di daftar `package.json` akan diinstall semuanya dengan cara mengetikkan `npm install` di terminal.
20 |
21 | Maksud dari _dependency_ diatas adalah misalnya kita menginstall suatu _package atau module_ di aplikasi kita dengan cara `npm install nama_package`.
22 |
23 | ### Contoh Instalasi Package
24 |
25 | Disini kita akan coba menginstall sebuah package bernama `uuid`. Package ini berfungsi untuk menggenerate id secara random.
26 |
27 | Ketikkan di terminal `npm install uuid`. Setelah berhasil, maka akan terbuat folder `node_modules` yang mana di dalamnya ada modul `uuid`. Dan pada `package.json` juga akan terupdate bahwa terdapat _dependency_. **Package yang kita install akan diletakkan di dalam folder `node_modules`**.
28 |
29 | ### Dev Dependency
30 |
31 | Ada juga yang dinamakan _dev dependency_ dimana hanya diperlukan sewaktu _development_ atau pengembangan saja, tidak ketika aplikasi kita _deploy_ ke internet.
32 |
33 | Sekarang kita akan menginstall `nodemon` dimana package ini berguna untuk ketika kita ada perubahan pada kode, kita tidak perlu me-restart ulang server nya. `nodemon` akan kita install saat development saja.
34 |
35 | Ketikkan perintah berikut: `npm install --save-dev nodemon` atau lebih singkatnya `npm install -D nodemon`.
36 |
37 | ### NPM Install
38 |
39 | Misalnya kita ingin mengupload file aplikasi kita dan menggunakannya di komputer lain. Kita tidak meng-upload folder `node_modules`. Folder tersebut berisikan banyak sekali file dari _dependency_ yang aplikasi kita gunakan. Olehkarenanya, cobalah hapus folder `node_modules`, kemudian ketikkan di terminal `npm install`. Maka npm akan menginstall modul-modul yang diperlukan aplikasi kita.
40 |
41 | ## Hello World
42 |
43 | Selanjutnya, buatlah file `index.js` di folder utama, kemudian ketikkanlah kode berikut:
44 |
45 | ```javascript
46 | console.log('Hello from NodeJS...');
47 | ```
48 |
49 | Untuk menjalankan file ini, ketikkan di terminal `node index` atau `node index.js`.
50 |
51 | Berikut screenshot hasil nya:
52 |
53 | 
54 |
55 | Pada kenyataannya nanti, ketika mengembangkan aplikasi kita akan memiliki banyak file. Tidak hanya satu file. File itu bisa berisi suatu _class, function_ dan lain-lain yang nantinya akan di-_export_ sehingga dapat kita gunakan.
56 |
57 | ## Membuat Module
58 |
59 | Buatlah sebuah file bernama `person.js`, lalu ketikkan kode berikut:
60 |
61 | ```java
62 | const person = {
63 | name: 'Fadli Hidayatullah',
64 | age: 22
65 | };
66 |
67 | module.exports = person;
68 | ```
69 |
70 | `module.exports = person` berfungsi untuk meng-ekspor `person` sehingga bisa digunakan di tempat lain. Jadi ketika modul ini di-_require_ di tempat lain, `person` inilah yang akan dikembalikan. Untuk dapat menggunakannya pada tempat lain misalnya di `index.js`. Kita gunakan fungsi `require(lokasi_file)`.
71 |
72 | Selanjutnya, pada `index.js` ketikkan kode berikut:
73 |
74 | ```javascript
75 | // ...
76 | const person = require('./person');
77 |
78 | console.log(person);
79 | console.log(person.name);
80 | ```
81 |
82 | Berikut hasilnya:
83 |
84 | 
85 |
86 | Biasanya suatu modul tidak hanya suatu objek yang di ekspor tetapi, biasanya function atau class. Olehkarenanya, ubahlah kode yang ada di `person.js` menjadi sebuah class.
87 |
88 | ```javascript
89 | console.log('person.js');
90 | console.log(__dirname, __filename);
91 |
92 | class Person {
93 | constructor(name, age) {
94 | this.name = name;
95 | this.age = age;
96 | }
97 |
98 | greeting() {
99 | console.log(`Hi. My name is ${this.name} and I am ${this.age}.`);
100 | }
101 | }
102 |
103 | module.exports = Person;
104 | ```
105 |
106 | Dan file `index.js` menjadi berikut:
107 |
108 | ```javascript
109 | const Person = require('./person');
110 |
111 | const person1 = new Person('Fadli', 22);
112 |
113 | person1.greeting();
114 | ```
115 |
116 | Ketika file `index.js` dijalankan maka berikut hasilnya:
117 |
118 | 
119 |
120 | Ketika kita me-_require_ suatu modul, file yang di-_require_ kode nya juga akan dijalankan. Oleh sebab itulah mengapa `person.js` dan informasi `__dirname` dan `__filename` tampil pada terminal.
121 |
122 | ## Node Core Modules
123 |
124 | Sekarang, kita akan mencoba menggunakan modul-modul yang sudah disediakan oleh NodeJS.
125 |
126 | ### Modul Path
127 |
128 | Pada NodeJS terdapat package `path` yang bisa digunakan untuk bekerja dengan file dan direktori path. Disini kita akan melihat sekilas beberapa method yang nantinya akan kita gunakan.
129 |
130 | Buatlah sebuah folder baru bernama `reference`, kemudian buat file `path_demo.js`. Tulislah kode berikut ini:
131 |
132 | ```javascript
133 | const path = require('path');
134 |
135 | // File name
136 | console.log(path.basename(__filename));
137 |
138 | // Directory name
139 | console.log(path.dirname(__filename));
140 |
141 | // Create path object
142 | console.log(path.parse(__filename).dir);
143 |
144 | // Concatenate paths
145 | console.log(path.join(__dirname, 'test', 'hello.html'));
146 | ```
147 |
148 | ### Modul FS
149 |
150 | Disini kita akan mencoba bekerja dengan file sistem, diantaranya adalah:
151 |
152 | - Membuat folder
153 | - Membuat sekaligus menulis file
154 | - Meng-append file
155 | - Membaca file
156 |
157 | Buatlah sebuah file baru bernama `fs_demo.js` pada folder `reference`, kemudian tuliskan kode berikut:
158 |
159 | ```javascript
160 | const fs = require('fs');
161 | const path = require('path');
162 |
163 | // Create folder
164 | fs.mkdir(path.join(__dirname, '/test'), (err) => {
165 | // if (err) throw err;
166 |
167 | console.log('Folder created ...');
168 | });
169 |
170 | // Create and write to file
171 | fs.writeFile(
172 | path.join(__dirname, '/test', 'hello.txt'),
173 | 'Hello world!',
174 | (err) => {
175 | if (err) throw err;
176 |
177 | console.log('File written to ...');
178 |
179 | // Append file
180 | fs.appendFile(
181 | path.join(__dirname, '/test', 'hello.txt'),
182 | 'Welcome Ramadhan Mubarrak',
183 | (err) => {
184 | if (err) throw err;
185 |
186 | console.log('File appended to ...');
187 | },
188 | );
189 | },
190 | );
191 |
192 | // Read file
193 | fs.readFile(path.join(__dirname, '/test', 'hello.txt'), 'utf8', (err, data) => {
194 | if (err) throw err;
195 |
196 | console.log('Read data: ');
197 | console.log(data);
198 | });
199 | ```
200 |
201 | Terdapat metode _Synchronous_ dan _Asynchronous_. Ketika kita menggunakan Asynchronous maka kita harus menuliskan _function callback_-nya.
202 |
203 | ### Module OS
204 |
205 | Modul selanjutnya adalah modul `os`, memungkinkan kita untuk mengetahui informasi tentang Sistem Operasi dari platform yang sedang digunakan.
206 |
207 | Buatlah sebuah file baru bernama `os_demo.js` pada folder `reference`. Tulislah kode berikut ini:
208 |
209 | ```javascript
210 | const os = require('os');
211 |
212 | // Platform
213 | console.log(os.platform());
214 |
215 | // CPU Arch
216 | console.log(os.arch());
217 |
218 | // CPU Core Info
219 | console.log(os.cpus());
220 |
221 | // Free memory
222 | console.log(os.freemem());
223 |
224 | // Total memory
225 | console.log(os.totalmem());
226 |
227 | // Home directory
228 | console.log(os.homedir());
229 |
230 | // OS Type
231 | console.log(os.type());
232 |
233 | // Uptime
234 | console.log(os.uptime());
235 | ```
236 |
237 | ### Module URL
238 |
239 | Selanjutnya adalah modul `url` yang memungkinkan kita untuk bekerja dengan URL.
240 |
241 | Buatlah file baru bernama `url_demo.js` pada folder `reference`. Tuliskan kode berikut ini:
242 |
243 | ```javascript
244 | const url = require('url');
245 |
246 | const myUrl = new URL(
247 | 'http://fadlihdytullah.id/hello.html?id=10&status=active',
248 | );
249 |
250 | // Serialize URL
251 | console.log(myUrl.href);
252 | console.log(myUrl.toString());
253 |
254 | // Host (root domain)
255 | console.log(myUrl.host);
256 | // Host (does not get port)
257 | console.log(myUrl.hostname);
258 |
259 | // Path name
260 | console.log(myUrl.pathname);
261 |
262 | // Serialize query
263 | console.log(myUrl.search);
264 | // Params object
265 | console.log(myUrl.searchParams);
266 |
267 | // Add param
268 | console.log(myUrl.searchParams.append('abc', '123'));
269 |
270 | // Loop through params
271 | myUrl.searchParams.forEach((value, key) => {
272 | console.log(`${key}: ${value}`);
273 | });
274 | ```
275 |
276 | ## EventEmitter
277 |
278 | Terkadang adakalanya lebih baik kita mengganti _callbacks_ dan _promises_ dengan _EventEmitter_. Mungkin untuk awal-awal agak sulit untuk dimengerti, namun mudahnya, kita bisa membuat _events listener_ dari suatu object dan mengaktifkannya.
279 |
280 | Untuk dapat menggunakan EventEmitter kita menggunakan modul `events`. Kita bisa men-_extend_ EventEmitter pada suatu class ataupun mewarisi sifat dari EventEmitter dengan modul `util`.
281 |
282 | Buatlah file baru bernama `event_demo.js` pada folder `reference`, kemudian tuliskan kode berikut:
283 |
284 | ```javascript
285 | const EventEmitter = require('events').EventEmitter;
286 | const util = require('util');
287 |
288 | const myObject = function(thing) {
289 | EventEmitter.call(this);
290 | };
291 |
292 | util.inherits(myObject, EventEmitter);
293 |
294 | myObject.prototype.doSomething = function(thing) {
295 | this.emit('something', thing);
296 |
297 | return this; // make it chainable method, for ease of use
298 | };
299 |
300 | const obj = new myObject();
301 | obj.on('something', (thing) => console.log(thing));
302 |
303 | obj
304 | .doSomething('Ohayou!')
305 | .doSomething('Nan da yo')
306 | .doSomething('Yare yare na kimi wa...');
307 | ```
308 |
309 | Kemudian jalankan file tersebut, maka hasilnya adalah sebagai berikut:
310 |
311 | 
312 |
313 | Selanjutnya buatlah file `logger.js` pada project folder, kemudian tuliskan kode berikut:
314 |
315 | ```javascript
316 | const EventEmitter = require('events');
317 | const uuid = require('uuid');
318 |
319 | module.exports = class Logger extends EventEmitter {
320 | log(msg) {
321 | this.emit('message', { id: uuid.v4(), msg });
322 | return this;
323 | }
324 | };
325 | ```
326 |
327 | Pada `index.js`, kita akan menggunakan kelas `Logger`.
328 |
329 | ```javascript
330 | // ... kode sebelumnya
331 | const Logger = require('./logger');
332 |
333 | const loggerObj = new Logger();
334 | loggerObj.on('message', (data) => console.log(data));
335 |
336 | loggerObj
337 | .log('Yare2 na')
338 | .log('Nan da yo')
339 | .log('Wakatta yo!');
340 | ```
341 |
342 | Ketika `index.js` dijalankan maka berikut hasilnya:
343 |
344 | 
345 |
346 | > Referensi lebih lanjut:
347 | > >
348 |
349 | ## Membuat Server
350 |
351 | Untuk membuat server kita membutuhkan modul `http`. Berikut contoh sederhana dalam membuat server.
352 |
353 | Buatlah sebuah file baru bernama `http_demo.js` pada folder `reference`. Tulislah kode berikut:
354 |
355 | ```javascript
356 | const http = require('http');
357 |
358 | http
359 | .createServer((req, res) => {
360 | res.end('Yosh! Sugoi desu.');
361 | })
362 | .listen(5000, () => console.log('Server running ...'));
363 | ```
364 |
365 | Method `createServer()` membutuhkan function callback yang memiliki dua parameter, yakni `req` sebagai _request_ dan `res` sebagai _response_.
366 |
367 | Agar si server dapat bekerja maka kita harus membuat si server _listen_ terhadap suatu port tertentu, misalnya 5000.
368 |
369 | Maka ketika kita menjalankan file tersebut, server berhasil dibuat.
370 |
371 | 
372 |
373 | ### Merender File HTML
374 |
375 | Sejatinya, server nantinya akan menyajikan file HTML untuk ditampilkan pada user. Misalnya user melakukan request pada halaman utama, halaman about, halaman contact.
376 |
377 | Hapuslah semua kode pada `index.js`, kemudian tuliskan kode berikut:
378 |
379 | ```javascript
380 | const http = require('http');
381 | const path = require('path');
382 | const fs = require('fs');
383 |
384 | const PORT = process.env.PORT || 5000;
385 | const server = http.createServer((req, res) => {
386 | res.end('
Home
');
387 | });
388 |
389 | server.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
390 | ```
391 |
392 | Kita menggunakan `process.env.PORT` disini karena nantinya kita akan menyesuaikan port dari _environment_ yang kita gunakan, jika tidak ditemukan maka gunakan port 5000.
393 |
394 | Untuk mengetahui URL apa yang sedang diakses oleh user, kita gunakan `req.url`. Sehingga, kita bisa membuat rute atau _routing_ mengenai file mana yang nantinya kita akan render.
395 |
396 | Kita jug bisa menuliskan kode HTML pada `res.end()`.
397 |
398 | Jalankan lah file tersebut, akses `localhost:5000` atau sesuaikan port nya. Tapi, ketika kita mengubah file `index.js` , misalnya dari `res.end('
Home
')` menjadi `res.end('
Homepage
');` kita diharuskan me-restart server agar terjadi perubahan.
399 |
400 | Maka dari itulah sebelumnya kita install package `nodemon`, sehingga jika terjadi perubahan maka akan ter-restart otomatis.
401 |
402 | Untuk dapat melakukannya, buka file `package.json`. Ubahlah kode:
403 |
404 | ```json
405 | {
406 | "scripts": {
407 | "test": "echo \"Error: no test specified\" && exit 1"
408 | }
409 | }
410 | ```
411 |
412 | Menjadi,
413 |
414 | ```json
415 | {
416 | "scripts": {
417 | "start": "node index",
418 | "dev": "nodemon index"
419 | }
420 | }
421 | ```
422 |
423 | Kode `"start": "node index"` tidak akan melakukan update perubahan, tetapi ini merupakan skrip standar yang akan dijalankan ketika kita men-_deploy_ aplikasi kita.
424 |
425 | Kode yang membuat update perubahan secara otomatis yang akan kita lakukan saat _dev_ adalah `"dev" : "nodemon index"`. Untuk dapat menjalankan skrip ini, pada terminal ketikkan `npm run dev`. Maka apapun yang kamu ubah pada file `index.js` akan ter-update.
426 |
427 | ### Menambahkan Content-type
428 |
429 | Jika diperhatikan kita hanya menggunakan `res.end('
Homepage
')` maka ketika lihat `view page source` halaman utama nya dan _network_ nya tidaka akan kita temukan _template_ html serta _content-type_ bahwa file tersebut adalah HTML.
430 |
431 | Untuk itu tambahkan kode sebelum `res.end(
Homepage
)` dengan kode berikut:
432 |
433 | ```javascript
434 | res.writeHead(200, { 'Content-type': 'text/html' });
435 | ```
436 |
437 | Maka disini kita menulis _header_ nya 200 yang artinya OK, kemudian content type nya HTML.
438 |
439 | ### Merender File HTML
440 |
441 | Untuk melakukannya kita akan menggunakan modul `fs` untuk membaca file HTML nya, dan `path` untuk lokasi filenya.
442 |
443 | Buatlah folder baru pada root folder, berilah nama `public`. Pada folder inilah kita akan meletakkan file-file HTML dan CSS kita nantinya.
444 |
445 | Buatlah 2 file, yakni `index.html` dan `about.html`. Masing-masing kode nya dibawah ini:
446 |
447 | ```html
448 |
449 |
450 |
451 |
452 |
453 |
454 | Welcome
455 |
456 |
457 |
');
483 | }
484 | ```
485 |
486 | Menjadi,
487 |
488 | ```javascript
489 | if (req.url === '/') {
490 | fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, content) => {
491 | if (err) throw err;
492 |
493 | res.writeHead(200, { 'Content-type': 'text/html' });
494 | res.end(content);
495 | });
496 | }
497 |
498 | if (req.url === '/about') {
499 | fs.readFile(path.join(__dirname, 'public', 'about.html'), (err, content) => {
500 | if (err) throw err;
501 |
502 | res.writeHead(200, { 'Content-type': 'text/html' });
503 | res.end(content);
504 | });
505 | }
506 | ```
507 |
508 | #### RESTApi & Microservices
509 |
510 | Adakalanya nanti kamu akan mengembangkan suatu RESTApi atau microservices, yang biasanya data yang dikirim dalam bentuk JSON. Meskipun biasanya kita melakukannya menggunakan _express_, berikut cara melakukannya pada NodeJS.
511 |
512 | Tambahkan kode berikut ini setelah penutup _if_ untu route `/about`.
513 |
514 | ```javascript
515 | if (req.url === '/api/user') {
516 | const users = [
517 | { id: 1, name: 'fadlihdytullah', age: 22 },
518 | { id: 2, name: 'yusriron', age: 20 },
519 | ];
520 |
521 | res.writeHead(200, { 'Content-type': 'application/json' });
522 | res.end(JSON.stringify(users));
523 | }
524 | ```
525 |
--------------------------------------------------------------------------------
/kenalan-dengan-npm.md:
--------------------------------------------------------------------------------
1 | # NPM Crash Course
2 |
3 | Adakalanya kamu ingin menginstall suatu library, dengan NPM kita bisa melakukannya dengan mudah.
4 |
5 | ## Pengenalan Apa Itu NPM
6 |
7 | **Node Package Manager**
8 |
9 | Jika kamu pernah bekerja dengan teknologi lain, pada Ruby ada _Ruby Gems_, pada Python ada _Pip_, mudahnya NPM adalah _JavaScript Package Manager_ memudahkan kamu untuk menginstall modul/package/library dengan mudah, misalnya menginstall _Bootstrap, JQuery, Express_.
10 |
11 | **Pre-Installed with Node.js**
12 |
13 | **Instalasi modul/package di sistem kita dengan mudah**
14 |
15 | Modul ataupun package mudahnya library JavaScript.
16 |
17 | **Membuat developer mudah untuk berbagi _reuse_ kode**
18 |
19 | ## Apa yang Akan Kamu Pelajari
20 |
21 | - Install, remove, update, & list package
22 | - Berkenalan dengan _package.json_
23 | - Local & global package
24 | - Dependency & dev-dependency
25 | - Commands & Shortcuts
26 | - Versioning
27 | - NPM Scripts
28 |
29 | ## Menggunakan NPM
30 |
31 | Untuk dapat menggunakan NPM, kamu harus menginstall Node.js terlebih dahulu. Node.js bisa di download di link berikut:
32 |
33 | Untuk melihat-lihat package yang ada di NPM, kamu bisa mengunjungi situs .
34 |
35 | Kita akan bermain-main dengan command NPM di terminal, olehkarena, buatlah project baru bernama `npm-app`, buka folder tersebut di teks editor kamu, kemudian bukalah terminal, pastikan terminal path nya ada di project folder tersebut. Disarankan menggunakan _git bash_ untuk terminal nya, jika kamu menggunakan windows.
36 |
37 | - `npm -v` atau `npm --version`, melihat versi NPM
38 | - `npm` melihat seluruh daftar command pada NPM
39 |
40 | ## Package.json File
41 |
42 | File `package.json` merupakan file yang sangat penting dalam dunia JavaScript, file ini berisi _manifest_ dan informasi mengenai app kita.
43 |
44 | Tapi, yang paling penting adalah di dalam file ini terdapat daftar _dependency_ yang digunakan aplikasi kita, _nama dan versi_ dari package yang digunakan. Sehingga, ketika kita deploy aplikasi kita ke internet, maka NPM dapat menginstall semua dependency yang ada.
45 |
46 | Kita juga bisa membuat _NPM Scripts_ untuk melakukan suatu _task_.
47 |
48 | Kita bisa membuat file ini secara manual, tetapi kita bisa dengan mudah membuat file `package.json` dengan perintah `npm init`.
49 |
50 | ### Membuat File Package.json
51 |
52 | Buka kembali terminal kamu dan ketikkan `npm init`, kamu akan dipaparkan beberapa pertanyaan informasi mengenai app yang akan dibuat.
53 |
54 | Berikut pertanyaan yang diajukan:
55 |
56 | - `npm init`, membuat file `package.json`
57 | - `package name`, nama package yang diinginkan
58 | - `version`, versi dari package nya
59 | - `description`, deskripsi package
60 | - `entry point`, file utama JavaScript nya, terkadang `app.js`, adajuga `server.js`
61 | - `test command`, dikosongkan saja
62 | - `git repository` git repository nya
63 | - `keywords` kata kunci dari package nya
64 | - `author`, author dari package
65 | - `licence`, defaultnya ISC, tetapi terkadang MIT
66 |
67 | Jika kamu ingin menggunakan jawaban default nya, ketikkan perintah `npm init -y` atau `npm init --yes`. Informasi tadi bisa dirubah pada file `package.json`.
68 |
69 | ### Konfigurasi Nilai Default NPM Init
70 |
71 | Untuk **mengubah** nilai default dari `package.json` ketika di `npm init`, gunakan perintah berikut
72 |
73 | ```bash
74 | npm config set init-author-name "Fadli Hidayatullah"
75 | # atau
76 | npm set init-licence "MIT"
77 | ```
78 |
79 | Untuk **mengetahui** nilai default dari `package.json` ketika di `npm init`, gunakan perintah berikut
80 |
81 | ```bash
82 | npm config get init-author-name
83 | # atau
84 | npm get init-licence
85 | ```
86 |
87 | Untuk **menghapus** nilai yang kita ubah dari `package.json` ketika di `npm init` sehingga kembali ke pengaturan default, gunakan perintah berikut
88 |
89 | ```bash
90 | npm config delete init-author-name
91 | ```
92 |
93 | ## Menginstall Package
94 |
95 | Untuk menginstall suatu package atau modul, kita gunakan perintah,
96 |
97 | ```bash
98 | npm install package_name --save
99 | ```
100 |
101 | Flag atau opsi `--save` berguna untuk menyimpan informasi package yang diinstall, kemudian didaftarkan pada object `dependency` di `package.json`.
102 |
103 | Sebagai contoh, kita akan menginstall package `lodash`.
104 |
105 | ```bash
106 | npm install lodash --save
107 | ```
108 |
109 | Setelah berhasil diinstall maka,
110 |
111 | - Terdapat object dependecy pada `package.json`
112 | - Terdapat folder `node_modules` yang didalamnya terdapat `lodash`
113 |
114 | Mengapa flag atau opsi `--save` sangat penting? Ketika kita mem-push project kita ke github atau misalnya memindahkan project kita ke komputer lain, kita tidak mengikutsertakan `node_modules`. Hal ini dikarenakan folder tersebut nantinya berisikan banyak sekali modul-modul yang digunakan aplikasi kita, sehingga membuat project kita ukuran nya semakin besar jika kita upload.
115 |
116 | Jadinya, dengan menggunakan `--save` ketika menginstall suatu package, kita bisa dengan mudah menginstall kembali package tersebut di tempat lain.
117 |
118 | Sebagai contoh, seseorang mengkloning project kamu yang di upload di github. Tentu, kamu tidak mengikutsertakan folder `node_modules`, semua dependecy aplikasi kamu berada di `package.json`.
119 |
120 | Gunakan perintah,
121 |
122 | ```bash
123 | npm install
124 | ```
125 |
126 | Untuk menginstall seluruh modul-modul yang diperlukan aplikasi tersebut.
127 |
128 | Setelah berhasil menginstall package di atas, maka isi dari `package.json`, kurang lebih seperti berikut,
129 |
130 | ```json
131 | {
132 | "name": "npm-app",
133 | "version": "1.0.0",
134 | "description": "",
135 | "main": "index.js",
136 | "scripts": {
137 | "test": "echo \"Error: no test specified\" && exit 1"
138 | },
139 | "keywords": [],
140 | "author": "",
141 | "license": "ISC",
142 | "dependencies": {
143 | "lodash": "^4.17.11"
144 | }
145 | }
146 | ```
147 |
148 | Buatlah sebuah file baru di _project folder_, ketikkan kode berikut,
149 |
150 | ```javascript
151 | const _ = require('lodash');
152 |
153 | const numbers = [22, 43, 23, 93, 55, 87, 1];
154 |
155 | console.table(numbers);
156 |
157 | _.each(numbers, function(number, i) {
158 | console.log(i, number);
159 | });
160 | ```
161 |
162 | [](https://gyazo.com/9c1595bd375c855772d569b542980a4c)
163 |
164 | ## Dev Dependency
165 |
166 | Ada juga yang dinamakan _dev-dependency_ dimana dependency ini hanya kamu gunakan saat _development_ bukan pada production.
167 |
168 | Sebagai contoh yang biasa kita gunakan saat development, salah satunya `gulp` salah satu tugasnya me-_minify_ file CSS kamu.
169 |
170 | ```bash
171 | npm install gulp gulp-sass --save-dev
172 | # atau
173 | npm install gulp gulp-sass -D
174 | ```
175 |
176 | Setelah berhasil diinstall maka pada `package.json` akan ditambahkan object `devDependencies`.
177 |
178 | ```json
179 | {
180 | "name": "npm-app",
181 | "version": "1.0.0",
182 | "description": "",
183 | "main": "index.js",
184 | "scripts": {
185 | "test": "echo \"Error: no test specified\" && exit 1"
186 | },
187 | "keywords": [],
188 | "author": "",
189 | "license": "ISC",
190 | "dependencies": {
191 | "lodash": "^4.17.11"
192 | },
193 | "devDependencies": {
194 | "gulp": "^4.0.2",
195 | "gulp-sass": "^4.0.2"
196 | }
197 | }
198 | ```
199 |
200 | Perintah `npm install` akan menginstall dependency dan juga dev-dependency. Jika kamu ingin menginstall regular dependency nya saja, maka gunakan perintah `npm install --production`.
201 |
202 | ## Menghapus Package
203 |
204 | Untuk menghapus package dapat dilakukan beberapa cara, berikut diantaranya,
205 |
206 | ```bash
207 | npm uninstall gulp gulp-sass --save-dev
208 | npm un stylus --save
209 | # atau
210 | npm remove lodash --save
211 | npm rm nodemon --save-dev
212 | ```
213 |
214 | ## Install Versi Tertentu & Update
215 |
216 | ```bash
217 | npm install lodash@4.17.4 --save
218 |
219 | npm update lodash
220 | ```
221 |
222 | ## Global Package
223 |
224 | Ketika kita menginstall package secara global, maka file nya tidak akan disimpan di `node_modules` dan didaftarkan di `package.json`.
225 |
226 | Package yang biasa kita install secara global adalah `nodemon` atau `live-server`. Package `nodemon` sangat berguna ketika kamu mengembangkan aplikasi menggunakan _express_ dimana `nodemon` akan nge-_watch_ perubahan yang kamu lakukan, sehingga tidak perlu me-restart server melihat perubahannya.
227 |
228 | ```bash
229 | npm install nodemon -g
230 | npm remove nodemon -g
231 | ```
232 |
233 | Lantas, berada dimana package ini?
234 |
235 | ```bash
236 | npm root -g
237 | ```
238 |
239 | ## Melihat Daftar Package
240 |
241 | ```bash
242 | npm list
243 | ```
244 |
245 | Perintah `npm list` akan menampilkan semua dependency di semua modul.
246 |
247 | ```bash
248 | npm list --depth 0
249 | npm list --depth 1
250 | ```
251 |
252 | ## Scripts
253 |
254 | Pada file `package.json` terdapat skrip, dimana dengan skrip ini, kita bisa menjalankan suatu _testing_ dengan _mocha_, atau menjalankan aplikasi yang awalnya `node index.js` menjadi `node start`, karena bisajadi ada orang lain yang mengkloning aplikasi kita dan ingin langsung menjalankan aplikasi.
255 |
256 | Bukalah file `package.json`, ubahlah kode berikut,
257 |
258 | ```json
259 | "test": "echo \"Error: no test specified\" && exit 1"
260 | ```
261 |
262 | Menjadi,
263 |
264 | ```json
265 | "start": "node index.js",
266 | "dev": "nodemon index"
267 | ```
268 |
269 | Untuk menjalankan skrip ini, pada terminal,
270 |
271 | ```bash
272 | npm start
273 | ```
274 |
275 | Akan tetapi, untuk menjalankan skrip yang `dev`, terdapat sedikit perbedaan,
276 |
277 | ```bash
278 | npm run dev
279 | ```
280 |
281 | ## Mengupload ke Github
282 |
283 | Jika kamu ingin mengupload project kamu ke Github dan tidak ingin mengikutsertakan suatu file atau folder, misalnya folder `node_modules`, buatlah file `.gitignore` pada root folder.
284 |
285 | Kemudian, tulislah daftar yang tidak ingin kamu sertakan ketika ingin di _push_.
286 |
--------------------------------------------------------------------------------
/kenalan-dengan-react.md:
--------------------------------------------------------------------------------
1 | # Kenalan dengan React JS
2 |
3 | ## Disclaimer
4 |
5 | Note ini memang jauh dari sempurna dari segi banyak kontennya, tetapi secara
6 | berkala(per hari) akan selalu diupdate.
7 |
8 | ## Intro
9 |
10 | Seperti yang kita tahu [React](https://github.com/facebook/react) adalah library
11 | untuk view dalam pembuatan aplikasi Front End. Nah seiring berjalannya update
12 | terkini, pada note ini akan membahas perintah react dasar. Sangat
13 | direkomendasikan untuk memahami `JS ES6` terlebih dahulu. Salah satu note nya
14 | [disini](https://github.com/randyviandaputra/my-notes/blob/master/penulisan-es6-dan-pengenalan-fitur.md).
15 |
16 | ## Daftar Isi
17 |
18 | - [Komponen Fungsi](#komponen-fungsi)
19 | - [Bermain dengan Props](#bermain-props)
20 | - [Stateful dan Stateless](#state)
21 | - Akan diupdate/ bertambah ASAP^^
22 |
23 | ## Komponen Fungsi
24 |
25 | Pada saat note ini dibuat, versi terakhir react
26 | yang digunakan adalah 16.8.6. The newest update nya komponen sekarang
27 | menggunakan fungsi tidak menggunakan class lagi.
28 |
29 |
