Saya siapa ya?

Sebenarnya untuk melatih diri sendiri menjadi PROGRAMMER YANG HANDAL itu sangatlah simple, tidak diperlukan kebutuhan yang muluk-muluk. Asalkan ada niat pasti semuanya tercapai. Meskipun tidak ada basic dalam pemrograman, anda tetap dapat belajar ... sttttt asalkan ada niatan.

Lalu bagaimana dengan skill yang harus saya miliki ?

Bahasa Inggris

Bahasa inggris akan membantumu lebih mudah:

• Membaca dokumentasi;

• Memahami pesan error;

• Bertanya di forum global;

• Belajar dari web luar;

• Mencari referensi;

• dll.

Minimal kamu bisa bebahasa inggris secara pasif, maka sudah bisa menikmati kemudahan di atas. Atau bagi yang kesulitan untuk membaca dokumentasi atau web luar negeri kalian bisa kok mentranslatenya dengan menggunakan fitur yang ada di chrome. Cara nya bagaimana ya ?

Kalian tinggal klik icon translate yang ada di sebelahnya bintang pojok kanan atas pada gambar berikut.

Kemudian anda pilih Indonesia :) Mudah bukan ? eitssss tapi, minimal anda tetap harus bisa berbahasa inggris dikarenakan bahasa hasil dari translate ini sulit untuk dipahami.

Membaca Dokumentasi

Nah, membaca dokumentasi sangatlah sulit. Untuk itu perlu dilakukan latihan setiap harinya supaya terbiasa dengan membaca dokumentasi. Mengapa saya bilang bahwa membaca dokumentasi itu sulit ? karena :

1. Dikemas dengan bahasa teknis yang membosankan untuk dibaca

2. Screenshot kurang lengkap (karena pemula butuh screenshot meskipun itu hanya perintah CLI)

3. Menggunakan bahasa inggris

Lagi - lagi bahasa inggris bukan ?

Oiya sedikit tips nih dari Doyatama Code anda bisa mencari dokumentasi di mesin telusur dengan kata kunci x documentation, x adalah nama teknologinya.

Membaca Source Code

Membaca source code kelihatannya mudah. Iya mudah kalau baca source code yang kita tulis sendiri. Logikanya sudah kita pahami, karena logika berpikir kita sendiri.

Tapi…

Saat membaca source code milik orang lain, nggak paham apa-apa.

Skill membaca source code ternyata skill yang harus dimiliki selain skill menulisnya. Karena kita tidak akan menulis kode sendirian. Akan ada source code dari anggota tim yang lain.

Lalu bagaimana agar bisa membaca source code orang lain?

Ada beberapa tips yang pernah saya dengar:

• Baca source code dari bawah ke atas

• Baca bagian yang kamu pahami dulu

• Baca keterangan pada komentarnya

Debugging

Proses debugging ini bisa jadi lebih lama dari proses menulis kode. Bahkan ada yang sampai berminggu-minggu tidak menemukan sumber masalahnya.

Untuk itu anda harus mampu :

• Mamahami maksud pesan error dan masalah lainnya

• Mencari di baris ke berapa letak errornya

• Analisis penyebabnya

• Mengatasi error

Skill Bertanya dan Browsing

Apa yang harus saya hindari ?

Malas mencari tahu

Pengen jalan pintas

Mental gratisan

React Native UI Kekinian

Callicoder

Morioh

Video

Install backend lumen (micro framework)

• install : composer create-project --prefer-dist laravel/lumen backend

Install sastrawi

• Install vendor : composer require sastrawi/sastrawi:^1

Install CORS

• Install CORS : composer require fruitcake/laravel-cors

• Settings CORS :

  • Create config folder

  • Create cors.php inside config folder

  • Add this in bootstrap/app.php

    Copy

      $app->register(Fruitcake\Cors\CorsServiceProvider::class);
      $app->configure('cors');
      $app->middleware([
          Fruitcake\Cors\HandleCors::class,
      ]);

• Follow this video

Install front end react js

• install : npx create-react-app frontend

Install this package:

• bootstrap

Cek kata

POST http://localhost:8000/api/v1/cekkata

Path Parameters

{
    "message": "success",
    "estimasi": 0.5756261348724365,
    "totalKata": 3,
    "totalKarakter": 14,
    "totalSalah": 1,
    "teksOri": "saya lagi makn",
    "pembenaran": "<span>Saya</span> <span> lagi</span> <select class='spell'><option>makn</option><option>maki</option><option>makna</option><option>man</option><option>maka</option><option>mak</option><option>makan</option><option>makin</option><option>main</option></select>"
}

• Follow this video

List

Programming Language

• Android
• Agile
• Assembly
• Bash
• C/C++
• Crystal
• Dart
• Elixir
• Golang
• Haskell
• Java
• JavaScript
• Kotlin
• Microsoft
• Pascal - Delphi
• PHP
• Python
• Ruby
• Rust
• Swift
• Typescript

BLOCKCHAIN

DATABASE

• MongoDB
• MySQL
• PostgreSQL

FIREBASE

IOT

DevOps

SQA

Cloud Computing Services

Data PlayGround

Development

Microservice

LINUX

BSD

Mikrotik

Security

Windows

MacOS

iOS

Tentang Telegram

Open Source

Lowongan Kerja

Game Development

Startup

Science

• Geographic Information System and Remote Sensing

About Doyatama Code

Perkenalkan Saya Dito Cahya Pratama, saya adalah instruktur anda. Sehingga anda bisa menjadi programmer profesional.

Getting Started

Adapun bahan - bahan yang dibutuhkan supaya melancarkan pelatihan anda:

Video

Feature

Terdapat beberapa fitur yang akan dibuat pada project ini, diantaranya:

Validator

Berdasarkan kamus besar bahasa indonesia, validasi adalah 1 pengesahan; 2 pengujian kebenaran atas sesuatu;

Arti validasi secara etimologis berasal dari kata validation yaitu membuktikan sejauh mana ketepatan dan kecermatan suatu alat ukur dalam melakukan fungsi ukurnya.

Calculate Time

Menghitung waktu yang diperlukan ketika menjalankan cek kata.

Tokenize

Tokenizing digunakan untuk memisahkan deretan kata yang ada di dalam kalimat, paragraf atau halaman menjadi token atau potongan kata tunggal. Berikut “dia”, “sedang”, “menulis”. Selain itu tokenizing juga berfungsi membuang tanda baca selain huruf a-z, contoh : !, *, ?, /.

Stemmer

Menghilangkan suatu imbuhan dalam suatu kata untuk menemukan kata dasar.

Levenshtein Distance

