• @Kadek-Darmayasa dan @recovdot halo selamat datang di forum BaliJS. Jgn lupa join Telegram grup kita jg yah

    posted in Diskusi Umum
  • 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
  • @krismaputra halo bli, selamat datang. Ditunggu kontribusi nya di komunitas BaliJS πŸ™ πŸ™

    posted in Diskusi Umum
  • Seputar Frontend

    • Mempelajari React Hooks lebih dalam, sebuah module pembelajaran React Hooks ditulis dengan Bahasa Indonesia -- React Hooks Deep Dive

    Seputar Backend

    • Packing Nodejs dalam sebagai Single Binary -- Boxed Node

    Seputar Tutorial

    posted in Newsletter
  • @mahend_ halo2 Mahend πŸ™ selamat datang, silakan kalo mau bertanya2 atau sharing di forum BaliJS πŸ™ πŸ™

    posted in Diskusi Umum
  • @natserract wah baru tau ternyata jsdoc disupport vscode, bisa meningkatkan developer experiencenya nih

    posted in Front End
  • @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
  • 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

    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 ganteng@server:/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
  • @pandemuliada thanks Pande!

    posted in Newsletter
  • @wayanjimmy Uhhh nice bli

    posted in Newsletter