(Week 5) Awal Mula Sprint
Mata kuliah Proyek Perangkat Lunak atau yang sering disingkat PPL telah mencapai minggu kelimanya. Sesuai dengan namanya, mata kuliah ini bertujuan untuk menjalankan sebuah proyek yang dapat menghasilkan output berupa perangkat lunak yang siap dipakai. Dalam menjalankan proyek tersebut, digunakan metode Scrum serta pendekatan Test-Driven Development.
Hingga sebelum minggu kelima, terdapat beberapa hal yang telah dilakukan. Dari awalnya Ideation untuk menghasilkan lean canvas. Dari tahap Ideation, didapatkan konsep besar yang akan dibawa, sehingga dapat dituangkan dengan cara membuat project vision serta high-fidelity mockup. Dalam pembuatan mockup sendiri mempertimbangkan beberapa hal dikarenakan target pasar dari produk adalah komunitas nelayan. Sehingga, diperlukan aplikasi yang simpel dan memiliki segmentasi yang baik agar para nelayan mendapatkan experience yang memuaskan.
Setelah itu, rangkaian proyek dilakukan dengan mengkonfigurasi environment yang diperlukan. Fase ini menggunakan GitLab yang merupakan version control untuk proyek ini. Proyek menggunakan react-native-cli untuk instalasi awal. Dilanjutkan dengan implementasi continous integration dengan memanfaatkan gitlab-ci. Continuous integration sendiri melakukan 2 tahap, yaitu tahap build menggunakan gradlew serta tahap testing menggunakan jest. Apabila berhasil dijalankan, contionuous integration akan melakukan compiling serta menghasilkan file .apk setiap kali dilakukan push ke GitLab proyek. Setelah mengonfigurasi environment, dilakukan pembuatan product backlog serta sprint planning.
Pada sprint planning kemarin, saya mendapatkan task berupa belajar mengenai layouting React Native. Pada React Native, aturan mengenai layouting sedikit berbeda telah dimuat pada flexbox. Flexbox yang digunakan sendiri memiliki fungsional yang hampir sama dengan yang ada pada CSS. Perbedaan utama layouting pada React Native adalah container utama dari elemen-elemen yang ada dimuat pada Flex Container.
.container {
display: flex;
}
Nantinya elemen-elemen akan ditambahkan pada container tersebut. Secara default, elemen pada container utama dikonstruksi secara horizontal. Hal tersebut dikarenakan flex-direction memiliki nilai awal berupa ‘row’. Nilai tersebut dapat dganti dengan ‘column’.
Perlu diperhatikan juga bahwa layouting pada React Native hanya menggunakan Flexbox serta positioning dari CSS. Terdapat beberapa tipe dalam membangun layout pada React Native, yaitu Stack Layout, Grid Layout dan Absolute Layout. Pada post kali ini akan difokuskan pada tipe Stack Layout.
Stack Layout
Tipe pertama memiliki orientasi secara vertikal serta menumpuk elemen di atas elemen lainnya. Berikut adalah gambaran umum dari tipe stack.
Untuk mendapatkan layout tersebut dapat digunakan kode berikut.
import React, { Component } from ‘react’;
import {
StyleSheet,
View,
Dimensions
} from ‘react-native’;
var { height } = Dimensions.get(‘window’);
var box_count = 3;
var box_height = height / box_count;
export default class VerticalStackLayout extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.box, styles.box1]}></View>
<View style={[styles.box, styles.box2]}></View>
<View style={[styles.box, styles.box3]}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘column’
},
box: {
height: box_height
},
box1: {
backgroundColor: ‘#2196F3’
},
box2: {
backgroundColor: ‘#8BC34A’
},
box3: {
backgroundColor: ‘#e3aa1a’
}
});
Mari lakukan modifikasi terhadap kode di atas, untuk yang pertama ganti value dari properti flexDirection menjadi ‘row’, sehingga didapatkan tampilan seperti berikut.
Selain itu, dapat dilakukan pengaturan distribusi elemen-elemen yang ada pada container utama dengan menggunakan justifyContent. Value dari properti tersebut dapat didefinisikan menjadi flex-start, center, flex-end, space-around, dan space-between. Berikut merupakan beberapa representasi dari masing-masing nilai tersebut secara berurut dari kiri ke kanan.
Yang tidak kalah penting juga dapat menggunakan alignItems. Properti alignItems dan justifyContent terlihat sama, namun sebenarnya berbeda. Perbedaan utama terletak pada arah distribusi yang digunakan. Pada justifyContent arah distribusi mengikuti sumbu utama yang ditentukan oleh flexDirection, sedangkan alignItems mengikuti arah sebaliknya. Value dari properti tersebut dapat didefinisikan menjadi flex-start, center, dan flex-end. Berikut merupakan beberapa representasi dari masing-masing nilai tersebut secara berurut dari kiri ke kanan.
Grid Layout
Tipe kedua yang dapat dibuat adalah grid, seperti yang sering kita lihat pada profile Instagram.
Absolute Layout
Absolute Layout berguna untuk mendapatkan lokasi absolut, seperti yang seperti kita lihat pada header atau menu bar dari sebuah aplikasi.
Sekian post saya kali ini, semoga bermanfaat!
Referensi:
https://code.tutsplus.com/tutorials/get-started-with-layouts-in-react-native--cms-27418
https://inducesmile.com/facebook-react-native/react-native-layout-example-tutorial/
