Pandoc adalah alat yang sangat kuat dan fleksibel untuk konversi dokumen, yang dapat membantu Anda beralih antara berbagai format dokumen dengan mudah. Apakah Anda seorang penulis, akademisi, atau profesional di bidang teknologi, kemampuan untuk mengonversi dokumen dari satu format ke format lain seringkali menjadi kebutuhan yang mendesak.

\
Di era digital saat ini, di mana kolaborasi dan interoperabilitas menjadi semakin penting, memiliki alat yang dapat mengatasi berbagai format dokumen merupakan aset yang sangat berharga.


Dalam tutorial ini, kita akan menjelajahi kemampuan Pandoc dalam mengonversi file dokumen, khususnya dari format .docx ke .html. 

&nbsp;
### **Mengapa memilih Pandoc?**


Pandoc bukan hanya sekadar alat konversi, ia adalah pustaka pemrosesan dokumen yang mendukung berbagai format dokumen mulai dari Markdown, LaTeX, hingga EPUB dan banyak lainnya. Dengan menggunakan Pandoc, Anda bisa dengan mudah mengubah dokumen Word menjadi halaman web HTML yang rapi dan terstruktur, siap untuk dipublikasikan atau dibagikan.

&nbsp;
### **Install Pandoc**

Pandoc support dengan berbagai OS seperti Windows, Linux, MacOS, Docker, dan lain - lain, kita hanya perlu menyesuaikan saja.

&nbsp;
### **Cara menggunakan**

Untuk menggunakan pandoc caranya cukup mudah, buka terminal dan masukan perintah

```shell
pandoc [option]
```

&nbsp;
### **Konversi Docx to HTML**

Berikut ini cara melakukan konversi dari file Docx ke HTML

```shell
pandoc -s input.docx -o output.html
```
&nbsp;
Dalam perintah di atas:

 
*    input.docx adalah nama file Word yang ingin Anda konversi.
*  output.html adalah nama file HTML yang akan dihasilkan.


\
Pada contoh berikut ini saya akan coba melakukan konversi dokumen yang cukup komples dimana didalam dokumen tersebut terdapat rumus matematika.

\
![docx.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/docx_e44718468d.png)

\
**Jalankan Pandoc**

\
Buka terminal dan masukan perintah

```shell
pandoc input.docx --mathml --extract-media=./media  -o output.html
```

* extrac-media adalah lokasi dimana media seperti gambar di export (jika ada)
*  --mathml digunakan supaya rumus matematika di konversi menjadi MathML(Math HTML)

\
Hasil dari konversi diatas adalah seprti berikut ini:

&nbsp;

![pandoc_html.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/pandoc_html_0ccc6f4585.png)


\
Dari gambar diatas, terlihat hasil export HTML sangat mirip dengan apa yang ada di file Docx.


\
Pandoc bukan hanya alat konversi yang berdiri sendiri, tetapi juga alat yang sangat fleksibel dan dapat diintegrasikan dengan berbagai bahasa pemrograman, seperti Python, Go, Node.js, PHP, Rust, dan lainnya. Kemampuan ini membuat Pandoc menjadi pilihan favorit bagi para pengembang yang ingin mengotomatisasi proses konversi dokumen dalam aplikasi mereka.

\
Contoh penggunaan dengan Python

```shell
import pypandoc
output = pypandoc.convert_file('input.docx', 'html', outputfile='output.html')
print(output)
```


&nbsp;




Pada tutorial ini, kita akan belajar bagaimana cara convert file dokumen Docx menjadi HTML secara cepat dan mudah dengan menggunakan Pandoc

large_bg-pandoc.jpg

medium_bg-pandoc.jpg

small_bg-pandoc.jpg

thumbnail_bg-pandoc.jpg

bg-pandoc.jpg

Convert Docx FIle To HTML Support Math Equation Using Pandoc

Pada tutorial kali ini, kita akan belajar bagaimana melakukan Dockerize aplikasi Next JS dengan mode Standalone.

&nbsp;
### Apa itu mode standalone?

\
Mode standalone adalah proses build next js dimana akan mengoptimalkan hasil build dengan membuang node_modules dan hanya menggunakan library yang dibutuhkan saja dan di convert menjadi static file.

\
Dengan menggunakan standalone ukuran aplikasi akan menjadi lebih kecil sampai 80%

\
Jika kita ingin menjalankan aplikasi Next JS kita sebagai container maka menggunakan mode standalone akan sangat membantu mengurangi size dari container.

&nbsp;
### Install Next JS

\
Kita akan menginstall Next JS terlebih dahulu, jalankan perintah dibawah dan buat nama project misalnya "next-standalone"

&nbsp;
```shell
npx create-next-app@latest

```

\
Lalu masuk kedalam folder "next-standalone" kemudian edit file **next.config.js** tambahkan output

&nbsp;
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
};

export default nextConfig;

```

\
Kemudian buat file Dockerfile

```shell
FROM node:18-alpine AS base

 
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
# Set working directory
WORKDIR /app
COPY . .
 
# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/package.json .
RUN yarn install
 
# Build the project
COPY --from=builder /app/ .
RUN yarn build
 
FROM base AS runner
WORKDIR /app
 
 
# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/next.config.mjs .
COPY --from=installer /app/package.json .
# COPY --from=installer /app/.env.production .
 
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=installer --chown=nextjs:nodejs /app/public ./public

EXPOSE 3000

CMD node server.js 
```

\
Kemudian jalankan perintah


```shell
docker build -t next-standalone .
```

\
Setelah berhasil, kemudian testing dengan menjalankan perintah

```shell
docker run -it --rm -p 3000:3000 next-standalone
```

\
Kemudian akses broswer http://localhost:3000

![next.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/next_fecc7b40c4.png)

\
Berikut ini perbandingan ukuran container jika tanpa mode standalalone dan menggunakan mode standalone:


```shell
| No Standalone  |  With Standalone Mode |
| 500MB  |  100MB |
```

\
Ukuran diatas hanya perbandingan next js tanpa menggunakan library tambahan seperti Chakra UI, Taildwind CSS

Dockerize aplikasi Next JS dengan Mode Standalone dengan ukuran yang lebih kecil

large_next.png

medium_next.png

small_next.png

thumbnail_next.png

next.png

Next jS Dockerize for Production With Standalone Mode

Pertama install Next JS terlebih dahulu.

Jalankan perintah

```
npx create-next-app@latest
```

\
Lalu isi nama project dengan nama misalnya "next-https"

\
Kemudian masuk kedalam project lalu jalankan perintah

```
yarn dev
```

\
Lalu buka browser untuk memastikan

\
![h7XmUpL.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/h7_Xm_Up_L_bd293ddbe6.png)


\
Untuk menjalankan dengan HTTPS caranya cukup mudah, jalankan perintah

```
yarn dev --experimental-https
```

\
Kemudian buka browser dan gunakan https

\
![80JWiiW.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/80_J_Wii_W_725dcc2b82.png)

Pada tutorial kali ini saya akan membagikan cara mudah menjalankan Next JS dilocalhost dengan Https

medium_MeHEBzF.png

small_MeHEBzF.png

thumbnail_MeHEBzF.png

MeHEBzF.png

Menjalankan Next JS dengan HTTPS di Localhost

## **Apa itu binary tree?**

Binary tree adalah struktur data berhierarki dalam ilmu komputer dan struktur data, yang terdiri dari simpul-simpul atau node-node yang diatur dalam suatu hierarki. Setiap node dalam binary tree memiliki setidaknya dua cabang atau anak-anak, yang dikenal sebagai sub-pohon kiri dan sub-pohon kanan.

\
**Contoh penggunaan binary tree**

&nbsp;
Pada contoh ini kita akan membuat struktur data Menu dimana ada **parent** dan **child** yang saling berelasi satu sama lain.

\
Kita akan menggunakan bahasa pemrograman golang untuk membuat struktur binary tree dari Flat akan diubah menjadi struktur tree.


\
Buat struct untuk Menu

```go
type Menu struct {
	ID       int
	ParentID int
	MenuName string `json:"menu_name"`
	MenuPath string `json:"menu_path"`
	Children []*Menu
}
}
```

\
Source yang akan kita gunakan adalah

```go
menus := []*Menu{
		{
			ID:       1,
			ParentID: 0,
			MenuName: "Home 1",
		},
		{
			ID:       2,
			ParentID: 1,
			MenuName: "Home 2",
		},
		{
			ID:       3,
			ParentID: 2,
			MenuName: "Home 3",
		},
		{
			ID:       4,
			ParentID: 0,
			MenuName: "Dashboard 1",
		},
		{
			ID:       5,
			ParentID: 4,
			MenuName: "Dashboard 2",
		},
		{
			ID:       6,
			ParentID: 5,
			MenuName: "Dashboard 3",
		},
		{
			ID:       7,
			ParentID: 6,
			MenuName: "Dashboard 4",
		},
		{
			ID:       8,
			ParentID: 7,
			MenuName: "Dashboard 5",
		},
		{
			ID:       9,
			ParentID: 8,
			MenuName: "Dashboard 6",
		},
		{
			ID:       10,
			ParentID: 9,
			MenuName: "Dashboard 7",
		},
	}
```

\
Buat file **main.go**

\
Buat fungsi **creatreTree**

```go
func createTree(nodes []*Menu) []*Menu {
	nodeMap := make(map[int]*Menu)

	// Create a mapping of ID to Menu
	for _, node := range nodes {
		nodeMap[node.ID] = node
	}

	// Iterate through nodes to build the tree
	var root []*Menu
	for _, node := range nodes {
		parentID := node.ParentID
		if parentID == 0 {
			// Node is the root
			root = append(root, node)
		} else {
			// Node has a parent, add it to the parent's children
			parentNode := nodeMap[parentID]
			if parentNode != nil {
				parentNode.Children = append(parentNode.Children, node)
			}
		}
	}

	return root
}
```

\
Kemudian buat fungsi **main**

```go
func main() {
	menus := []*Menu{
		{
			ID:       1,
			ParentID: 0,
			MenuName: "Home 1",
		},
		{
			ID:       2,
			ParentID: 1,
			MenuName: "Home 2",
		},
		{
			ID:       3,
			ParentID: 2,
			MenuName: "Home 3",
		},
		{
			ID:       4,
			ParentID: 0,
			MenuName: "Dashboard 1",
		},
		{
			ID:       5,
			ParentID: 4,
			MenuName: "Dashboard 2",
		},
		{
			ID:       6,
			ParentID: 5,
			MenuName: "Dashboard 3",
		},
		{
			ID:       7,
			ParentID: 6,
			MenuName: "Dashboard 4",
		},
		{
			ID:       8,
			ParentID: 7,
			MenuName: "Dashboard 5",
		},
		{
			ID:       9,
			ParentID: 8,
			MenuName: "Dashboard 6",
		},
		{
			ID:       10,
			ParentID: 9,
			MenuName: "Dashboard 7",
		},
	}

	trees := createTree(menus)

	b, _ := json.Marshal(trees)

	fmt.Println(string(b))
}

```


\
Full Code

```go
package main

import (
	"encoding/json"
	"fmt"
)

type Menu struct {
	ID       int
	ParentID int
	MenuName string `json:"menu_name"`
	MenuPath string `json:"menu_path"`
	Children []*Menu
}

func createTree(nodes []*Menu) []*Menu {
	nodeMap := make(map[int]*Menu)

	// Create a mapping of ID to Menu
	for _, node := range nodes {
		nodeMap[node.ID] = node
	}

	// Iterate through nodes to build the tree
	var root []*Menu
	for _, node := range nodes {
		parentID := node.ParentID
		if parentID == 0 {
			// Node is the root
			root = append(root, node)
		} else {
			// Node has a parent, add it to the parent's children
			parentNode := nodeMap[parentID]
			if parentNode != nil {
				parentNode.Children = append(parentNode.Children, node)
			}
		}
	}

	return root
}

func main() {
	menus := []*Menu{
		{
			ID:       1,
			ParentID: 0,
			MenuName: "Home 1",
		},
		{
			ID:       2,
			ParentID: 1,
			MenuName: "Home 2",
		},
		{
			ID:       3,
			ParentID: 2,
			MenuName: "Home 3",
		},
		{
			ID:       4,
			ParentID: 0,
			MenuName: "Dashboard 1",
		},
		{
			ID:       5,
			ParentID: 4,
			MenuName: "Dashboard 2",
		},
		{
			ID:       6,
			ParentID: 5,
			MenuName: "Dashboard 3",
		},
		{
			ID:       7,
			ParentID: 6,
			MenuName: "Dashboard 4",
		},
		{
			ID:       8,
			ParentID: 7,
			MenuName: "Dashboard 5",
		},
		{
			ID:       9,
			ParentID: 8,
			MenuName: "Dashboard 6",
		},
		{
			ID:       10,
			ParentID: 9,
			MenuName: "Dashboard 7",
		},
	}

	trees := createTree(menus)

	b, _ := json.Marshal(trees)

	fmt.Println(string(b))
}

```

\
Jalankan perintah **go run .** untuk menjalankan log


\
fungsi diatas akan menghasilkan data seperti berikut:

```json
[
    {
        "ID": 1,
        "ParentID": 0,
        "menu_name": "Home 1",
        "menu_path": "",
        "Children": [
            {
                "ID": 2,
                "ParentID": 1,
                "menu_name": "Home 2",
                "menu_path": "",
                "Children": [
                    {
                        "ID": 3,
                        "ParentID": 2,
                        "menu_name": "Home 3",
                        "menu_path": "",
                        "Children": null
                    }
                ]
            }
        ]
    },
    {
        "ID": 4,
        "ParentID": 0,
        "menu_name": "Dashboard 1",
        "menu_path": "",
        "Children": [
            {
                "ID": 5,
                "ParentID": 4,
                "menu_name": "Dashboard 2",
                "menu_path": "",
                "Children": [
                    {
                        "ID": 6,
                        "ParentID": 5,
                        "menu_name": "Dashboard 3",
                        "menu_path": "",
                        "Children": [
                            {
                                "ID": 7,
                                "ParentID": 6,
                                "menu_name": "Dashboard 4",
                                "menu_path": "",
                                "Children": [
                                    {
                                        "ID": 8,
                                        "ParentID": 7,
                                        "menu_name": "Dashboard 5",
                                        "menu_path": "",
                                        "Children": [
                                            {
                                                "ID": 9,
                                                "ParentID": 8,
                                                "menu_name": "Dashboard 6",
                                                "menu_path": "",
                                                "Children": [
                                                    {
                                                        "ID": 10,
                                                        "ParentID": 9,
                                                        "menu_name": "Dashboard 7",
                                                        "menu_path": "",
                                                        "Children": null
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
```

Pada tutorial kali ini kita akan membuat binary tree didalam bahasa pemrograman Golang.

medium_NhIty7b.png

small_NhIty7b.png

thumbnail_NhIty7b.png

NhIty7b.png

Membuat Binary Tree Dari Flat Data Di Golang

Pada tutorial kali ini, kita akan membuat aplikasi desktop menggunakan Golang(Wails) dan React. 

&nbsp;
## **Kenapa menggunakan Wails?**

\
https://wails.io


\
Wails adalah framework untuk membuat aplikasi desktop dengan tehnologi Web seperti HTML, CSS, dan Javasript. selain itu kita bisa menggunakan fungsi - fungsi dari golang secara langsung yang bisa berinteraksi secara langsung kedalam hardware. 

\
Jika dibandingkan menggunakan Electron ukuran bundle aplikasi yang dibuat menggunakan Wails jauh lebih kecil.

### **Requrement**

- Go
- Node JS
- NPM / Yarn


&nbsp;
### **Wails Flow**

![architecture-23c8df42202276ecee3e5cb7a0c6c51a.webp](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/architecture_23c8df42202276ecee3e5cb7a0c6c51a_8a5cb8e7f5.webp)

&nbsp;
###  **Memulai**

\
Install Wails

&nbsp;
```shell
go install github.com/wailsapp/wails/v2/cmd/wails@latest
```

\
![74NKBE5.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/74_NKBE_5_1ef5ed2f8c.png)

\
Kemudian buat project menggunakan wails

```shell
wails init -n latihan-desktop-go -t react-ts
```

\
![0ducukl.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/0ducukl_7655063da6.png)

\
**Menjalankan Wails**

&nbsp;
```shell
wails dev
```

\
Akan tampil

\
![qgEd55j.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/qg_Ed55j_bddd5d18ba.png)

\
**Install Chakra UI**

&nbsp;
```shell
cd frontend
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

\
Update Tampilan dengan Chakra UI

\
Update **main.tsx**

```javascript
import React from 'react'
import { createRoot } from 'react-dom/client'
import './style.css'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'

const container = document.getElementById('root')

const root = createRoot(container!)

root.render(
    <React.StrictMode>
        <ChakraProvider>
            <App />
        </ChakraProvider>
    </React.StrictMode>
)

```

\
Update **App.tsx**

&nbsp;
```javascript
'use client'

import {
  Box,
  Flex,
  Stack,
  Heading,
  Text,
  Container,
  Input,
  Button,
  SimpleGrid,
  Avatar,
  AvatarGroup,
  useBreakpointValue,
  IconProps,
  Icon,
} from '@chakra-ui/react'

const avatars = [
  {
    name: 'Ryan Florence',
    url: 'https://bit.ly/ryan-florence',
  },
  {
    name: 'Segun Adebayo',
    url: 'https://bit.ly/sage-adebayo',
  },
  {
    name: 'Kent Dodds',
    url: 'https://bit.ly/kent-c-dodds',
  },
  {
    name: 'Prosper Otemuyiwa',
    url: 'https://bit.ly/prosper-baba',
  },
  {
    name: 'Christian Nwamba',
    url: 'https://bit.ly/code-beast',
  },
]

const Blur = (props: IconProps) => {
  return (
    <></>
  )
}

export default function JoinOurTeam() {
  return (
    <Box position={'relative'}>
      <Container
        as={SimpleGrid}
        maxW={'7xl'}
        columns={{ base: 1, md: 2 }}
        spacing={{ base: 10, lg: 32 }}
        py={{ base: 10, sm: 20, lg: 32 }}>
        <Stack spacing={{ base: 10, md: 20 }}>
          <Heading
            lineHeight={1.1}
            fontSize={{ base: '3xl', sm: '4xl', md: '5xl', lg: '6xl' }}>
            Senior web designers{' '}
            <Text as={'span'} bgGradient="linear(to-r, red.400,pink.400)" bgClip="text">
              &
            </Text>{' '}
            Full-Stack Developers
          </Heading>
          <Stack direction={'row'} spacing={4} align={'center'}>
            <AvatarGroup>
              {avatars.map((avatar) => (
                <Avatar
                  key={avatar.name}
                  name={avatar.name}
                  src={avatar.url}
                  // eslint-disable-next-line react-hooks/rules-of-hooks
                  size={useBreakpointValue({ base: 'md', md: 'lg' })}
                  position={'relative'}
                  zIndex={2}
                  _before={{
                    content: '""',
                    width: 'full',
                    height: 'full',
                    rounded: 'full',
                    transform: 'scale(1.125)',
                    bgGradient: 'linear(to-bl, red.400,pink.400)',
                    position: 'absolute',
                    zIndex: -1,
                    top: 0,
                    left: 0,
                  }}
                />
              ))}
            </AvatarGroup>
            <Text fontFamily={'heading'} fontSize={{ base: '4xl', md: '6xl' }}>
              +
            </Text>
            <Flex
              align={'center'}
              justify={'center'}
              fontFamily={'heading'}
              fontSize={{ base: 'sm', md: 'lg' }}
              bg={'gray.800'}
              color={'white'}
              rounded={'full'}
              minWidth={useBreakpointValue({ base: '44px', md: '60px' })}
              minHeight={useBreakpointValue({ base: '44px', md: '60px' })}
              position={'relative'}
              _before={{
                content: '""',
                width: 'full',
                height: 'full',
                rounded: 'full',
                transform: 'scale(1.125)',
                bgGradient: 'linear(to-bl, orange.400,yellow.400)',
                position: 'absolute',
                zIndex: -1,
                top: 0,
                left: 0,
              }}>
              YOU
            </Flex>
          </Stack>
        </Stack>
        <Stack
          bg={'gray.50'}
          rounded={'xl'}
          p={{ base: 4, sm: 6, md: 8 }}
          spacing={{ base: 8 }}
          maxW={{ lg: 'lg' }}>
          <Stack spacing={4}>
            <Heading
              color={'gray.800'}
              lineHeight={1.1}
              fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}>
              Join our team
              <Text as={'span'} bgGradient="linear(to-r, red.400,pink.400)" bgClip="text">
                !
              </Text>
            </Heading>
            <Text color={'gray.500'} fontSize={{ base: 'sm', sm: 'md' }}>
              We’re looking for amazing engineers just like you! Become a part of our
              rockstar engineering team and skyrocket your career!
            </Text>
          </Stack>
          <Box as={'form'} mt={10}>
            <Stack spacing={4}>
              <Input
                placeholder="Firstname"
                bg={'gray.100'}
                border={0}
                color={'gray.500'}
                _placeholder={{
                  color: 'gray.500',
                }}
              />
              <Input
                placeholder="firstname@lastname.io"
                bg={'gray.100'}
                border={0}
                color={'gray.500'}
                _placeholder={{
                  color: 'gray.500',
                }}
              />
              <Input
                placeholder="+1 (___) __-___-___"
                bg={'gray.100'}
                border={0}
                color={'gray.500'}
                _placeholder={{
                  color: 'gray.500',
                }}
              />
              <Button fontFamily={'heading'} bg={'gray.200'} color={'gray.800'}>
                Upload CV
              </Button>
            </Stack>
            <Button
              fontFamily={'heading'}
              mt={8}
              w={'full'}
              bgGradient="linear(to-r, red.400,pink.400)"
              color={'white'}
              _hover={{
                bgGradient: 'linear(to-r, red.400,pink.400)',
                boxShadow: 'xl',
              }}>
              Submit
            </Button>
          </Box>
          form
        </Stack>
      </Container>
      <Blur position={'absolute'} top={-10} left={-10} style={{ filter: 'blur(70px)' }} />
    </Box>
  )
}

```

\
Akan tampil seperti dibawah ini:

&nbsp;
![Cf8MEY3.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Cf8_MEY_3_81e9a529b9.png)

&nbsp;
## **Build Binary File**

```shell
wails build
```

\
Kemudian jalankan

```shell
./build/bin/latihan-desktop-go
```



Pada tutorial kali ini, kita akan membuat aplikasi desktop menggunakan Golang(Wails) dan React. 

large_qgEd55j.png

medium_qgEd55j.png

small_qgEd55j.png

thumbnail_qgEd55j.png

qgEd55j.png

Membangun Aplikasi Desktop dengan Golang (Wails) & React

## **Apa itu Angular?**

\
Angular adalah sebuah platform pengembangan web open-source yang dikembangkan oleh Google. Ini adalah framework JavaScript yang digunakan untuk membangun aplikasi web berbasis klien (client-side). Angular memberikan pendekatan terstruktur dalam pengembangan aplikasi web dengan menggunakan konsep-konsep seperti two-way data binding, dependency injection, modularitas, dan lainnya.

\
Angular adalah sebuah platform pengembangan web open-source yang dikembangkan oleh Google. Ini adalah framework JavaScript yang digunakan untuk membangun aplikasi web berbasis klien (client-side). Angular memberikan pendekatan terstruktur dalam pengembangan aplikasi web dengan menggunakan konsep-konsep seperti two-way data binding, dependency injection, modularitas, dan lainnya.

\
Berikut adalah beberapa konsep utama dalam Angular:

&nbsp;
- **Komponen (Components):** Angular membangun aplikasi menggunakan komponen-komponen. Komponen adalah bagian dasar dari aplikasi yang menggabungkan logika, tampilan (HTML), dan gaya (CSS). Setiap komponen dapat digunakan kembali dan memiliki siklus hidup yang terkait dengan pembuatan, pembaruan, dan penghancuran.


&nbsp;
- **Modul (Modules):** Modul adalah cara Angular mengatur dan mengelompokkan komponen, direktif, layanan, dan fitur lainnya. Modul membantu dalam memecah aplikasi menjadi bagian-bagian yang terpisah dan terkelola.


&nbsp;
- **Template dan Data Binding:** Angular menggunakan sintaksis template yang deklaratif untuk mendefinisikan tampilan aplikasi. Data binding memungkinkan sinkronisasi otomatis antara model (data) dan tampilan (UI), termasuk two-way data binding yang


&nbsp;
- **Direktif (Directives)**: Direktif adalah instruksi yang diberikan kepada Angular untuk memanipulasi DOM atau merubah tampilan. Beberapa direktif bawaan Angular melibatkan manipulasi DOM, seperti *ngIf, *ngFor, dan lainnya.


&nbsp;
- **Dependency Injection (DI)**: Angular menggunakan sistem Dependency Injection untuk mengelola dependensi antar komponen. Ini memudahkan pengelolaan objek yang diperlukan oleh suatu komponen dan memfasilitasi pengujian dan penggantian komponen dengan lebih mudah.


&nbsp;
- **Router**: Angular menyediakan router untuk mengelola navigasi antar halaman atau komponen dalam aplikasi web. Ini memungkinkan pengguna untuk berpindah-pindah antar bagian aplikasi tanpa perlu memuat ulang seluruh halaman.


&nbsp;
- **HTTP Client**: Angular menyediakan modul HttpClient yang memudahkan pengambilan data dari server melalui protokol HTTP. Ini digunakan untuk berkomunikasi dengan backend server dan mendapatkan atau mengirim data.


&nbsp;
- **Formulir (Forms)**: Angular menyediakan dukungan untuk pengelolaan formulir HTML dengan fitur validasi, binding, dan pemantauan perubahan.


&nbsp;
- **TypeScript:** Angular ditulis menggunakan TypeScript, yang merupakan superset dari JavaScript. TypeScript memberikan fitur-fitur seperti tipe data statis, inferensi tipe, dan dukungan untuk pengembangan yang lebih aman dan terstruktur.



&nbsp;
## **Setup Angular**

Untuk menggunakan angular, pastikan kita sudah menginstall **NodeJS** terlebih dahulu

\
**Install Angular CLI**

Buka terminal dan jalankan perintah:

```shell
npm install -g @angular/cli
```

\
Tentukan dimana Project Angular akan diinstall.

\
Kemudian jalankan perintah:

```shell
ng new my-angular-app
```

\
Setelah menginstall lalu silahkan masuk

```shell
cd  my-angular-app
```

\
![MFNhE5h.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/MF_Nh_E5h_fb9dc6be35.png)

\
Berikut ini penjelasan dari folder diatas

&nbsp;
- **node_modules** adalah folder dari node js
- **src/app** adalah dimana code angular disimpan, untuk proses coding akan didalam folder **src/app**
- **assets** digunakan untuk menyimpan data - data assets seperti icon, gambar, dll

\
Silahkan jalankan perintah dibawah ini, untuk menjalankan Angular

&nbsp;
```shell
yarn start
```

\
Buka browser **https://localhost:4200**

\
![MXESu4g.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/MXE_Su4g_3cb3776a8d.png)


\
**Buat route**

\
Buka terminal dan masukan perintah

```shell
ng g c home
```

\
Edit **app.routers.ts**

```javascript
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
    {
        path:'',
        component:HomeComponent
    }
];

```

\
Edit **app.component.html**

```html
<router-outlet></router-outlet>
```

\
Buka broswer

![z0KnmK2.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/z0_Knm_K2_ea7a104132.png)

\
Selanjutnya Buat halaman about, Buka terminal dan masukan perintah

```shell
ng g c about
```

&nbsp;
Edit **app.routers.ts**

```javascript
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    }
];


```


\
Lalu buka browser

![SEzOiXu.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/S_Ez_Oi_Xu_74a7c55cd3.png)


Pada tahapan ini kita sudah berhasil membuat halaman pada angular yaitu halaman Home dan About.

&nbsp;
## **Uji coba tampilkan data variable kedalam component**

Edit **about.component.ts**

\
Tambahkan variable name

```javascript
export class AboutComponent {

  name: string = "John Doe";

}

```

\
Lalu edit component **about.component.html**

```html
<p>about works!</p>
<h1>Name {{name}}</h1>

```

\
Lalu buka browser

![QIDaKhK.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/QI_Da_Kh_K_fa62f16e61.png)

\
Pada gambar diatas, kita sudah berhasil menampilkan variable name kedalam component Angular

Angular adalah sebuah platform pengembangan web open-source yang dikembangkan oleh Google. Ini adalah framework JavaScript yang digunakan untuk membangun aplikasi web berbasis klien (client-side). Angular memberikan pendekatan terstruktur dalam pengembangan aplikasi web dengan menggunakan konsep-konsep seperti two-way data binding, dependency injection, modularitas, dan lainnya.

large_Ilb8DAC.png

medium_Ilb8DAC.png

small_Ilb8DAC.png

thumbnail_Ilb8DAC.png

Ilb8DAC.png

Angular for Beginer : Memulai Project Frontend Dengan Angular 17

**Apa itu Cache?**
Cache adalah mekanisme penyimpanan sementara yang digunakan untuk menyimpan data yang sering diakses agar dapat diambil dengan lebih cepat.

\
**Berikut adalah beberapa kelebihan penggunaan cache:**

&nbsp;

**Peningkatan Kinerja:**

Caching memungkinkan akses cepat ke data yang sering digunakan. Dengan menyimpan salinan data yang sering diakses di dalam cache, aplikasi dapat menghindari biaya waktu dan sumber daya yang terkait dengan mengambil data dari sumber aslinya.

&nbsp;

**Responsivitas yang Lebih Baik:**
Dengan mengambil data dari cache daripada sumber aslinya, waktu respons aplikasi dapat dipercepat secara signifikan. Hal ini meningkatkan pengalaman pengguna dan membuat aplikasi terasa lebih responsif.

&nbsp;

**Pengurangan Beban Sumber Daya:**
Penggunaan cache membantu mengurangi beban pada sumber daya, seperti database atau layanan eksternal. Dengan menghindari eksekusi query atau permintaan ke sumber data utama, cache dapat membantu mengurangi tekanan pada sistem.


\
**Cache dengan redis**

\
Redis adalah salah satu sistem penyimpanan data berkinerja tinggi yang sering digunakan sebagai cache.

\
Data dalam Redis disimpan di dalam memori (in-memory storage). Hal ini memungkinkan Redis memberikan performa tinggi karena akses ke data lebih cepat dibandingkan dengan penyimpanan di disk.

\
**Penggunaan Cache Redis di dalam Nest JS**


\
**Buat Project Nest JS**

\
Jalankan perintah

```shell
nest new nest-cache-redis
```

\
Kemudian masuk ke project

```shell
cd nest-cache-redis
```


## Database & Prisma

**Persiapan Database**


Buat docker-compose.yml

&nbsp;
```shell
version: '3.9'
services:
  db:
    image: postgres:15.3
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    ports:
      - '5432:5432'
```

\
Kemudian jalankan perintah

&nbsp;
```shell
docker compose up --build
```

**Prisma**

\
Install Prisma

```shell
yarn add -D prisma
```

Kemudian jalankan

```shell
yarn prisma init
```

Kemudian setting koneksi database didalam .env file


```shell
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres?schema=public"
```

Lalu edi file prisma/schema.prisma buat model user yang nantinya menjadi table user


```javascript
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id Int @id @default(autoincrement())

  email String @unique

  name String?
}

```

Kemudian jalankan perintah

```shell
yarn prisma migrate dev
```

\
Buat nama migrationnya misal table_user

\
![MjjMYjr.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Mjj_M_Yjr_c7bae68fb3.png)

\
Kemudian check menggunakan **dbeaver**

![zeH4X2F.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/ze_H4_X2_F_ea826d588a.png)

\
Kemudian tambahkan contoh data user

\
![EXqLpf8.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/E_Xq_Lpf8_d28a7fc5b5.png)

\
Lalu buat api sederhana

\
di dalam **app.service.ts** buat fungsi untuk menampilkan users


&nbsp;
```javascript
import { Injectable } from '@nestjs/common';

import { PrismaClient } from '@prisma/client';


@Injectable()
export class AppService {

  private db = new PrismaClient();

  getHello(): string {
    return 'Hello World!';
  }


 async  getUsers() {
    return this.db.user.findMany();
  }

}

```

\
Lalu pada controller **app.controller.ts**

```javascript
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) { }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('users')
  async getUsers() {
    return await this.appService.getUsers();
  }
}

```

\
Test API users

![Gbh6KDC.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Gbh6_KDC_d371dffe60.png)


\
Kemudian buat cache

## Cache Dengan Redis

**Persiapan Redis**

\
Edit docker-compose.yml dan tambahkan service redis

```javascript
version: '3.9'

services:
  db:
    image: postgres:15.3
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    ports:
      - '5432:5432'

  redis:
    image: redis
    ports:
      - 6379:6379
```

\
Jalankan ulang docker compose

```shell
docker compose up --build
```

\
**Buat module & service cache**

jalankan perintah

```shell
yarn nest g mo libs/cache
yarn nest g s libs/cache
```

### Install Cache Manager dan Redis

\
jalankan perintah

```shell
yarn add @nestjs/cache-manager cache-manager
yarn add redis cache-manager-redis-store
```

\
**edit cache.module.ts**


```javascript
import { Module } from '@nestjs/common';
import { CacheService } from './cache.service';
import { CacheModule as CacheMdl } from '@nestjs/cache-manager';
import type { RedisClientOptions } from 'redis';
const redisStore = require('cache-manager-redis-store').redisStore;
@Module({
  imports: [
    CacheMdl.register<RedisClientOptions>({
      store: redisStore,
      url: "redis://localhost:6379"
    }),
  ],
  providers: [CacheService],
  exports:[CacheService]
})
export class CacheModule { }
```

\
Kemudian edit cache.service.ts

\
Buat fungsi **setCache** dan **getCache**


```javascript
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Inject, Injectable } from '@nestjs/common';
import { Cache } from 'cache-manager';

@Injectable()
export class CacheService {

    constructor(@Inject(CACHE_MANAGER) private cacheManager: Cache) { }

    /**
     * Set cache
     * @param key 
     * @param value 
     * @param ttl 
     */
    async setCache(key: string, value: any, ttl: number = 1000) {
        return await this.cacheManager.set(key, value, ttl)
    }

    /**
     * Get cache by key
     * @param key 
     */
    async getCache(key: string) {
        return await this.cacheManager.get(key);
    }

}

```

## Penggunaan Cache

edit **app.service.ts**

```javascript
import { CacheService } from './libs/cache/cache.service';
```

&nbsp;
```javascript
constructor(private cache: CacheService){}
```

&nbsp;
Pada fungsi getUsers

&nbsp;
```javascript
  async getUsers() {
    const key = 'users';
    if (await this.cache.getCache(key)) {
      return await this.cache.getCache(key)
    }
    const users = await this.db.user.findMany();
    if(users){
      await this.cache.setCache(key, users, 10000);
    }
    return users;
  }
```

\
Kemudian hit API

![0TYpEHb.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/0_T_Yp_E_Hb_e4ca79cac6.png)

\
Check cache redis dengan menggunakan Redis Insight

\
![SUhnt0P.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/S_Uhnt0_P_1663ba93df.png)

&nbsp;

## Repository

[https://github.com/mister-coding/nestjs-cache-redis-postgre-prisma](https://github.com/mister-coding/nestjs-cache-redis-postgre-prisma)




NestJS adalah sebuah framework untuk membuat aplikasi server-side (back-end) dengan menggunakan bahasa pemrograman TypeScript, yang dibangun di atas platform Node.js.

Meningkatkan perfoma API dengan Cache menggunakan Redis dengan contoh menggunakan Database PostgreSQL dan Prisma

large_2JQPPbG.png

medium_2JQPPbG.png

small_2JQPPbG.png

thumbnail_2JQPPbG.png

2JQPPbG.png

Nest JS : Speed Up API with Cache Redis

&nbsp;
### **Apa itu Load Testing**

Load testing adalah hal yang sangat penting dalam pengembangan perangkat lunak dan infrastruktur IT karena membantu mengidentifikasi sejumlah masalah dan meningkatkan kinerja sistem.

Berikut beberapa alasan mengapa load testing sangat penting:

\
 **1. Mengukur Kinerja:**
 - Load testing memungkinkan tim pengembangan untuk mengukur kinerja sistem atau aplikasi dalam kondisi penggunaan yang nyata atau mendekati kondisi nyata.
 - Dengan mengidentifikasi batas beban yang dapat ditangani oleh sistem, tim dapat menentukan apakah performa tersebut memenuhi kebutuhan dan harapan.


 **2. Mendeteksi Masalah Kinerja:**
 - Load testing membantu mendeteksi masalah kinerja, seperti waktu respons yang lambat, kegagalan server, atau bottleneck pada level tertentu dalam infrastruktur.
 - Dengan menemukan masalah ini sebelum produk atau aplikasi diluncurkan, perusahaan dapat mengambil tindakan untuk mengatasi masalah dan meningkatkan kinerja.
 

**3. Menemukan Batasan Sistem:**
-  Load testing membantu mengidentifikasi batasan-batasan sistem, seperti kapasitas maksimum pengguna atau beban tertentu yang dapat ditangani oleh aplikasi.
-  Informasi ini membantu tim pengembangan dalam perencanaan kapasitas dan skala sistem untuk memenuhi pertumbuhan pengguna dan beban kerja yang diharapkan.


**4. Mengoptimalkan Infrastruktur:**
- Load testing membantu organisasi untuk mengoptimalkan infrastruktur mereka dengan mengidentifikasi dan mengatasi bottleneck atau kelemahan dalam sistem.
-  Pemahaman ini memungkinkan organisasi untuk melakukan investasi yang lebih cerdas dalam sumber daya IT.

&nbsp;

### **Apa itu K6?**

https://k6.io

k6 adalah alat yang digunakan untuk melakukan pengujian beban (load testing) dan pengujian kinerja pada aplikasi dan situs web. Dengan menggunakan k6, pengguna dapat mensimulasikan beban pengguna yang tinggi untuk mengevaluasi kinerja sistem atau aplikasi di bawah kondisi yang mendekati situasi nyata

&nbsp;

### **Penggunaan K6**

&nbsp;
#### **Install K6**

\
Debian/Ubuntu

```shell
sudo gpg -k
sudo gpg --no-default-keyring --keyring /usr/share/keyrings/k6-archive-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
echo "deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
sudo apt-get update
sudo apt-get install k6

```


\
Fedora/CentOS

```shell
sudo dnf install https://dl.k6.io/rpm/repo.rpm
sudo dnf install k6
```

\
MacOS
```shell
brew install k6
```

\
Setelah menginstall, pastikan sudah terinstall dengan benar. silahkan masukan perintah

```shell
k6 version
```

```shell
Untuk memastikan apakah k6 sudah terinstall dengan benar.
```
&nbsp;
### **Load Testing**

\
Pertama hal yang perlu dilakukan adalah tentukan dimana kita akan menyimpan project script **Load Testing** yang akan kita buat.

Buat folder project
\

```shell
mkdir latihan-k6
```
\
Kemudian masuk kedalam folder **latihan-k6**

\
Kemudian buat file **script.js**

\
Tambahkan code seperti berikut:

```javascript
import http from "k6/http";

export const options = {
    vus: 100,
    duration: '30s',
  
  };

export default function(){
    const res = http.get("https://github.com")
}
```

\
Kemudian jalankan perintah
```shell
k6 run script.js
```

\
Script diatas akan menjalankan load testing sebanyak 100 user dalam waktu 30 detik. Untuk menambah jumlah user kita bisa edit bagian **vus**

\
Maka akan muncul gambar seperti berikut ini

![0u1OZYg.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/0u1_OZ_Yg_abecb139e0.png)

\
Dari gambar diatas kita bisa melihat bagaimana perfoma dari website dan server yang kita testing. Banyak parameter yang disediakan oleh k6 yang bisa kita gunakan untuk menganalisa bagian mana yang perlu di tingkatkan dari sisi Code maupun Insrfratructur.


\
Dari skenario diatas hanyalah contoh kecil bagaimana menggunakan k6 untuk keperluan Load Testing. kalian juga bisa explor lebih dalam lagi misal dengan menggunakan Method Post, Put, Delete sesuai dengan kebutuhan.

Load testing adalah hal yang sangat penting dalam pengembangan perangkat lunak dan infrastruktur IT karena membantu mengidentifikasi sejumlah masalah dan meningkatkan kinerja sistem

large_Background Presentasi.jpg

medium_Background Presentasi.jpg

small_Background Presentasi.jpg

thumbnail_Background Presentasi.jpg

Background Presentasi.jpg

Cari Tau Kemampuan Perfoma Website dan Server Dengan Load Test Menggunakan K6

s3cmd adalah alat baris perintah yang digunakan untuk berinteraksi dengan layanan penyimpanan Amazon S3 (Simple Storage Service) dari terminal atau prompt perintah pada sistem komputer di local maupun di server.

large_Black Minimalist Interiors Design YouTube Thumbnail.png

medium_Black Minimalist Interiors Design YouTube Thumbnail.png

small_Black Minimalist Interiors Design YouTube Thumbnail.png

thumbnail_Black Minimalist Interiors Design YouTube Thumbnail.png

Black Minimalist Interiors Design YouTube Thumbnail.png

S3CMD Cheat Sheet

[LocalStack](https://localstack.cloud) adalah platform pengembangan perangkat lunak yang digunakan untuk mengembangkan, menguji, dan menyimulasikan layanan cloud di lingkungan lokal atau non-production.

\
 Ini memungkinkan pengembang untuk membangun dan menguji aplikasi yang tergantung pada layanan cloud tanpa harus terhubung ke layanan cloud yang sebenarnya, seperti AWS (Amazon Web Services).
 
 \
 Fitur utama LocalStack termasuk simulasi berbagai layanan AWS, seperti S3 (Simple Storage Service), DynamoDB (Database NoSQL), Lambda (komputasi tanpa server), dan banyak lagi. Dengan kata lain, LocalStack memberikan lingkungan pengembangan lokal yang mirip dengan AWS, sehingga kita dapat menguji kode kita dengan lebih efisien dan tanpa biaya tambahan yang terkait dengan penggunaan layanan cloud sebenarnya.
 
 \
 LocalStack dapat sangat berguna dalam pengembangan dan pengujian aplikasi cloud, karena kita dapat mensimulasikan berbagai skenario dan kondisi tanpa mengakses sumber daya cloud yang sebenarnya. Ini dapat membantu dalam mengidentifikasi masalah potensial, mengurangi biaya pengembangan, dan meningkatkan produktivitas dalam pengembangan.
 
 \
 **Cara menggunakan Localstack**
 
 \
 Untuk menggunakan localstack CLI, kita perlu menginstall kedalam komputer local kita terlebih dahulu [https://docs.localstack.cloud/getting-started/installation/](https://docs.localstack.cloud/getting-started/installation/)
 
 \
 Kita bisa menginstall menggunakan macam - macam OS seperti Linux, Windows, MacOS, atau menjalankan menggunakan Container (Docker).
 
 \
 Pastikan kalian sudah menginstall docker terlebih dahulu karena localstack akan menggunakan docker sebagai simulatornya
 
 \
 **Install Localstack CLI menggunakan Brew**
 
 \
 Localstack CLI digunakan untuk berinteraksi dengan core localstack
 
 
 ```shell
 brew install localstack/tap/localstack-cli
 ```
 
 \
 Untuk memastikan apakah sudah berhasil terinstall atau belum, kita jalankan perintah
 

 ```shell
 localstack -v
 ```
 
 \
![HRu6OI9.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/H_Ru6_OI_9_13442ec3c7.png)

\
Untuk menjalankan Localstack kita bisa gunakan perintah

```shell
localstack start
```

\
Setelah menjalankan perintah diatas, maka akan muncul seprti gambari dibawah ini

\
![sygPehn.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/syg_Pehn_dd8dd1195a.png)


\
Kemudian untuk mengetahui service apa saja yang tersedia, kita bisa menjalankan perintah

```shell
localstack status services
```

\
![RUVchKv.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/RU_Vch_Kv_c9296c22b0.png)

\
Pada gambar diatas, adalah semua service yang tersedia dan kita gunakan di localstack

\
**Ujicoba menggunakan service s3**

\
Pada contoh kali ini kita akan mencoba menggunakan service s3 pada Localstack.

\
Kita akan menggunakan Aws CLI [https://aws.amazon.com/id/cli/](https://aws.amazon.com/id/cli/)

\
**Configure aws cli**

\
Masukan perintah

```shell
aws configure --profile default
```

```shell
AWS_ACCESS_KEY_ID="test"
AWS_SECRET_ACCESS_KEY="test"
AWS_DEFAULT_REGION="us-east-1"
```

&nbsp;

\
**Uji coba membuat bucket**

masukan perintah

```shell
aws s3 mb s3://test-bucket --endpoint-url http://localhost:4566
```

pada perintah diatas akan membuat bucket dengan nama "test-bucket"

\
Untuk melihat apakah bucket sudah sukses dibuat atau belum, masukan perintah

```shell
aws s3 ls --endpoint-url=http://localhost:4566
```

\
Maka akan muncul gambar seperti


![45YxiJc.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/45_Yxi_Jc_c0dc6f71c6.png)


\
Pada tahapan ini kita sudah berhasil menggunakan Localstack di local komputer dengan contoh menggunakan Bucket AWS s3. 

\
Untuk selanjutnya, kalian bisa explore lagi service - service yang ada di dalam localstack.





LocalStack adalah platform pengembangan perangkat lunak yang digunakan untuk mengembangkan, menguji, dan menyimulasikan layanan cloud di lingkungan lokal atau non-production.

large_Black Minimalist Interiors Design YouTube Thumbnail(1).png

medium_Black Minimalist Interiors Design YouTube Thumbnail(1).png

small_Black Minimalist Interiors Design YouTube Thumbnail(1).png

thumbnail_Black Minimalist Interiors Design YouTube Thumbnail(1).png

Black Minimalist Interiors Design YouTube Thumbnail(1).png

Berkenalan dengan LocalStack (Local Cloud Simulator)

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

\
Didalam frontend development pada saat ini, kebanyakan framework yang digunakan adalah berbasis component seperti React, Vue, Agular, dan lain - lain. 

\
Component yang dibuat biasanya dibuat untuk digunakan kembali didalam component lain atau sering disebut Reusable Component, sehingga tidak perlu membuat component yang sama secara berulang ulang dan akan menghemat waktu dalam pengembangan selain itu kode program menjadi lebih rapi dan bersih.

\
Dalam satu halaman web atau aplikasi biasanya terdiri dari banyak component yang saling terkait satu sama lain

![OZiOVYv.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/O_Zi_OV_Yv_e44b5bdfbc.png)

\
Pada gambar diatas terlihat didalam satu halaman website memiliki banyak component dan tentunya masing - masing component saling terhubung satu sama lain.

\
**Bagimana caranya antar component saling  terhubung dan berbagi data atau informasi?**

\
Biasanya didalam framework seperti React  atau Vue sudah menyediakan mekanisme yang digunakan untuk mengirim atau menerima informasi antar component yang sering disebut Props.

![Vm65O3Y.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Vm65_O3_Y_100498eaf2.png)

\
Pada gambar diatas adalah bagaimana cara kerja props, dimana kita bisa berbagi data kepada setiap component yang dituju. 

\
**Apakah props menyelesaikan masalah?** jawabanya adalah Ya. namun bagaimana jika terdapat banyak component? puluhan, bahkan lebih.

\
Jika terdapat banyak component saya rasa menggunakan props akan sangat rumit dan membutuhkan effort yang sangat banyak karena kita akan berinteraksi secara langsung dengan component yang dituju.

\
**Solusinya dalah dengan menggunakan State Management**

\
Dengan bantuan State Management kita akan lebih mudah dalam berbagi data atau informasi ke masing - masing component yang terkait tanpa harus berinterak si terhadap component secara langsung.

\
![6MEdqeB.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/6_M_Edqe_B_462b575c9f.png)

\
**Contoh state management yang sering dipakai**

- Redux
- Recoil
- Pinia
- Vuex
- Ngxs
- MobX

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

large_lEOPl1P.png

medium_lEOPl1P.png

small_lEOPl1P.png

thumbnail_lEOPl1P.png

lEOPl1P.png

Mengenal State Management dan Kegunaanya untuk Frontend Developent

### **Apa itu Microservices?**

\
Microservices adalah suatu pendekatan dalam pengembangan perangkat lunak yang memecah aplikasi menjadi komponen-komponen yang lebih kecil, independen, dan terisolasi. Setiap komponen, yang disebut sebagai layanan mikro, beroperasi secara mandiri dan memiliki tanggung jawab terbatas dalam fungsionalitas aplikasi secara keseluruhan.

\
Arsitektur microservices sering kali digunakan dalam konteks pengembangan aplikasi skala besar yang kompleks dan membutuhkan fleksibilitas dan skalabilitas yang tinggi. Dengan memecah aplikasi menjadi layanan mikro yang lebih kecil, pengembang dapat mengelola kompleksitas dengan lebih baik, meningkatkan kemampuan untuk melakukan perubahan, dan mempercepat siklus pengembangan.

&nbsp;
### **Contoh Arsitektur Microservices**

\
![AUvz23M.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/A_Uvz23_M_39f5010294.png)

\
Pada gambar diatas adalah contoh arsitektur microservices dimana terdapat banyak service yang saling berkaitan namun masing - masing service berdiri sendiri.

&nbsp;
### **Bagaimana Microservices berkomunikasi dengan service lain?**

\
![BIkvlps.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/B_Ikvlps_0efedff204.png)

\
Ada banyak cara supaya antar service bisa saling berkomunikasi contohnya adalah menggunakan:

* HTTP, kita bisa mengakses menggunakan HTTP jika service menyediakan expose untuk HTTP
*  Message Brocker (Event Drivern Architecture) misal menggunakan Nats, Kafka, Rabbit MQ, dll
*  RPC (Remote Procedure Call)

\
Pada contoh kali ini kita akan menggunakan RPC sebagai metode komunikasi antar service.

\
Kita akan menggunakan GRPC (Google Remote Procedure Call) yang kembangkan oleh google.


&nbsp;
### **Apa itu GRPC?**

\
gRPC adalah sebuah kerangka kerja (framework) open-source yang digunakan untuk membuat aplikasi terdistribusi berbasis layanan dengan menggunakan Remote Procedure Call (RPC). RPC adalah protokol yang memungkinkan komunikasi antara komponen aplikasi yang berjalan pada komputer yang berbeda melalui jaringan.

\
gRPC menggunakan protokol komunikasi HTTP/2 sebagai dasar untuk mentransfer data antara klien dan server. Ini berarti gRPC dapat mengambil keuntungan dari fitur-fitur canggih yang disediakan oleh HTTP/2 seperti multiplexing, kompresi header, dan streaming.

\
gRPC sering digunakan dalam pengembangan aplikasi yang memerlukan komunikasi antara komponen yang terdistribusi secara efisien dan handal. Misalnya, dalam sistem mikroservis, gRPC dapat digunakan untuk menghubungkan antara layanan mikro yang berbeda.

&nbsp;
### **Implementasi Microservices menggunakan GRPC Framework Nest JS**

&nbsp;
#### **Buat Project Nest JS Monorepo**

\
Kali ini kita akan membuat Project Nest JS menggunakan Monorepo artinya satu repo terdiri dari banyak service yang berdiri sendiri.

\
Jika belum memahami arsitektur Monorepo silahakan buka [https://www.mistercoding.com/post/perbedaan-monorepo-dan-multi-repo](https://www.mistercoding.com/post/perbedaan-monorepo-dan-multi-repo)

&nbsp;
#### **Buat Project menggunakan Nest CLI**

\
Pertama buka terminal dan jalankan perintah

```shell
nest new latihan-microservices-grpc
```

\
Setelah itu kita akan menjadikan aplikasi Nest menjadi Monorepo

\
Kurang lebih aplikasi kita akan seperti berikut ini:

\
![H3fsssz.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/H3fsssz_e87fc5fbe7.png)

\
Buat service app1, app2, app3

\
Masuk kedalam project "latihan-microservices-grpc"


```shell
cd latihan-microservices-grpc
```

\
Kemudian buat service app1, app2,app2 dengan menjalankan perintah:

&nbsp;
```shell
nest g app app1
```

&nbsp;
```shell
nest g app app2
```

&nbsp;
```shell
nest g app app3
```

\
Maka struktur folder menjadi seperti

\
![Lxot9hn.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Lxot9hn_953e1f2672.png)

&nbsp;
### **Install Dependency**

\
Jalankan perintah

```shell
yarn add @nestjs/microservices @grpc/grpc-js @grpc/proto-loader
```

&nbsp;
### **Buat Proto FIle**

\
![fh5H0wU.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/fh5_H0w_U_343be34f76.png)

\
proto/app1/app1.proto
```proto
syntax = "proto3";

package app1;

service HeroesService {
  rpc FindOne (HeroById) returns (HeroApp) {}
}

message HeroById {
  int32 id = 1;
}

message HeroApp {
  string app = 1;
  Hero data = 2;
}

message Hero {
  int32 id = 1;
  string name = 2;
}
```

&nbsp;
### **Konfigurasi gRPC app1**

\
 edit apps/app1/main.ts menjadi
```typescript
import { NestFactory } from '@nestjs/core';
import { App1Module } from './app1.module';
import { MicroserviceOptions, Transport } from '@nestjs/microservices';

async function bootstrap() {
  const app = await NestFactory.createMicroservice<MicroserviceOptions>(
    App1Module,
    {
      transport: Transport.GRPC,
      options: {
        url:"0.0.0.0:50001",
        package: 'app1',
        protoPath: process.cwd() + '/proto/app1/app1.proto',
      },
    },
  );
  app.listen();
}
bootstrap();


```

\
edit apps/app1/src/app1.controller.ts
```typescript
import { Controller, Get } from '@nestjs/common';
import { App1Service } from './app1.service';
import { GrpcMethod } from '@nestjs/microservices';
import { Metadata, ServerUnaryCall } from '@grpc/grpc-js';

@Controller()
export class App1Controller {
  constructor(private readonly app1Service: App1Service) {}

  @Get()
  getHello(): string {
    return this.app1Service.getHello();
  }

  @GrpcMethod('HeroesService', 'FindOne')
  async findOne(
    data: any,
    metadata: Metadata,
    call: ServerUnaryCall<any, any>,
  ) {
    const items = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Doe' },
    ];
    return {
      app: 'app1',
      data: items.find(({ id }) => id === data.id),
    };
  }
}


```

&nbsp;
### **Jalankan service app1**

\
Jalankan servie app1 menggunakan CLI

```shell
yarn start:dev app1
```

&nbsp;
### **Testing Grpc dari API Gateway (Main Service)**

\
Buka dan edit file "apps/latihan-microservice-grpc/src/app.module.ts

&nbsp;
```typescript
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ClientsModule, Transport } from '@nestjs/microservices';

@Module({
  imports: [
    ClientsModule.register([
      {
        name: 'APP1',
        transport: Transport.GRPC,
        options: {
          url:"0.0.0.0:50001",
          package: 'app1',
          protoPath: process.cwd() + '/proto/app1/app1.proto',
        },
      },
    ]),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

```

&nbsp;
### **Buat API pada API Gateway untuk memanggil service app1**

\
Edit app.controller

```typescript
import { Controller, Get, Inject, OnModuleInit } from '@nestjs/common';
import { AppService } from './app.service';
import { Observable } from 'rxjs';
import { ClientGrpc } from '@nestjs/microservices';

interface HeroesService {
  findOne(data: { id: number }): Observable<any>;
}

@Controller()
export class AppController implements OnModuleInit {
  private heroesService: HeroesService;

  constructor(
    @Inject('APP1') private client: ClientGrpc,
    private readonly appService: AppService,
  ) {}

  onModuleInit() {
    this.heroesService = this.client.getService<HeroesService>('HeroesService');
  }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('hero1')
  async getHero() {
    return await this.heroesService.findOne({ id: 1 });
  }
}

```

&nbsp;
### **Test hit API menggunakan postman**

\
![4IpfWHh.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/4_Ipf_W_Hh_fb92cf226c.png)

\
Selamat, kita sudah berhasil membuat Nest JS Microservices menggunakan GRPC.

\
Untuk App2, App3, cara nya sama seperti cara di atas.

![bMVQkkC.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/b_MV_Qkk_C_5892c397b9.png)

\
![KCH3eM7.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/KCH_3e_M7_97f34f7f8f.png)

&nbsp;
### **Repository**

[https://github.com/mister-coding/nestjs-microservices-grpc](https://github.com/mister-coding/nestjs-microservices-grpc)


Kita akan belajar bagaimana membuat aplikasi microservices menggunakan Nest JS dan GRPC menggunakan Monorepo (Single Repository)

large_POpmjXf.png

medium_POpmjXf.png

small_POpmjXf.png

thumbnail_POpmjXf.png

POpmjXf.png

Nest JS Micoservices with GRPC and Monorepo

## **Apa itu Rate Limiter?**

\
Rate limiter adalah sebuah mekanisme yang digunakan untuk mengatur laju atau frekuensi akses terhadap suatu sumber daya atau layanan. Tujuannya adalah untuk mencegah penyalahgunaan atau kelebihan beban terhadap sistem tersebut.

\
Rate limiter berfungsi untuk membatasi jumlah permintaan yang diterima dalam periode waktu tertentu, sehingga pengguna atau aplikasi tidak dapat mengakses sumber daya atau layanan secara tidak terbatas.

\
Rate limiter dapat diterapkan dalam berbagai konteks, seperti API (Application Programming Interface), aplikasi web, atau layanan jaringan. Misalnya, dalam konteks API, rate limiter digunakan untuk membatasi jumlah permintaan API yang dapat dilakukan oleh pengguna dalam periode waktu tertentu. Dengan adanya rate limiter, pengguna tidak dapat secara berlebihan mengakses API dan mengganggu kinerja sistem atau menghabiskan sumber daya secara tidak perlu.

\
Rate limiter umumnya diterapkan dengan mengatur jumlah permintaan maksimum yang dapat diterima dalam periode waktu tertentu, seperti jumlah permintaan per detik atau per menit. Jika batas tersebut tercapai, permintaan tambahan akan ditolak atau tertunda hingga periode waktu berikutnya dimulai.

\
Implementasi rate limiter dapat dilakukan menggunakan berbagai teknik, seperti token bucket, leaky bucket, atau sliding window. Pilihan teknik implementasi tergantung pada kebutuhan dan karakteristik sistem yang digunakan.

\
Dengan adanya rate limiter, sistem dapat menjaga ketersediaan dan kinerja yang baik, serta melindungi sumber daya atau layanan dari penyalahgunaan atau serangan DDoS (Distributed Denial of Service).

&nbsp;
## **Implementasi Rate Limiting Nest JS**

&nbsp;
### Buat Project Nest JS

\
Jalankan perintah

```shell
nest new nest-rate-limiting
```

\
Masuk kedalam project

```shell
cd nest-rate-limiting
```

&nbsp;
### Install Package

```shell
yarn add @nestjs/throttler
```

\
**Edit module (app.module.ts)**

```typescript
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler';
import { APP_GUARD } from '@nestjs/core';

@Module({
  imports: [
    ThrottlerModule.forRoot({
      ttl: 60,
      limit: 10,
    }),
  ],
  controllers: [AppController],
  providers: [
    AppService,

    {
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
  ],
})
export class AppModule {}

```

\
Baris code
```typescript
{
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
```

\
Artinya adalah memasang Guard secara global di dalam module.

\
Kita juga bisa memasang berdasarkan Controller.

\
```typescript
import { Controller, Get, UseGuards } from '@nestjs/common';
import { AppService } from './app.service';
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @UseGuards(ThrottlerGuard)
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

```

\
Ada dua parameter yang dimasukan yaitu
* ttl (Time to live)
* limit

\
TTL di gunakan untuk membatasi dalam satuan waktu (detik).

\
Limit digunakan untuk membatasi jumlah reuest.

\
Pada contoh diatas artinya dalam waktu 60 detik hanya boleh melakukan reuest sebanyak 10.

\
Pada konfigurasi diatas akan digunakan secara global. kita bisa juga  memberikan kontrol berdasarkan controller seperti dibawah ini:

```typescrip
@Throttle(3, 60)
  @UseGuards(ThrottlerGuard)
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
```

\
Setelah kita request melebihi total yang di ijinkan maka akan seperti dibawah ini

![KvGLMyu.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Kv_GL_Myu_afe1ec4a0a.png)



Rate limiter adalah sebuah mekanisme yang digunakan untuk mengatur laju atau frekuensi akses terhadap suatu sumber daya atau layanan. Tujuannya adalah untuk mencegah penyalahgunaan atau kelebihan beban terhadap sistem tersebut

large_nest_uitdpt.png

medium_nest_uitdpt.png

small_nest_uitdpt.png

thumbnail_nest_uitdpt.png

nest_uitdpt.png

Rate limiting Nest JS

##  Apa itu Homebrew?
Homebrew adalah sebuah sistem manajemen paket untuk macOS dan juga Linux yang memungkinkan pengguna untuk menginstal dan mengelola perangkat lunak di komputer mereka dengan mudah. Homebrew memungkinkan pengguna untuk menginstal perangkat lunak open-source dan utilitas lainnya yang tidak tersedia secara default di macOS maupun Linux.

\
Dengan Homebrew, pengguna dapat menginstal paket-paket baru dengan perintah sederhana yang dijalankan melalui Terminal. Homebrew akan mengunduh kode sumber paket tersebut, mengompilasinya (jika diperlukan), dan menginstalnya ke sistem pengguna.

\
Keuntungan utama menggunakan Homebrew adalah kemampuannya untuk memperluas fungsionalitas  dengan menginstal paket-paket perangkat lunak yang berguna dan populer dalam komunitas pengembang. Homebrew juga menyediakan mekanisme untuk mengelola pembaruan paket yang telah diinstal, sehingga pengguna dapat dengan mudah memperbarui perangkat lunak yang ada ke versi terbaru.

\
Secara keseluruhan, Homebrew adalah alat yang sangat berguna bagi pengguna macOS mapun Linux yang ingin menginstal perangkat lunak tambahan, memperluas fungsionalitas sistem operasi, atau bekerja dengan proyek pengembangan perangkat lunak yang mengandalkan dependensi tertentu.


## Install Homebew di Linux Fedora
Pada tutorial kali ini kita akan menginstall Homebrew pada lingkunan Linux Fedora

\
Jalankan
```shell
sudo dnf groupinstall 'Development Tools'
```

dan

```shell
sudo dnf install procps-ng curl file git
```

\
Kemudian jalankan perintah

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
\
Setelah itu jalankan perintah

```shell
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
```

\
Kemudian

```shell
echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> ~/.bashrc
```

\
Setelah sukses, silahkan test menggunakan terminal

```shell
brew
```

![Wr8phi6.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Wr8phi6_ec19d22900.png)

\
Setelah sukses menginstall brew, selanjunya kita coba menggunakan brew untuk menginstall paket2.


\
# Install package menggunakan brew

\
Kali ini saya akan menginstall wrk menggunakan brew

\
Jalankan perintah

```shell
brew install wrk
```

\
Tunggu sampai proses installasi selesai

![1s37rgw.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/1s37rgw_3dc823664e.png)

\
Jalankan wrk
```shell
wrk
```

![Mjbh8De.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Mjbh8_De_74b99d7d1e.png)

large_jvDdT2o.png

medium_jvDdT2o.png

small_jvDdT2o.png

thumbnail_jvDdT2o.png

jvDdT2o.png

Install Homebrew in Linux

Message broker (pialang pesan) adalah perangkat lunak yang bertindak sebagai perantara dalam mengirimkan pesan antara aplikasi atau sistem yang berbeda. Dalam arsitektur jaringan terdistribusi, message broker memfasilitasi komunikasi antara beberapa sistem dan aplikasi dengan menerima pesan dari pengirim dan meneruskannya ke penerima yang dituju.

\
Message broker memungkinkan integrasi yang mudah antara sistem-sistem yang heterogen dengan mengabstraksi kompleksitas pertukaran pesan dan memastikan bahwa pesan-pesan yang dikirimkan tiba di tempat tujuan dengan aman dan andal. Beberapa contoh message broker yang populer termasuk Apache Kafka, RabbitMQ, dan ActiveMQ.

\
![NHgXKRr.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/N_Hg_XK_Rr_b663ba7e0d.png)

\
Pada gambar diatas terlihat bagaimana Message Broker dapat menghubungkan antar sistem dengan berbeda - beda bahasa pemrograman.

\
Lebih dari itu, Message Broker juga banyak digunakan di dalam arsitektur Microservices diman service - service dapat berkomunikasi dengan service lain menggunakan Message Broker.

\
![kj65Iju.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/kj65_Iju_6e8a151648.png)

\
Message brokers digunakan ketika Anda perlu mengirimkan pesan antara beberapa sistem atau aplikasi.

\
Contohnya, jika Anda memiliki sistem terdistribusi yang terdiri dari beberapa komponen yang berbeda, seperti server aplikasi, basis data, atau sistem lainnya, Anda dapat menggunakan message broker untuk mengirimkan pesan antara komponen-komponen tersebut. 

\
Message broker akan memungkinkan setiap komponen untuk mengirim pesan ke broker, dan broker akan mengirimkan pesan tersebut ke penerima yang tepat.

\
Keuntungan dari menggunakan message broker adalah memungkinkan integrasi sistem yang lebih mudah dan fleksibel, meningkatkan skalabilitas sistem, meningkatkan toleransi kesalahan, dan memungkinkan sistem untuk beroperasi dalam waktu nyata. 

\
Message broker juga dapat membantu dalam mengelola pesan dan memastikan bahwa pesan terkirim dengan aman dan sesuai dengan protokol yang ditentukan.

Message broker (pialang pesan) adalah perangkat lunak yang bertindak sebagai perantara dalam mengirimkan pesan antara aplikasi atau sistem yang berbeda. Dalam arsitektur jaringan terdistribusi, message broker memfasilitasi komunikasi antara beberapa sistem dan aplikasi dengan menerima pesan dari pengirim dan meneruskannya ke penerima yang dituju

medium_AD8h0Mg.png

small_AD8h0Mg.png

thumbnail_AD8h0Mg.png

AD8h0Mg.png

Apa itu Message Broker dan Apa kegunaanya?

## **Apa itu JSON Server?**

\
JSON Server adalah sebuah package atau modul Node.js yang dapat digunakan untuk membuat sebuah RESTful API (Application Programming Interface) sederhana dengan menggunakan data dalam format JSON. 

\
JSON Server ini biasanya digunakan sebagai sebuah alternatif ketika kita ingin membangun aplikasi yang membutuhkan sebuah API, tetapi tidak ingin memperdulikan tentang database, server, dan konfigurasi yang kompleks.

&nbsp;

## **Kelebihan JSON Server**
\
Dengan JSON Server, kita dapat membuat sebuah API dengan mudah hanya dengan menggunakan file JSON sebagai data dasar. Selain itu, JSON Server juga menyediakan fitur-fitur yang berguna seperti pagination, sorting, filtering, dan lain sebagainya. 

JSON Server ini dapat dijalankan secara lokal pada komputer kita, atau bisa juga di-deploy pada server untuk diakses oleh aplikasi lainnya.


&nbsp;
### Install Json Server menggunakan NPM


```shell
npm install -g json-server
```
\
Kemudian buat file dengan format json, misalnya db.json

```json
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
```

\
Kemudian jalankan perintah

```shell
json-server --watch db.json
```
\
![FIusHVM.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/F_Ius_HVM_2008424c93.png)

\
Setelah menjalankan perintah diatas, kita bisa mengakses API menggunakan method POST, GET, PUT, DELETE pada url http://localhost:3000. File JSON akan berubah secara otomatis pada saat kita Hit API dengan melakukan perubahan data

\
![2V49cKD.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/2_V49c_KD_355e8241fb.png)

\
![o23WZir.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/o23_W_Zir_a1666e6fe2.png)

\
File JSON

\
![I7QHbDD.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/I7_Q_Hb_DD_ecb22865f2.png)


JSON Server adalah sebuah package atau modul Node.js yang dapat digunakan untuk membuat sebuah RESTful API (Application Programming Interface) sederhana dengan menggunakan data dalam format JSON

large_GbgyiTE.png

medium_GbgyiTE.png

small_GbgyiTE.png

thumbnail_GbgyiTE.png

GbgyiTE.png

Membuat Mockup API  Menggunakan JSON Server

Monorepo dan Multi Repo adalah cara kita menyimpan banyak project ke dalam suatu Repository seperti Git dengan tujuan untuk memudahkan proses Development dan pengembangan dari kode program.

\
Dalam membuat suatu proyek Aplikasi biasanya kita membutuhkan tools untuk Versioning Control yang berfungsi untuk menyimpan proyek yang kita buat di dalam wadah yang sering kita sebut Repository. Kebanyakan biasanya kita membuat satu project ke dalam satu repository / Multi Repo, tujuanya agar memudahkan identifikasi proyek - proyek yang kita bangun.

&nbsp;

# **Apa itu Monorepo?**

\
Monorepo adalah cara kita menyimpan banyak project ke dalam satu repository yang sama dengan project yang lain.

\
misalnya kita memiliki proyek frontend store dan frontend admin, dengan menggunakan teknik Monorepo kita akan menggabungakan dua proyek tersebut menjadi satu dengan memisahkan berdasarkan directory.

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1670143611/jejakcoding/post/monorepo/VbhEkaZ_scxrwc.png)

&nbsp;

# **Kelebihan Monorepo**

\
Ada beberapa keuntungan yang di dapatkan saat kita memutuskan untuk menggunakan teknik Monorepo untuk proyek yang kita bangun:

- Mudah dalam melakukan sharing code sehingga akan memudahkan dalam menggunakan kode yang sama
- Memudahkan proses Maintenance code, karena code yang dibuat dalam satu repo yang sama

&nbsp;

# **Contoh tools Monorepo**

- [Lerna](https://lerna.js.org)
- [Turbo Repo](https://turbo.build/repo)
- [Nx](https://nx.dev)
- [Yarn Workspace](https://yarnpkg.com/features/workspaces)

&nbsp;

# **Apa itu Multi Repo?**

\
Multi Repo adalah arsitektur Repository yang setiap proyek yang dibuat di masukan di dalam satu repository, artinya misalkan kita memiliki lebih satu proyek maka jumlah repository akan mengikuti jumlah proyek yang ada.

\
Kebanyakan proses pembuatan proyek dilakukan menggunakan banyak Repository

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1670144200/jejakcoding/post/monorepo/FASNP5f_g62pis.png)

&nbsp;

# **Kelebihan Multi Repo**

\
Ada beberapa keuntungan yang di dapatkan saat kita memutuskan untuk menggunakan teknik Monorepo untuk proyek yang kita bangun:

- Mudah dalam melakukan proteksi code program, karena setiap tim akan memiliki akses hanya repository tertentu
- Tidak ada dependensi yang berkaitan, sehingga akan fokus terhadap kode program yang dibuat di dalam proyek dan tidak takut kalo ada perubahan dependensi


Monorepo dan Multi Repo adalah cara kita menyimpan banyak project ke dalam suatu Repository seperti Git dengan tujuan untuk memudahkan proses Development dan pengembangan dari kode program.

large_Q0sekyx_yvalav.png

medium_Q0sekyx_yvalav.png

small_Q0sekyx_yvalav.png

thumbnail_Q0sekyx_yvalav.png

Q0sekyx_yvalav.png

Perbedaan Monorepo dan Multi Repo

Frontend developer dan backend developer adalah dua peran yang sangat penting dalam pengembangan aplikasi web. 

\
Perbedaan utama antara keduanya adalah area fokus dan jenis teknologi yang mereka gunakan.

&nbsp;
## **Frontend Developer**

\
Frontend developer bertanggung jawab untuk mengembangkan bagian depan dari aplikasi web, yaitu halaman web yang dilihat oleh pengguna. 

\
Tugas mereka meliputi merancang dan mengembangkan antarmuka pengguna (user interface), membuat kode HTML, CSS, dan JavaScript, dan memastikan bahwa aplikasi dapat diakses dengan mudah di berbagai perangkat.

&nbsp;

## **Backend Developer**

\
Sementara itu, backend developer bertanggung jawab untuk mengembangkan bagian belakang dari aplikasi web, yaitu server dan database yang mendukung aplikasi. 

\
Tugas mereka meliputi merancang dan mengembangkan API (Application Programming Interface) yang memungkinkan komunikasi antara server dan klien, membuat kode di sisi server menggunakan bahasa pemrograman seperti Java, Python, atau Ruby, dan memastikan bahwa data aman dan tersedia secara konsisten.


\
Dalam pengembangan aplikasi web, frontend developer dan backend developer biasanya bekerja bersama-sama untuk menciptakan aplikasi yang lengkap dan berfungsi dengan baik. 

\
Mereka dapat menggunakan alat dan teknologi yang berbeda untuk membantu mereka mencapai tujuan mereka, dan keterampilan khusus yang mereka miliki akan bervariasi tergantung pada peran yang mereka pilih.

Frontend developer dan backend developer adalah dua peran yang sangat penting dalam pengembangan aplikasi web. Perbedaan utama antara keduanya adalah area fokus dan jenis teknologi yang mereka gunakan.

large_h6izPYy.png

medium_h6izPYy.png

small_h6izPYy.png

thumbnail_h6izPYy.png

h6izPYy.png

Perbedaan frontend developer dan backend developer

Kong adalah salah satu API Gateway yang populer dipakai oleh banyak perusahaan maupun individu terutama untuk proyek berbasis Microservices.

&nbsp;

# Apa itu API Gateway?

\
API Gateway adalah service yang digunakan sebagai pintu masuk dari Request yang dikirim oleh Client ke Service - Service yang ada di dalam API Gateway

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667104655/jejakcoding/post/kong/tdgzJ8K_yqudk0.png)

\
Kali ini saya akan membagikan tutorial singkat cara mudah membuat API Gateway menggunakan Kong, dan untuk mempermudah penginstallan saya akan menggunakan Docker Compose.

&nbsp;

# **Download Kong**

Download kong di https://konghq.com atau kita bisa menggunakan Docker.

\
Pada contoh kali ini saya menggunakan Docker dan Docker Compose untuk menjalankan Kong.

\
Buatlah folder dimana kita akan menyimpan konfigurasi kong

```shell
mkdir kong
cd kong
```

Buat file "kong.yml" dan isi seperti contoh dibawah ini

```yml
_format_version: "3.0"
_transform: true

services:
  - host: mockbin.org
    name: example_service
    port: 80
    protocol: http
    routes:
      - name: example_route
        paths:
          - /mock
        strip_path: true
```

Pada konfigurasi di atas kita akan membuat url "/mock" yang akan di arahkan ke "mockbin.org"

\
Buat file "docker-compose.yml"

```yml
version: "3.9"

services:
  kong-dbless:
    image: kong/kong-gateway:3.0.0.0
    volumes:
      - ./:/kong/declarative/
    environment:
      - KONG_DATABASE=off
      - KONG_DECLARATIVE_CONFIG=/kong/declarative/kong.yml
      - KONG_PROXY_ACCESS_LOG=/dev/stdout
      - KONG_ADMIN_ACCESS_LOG=/dev/stdout
      - KONG_PROXY_ERROR_LOG=/dev/stderr
      - KONG_ADMIN_ERROR_LOG=/dev/stderr
      - KONG_ADMIN_LISTEN=0.0.0.0:8001
      - KONG_ADMIN_GUI_URL=http://localhost:8002
      - KONG_LICENSE_DATA
    ports:
      - 80:8000
      - 8443:8443
      - 8001:8001
      - 8444:8444
      - 8002:8002
      - 8445:8445
      - 8003:8003
      - 8004:8004
```

Kemudian jalankan perintah

```shell
docker compose up --build
```

atau

```shell
docker-compose up --build
```

\
Setelah sukses coba ketik url

```shell
http://localhost/mock
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667105537/jejakcoding/post/kong/6FnkCj2_xyhcjq.png)

\
Untuk membuka halaman Admin Kong, masukan alamat

```shell
http://localhost:8002
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667105659/jejakcoding/post/kong/kyHunFk_jfgluf.png)


Kong adalah salah satu API Gateway yang populer dipakai oleh banyak perusahaan maupun individu terutama untuk proyek berbasis Microservices

large_1aNzfsu_oeg6ha.png

medium_1aNzfsu_oeg6ha.png

small_1aNzfsu_oeg6ha.png

thumbnail_1aNzfsu_oeg6ha.png

1aNzfsu_oeg6ha.png

Membuat API Gateway dengan Kong

# **Object Storage**

\
Object Storage adalah media penyimpanan berbasis Cloud yang memiliki kapasitas yang sangat besar dengan harga yang murah di bandingkan ketika kita menyimpan file di dalam Storage SSD ataupun HDD di server. Object Storage sangat cocok untuk menyimpan File tidak terstruktur seperti gambar, video, document, dan lain - lain.

&nbsp;
# **S3 (Simple Storage Service)**

\
S3 atau Simple Storage Service adalah salah satu Object Storage yang dimiliki oleh perusahaan Amazon atau AWS yang banyak digunakan untuk menyimpan file seperti gambar, video, dokumen dan lain - lain.

&nbsp;
# **Apa itu S3FS-Fuse?**

\
S3FS-Fuse adalah tools Open Source yang digunakan untuk mount Object Storage seperti S3 ke Linux Server. Namun tidak hanya produk S3 dari AWS tetapi dapat digunakan juga Produk2 Object Storage yang lain yang berbasis S3.

&nbsp;
# **Cara kerja S3FS-Fuse**

\
Pada saat Bucket di mount ke drive server mengguankan S3FS maka apapun yang terjadi di Drive Server maupun di Object Storage akan sama. misal saya mengupload gambar di S3, maka gambar yang ada di S3 akan otomatis ada di dalam Drive di Server. Begitupula sebaliknya, pada saat kita melakukan perubahan di Driver server misalnya memasukan gambar, mendelete file, makan akan berpengaruh juga di S3.

&nbsp;
# **Cara install S3FS**

\
Fedora
```shell
sudo dnf install s3fs-fuse
```

Ubuntu
```shell
sudo apt install s3fs
```

RHEL and CentOS 7 or newer via EPEL:
```shell
sudo yum install epel-release
sudo yum install s3fs-fuse
```

SUSE 12 and openSUSE 42.1 or newer:
```shell
sudo zypper install s3fs
```

FreeBSD
```shell
pkg install fusefs-s3fs
```

&nbsp;
# **Persiapan**


* Buatlah Bucket di dalam S3 ataupun penyedia Object Storage yang lain
* Dapatkan Access Key dan Secret Key
* Buatlah file Credential di dalam "${HOME}/.passwd-s3fs" dengan format "ACCESS_KEY_ID:SECRET_ACCESS_KEY"
```shell
echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs
```

* Tambahkan permission

```shell
chmod 0600 ${HOME}/.passwd-s3fs
```


* Buatlah folder yang ingin di mount misalnya folder Data

&nbsp;
# **Mount Bucket**

\
Jalankan perintah s3fs dengan bucket yang sudah di buat

```shell
s3fs NAMA_BUCKET  /FOLDER_DATA -o passwd_file=${HOME}/.passwd-s3fs -o dbglevel=info -f -o curldbg -o url=URL_S3 
```
\
Pada contoh dibawah ini saya menggunakan Wasabi Cloud, perintahnya seperti berikut ini:
```shell
s3fs mistercoding  data -o passwd_file=passwd-s3fs -o dbglevel=info -f -o curldbg -o url=https://s3.ap-southeast-1.wasabisys.com 
```

\
Setelah menjalankan perintah diatas, maka akan terlihat folder Data yang sudah di mount

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777446/jejakcoding/post/s3fuse/myS1cPw_nlw3mk.png)

Pada gambar dibawah ini Bucket yang masih kosong

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777541/jejakcoding/post/s3fuse/wsrKofj_uaaolz.png)

\
Kemudian saya akan melakukan test menaruh gambar di dalam folder data yang sudh di mount.

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777763/jejakcoding/post/s3fuse/Kc0hZ9Y_x8o4ti.png)

\
Gambar yang di copy di local akan otomatis terupload kedalam Object Storage

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777874/jejakcoding/post/s3fuse/S1CwQ5R_b3ozia.png)

\
Begitupula sebaliknya, pada saat melakukan Upload file melalui S3 maka file akan otomatis masuk kedalam Drive local yang sudah di mount.

&nbsp;
# **Kesimpulan**

\
Dengan menggunakan S3FS kita bisa melakukan synchronization data dari local ke S3 menggunakan Fuse, yang bisa di manfaatkan untuk banyak hal. misalnya untuk melakukan Auto Backup Data.



Object Storage adalah media penyimpanan yang memiliki kapasitas yang sangat besar dengan harga yang murah di bandingkan ketika kita menyimpan file di dalam Storage SSD ataupun HDD server.

large_Bc0Uwze_irbimc.png

medium_Bc0Uwze_irbimc.png

small_Bc0Uwze_irbimc.png

thumbnail_Bc0Uwze_irbimc.png

Bc0Uwze_irbimc.png

Mount Bucket S3 ke Server menggunakan S3FS-Fuse

\
Rust adalah bahasa pemrograman sistem modern yang didesain untuk kecepatan, keamanan, dan keterandalan. Bahasa ini dikembangkan oleh Mozilla Research dengan kontribusi dari komunitas open-source yang luas.

\
Rust memiliki sintaks yang mirip dengan bahasa C++ dan memiliki fitur-fitur modern seperti penanganan kesalahan (error handling) yang aman dan sistem kepemilikan (ownership system) yang memungkinkan programer mengelola memori dengan aman tanpa perlu membebani pengguna dengan tugas manual seperti alokasi dan dealokasi memori.

\
CLI adalah singkatan dari "Command Line Interface", yang merupakan antarmuka pengguna yang memungkinkan pengguna untuk berinteraksi dengan sistem melalui baris perintah teks. Dalam CLI, pengguna memasukkan perintah atau argumen dalam baris perintah dan sistem akan mengeksekusi perintah tersebut. CLI sering digunakan pada sistem operasi dan aplikasi konsol yang tidak memiliki antarmuka pengguna grafis. Contoh dari CLI termasuk Command Prompt di Windows, Terminal di macOS dan Linux, dan shell di UNIX.

&nbsp;
## Persiapan

Membuat aplikasi CLI menggunakan bahasa pemrograman Rust sangatlah mudah karena banyak library yang siap pakai yang bisa kita gunakan untuk membuat aplikasi berbasis CLI.

\
Sebelum membuat aplikasi CLI menggunakan Rust, ada beberapa persiapan yang harus di penuhi diantaranya adalah:

* Rust [https://www.rust-lang.org/](https://www.rust-lang.org/)
* Cargo [https://doc.rust-lang.org/cargo/getting-started/installation.html](https://doc.rust-lang.org/cargo/getting-started/installation.html)
* FFMPEG [https://www.ffmpeg.org/](https://www.ffmpeg.org/)

\
Setelah menginstall tools diatas, saatnya kita membuat project menggunakan Cargo

```shell
cargo new rust-cli
```
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1680710729/jejakcoding/post/Az0viSD_knrjyt.png)

\
Kemudian edit file Caro.toml menjadi seperti berikut ini:

```toml
[package]
name = "rust-cli"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
clap = { version = "4.1.11", features = ["derive"] }
ffmpeg-cli = "0.1.0"
futures = "0.3.27"
tokio = "1.26.0"

```

lalu edit file main.rs menjadi

```rs
#![allow(unused)]

use clap::Parser;
use std;
use std::process::Stdio;

use ffmpeg_cli::{FfmpegBuilder, File, Parameter};
use futures::{future::ready, StreamExt};

#[derive(Parser)]
struct Cli {
    source: String,
    destination: String,
}


#[tokio::main]
async fn main() {
    let args = Cli::parse();

    let builder = FfmpegBuilder::new()
        .stderr(Stdio::piped())
        .input(File::new(&args.source))
        .output(
            File::new(&args.destination)
                .option(Parameter::KeyValue("c:v", "libx264"))
                .option(Parameter::KeyValue("c:a", "copy"))
                .option(Parameter::KeyValue("strict", "-2"))
                .option(Parameter::KeyValue("crf", "18")),
        );

    let ffmpeg = builder.run().await.unwrap();

    ffmpeg
        .progress
        .for_each(|x| {
            dbg!(x.unwrap());
            ready(())
        })
        .await;

    let output = ffmpeg.process.wait_with_output().unwrap();

    println!(
        "{}\nstderr:\n{}",
        output.status,
        std::str::from_utf8(&output.stderr).unwrap()
    );
}

```

Lalu build menggunakan perintah divawah ini untuk meng-compile menjadi binary file

```shell
cargo build --release
```

Setelah menjalankan perintah diatas, maka akan terbentuk file binary "target/release/rust-cli"

\
Untuk menggunakanya kita bisa menjalankan

```shell
./target/release/rust-cli
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1680711266/jejakcoding/post/r13yDpD_l9tbyq.png)

\
Pada gambar diatas terjadi error karena kita belum memasukan paramater lokasi video dan tujuan video.

\
Supaya bisa kita gunakan secara global, kita bisa memindahkan file rust-cli ke dalam /usr/local/bin

\
Jalankan perintah

```shell
rust-cli SOURCE_LOKASI_VIDEO DESTINASI_LOKASI_VIDEO
```
```

Rust adalah bahasa pemrograman sistem modern yang didesain untuk kecepatan, keamanan, dan keterandalan. Bahasa ini dikembangkan oleh Mozilla Research dengan kontribusi dari komunitas open-source yang luas.

large_Z6hbQX7_zygtaf.png

medium_Z6hbQX7_zygtaf.png

small_Z6hbQX7_zygtaf.png

thumbnail_Z6hbQX7_zygtaf.png

Z6hbQX7_zygtaf.png

Membuat aplikasi CLI Video Reducer menggunakan Rust

Docker Swarm adalah layanan orkestrasi yang disediakan oleh docker nya langsung dan untuk pembaruan sekarang sudah termasuk ketika kita menginstall docker maka docker swarm sudah tersedia bersama docker engine yang dimana sebelumnya docker swarm berdiri sendiri dan diinstall terpisah, mungkin kita kenal layanan orkestrasi lainnya seperti kubernetes salah satunya yang cukup populer kemudian ada Openshift, Rancher, Meson dan lain lain.

\
untuk monitoring docker-swarm yaitu portainer tools opensource yang biasa digunakan oleh para DevOps dengan menage container untuk memantau container running atau tidak dan bisa mengatur replika container

\
dalam kasus ini kita memiliki 3 server dimana  1 manager 2 worker
dengan spek :
 
 \
CPU  : 4 CORE
RAM : 8 GB
DISK : 150 GB 
OS : UBUNTU SERVER 20.04

\
IP Server 1 : 10.40.0.246 (manager)
IP Server 2 : 10.40.1.234 (worker1)
IP Server 3 : 10.40.1.235 (worker2)

\
stepnya adalah :


1. masuk ke server manager 10.40.0.246 untuk memulai configurasi docker-swarm sebagai manager

\
2. ketikan di terminal linux ubuntu **docker swarm init --advertise-addr 10.40.0.246** maka akan muncul seperti ini

\
To add a worker to this swarm, run the following command:

&nbsp;

```shell
docker swarm join --token SWMTKN-1-32cjih17ur317ii9t959ar34pif2e7sixok5py10dc8fv1qgi9-e3uepr0f69jfuxfx0ji23vmj5 10.40.0.246:2377
```

\
3. copy command tersebut dan langsung pastekan ke server worker tersebut hasilnya akan seperti ini

&nbsp;

```shell
[ubuntu@error.arpa ~]$ docker swarm join --token SWMTKN-1-32cjih17ur317ii9t959ar34pif2e7sixok5py10dc8fv1qgi9-e3uepr0f69jfuxfx0ji23vmj5 10.40.0.246:2377
This node joined a swarm as a worker.
[ubuntu@error.arpa ~]$
```

\
4. untuk mengecek node worker aktif atau tidaknya kita balik lagi ke server manager dengan ketikan

```shell
docker node ls
```

&nbsp;

 hasilnya akan seperti ini

\
![dockernode.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/dockernode_0f576a63c8.png)

\
dari step diatas kita sudah membuat configurasi docker-swarm, untuk step selanjutnya  kita akan install portainer untuk mengatur sebuah container

Docker Swarm adalah layanan orkestrasi yang disediakan oleh docker nya langsung dan untuk pembaruan sekarang sudah termasuk ketika kita menginstall docker maka docker swarm sudah tersedia bersama docker engine yang dimana sebelumnya docker swarm berdiri sendiri dan diinstall terpisah

large_Nl6CRSzdokcer.png

medium_Nl6CRSzdokcer.png

small_Nl6CRSzdokcer.png

thumbnail_Nl6CRSzdokcer.png

Nl6CRSzdokcer.png

Install Docker Swarm

## **Apa itu Markdown?**

\
Markdown adalah bahasa Markup ringan dengan penulisan yang sangat sederhana dan bisa di konversi menjadi format HTML dan format lainya.

Mardkdown berbeda dengan Format file lain yang mengharuskan menggunakan Software tertentu untuk mengeditnya. misalnya format Doc yang hanya bisa di buka menggunakan Editor Microsoft Word atau semacamnya. Berbeda dengan Markdown kita tidak memerlukan Editor seperti itu. bahkan dengan Notepad bawaan laptop kita bisa dengan mudah membuat file Markdown. Markdown juga banyak digunakan sebagai informasi seperti dokumentasi, seperti GIT.

&nbsp;

## **Siapa yang menggunakan Markdown?**

\
Markdown saat ini banyak digunakan untuk berbagai keperluan seperti Email, Catatan, Presentasi, Blog, dan lain - lain karena sangat mudah di buat dan ringan. Penulis sendiri dalam membuat Blog ini menggunakan Markdown sebagai formatnya.

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657190225/jejakcoding/markdown/lhNWKVE_zrxkve.png)

Contoh penulisan Markdown

&nbsp;

## **Kenapa menggunakan Markdown?**

- Markdown bisa di gunakan untuk banyak hal seperti Email, Dokumentasi, Website, Presentasi, dan lain - lain.

- Platform Independent, kita bisa membuat File Markdown di berbagai Device seperti HP, Laptop, Tablet, PC dengan berbagai OS.

- Markdown banyak support berbagai aplikasi seperti Web, Desktop, Mobile

&nbsp;

## **Bagaimana cara kerja dari Markdown?**

&nbsp;
![](https://mdg.imgix.net/assets/images/markdown-flowchart.png?auto=format&fit=clip&q=40&w=1080)
https://www.markdownguide.org/getting-started/

&nbsp;

## **Aplikasi untuk membuka Markdown?**

- Visual Studio Code, dengan Visual studio Code kita bisa melihat / Preview secara langsung dengan menekan CTRL + Shift + V

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657191359/jejakcoding/markdown/ON3yaMf_hd3lsv.png)

&nbsp;

- Notepad
- Gedit
- [Mister Coding Markdown (Website)](https://tools.mistercoding.com/app/markdown) ![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657244892/jejakcoding/markdown/2z2cRkU_lsy99m.png)
- dan lain - lain


Kali ini saya akan berkenalan dengan Markdown dan kegunaan dari Markdown

large_markdown_rjfqui.png

medium_markdown_rjfqui.png

small_markdown_rjfqui.png

thumbnail_markdown_rjfqui.png

markdown_rjfqui.png

Berkenalan dengan Markdown dan kegunaan dari Markdown

## **Kenapa harus memahami basic - basic syntax Markdown?**

\
Kita harus memahami syntax dari markdown supaya kita tidak tergantung dengan Text Editor. dengan mamaminya kita akan jauh lebih mudah membuat file Markdown tanpa harus khawatir jika misalnya software yang biasa kita gunakan mengalami error atau tidak di kembangkan lagi. kita bisa membuat Dokumen markdown dengan menggunakan aplikasi apa saja karena kita sudah memahami dasi basic syntax Markdown.

&nbsp;

## **Paragraf**

\
Untuk membuat Paragraf kita hanya perlu membuat baris kosong dengan menekan Enter pada keyboard lalu membuat tulisan.

\
Berikut ini adalah daftar contoh penggunaan Paragraf pada Markdown

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299779/jejakcoding/markdown/basic/lpJGuxl_wxzc4i.png)

&nbsp;

## **Penggunaan paragraf yang baik**

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299864/jejakcoding/markdown/basic/K5nT5vw_m5y3on.png)


Kali ini saya akan berkenalan dengan Basic syntax - syntax dari Markdown supaya kita bisa membuat document Markdown dengan mudah

Basic syntax  Markdown - Cara membuat Paragraf

## **Kenapa harus memahami basic - basic syntax Markdown?**

\
Kita harus memahami syntax dari markdown supaya kita tidak tergantung dengan Text Editor. dengan mamaminya kita akan jauh lebih mudah membuat file Markdown tanpa harus khawatir jika misalnya software yang biasa kita gunakan mengalami error atau tidak di kembangkan lagi. kita bisa membuat Dokumen markdown dengan menggunakan aplikasi apa saja karena kita sudah memahami dasi basic syntax Markdown.

&nbsp;

## **Heading**

\
Untuk membuat Heading kita memerlukan karakter (#). jumlah dari (#) adalah mewakili Heading 1,2,3,4,5,6.

\
Berikut ini adalah daftar contoh Heading

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657298158/jejakcoding/markdown/basic/uSyBzPh_tthbru.png)
https://www.markdownguide.org/basic-syntax/

\
Selain syntax di atas, untuk membuat heading ada alternative lain yang bisa kita gunakan untuk membuat Heading

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657298794/jejakcoding/markdown/basic/UpMwW4q_lbuq6b.png)

## Cara menggunakan Heading

\
Untuk membuat heading ada aturan yang harus kita pahami terlebih dahulu yaitu setelah karakter "#" kita harus memberikan spasi.

- Contoh Benar : # Contoh heading benar

- Contoh Salah : #Contoh heading benar

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299095/jejakcoding/markdown/basic/LmjwnC6_hztk9p.png)