Pada teori informasi dan ilmu komputer, Levenshtein Distance merupakan matriks untuk mengukur nilai jumlah perbedaan antara 2 string yaitu string sumber (s) dan string target (t). Nilai Levenshtein Distance antara dua kata merupakan nilai minimum dari pengeditan single-character (yaitu insertion, deletion maupun substitution) membutuhkan perubahan pada salah satu kata.Jarak Levenshtein diperoleh dengan mencari cara termudah untuk mengubah suatu string,

MySQL Database

MySQL adalah sistem manajemen database relasional open source (RDBMS) dengan client-server model. Sedangkan RDBMS merupakan software untuk membuat dan mengelola database berdasarkan pada model relasional.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 4 video ini, pertama untuk class, kedua untuk inheritance, ketiga untuk modules, dan keempat untuk named export

Classes

Inheritance

Modules

Named Export

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 2 video ini, pertama untuk konsep “this” dan kedua untuk Arrow Function

Konsep "this"

Arrow Function

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi:

Introduction

Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.

Apa itu Javascript ?

Bagi yang masih awam, tentu akan bertanya-tanya, apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

1. HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.

2. CSS: Menentukan layout, style, serta keselarasan halaman website.

3. JavaScript: Menyempurnakan tampilan dan sistem halaman web.

Pada kali ini kita akan mempelajari mengenai:

• Variable

• Object

• Scope

Oke langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengkses materi di link video berikut ini :

source code pada video tersebut dapat teman-teman akses di link github berikut ini :

Untuk membuka source code tersebut di Visual Studio Code, teman-teman pastikan sudah menginstall Visual Studio Code terlebih dahulu lalu membuka programnya.

Setelah itu klik Open Folder seperti pada gambar di bawah ini

Lalu terlebih dahulu extract file zip yang teman-teman download dari link github, dan pilih folder hasil dari extract tersebut, seperti pada gambar di bawah ini

Maka akhirnya teman-teman akan mendapatkan hasil seperti ini

Lalu, teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools, caranya sudah disampaikan pada video.

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi:

Dan pada kali ini, kita akan fokus mempelajari array methods, object destructuring, dan spread operator.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 3 video ini, pertama untuk array methods, kedua untuk object destructuring, dan ketiga untuk spread operator

Array Method

Object Destructing

Spread Operator

source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :

Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi:

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Buatlah HTML code untuk desain halaman sebagai berikut. Dimana terdapat icon dan title pada tab bar. (untuk icon, Anda boleh bebas mencari free image di internet)

Question 2

Buatlah HTML code untuk desain form sebagai berikut. (harus sama persis). Catatan: field name adalah text, field Delivery Date adalah date, field Address adalah textarea, dan field Quantity adalah number.

Question 3

Buatlah javascript code berikut ini dengan nama file hello.js, lalu masukkan code tersebut kedalam HTML code dan panggil fungsi hello via tag script lain.

function hello() {
    alert('Hello....');
}

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Pada code di bawah ini terdapat sebuah object “sebuahObject” yang memiliki elemen sebuah fungsi, tuliskan code Anda untuk membuat console mengeluarkan log “Hai Dunia Kucing!!” dengan mengakses fungsi tersebut ? Jelaksan!

Question 2

Perhatikan code di bawah ini.

Pada line kedua code di atas akan memunculkan error bahwa variabel “sebuahVariabel ” sudah dideklarasikan dengan let, tidak dapat dideklarasikan kembali.

Namun, jelaskan kenapa ketika kita ganti let dengan var seperti code di atas ini, tidak ada error yang terjadi!

Question 3

Jelaskan, jika memang const membuat sebuah variable tidak bisa di-assign kembali valuenya, kenapa pada code di bawah ini, masih tetap berlaku ?

Question 4

Pada code di bawah ini, kenapa console memberikan output undefined ?

Referensi

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Gabungkan atau merge 4 array berikut ini. Buat banyak strategi yang berbeda untuk menggabungkannya. Urutkan mana yang lebih efesien! [bukan hanya waktu, tetapi semua segi apapun] Mengapa bisa begitu ?

Question 2

Berdasarkan materi dari video, gunakan Object Destructuring untuk mengambil semua properti di dalam object berikut ini dengan diberi alias huruf depan-nya.

Question 3

Filter array berikut untuk isAllowed yang bernilai true. Lalu tampung ke variabel bejoJuaraNasional

Dan pada kali ini, kita akan mempelajari hal lain yang dibutuhkan knowledge-nya di React, yaitu HTML.

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 1 video ini, yaitu pengenalan HTML

Pengenalan HTML

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan istilah dari this di JavaScript!

Question 2

Ubahlah beberapa function dibawah ini ke bentuk arrow function

Question 3

Di bawah ini, jika kita memanggil fungsi getName yang ada di object sebuahObject, maka kita berhasil mendapatkan outputnya. Namun, jika kita memanggil fungsi getName yang ada di object sebuahObjectLain, maka kita akan mendapatkan output undefined. Apa yang salah dari object sebuahObjectLain ? dan bagaimana cara memperbaikinya ? Jelaskan!

Soal 4

Dapatkah code dibawah ini berjalan dengan benar ? Jelaskan apa yang terjadi!

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Ubahlah object-object berikut menjadi class. Dan setelah itu, untuk class Benda, buat object yang instansiasinya dari class Benda, dengan properti object persis dengan halGhaibLain. Dan juga buat class baru yang inherit dengan class Benda, dengan menambahkan property “dasar” dan juga method actionLain yang memunculkan console log “Ini action lain”.

const makhlukGhaib = {
   nama: 'Pocong',
   kekuatan: 'Terbang',
   attack() {
       console.log('Senyum');
   }
};
 
const benda = {
   nama: 'kompor',
   bahan: 'besi',
   actionName: 'Memanaskan',
   action() {
       console.log(this.actionName);
   }
};
 
const halGhaibLain = {
   nama: 'cinta',
   bahan: 'perjuangan bersama',
   actionName: 'Membara',
   action() {
       console.log(this.actionName);
   }
};

Question 2

Import named export berikut ini dengan alias AliasNamed.

 // Anda sedang berada di satu directory dengan nama file contoh.js
 export class NamedExport {
     constructor(test){
         this.test = test;
     }
 }

Question 3

Dapatkah kita mengimport suatu module dari luar project directory ? Lalu apa pengaruhnya untuk saat production ?

Question 4

Pada code di bawah ini, lakukan export suatu function tersebut menjadi export default dengan tanpa mengubah sedikit pun code pada function tersebut (note: Anda dapat menambahkan/mengubah code diatas atau dibawah function, namun bukan pada function, meski hanya mengubah nama function).

function helloCat() {
   alert('Hello Cat !!');
}

Question 5

Berikut ini terdapat sebuah module yang di-export dengan default. Lakukan import pada module ini dengan menjadikannya named pada proses import nya. Catatan: Anda sedang berada di directory yang sama dengan file user.js

