{"id":3602,"date":"2023-03-21T06:20:36","date_gmt":"2023-03-21T06:20:36","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=3602"},"modified":"2023-05-24T10:06:51","modified_gmt":"2023-05-24T10:06:51","slug":"ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/","title":{"rendered":"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9"},"content":{"rendered":"\n<p>Wahalo, setelah sekian lama tidak update artikel, sebentar lagi saya akan merilis beberapa artikel tentang tutorial backend laravel dan bagaimana cara backend dapat diakses di Flutter. Kita akan mencoba membuat aplikasi flutter RESTful API menggunakan laravel dengan authentikasi menggunakan sanctum. Guard bawaan dari laravel ini lebih ringan dan lebih mudah diterapkan dibandingkan menggunakan passport. Kita juga akan belajar mengonsumsi REST API ke flutter.&nbsp; Tapi sebelum itu, Saya buat artikel ini untuk overview apa saja dan bagaimana saya membuat aplikasi flutter yang dapat terhubung ke backend menggunakan API.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-laravel-simpleapi\">Laravel SimpleAPI<\/h2>\n\n\n\n<p>SimpleAPI adalah nama project untuk <em>backend<\/em>-nya. Struktur database <em>basically <\/em>seperti ini:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/db-table-structure-simpleapi-1.png\" alt=\"\" class=\"wp-image-3607\" width=\"400\" height=\"506\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/db-table-structure-simpleapi-1.png 555w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/db-table-structure-simpleapi-1-237x300.png 237w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/db-table-structure-simpleapi-1-360x456.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/db-table-structure-simpleapi-1-545x690.png 545w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n<\/div>\n\n\n<p>Ada tiga tabel dengan nama categories, users, dan transactions. Semua tabel ini tidak dibuat secara manual tetapi dengan menggunakan laravel migration. Termasuk membuat foreign key. Di gambar, untuk mengetahui foreign key yang mana yaitu yang terdapat bullet point diamond yang berwarna pink.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"554\" height=\"673\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_002.png\" alt=\"mysql workbench preview foreign key\" class=\"wp-image-3622\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_002.png 554w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_002-247x300.png 247w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_002-360x437.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_002-545x662.png 545w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><figcaption class=\"wp-element-caption\">user_id merupakan foreign key yang menghubungkan tabel users melalui kolom id. Membuat semacam relationship. Kamu bisa pelajari relationship table untuk lebih jelasnya.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Selain itu ada tabel personal_access_token, tabel untuk <em>authentication stuff<\/em>. <em>I will explain it briefly what is authentication<\/em>. Adalah sebuah cara untuk mengidentifikasi pengguna dan memverifikasi hak yang dimilki oleh pengguna tersebut. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"968\" height=\"610\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009.png\" alt=\"personal access token authentikasi laravel dengan sanctum\" class=\"wp-image-3618\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009.png 968w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009-300x189.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009-768x484.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009-360x227.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_009-545x343.png 545w\" sizes=\"(max-width: 968px) 100vw, 968px\" \/><\/figure>\n\n\n\n<p>Verifikasi menggunakan token adalah salah satu cara untuk authentication. Dan semua keperluan verifikasi itu disimpan secara aman di dalam database melalui tabel access_token.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Di Projek laravel ini, umumnya saya belajar bagaimana caranya membuat<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CRUD API, kalau diibaratkan, backend adalah koki, API adalah pelayan yang akan menyediakan sajian ke konsumen, dimana konsumen kali ini adalah aplikasi flutter.<\/li>\n\n\n\n<li>Membuat autentikasi menggunakan sanctum. Authentication Sanctum ini akan membatasi akses API dan database pada user tertentu. Kita akan membuat sistem register dan login yang lebih aman menggunakan dependency santum.<\/li>\n\n\n\n<li>Cara Upload dan Replace file di laravel, file berupa gambar pertama kali diambil dari aplikasi flutter kemudian disimpan di database mysql yang suatu waktu dapat dikirim lagi ke flutter untuk ditampilkan.<\/li>\n\n\n\n<li>Explore fitur laravel seperti custom validation request, laravel global scope,&nbsp; laravel Resource, API versioning, etc.<\/li>\n\n\n\n<li>Connect server lokal ke bluestack emulator. Ya, saya serve laravel server di PC, namun aplikasi diinstall di bluestack.<\/li>\n<\/ol>\n\n\n\n<p>Untuk struktur direktori laravel, diluar dari struktur bawaan laravel, file yang saya tambah atau modif sebagian besar dapat terlihat di gambar ini:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"431\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1024x431.png\" alt=\"Simple Laravel Api Directory Structure\" class=\"wp-image-3627\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1024x431.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-300x126.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-768x324.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1536x647.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-360x152.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-545x230.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1600x674.png 1600w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image.png 1863w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Selain file dan direktori diatas, saya juga memodifikasi file api.php. File yang sangat krusial sekali. Kenapa sangat krusial? <em>Jelaslah<\/em>, kan buat handle API ya di api.php.<\/p>\n\n\n\n<p>API berfungsi sebagai penunjuk berupa routes ketika aplikasi mencoba mengakses atau meminta request tertentu, tergantung rute API yang mana yang akan aplikasi eksekusi, akan menentukan metode di controller mana yang akan menangani requestmu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"250\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-1024x250.png\" alt=\"cara melihat list api di laravel 9\" class=\"wp-image-3616\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-1024x250.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-300x73.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-768x188.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-1536x375.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-360x88.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-545x133.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007-1600x391.png 1600w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_007.png 1855w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">List route backend, dengan jalankan php artisan route:list kamu bisa lihat endpoint API yang digenerate dari api.php. Kamu bisa lihat gambar dibawah, untuk yang perlu authentication, aku wrap dengan Laravel Sanctum.<\/figcaption><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"796\" height=\"650\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004.png\" alt=\"bahasa indonesia, tutorial implementasi autentikasi menggunakan guard sanctum di laravel\" class=\"wp-image-3624\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004.png 796w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004-300x245.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004-768x627.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004-360x294.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image_004-545x445.png 545w\" sizes=\"(max-width: 796px) 100vw, 796px\" \/><\/figure>\n<\/div>\n\n\n<p>Kita kenalan dulu, di laravel menggunakan konsep MVC model-view-controller:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Model adalah representasi dari data. Model secara langsung berinteraksi dengan database.<\/li>\n\n\n\n<li>Controller adalah bagian yang bertanggung jawab untuk mengontrol logika aplikasi<\/li>\n\n\n\n<li>view adalah untuk membaca dan menampilkan data, view akan dihandle oleh widget flutter framework. Laravel hanya menyediakan data JSON sebagai cara aplikasi dan server saling bertukar data.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-1024x618.png\" alt=\"tampilan data JSON get categories flutter restful api\" class=\"wp-image-3630\" width=\"840\" height=\"506\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-1024x618.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-300x181.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-768x464.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-360x217.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1-545x329.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-1.png 1401w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><figcaption class=\"wp-element-caption\">Sebuah contoh format data json, terlihat di dalam kotak response body terlihat seperti array data. Selain itu, kamu bisa lihat ada tulisan status 200. <em>Well<\/em>, angka itu bukan hanya sekedar pajangan, status berkolerasi erat dengan output dari response body yang akan data tampilkan. <\/figcaption><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-1024x471.png\" alt=\"Korelasi JSON Status dan Json body\" class=\"wp-image-3631\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-1024x471.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-300x138.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-768x353.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-360x166.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2-545x251.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-2.png 1361w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Selanjutnya kita kenalan sekilas dengan fitur lain yang terdapat di laravel:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Di dalam direktori API ada AuthController, CategoryController, TransactionController, dan UserController. Kenapa saya taruh di direktori API (which direktorinya saya buat pula menggunakan command laravel). Agar ada <em>separation layer<\/em>&nbsp; saja mana yang controller untuk handle API dan controller mana yang handle web jika dibutuhkan.<\/li>\n\n\n\n<li>Di dalam direktori Request,&nbsp; ini digunakan untuk &#8220;rules&#8221; request data seperti apa yang akan diterima API sebelum diteruskan ke Controller.<\/li>\n\n\n\n<li>Resources adalah response seperti apa&nbsp; yang akan diterima User.<\/li>\n\n\n\n<li>File dalam Models\/Scopes untuk memberikan aturan global tampilan kueri data.&nbsp; Fungsinya adalah reusabilitas dan penyederhanaan kode. Misal kamu ingin kueri list kategori yang ditampilkan adalah selalu kategori yang dibuat oleh user x. Maka buat saja global scopes.<\/li>\n<\/ol>\n\n\n\n<p>Untuk testing API, saya menggunakan <a href=\"http:\/\/hoppscotch.io\">hoppscotch.io<\/a>, layoutnya mirip seperti Postman.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"418\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-1024x418.png\" alt=\"membuat uji testing api untuk post request laravel. Output ini terdapat method get, dan json data untuk flutter restful api.\" class=\"wp-image-3632\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-1024x418.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-300x122.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-768x313.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-1536x626.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-360x147.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-545x222.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3-1600x653.png 1600w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/image-3.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">WorkAround Flutter RESTFul API dengan Laravel dan Sanctum Auth:&nbsp; SimpleNako<\/h2>\n\n\n\n<p>Sedangkan di aplikasi mobile, saya menggunakan versi flutter stabil versi terbaru, 3.7. FYI, Kode di flutter ini cukup berantakan, karena saat mengerjakan saya selalu kepikiran ide yang aneh. misalnya, saja:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>daripada single delete, tiba-tiba saya ingin menerapkan multiple delete transactions.<\/li>\n\n\n\n<li>saya ngide menggabungkan login dan register di satu screen.<\/li>\n\n\n\n<li>Saya ingin menambahkan update profile dengan foto profile.<\/li>\n\n\n\n<li>Oh saya ingin ketika menghapus kategori yang mana semua foreign key yang mereferensikan ke tabel karegori akan dirubah menjadi null :P.<\/li>\n\n\n\n<li>Saya ingin ada bermacam cara untuk update parent widget if there are data changes happen in child widget, entah pakai listener, atau pakai provider state management????<\/li>\n\n\n\n<li>Saya ingin shared preference yang bisa menyimpan objek????<\/li>\n<\/ul>\n\n\n\n<p>Sengaja saya banyakin eksperimen karena nanti bisa jadi referensi belajar, cukup baca kodingan di aplikasi ini. Kalau kamu ingin tahu cara install flutter dan<a href=\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\"> tool untuk first start<\/a> flutter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur kode aplikasi.<\/h3>\n\n\n\n<p>Untuk package yang saya pakai dan konfigurasi flutter saya bisa dilihat di pubspec.yaml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">name: simplenako Kalau \ndescription: learn flutter laravel implementation\n\n# The following line prevents the package from being accidentally published to\n# pub.dev using `flutter pub publish`. This is preferred for private packages.\npublish_to: 'none' # Remove this line if you wish to publish to pub.dev\nversion: 1.0.0+1\n\nenvironment:\n  sdk: '>=2.18.6 &lt;3.0.0'\n\ndependencies:\n  flutter:\n    sdk: flutter\n\n  google_fonts: ^4.0.3\n  cupertino_icons: ^1.0.5\n\n  nb_utils: ^5.0.6\n  intl: ^0.18.0\n  device_info_plus: ^8.1.0\n\n  # Common\n  share_plus: ^6.3.1\n  url_launcher: ^6.1.10\n  http: ^0.13.5\n  html: ^0.15.2\n  shared_preferences: ^2.0.18\n  provider: ^6.0.5\n\n  # IMAGE\n  cached_network_image: ^3.2.3\n  image_picker: ^0.8.7\n  file_picker: ^5.2.6\n  photo_view: ^0.14.0\n  card_swiper: ^2.0.4\n  # For svg image\n  flutter_svg: ^2.0.4\n\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n\n  # The \"flutter_lints\" package below contains a set of recommended lints to\n  # encourage good coding practices. The lint set provided by the package is\n  # activated in the `analysis_options.yaml` file located at the root of your\n  # package. See that file for information about deactivating specific lint\n  # rules and activating additional ones.\n  flutter_lints: ^2.0.1\n\n\n# For information on the generic Dart part of this file, see the\n# following page: https:\/\/dart.dev\/tools\/pub\/pubspec\n\n# The following section is specific to Flutter packages.\nflutter:\n\n  # The following line ensures that the Material Icons font is\n  # included with your application, so that you can use the icons in\n  # the material Icons class.\n  uses-material-design: true\n\n  # To add assets to your application, add an assets section, like this:\n  assets:\n    - assets\/images\/\n    - assets\/svg\/\n\n  # To add custom fonts to your application, add a fonts section here,\n  # in this \"flutter\" section. Each entry in this list should have a\n  # \"family\" key with the font family name, and a \"fonts\" key with a\n  # list giving the asset and other descriptors for the font. For\n  # example:\n  # fonts:\n  #   - family: Schyler\n  #     fonts:\n  #       - asset: fonts\/Schyler-Regular.ttf\n  #       - asset: fonts\/Schyler-Italic.ttf\n  #         style: italic\n  #   - family: Trajan Pro\n  #     fonts:\n  #       - asset: fonts\/TrajanPro.ttf\n  #       - asset: fonts\/TrajanPro_Bold.ttf\n  #         weight: 700\n  #\n  # For details regarding fonts from package dependencies,\n  # see https:\/\/flutter.dev\/custom-fonts\/#from-packages<\/pre>\n\n\n\n<p>Saya jelaskan package third party mulai dari nb_utils.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nb_utils itu package multiguna yang menyediakan premade widget serta method.<\/li>\n\n\n\n<li>intl digunakan untuk konversi waktu<\/li>\n\n\n\n<li>device_info_plus digunakan untuk mendapatkan device info yang digunakan untuk generate access token (penting untuk authentication)<\/li>\n\n\n\n<li>shared_preferences digunakan untuk menyimpan data secara persisten ke cache memory, tujuannya saat aplikasi ditutup kemudian dibuka, nilai data yang disimpan dalam sharedpreferences akan selalu sama sampai kita mengubah data tersebut.<\/li>\n\n\n\n<li>provider adalah salah satu package untuk memanajemen state widget. Jika kamu punya kondisi dimana nilai sesuatu adalah global atau single source of truth, gunakan state management<\/li>\n\n\n\n<li>http untuk komunikasi dengan server, package ini hanya diimplementasi di repository.<\/li>\n<\/ul>\n\n\n\n<p>Untuk menambahkan akses direktori,&nbsp; kamu perlu tambahkan deklarasi assets.<\/p>\n\n\n\n<p>&nbsp; assets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; assets\/images\/<\/li>\n\n\n\n<li>&#8211; assets\/svg<\/li>\n<\/ul>\n\n\n\n<p>untuk assets ada file svg karena saya iseng gimana penerapan SVG files di flutter, apakah sama seperti kelola gambar? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur kode Flutter<\/h2>\n\n\n\n<p>Saya menggunakan provider pattern, separation concern yang saya terapkan adalah Model-Provider-Repository. Dimana model adalah representasi dari data yang diterima dari response server, presentation adalah view data dan tampilan antarmuka. Provider untuk manajemen state dan mengatur implementasi <em>single source truth antar UI serta listening data changes<\/em>.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"683\" height=\"454\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui.png\" alt=\"struktur arsitektur provider pattern flutter\" class=\"wp-image-3621\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui.png 683w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-300x199.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-360x239.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-545x362.png 545w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><figcaption class=\"wp-element-caption\">Saya kelompokkan dalam direktori berdasarkan data model (category, profile, dll). Namun juga declutter ui berdasarkan fungsi screen (update transaction screen, login, register, dll).<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"549\" height=\"545\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2.png\" alt=\"flutter structure code model and ui\" class=\"wp-image-3620\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2.png 549w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2-300x298.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2-150x150.png 150w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2-360x357.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-structure-code-model-and-ui-2-545x541.png 545w\" sizes=\"(max-width: 549px) 100vw, 549px\" \/><\/figure>\n<\/div>\n\n\n<p>Kemudian untuk services, bagian yang mengatur logic dan kirim dan terima data dari server. Repository adalah bagian yang mengonsumsi API.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"659\" height=\"262\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/services-example-1.png\" alt=\"\" class=\"wp-image-3633\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/services-example-1.png 659w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/services-example-1-300x119.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/services-example-1-360x143.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/services-example-1-545x217.png 545w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><figcaption class=\"wp-element-caption\">Terlihat di gambar, bahkan provider&nbsp; dan repository pun saya pisahkan berdasarkan reponsibility terhadap model data.<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Implementasi layout flutter dan router beserta provider, di inisialisasi di main.dart<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Future&lt;void> main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  bool isLogin =\n      await PrefStorageManager.readData(SharedPrefConstant.isLoggedIn) ?? false;\n  await PrefStorageManager.saveData(SharedPrefConstant.isLoggedIn, isLogin);\n  runApp(MyApp(isLogin: isLogin));\n}\n\nclass MyApp extends StatelessWidget {\n  final bool isLogin;\n  const MyApp({\n    super.key,\n    required this.isLogin,\n  });\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MultiProvider(\n      providers: [\n        ChangeNotifierProvider(create: (_) => AuthProvider()),\n        ChangeNotifierProvider(create: (_) => UserProfileProvider()),\n        ChangeNotifierProvider(create: (_) => TransactionProvider()),\n        ChangeNotifierProvider(create: (_) => CategoryProvider()),\n      ],\n      child: MaterialApp(\n        debugShowCheckedModeBanner: false,\n        title: 'Simple Laravel Demo',\n        theme: AppThemeData.appThemeData,\n        home: isLogin ? DashboardPage() : AuthPage(),\n        routes: PageRoutes().routes(),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n<p>providers diinisialisasi di awal, dengan ChangeNotifierProvider, sebagai listener ke widget jika ada perubahan value. Dengan inisialisasi di awal, berarti akses global state berlaku diseluruh widget di bawah main.dart.<\/p>\n\n\n<div class=\"boombox-responsive-embed \"><iframe title=\"Demo Flutter 3.10 with Laravel 9 API, Bluestack Emulator\" width=\"1160\" height=\"653\" src=\"https:\/\/www.youtube.com\/embed\/uXbpc7DRmKQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n\n\n<p>Stay update, untuk tutorial Flutter RestFul API dengan Laravel deep dive, hanya di Nako Blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wahalo, setelah sekian lama tidak update artikel, sebentar lagi saya akan merilis beberapa artikel tentang tutorial backend laravel dan bagaimana cara backend dapat diakses di Flutter. Kita akan mencoba membuat aplikasi flutter RESTful API menggunakan laravel dengan authentikasi menggunakan sanctum. Guard bawaan dari laravel ini lebih ringan dan lebih mudah diterapkan dibandingkan menggunakan passport. Kita&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254,728],"tags":[255,3896,3897],"class_list":["post-3602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","category-software-development","tag-flutter","tag-ngoding-iseng","tag-restful"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.8 (Yoast SEO v23.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Koding Flutter RESTful API dengan laravel dan auth sanctum<\/title>\n<meta name=\"description\" content=\"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter &amp; Provider\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9\" \/>\n<meta property=\"og:description\" content=\"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter &amp; Provider\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T06:20:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-24T10:06:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"nakomin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nakomin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9\",\"datePublished\":\"2023-03-21T06:20:36+00:00\",\"dateModified\":\"2023-05-24T10:06:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\"},\"wordCount\":1197,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg\",\"keywords\":[\"flutter\",\"ngoding iseng\",\"restful\"],\"articleSection\":[\"Mobile Development\",\"Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\",\"name\":\"Koding Flutter RESTful API dengan laravel dan auth sanctum\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg\",\"datePublished\":\"2023-03-21T06:20:36+00:00\",\"dateModified\":\"2023-05-24T10:06:51+00:00\",\"description\":\"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter & Provider\",\"breadcrumb\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"demo menghubungkan aplikasi flutter dan laravel backend. flutter restful api\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sunaonako.my.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sunaonako.my.id\/#website\",\"url\":\"https:\/\/sunaonako.my.id\/\",\"name\":\"Hilarious Developer School\",\"description\":\"Catatan Developer tentang Kurikulum Dunia Modern\",\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sunaonako.my.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\",\"name\":\"nakomin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"contentUrl\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"width\":\"250\",\"height\":\"250\",\"caption\":\"nakomin\"},\"logo\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\"},\"description\":\"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever\",\"sameAs\":[\"https:\/\/sunaonako.my.id\"],\"url\":\"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Koding Flutter RESTful API dengan laravel dan auth sanctum","description":"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter & Provider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/","og_locale":"en_US","og_type":"article","og_title":"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9","og_description":"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter & Provider","og_url":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/","og_site_name":"Hilarious Developer School","article_published_time":"2023-03-21T06:20:36+00:00","article_modified_time":"2023-05-24T10:06:51+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg","type":"image\/jpeg"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9","datePublished":"2023-03-21T06:20:36+00:00","dateModified":"2023-05-24T10:06:51+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/"},"wordCount":1197,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg","keywords":["flutter","ngoding iseng","restful"],"articleSection":["Mobile Development","Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/","url":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/","name":"Koding Flutter RESTful API dengan laravel dan auth sanctum","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg","datePublished":"2023-03-21T06:20:36+00:00","dateModified":"2023-05-24T10:06:51+00:00","description":"Implementasi Flutter 3 RESTful API dengan autentikasi sanctum di Laravel 9. Belajar laravel backend dan konsumsi API di Flutter & Provider","breadcrumb":{"@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/03\/flutter-demo.jpg","width":1920,"height":1080,"caption":"demo menghubungkan aplikasi flutter dan laravel backend. flutter restful api"},{"@type":"BreadcrumbList","@id":"https:\/\/sunaonako.my.id\/blog\/ngoding-iseng-implementasi-flutter-3-dengan-backend-laravel-9-restful-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sunaonako.my.id\/"},{"@type":"ListItem","position":2,"name":"Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9"}]},{"@type":"WebSite","@id":"https:\/\/sunaonako.my.id\/#website","url":"https:\/\/sunaonako.my.id\/","name":"Hilarious Developer School","description":"Catatan Developer tentang Kurikulum Dunia Modern","publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunaonako.my.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a","name":"nakomin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/","url":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","contentUrl":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","width":"250","height":"250","caption":"nakomin"},"logo":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/"},"description":"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever","sameAs":["https:\/\/sunaonako.my.id"],"url":"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/"}]}},"_links":{"self":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/comments?post=3602"}],"version-history":[{"count":31,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3602\/revisions"}],"predecessor-version":[{"id":3755,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3602\/revisions\/3755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/3636"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=3602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=3602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=3602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}