Belajar Front End Programming di Binar Academy

Belajar Front End Programming di Binar Academy merupakan pembelajaran yang diselenggarakan oleh Binar Academy yang bertempat di Sinergi Coworking Space.

Kelas Front End dilaksanakan dalam 15 kali pertemuan. Pembelajaran mulai dari basic hingga pemecahan masalah sesuai project kelompok yang dikerjakan. Setiap orang akan dikelompokan per kelas tiap divisi dan akan dibuat kelompok per tim. Tiap TIM terdiri dari Project Manajer, UI/UX, Android, Front End, Back End dan Quality Assurance. Tiap akan mengejakan Project sesuai tema yang ditentukan oleh Binar Academy. Nah untuk Batch 9 Temanya Bencana Alam.

TIM kami membuat Project tentang pasca bencana yaitu RelaOne. RelaOne merupakan aplikasi untuk menjaring para relawan atau volounter yang ingin membantu dari segi materi, tenaga, dsb. Dalam aplikasi RelaOne kita bisa mendaftarkan diri sebagai Relawan melalui aplikasi android. Sedangkan untuk organisasi sosial yang akan mendaftarkan event untuk menjaring relawan bisa mendaftar melalui website. Apabila terjadi bencana di suatu daerah atau event sosial di suatu daerah maka organisasi bisa mendaftar lalu menjaring para relawan. Setelah mendaftar relawan bisa melihat skill apa saja yang dibutuhkan dan yang tersedia oleh para relawan.

Pembelajaran dan job description saya di Tim RelaOne Binar Academy sebagai Front End membuat tampilan website untuk organisasi yang akan mendaftar. Teknologi yang digunakan untuk website ini menggunakan framework vue js. Vue.js merupakan framework javascript yang sangat mudah digunakan dan lebih interaktif. Halaman vue.js dibagi menjadi 3 bagian yaitu view untuk tampilan html, script digunakan untuk menuliskan script logika javascipt dan style digunakan untuk menuliskan coding css agar tampilan web html lebih cantik dan menarik.

Berikut ini syntax / penulisan coding dalam vue.js

<template>

<div class=”home”>

<img alt=”Vue logo” src=”../assets/logo.png”>

<HelloWorld msg=”Welcome to Your Vue.js App”/>

</div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from ‘@/components/HelloWorld.vue’

export default {

name: ‘home’,

components: {

HelloWorld

}

}

</script>

<style lang =”scss”>

@import ‘../node_modules/bootstrap/scss/bootstrap.scss’;

#app {

font-family: ‘Avenir’, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

#nav {

padding: 30px;

}

#nav a {

font-weight: bold;

color: #2c3e50;

}

#nav a.router-link-exact-active {

color: #42b983;

}

</style>

Website RelaOne yang dihasilkan dari Pembelajaran Front End menggunakan vue.js

Sekian pengalaman yang bisa saya bagi. Terima kasih!