// folder berada di user.js
export default class User {
   constructor(name) {
       this.name = name;
   }
}

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Konsep State dan Virtual DOMLifeCycle Method

Konsep State dan Virtual DOM

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Props, Function dan Class ComponentComposing, Extracting, Fragment, dan Spread Operator pada Props

Props, Function dan Class Component

Composing, Extracting, Fragment, dan Spread Operator pada Props

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi

Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Pengenalan ReactImperative vs DeclarativeEmbed React ke HTMLCreate React App (CRA) Framework

Pengenalan React

Imperative vs Declarative

Embed React ke HTML

Create React App (CRA) Framework

Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!

Referensi

Apa itu HTML ??

HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah sebuah bahasa standar untuk pembuatan halaman web. Dengan adanya HTML, kita dapat membedakan struktur yang tersusun dari sebuah halaman melalui tag atau elemen-elemen penyusunnya.

Elemen atau tag pada HTML dikenali oleh browser seperti google chrome, firefox atau Ms Edge, dll. Browser tersebut mengidentifikasi setiap elemen penyusun HTML dan ditampilkan sesuai karakteristik elemen tersebut. Contohnya sebuah elemen paragraph akan ditampilkan sebagai tulisan panjang, atau sebuah elemen pranala/link akan dicetak dengan warna biru dan ketika mouse mendekat kursornya berubah menjadi telunjuk, dsb.

Contoh sebuah halaman HTML sederhana:

Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya seperti berikut

• element <!DOCTYPE html> mengartikan bahwa dokumen ditulis dengan versi HTML5

• elemen <html> adalah elemen induk atau elemen utama yang sering disebut juga root element dari sebuah halaman HTML.

• elemen <head> berisi informasi tentang halaman HTML yang sedang dibuat

• elemen <title> adalah judul dari halaman HTML yang akan tampil di tab browser.

Elemen pada HTML

Elemen atau sering disebut dengan tag pada HTML adalah penyusun dari sebuah halaman web yang dapat dikenali oleh browser dan ditampilkan oleh browser sesuai karakteristik masing-masing.

Sebuah elemen HTML terdiri dari tag pembuka(start/open tag), atribut (attribute), isi (content), dan tag penutup(close tag).

Pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan tag pembuka <p> . Di dalam tag pembuka tersebut terdapat atribut class yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph <p> akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup dengan sebuah tag penutup.

catatan

Tidak semua elemen HTML memiliki tag penutup seperti <input> <img> <meta> .

Elemen di dalam elemen (nested element)

sebuah elemen HTML dapat terisi dengan elemen-elemen lain di dalamnya. Semua dokumen HTML yang kita lihat di halaman web terdiri dari kumpulan elemen bersarang atau elemen yang mengandung elemen lain di dalamnya.

Contohnya halaman berikut:

Pada contoh di atas elemen <html> adalah root element dan merupakan elemen utama di dokument HTML. elemen tersebut dibuka dengan tag pembuka <html> dan ditutup dengan </html>. Lalu di dalam elemen <html> terdapat elemen <body> . elemen <body> merupakan elemen yang akan ditampilkan ke halaman web yang diawali dengan tag pembuka <body> dan ditutup dengan sebuah tag penutup </body> , dan seterusnya sehingga terciptalah sebuah halaman web yang utuh.

Heading HTML

Heading Pada HTML berfungsi untuk membuat judul atau subtitle pada tampilan website

List HTML

Terdapat 2 jenis list di HTML yaitu Unordered dan Ordered

HTML Input Types

Beberapa Input type yang bisa di gunakan di HTML:

• <input type="button">

• <input type="checkbox">

• <input type="color">

• <input type="date">

• <input type="datetime-local">

• <input type="email">

• <input type="file">

• <input type="hidden">

• <input type="image">

• <input type="month">

• <input type="number">

• <input type="password">

• <input type="radio">

• <input type="range">

• <input type="reset">

• <input type="search">

• <input type="submit">

• <input type="tel">

• <input type="text">

• <input type="time">

• <input type="url">

• <input type="week">

Input Form HTML

Dropdown

Berfungsi untuk menampilkan dropdown list kedalam tampilan website

Textarea

Berfungsi Membuat inputan yang jauh lebih lebar

attribute cols untuk lebar nilai kolom dari inputan dan attribute rows untuk besar nilai baris dari inputan

Link Download Text Editor

* pilih salah satu

Referensi lain :

sumber

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Buatlah page seperti desain berikut menggunakan React yang digunakan di HTML teman-teman, catatan bahwa ini hanya menambahkan CDN saja, tidak menggunakan tool chain atau framework seperti CRA (Create React App), dan lain sebagainya. (poin plus jika teman-teman mengimplementasikan JSX)

Question 2

Buatlah page seperti desain berikut menggunakan framework CRA (Create React App).

Referensi

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan konsep dari State dan aturan mainnya dengan bahasa Anda sendiri !

Question 2

Jelaskan perbedaan antara Props dan State !

Question 3

Dapatkah kita memanipulasi state seperti ini ? Lalu bagaimana caranya untuk solving-nya ?

this.state.counter = this.state.counter + 1;

Question 4

Jelaskan secara detail cara kerja Virtual DOM di React !

Question 5

Jelaskan urutan lifecycle, dan sebutkan proses yang terjadi di setiap fasenya !

Question 6

Dapatkah kita memanipulasi state di constructor ? Jelaskan apa yang terjadi jika kita memanipulasi state dan/atau melakukan side effect di constructor !

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question 1

Jelaskan konsep dari Component dan Props dengan bahasa Anda sendiri !

Question 2

Jelaskan secara detail maksud dari “Props itu read-only”!

Question 3

Gunakan metoda compose component untuk component Welcome ke component App di dalam div.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
 
function App() {
 return (
   <div>
    
   </div>
 );
}
 
ReactDOM.render(
 <App />,
 document.getElementById('root')
);

Question 4

Gunakan metoda extracting component untuk component yang di-wrap oleh elemen div UserInfo, dengan props author dari data props.author dari component Comment.

function Comment(props) {
 return (
   <div className="Comment">
     <div className="UserInfo">
       <img className="Avatar"
         src={props.author.avatarUrl}
         alt={props.author.name}
       />
       <div className="UserInfo-name">
         {props.author.name}
       </div>
     </div>
     <div className="Comment-text">
       {props.text}
     </div>
     <div className="Comment-date">
       {formatDate(props.date)}
     </div>
   </div>
 );
}

Question 5

Apa yang salah dari component di bawah ini ? Jelaskan apa yang terjadi! Dan bagaimana cara solvingnya jika error ?

