Pembahasan Soal Arkademy Batch 10 Kloter 2

Advertisements

Kali ini saya akan membahasa soal yang telah saya kerjakan saat mengikuti Arkademy Bootcamp Batch 10 Kloter 2. Pada soal yang diberikan ini akan menguji seberapa kita bisa menggunakan logika dan bisa membuat sebuah aplikasi untuk web. Soal 1 sampai 5 disuruh untuk meyelesaikan sebuah masalah yang harus di selesaikan dengan menggunakan bahasa pemerograman yang di kuasai dan untuk soal ke 6 bisa membuat aplikasi web yang nantinya diminta untuk menyertakan screenshot di file readme. Untuk saya karena terbiasa menggunakan javascript maka untuk soal 1-6 saya menggunakan javascript dan khusus untuk soal nomer 6 ini saya memakai nuxtjs dan firestore (firebase) untuk melakukan realtime data.

Untuk soal dari arkademy batch 10 kloter 2 bisa di lihat di link ini https://docs.google.com/document/d/1v7FtTkRkPBHZINEgP6bTw1rTSeZeTnALx62qQA0I41A/

Pembahasan Soal ke Satu

Pada soal ini saya diminta untuk membuat fungsi yang akan mereturn sebuah JSON (Javascript Object Notation) dan menjelaskan kegunaan dari JSON di web API, nerikut soal lengkapnya:

Buatlah sebuah method/function untuk me-return biodata Anda, dengan ketentuan

  • name(string)
    • address (String)
    • hobbies (Array)
    • is_married (Boolean)
    • school (Obj) with key highSchool, and university
    • skills (Array of Obj)

Return value harus berformat JSON!

Pada readme sebutkan kegunaan JSON pada REST API

Berikut merupakan fungsi untuk mengambil biodata saya

function getProfile() {
  return {
    name: 'I Kadek Adi Gunawan',
    address: 'Jl. Kapen Agung No.12, Denpasar',
    hobbies: ['Origami', 'Catur'] //Array,
    is_married: false //Boolean,
    school: {
      highSchool: 'SMAN 1 Pekutatan',
      university: ''
    }, // Object
    skills: [{
      name: 'UI / UX Design',
      years_of_experience: 1
    },{
      name: 'Mobile Dev',
      years_of_experience: 2
    }] // Array Of Object
  }
}

Pembahasan:

Untuk melihat tipe data yang ada di javascript dan lebih mendalam bisa melihat JavaScript Essentials: Types & Data Structures, agar lebih memahami. Pada soal 1 ini kita diminta memahami tipe data dan strukturnya, sehingga nanti kita bisa mengakses data ini baik melalui fungsi lainnya misalkan kita ingin mengakses skill dari saya maka bisa dilakukan dengan:

let profile = getProfile();

let skills = profile.skills;

// megakses sekolah
let highschool = profile.school.highscool;
//atau pakai es6

let {skills} = profile;

// print json yang telah di convert ke type String
console.log(JSON.stringify(skills));

Pada soal pertama ini saya lupa untuk meyertakan fungsi dari JSON dari web API tapi pada dasarnya sangat sederhana yaitu sebagai format untuk mentransmisikan (mengirim dan menerima) data dari web API (server) ke client atau sebaliknya.

Pembahasan Soal ke Dua

Pada soal ini kita diminta untuk melakukan validasi dari email dan username sesuai rule yang telah ditentukan pada soal ini saya menggunakan module Regex pada javascript untuk yang belum mengenal Regex bisa membaca di “. Regex sering di gunakan untuk mencari, mengecek dan edit dari sebuah string. kelebihan Regex adalah dinamis kita mengambil data sesuai format, range, bahkan mengroupkannya. Pada soal ini cuma disuruh buat fungsi tanpa perlu melakukan manipulasi di HTMLnya berikut soal lengkapnya:

Pada sebuah form, terdapat 3 buah field yaitu: username, dan password. Buatlah function untuk memvalidasi field-field tersebut, dengan requirement sebagai berikut:

  • Username, merupakan kombinasi dari huruf kecil. Dengan panjang tepat 8 karakter.
  • Password, merupakan kombinasi dari huruf kecil, huruf besar, angka, dan karakter spesial. Dengan panjang minimal 8 karakter.

Berikut jawaban yang saya sertakan

