Table of Contents Introduction
1.1
1. Persiapan
1.2
2. Konfigurasi Firebase
1.3
3. SplashScreen
1.4
4. Sign dan Signup
1.5
5. Halaman Home user
1.6
6. Aplikasi Driver
1.7
1
Introduction
Ayo-Jek yo-Jek Android Tutorial Android Tutorial Hallo semua di sini kita akan belajar membuat aplikasi Ayo-Jek. Aplikasi Ayo-Jek ini pada dasarnya sama seperti aplikasi ojek online pada umumnya, namun disini kita akan membuat nya lebih sederhana. Disini ada dua aplikasi yang akan kita buat yaitu aplikasi untuk user dan user. user. Tutorial ini bisa anda bagikan kepada teman anda atau siapapun yang ingin belajar membuat aplikasi android. Didalam tutorial ini juga akan saya berikan source codenya secara gratis.
Untuk yang temen - temen yang masih baru sekali dalam androi development saya sarankan untuk membaca beberapa buku dan artikel berikut ini. Pertama anda harus mengerti dengan java dan bisa pelajari dari link berikut ini. 1. Head First Java 2. Introduction to java on Udacity Selanjutnya untuk belajar android anda bisa masuk official training web dari android disini disini.. Bisa juga untuk mengikuti training gratis di udacity
2
Introduction 1. Android Development for beginners 2. Developing Android apps Untuk anda yang ingin membaca buku bisa baca buku ini 1. The Busy Coder's Guide to Android Development 2. Professional Android 4 Application Development Untuk situs yang berbahasa Indonesia bisa buka disini 1. Dicoding Academy 2. Teknorial 3. Gookis Studio
3
1. Persiapan
Persiapan Dalam pembuatan aplikasi Ayo-Jek ini kita menggunakan bahasa pemogramman Java dan untuk IDE nya kita akan menggunakan Android studio. Disini saya tidak akan membuat tutorial untuk installasi android studio dan java. Disini saya menggunakan AndroidStudio AndroidStudio 2.1.1 dan java 8.
Buat project Baru
Buat project baru beri nama projectnya menjadi ayojek. Silahkan buat dengan nama lain supaya terasa bikinan kamu sendiri. Saya asumsikan anda semua sudah paham untuk membuat project baru dan disini saya tidak akan membahas lebih jauh lagi. Untuk sebagai infrmasi juga dalam project ini kita akan menggunakan firebase yang akan kita gunakan sebagai backend service, push notification dan yang lainya. Dalam project ini juga nanti kita akan membuat 2 aplikasi, yaitu untuk aplikasi user dan driver ojeknya. 4
1. Persiapan
5
2. Konfigurasi Firebase
Konfigurasi Firebase Sebelum kita lanjut, kita akan lakukan konfigurasi firebasenya terlebih dahulu. Pertama silahkan temen - temen untuk mendaftar di firebase silahkan daftar disini.
Untuk daftar ke firebase kita bisa gunakan akun google yang kita punya. Selanjutnya kita buat proyek baru di firebase.
6
2. Konfigurasi Firebase
Selanjutnya kita menambahkan aplikasi kita kedalam project firebase yang telah kita buat tadi. Untuk menambahkan aplikasi kedalam project firebasenya kita perlu memasukan dua parameter yaitu parameter package aplikasinya dan Sertifikat penandatanganan debug SHA-1. Untuk mendapatkan sertifikat sha-1 kita bisa cek lewat terminal. Untuk yang menggunakan linux : keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android Dan untuk mac keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android Dan untuk windows keytool -list -v -keystore c:\users\your_user_name.android\debug.keystore -alias androiddebugkey storepass android -keypass android Untuk infornasi lebih banyak lagi temen - temen bisa buka disini. Jika sudah bisa mendapatkan sha-1 silahkan tambahkan ke project firebase
7
2. Konfigurasi Firebase
Setelah itu nanti teman - teman akan dapet file dari firebase googleservices.json. File ini silahkan masukan kedalam folrder app/ dalam project androis kita. Selanjut di dalam project kita AyoJek/ edit file build.gradle masukan code berikut
8
2. Konfigurasi Firebase
buildscript { dependencies { // Add this line classpath 'com.google.gms:google-services:3.0.0' } }
dan untuk di build.gradle yang ada di folder app/ tambahkan code berikut ini apply plugin: 'com.google.gms.google-services' `
9
3. SplashScreen
SplashScreen Sebelum kita lanjut membuat splashscreen kita akan mengubah terlebih dauhulu tema dari aplikasi yang akan kita gunakan di aplikasi kita kali ini. Pada dasarnya untuk mengganti tema aplikasi android yang akan kita perlu mengganti 3 warna di stylesnya yaitu colorPrimay, coloPrimaryDark, dan colorAccent. Untuk memilih wrna tersebut kita bisa coba generate dari web berikut ini. Berikut ini adalah contoh warna dari tema yang saya gunakan.
#03A9F4 #0288D1 #448AFF
Selanjutnya kita akan membuat layout splash screen. Splashscreen sendiri adalah layout yang biasanya pertamakali ditampilkan. Nah langsung saja kita buat Activity baru dalam project kita.
10
3. SplashScreen Kita buat empty activity beri nama SplashScreen atau terserah temen - temen mau di beri nama apa. Kemudian untuk activity_splash_screen.xml seperti berikut ini.
11
3. SplashScreen
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.SplashScreen">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" android:src="@drawable/bg_ojek" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#80000000">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AYO-JEK"
android:fontFamily="sans-serif-light"
android:textColor="@android:color/white" android:textSize="@dimen/font_40" />
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="An ojek for you and me"
android:textColor="@android:color/white" android:textSize="@dimen/font_16" />
12
3. SplashScreen Dan untuk tampilanya kira - kira nanti seperti ini.
13
3. SplashScreen
14
3. SplashScreen Kemudian kita tambahkan code berikut ini dalam Class SplashScreen untuk membuat splashscreen ini akan dibuka hanya 3 detik saja. new Handler().postDelayed(new Runnable() {
@Override public void run() { startActivity(new Intent(getApplicationContext(), MainActiv
ity.class)); } }, 3000);
Disini setelah activity splashscreen ini di buka kita membuatnya berpindah ke MainActivity setelah 3 detik.
15
4. Sign dan Signup
Sign dan Signup Selanjutnya kita akan membuat activity Sign atau halaman login.
Untuk acitivity_sign.xml silahkan buat seperti berikut ini.
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.SigninActivity">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
16
4. Sign dan Signup
android:orientation="vertical">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="20dp" android:src="@drawable/img_logo_ojek" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:id="@+id/layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_email" android:inputType="textEmailSubject" />
android:id="@+id/layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
17
4. Sign dan Signup
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textPassword" android:typeface="serif" />
android:id="@+id/layout_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_email_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:orientation="vertical">
android:id="@+id/btn_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@drawable/btn_primary"
android:text="@string/sign_in" android:textColor="@color/white" />
18
4. Sign dan Signup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/go_sign_up"
android:layout_gravity="center" android:textColor="@color/colorPrimary" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="sans-serif-light"
android:text="@string/beta_version"
android:textAlignment="center" android:textColor="@color/colorPrimaryDark" />
Dan kira - kira seperti ini nanti tampilanya.
19
4. Sign dan Signup
20
4. Sign dan Signup
Selanjutnya kita akan masuk di codingan dalam SigninActivity . Disini kita akan membuat sistem login dengan services OAuth dari firebase. Untuk service OAuth di firebase sendiri ada bayak disini kita akan menggunakan service oauth yang email dan passwod. Nah untuk itu kita akan mengaktifkan firebase oauth email dan passwordnya.
Selanjutnya setelah kita mengaktifkan oauth email/password kita masuk di coding di android studio lagi dan tambahkan ini dalam file build.gradle. compile 'com.google.firebase:firebase-auth:9.0.0'
Selanjutnya kita tambahkan code berikut ini untuk di SignActivity untuk kita gunakan sebagai action signin dan auth dari firebase oauth
/** * Signin method * @param email * @param password */ private void signIn(String email, String password) {
21
4. Sign dan Signup Log.d(TAG, "signIn:" + email);
validateForm();
showProgressDialog(); mAuth.signInWithEmailAndPassword(email, password) .addOnCompleteListener(this, new OnCompleteListe
ner() {
@Override public void onComplete(@NonNull Task
ult> task) { Log.d(TAG, "signInWithEmail:onComplete:" + task.isSuccessful()); if (!task.isSuccessful()) { Log.w(TAG, "signInWithEmail", task.g etException());
Toast.makeText(getApplicationContext
(), "Authentication failed.",
Toast.LENGTH_SHORT).show();
}else{ startActivity(new Intent(getApplicat
ionContext(),HomeActivity.class)); }
hideProgressDialog(); } }); } private void validateForm() { if (TextUtils.isEmpty(email.getText())){
email.setError("REQUIRED"); }else if (TextUtils.isEmpty(password.getText())){
password.setError("REQUIRED"); }else {
return; } }
Kemudian untuk signin kita gunakan event onclick
22
4. Sign dan Signup
btn_sign_in.setOnClickListener(this);
@Override public void onClick(View v) { switch (v.getId()){ case R.id.btn_sign_in: signIn(email.getText().toString(), password.getT
ext().toString());
finish();
break; }
Disini kita akan buat jika user sudah pernah login dan belum logout tidak perlu input email dan password dan emal lagi dan langsung kita arahkan ke HomeActivity menggunakan Firebase Oauth. Berikut ini untuk codenya
@Override protected void onStart() {
super.onStart();
auth();
mAuth.addAuthStateListener(authListener); }
Kemudian untuk user yang ingin mendaftar kita arahkan ke activity baru supaya tidak menumpuk di class SignActivity codinganya. Untuk viewnya kita gunakan TextView yang telah kita buat di activity_sign.xml .
23
4. Sign dan Signup Selanjutnya untuk event onclicknya case R.id.txt_sign_up: startActivity(new Intent(getApplicationContext(), SignupActivi ty.class)); break;
SignupActivity Sekarang kita buat activity baru untuk user yang ingin mendaftar. Ok pertama kita buar layoutnya dulu, disini kita buat nama filenya activity_signup.xml .
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".activity.SignupActivity">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:id="@+id/layout_name"
24
4. Sign dan Signup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
style="@style/StyledTilEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:hint="Full Name" android:inputType="text" />
android:id="@+id/layout_no_hp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
style="@style/StyledTilEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_no_hp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="No.HP" android:inputType="number" />
25
4. Sign dan Signup
android:id="@+id/layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
style="@style/StyledTilEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_email" android:inputType="textEmailAddress" />
android:id="@+id/layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical">
style="@style/StyledTilEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/field_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textPassword"
26
4. Sign dan Signup android:typeface="serif" />
android:id="@+id/layout_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_email_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:orientation="vertical">
android:id="@+id/btn_sign_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@drawable/btn_primary"
android:padding="5dp"
android:text="@string/label_sign_up" android:textColor="@color/white" />
android:id="@+id/btn_sign_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="@string/go_sign_in" android:textColor="@color/colorPrimary" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
27
4. Sign dan Signup
android:fontFamily="sans-serif-light"
android:text="@string/beta_version"
android:textAlignment="center" android:textColor="@color/colorPrimaryDarks" />
Dan untuk tampilanya kira - kira seperti ini
28
4. Sign dan Signup
29
4. Sign dan Signup
Selanjutnya sebelum kita masuk coding untuk signupnya disini kita akan buat Model untuk data - data user yang kita perlukan. Dalam layout diatas kita meminta user untuk mengisi 4 field form Full Name, No.HP, Email dan Password. Kemudian untuk di modelnya kita akan menambahkan 2 data yaitu uid dan fcmId, dimana uid ini adalah unik ID setiap user yang akan kita gunakan sebagai kei untuk melakukan query untuk mendapatkan data user. Dan fcmId akan kita gunakan sebagai push notification yang akan digunakan dalam proses order nantinya. Ok berikut ini untuk class modelnya
30
4. Sign dan Signup
/** * Created by ocittwo on 6/11/16. */ @IgnoreExtraProperties public class User { public String full_name; public String no_hp; public String email; public String uid; public String fcm_id; public User() { } public User(String full_name, String no_hp, String email, St ring uid, String fcm_id) { this.full_name = full_name; this.no_hp = no_hp; this.email = email; this.uid = uid; this.fcm_id = fcm_id; }
@Exclude public Map toMap(){ Map data = new HashMap<>(); data.put("full_name", full_name); data.put("no_hp", no_hp); data.put("email", email); data.put("uid", uid); data.put("fcm_id", fcm_id); return data; }
}
31
4. Sign dan Signup Sekarang kita telah membuat model untuk data yang akan di gunakan untuk menyimpan kedalam firebase database, nah sekarang kita buat class yang akan kita gunakan untuk menyimpan data secara offline disini kita menggunakan SharedPreferences untut menyimpan data profilenya. Berikut ini untuk classnya kita akan berikan nama class nya PreferenceHelper.java. /** * Created by ocittwo on 6/18/16. */ public class PreferenceHelper { private static final String TAG = "PreferenceHelper"; private final Context context; private SharedPreferences sharedpreferences; /** * Instance Helper SharedPreferences * @param context */ public PreferenceHelper(Context context) { this.context = context; sharedpreferences = context.getSharedPreferences(Constan s.DATA_USER, 0); } /** * Save data profile to sharedpreferences * @param full_name * @param no_hp * @param email * @param uid * @param fcm_id */ public void saveDataProfile(String full_name, String no_hp, String email, String uid, String fcm_id){ SharedPreferences.Editor editor = sharedpreferences.edit (); editor.putString(Constans.FULL_NAME, full_name);
32
4. Sign dan Signup editor.putString(Constans.NO_HP, no_hp); editor.putString(Constans.EMAIL, email); editor.putString(Constans.UID, uid); editor.putString(Constans.FCM_ID, fcm_id);
editor.apply(); log("Data profile have been saved!"); } /** * Get data profile */ public Map getDataProfile(){ SharedPreferences data = context.getSharedPreferences(Co
nstans.DATA_USER, 0); Map profile = new HashMap<>(); profile.put(Constans.FULL_NAME, data.getString(Constans. FULL_NAME, "")); profile.put(Constans.NO_HP, data.getString(Constans.NO_H P, "")); profile.put(Constans.EMAIL, data.getString(Constans.EMAI L, "")); profile.put(Constans.UID, data.getString(Constans.UID, " ")); profile.put(Constans.FCM_ID, data.getString(Constans.FCM _ID, "")); log("GET data executed!"); return profile; } /** * Logging * @param s */ private void log(String s){ Log.d(TAG, "log: " + s); } }
33
4. Sign dan Signup Ok baik sekarang kita akan masuk di class SignupActivity.java kita mulai untuk membuat variable dari beberapa object yang akan kita gunakan untk proses pendaftaran user ini. Berikut ini variable - variable yang kita akan kita gunakan. private static final String TAG = "SignupActivity"; private EditText full_name; private EditText no_hp; private EditText email; private EditText password; private TextView btn_sign_in; private Button btn_sign_up; private String REQUIRED = "REQUIRED"; private FirebaseAuth mAuth; private DatabaseReference mDatabase;
Setelah medefinisikan variable sekarang kita akan meng instance variable variable yang telah kita buat ini.
34
4. Sign dan Signup
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_signup); mAuth = FirebaseAuth.getInstance(); mDatabase = FirebaseDatabase.getInstance().getReference(
);
castView(); } private void castView() { full_name = (EditText) findViewById(R.id.field_name); no_hp = (EditText) findViewById(R.id.field_no_hp); email = (EditText) findViewById(R.id.field_email); password = (EditText) findViewById(R.id.field_password); btn_sign_in = (TextView) findViewById(R.id.btn_sign_in); btn_sign_up = (Button) findViewById(R.id.btn_sign_up);
btn_sign_up.setOnClickListener(this);
btn_sign_in.setOnClickListener(this); }
Selanjutnya kita akan memvalidasi form - form untuk pendaftaranya. private void validateForm(){ if (TextUtils.isEmpty(full_name.getText())){
full_name.setError(REQUIRED); }else if (TextUtils.isEmpty(no_hp.getText())){
no_hp.setError(REQUIRED); }else if (TextUtils.isEmpty(email.getText())){
email.setError(REQUIRED); }else if (TextUtils.isEmpty(password.getText())){
password.setError(REQUIRED);
}else{ createAccount(email.getText().toString(), password.g
etText().toString()); } }
35
4. Sign dan Signup Kemudian ketika telah selesai memvalidasi kita akan daftarkan user kedalam firebase auth dan menyimpnyan ke database dan sharedpreference.
/*** * Create account and save to database and preference * @param email * @param password */ private void createAccount(final String email, String passwo
rd) { log(TAG + "createAccount:" + email);
showProgressDialog(); // [START create_user_with_email] mAuth.createUserWithEmailAndPassword(email, password) .addOnCompleteListener(this, new OnCompleteListe
ner() {
@Override public void onComplete(@NonNull Task
ult> task) { Log.d(TAG, "createUserWithEmail:onComple te:" + task.isSuccessful()); if (!task.isSuccessful()) {
Toast.makeText(getApplicationContext
(), "Authentication failed.",
Toast.LENGTH_SHORT).show(); }else{ String user_name = full_name.getText
().toString(); String user_no_hp = no_hp.getText(). toString(); String fcmId = FirebaseInstanceId.ge tInstance().getToken(); String uId = task.getResult().getUse r().getUid(); writeNewUser(user_name, email, user_ no_hp, uId, fcmId); }
36
4. Sign dan Signup
hideProgressDialog(); } }); }
/*** * Write new user and save to database and shared preference * @param userId * @param fcmId */ private void writeNewUser(String user_name, String user_emai
l, String user_no_hp, String userId, String fcmId) { // Write on model User user = new User(user_name, user_email, user_no_hp, userId, fcmId); // Save to database
mDatabase.child("users").child(userId).setValue(user.toM
ap()); PreferenceHelper preferenceHelper = new PreferenceHelper (getApplicationContext()); preferenceHelper.saveDataProfile(user_name, user_no_hp, user_email, userId, fcmId); log("Write new user executed!"); }
Selanjutnya kita kembali ke class SignActivity untuk menambahkan fungsi menyimpan data profile ke shared preference apabila si user telah memiliki akun.
/*** * Authentication */ private void auth() { authListener = new FirebaseAuth.AuthStateListener() {
@Override
37
4. Sign dan Signup public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) { FirebaseUser users = firebaseAuth.getCurrentUser (); if (users != null) { // User is signed in Log.d(TAG, "onAuthStateChanged:signed_in:" + users.getUid()); String userId = users.getUid();
mDatabase.child("users").child(userId).addLi
stenerForSingleValueEvent( new ValueEventListener() {
@Override public void onDataChange(DataSna
pshot dataSnapshot) { // Get user value User user = dataSnapshot.get Value(User.class); PreferenceHelper preferenceH elper = new PreferenceHelper(getApplicationContext());
preferenceHelper.saveDataPro
file(user.full_name, user.no_hp, user.email, user.uid, user.fcm_ id); // End get data user }
@Override public void onCancelled(Database
Error databaseError) { Log.w(TAG, "getUser:onCancel led", databaseError.toException()); } }); startActivity(new Intent(SignActivity.this, HomeActivity.class)); } else { // User is signed out Log.d(TAG, "onAuthStateChanged:signed_out"); }
38
4. Sign dan Signup } }; }
Disini kita membuat action untuk query ke database dan menyimnya di shared preference yang berada di method auth. Nah untuk Sign dan Signup kita selesai sekarang lanjut untuk di halaman Home.
39
5. Halaman Home user
Home Activity Setelah user selesai melakukan registrasi dan login ke aplikasi Ayo-Jek kita arahkan ke halaman HomeActivity, di dalam halaman home activity ini kita akan menampilkan maps dan tombol untuk booking ojek. Maps yang akan k ita tampilkan di home ini nanti berfungsi untuk mendapatkan lokasi user yang akan kita gunakan sebagai parameter untuk melakukan booking ajek nantinya. Ok langunsg kita mulai saja dengan membuat tampilan untuk halaman home ini. Untuk root layout home ini kita menggunakan drawer layout yang nantinya ini akan digunakan untuk menampilkan navigation drawer kemudian agar tidak menumpuk untuk codingan activity_home ini maka kita memisahkan menjadi 3 bagian untuk layoutnya yaitu activity_home.xml, activity_main.xml, nav_header_home.xml . 1. activity_home.xml
40
5. Halaman Home user
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
layout="@layout/activity_main"
android:layout_width="match_parent" android:layout_height="match_parent" />
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_home" app:menu="@menu/activity_home_drawer" />
2. activity_main.xml
41
5. Halaman Home user
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ahmadrosid.ayo_jek.MainActivity">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:id="@+id/fab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="@dimen/fab_margin"
android:textColor="@color/white"
android:background="@drawable/btn_primary" android:text="REQUEST OJEK" />
3. nav_header_home.xml
42
5. Halaman Home user
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
android:id="@+id/full_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="Ahmad Rosid"
android:textSize="20sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textAppearance="@style/TextAppearance.AppCompat.
Body1" />
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="[email protected]" />
Nah kira - kira nanti seperti ini jadinya.
43
5. Halaman Home user
44
5. Halaman Home user
Selanjutnya kita masuk ke HomeActivity.java disini kita akan membuat fungsi untuk menampilkan maps, namun sebelum itu kita perlu untuk mengaktifkan google map api melalui google developer console.
Kemudian pilih google maps android API dan kemudian enable
Kemudian masuk ke menu Credentials
Kemudian isikan packagename dari aplikas dan SHA-1 certificate fingerprint
45
5. Halaman Home user
Kemudian buat file google_maps_api.xml di dalam folder res/values. Copy api key dari google developer console tadi
AIzaSyCXgDbzipqaBnyzGMG2cfeqWCM0ZMFfHDE
Kemudian masuk ke manifest dan tambahkan code berikut ini <meta-data
android:name="com.google.android.geo.API_KEY" android:value="@string/google_maps_key" />
46
5. Halaman Home user Dan jangan lupa juga tambahkan acces permission berikut ini
Dan disini kita akan menggunakan library location tracker untuk mendapatkan lokasi terbaru dan terupdate dari user compile 'com.github.quentin7b:android-location-tracker:3.2'
Sekarang kita masuk ke HomeActivity.java seperti biasa kita buat variable di awal codingan kita private static final String TAG = "HomeActivity : "; private GoogleMap mMap; private BitmapDescriptor iconMe; private Context context; private LocationTracker tracker; private double myLatitude; private double myLongitude; private Marker myMarker; private TextView full_name; private TextView email;
Di oncreate kita inisiasi variable - variable diatas
47
5. Halaman Home user
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar); full_name = (TextView)findViewById(R.id.full_name); email = (TextView)findViewById(R.id.email); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.d
rawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle ( this, drawer, toolbar, R.string.navigation_drawe r_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState(); NavigationView navigationView = (NavigationView) findVie
wById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this); context = this; SupportMapFragment mapFragment = (SupportMapFragment) ge
tSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this); iconMe = BitmapDescriptorFactory.fromResource(R.drawable
.ic_user_location);
getDataProfile(); }
Kemudian kita akan menampilkan data user dari data shared preferebce yang telah kita simpan ketika user melakukan login dan registrasi.
48
5. Halaman Home user
/** * GET data profile */ void getDataProfile(){ PreferenceHelper preferenceHelper = new PreferenceHelper (getApplicationContext()); Map data = preferenceHelper.getDataProfi le(); log(TAG + data.get(Constans.FULL_NAME)); log(TAG + data.get(Constans.NO_HP)); log(TAG + data.get(Constans.FCM_ID)); log(TAG + data.get(Constans.UID)); }
Kemudian kita akan membuat fungsi buka dan tutup navigation drawer
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.d rawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle ( this, drawer, toolbar, R.string.navigation_drawe r_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
@Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.d
rawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START); } else {
super.onBackPressed(); } }
49
5. Halaman Home user Jika ada yang bingung apa navigation drawer itu kira - kira seperti ini lah tampilan dari navigation drawer
50
5. Halaman Home user
51
5. Halaman Home user
Sekarang kita akan menampilkan lokasi user dan memberikanya marker
@Override public void onMapReady(GoogleMap googleMap) { mMap = googleMap; if (ContextCompat.checkSelfPermission(context, android.M
anifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMI SSION_GRANTED && ContextCompat.checkSelfPermission(context, an droid.Manifest.permission.ACCESS_COARSE_LOCATION) != PackageMana ger.PERMISSION_GRANTED) {
mMap.setMyLocationEnabled(true); } else {
mMap.setMyLocationEnabled(true); tracker = new LocationTracker(context ) {
@Override public void onLocationFound(Location location) { // Do some stuff
log(String.valueOf(location.getLatitude()));
log(String.valueOf(location.getLongitude()))
; LatLng my_location = new LatLng(location.get Latitude(), location.getLongitude()); if (myMarker == null) { log("Marker null"); myLatitude = location.getLatitude(); myLongitude = location.getLongitude(); myMarker = mMap.addMarker(new MarkerOpti ons().position(my_location).icon(iconMe)); CameraPosition myPosition = new CameraPo sition.Builder()
.target(my_location).zoom(15).bu
ild();
mMap.animateCamera(CameraUpdateFactory.n
52
5. Halaman Home user ewCameraPosition(myPosition)); } else { log("Marker remove and update!");
myMarker.remove(); myMarker = mMap.addMarker(new MarkerOpti
ons().position(my_location).icon(iconMe)); } }
@Override public void onTimeout() { log("Connection timeout!"); } };
tracker.startListening(); } }
53
