JOBSHEET 2

PEMROGRAMAN SISTEM BERGERAK

DISUSUN OLEH :
NAMA : Escalunna Portalindo
NIM : 20076042

DOSEN PENGAMPU : Geovanne Farell, S.P.d. ,M.Pd.T.

PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

TEKNIK ELEKTRONIKA
FAKULTAS TEKNIK
UNIVERSITAS NEGERI PADANG
2022
1. Buka browser lalu ketikan link berikut https://reactnative.dev/docs/getting-started

2. Setelah itu kita akan dialihkan ke Device Manager, lalu tekan wipe data
3. Selanjutnya tekan tanda play yang terletak disamping kiri lambang pensil, lalu akan muncul
tampilan android seperti gambar dibawah.

4. Buka Terminal CMD lalu ketikan "npm install -g expo-cli", setelah itu tungggu prosesnya
selesai.
5. Untuk memulai React Native App kita bisa mengetikan “expo init my-app-name” Contoh :
expo init lunna.

6. Setelah ini kita akan memilih yang blank a minimal app – Tekan Enter Tunggu hingga proses
install selesai.
7. Setelah selesai, kita masuk kedalam folder project yang dibuat sebelumnya ”cd nama-
folder”, Contoh : cd Psb-Project lalu ketik “yarn start”.
Setelah itu pilih mau menjalankan View React-Native projectnya mau di web atau emulator
android.
Tampilan View React Native project Web tekan W pada keyboard dan tunggu proses running
selesai
8. Buka Terminal CMD baru, Masuk kedalam project yang dibuat sebelumnya. Ketik “code .”.

9. Setelah masuk kedalam project, masuk ke App.js lalu kita akan menganti text yang ada
dengan “Matakuliah Pemograman Sistem Bergerak”.
 10. Langkah selanjutnya kita akan mencobakan Layouting menggunakan Flexbox, Tujuannya
agar kita bisa membagi ukuran layout sesuai yang kita inginkan.

11. Jika kita memberikan nilai flex:1 maka warna akan sama rata Kalua kita merubah nilai flex,
maka warna akan berubah sesuai dengan nilai flex yang kita berikan.

Untuk mencoba Flex-direction silahkan kondisikan kode pada berkas tersebut menjadi seperti
berikut :

• Flex-direction
 Flex-direction Column Reverse

 Flex-direction Row
 Flex-direction Row Reverse

12. Untuk mencoba Justify content silahkan kondisikan kode pada berkas tersebut menjadi
seperti berikut :

 Justify content Flex-start -default

 Justify content Flex-end

 Justify content center

 Justify content Space-between

 Justify content Space around

 Justify content Space evenly
 Tugas
1. Buatlah nama mata kuliah dengan berbagai warna yang berbeda.

2. Lalu buat folder baru dan beri nama images. Setelah itu import gambar-gambar yang akan di
tampilkan pada android tersebut.
3. Agar tulisan dan gambar berada di tengah, ketik “alignItems : center”.