function Comment(props) {
 return (
     <div className="UserInfo">
       <img className="Avatar"
         src={props.author.avatarUrl}
         alt={props.author.name}
       />
       <div className="UserInfo-name">
         {props.author.name}
       </div>
     </div>
     <div className="Comment-text">
       {props.text}
     </div>
     <div className="Comment-date">
       {formatDate(props.date)}
     </div>
 );
}

Introduction

Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.

Apa itu CLI / Command Line Interface

CLI adalah singkatan dari Command Line Interface.

CLI adalah program yang memungkinkan pengguna mengetik perintah teks yang memerintahkan komputer untuk melakukan tugas tertentu.

Meskipun begitu kuat, penggunaan CLI tidak selalu diterima dengan baik. Pemula enggan menggunakannya, berpikir bahwa CLI hanya untuk pengguna tingkat lanjut. Sebenarnya tidak demikian.

Saat ini penerapan CLI (command line interface) di komputer personal sudah sangat jarang. Alasannya karena banyak pengguna yang memilih untuk menggunakan GUI (graphic user interface) sebagai penghubung ia dengan sistem komputer.

Karena komputer dengan Interface CLI sebenarnya sering digunakan oleh pengguna profesional untuk melakukan tugas komputer tertentu tertentu misalnya untuk mengelola & mengurus server jaringan, hosting web, administrasi, keamanan dan sebagainya. Bahkan CLI merupakan sistem andalan milik hacker

Berikut ini beberapa contohnya :

Menuju folder / direktori tertentu

Untuk menuju folder atau direktori tertentu bisa gunakan perintah cd atau kepanjangan dari change directory

// Menuju Desktop
$ cd Desktop
// Menuju ke direktori parent (sebelumnya)
$ cd ..

Mengetahui alamat dari direktori yang sedang dibuka

Terkadang kita butuh tahu sedang dimana posisi terminal kita berjalan. Perintah untuk fungsi ini yaitu pwd atau kependekan dari path of working directory

$ pwd
/home/users
// sedang berada di folder home/users

Mengetahui daftar isi dari sebuah direktori/folder

Anda bisa gunakan perintah ls atau dir . contohnya sebagai berikut

$ ls 
Document Desktop Image index.html
$ dir
Document Desktop Image index.html 

Membuat folder baru

Perintahnya adalah mkdir atau singkatan dari make directory. contohnya sebagai berikut

// membuat folder baru bernama new-folder
$ mkdir new-folder
// mengecek apakah sudah berhasil buat folder baru
$ ls
new-folder ... ... 

Membuat file baru

Gunakan perintah touch untuk membuat file baru

// membuat file index.html
$ touch index.html
// mengecek apakah sudah berhasil buat file baru
$ ls 
index.html ... ... 

Software terminal / command line yang direkomendasikan

Untuk OS Windows, terminal bawaannya adalah command prompt atau cmd yang relatif kurang nyaman untuk dipakai dalam tahap development. Oleh karena itu direkomendasikan untuk install terminal di bawah ini agar lebih optimal dalam mengerjakan project.

• Git bash, Git bash biasanya ter-install jika kita meng-install git di pc/laptop kita.

Introduction

Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.

Function adalah sebuah blok kode yang disusun sedemikian rupa untuk menjalankan sebuah tindakan. Blok kode ini dibuat untuk dapat bisa digunakan kembali. Cara atau bentuk penulisan function adalah sebagai berikut:

function nama_function(parameter 1, parameter 2, ...) {
  [Isi dari function berupa tindakan]
  return [expression];
}

Kode di atas tidak dapat kita copy-paste kan langsung, melainkan hanya sebuah bentuk penulisan function. Sebuah function, umumnya melakukan tindakan dan sebelum function berakhir, function bisa mengembalikan nilai dengan cara menambahkan sintaks return.

Kita juga dapat mengirimkan nilai ke dalam sebuah function dengan mencantumkannya ke dalam tanda kurung dalam penulisan function. Untuk mengirimkan nilai lebih dari satu, gunakan tanda , sebagai pemisah.

Contoh Function 1: Function sederhana tanpa return

function tampilkan() {
  console.log("halo!");
}
 
tampilkan(); 

Contoh Function 2: Function sederhana dengan return

function munculkanAngkaDua() {
  return 2
}
 
var tampung = munculkanAngkaDua();
console.log(tampung)

Contoh Function 3: Function dengan parameter

function kalikanDua(angka) {
  return angka * 2
}
 
var tampung = kalikanDua(2);
console.log(tampung) 

Contoh Function 4: Pengiriman parameter lebih dari satu

function tampilkanAngka(angkaPertama, angkaKedua) {
  return angkaPertama + angkaKedua
}
 
console.log(tampilkanAngka(5, 3))

Contoh Function 5: Inisialisasi parameter dengan nilai default

function tampilkanAngka(angka = 1) {
  return angka
}
 
console.log(tampilkanAngka(5)) // 5, sesuai dengan nilai parameter yang dikirim
console.log(tampilkanAngka()) // 1, karena default dari parameter adalah 1

Waspadai pengiriman parameter yang UNDEFINED!

Kita juga dapat menampung function sebagai variable dengan sebuah bentuk function yang dinamakan Anonymous Function.

var fungsiPerkalian = function(angkaPertama, angkaKedua) {
  return angkaPertama * angkaKedua
}
 
console.log(fungsiPerkalian(2, 4)) 

Loop/Iteration adalah tindakan mengulang / merepetisi sebuah proses, dengan tujuan untuk mendapatkan deret hasil, atau dengan tujuan mendapatkan hasil tertentu dengan repetisi. Setiap proses repetisi ini disebut sebagai Iteration atau Looping.

Untuk melakukan looping/iteration, JavaScript menyediakan beberapa jenis iteration, yaitu:

• while-loop

• for-loop

While-loop

While-loop adalah iterasi yang akan mengulang sebuah proses dengan sebuah kondisi tertentu.

Berikut adalah cara atau struktur penulisan while-loop:

