Tutorial Aplikasi android client server menggunakan REST API Django
- 1. PEMBUATAN APLIKASI ANDROID SISTEM INFORMASI AKADEMIK (SIAK) MyPNJ BERBASIS CLIENT SERVER MENGGUNAKAN API DJANGOREST DAN PYTHON DJANGO SERVER TUGAS AKHIR: Mata Kuliah: Mobile Programming Oleh: Abdul Aziz Subayu 4615030009 – TMJ 5 PROGRAM STUDI TEKNIK MULTIMEDIA DAN JARINGAN JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER POLITEKNIK NEGERI JAKARTA Jln. Prof. Dr. G.A. Siwabessy, Kampus UI Depok 16424 Telp: +6221 7270044 Fax : (021) 7270034
- 2. Pendahuluan Aplikasi Sistem Informasi Akademik (SIAK) bertujuan untuk memudahkan mahasiswa untuk melihat informasi mengenai dirinya yang terdapat pada database universitas ia menuntut ilmu. Informasi tersebut berupa biodata diri, jurusan yang ia masuki, nilai yang ia dapat per semester, dan melihat jumlah ketidakhadiran selama ia menuntut ilmu di universitas tersebut. Untuk menghubungkan aplikasi android dengan server python Django, diperlukan sebuah REST API yang harus dibuat terlebih dahulu. REST API ini berguna sebagai perantara informasi antara client dan server dengan bentuk data yang dipertukarkan adalah JSON. Untuk membuat REST API pada server Python, akan digunakan sebuah framework, yaitu djangorestframework. Pada laporan ini akan ditunjukkan dari cara menginstall Django dan djangorestframework dengan mengasumsikan sudah terinstallnya Python versi 3.6 pada perangkat yang digunakan. Pada pembuatan system informasi ini juga akan dibuat aplikasi berbasis GUI yang akan digunakan oleh admin jurusan untuk memasukkan dan mendaftarkan data mahasiswa ke server Django dan juga akan membuat aplikasi berbasis CLI untuk memasukkan data nilai mahasiswa ke server Django agar keduanya dapat ditampilkan pada aplikasi androidnya. Untuk pembuatan aplikasi GUI digunakan modul python PyQt5. Requirement Software Berikut adalah daftar software yang diperlukan untuk membuat project ini: - Python versi 3.6 - PyCharm IDE Python versi 2017.3.2 (opsional) - Python Django versi 2.0 (install melalui terminal/cmd dengan ketik 'pip install django')* - Python Djangorestframework versi 3.7.7 (install melalui terminal/cmd dengan ketik 'pip install djangorestframework')* - Python PyQT5 versi 5.9.2 (install melalui terminal/cmd dengan ketik 'pip install PyQT5')* - Python requests versi 2.18.4 (install melalui terminal/cmd dengan ketik 'pip install requests')* - QtCreator edisi open-source versi 4.5.0 - Android Studio versi 3.0.1 *Perlu melakukan instalasi Python versi 3.x terlebih dahulu Fungsi Berikut adalah fungsi/firtur yang diterapkan pada aplikasi android yang akan dibuat nanti: - Firtur Login yang menggunakan NIM dan password mahasiswa yang sudah didaftarkan ke server pada aplikasi GUI. - Firtur Update data, hanya data email, nomor telepon, dan alamat saja yang dapat diubah pada aplikasi menggunakan method put.
- 3. - Penggunaan Screen Slide page slider untuk berpindah dari tab profil ke tab nilai dan tab kompen. Pembuatan 1. Pembuatan API REST pada server Django. 1.1 Menginstall dependency yang diperlukan Langkah ini mengasumsikan terinstallnya Python versi 3.x pada perangkat yang digunakan untuk pembuatan proyek. Dependency yang diperlukan adalah Django, djangorestframework, PyQt5, dan requests. Untuk menginstallnya (instalasi memerlukan koneksi internet) buka cmd/terminal lalu ketikkan: Pip install <nama dependency> Contoh: pip install Django Jika tidak bisa, artinya Python belum dimasukkan ke dalam PATH dari system variable (jika menggunakan Windows), dan untuk pengguna Linux harusnya tidak ada masalah, karna Python sudah terinstall otomatis di Linux. Untuk cara supaya Python dapat dijalankan langsung pada cmd merupakan diluar dari scope laporan ini. Anda dapat mencari caranya di Internet. Setelah memasukkan sintaks diatas, tunggu sampai seluruh paket dependency didownload dan terinstall dengan benar. 1.2 Membuat Project Server Django Setelah terinstallnya seluruh dependency, buka CMD/terminal, lalu arahkan ke direktori/folder yang akan dipakai untuk menyimpan file dari server Django (seperti folder pada xampp). Lalu ketikkan sintaks berikut di cmd/terminal: Django-admin startproject <nama project> Contoh: Django-admin startproject universitas Jika tidak bisa, coba mengunakan sintak berikut: Python –m django-admin startproject <nama project> Perhatikan pada gambar, folder universitas, hasil dari sintaks tersebut akan diletakkan pada folder Documents. Jika sudah ada, maka gunakan CMD/terminal untuk masuk ke folder universitas tersebut. 1.2 Membuat Model Mahasiswa, Akun, dan Penilaian pada server Django Langkah selanjutnya setelah membuat project Django adalah membuat model dari objek yang akan digunakan untuk penyajian, penyimpanan, dan pertukaran data pada server Django. Model ini akan bertindak seperti peratara antara modul pywcgi Django dengan database bawaan Django. Django menggunakan database sqlite3 sebagai database bawaannya. Dengan
- 4. membuat model pada Django, kita tidak perlu secara langsung melakukan segala operasi pada databasenya, melainkan cukup dengan melakukan operasi pada model yang dibuat. Sebelum membuat model tersebut, pertama kita harus membuat webapp untuk model tersebut. Webapp pada Django bertindak seperti sebuah direktori dari sebuah web server yang akan diakses. Didalam webapp inilah kita akan membuat model, dan didalam webapp ini juga dispesifikkan bagaimana representasi model pada web browser. 1.2.1 Membuat Webapp dan Model Mahasiswa Model Mahasiswa ini akan menampung data-data dasar tentang mahasiswa tersebut. Langkah pertama yang dilakukan adalah membuat webapp bernama mahasiswa. Untuk melakukannya buka cmd/terminal yang telah diarahkan ke folder universitas yang telah dibuat pada langkah sebelumnya, lalu masukkan sintaks berikut: Jika sudah akan muncul folder mahasiswa didalam folder universitas. Masuk kedalam folder mahasiswa tersebut dan buka file “models.py” dengan text editor atau IDE python pilihan kalian. Dan isikan seperti berikut: Class mahasiswa yang kita buat akan mewariskan seluruh fungsi dari class Model yang dimiliki Django. Lalu kita memasukkan variable didalam class ini, dimana variable tersebut akan menjadi nama kolom didatabase dan nama class akan menjadi nama table. Variable GENDER merupakan tuple yang akan digunakan sebagai pilihan isi dari variable gender. Variable pada class ini diisi sesuai dengan tipe data yang akan ia simpan. CharField akan bertindak layaknya tipe data VARCHAR pada database, TextField akan bertindak seperti tipe data BLOB pada database dan DateField akan bertindak seperti tipe data DATE pada database. Variable foto sengaja dibuat TextField karena foto akan kita encode mengunakan encoding base64. Sedangkan validators digunakan untuk memvalidasi inputan apakah yang dimasukkan hanya sepasi saja, jika iya, maka akan mengeluarkan exception ValidationError. Decorator max_length berfungsi banyaknya karakter yang akan disimpan, blank berfungsi apakah kolom
- 5. tersebut diperboleh kan kosong atau tidak, dan decorator primary_key untuk menentukan bahwa variable tersebut merupakan primary_key untuk database. Jika sudah, save file tersebut. 1.2.2 Membuat Webapp dan Model Akun Model Akun ini akan berfungsi sebagai akun untuk firtur login pada Aplikasi Android kita sebelum masuk ke profil mahasiswa. Akun yang akan digunakan untuk login adalah nim dari mahasiswa itu sendiri yang ingin mengakses data dirinya. Untuk langkahnya sama seperti langkah sebelumnya, buka CMD/terminal, arahkan ke folder/direktori universitas dimana file “manage.py” berada. Lalu ketikkan sintaks berikut: Sama seperti langkah sebelumnya, masuk kedalam folder akun yang baru saja dibuat oleh Django, lalu edit isi dari file “models.py” menggunakan text editor/IDE yang kalian pilih. Lalu isikan sebagai berikut: Sama seperti sebelumnya, class Akun yang kita buat akan mewariskan fungsi dari class Model dari modul models milik Django. Dan pada class ini terdapat dua variable, username dan password, yang akan menjadi kolom pada table Akun di database sqlite3 dari Django. 1.2.3 Membuat Webapp dan Model Penilaian Model Penilaian ini akan menampung data nilai tiap semester untuk tiap mahasiswa yang berbeda. Langkah yang dilakukan sama seperti dua langkah sebelumnya, yaitu memasukkan sintaks berikut: Jika sudah, masuk ke folder penilaian yang baru dibuat dan edit isi dari file “models.py” menggunakan text editor pilihan kalian sebagai berikut:
- 6. Class Nilai akan mewariskan fungsi dari class Model dari modul models milik Django, variable uid disini akan menampung isi yang sama dengan variable nim pada model mahasiswa, sebagai acuan bahwa nilai tersebut merupakan milik mahasiswa dengan nim sekian. Variable smtX akan menampung nilai yang dimasukkan pada aplikasi CLI yang akan dibuat nanti, variable ini menggunakan Charfield dikarenakan nilai yang dimasukkan akan kita encode sebagai cara untuk mengamankan data (namun untuk project yang sesungguhnya, disarankan menggunakan enkripsi yang kuat). 1.2.4 Migrasi Model Django ke database Sqlite3 Django. Setelah semua model yang kita perlukan dan inginkan terlah dibuat beserta attribut yang dimilikinya, langkah selanjutnya adalah memigrasikan Model tersebut menjadi table dan kolom untuk database sqlite3 yang dipakai oleh Django. Caranya adalah mengedit isi file “settings.py” yang ada didalam folder universitas dalam folder universitas. Didalamnya edit pada bagian INSTALLED_APPS dan tambahkan pada bagian ALLOWED_HOSTS, menjadi berikut:
- 7. Jika sudah, selanjutnya buka CMD/terminal lalu arahkan ke folder/direktori dimana file “manage.py” berada, lalu masukkan sintaks berikut: - Python manage.py makemigrations mahasiswa Tunggu sampai proses selesai, lalu kembali masukkan: - Python manage.py makemigrations akun Tunggu sampai proses selesai, lalu kembali masukkan: - Python manage.py makemigrations penilaian Tunggu sampai proses selesai, lalu kembali masukkan: - Python manage.py migrate Tunggu sampai proses selesai. jika sudah selesai maka Model yang telah kita buat sebelumnya sudah ada pada database sqlite3 bawaan Django dan tinggal menunggu untuk diisikan dengan data yang sesuai. Langkah selanjutnya adalah membuat serialisasi dari Model yang telah kita buat untuk ditampilkan pada REST API dari framework djangorestframework dalam bentuk objek JSON.
- 8. 1.3 Membuat Serialisasi dari Model Mahasiswa, Akun, dan Nilai Langkah selanjutnya setelah membuat model adalah membuat serialisasi dari model tersebut agar dapat ditampilkan dalam bentuk objek JSON pada REST API. Serialisasi model tersebut dapat kita buat dengan menggunakan framework djangorestframework. Langkah yang dilakukan adalah, masuk kedalam salah satu folder dari Model, pada laporan ini adalah folder mahasiswa. Lalu buat sebuah file baru berextensikan “.py” dengan nama “serializers”. Edit isi file tersebut menggunakan teks editor pilihan kalian dan isikan sebagai berikut: Masing-masing class yang dibuat akan mewariskan fungsi dari class ModelSerializer yang berguna untuk menserialisasikan model yang kita buat, diwakilkan dengan variable model, dan kolom/variable mana saja dari model, diwakilkan dengan variable fields yang berupa tuple, yang ingin kita ubah menjadi objek JSON untuk ditampilkan, dan dilakukan operasi pada REST API nanti. 1.4 Membuat REST API dari Serialisasi Model Setelah pembuatan serialisasi model selesai, langkah selanjutnya adalah menentukan operasi apa saja yang dapat dilakukan terhadap serialisasi tersebut (apakah GET, POST, PUT, atau DELETE) dengan memanfaatkan decorators dari api_view milik djangorestframework untuk membuat tampilan dari REST API dari serialisasi tersebut. Caranya adalah dengan mengedit isi dari file “view.py” dari folder mahasiswa dan isikan sebagai berikut:
- 10. Dalam file “view.py” tersebut kita membuat beberapa fungsi yang memanfaatkan decorators milik djangorestframework sebagai decorators dari fungsi yag kita buat, decorators tersebut berfungsi sebagai acuan tipe request yang dibuat oleh client dalam mengakses objek JSON dari serialisasi model kita, Jika hanya ingin melihat isi dari objek JSON maka dapat menggunakan method GET, untuk mengisikan data baru ke objek JSON maka dapat menggunakan method POST, untuk mengubah data JSON yang lama menjadi yang baru dapat menggunakan method PUT, dan untuk menghapus data JSON dapat menggunakan method DELETE. Selain itu kita mengimport modul Response dari djangorestframework untuk memberikan informasi log kepada server mengenai request yang dilakukan oleh client ke server dan response yang diberikan server ke client. Response tersebut juga memberikan logging status pada system logging server untuk mengetahui apakah operasi tersebut berhasil dilakukan atau terdapat kesalahan seperti not found, bad request, internal server error, dan lainnya. Mahasiswa.objects.all() berfungsi untuk menampilkan seluruh data JSON yang ada pada REST API jika method yang diminta adalah GET. Sedangkan Mahasiswa.object.get(nim=nim) artinya akan mengambil parameter nim dan menampilkan data JSON yang memiliki nim sesuai dengan parameter nim yang diberikan kepada REST API saat mengakses url dari REST API. Sedangkan Mahasiswa.DoesNotExist merupakan fungsi bawaan dari class Model yang diturunkan ke class Mahasiswa yang digunakan jika data JSON mengenai mahasiswa tersebut tidak ada saat diakses dan mengembalikan nilai exception yang akan ditangkap dan ditangani.
- 11. Seri.is.valid() merupakan fungsi yang diwariskan dari class ModelSerializers yang berfungsi untuk membandingkan Model yang diserialisasikan dengan data yang dikirimkan ke REST API, jika valid maka data yang dikirimkan akan disimpan, ditandai dengan sintaks seri.save(). Jika tidak sesuai maka server akan mengirimkan response error ke client dengan status 400 Bad Request memanfaatkan modul Response dan Status milik djangorestframework. REST API untuk penilaian kita pisah dari REST API untuk mahasiswa dan akunnya. Untuk membuat REST API untuk serialisasi penilaian kita lakukan edit file “views.py” yang ada pada folder penilaian, dan isikan sebagai berikut: Setelah REST API selesai dibuat, langkah selanjutnya adalah menentukan path url untuk masing – masing fungsi dari REST API tersebut
- 12. 1.5 Membuat URL path REST API Langkah yang harus dilakukan selanjutnya adalah membuat path URL agar REST API yang telah dibuat sebelumnya dapat diakses melalui url dari web browser atau url yang akan ditanamkan pada aplikasi GUI, aplikasi CLI, dan aplikasi android yang nanti akan dibuat. Untuk melakukannya adalah kita akan mengedit file “urls.py” yang ada didalam folder universitas yang didalam folder universitas lagi. Edit isi dari file tersebut seperti berikut: Masing – masing url tersebut, ketika diakses akan menghubungkan dengan REST API terkait untuk menangani request yang dilakukan oleh client ke server. Format dari url tersebut menggunakan regular expression (regex) dari raw string Python yang ditandai dengan huruf ‘r’sebelum tanda petik (tanda dimulainya string) Setelah semua langkah selesai dilakukan, kita dapat mencoba menjalankan server Django dan mengakses url yang telah kita buat sebelumnya pada web browser. Untuk menjalankan server Django, buka CMD/terminal dan arahkan ke folder yang ada file “manage.py” lalu ketik: Python manage.py runserver
- 13. 2. Membuat Aplikasi Form GUI dengan PyQT5 REST API yang telah dibuat sebelumnya belum memiliki data apapun yan dapat ditampilkan dalam bentuk objek JSON pada server Django. Untuk itu kita perlu membuat sebuah aplikasi GUI yang akan berperan untuk memasukkan data ke server Django yang akan ditampilkan menjadi objek JSON. Aplikasi ini dalam sebuah Sistem Informasi Akademik dapat diletakkan pada komputer Admin, sehingga data mahasiswa yang diisikan tidak semena-mena dan sepenuhnya menjadi tanggung jawab Admin. Aplikasi ini mempermudah admin untuk mengisi data mahasiswa ke database server Django dibandingkan ia harus mengakses REST API yang melakukan post data mahasiswa dan memasukkan datanya secara manual dalam bentuk JSON. Langkah yang harus dilakukan untuk membuat aplikasi GUI ini adalah: 1. Membuat sebuah file berekstensi “.py”, dengan nama sesuai selera. 2. Membuka aplikasi QtCreator. Saat dibuka akan muncul tampilan seperti ini ketika memilih pilihan Create: 3. Buatlah tampilan seperti berikut pada aplikasi QtCreator:
- 14. - Kotak putih tersebut adalah widget Text Edit yang terdapat pada Bagian Input Widgets. - Untuk drop-down menu pada gender pilih Widget ComboBox pada bagian Input Widget. Untuk mengisikan isiannya, klik 2 kali pada combobox tersebut, lalu klik tombol + untuk menambahkan isian. - Untuk bagian tanggal lahir gunakan Widget Date Edit pada bagian Input Widget. - Untuk menulis keterangan, pilih Widget Label dibagian Display Widget. - Untuk tombol, pilih Push Button pada bagian Buttons. Setelah sesuai, ganti tulisan pada object name dibagian property editor sebelah kanan untuk masing-masing Text Edit, Button, ComboBox, DateEdit sesuai selera, disarankan berkaitan dengan fungsinya. Contoh penamaannya:
- 15. Penamaan object tersebut dilakukan untuk mempermudah mereferensikan objek tersebut pada saat melakukan pemograman back-endnya. Jika sudah save difolder yang sama dengan file py yang baru saja dibuat. 4. Edit isi file py menjadi sebagai berikut: File .ui yang telah di save tadi, kita masukkan kedalam variable pada file py yang kita program, lalu membuat sebuah class yang mewariskan fungsi dari QMainWindow dan Ui_MainWindow yang diambil sebagai parameter dari pembuatan class.
- 16. Fungsi validate nim ini, akan memvalidasi apakah nim yang dimasukkan pada TextEdit nim sudah ada pada server atau belum, jika ada, maka data tersebut akan dipanggil dan dimasukkan ke TextEdit lain sesuai dengan datanya. Jika tidak, maka fungsi ini harus menangkap exception/error yang diberkan oleh server sebagai responnya, agar program tidak crash dan masih tetap dipakai. Atau ketika server tidak dapat diakses yang memberikan kode error 500 Internal Server Error. Jika data sudah ada, maka tombol submit akan dinonaktifkan dan tombol update akan diaktifkan, ketika tombol update ditekan, maka akan terjadi proses request ke server dengan menggunakan metode PUT untuk mengganti data lama dengan data baru yang terdapat pada fungsi update_data(), jika tidak maka akan membuat aplikasi akan membuat request dengan method POST untuk mengirimkan data yang baru ke server yang terdapat pada fungsi submit_form(). Kedua method tersebut menggunakan tipe data dictionary pada Python (setara dengan HashMap pada Java) untuk mengirimkan parameter data ke url REST API yang diakses menggunakan modul requests dari Python.
- 18. Baik fungsi submit_form() maupun fungsi update_data(), keduanya diharuskan untuk menangkap kemungkinan adanya exception/error yang diberikan oleh server untuk mencegah aplikasi dari crash dan menangani error tersebut. Respon server 400 Bad Request menandakan adanya data yang diisi secara tidak benar ataupun ada data yang tidak diisi. Lalu fungsi clear_input() berfungsi untuk mengembalikan isi dari TextEdit seperti semula dan mengaktifkan tombol submit kembali jika sebelumnya mengupdate data. Lalu __name__==”__main__” merupakan sintaks yang digunakan untuk menandakan bahwa ketika program ini dijalankan, maka dimulai dari bagian sintaks tersebut. Setara dengan fungsi int main() pada C++/C. Jika sudah selesai, maka kita coba jalankan. Caranya adalah buka CMD/terminal lalu arahkan kefolder dimana file py kalian berada, lalu ketik Python <nama file>.py Contoh: Python pyGuI.py
- 19. Maka akan tampil seperti berikut: Setelah dijalankan, jangan lupa untuk menjalankan server Djangonya juga menggunakan sintaks pada langkah sebelumnya. Lalu coba isikan data melalui aplikasi tersebut dan setelah diisikan, coba edit data yang baru saja dimasukkan. Lalu lihat pada web browser apakah data berhasil masuk atau tidak, dapat dilihat secara langsung seluruh datanya dengan memasukkan url (http://127.0.0.1:8000/mahasiswa) atau melihatnya satu persatu dengan url (http://127.0.0.1:800/mahasiswa/<nim>). Kita juga dapat melihat pada bagian user, apakah sudah terdaftar atau belum. Dengan memasukkan url pada browser (http://127.0.0.1:800/user/<nim>). Jika diakses akan muncul seperti berikut:
- 21. 3. Membuat Aplikasi CLI Pengisian Nilai REST API untuk Model Mahasiswa dan Akun sudah terisi menggunakan aplikasi GUI yang baru saja dibuat. Selanjutnya adalah mengisi data JSON pada REST API untuk Model Penilaian. Pengisian data untuk REST API ini akan menggunakan sebuah aplikasi CLI. Dalam Sistem informasi Akademik, aplikasi ini dapat memudahkan dosen untuk memasukkan nilai tiap semester dari tiap mahasiswa untuk direkap di server sehingga mahasiswa dapat melihat nilai yang mereka dapat per semesternya di apliaksi Android nanti. Langkah untuk membuat aplikasi berbasis CLI ini adalah sebagai berikut: 1. Buat sebuah file berekstensi .py dengan nama file sesuai dengan selera. 2. Edit isi file tersebut sebagai berikut: Sama seperti layaknya fungsi validate_nim() pada aplikasi GUI, fungsi ini juga mengambil data nim yang ada pada server untuk dibandingkan dengan yang di Input. Jika ada maka user dapat memasukkan nilai sesuai dengan tingkat mahasiswa. Tingkat/angkatan mahasiswa didapat dari nim yang dimasukkan. Setelah nilai dimasukkan, maka akan ditampung di variable dengan tipe data dictionary yang kemudian dikirim ke server dengan method POST menggunakan modul requests Python. Jika sudah, maka program akan kembali ke posisi awal.
- 24. Jalankan program yang baru dibuat ini untuk mengisi nilai dari data mahasiswa yang telah diisi sebelumnya agar dapat ditampilkan pada Aplikasi Android nanti. Untuk menjalankan program, buka cmd/terminal lalu arahkan ke folder dimana file py ini disimpan lalu ketikkan: Python <nama file>, contoh: Python FormNilai.py Jika sudah dimasukkan maka kita dapat melihat data yang telah dimasukkan di url nilai dari mahasiswa tersebut. url tersebut dapat diakses melalui browser dengan mengetikkan (http://127.0.0.1:8000/mahasiswa/<nim>/nilai). Contoh: http://127.0.0.1:8000/mahasiswa/4615030009/nilai
- 25. 4. Membuat Aplikasi Android MyPNJ untuk Mahasiswa Setelah semuanya telah selesai dilakukan, mulai dari membuat REST API, membuat aplikasi GUI untuk memasukkan data mahasiswa dan user ke REST API, membuat aplikasi CLI untuk memasukkan data nilai mahasiswa ke REST API, langkah selanjutnya adalah membuat aplikasi mobile pada Android untuk pengguna akhir (mahasiswa). Aplikasi di Android ini berguna untuk mahasiswa mengetahui informasi mengenai dirinya, informasi nilainya tiap semester, dan informasi ketidakhadiran dan keterlambatan. Untuk sementara, informasi ketidakhadiran dan keterlambatan akan dibuat secara dummy dan hardcode pada file Java dari Android Studio. Data dummy tersebut akan diambil dari data random. Tetapi untuk profil mahasiswa dan nilai mahasiswa akan mengambil dari REST API di server Django menggunakan method GET, serta mahasiswa dapat mengupdate data email, nomor telepon, dan alamatnya pada aplikasi dan dikirimkan ke server untuk mengganti data yang lama dengan data yang baru dimasukkan dengan menggunakan method PUT. Berikut langkah yang dilakukan untuk membuat aplikasi android MyPNJ: 1. Buka Android Studio 2. Pilih Start New Android Studio Project Masukkan Application Name dengan MyPNJ dan company domain sesuai selera Pilih minimum SDK adalah API15 Lalu pilih Empty Activity Isi Activity Name dengan “LoginActivity” Finish 3. Membuat Layout Login Activity Pada tampilan sebelah kiri, buka folder folder app res layout. Didalamnya terdapat sebuah file .xml yang bernama activity_login.xml. File XML ini merupakan file yang akan menjadi tampilan awal dari Aplikasi Android yang dibuat. Isikan file xml tersebut sebagai berikut:
- 27. Pada file xml tersebut kita menggunakan 2 EditText yang akan digunakan oleh user untuk memasukkan nim dan password yang telah didaftarkan. Kedua EditText tersebut diberikan id sebagai perantara front-end (xml) dengan back-end (java) sama seperti saat kita membuat aplikasi GUI tadi. Lalu terdapat 1 Image View yang menggunakan logo Politeknik Negeri Jakarta untuk ditampilkan pada halaman login di aplikasi. Lalu terdapat 1 Button yang berfungsi untuk berpindah halaman saat kita tekan, sebelum berpindah halaman, akan dilakukan proses otentifikasi pada back-end dimana input yang dimasukkan oleh user akan dibandingkan dengan data yang ada pada server. Data dari server didapat dengan menggunakan method GET lalu keduanya dibandingkan. Jika sama, maka user akan diarahkan ke halaman selanjutnya. 4. Menambahkan library Volley Library volley pada android berguna untuk memudahkan pengembang untuk melakukan fungsi HTTP Request. Library ini sering digunakan bagi para pengembang aplikasi berbasis client server untuk menghubungkan aplikasi mereka dengan server mereka, sehingga keduanya dapat berkomunikasi dan bertukar informasi. Untuk menambahkan library Volley pada android studio kita. Dibagian kanan terdapat tombol bertuliskan Gradle, klik lalu klik kanan pada :app dan pilih OpenGradle Config jika sudah terbuka maka tambahkan library volley sebagai berikut:
- 28. Setelah ditambahkan, klik tulisan “Sync Now” pada bagian atas. Proses ini memerlukan koneksi internet. 5. Membuat file Application.java Setelah selesai menambahkan library Volley, langkah selanjutnya adalah membuat file Application.Java. File java ini akan melakukan sebuah fungsi untuk melakukan query dari requests yang dilakukan menggunakan library Volley dibelakang layar. Untuk membuat file ini, klik kanan pada folder package kita dibagian kiri New Java Class, lalu masukkan nama file Application.java. Lalu isikan sebagai berikut:
- 30. 6. Membuat file LoginActivity.java File java ini berfungsi sebagai back-end dari file xml activity_login.xml. Saat memilih Empty Activity sebelumnya, file ini akan dibuat secara otomatis dibagian kiri buka folder app java (folder yang tidak ada tulisan test dan AndroidTest). Selanjutnya adalah mengubah isi dari file ini. File ini akan mengambil input dari user (nim dan password) kemudian membandingkannya dengan data yang didapat dari server Django menggunakan method GET ketika tombol Login di tekan. Jika sama, maka user akan diarahkan ke Activity selanjutnya menggunakan Intent. Nim yang didapat sebelumnya akan dioper ke activity selanjutnya sebagai acuan untuk mengambil data profil dan nilai dari server menggunakan Intent. Berikut isi dari LoginActivity.java:
- 31. 7. Membuat activity_home.xml dan HomeActivity.java File xml dan java ini berguna sebagai wadah untuk file fragment yang akan dibuat nanti. Pada file ini akan diterapkan Screen Slide Pager, dimana akan menampilkan tampilan dari file xml fragmen per halaman, sehingga user dapat berpindah tampilan dari profil ke halaman nilai dan halaman kompen tanpa beganti activity dan tetap pada activity yang sama. Berikut adalah isi dari activity_home.xml:
- 32. Selanjutnya adalah isi dari HomeActivity.java:
- 33. Setelah bagian HomeActivity.java dan activity_home.xml selesai dibuat. Selanjutnya adalah membuat file model yang akan menampung data yang didapat dari server ke sebuah object. Kita akan membuat dua file model, satu model mahasiswa yang akan dipakai untuk fragment profil mahasiswa nanti dan satu lagi model nilai yang akan dipakai di fragment nilai nanti. 8. Membuat model Mahasiswa.java dan NilaiMahasiswa.java Untuk membuat kedua file yang akan menampung data yang didapat dari server ini, pertama klik kanan pada file package kalian pilih New pilih Package. Beri nama package tersebut model. Lalu klik kanan pada folder model New Java Class. Beri nama Mahasiswa.java. Isikan Mahasiswa.java sebagia berikut: Jika sudah, klik kanan pada area kosong Generate… pilih Getter and Setter Pilih seluruh yang ada pada menu pilihan. Jika sudah, selanjutnya adalah membuat model NilaiMahasiswa.java. Langkah yang dilakukan sama seperti membuat Mahasiswa.java. Lalu isikan NilaiMahasiswa.java seperti berikut: Jika sudah, klik kanan pada area kosong Generate… pilih Getter and Setter Pilih seluruh yang ada pada menu pilihan.
- 34. 9. Membuat Fragment Profiil Mahasiswa. Fragment ini akan berfungsi untuk menampilkan data mahasiswa yang didapat dari server kepada user. Data yang diambil dari server masih berupa JSON, oleh karena itu diperlukan library JSONObject untuk mengambil data yang telah dimasukkan menjadi objek JSON sebelum ditampilkan kepada user. File java dan xml dari fragment ini akan mengisi tempat pada file Activity dari HomeActivity dan activity_home dan dapat berganti tempat dengan file Fragment untuk menampilkan nilai dan file fragment untuk menampilkan ketidakhadiran. Pada file Fragment ini juga user dapat mengupdate data email, nomor telepon, dan alamat mereka dan kemudian dikirimkan ke server saat user menekan tombol simpan yang sebelumnya disembunyikan. Untuk mengubah data yang ditampilkan sebelumnya pada EditText dan menampilkan tombol simpan, user harus menekan tombol Update terlebih dahulu. Untuk memulai, klik kanan pada folder layout dibagian kiri pilih New Layout Resource File. Beri nama file ini page_one.xml. Jika sudah, isikan sebagai berikut:
- 40. Setelah selesai, klik kanan pada package name kalian lalu pilih New Package. Beri nama packagenya pager. Kemudian Klik kanan pada folder pager New Java Class. Masukkan nama PageOne.Java. Jika sudah isikan sebagai berikut:
- 45. Dapat dilihat bahwa nim yang dimasukkan pada Intent pada Activity sebelumnya akan di ambil sebagai acuan untuk mengambil object JSON tertentu yang memiliki nim yang sama saja. Proses pengambilan data dilakukan dengan Method GET menggunakan library Volley dalam bentuk masih berupa objek JSON, kemudian data tersebut dimbil dari objek JSON dan diletakkan pada objek model Mahasiswa dari class Mahasiswa yang sebelumnya telah dibuat. Setelah itu, data yang disimpan pada objek model Mahasiswa dipanggil kembali agar datanya ditampilkan ke TextView dan EditText yang ada pada file xml agar user dapat melihatnya. Kemudian data email, nomor telepon, dan alamat dapat user ubah dengan menekan tombol update. Dengan ditekannya tombol update, maka tombol simpan akan muncul dan user dapat mengubah email, nomor telepon dan alamatnya. Saat user menekan tombol simpan, Aplikasi akan menghubungi server dengan melakukan request untuk menggantikan data yang lama pada server dengan data yang baru yang dikirimkan melalui aplikasi dengan menggunakan method PUT. Untuk mengirimkannya dengen method PUT, data harus dibuat menjadi tipe data Map lalu dipassing sebagai parameter dari request yang dilakukan. 10. Membuat Fragment Nilai Mahasiswa Sama dengan Fragment Profil mahasiswa. Fragment ini berfungsi untuk menampilkan nilai mahasiswa yang sebelumnya telah dimasukkan menggunakan aplikasi CLI dan diletakkan di Server. Fragment ini akan mengambil data tersebut melalui REST API Penilaian menggunakan method GET dan menampilkannya ke user.
- 46. Langkah yang dilakukan sama dengan membuat fragment profil mahasiswa. Klik kanan pada folder layout pilih New pilih Layout Resource File. Lalu beri nama page_two.xml. Setelah itu isikan sebagai berikut:
- 50. Setelah selesai membuat file xmlnya, selanjutnya adalah membuat file Javanya. Caranya sama dengan sebelumnya, klik kanan pada folder pager New Java Class. Masukkan nama PageTwo.Java. Jika sudah isikan sebagai berikut:
- 53. Sama seperti fragment sebelumnya, fragment ini mengambil nim yang telah dipassing dari Activity sebelumnya melalui Intent untuk digunakan sebagai acuan pengambilan data nilai. Data nilai dari server diambil menggunakan method GET dan data yang diambil masih berupa JSON. JSONObject digunakan untuk mengambil data pada object JSON dan meletakkannya ke objek model NilaiMahasiswa. Objek model ini kemudian dipanggil kembali untuk menampilkan data yang telah disimpan pada objek tersebut ke TextView yang ada pada file xml untuk diperlihatkan ke user. 11. Membuat Fragment Ketidakhadiran Fragment ini akan mengambil data nim yang di passing melalui Intent dari Activity sebelumnya untuk mengambil data nama mahasiswa saja yang akan ditampilkan pada fragment ini. Data mengenai ketidakhadiran pada fragment ini masih berupa data dummy yang didapat dari penggunaan library Random milik java. Hasil data random tersebut kemudian ditampilkan pada TextView file xml. Langkah yang dilakukan pertama adalah membuat file xml. Klik kanan pada folder layout New Layout Resource File. Beri nama page_three.xml. kemudian isikan sebagai berikut:
- 57. Setelah selesai membuat file xml, selanjutnya adalah membuat file Java dari Fragment Ketidakhadiran ini. Caranya dengan klik kanan pada folder pager New Java Class. Beri nama PageThree.java kemudian isikan sebagai berikut:
- 59. 12. Menambahkan Permission Agar aplikasi kita dapat berjalan pada jaringan dan terjadi komunikasi antara aplikasi dengan server, kita perlu menambahkan permission untuk mengakses Internet. Untuk menambahkan permission tersebut, kita harus mengubah file Android manifest.xml. Selain itu kita juga harus menambahkan file Application.Java ke android manifest agar dapat berjalan dibelakang layar. Ubahlah Android manifest.xml pada bagian tertentu menjadi seperti berikut:
- 60. 13. Menghilangkan Action Bar Kita perlu menghilagkan Action Bar pada bagian atas aplikasi untuk menambahkan ruang dari tampilan aplikasi yang kita buat. Selain itu kita tidak memerlukan Action Bar pada aplikasi kita ini. Untuk menghilangkannya, pada bagian kiri pilih app res values styles.xml. Didalamnya ubah menjadi seperti berikut: 14. Menjalankan Aplikasi Sebelum menjalankan Aplikasi Android yang telah dibuat. Server Django harus dijalankan terlebih dahulu menggunakan IP address laptop yang terhubung satu jaringan dengan perangkat mobile Android yang memiliki aplikasi tersebut. Untuk menjalakan server Django agar dapat diakses ke LAN, buka CMD/terminal arahkan ke folder dimana file “manage.py” berada lalu ketikkan: Python manage.py runserver <IP Laptop>:<port yang diinginkan> Contoh: Python manage.py runserver 192.168.43.146:8000
- 61. 15. Tampilan Aplikasi Berikut adalah tampilan dari aplikasi MyPNJ yang telah dibuat: