Frontend

Delete your old installation (optional)  rm -rf ~/.android-sdk-macosx/ Download  adb   Go folder download  cd Download Unzip file unzip platform-tools-latest*. zip Create and move adb mkdir ~/.android-sdk-macosx mv platform-tools/ ~/.android-sdk-macosx/platform-tools Add platform your path echo 'export PATH=$PATH:~/.android-sdk-macosx/platform-tools/' >> ~/.bash_profile Refresh your bash profile (restart terminal) source ~/.bash_profile Start adb devices adb devices

  Go to android project - cd android Create file local.properties windows  sdk.dir = C:\\Users\\USERNAME\\AppData\\Local\\Android\\sdk mac sdk.dir = /Users/USERNAME/Library/Android/sdk ubuntu sdk.dir = /home/USERNAME/Android/Sdk

Requirement:  Node 14.18.3 NPM 6.14.15 Yarn 1.22.4 yarn add @ckeditor/ckeditor5-vue@23.0.0 yarn add @blowstack/ckeditor5-full-free-build@1.0.2 // plugins/ckeditor.vue import Vue from ' vue ' import CKEditor from ' @ckeditor/ckeditor5-vue ' Vue . use ( CKEditor ) // components/CkEditor.vue < template > < ckeditor : editor = " editor " : value = " value " : config = " config " @ input = " ( event ) => $emit ( ' input ' , event) " /> </ template > < script > let FullFreeBuildEditor; let CKEditor; if (process . client ) { FullFreeBuildEditor = require ( ' @blowstack/ckeditor5-full-free-build ' ); CKEditor = require ( ' @ckeditor/ckeditor5-vue ' ); } else { CKEditor = { component: { template: ' <div></div> ' } }; } export default { name: ' CkEditor ' , components: { ckeditor: CKEditor . component , }, p...

Lodash render didalam tag <template>  Jika ingin menggunakan di dalam page (bukan global component) import _startCase from ' lodash/startCase ' <template>      {{ _startCase ('no_access') }} </template> methods: {      _startCase, } Jika ingin global template expression component {{_ . camelCase ( " vue lodash! " )}} import _ from 'lodash'; const VueLodash = { install(Vue, options) { Vue.prototype.$_ = _; Vue.mixin({ mounted() { // Just tell you that it is mounted // console.log('VueLodash'); } }); if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(VueLodash) } } }; export default VueLodash; source:  link

Function declarative function sayHello ( name ) { console . log (` My name is ${ name } `) } sayHello ( ' Ahmad ' ) Bisa diubah menjadi satu baru function const sayHello = ( name ) => console . log (` ${ name } `)  sayHello ( ' Ahmad ' ) Function ditandai dengan () akan tetap case disini bisa juga tanpa menuliskan parameter () const sayHello = name => console . log (` ${ name } `)  sayHello ( ' Ahmad ' )

Parameter dari fungsi bisa berupa tipe data apapun mulai dari string, number, boolean, array, object ataupun tipe data lainnya bahkan fungsi. function sum ( ... numbers ) { let result = 0 for ( const number of numbers) { result += number } return result } console . log ( sum ( 1 , 3 , 4 , 2 , 5 )) Jika parameter dari sebuah fungsi sebuah object kita manfaatkan destructuring object untuk mendapat nilainya. const user = { id: 24 , displayName: ' Ahmad ' , address: ' Brebes ' } function myName ( { displayName , address } ) { console . log (` ${ displayName } in ${ address } `) } myName (user) Ketika kita memasukan parameter pada fungsi maka wajib baginya ketika mereturn sesuai dengan parameter yang ada. jika tidak maka akan undefined. solusinya kita bisa menambahkan nilai parameter default function exponentsFormula ( baseNumber , exponent = 4 ) { // default value let result = baseNumber ** exponent; console . log (` ${ ba...

Tambahkan di main.ts import axios from ' axios ' const pinia = createPinia () const app = createApp (App) . use (IonicVue) . use (router) . use (pinia); const axiosInstance = axios . create ({ withCredentials: true , }) router . isReady () . then ( () => { app . component ( ' Loading ' , Loading) app . config . globalProperties . $axios = { ... axiosInstance } app . mount ( ' #app ' ); }) Tinggal pake di component  async mounted () { await this . $axios . get ( ' //jsonplaceholder.typicode.com/users ' ) }, Sebagai catatan: keyword this gak jalan di setup dan jangan taruh di dalam defineComponent gunakan export default { } biasa

 Ada 3 pembahasan dalam reusability pada vue js Composable Pada vue application "composable" itu function yang di manfaatkan oleh composition api untuk merangkum dan mengulang kembali stateful logic. Yang biasanya gini  < script setup > import { ref, onMounted, onUnmounted } from " vue " ; const y = ref ( 0 ); const x = ref ( 0 ); function update ( event ) { x . value = event . pageX ; y . value = event . pageY ; } onMounted ( () => window . addEventListener ( " mousemove " , update)); onUnmounted ( () => window . addEventListener ( " mousemove " , update)); </ script > < template > Mouse position {{ x }} , {{ y }}</ template > Ada perubahan di dalam <script> <!-- template/ component --> < script setup > import { useMouse } from " ../composable/mouse " ; const { x , y } = useMouse (); </ script > < template > Mouse position {{ x }} , {{ y }}...

Includes()  Method ini menghasilkan nilai boolean true and false. Basic syntax  arr.includes(valueToFind, [fromIndex]) const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ]; const result = kelas . includes ( " satu " );   document . getElementById ( " demo " ). innerHTML = result;   Find() Beda dengan includes() alligator.find((el, idx) => typeof el === "string" && idx === 2)   const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ]; kelas . find ((el) => el .length < 12 ); indexOf() Resultnya index const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ];   kelas . indexOf ( " lingkaran " ); kelas . lastIndexOf ( 80 ); // returns 4 kelas . indexOf ( 80 , 2 ); // returns 4 kelas . lastIndexOf ( 80 , 4 ); // returns 4 kelas . lastIndexOf ( 80 , 3 ); // returns 1   Filter() const kela...

  load () { this . $overlay ( true ) const get = ( type ) => { return this . $axios . get ( ` endpoint/ ${ type } ` ) . then ( ( response ) => { this . count [type] = response . data . data . count }) . catch ( ( err ) => { console . error (err) }) . then ( () => { return Promise . resolve () }) } Promise . all ([ get ( ' register ' ), get ( ' draft ' ), get ( ' verified ' ), get ( ' rejected ' ), ]) . then ( () => { this . $overlay ( false ) }) },