while([Kondisi]) { // Kondisi yang menentukan apakah program akan melakukan iterasi. 
// Berupa boolean atau true/false.
  [Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
}

Pada while-loop, statement while akan mengambil sebuah nilai true atau false dari hasil kondisi yang diberikan. Apabila statement while mendapatkan nilai true, maka proses yang berada didalam curly bracket ({ }) akan dijalankan. Looping akan terus dilakukan selama kondisi while-loop masih true.

Untuk mencegah looping berjalan terus-menerus, dilakukan sebuah proses yang akan mengubah kondisi yang sedemikian rupa yang bertujuan untuk menghentikan looping dengan menghasilkan kondisi yang false.

Contoh Looping While-loop 1 Looping Angka 1-9 Sederhana

var flag = 1;
while(flag < 10) { // Loop akan terus berjalan selama nilai flag masih dibawah 10
  console.log('Iterasi ke-' + flag); // Menampilkan nilai flag pada iterasi tertentu
  flag++; // Mengubah nilai flag dengan menambahkan 1
}

Contoh Looping While-loop 2 Looping Mengembalikan Angka Total

var deret = 5;
var jumlah = 0;
while(deret > 0) { // Loop akan terus berjalan selama nilai deret masih di atas 0
  jumlah += deret; // Menambahkan nilai variable jumlah dengan angka deret
  deret--; // Mengubah nilai deret dengan mengurangi 1
  console.log('Jumlah saat ini: ' + jumlah)
}
 
console.log(jumlah);

For-loop

For-loop adalah bentuk lain dari iterasi, dimana statement for menjadi kontrol atas loop yang dilakukan. Hal ini yang menjadi pembeda antara for-loop dengan while-loop.

Berikut adalah cara atau struktur penulisan for-loop:

for([Inisialisasi], [Kondisi], [Incremental/Decremental]) {
  [Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
} 

Pada for-loop, statement for akan menampung tiga parameter, yaitu sebut saja inisialisasi, kondisi, dan incremental/decremental. Ketiga parameter ini akan menjadi kontrol kapan loop ini harus berhenti. Pada parameter pertama, yaitu inisialisasi, sebuah variable diberikan nilai awal atau default. Pada parameter kedua, yaitu kondisi, for-loop akan terus berjalan selama kondisi ini masih terpenuhi, dengan kata lain, mengandung nilai true. Pada parameter kedua, yaitu incremental/decremental, variabel yang menjadi kontrol terhadap loop ini akan diubah nilainya.

Best Practice: Walaupun memang for-loop dapat mengubah kondisi di dalam proses, namun best practice dari penggunaan for-loop adalah seluruh kendali atau kontrol dari looping ditentukan oleh variable yang diinisialisasi, di increment/decrement, dan juga kondisi for-loop pun menggunakan variable tersebut.

Untuk memudahkan kamu mendapatkan gambaran jelas tentang penggunaan for-loop, mari kita gunakan kedua contoh while-loop dan kita tulis ulang dalam bentuk for-loop.

Contoh Looping For-loop 1 Looping Angka 1-9 Sederhana

for(var angka = 1; angka < 10; angka++) {
  console.log('Iterasi ke-' + angka);
} 

Contoh Looping For-loop 2 Looping Mengembalikan Angka Total

var jumlah = 0;
for(var deret = 5; deret > 0; deret--) {
  jumlah += deret;
  console.log('Jumlah saat ini: ' + jumlah);
}
 
console.log('Jumlah terakhir: ' + jumlah);

Contoh Looping For-loop 3 Looping Dengan Increment dan Decrement Lebih dari 1

for(var deret = 0; deret < 10; deret += 2) {
  console.log('Iterasi dengan Increment counter 2: ' + deret);
}
 
console.log('-------------------------------');
 
for(var deret = 15; deret > 0; deret -= 3) {
  console.log('Iterasi dengan Decrement counter : ' + deret);
} 

Kamu bisa mencoba kode di atas di repl.it.

Waspadai Infinite Looping!

Dengan sengaja atau tidak sengaja, kode kamu mungkin dapat menghasilkan infinite looping, atau looping yang tidak akan pernah berhenti. Bila ini terjadi, segera periksa statement kondisi kamu.

var flag = 1;
while(flag < 10) { // Loop akan terus berjalan, karena nilai flag tidak pernah berubah
  console.log('Iterasi ke-' + flag);
} 

String adalah tipe data yang berisi karakter-karakter dibungkus dalam tanda petik ("" atau '' ). Karakter-karakter pada suatu string dapat diakses dengan menggunakan indeks atau posisi karakter berada. Indeks pada string selalu mulai dari 0.

String pada javascript juga memiliki property dan methods tertentu. Property dan methods tersebut bisa kita gunakan dalam memanipulasi data agar sesuai dengan program yang kita inginkan.

String Properties

.length mengembalikan panjang atau jumlah karakter pada suatu string.

String Methods

.charAt([indeks])

Mengembalikan karakter pada indeks yang diinginkan

.concat([string])

Menggabungkan beberapa string dan mengembalikannya menjadi string baru.

.indexOf([string/karakter])

Mengembalikan indeks dari string/karakter yang dicari, yang pertama kali ditemukan, atau -1 apabila tidak ditemukan.

.substring([indeks awal], [indeks akhir (optional)])

Mengembalikan potongan string mulai dari indeks pada parameter pertama (indeks awal) sampai dengan indeks pada parameter kedua (indeks akhir). Bila parameter kedua tidak ditentukan, maka secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang ditentukan pada parameter kedua tidak diikutkan sebagai output.

.substr([indeks awal], [jumlah karakter yang diambil (optional)])

Mendapatkan potongan string mulai dari indeks pada parameter pertama (indeks awal) dengan jumlah indeks pada parameter kedua (jumlah karakter). Bila parameter kedua tidak ditentukan, maka secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang ditentukan pada parameter kedua tidak diikutkan sebagai output.

.toUpperCase()

Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf kapital.

.toLowerCase()

Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf kecil

.trim()

Mengembalikan string baru yang sudah dihapus karakter whitespace (” “) pada awal dan akhir string tersebut.

Mengubah tipe data dari dan ke String

Di Javascript terkadang kita ingin mengubah sebuah data string menjadi tipe data lain atau sebaliknya. Contoh diperoleh data angka tapi dalam tipe data String maka kita dapat mengubah string tersebut menjadi tipe data angka.

String([angka/array])

Fungsi global String() dapat dipanggil kapan saja pada program JavaScript dan akan mengembalikan data dalam tipe data String dari parameter yang diberikan.

.toString()

Mengonversi tipe data lain menjadi string. Bila data tersebut adalah array, setiap nilai akan dituliskan dan dipisah dengan karakter koma.

Number([String])

Fungsi global Number() mengonversi tipe data string menjadi angka. Data yang diberikan pada parameter harus berupa karakter angka saja, dengan titik (separator) bila angka adalah bilangan desimal. Bila parameter berisi karakter selain angka dan/atau titik, Number() akan mengembalikan NaN (Not a Number).

parseInt([String]) dan parseFloat([String])

Fungsi global parseInt([String]) dan parseFloat([String]) mengembalikan angka dari string. Bila angka adalah bilangan desimal maka gunakan parseFloat(), bila tidak bilangan dibelakang koma akan diabaikan.

Referensi Tambahan

Javascript merupakan salah satu bahasa pemrograman yang terpopuler di dunia. Javascript membuat aplikasi web menjadi interaktif tanpa reload halaman. Hampir semua browser modern yang kita ketahui dapat menjalankan javascript agar website yang ditampilkan lebih menarik.

Menjalankan Javascript

Ada bermacam cara untuk menjalankan kode javascript yang kita buat, di antaranya:

1. Menjalankan javascript di console browser

3. Menjalankan javascript dengan nodejs

Pada materi ini kita akan mencoba untuk menjalankan script dengan nodejs.

Nodejs adalah software berbasis pemrograman javascript yang dijalankan di sisi server. Jika biasanya javascript kita kenal erat kaitannya dengan client/browser tapi dengan nodejs ini kita bisa membangun server menggunakan bahasa javascript.

Install Nodejs

Untuk mengecek apakah instalasi nodejs sudah berhasil kita bisa jalankan script di terminal kita:

dengan perintah tersebut, diketahui saat ini terinstall node dengan versi 10 dan npm versi 6.

Hello world

Untuk menjalankan javascript dengan nodejs mari kita coba dengan menuliskan script di sebuah file index.js .

Buatlah file dengan nama index.js kemudian tulis code di dalam file tersebut seperti berikut:

kemudian simpan file tersebut (save). Setelah itu kita bisa menjalankan script pada index.js tersebut dengan memberikan perintah seperti berikut pada terminal:

secara otomatis pada terminal kita akan muncul “Hello World!” . (Selamat Anda telah berhasil menjalankan program pertama Anda 😁)

Demikian cara untuk menjalankan Javascript dengan nodejs.

Data Type

Data Type atau dalam bahasa indonesia Tipe Data adalah sekumpulan informasi yang memiliki nilai dan karakteristik tertentu. Beberapa contoh tipe data pada javascript di antaranya:

1. Number : tipe data angka

2. String : tipe data berupa text atau kumpulan karakter, biasanya string dibungkus dalam tanda petik ganda (double quote) atau tanda petik tunggal (single quote).

3. Boolean: tipe data dengan nilai true atau false

Variable

Variable adalah suatu blok data untuk menampung sekumpulan data dengan berbagai tipe data apapun. Dengan variable kita bisa menyimpan suatu nilai untuk kemudian kita olah kembali pada program kita. Untuk deklarasi variable dalam javascript kita bisa gunakan sintaks var lalu diikuti nama variablenya.

Waspadai pendeklarasian variable yang tidak bernilai !

Operator

Operator adalah karakter khusus yang merepresentasikan sebuah tindakan. Operator terbagi ke dalam beberapa jenis:

1. Operator Aritmatika Operator yang melibatkan operasi matematika seperti tambah, kurang, kali, bagi.

   • Tambah (+)

   • Kurang (–)

   • Kali (*)

   • Bagi (/)

   • Modulus (%) Modulus adalah sisa bagi. Contohnya 5%3 hasilnya adalah 2, 100%5 hasilnya 0.

2. Operator Assignment (=), Operator untuk mendaftarkan atau meng-assign suatu nilai ke dalam suatu variable
3. Operator Perbandingan, Operator yang membandingkan suatu nilai dengan nilai yang lain. Hasil dari perbandingan ini akan dikembalikan dalam tipe data boolean true atau false.

   • Equal Operator (==)
   • Not Equal ( != )
   • Strict Equal ( === ) Selain membandingkan dua nilai nya, strict equal juga membandingkan tipe datanya apakah sama atau tidak
   • Strict not Equal ( !== ) Kebalikan dari strict equal.
   • Kurang dari & Lebih Dari ( <, >, <=, >=)
4. Operator Kondisional, Operator yang mengkombinasikan dua nilai kebenaran . Terdapat operator AND (&&) dan OR (||)

   • OR ( || )
   • AND ( && )

Kondisional adalah sebuah metode yang melakukan pengecekan terhadap suatu pernyataan atau premis apakah bernilai benar atau tidak, jika benar maka akan menjalankan sebuah block code tertentu.

Kondisional dengan if / else if / else

• Contoh 1 menjalankan kode jika premis bernilai true

  Copy

  if ( true ) {
      console.log("jalankan code")
  }

• Contoh 2 kode tidak dijalankan jika premis bernilai false

  Copy

  if ( false ) {
      console.log("code tidak dijalankan")
  }

• Contoh 3 Premis dengan perbandingan suatu nilai

  Copy

  var mood = "happy"
  if ( mood == "happy" ) {
      console.log("hari ini aku bahagia!")
  }

Di dalam kondisional dikenal juga dengan istilah branching atau percabangan. Dengan percabangan kita bisa mengecek nilai kebenaran dari berbagai premis yang kita sediakan. cara menambahkan kondisi atau premis lain dari premis pertamanya adalah dengan sintaks else . Contohnya ketika kita diminta untuk membeli telur dan buah ke minimarket oleh ibu kita maka akan banyak sekali kondisi atau kemungkinan yang terjadi dalam perjalanan kita membeli barang-barang tersebut di supermarket.

• Contoh 4 Branching sederhana

  Copy

  var minimarketStatus = "open"
  if ( minimarketStatus == "open" ) {
      console.log("saya akan membeli telur dan buah")
  } else {
      console.log("minimarketnya tutup")
  }

  Kondisi else di atas adalah kondisi selain minimarketStatus == "open" .

• Contoh 5 Branching dengan kondisi

  Copy

  var minimarketStatus = "close"
  var minuteRemainingToOpen = 5
  if ( minimarketStatus == "open" ) {
      console.log("saya akan membeli telur dan buah")
  } else if ( minuteRemainingToOpen <= 5 ) {
      console.log("minimarket buka sebentar lagi, saya tungguin")
  } else {
      console.log("minimarket tutup, saya pulang lagi")
  }

  contoh di atas kita memberikan kondisi tambahan yaitu jika minimarket akan buka kurang atau sama dengan 5 menit lagi maka saya akan menunggu.

Selain Branching atau percabangan, kondisional juga dapat memiliki sarang atau tumpukan yaitu terdapat kondisional di dalam sebuah kondisional.

• Contoh 6 Kondisional bersarang

  Copy

  var minimarketStatus = "open"
  var telur = "soldout"
  var buah = "soldout" 
  if ( minimarketStatus == "open" ) {
      console.log("saya akan membeli telur dan buah")
      if(telur == "soldout" || buah == "soldout" ) {
          console.log("belanjaan saya tidak lengkap")    
      } else if( telur == "soldout") {
          console.log("telur habis")
      } else if ( buah == "soldout" ) {
          console.log("buah habis")
      }
  } else {
      console.log("minimarket tutup, saya pulang lagi")
  }

  pada kondisi di atas minimarketnya sudah buka lalu cek kondisi selanjutnya cek apakah telur atau buah habis. Karena kondisinya adalah jika telur ATAU buah salah satunya ada yang soldout maka belanjaan saya lengkap. Demikian seterusnya akan mengecek kondisi-kondisi yang disediakan dalam logika program yang dibuat.

Kondisional dengan Switch Case

Cara lain untuk melakukan pengecekan kondisi atau conditional adalah dengan switch case. Penggunaan switch case mirip seperti kita menyalakan tombol switch pada remote. Jika kondisi tombol yang dipijit adalah tombol dengan nomer tertentu maka akan menjalankan prorgram tertentu.

• Contoh 7 Kondisional dengan switch case

  Copy

  var buttonPushed = 1;
  switch(buttonPushed) {
    case 1:   { console.log('matikan TV!'); break; }
    case 2:   { console.log('turunkan volume TV!'); break; }
    case 3:   { console.log('tingkatkan volume TV!'); break; }
    case 4:   { console.log('matikan suara TV!'); break; }
    default:  { console.log('Tidak terjadi apa-apa'); }}

  Pada kode di atas, switch akan mengevaluasi nilai buttonPushed jika case yang ditemui cocok dengan nilai yang diberikan maka kode pada case tersebut akan dijalankan sehingga pada console akan dimunculkan “matikan TV!“. Pada setiap case terdapat break yang berfungsi untuk menghentikan proses switch agar tidak menjalankan case yang lain. Juga terdapat default yaitu kondisi dimana tidak ditemukan case yang sesuai.

Apa itu versi kontrol ?

Apa itu versi kontrol dan apakah penting? versi kontrol adalah suatu sistem yang mengubah-perubahan dari suatu file atau sekumpulan file dari waktu ke waktu sehingga Anda dapat menilik versi khusus dari suatu saat nanti. Sebagai contoh, pada buku ini Anda akan menggunakan sumber kode perangkat lunak untuk file-file yang mendukung dengan versi kontrol , walau pada persetujuan Anda dapat melakukan ini dengan semua jenis file pada komputer.

Untuk lebih jelasnya anda dapat mengecek pada web berikut ini :

Membuat project Git dan mengelolanya

Pada sesi react native ini kita akan menggunakan Gitlab sebagai version control nya. Mari ikuti step-stepnya.

Pastikan telah terinstall git di komputer anda, jika belum silahkan anda install git terlebih dahulu pada link berikut ini

Untuk cara installasinya anda dapat mengecek pada link berikut ini :

Jika sudah menginstall git, yuk..... saatnya lanjut ke step selanjutnya.

Membuat Repository Baru

Repository atau repo di Gitlab biasa disebut dengan project. So, berikut langkah-langkah untuk membuat repository baru:

• Setelah login anda akan menuju halaman Projects yang berisi semua repository yang anda miliki. Jika Anda user baru maka belum ada repository yang tersedia. Di halaman tersebut anda akan melihat tombol New Project di sebelah kanan atas. Klik tombol tersebut.

• Pada halaman membuat project baru, isi kolom project-name dengan nama yang Anda inginkan, misalkan: my first repo.

• Pada kolom visibility level Anda akan melihat tiga pilihan yaitu Private, Internal, dan Public. Private artinya repo yang akan kita buat bersifat rahasia, hanya Anda dan orang yang Anda beri akses saja yang bisa membukanya. Sedangkan pilihan Internal berarti repo Anda akan dapat dilihat oleh semua user Gitlab. Pilihan “Public” berarti repo Anda akan terlihat oleh orang dari mana saja walaupun dia tidak memiliki akun gitlab. Pilih yang sesuai kebutuhan misalkan : Public.

• Di bagian bawahnya terdapat pilihan checkbox “Initialize repository with a README”. Centang saja jika anda ingin langsung clone repository nya setelah dibuat.

• Jika berhasil maka Anda akan diarahkan menuju halaman project atau repo yang telah dibuat. Jika sebelumnya kita centang “Initialize repository with a README” maka repository kita akan berisi file README.md.

• Pada Bagian kanan atas terdapat tombol clone. Ketika diklik maka akan keluar dua pilihan “Clone with SSH” dan “Clone with HTTPS”. Pilih saja clone dengan HTTPS. Klik tombol salin/copy supaya langsung otomatis tercopy pada clipboard. Jika ingin clone dengan SSH maka anda harus setting dulu akun anda agar terhubung dengan komputer Anda.

• Setelah itu menuju ke terminal atau cmd. Arahkan menuju folder dimana anda ingin menyimpan repository yang sudah Anda buat. Berikan perintah git clone <link_anda_yang_barusan_dicopy> (tanda <> hanyalah sebagai penanda template tidak usah ditulis di perintah cmd)

• Jika sudah berhasil diclone maka akan ditemukan folder dengan nama repository di Gitlab. Cara mengeceknya dengan perintah “ls” atau “dir”.

Mengupload perubahan project dengan git push

Ketika kita sudah berhasil clone repository kita di Gitlab maka tentu kita ingin melakukan update atau penambahan code pada project kita. Agar perbaruan yang kita simpan di local (komputer) kita dapat kita perbaharui juga di repository Gitlab maka kita bisa lakukan dengan git push. Berikut langkah-langkahnya:

• Ketika kita sudah memberikan perubahan terhadap suatu file atau membuat folder-folder baru pada folder project kita maka cara mengecek status perbaruan adalah dengan git status

• Setelah git status maka akan ditampilkan list file yang “modified” atau “untracked”. “modified” artinya adalah kita mengubah file yang sebelumnya ada sedangkan “untracked” artinya file tersebut sama sekali baru di repository. Dalam contoh di atas terdapat perubahan pada file “README.md”.

• Untuk menaikkan perubahan (stage) yang kita buat maka berikan perintah git add

• Sekarang perubahan tadi sudah pada tahap “staged”. jika kita cek status nya lagi maka akan didapati berbeda:

• Selanjutnya adalah memberikan laporan atau commit terhadap perubahan yang kita buat dengan git commit.

• tanda “-m” pada perintah commit artinya kita ingin memberikan pesan atau laporan terhadap perubahan yang sudah dibuat. Dalam hal ini laporannya adalah “Pesan saya: mengubah README.md”

• Selanjutnya adalah push untuk mengirim /upload perubahan yang ada di local computer kita menuju repository yang ada di Gitlab. Jika kita berada di branch bernama master maka perintahnya adalah:

Jika branch yang sedang kita miliki di local adalah branch lain selain master maka cara push nya adalah

Jika langkah tersebut sudah maka kita sudah berhasil mengupload perubahan yang kita buat di repository kita. 🥂

Git branch dan merge request

Membuat branch baru dan melakukan merge request

Clone repository

Terlebih dahulu lakukan clone terhadap repository project.

Catatan: Link https di atas hanyalah contoh link dari sebuah repository. Link https tersebut bisa diperoleh di halaman gitlab pada bagian clone.

Buat branch baru

Setelah di-clone dan masuk ke folder project nya, buatlah branch baru . (myname hanyalah contoh nama branch, kita bisa mengubah sesuai nama yang diinginkan)

maka sekarang kita sudah berada di branch baru dan dapat mulai melakukan pekerjaan kita.

Catatan:

myname hanya contoh , silakan sesuaikan sendiri nama branch masing-masing.

Push ke branch

Setelah pekerjaan selesai, kita akan melakukan upload atau push ke branch kita sendiri.

Catatan:

"some message" hanyalah contoh pesan atau komentar pada sebuah commit. Silahkan isi dengan jenis update yang dikerjakan.

Membuat merge request

Setelah melakukan push ke branch sendiri maka selanjutnya melakukan merge request.

Jika tombol tersebut tersedia, klik tombol tersebut untuk menuju halaman merge request.

Setelah itu, klik submit merge request maka pekerjaan kita sudah disubmit ke merge request dan akan direview oleh pengelola project.

Selengkapnya kamu bisa ikuti juga video tutorial berikut ini:

Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)

Question No. 1 (Membuat kalimat)

Terdapat kumpulan variable dengan data string sebagai berikut

var word = 'JavaScript'; 
var second = 'is'; 
var third = 'awesome'; 
var fourth = 'and'; 
var fifth = 'I'; 
var sixth = 'love'; 
var seventh = 'it!';

Buatlah agar kata-kata di atas menjadi satu kalimat . Output:

JavaScript is awesome and I love it! 

Question No.2 Mengurai kalimat (Akses karakter dalam string)

Terdapat satu kalimat seperti berikut:

var sentence = "I am going to be React Native Developer"; 

var exampleFirstWord = sentence[0] ; 
var exampleSecondWord = sentence[2] + sentence[3]  ; 
var thirdWord; // lakukan sendiri 
var fourthWord; // lakukan sendiri 
var fifthWord; // lakukan sendiri 
var sixthWord; // lakukan sendiri 
var seventhWord; // lakukan sendiri 
var eighthWord; // lakukan sendiri 

console.log('First Word: ' + exampleFirstWord); 
console.log('Second Word: ' + secondWord); 
console.log('Third Word: ' + thirdWord); 
console.log('Fourth Word: ' + fourthWord); 
console.log('Fifth Word: ' + fifthWord); 
console.log('Sixth Word: ' + sixthWord); 
console.log('Seventh Word: ' + seventhWord); 
console.log('Eighth Word: ' + eighthWord)

Buat menjadi Output berikut:

First word: I 
Second word: am 
Third word: going 
Fourth word: to 
Fifth word: be 
Sixth word: React 
Seventh word: Native 
Eighth word: Developer

Question No. 3 Mengurai Kalimat (Substring)

var sentence2 = 'wow JavaScript is so cool'; 

var exampleFirstWord2 = sentence2.substring(0, 3); 
var secondWord2; // do your own! 
var thirdWord2; // do your own! 
var fourthWord2; // do your own! 
var fifthWord2; // do your own! 

console.log('First Word: ' + exampleFirstWord2); 
console.log('Second Word: ' + secondWord2); 
console.log('Third Word: ' + thirdWord2); 
console.log('Fourth Word: ' + fourthWord2); 
console.log('Fifth Word: ' + fifthWord2);

Uraikan lah kalimat sentence2 di atas menjadi kata-kata penyusunnya. Output:

First Word: wow 
Second Word: JavaScript 
Third Word: is 
Fourth Word: so 
Fifth Word: cool 

Question No. 4 Mengurai Kalimat dan Menentukan Panjang String

var sentence3 = 'wow JavaScript is so cool'; 

var exampleFirstWord3 = sentence3.substring(0, 3); 
var secondWord3; // do your own! 
var thirdWord3; // do your own! 
var fourthWord3; // do your own! 
var fifthWord3; // do your own! 

var firstWordLength = exampleFirstWord3.length  
// lanjutkan buat variable lagi di bawah ini 
console.log('First Word: ' + exampleFirstWord3 + ', with length: ' + firstWordLength); 
console.log('Second Word: ' + secondWord3); 
console.log('Third Word: ' + thirdWord3); 
console.log('Fourth Word: ' + fourthWord3); 
console.log('Fifth Word: ' + fifthWord3); 

Output:

First Word: wow, with length: 3 
Second Word: JavaScript, with length: 10 
Third Word: is, with length: 2 
Fourth Word: so, with length: 2 
Fifth Word: cool, with length: 4

Tugas Conditional

• If-else

Petunjuk : Kita akan memasuki dunia game werewolf. Pada saat akan bermain kamu diminta memasukkan nama dan peran . Untuk memulai game pemain harus memasukkan variable nama dan peran. Jika pemain tidak memasukkan nama maka game akan mengeluarkan warning “Nama harus diisi!“. Jika pemain memasukkan nama tapi tidak memasukkan peran maka game akan mengeluarkan warning “Pilih Peranmu untuk memulai game“. Terdapat tiga peran yaitu penyihir, guard, dan werewolf. Tugas kamu adalah membuat program untuk mengecek input dari pemain dan hasil response dari game sesuai input yang dikirimkan.

Petunjuk:

• Nama dan peran diisi manual dan bisa diisi apa saja

• Nama tidak perlu dicek persis sesuai dengan input/output

• Buat kondisi if-else untuk masing-masing peran

Input:

var nama = "John"
var peran = ""

Output:

// Output untuk Input nama = '' dan peran = ''
"Nama harus diisi!"
 
//Output untuk Input nama = 'John' dan peran = ''
"Halo John, Pilih peranmu untuk memulai game!"
 
//Output untuk Input nama = 'Jane' dan peran 'Penyihir'
"Selamat datang di Dunia Werewolf, Jane"
"Halo Penyihir Jane, kamu dapat melihat siapa yang menjadi werewolf!"
 
//Output untuk Input nama = 'Jenita' dan peran 'Guard'
"Selamat datang di Dunia Werewolf, Jenita"
"Halo Guard Jenita, kamu akan membantu melindungi temanmu dari serangan werewolf."
 
//Output untuk Input nama = 'Junaedi' dan peran 'Werewolf'
"Selamat datang di Dunia Werewolf, Junaedi"
"Halo Werewolf Junaedi, Kamu akan memakan mangsa setiap malam!" 

• Switch Case

Kamu akan diberikan sebuah tanggal dalam tiga variabel, yaitu hari, bulan, dan tahun. Disini kamu diminta untuk membuat format tanggal. Misal tanggal yang diberikan adalah hari 1, bulan 5, dan tahun 1945. Maka, output yang harus kamu proses adalah menjadi 1 Mei 1945.

Gunakan switch case untuk kasus ini!

Contoh:

var hari = 21; 
var bulan = 1; 
var tahun = 1945;
//  Maka hasil yang akan tampil di console adalah: '21 Januari 1945'; 

Skeleton Code / Code yang dicontohkan yang perlu diikuti dan dimodifikasi