Navigation

    BaliJS
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Popular
    • Talents
    • Users
    • Groups
    1. Home
    2. adibite

    adibite (@adibite)

    18
    Reputation
    13
    Posts
    24
    Profile views
    3
    Followers
    12
    Following
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    Information about adibite

    Angular Dev ReactJS Dev VueJS Dev Problem Solver
    Joined
    Last Online
    Website
    adibite.xyz
    Location
    Jembrana, Bali
    Age
    28

    About me

    Sveltejs πŸ’•

    Best posts made by adibite

    • Membuat Menu Menggunakan SvelteJS

      Membuat Mega Menu Berdasarkan Kusi Bali Js ke 2 Menggunakan Sveltejs. Goalnya adalah array dari menu object akan di mapping menjadi DOM tree. Untuk mengetahu tag svelte dan penggunaan bisa lihat - lihat dokumentasi svelte

      --> Hasil akhir

      Mission

      1. Menutup semua menu yang terbuka, jika klik di luar menu
      2. Menutup menu yang terbuka, jika menu lain di klik

      Membuat Svelte Component

      Satu yang special dari svelte tag adalah <svelte:self/> dimana ini representatif dari component itu sendiri ini mirip dengan fungsi rekursif.

      <script>
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	
      </script>
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div >
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      

      Menambah Transisi

      Transisi pada svelte tidak bisa ditaruh pada tag spesial svelte seperti <svelte:self/> oleh karena itu saya menaruhnya kedalam tag div dan transisi akan hanya bisa berjalan saat element di hapus atau di tambah, bisa menggunakan logic block else-if. Transisi yang saya gunakan adalah slide yaitu membuat seolah muncul dari atas ke bawah

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	
      </script>
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      
      

      1. Menutup Menu

      Untuk menutup menu ketika melakukan klik di luar submenu saya medengarkan klik pada body element menggunakan tag spesial dari svelte <svelte:body />. kemudian menggunakan event modifier yaitu capture , hal ini dilakukan agar fungsi handleOutsde dipanggil sebelum sebuah menu di tekan (menu tertutup dulu baru menu lain yang ditekan muncul submenunya). untuk detailnya mengenai lihat https://javascript.info/bubbling-and-capturing

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	function handleOutsde (event) {
      		visible = (new Array(menu.length)).fill(false);
      	}
      	
      </script>
      <svelte:body on:click|capture={handleOutsde} />
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      

      2. Menutup Menu lainnya

      Untuk menutup menu lainnya hal pertama yang harus di pikirkan adalah bagaimana agar menu parent tetap terbuka walaupun submenu di klik ini karena fungis sebelumnya handleOutsde menutup semua menu dengan melabeli menu telah tertutup, untuk mengatasi itu kita perlu memberi tahu parent element bahwa ada child sedang dalam keadaan terbuka untuk itu perlu dibuat sebuah custom event dimana nanti akan medispatch "memanggil fungsi di parent" memberitahu bahwa submenu telah di klik.

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	import { createEventDispatcher } from 'svelte';
      
      	const dispatch = createEventDispatcher();
      	
      	export let position = null;
        export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function doToggle(pos, status) {
      		dispatch('open', {pos, status})
      	}
      	
      	function toggle(index, status) {
      		doToggle(position, true)
      		visible[index] = status
      	}
      	
      	function handleOpen(event) {
      		toggle(event.detail.pos, event.detail.status);
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      
      	function handleOutsde (event) {
      		visible = (new Array(menu.length)).fill(false);
      	}
      	
      </script>
      <svelte:body on:click|capture={handleOutsde} />
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click|stopPropagation={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      							<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      								<svelte:self position={index} menu={item.children} on:open={handleOpen} />
      							</div>
      						{/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      posted in Front End
    • Cara Aman Edit Dependency Module

      Sebelumnya saya menggunakan Gatsby dan ingin mengintegrasikan dengan netlify CMS namun ada kendala saat menggunakan library
      gatsby-remark-relative-images dimana ini berfungsi mengubah relative path menjadi absolute path dari lokasi frontmatter filenya. Tapi plugin ini susah di integrasi dengan netlify CMS karena di netlify CMS ketika menyimpan file lokasinya path-nya media/target.jpg dimana si library tadi menganggap file tidak ada. Ternyata ini sudah ada di issue mereka dan telah ada yang bikin PRnya tapi belum di merge

      Akhirnya saya pakai library https://github.com/ds300/patch-package untuk modifikasi untuk memodifikasi module agar bisa berfungsi lagi. Saya sesuaikan agar menggunakan regex untuk matching string path-nya dan setelah berhasil

      yarn patch-package gatsby-remark-relative-images
      

      Dan sekarang Bisa menambah media dari netlify CMS ke Gatsby js

      posted in Front End
    • Ayo kenalin dirimu!

      @wayanjimmy saya Adi Gunawan dari Bali tepatnya bagian Barat. Saya suka dengan teknologi web yang baru Yaitu JAM stack . Saya suka mencoba berbagai macam framework mulai dari Gatsbyjs, Nextjs, Nuxtjs, serta baru ini saya coba Sapper. Saya juga membuat website
      https://adibite.xyz
      menggunakan Gatsby dan Netlify CMS (meski sering gagal pas build stage tapi akhirnya bisa connect and running)πŸ˜‚. Itu Aja Cuy!

      posted in Diskusi Umum
    • Trik Programing Laptop Super Kentang

      Sudah lama tidak menulis di sini lagi, maunya rajin nulis lagi hehe. langsung saja kali ini saya akan membagikan trik saya untuk developing program di laptop "kentang", saya menulis ini karena laptop saya juga bisa di bilang kentang sih walapun enggak begitu kentang banget / low spect. Untuk mengatasi masalah saya ini saya menggunakan code-server mirip seperti VSCODE tapi ini online seperti code editor lainnya Che Openship atau yang Gitpod. Alasan saya pakai code server yang karena sangat mirip dengan VSCODE dan setup di vps simple aja.

      1. Install Code Server

      Untuk instalasi ini saya ikuti yang ada di readme mereka yang bagian Quick Install
      2. Kemudian saya membuat code server bisa di jalankan code-server di terminal dan membuka di browser.

      Kalau kalian menggunakan VPS server seperti azure atau aws perlu open inbonding dan outboding port agar bisa di akses di internet

      2. Menjalankan Sebagai Service

      Ketika terminal session berakhir maka code server akan terhenti untuk mengatasi ini saya mengubah menjadi service dengan cara membuat file pada /lib/systemd/system/code-server.service

      seperti berikut ini

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      User=CodeUser
      Group=CodeUser
      Environment=PASSWORD=PASSWORD_HERE 
      ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      pastikan telah membuat folder sudo mkdir /var/lib/code-server sebelum menjalankan service ini untuk yang lokasi code server bisa di cari dengan which code-server

      terus tinggal enable dan menjalan service ini

      sudo systemctl start code-server

      dan untuk mengecek apa sudah berjalan

      sudo systemctl status code-server

      Output harus seperti ini

      Output
      ● code-server.service - code-server
         Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
         Active: active (running) since Tue 2020-05-12 20:53:29 UTC; 11s ago
       Main PID: 3236 (node)
          Tasks: 14 (limit: 2362)
         CGroup: /system.slice/code-server.service
                 β”œβ”€3236 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
                 └─3258 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
      
      May 12 20:53:29 code-server-update systemd[1]: Started code-server.
      May 12 20:53:30 code-server-update code-server[3236]: info  code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
      May 12 20:53:30 code-server-update code-server[3236]: info  HTTP server listening on http://127.0.0.1:8080
      May 12 20:53:30 code-server-update code-server[3236]: info    - Using custom password for authentication
      May 12 20:53:30 code-server-update code-server[3236]: info    - Not serving HTTPS
      May 12 20:53:30 code-server-update code-server[3236]: info  Automatic updates are enabled
      

      Untuk menjalankan otomatis ketika server di start jalankan perintah ini

      sudo systemctl enable code-server

      3. Menambah Domain dan Link ke HTTPS

      Untuk server ini saya menggunakan nginx terus mengaplikasi reverse proxy, jadi nanti bisa diakses menggunakan domain saya gitu. Bikin konfigruasi terlebih dahulu
      sudo nano /etc/nginx/sites-available/code-server.conf

      dan isi filenya seperti ini

      server {
          listen 80;
          listen [::]:80;
      
          server_name code-server.your-domain;
      
          location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
          }
      }
      
      

      portnya sama dengan port dari code server, tinggal di aktifkan dengan
      sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf terus tinggal restart si Nginx sudo systemctl restart nginx

      sekarang bisa di buka lewat domain menggunakan protokol HTTP.
      Tapi jika di perhatikan jika membuka code server menggunakan protokol HTTP makan akan terdapat waring / peringatan kalau tidak bisa melakukan kegiatan copy / paste dan tidak bisa melakukan live preview. Live preview / prevew mode ini maskudnya kita bisa mengakses proxy dari local server yang di jalankan contoh localhost:4000 bisa diakses code-server.your-domain/proxy/4000

      kita install HTTPS dengan menggunakan lets ecrypt seperti berikut ini

      sudo add-apt-repository ppa:certbot/certbot

      instal ke dalam nginx

      sudo apt install python-certbot-nginx

      sudo ufw allow https

      Sekarang bisa deh buka di HTTPS

      Permasalahan Dan Cara Mengatasi

      Selama saya menggunakan kode server ini saya mengalami beberapa masalah diantaranya sebagai berikut

      1. User di VSCODE server tidak sama dengan yang saya gunakan di mana dia adalah root dan akibatanya program yang saya pasang tidak ada untuk itu bisa dilakukan dengan su - NAMA_USER ganti nama username pribadi

      2. Ketika menjalankan program menggunakan live preview terjadi error ini karena endoint beda contoh untuk program seperti nextjs. untuk itu saya menggunakan trik forwading remote port ke local dengan menggunakan

      ssh -N [email protected] -L 8080:localhost:9090

      Jadi remote port pada posisi 9090 bisa saya akses di localhost 8080 dan sekarang bisa diakses dengan normal. : )

      posted in Diskusi Umum
    • Bikin Aplikasi Flutter di VPS

      Hari ini saya akan membagikan cara untuk menjalankan atau membangun aplikasi flutter di vps menggunakan VSCode Remote dan sebuah VPS. Langsung saja sebelumnya perlu mengikuti tutorial dibawah ini untuk install flutter, android sdk dan juga java develop kit (jdk). Untuk vscode remote bisa baca di VS Code Remote Development

      • Install Flutter in the Ubuntu 20.04 LTS
      • Install Android SDK in the Ubuntu 20.04 LTS β€” Without Android Studio
      • Install OpenJDK 11 LTS in the Ubuntu 20.04 LTS

      Oh ya perhatian di sini pada tutorial mereka pakai OpnJDK 11 lts pas saya jalanin
      fluter doctor --android-licenses ada error kayak xml sempat saya cari dan nemu sama Failed to install android-sdk: β€œjava.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema” akhirnya kuputskan untuk ganti pakai jdk-8u271-linux-x64.tar.gz

      oh ya karena enggak bisa langsung di download di VPS maka saya download dulu di pc kemudian menggunakan scp jdk-8u271-linux-x64.tar.gz [email protected]:/home/ganteng πŸ™‚

      Pastikan jika di komputer udah terinstall android studio
      kita enggak akan pakai android studionya cuman adb aja.

      Bikin Device dan Forward It

      Sekarang saya akan membuat device saya bisa di akses tanpa mecolokan usb
      dengan menggunakan adb devices maka di hp android akan muncul permintaan untuk accept key. setelah itu saya tinggal jalankan adb tcpip 5555 sekarang saya tinggal bisa mengkases jika hp berada di port 192.168.1.2 maka nanti akan menjadi 192.168.1.2:5555 nah sekarang saya akan melakukan forwad remote tersebut agar bisa di akses di vps menggunkan yang namanya Port Forwading SSH sekarang tinggal jalankan perintah begini di komputer
      ssh -R 5555:192.168.1.2:5555 vpsip biarkan jangan di tutup.

      kemudian di server vps jalankan adb connect 127.0.0.1:5555 maka nanti akan sama minta permission lagi di hp kemudia klik yes aja. Ok sekarang tinggal connect device di vps

      jalankan perintah di bawah di vps

      futter doctor maka akan tampil seperti ini

      flutter inner.png

      Jalankan App

      Bikin project kosong dulu sebagai test aja atau bisa menggunakan proyek yang udah jadi tinggal jalankan seperti ini flutter create foobar && cd foobar
      terus sekarng tinggal run aja flutter run
      running app.png

      Jika menggunakan extension flutter di vscode pastikan extension terinstall di remote jangan di local, dan terus untuk run di tabbar itu enggak bisa device enggak terdeteksi mesti pakai command buat jalankan perintah

      Donasi

      & donati
      Dukung saya biar rajin bikin kontent di sini dengan melakukan sawer ke link berikut ini lewat saweria berikut ini https://saweria.co/adi200 agar saya semangat bikin post baru dan bisa beli komputer

      posted in Diskusi Umum
    • Sesi Belajar NestJs: Membuat CRUD cepat di Nestjs dengan GraphQL

      Kenapa NestJs?

      Kali ini gue bakal share pengalaman mencoba nestjs, alasan pakai nestjs karena agak mirip sama symfony karena sempat dulu belajar kalau di symfony itu pakai xml buat depedency injection nya. Ya agak mirip lah 😊 walau beda bahasa typescript dengan php.

      Nah dalam perjalanan mengarumi framework ini bayak hal yang gue alami dan kadang bikin buka banyak tab buat lihat stack overflow sama github buat ngerti source code. Pertama kali gue install itu pakai NX (monorepo) gitu biar keren 😎 , canda biar simple aja males project kesebar gitu biar git nanti satu aja.

      Nah selain menggunakan NX di dokumentasi bisa bikin pakai command line interface bisa lihat pada bagian NestJS - First Setup , yang pakai react, angular atau build tool lainnya pasti ngerti mirip - mirip gitu. Selain itu juga banyak juga boilerplate (kayak startup project simplenya) tapi walau bagus bisa hemat waktu enggak ulang - ulang dan mulai dari dasar. Tapi penggunaan boilerplate ini ada kelemahan kadang - kadang pas run banyak yang error, jadi sama aja sih pakai ama enggak. Salah satu boilerplate yang gue rekomendasikan adalah Awesome Nest Boilerplate disana dia untuk database pakai typeorm untuk ORM (Object relation Mapping) ya kayak sebuah assembler otomatis gitu pakai class decorator. untuk API akses menggunakan swagger (kalau simplenya sih swagger CRUD API biasa tapi ada playgroundnya mirip postman), jadi tinggal buka api bisa langsung test di tempat, hampir mirip si GraphQL. Oh ya selain itu ada juga file yang dulu aku enggak ngerti buat apa di sana di pakai main.hmr.ts itu sebenarnya apa kan ada hmr mungkin maksudnya hot module replacement tapi kan aku pakai buat bikin backend API rasanya kagak perlu di pakai

      Untuk bagian tutorial ada di bawah sesi curhatnya, kalau mau langsung pingin tahu sesuai judul bisa baca setelah curhat β„Ή

      Curhat (Boleh Baca Boleh Enggak)

      Jujur aja aku kan kemarin ikut kompetisi RICH kayak kompetisi startup gitu, nah startup layarjasa platform pengalur jasa mirip beres*id kalau mau follow bisa lihat di IG Layarjasa. Nah kan di umumin itu kalau enggak salah H-3 gitu kalau enggak salah, pertama aku pesimis karena bikin sendiri, walau nama teammnya itu sih 4 orang πŸ˜₯ tapi tetep aku kebut biar jadi yang kan deadline langsung tak kebutin, selesai juga dalam 1 hari Heehehe. Untungnya di sana ada asaramnya Thank to InbisTohpati walau makanan catering agak pedas menurut aku yang enggak suka pedas, kasihan sambal enggak aku makan.

      Disanan kan kami (aku) yang karena selama 3 hari cuma aku aja yang hadir dan ditemanini sama saudara terus hari 2 dan 3 sendiri, untuk presentasi dibantu sama mas ay buat presentasi itu pun ngebut juga bikin jam 8 selesai jam 12 malam sampai di usir sama satpam πŸš“ wkwkwk kacau. Karena aku orang introvert jarang bicara sama manusia dan lagi proses recovery mental di psyciater terus enggak ada persiapan mau pitching apa jadi hancur dah πŸ’₯

      Walau enggak berhasil jadi tenant yang setidaknya dapet relasi lah terus dapat belajar enteprenur terus teknik berkomunikasi, terus ternyata bisa pakai alat CNC machine buat bikin proyek IoT.

      Module pada nestjs

      Nestjs ini berdasar dari Angular js maka terms atau istilah dipakai agak mirip nah nest ini aplikasi kita itu berdiri dari modules - module nah nantinya module harus kita importkan ke AppModule kalau enggak nanti enggak di baca πŸ’© sempat dulu bikin module kok enggak ada di api ternyata belum ke import, selain itu juga ada kesalahan yang sering di alami pemula, kalau enggak pakai cmd buat generate module atau service biasanya lupa buat nambah di field provides nama service yang buat di Injectkan jadinya malah enggak bisa di baca sama modulnya.

      Mengenal Nestjs-query

      Pertama kali mengenal nestjs query karena gue merasa malas melakukan repetisi buat cuma bikin crud aja padahal kan itu repetisi kalau di symfony dulu tinggal extends Repository class terus inject dah si ORM modelnya, akhirnya coba cari" ketemu ini bisa CRUD cepat terus sekalian ama GraphQL terus bisa integrasi sama banyak jenis database kalau gue kan pakai mongodb terus pakai typegoose jadi simple bikin crud enggak lama terus enggak perlu bikin resolver buat DTOnya 🌈

      Sebenarya untuk contohnya bisa dilihat di repository ada folder example jadi coba gue bikin yang lebih simple aja kali ya atau gue jelasin aja bagian yang ribetnya aja bagian folder πŸ“‚ berikut

      import { NestjsQueryGraphQLModule } from '@nestjs-query/query-graphql';
      import { Module } from '@nestjs/common';
      import { NestjsQueryTypegooseModule } from '@nestjs-query/query-typegoose';
      import { TagInputDTO } from './dto/tag-input.dto';
      import { TagDTO } from './dto/tag.dto';
      import { TagEntity } from './tag.entity';
      
      @Module({
        imports: [
          NestjsQueryGraphQLModule.forFeature({
            imports: [NestjsQueryTypegooseModule.forFeature([TagEntity])],
            resolvers: [
              {
                DTOClass: TagDTO,
                EntityClass: TagEntity,
                CreateDTOClass: TagInputDTO,
                UpdateDTOClass: TagInputDTO,
                enableAggregate: true,
              },
            ],
          }),
        ],
      })
      export class TagModule {}
      
      

      nah kalau dilihat sekilas intinya di bagian import itu entitinya (ORM). Nah Kan ada DTOClass nah ini akan di mapping menjadi GraphQL ObjectType terus Create dan Update itu itu nantinya jadi Input Type bisa buat untuk di mutation pada bagian GraphQL jadi nantinya kalau di resolver itu jadi arguments tapi ini langsung terhubung sama database. enable agregate itu buat namah fitur seperti groupBy, count, sum, avg, min, dan max (sortir dan fiter simplenya). Kayaknya dah jelas untuk bagian ini

      Nah untuk di app`modulenyanya tinggal taruh seperti ini

      import { Module } from '@nestjs/common';
      import { GraphQLModule } from '@nestjs/graphql';
      import { TypegooseModule } from 'nestjs-typegoose';
      import { GqlContext } from './auth.guard';
      import { TagModule } from './tag/tag.module';
      import { TodoItemModule } from './todo-item/todo-item.module';
      import { SubTaskModule } from './sub-task/sub-task.module';
      import { mongooseConfig } from '../../helpers';
      
      const { uri, ...options } = mongooseConfig('typegoose', {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
        useFindAndModify: false,
      });
      
      @Module({
        imports: [
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          TypegooseModule.forRoot(uri!, options),
          GraphQLModule.forRoot({
            autoSchemaFile: 'schema.gql',
            context: ({ req }: { req: { headers: Record<string, string> } }): GqlContext => ({ request: req }),
          }),
          SubTaskModule,
          TodoItemModule,
          TagModule,
        ],
      })
      export class AppModule {}
      

      Ada 5 module di pakai 2 untuk setup database dan graphql kemudian 3 buatan sendiri yaitu SubTaskModule, TodoItemModule dan TagModule. Pada module graphql itu kan ada property autoSchemaFile nah ini nanti merupakan lokasi dimana gql filenya di buat yang letaknya root project directory jadi nanti setelah yarn start (jalan server) nanti pas proses build akan membuat file dengan nama schema.gql yang di dalamnya ada kayak sejenis graphql type baik untuk mutation, query, inputtype, object type, schalar dan lainnya. Jangan coba hapus atau modif file ini kalau enggak bisa πŸ’₯

      Setup Database Gimana πŸ˜•

      Bisa pakai docker, install mongodb manual atau bisa juga pakai yang lainnya ada sempat baca bisa pakai npm module yang seolah" mereplika mongose cara kerja jadi bisa enggak perlu install mongodb cukup dengan yarn atau npm aja.

      Oh ya nestjs-query aku baru coba untuk tipe database NoSQL aku belum coba untuk yang bertipe SQL jadi belum bisa kasi banyak bocoran, mungkin kalau nanti ada project pakai SQL aku coba pakai.

      Mengakses GraphQL Playground

      Tahap ini paling asik sih buat main - main coba graphql kita yang telah di buat, enaknyak pakai nestjs-query itu udah support pagination jadi enggak perlu pusing dari 0 hehehh, bagi yang pernah pakai gatsby graphql paging query hampir sama, apakah ini sebuah konspirasi besar (πŸ˜† ).untuk akses bisa buka pada path/graphql` untuk dokumentasi dan schema ada di tab sebelah kanan tinggal di klik, kalau bingung pas mau ketik query tenang ada autocomplete sama lint nya heheee top dah

      Catatan

      Sebenarnya mau bikin tutorial bikin tutorial auth pakai nestjs + jwt auth + graphql takutnya materinya terlalu kebesaran buat di baca, mungkin yang ada saran bisa tinggalkan di komentar untuk di bahasa atau bisa kontak wa saya 087705635438, bisa juga kita belajar bersama 1 to 1 biar belajar enggak sendiri walau bukan cewek guenya hahahah. Kalau belajar 1 to 1 paling bisa sekitaran jam 8 maleman, maklum tinggal di desa ngurus hewan peliharan sama tanaman siang ngoding, malemnya ngewibu, kayaknya udah OOT dah 3 jam berasa cepat banget ya. See you on next post on next week :mailbox_closed:

      posted in Back End
    • Ayo kenalin dirimu!

      @ttm seru machine learning, boleh sharing hari ilmunya dong πŸ˜πŸ‘. ML pakai flutter ?

      posted in Diskusi Umum

    Latest posts made by adibite

    • Sesi Belajar NestJs: Membuat CRUD cepat di Nestjs dengan GraphQL

      Kenapa NestJs?

      Kali ini gue bakal share pengalaman mencoba nestjs, alasan pakai nestjs karena agak mirip sama symfony karena sempat dulu belajar kalau di symfony itu pakai xml buat depedency injection nya. Ya agak mirip lah 😊 walau beda bahasa typescript dengan php.

      Nah dalam perjalanan mengarumi framework ini bayak hal yang gue alami dan kadang bikin buka banyak tab buat lihat stack overflow sama github buat ngerti source code. Pertama kali gue install itu pakai NX (monorepo) gitu biar keren 😎 , canda biar simple aja males project kesebar gitu biar git nanti satu aja.

      Nah selain menggunakan NX di dokumentasi bisa bikin pakai command line interface bisa lihat pada bagian NestJS - First Setup , yang pakai react, angular atau build tool lainnya pasti ngerti mirip - mirip gitu. Selain itu juga banyak juga boilerplate (kayak startup project simplenya) tapi walau bagus bisa hemat waktu enggak ulang - ulang dan mulai dari dasar. Tapi penggunaan boilerplate ini ada kelemahan kadang - kadang pas run banyak yang error, jadi sama aja sih pakai ama enggak. Salah satu boilerplate yang gue rekomendasikan adalah Awesome Nest Boilerplate disana dia untuk database pakai typeorm untuk ORM (Object relation Mapping) ya kayak sebuah assembler otomatis gitu pakai class decorator. untuk API akses menggunakan swagger (kalau simplenya sih swagger CRUD API biasa tapi ada playgroundnya mirip postman), jadi tinggal buka api bisa langsung test di tempat, hampir mirip si GraphQL. Oh ya selain itu ada juga file yang dulu aku enggak ngerti buat apa di sana di pakai main.hmr.ts itu sebenarnya apa kan ada hmr mungkin maksudnya hot module replacement tapi kan aku pakai buat bikin backend API rasanya kagak perlu di pakai

      Untuk bagian tutorial ada di bawah sesi curhatnya, kalau mau langsung pingin tahu sesuai judul bisa baca setelah curhat β„Ή

      Curhat (Boleh Baca Boleh Enggak)

      Jujur aja aku kan kemarin ikut kompetisi RICH kayak kompetisi startup gitu, nah startup layarjasa platform pengalur jasa mirip beres*id kalau mau follow bisa lihat di IG Layarjasa. Nah kan di umumin itu kalau enggak salah H-3 gitu kalau enggak salah, pertama aku pesimis karena bikin sendiri, walau nama teammnya itu sih 4 orang πŸ˜₯ tapi tetep aku kebut biar jadi yang kan deadline langsung tak kebutin, selesai juga dalam 1 hari Heehehe. Untungnya di sana ada asaramnya Thank to InbisTohpati walau makanan catering agak pedas menurut aku yang enggak suka pedas, kasihan sambal enggak aku makan.

      Disanan kan kami (aku) yang karena selama 3 hari cuma aku aja yang hadir dan ditemanini sama saudara terus hari 2 dan 3 sendiri, untuk presentasi dibantu sama mas ay buat presentasi itu pun ngebut juga bikin jam 8 selesai jam 12 malam sampai di usir sama satpam πŸš“ wkwkwk kacau. Karena aku orang introvert jarang bicara sama manusia dan lagi proses recovery mental di psyciater terus enggak ada persiapan mau pitching apa jadi hancur dah πŸ’₯

      Walau enggak berhasil jadi tenant yang setidaknya dapet relasi lah terus dapat belajar enteprenur terus teknik berkomunikasi, terus ternyata bisa pakai alat CNC machine buat bikin proyek IoT.

      Module pada nestjs

      Nestjs ini berdasar dari Angular js maka terms atau istilah dipakai agak mirip nah nest ini aplikasi kita itu berdiri dari modules - module nah nantinya module harus kita importkan ke AppModule kalau enggak nanti enggak di baca πŸ’© sempat dulu bikin module kok enggak ada di api ternyata belum ke import, selain itu juga ada kesalahan yang sering di alami pemula, kalau enggak pakai cmd buat generate module atau service biasanya lupa buat nambah di field provides nama service yang buat di Injectkan jadinya malah enggak bisa di baca sama modulnya.

      Mengenal Nestjs-query

      Pertama kali mengenal nestjs query karena gue merasa malas melakukan repetisi buat cuma bikin crud aja padahal kan itu repetisi kalau di symfony dulu tinggal extends Repository class terus inject dah si ORM modelnya, akhirnya coba cari" ketemu ini bisa CRUD cepat terus sekalian ama GraphQL terus bisa integrasi sama banyak jenis database kalau gue kan pakai mongodb terus pakai typegoose jadi simple bikin crud enggak lama terus enggak perlu bikin resolver buat DTOnya 🌈

      Sebenarya untuk contohnya bisa dilihat di repository ada folder example jadi coba gue bikin yang lebih simple aja kali ya atau gue jelasin aja bagian yang ribetnya aja bagian folder πŸ“‚ berikut

      import { NestjsQueryGraphQLModule } from '@nestjs-query/query-graphql';
      import { Module } from '@nestjs/common';
      import { NestjsQueryTypegooseModule } from '@nestjs-query/query-typegoose';
      import { TagInputDTO } from './dto/tag-input.dto';
      import { TagDTO } from './dto/tag.dto';
      import { TagEntity } from './tag.entity';
      
      @Module({
        imports: [
          NestjsQueryGraphQLModule.forFeature({
            imports: [NestjsQueryTypegooseModule.forFeature([TagEntity])],
            resolvers: [
              {
                DTOClass: TagDTO,
                EntityClass: TagEntity,
                CreateDTOClass: TagInputDTO,
                UpdateDTOClass: TagInputDTO,
                enableAggregate: true,
              },
            ],
          }),
        ],
      })
      export class TagModule {}
      
      

      nah kalau dilihat sekilas intinya di bagian import itu entitinya (ORM). Nah Kan ada DTOClass nah ini akan di mapping menjadi GraphQL ObjectType terus Create dan Update itu itu nantinya jadi Input Type bisa buat untuk di mutation pada bagian GraphQL jadi nantinya kalau di resolver itu jadi arguments tapi ini langsung terhubung sama database. enable agregate itu buat namah fitur seperti groupBy, count, sum, avg, min, dan max (sortir dan fiter simplenya). Kayaknya dah jelas untuk bagian ini

      Nah untuk di app`modulenyanya tinggal taruh seperti ini

      import { Module } from '@nestjs/common';
      import { GraphQLModule } from '@nestjs/graphql';
      import { TypegooseModule } from 'nestjs-typegoose';
      import { GqlContext } from './auth.guard';
      import { TagModule } from './tag/tag.module';
      import { TodoItemModule } from './todo-item/todo-item.module';
      import { SubTaskModule } from './sub-task/sub-task.module';
      import { mongooseConfig } from '../../helpers';
      
      const { uri, ...options } = mongooseConfig('typegoose', {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
        useFindAndModify: false,
      });
      
      @Module({
        imports: [
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          TypegooseModule.forRoot(uri!, options),
          GraphQLModule.forRoot({
            autoSchemaFile: 'schema.gql',
            context: ({ req }: { req: { headers: Record<string, string> } }): GqlContext => ({ request: req }),
          }),
          SubTaskModule,
          TodoItemModule,
          TagModule,
        ],
      })
      export class AppModule {}
      

      Ada 5 module di pakai 2 untuk setup database dan graphql kemudian 3 buatan sendiri yaitu SubTaskModule, TodoItemModule dan TagModule. Pada module graphql itu kan ada property autoSchemaFile nah ini nanti merupakan lokasi dimana gql filenya di buat yang letaknya root project directory jadi nanti setelah yarn start (jalan server) nanti pas proses build akan membuat file dengan nama schema.gql yang di dalamnya ada kayak sejenis graphql type baik untuk mutation, query, inputtype, object type, schalar dan lainnya. Jangan coba hapus atau modif file ini kalau enggak bisa πŸ’₯

      Setup Database Gimana πŸ˜•

      Bisa pakai docker, install mongodb manual atau bisa juga pakai yang lainnya ada sempat baca bisa pakai npm module yang seolah" mereplika mongose cara kerja jadi bisa enggak perlu install mongodb cukup dengan yarn atau npm aja.

      Oh ya nestjs-query aku baru coba untuk tipe database NoSQL aku belum coba untuk yang bertipe SQL jadi belum bisa kasi banyak bocoran, mungkin kalau nanti ada project pakai SQL aku coba pakai.

      Mengakses GraphQL Playground

      Tahap ini paling asik sih buat main - main coba graphql kita yang telah di buat, enaknyak pakai nestjs-query itu udah support pagination jadi enggak perlu pusing dari 0 hehehh, bagi yang pernah pakai gatsby graphql paging query hampir sama, apakah ini sebuah konspirasi besar (πŸ˜† ).untuk akses bisa buka pada path/graphql` untuk dokumentasi dan schema ada di tab sebelah kanan tinggal di klik, kalau bingung pas mau ketik query tenang ada autocomplete sama lint nya heheee top dah

      Catatan

      Sebenarnya mau bikin tutorial bikin tutorial auth pakai nestjs + jwt auth + graphql takutnya materinya terlalu kebesaran buat di baca, mungkin yang ada saran bisa tinggalkan di komentar untuk di bahasa atau bisa kontak wa saya 087705635438, bisa juga kita belajar bersama 1 to 1 biar belajar enggak sendiri walau bukan cewek guenya hahahah. Kalau belajar 1 to 1 paling bisa sekitaran jam 8 maleman, maklum tinggal di desa ngurus hewan peliharan sama tanaman siang ngoding, malemnya ngewibu, kayaknya udah OOT dah 3 jam berasa cepat banget ya. See you on next post on next week :mailbox_closed:

      posted in Back End
    • Bikin Aplikasi Flutter di VPS

      @ttm said in Bikin Aplikasi Flutter di VPS:

      k openjdk 11 jadi jdk-8u27.
      ini gara2 gradle nya masih pakai jdk-8

      itu kan pakai jdk-8 maka saya kasi note kalau yang 11 enggak bisa

      posted in Diskusi Umum
    • Bikin Aplikasi Flutter di VPS

      Hari ini saya akan membagikan cara untuk menjalankan atau membangun aplikasi flutter di vps menggunakan VSCode Remote dan sebuah VPS. Langsung saja sebelumnya perlu mengikuti tutorial dibawah ini untuk install flutter, android sdk dan juga java develop kit (jdk). Untuk vscode remote bisa baca di VS Code Remote Development

      • Install Flutter in the Ubuntu 20.04 LTS
      • Install Android SDK in the Ubuntu 20.04 LTS β€” Without Android Studio
      • Install OpenJDK 11 LTS in the Ubuntu 20.04 LTS

      Oh ya perhatian di sini pada tutorial mereka pakai OpnJDK 11 lts pas saya jalanin
      fluter doctor --android-licenses ada error kayak xml sempat saya cari dan nemu sama Failed to install android-sdk: β€œjava.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema” akhirnya kuputskan untuk ganti pakai jdk-8u271-linux-x64.tar.gz

      oh ya karena enggak bisa langsung di download di VPS maka saya download dulu di pc kemudian menggunakan scp jdk-8u271-linux-x64.tar.gz [email protected]:/home/ganteng πŸ™‚

      Pastikan jika di komputer udah terinstall android studio
      kita enggak akan pakai android studionya cuman adb aja.

      Bikin Device dan Forward It

      Sekarang saya akan membuat device saya bisa di akses tanpa mecolokan usb
      dengan menggunakan adb devices maka di hp android akan muncul permintaan untuk accept key. setelah itu saya tinggal jalankan adb tcpip 5555 sekarang saya tinggal bisa mengkases jika hp berada di port 192.168.1.2 maka nanti akan menjadi 192.168.1.2:5555 nah sekarang saya akan melakukan forwad remote tersebut agar bisa di akses di vps menggunkan yang namanya Port Forwading SSH sekarang tinggal jalankan perintah begini di komputer
      ssh -R 5555:192.168.1.2:5555 vpsip biarkan jangan di tutup.

      kemudian di server vps jalankan adb connect 127.0.0.1:5555 maka nanti akan sama minta permission lagi di hp kemudia klik yes aja. Ok sekarang tinggal connect device di vps

      jalankan perintah di bawah di vps

      futter doctor maka akan tampil seperti ini

      flutter inner.png

      Jalankan App

      Bikin project kosong dulu sebagai test aja atau bisa menggunakan proyek yang udah jadi tinggal jalankan seperti ini flutter create foobar && cd foobar
      terus sekarng tinggal run aja flutter run
      running app.png

      Jika menggunakan extension flutter di vscode pastikan extension terinstall di remote jangan di local, dan terus untuk run di tabbar itu enggak bisa device enggak terdeteksi mesti pakai command buat jalankan perintah

      Donasi

      & donati
      Dukung saya biar rajin bikin kontent di sini dengan melakukan sawer ke link berikut ini lewat saweria berikut ini https://saweria.co/adi200 agar saya semangat bikin post baru dan bisa beli komputer

      posted in Diskusi Umum
    • Ayo kenalin dirimu!

      @alfrcr dapet nemu library brain.js belum ada roadmap cocok buat belajar

      posted in Diskusi Umum
    • Ayo kenalin dirimu!

      @ttm seru machine learning, boleh sharing hari ilmunya dong πŸ˜πŸ‘. ML pakai flutter ?

      posted in Diskusi Umum
    • Ayo kenalin dirimu!

      @Merta-Yasa Salam kenal juga mas

      posted in Diskusi Umum
    • Trik Programing Laptop Super Kentang

      Sudah lama tidak menulis di sini lagi, maunya rajin nulis lagi hehe. langsung saja kali ini saya akan membagikan trik saya untuk developing program di laptop "kentang", saya menulis ini karena laptop saya juga bisa di bilang kentang sih walapun enggak begitu kentang banget / low spect. Untuk mengatasi masalah saya ini saya menggunakan code-server mirip seperti VSCODE tapi ini online seperti code editor lainnya Che Openship atau yang Gitpod. Alasan saya pakai code server yang karena sangat mirip dengan VSCODE dan setup di vps simple aja.

      1. Install Code Server

      Untuk instalasi ini saya ikuti yang ada di readme mereka yang bagian Quick Install
      2. Kemudian saya membuat code server bisa di jalankan code-server di terminal dan membuka di browser.

      Kalau kalian menggunakan VPS server seperti azure atau aws perlu open inbonding dan outboding port agar bisa di akses di internet

      2. Menjalankan Sebagai Service

      Ketika terminal session berakhir maka code server akan terhenti untuk mengatasi ini saya mengubah menjadi service dengan cara membuat file pada /lib/systemd/system/code-server.service

      seperti berikut ini

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      User=CodeUser
      Group=CodeUser
      Environment=PASSWORD=PASSWORD_HERE 
      ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      pastikan telah membuat folder sudo mkdir /var/lib/code-server sebelum menjalankan service ini untuk yang lokasi code server bisa di cari dengan which code-server

      terus tinggal enable dan menjalan service ini

      sudo systemctl start code-server

      dan untuk mengecek apa sudah berjalan

      sudo systemctl status code-server

      Output harus seperti ini

      Output
      ● code-server.service - code-server
         Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
         Active: active (running) since Tue 2020-05-12 20:53:29 UTC; 11s ago
       Main PID: 3236 (node)
          Tasks: 14 (limit: 2362)
         CGroup: /system.slice/code-server.service
                 β”œβ”€3236 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
                 └─3258 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
      
      May 12 20:53:29 code-server-update systemd[1]: Started code-server.
      May 12 20:53:30 code-server-update code-server[3236]: info  code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
      May 12 20:53:30 code-server-update code-server[3236]: info  HTTP server listening on http://127.0.0.1:8080
      May 12 20:53:30 code-server-update code-server[3236]: info    - Using custom password for authentication
      May 12 20:53:30 code-server-update code-server[3236]: info    - Not serving HTTPS
      May 12 20:53:30 code-server-update code-server[3236]: info  Automatic updates are enabled
      

      Untuk menjalankan otomatis ketika server di start jalankan perintah ini

      sudo systemctl enable code-server

      3. Menambah Domain dan Link ke HTTPS

      Untuk server ini saya menggunakan nginx terus mengaplikasi reverse proxy, jadi nanti bisa diakses menggunakan domain saya gitu. Bikin konfigruasi terlebih dahulu
      sudo nano /etc/nginx/sites-available/code-server.conf

      dan isi filenya seperti ini

      server {
          listen 80;
          listen [::]:80;
      
          server_name code-server.your-domain;
      
          location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
          }
      }
      
      

      portnya sama dengan port dari code server, tinggal di aktifkan dengan
      sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf terus tinggal restart si Nginx sudo systemctl restart nginx

      sekarang bisa di buka lewat domain menggunakan protokol HTTP.
      Tapi jika di perhatikan jika membuka code server menggunakan protokol HTTP makan akan terdapat waring / peringatan kalau tidak bisa melakukan kegiatan copy / paste dan tidak bisa melakukan live preview. Live preview / prevew mode ini maskudnya kita bisa mengakses proxy dari local server yang di jalankan contoh localhost:4000 bisa diakses code-server.your-domain/proxy/4000

      kita install HTTPS dengan menggunakan lets ecrypt seperti berikut ini

      sudo add-apt-repository ppa:certbot/certbot

      instal ke dalam nginx

      sudo apt install python-certbot-nginx

      sudo ufw allow https

      Sekarang bisa deh buka di HTTPS

      Permasalahan Dan Cara Mengatasi

      Selama saya menggunakan kode server ini saya mengalami beberapa masalah diantaranya sebagai berikut

      1. User di VSCODE server tidak sama dengan yang saya gunakan di mana dia adalah root dan akibatanya program yang saya pasang tidak ada untuk itu bisa dilakukan dengan su - NAMA_USER ganti nama username pribadi

      2. Ketika menjalankan program menggunakan live preview terjadi error ini karena endoint beda contoh untuk program seperti nextjs. untuk itu saya menggunakan trik forwading remote port ke local dengan menggunakan

      ssh -N [email protected] -L 8080:localhost:9090

      Jadi remote port pada posisi 9090 bisa saya akses di localhost 8080 dan sekarang bisa diakses dengan normal. : )

      posted in Diskusi Umum
    • Front End Developer (Angular, React, Vue)

      @alfrcr subject email apa dan apa lowongan ini masih buka?

      posted in Lowongan
    • Membuat Menu Menggunakan SvelteJS

      Membuat Mega Menu Berdasarkan Kusi Bali Js ke 2 Menggunakan Sveltejs. Goalnya adalah array dari menu object akan di mapping menjadi DOM tree. Untuk mengetahu tag svelte dan penggunaan bisa lihat - lihat dokumentasi svelte

      --> Hasil akhir

      Mission

      1. Menutup semua menu yang terbuka, jika klik di luar menu
      2. Menutup menu yang terbuka, jika menu lain di klik

      Membuat Svelte Component

      Satu yang special dari svelte tag adalah <svelte:self/> dimana ini representatif dari component itu sendiri ini mirip dengan fungsi rekursif.

      <script>
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	
      </script>
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div >
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      

      Menambah Transisi

      Transisi pada svelte tidak bisa ditaruh pada tag spesial svelte seperti <svelte:self/> oleh karena itu saya menaruhnya kedalam tag div dan transisi akan hanya bisa berjalan saat element di hapus atau di tambah, bisa menggunakan logic block else-if. Transisi yang saya gunakan adalah slide yaitu membuat seolah muncul dari atas ke bawah

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	
      </script>
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      
      

      1. Menutup Menu

      Untuk menutup menu ketika melakukan klik di luar submenu saya medengarkan klik pada body element menggunakan tag spesial dari svelte <svelte:body />. kemudian menggunakan event modifier yaitu capture , hal ini dilakukan agar fungsi handleOutsde dipanggil sebelum sebuah menu di tekan (menu tertutup dulu baru menu lain yang ditekan muncul submenunya). untuk detailnya mengenai lihat https://javascript.info/bubbling-and-capturing

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	
              export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function toggle(index, status) {
      		visible[index] = status
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      	function handleOutsde (event) {
      		visible = (new Array(menu.length)).fill(false);
      	}
      	
      </script>
      <svelte:body on:click|capture={handleOutsde} />
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      		<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      			<svelte:self menu={item.children}  />
      		</div>
      	    {/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      

      2. Menutup Menu lainnya

      Untuk menutup menu lainnya hal pertama yang harus di pikirkan adalah bagaimana agar menu parent tetap terbuka walaupun submenu di klik ini karena fungis sebelumnya handleOutsde menutup semua menu dengan melabeli menu telah tertutup, untuk mengatasi itu kita perlu memberi tahu parent element bahwa ada child sedang dalam keadaan terbuka untuk itu perlu dibuat sebuah custom event dimana nanti akan medispatch "memanggil fungsi di parent" memberitahu bahwa submenu telah di klik.

      <script>
      	import { slide } from 'svelte/transition';
      	import { quintOut } from 'svelte/easing';
      	import { createEventDispatcher } from 'svelte';
      
      	const dispatch = createEventDispatcher();
      	
      	export let position = null;
        export let menu = [];
      	export let visible = (new Array(menu.length)).fill(false);
      	
      	function doToggle(pos, status) {
      		dispatch('open', {pos, status})
      	}
      	
      	function toggle(index, status) {
      		doToggle(position, true)
      		visible[index] = status
      	}
      	
      	function handleOpen(event) {
      		toggle(event.detail.pos, event.detail.status);
      	}
      
      	function handleClick (index) {
      		return (e) => {
      			toggle(index, !visible[index])
      		}
      	}
      
      	function handleOutsde (event) {
      		visible = (new Array(menu.length)).fill(false);
      	}
      	
      </script>
      <svelte:body on:click|capture={handleOutsde} />
      <ul>
        {#each menu as item, index }
          {#if item.children}
              <li>
                  <div on:click|stopPropagation={handleClick(index)} >{item.name}</div>
                  {#if visible[index]}
      							<div  transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
      								<svelte:self position={index} menu={item.children} on:open={handleOpen} />
      							</div>
      						{/if}
              </li>
          {:else}
              <li>{item.name}</li>
          {/if}
        {/each}
      </ul>
      
      posted in Front End
    • Ayo kenalin dirimu!

      @natserract kalau saya malah enggak suka pedas

      posted in Diskusi Umum