function is_username_valid(username) {
  // Huruf dari a sampai z
  var lowercaseRe = /[a-z]/g;
  
  // check panjang string dan memastikan karater yang ditemukan sama dengan panjang string
	if(username.length == 8 && username.match(lowercaseRe).length == username.length) {
    	return true;
    }
    return false;
}

function is_password_valid(password) {
  // huruf keci a sampai z
	var lowercaseRe = /[a-z]/g;
  
  // huruf besar A sampai Z
  var uppercaseRe = /[A-Z]/g;

  // angka dari 0 sampai 9
  var numberRe = /[0-9]/g;

  // karater unik [email protected]#$ atau %
  var specialRe = /[[email protected]#$%]/g;

  if(password.length == 8
     && lowercaseRe.test(password)
     && uppercaseRe.test(password)
     && numberRe.test(password)
     && specialRe.test(password)) {
     return true;
  }

  return false;
}

Pembahasan: Pada soal ini saya menggunakan dua fungsi dari module Regex yaitu match dan test.Untuk match ini di akan mencari di dalam string yang dimasukan sebagai parameter dana kan mengambalikan sebuah array jika menemukan satu atau lebih character yang sesuai pola Regex.Sedangkan test akan mengbalikan true jika sesuai dengan pola Regex dan false jika sebaliknya.

// contoh penggunaan

console.log(is_username_valid('zeronull') ? 'benar' : 'salah'); // benar
console.log(is_username_valid('useroke') ? 'benar' : 'salah'); // salah
console.log(is_password_valid('qazW_123') ? 'benar' : 'salah'); // benar

Pembahasan Soal Tiga

Pada soal ini diminta untuk mencetak sebuah gambar di dalam console, sebenarnya kalau bisa konsep looping soal ini tidaklah sulit, nah untuk soal ini harus dibuat sebuah fungsi yang mengambi satu parameter berupa angka yang nantinya sebagai ukuran dari gambar. berikut soal lengkapnya:

Buatlah function untuk mencetak gambar seperti dibawah ini, yang mempunyai sebuah parameter sebagai panjang lebar/tinggi gambar. Parameter harus merupakan bilangan ganjil

Jawaban yang saya sertakan sebagai berikut:

function print_picture(size) {
  const star = ' * ';
  const line = ' = ';

  // bukan bilangan ganjil
  if(size % 2 == 0) return;

  // buat header berada di tengah
  console.log(' '.repeat(size / 2) + '--- panjang ---' + ' '.repeat(size / 2));

  for(var row = 0;  < size; row++) {
    // bintang di tengah
    if(Math.floor(size / 2) === row) {
      console.log(star.repeat(size));
    }else {
      // bintang - garis - bintang
      console.log(star+line.repeat(size - 2)+star);
    }
  }
}

Pembahasan:

Pada soal ini pendekatan yang saya lakukan adalah pertama saya ngeprint headernya dulu kemudian untuk isi gambarnya saya pakai looping dimana jika baris berada pada posis ditengah maka akan mendambahkan bintang, saya juga menggunakan fungsi floor pada module Math jadi akan membulatkan hasil bagi ke bawah jadi jika 3.5 maka akan menjadi 3.

Fungsi repeat disini saya lakukan untuk mengulangi string misalkan saya mau hoo tiga kali maka akan saya lakukan seperti ini:

let yahoo = 'hoo'.repeat(3);

console.log(yahoo) // hoohoohoo

Pembahasan Soal Empat

Untuk soal ini kita diminta untuk melakukan pengurutan (sorting) data di dalam array yang berada di dalam array, sebenarnya ada banyak cara untuk melakukan sorting seperti buble sort, heap sort, merge sort dan masih banyak lagi bisa dilihat di Sorting Algorithms atau bisa tonton di video ini:

Buatlah sebuah function memiliki sebuah parameter berupa array yang berisi array yang berisi abjad, yang mempunyai tugas untuk mengurutkan array terpendek ke terpanjang, dan juga mengurutkan abjad di dalamnya dari a ke z.

Dilarang menggunakan built in function array_multisort misalnya.

Berikut merupakan pemecahan masalah yang saya lakukan untuk soal ke empat ini:

function sort_array(multilist) {
  // copy array sehingga tidak merubah yang asli
  var transformlist = multilist.slice(0);

  // urutkan panjang
  transformlist.sort(function(a, b) {
     if (a.length > b.length) return 1;
     else if (a.length < b.length) return -1;
     return 0;
  });
  
  // urutkan character di array
  for(var i = 0; i < multilist.length; i++) {
   var item = multilist[i];
   item.sort(function(a, b) {
   	if(a.charCodeAt(0)> b.charCodeAt(0)) return 1;
    else if(a.charCodeAt(0)< b.charCodeAt(0))return -1;
    return 0;
   });
  }
  return transformlist;
}

Penjelasan:

Mungkin kode di atas agak sedikit rumit tapi sebenarnya melakukan hal yang sangat sederhana untuk yang pertama mengurutkan array dari terpanjang ke terpendek kemudian yang kedua mengurutkan abjad dari a ke z. nah untuk ini saya menggunakan fungsi sort dari module array fungsi ini meminta dua buah parameter 2 buah object misalkan a dan b yang ada di array dan akan membandingan kedua object ini.

Cara membandingkannya value yang bisa di return sebagai fungsi callback sebagai parameter untuk fungsi sort adalah sebagai berikut: - -1 jika object a berada sebelum b - 0 jika object a dan b merupakan sama - 1 jika object a seharusnya berada sesudah b

dengan mereturn value ini maka object yang di dalam array akan terurutkan secara otomatis. Sebenarnya untuk pengurutan karater bisa saya lakukan sebagai berikut:

  for(var i = 0; i < multilist.length; i++) {
   var item = multilist[i];
   item.sort(function(a, b) {
   	if(a> b) return 1;
    else if(a< b)return -1;
    return 0;
   });
  }
  return transformlist;

Ini karena secara otomatis saat melakukan pembandingan dari sebuah character akan melakukan perbandingan dari charcodenya. charcode merupakan posisi karater di dalam memori misalkan seperti berikut


let posisi = 'a'.charCodeAt(0);

console.log(posisi) // 97

Pembahasan Soal ke Lima

Pada soal ini saya diminta untuk membuat sebuah fungsi yang membuat random string dimana berisi gabungakan angka dengan huruf kecil, serta hasil dari string yang dibuat tidak boleh sama dengan hasil yang sebelumnya telah dibuat.

function cetak(count) {
  var items = [];

  while(count > 0 ){
  	var item = generateRandomString();
    if(!items.includes(item)){
    	items.push(item);
      console.log(item);
    count--;
    }
  }
}

function generateRandomString(){
  const character = 'abcdefghijklmnopqrstuvwxyz1234567890';
  var maxLength = 32;
  var randomString = '';

  for(var i = 0; i <= maxLength; i++) {
   	var indexGen = Math.floor(Math.random() * character.length);
    randomString += character[indexGen];
  }

  return randomString;
}

Penjelasan: Pada fungsi diatas khususnya cetak akan mengulai membuat sesuai dengan jumlah yang diminta count jika hasil dari string yang dibuat berada di dalam array items maka akan membuat ulang yang baru sampai didapatkan hasil yang berbeda.

Untuk fungsi generateRandomString ini saya mengambil karkter yang ada di dalam character menggunakan fungsi random, karena random hanya mereturn angka dari 0 sampai rentang 1, maka saya perlu melakukan sedikit modifikasi agar posisi dari index ini tidak keluar dari array character jika kode diatas saya pecah;

let length = 20;
let generator = Math.random(); // diantara 0 sampai 0.9
Math.floor(generator * length) // diantara 0 sampai 19

Pembahasan Soal ke Enam

Untuk soal ini saya membuat menggunakan nuxtjs dan firebase. Saya menggunakan nuxtjs Front-End untuk membuat situs pollingnya dan firebase tepatnya firestore sebagai realtime database. Nuxtjs menggunakan library Vuejs mirip Reactjs tapi lebih simple (bagi saya).

Untuk soal ini saya akan buat khusus artikelnya, ini karena agar anda tidak terlalu bosan membaca kepanjangan. Selain itu bisa fokus ke satu materi yaitu nuxtjs aja.

Kesimpulan

Soalnya sungguh sangat memeras keringat dan memakan waktu khusus yang nomer enam. Kalau ingin membahasan soal untuk kloter lain tinggal taruh di komentar link soalnya dan saya akan coba pecahkan kalau ada waktu luang.

Jika ada yang kurang bisa ditanyakan trus untuk yang kurang mohon di iyain aja.

  • Share