[{"data":1,"prerenderedAt":523},["ShallowReactive",2],{"blog-mock-apis-dengan-mockoon":3},{"id":4,"title":5,"body":6,"date":513,"description":514,"extension":515,"meta":516,"navigation":247,"path":517,"seo":518,"stem":519,"tags":520,"__hash__":522},"blog\u002Fblog\u002Fmock-apis-dengan-mockoon.md","Mock APIs dengan Mockoon",{"type":7,"value":8,"toc":507},"minimark",[9,63,66,71,90,122,126,137,165,178,182,185,193,200,207,214,220,227,230,296,381,429,487,491,494,500,503],[10,11,12,13,17,18,21,22,25,26,29,30,33,34,37,38,29,41,44,45,37,48,51,52,54,55,58,59,62],"p",{},"Bicara tentang ",[14,15,16],"em",{},"Microservices"," mungkin terpikirkan sesuatu yang disebut ",[14,19,20],{},"Agile"," dimana kita dapat mengerjakan ",[14,23,24],{},"task"," secara paralel atau bersamaan tanpa harus menunggu yang lain. Dalam pengembangan biasanya memisahkan antara ",[14,27,28],{},"backend"," dan ",[14,31,32],{},"frontend",", akan terhubung dengan ",[14,35,36],{},"APIs",". ",[14,39,40],{},"Backend",[14,42,43],{},"Frontend"," dapat bekerja secara serentak tanpa harus menunggu satu sama lain dengan cara membuat ",[14,46,47],{},"API Spec",[14,49,50],{},"Framework"," ",[14,53,32],{}," seperti ",[14,56,57],{},"React"," tidak memiliki akses server sehingga kita perlu menggunakan ",[14,60,61],{},"Mock API server",".",[10,64,65],{},"Mockoon adalah salah satu yang akan kita bahas karena \"No remote deployment, no account required, free and open-source\".",[67,68,70],"h2",{"id":69},"install-mockoon","Install Mockoon",[10,72,73,74,77,78,85,86,89],{},"Saya akan menggunakan GUI, kita bisa meng-",[14,75,76],{},"installnya"," di ",[79,80,84],"a",{"href":81,"rel":82},"https:\u002F\u002Fmockoon.com\u002Fdownload\u002F",[83],"nofollow","Mockoon",". Karena saya menggunakan ",[14,87,88],{},"Snap"," sehingga hanya perlu memasukkan perintah",[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-bash shiki shiki-themes github-light github-dark","$ sudo snap install mockoon\n","bash","",[98,99,100],"code",{"__ignoreMap":96},[101,102,105,109,113,116,119],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"sScJk","$",[101,110,112],{"class":111},"sZZnC"," sudo",[101,114,115],{"class":111}," snap",[101,117,118],{"class":111}," install",[101,120,121],{"class":111}," mockoon\n",[67,123,125],{"id":124},"mock-api-request","Mock API Request",[10,127,128,129,132,133,136],{},"Kita hanya perlu klik ",[14,130,131],{},"new environment"," dan mengetikkan nama. Data akan tersimpan pada ",[14,134,135],{},"default"," folder Mockoon.",[138,139,140,147,153,159],"ul",{},[141,142,143,144],"li",{},"Windows: ",[98,145,146],{},"c:\u002FUsers\u002Fxxx\u002FAppData\u002FRoaming\u002Fmockoon\u002Fstorage",[141,148,149,150],{},"Linux: ",[98,151,152],{},"~\u002F.config\u002Fmockoon\u002Fstorage",[141,154,155,156],{},"Snap: ",[98,157,158],{},"~\u002Fsnap\u002Fmockoon\u002F26\u002F.config\u002Fmockoon\u002Fstorage",[141,160,161,162],{},"Mac: ",[98,163,164],{},"~\u002FLibrary\u002FApplication Support\u002Fmockoon\u002Fstorage",[10,166,167,168,171,172,177],{},"Selanjutnya menambah HTTP Route baru mengisikan ",[14,169,170],{},"path"," nya dan mulai menulis response di body nya dalam bentuk JSON. Kita bisa mengganti HTTP Status untuk simulasi ketika ada error dan sebagainya. Penggunaan yang sederhana bisa kita pelajari dalam 5 menit. ",[79,173,176],{"href":174,"rel":175},"https:\u002F\u002Fmockoon.com\u002Ftutorials\u002Fgetting-started\u002F",[83],"Getting Started",". Di sini kita akan melihat fitur menarik.",[67,179,181],{"id":180},"setting-up-rules","Setting up Rules",[10,183,184],{},"Ayo kita simulasikan Login dengan username dan password, jika benar akan mengembalikan HTTP Status 200 dan jika salah maka nilai berkurang.",[91,186,191],{"className":187,"code":189,"language":190},[188],"language-text","username: root\npassword: 123\n","text",[98,192,189],{"__ignoreMap":96},[10,194,195,196,199],{},"Kita buat HTTP Route baru dengan url ",[98,197,198],{},"\u002Fauth\u002Flogin",". Status di isi dengan 200 - OK dan body sederana menampilkan pesan sukses.",[10,201,202,203,206],{},"Setelah itu klik tombol tambah berwarna biru di sebelah ",[98,204,205],{},"Response 1 (200)",". Pada response selanjutnya kita isikan HTTP Status 401 - Unauthorized dengan body menampilkan username atau password salah.",[10,208,209,210,213],{},"Kita masuk ke tab ",[98,211,212],{},"Rules [2]"," lalu menuliskan Rules:",[91,215,218],{"className":216,"code":217,"language":190},[188],"username not equals root\nand\npassword not equals 123\n",[98,219,217],{"__ignoreMap":96},[10,221,222,223,226],{},"yang artinya tampilkan response ",[98,224,225],{},"401 - unauthorized"," ketika username bukan root dan password bukan 123.",[10,228,229],{},"Saya akan menggunakan extention vscode: Rest Client.",[91,231,235],{"className":232,"code":233,"language":234,"meta":96,"style":96},"language-http shiki shiki-themes github-light github-dark","# Testing dengan username dan password yang benar\n\nPOST http:\u002F\u002Flocalhost:3001\u002Fauth\u002Flogin HTTP\u002F1.1\nContent-Type: application\u002Fjson\nAccept: application\u002Fjson\n\n{\n  \"username\": \"root\",\n  \"password\": \"123\"\n}\n","http",[98,236,237,242,249,255,261,267,272,278,284,290],{"__ignoreMap":96},[101,238,239],{"class":103,"line":104},[101,240,241],{},"# Testing dengan username dan password yang benar\n",[101,243,245],{"class":103,"line":244},2,[101,246,248],{"emptyLinePlaceholder":247},true,"\n",[101,250,252],{"class":103,"line":251},3,[101,253,254],{},"POST http:\u002F\u002Flocalhost:3001\u002Fauth\u002Flogin HTTP\u002F1.1\n",[101,256,258],{"class":103,"line":257},4,[101,259,260],{},"Content-Type: application\u002Fjson\n",[101,262,264],{"class":103,"line":263},5,[101,265,266],{},"Accept: application\u002Fjson\n",[101,268,270],{"class":103,"line":269},6,[101,271,248],{"emptyLinePlaceholder":247},[101,273,275],{"class":103,"line":274},7,[101,276,277],{},"{\n",[101,279,281],{"class":103,"line":280},8,[101,282,283],{},"  \"username\": \"root\",\n",[101,285,287],{"class":103,"line":286},9,[101,288,289],{},"  \"password\": \"123\"\n",[101,291,293],{"class":103,"line":292},10,[101,294,295],{},"}\n",[91,297,299],{"className":232,"code":298,"language":234,"meta":96,"style":96},"# Response yang didapat\n\nHTTP\u002F1.1 200 OK\nContent-Type: application\u002Fjson\nContent-Length: 94\nDate: Wed, 07 Jun 2023 16:40:25 GMT\nConnection: close\n\n\n{\n  \"success\": true,\n  \"message\": \"Login Successful\",\n  \"data\": {\n    \"username\": \"Root\",\n  }\n}\n",[98,300,301,306,310,315,319,324,329,334,338,342,346,352,358,364,370,376],{"__ignoreMap":96},[101,302,303],{"class":103,"line":104},[101,304,305],{},"# Response yang didapat\n",[101,307,308],{"class":103,"line":244},[101,309,248],{"emptyLinePlaceholder":247},[101,311,312],{"class":103,"line":251},[101,313,314],{},"HTTP\u002F1.1 200 OK\n",[101,316,317],{"class":103,"line":257},[101,318,260],{},[101,320,321],{"class":103,"line":263},[101,322,323],{},"Content-Length: 94\n",[101,325,326],{"class":103,"line":269},[101,327,328],{},"Date: Wed, 07 Jun 2023 16:40:25 GMT\n",[101,330,331],{"class":103,"line":274},[101,332,333],{},"Connection: close\n",[101,335,336],{"class":103,"line":280},[101,337,248],{"emptyLinePlaceholder":247},[101,339,340],{"class":103,"line":286},[101,341,248],{"emptyLinePlaceholder":247},[101,343,344],{"class":103,"line":292},[101,345,277],{},[101,347,349],{"class":103,"line":348},11,[101,350,351],{},"  \"success\": true,\n",[101,353,355],{"class":103,"line":354},12,[101,356,357],{},"  \"message\": \"Login Successful\",\n",[101,359,361],{"class":103,"line":360},13,[101,362,363],{},"  \"data\": {\n",[101,365,367],{"class":103,"line":366},14,[101,368,369],{},"    \"username\": \"Root\",\n",[101,371,373],{"class":103,"line":372},15,[101,374,375],{},"  }\n",[101,377,379],{"class":103,"line":378},16,[101,380,295],{},[91,382,384],{"className":232,"code":383,"language":234,"meta":96,"style":96},"# Testing 401\n\nPOST http:\u002F\u002Flocalhost:3001\u002Fauth\u002Flogin HTTP\u002F1.1\nContent-Type: application\u002Fjson\nAccept: application\u002Fjson\n\n{\n  \"username\": \"salah\",\n  \"password\": \"salah\"\n}\n",[98,385,386,391,395,399,403,407,411,415,420,425],{"__ignoreMap":96},[101,387,388],{"class":103,"line":104},[101,389,390],{},"# Testing 401\n",[101,392,393],{"class":103,"line":244},[101,394,248],{"emptyLinePlaceholder":247},[101,396,397],{"class":103,"line":251},[101,398,254],{},[101,400,401],{"class":103,"line":257},[101,402,260],{},[101,404,405],{"class":103,"line":263},[101,406,266],{},[101,408,409],{"class":103,"line":269},[101,410,248],{"emptyLinePlaceholder":247},[101,412,413],{"class":103,"line":274},[101,414,277],{},[101,416,417],{"class":103,"line":280},[101,418,419],{},"  \"username\": \"salah\",\n",[101,421,422],{"class":103,"line":286},[101,423,424],{},"  \"password\": \"salah\"\n",[101,426,427],{"class":103,"line":292},[101,428,295],{},[91,430,432],{"className":232,"code":431,"language":234,"meta":96,"style":96},"# Response yang didapat\n\nHTTP\u002F1.1 401 Unauthorized\nContent-Type: application\u002Fjson\nContent-Length: 69\nDate: Wed, 07 Jun 2023 17:00:09 GMT\nConnection: close\n\n{\n  \"success\": false,\n  \"message\": \"Username or Password is wrong\",\n}\n",[98,433,434,438,442,447,451,456,461,465,469,473,478,483],{"__ignoreMap":96},[101,435,436],{"class":103,"line":104},[101,437,305],{},[101,439,440],{"class":103,"line":244},[101,441,248],{"emptyLinePlaceholder":247},[101,443,444],{"class":103,"line":251},[101,445,446],{},"HTTP\u002F1.1 401 Unauthorized\n",[101,448,449],{"class":103,"line":257},[101,450,260],{},[101,452,453],{"class":103,"line":263},[101,454,455],{},"Content-Length: 69\n",[101,457,458],{"class":103,"line":269},[101,459,460],{},"Date: Wed, 07 Jun 2023 17:00:09 GMT\n",[101,462,463],{"class":103,"line":274},[101,464,333],{},[101,466,467],{"class":103,"line":280},[101,468,248],{"emptyLinePlaceholder":247},[101,470,471],{"class":103,"line":286},[101,472,277],{},[101,474,475],{"class":103,"line":292},[101,476,477],{},"  \"success\": false,\n",[101,479,480],{"class":103,"line":348},[101,481,482],{},"  \"message\": \"Username or Password is wrong\",\n",[101,484,485],{"class":103,"line":354},[101,486,295],{},[67,488,490],{"id":489},"conclusion","Conclusion",[10,492,493],{},"Mockoon salah satu Mock API yang mudah digunakan, kita tidak lagi membutuhkan API langsung dari Backend ketika sedang Develop. Kita hanya perlu membuat Mock sesuai dengan API Spec yang telah ditentukan di awal. Backend dan Frontend dapat bekerja secara bersama, dengan seperti ini proses pengembangan akan lebih cepat.",[10,495,496],{},[79,497,84],{"href":498,"rel":499},"https:\u002F\u002Fmockoon.com\u002F",[83],[10,501,502],{},"~ Ann",[504,505,506],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":96,"searchDepth":244,"depth":244,"links":508},[509,510,511,512],{"id":69,"depth":244,"text":70},{"id":124,"depth":244,"text":125},{"id":180,"depth":244,"text":181},{"id":489,"depth":244,"text":490},"2023-06-05","Menggunakan Mockoon untuk membuat mock API server agar frontend dan backend bisa dikerjakan secara paralel","md",{},"\u002Fblog\u002Fmock-apis-dengan-mockoon",{"title":5,"description":514},"blog\u002Fmock-apis-dengan-mockoon",[521],"Architecture","_O1UNKhHn1lP2Yrb0M7KWTX7pvu9h53JvdJb64b0PPM",1781958637479]