Kita pakai cara yang mudah yaitu menggunakan webview dan bahasa pemrograman java pada android studio. Cara ini cukup mudah dipahami bahkan oleh para pemula sekalipun. Maka sangat cocok sekali kita terapkan.
3. Pengguna Linux
Jika dilihat dari persyaratan di atas, dibutuhkan minimal RAM 8 gb. Namun jika memang laptop atau PC kita hanya memiliki RAM 4GB saja, jangan khawatir, IDE android studio masih bisa jalan, meskipun kurang lancar. Tips untuk sedikit memperlancar pemrograman pada kondisi seperti ini adalah gunakan device/smartphones asli yang dihubungkan melalui kabel data ketika akan melakukan debugging atau testing aplikasi.
Di dalam sintaks <body> kita masukkan beberapa baris kode berikut ini:
Sebelumnya mari kita siapkan beberapa perlengkapan yang diperlukan untuk melakukan kodingan atas project kita, yaitu:
1. Laptop atau PC.
2. IDE Android Studio, jika belum terinstal di laptop/komputer anda lebih baik install dulu. Bisa download IDEnya di SITUS RESMI DEVELOPER ANDROID.
3. Program editor coding seperti notepad++ atau visual studio code atau program lainnya.
Bagi pemula ada beberapa hal yang perlu diperhatikan terutama terkait dengan spek Laptop atau PC yang dipakai dalam melakukan pemrograman. Hal ini dikarenakan program Android Studio akan berjalan dengan normal jika menggunakan spek laptop atau PC yang direkomendasikan. Adapun Persayaratan sistem yang direkomendasikan adalah sebagai berikut:
1. Pengguna Windows
2. Pengguna Mac
Karena biasanya yang menyebabkan IDE berjalan lambat adalah karena PC/Laptop harus memuat emulator android ketika melakukan testing aplikasi/debugging.
Membuat Tampilan Web Aplikasi Kamus Bahasa Sunda
Seperti yang saya katakan sebelumnya, bahwa aplikasi kita akan dibuat dengan webview di android studio. Jadi yang perlu kita buat pertama kali adalah tampilan kamus kita sebagai website.
Jadi, bagi para pemula diharapkan sedikit mengerti tentang bahasa html, css dan javascript terutama jquery). Yah, layaknya kita membuat website statis.
Ada beberapa file css dan jquery yang perlu kita masukkan di dalam project kita. Silahkan download file css dan jquery yang dibutuhkan di link di bawah ini:
Masukkan file yang sudah kita download ke dalam folder baru di dalam project kita. Kita kasih nama folder tersebut dengan dengan nama "css". Lalu kita buat satu file html dengan nama index.html di dalam folder project kita. jadi kurang lebih tampilan folder kita adalah seperti gambar di bawah ini:
Sedangkan isi dari folder css kita adalah sebagai berikut:
Kita mulai pembuatan kamus terjemahan sunda kita dengan membuka file index.html dengan editor seperti notepad++, visual studio code, atau editor lainnya.
Lalu kita ikuti beberapa tutorial di bawah ini untuk mengisi file index.htmlnya.
Seperti yang kita ketahui bahwa struktur dasar program html terdiri dari bagian head dan body. Nah di bagian <head>, kita masukkan path untuk css dan jquery yang tadi kita letakkan di folder css. Kurang lebih tampilan programnya seperti ini:
<html><head><meta charset="utf-8" /><link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"><script src="css/jquery.js"></script><script src="css/jquery.mobile-1.3.2.min.js"></script></head><body></body></html>
Penjelasan:
1. Sintaks html selalu dimulai dengan <html> dan di akhiri dengan sintaks </html>.
2. Pada bagian <head> .....</head>. Kita panggil link yang mengarahkan pada css (untuk mengatur tampilan halaman website kita) dan script javascript/jquery yang kita miliki).
Setelah bagian head kita buat. Langkah selanjutnya, kita tambahkan file css lagi ke dalam file index.html kita.
Jadi file css itu dapat ditulis langsung di dalam kodingan file index.html kita atau kita ambil dari luar seperti yang kita buat pada bagian head. Nah pada eksekusinya, coding css yang ada di dalam file kodingan utama akan dieksekusi lebih dulu dibandingkan dengan css yang berasal dari luar. Jadi script css yang kita tuliskan di dalam index.html akan lebih diutamakan dibandingkan dengan file css dari luar.
Berikut file css yang perlu ditambahkan:
<style>#t{text-align:justify; line-height:1.7;} #t h3{padding-bottom:10px;border-bottom: 6px double #3DB50E;margin-bottom:50px} img{max-width:100%;}.arab{font-size:25px;line-height: 2;direction:rtl;text-align:justify}#c{margin-bottom:5px}</style><style>* {box-sizing: border-box;}#myInput {background-position: 10px 10px;background-repeat: no-repeat;width: 100%;font-size: 12px;padding: 12px 10px 12px 20px;border: 1px solid #ddd;margin-bottom: 12px;}#myTable {border-collapse: collapse;width: 100%;border: 0px solid #ddd;font-size: 12px;}#myTable th, #myTable td {text-align: left;padding: 12px;}#myTable tr {border-bottom: 1px solid #ddd;}#myTable tr.header, #myTable tr:hover {background-color: #f1f1f1;}</style>
Kita masukkan file di atas sebelum sintaks <body>.
Selanjutnya kita akan membuat script pada bagian <body>.....</body>. Pada bagian ini, kita akan membuat satu buah script javascript dan juga beberapa kodingan hmtl dengan tujuan untuk menampilkan hasil pencarian dari arti kata di dalam kamus. Kurang lebih tampilan yang akhir dari aplikasi ini adalah seperti gambar di bawah ini:
<script>function myFunction() {var input, filter, table, tr, td, i;input = document.getElementById("myInput");filter = input.value.toUpperCase();table = document.getElementById("myTable");tr = table.getElementsByTagName("tr");for (i = 0; i < tr.length; i++) {td = tr[i].getElementsByTagName("td")[0];if (td) {if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {tr[i].style.display = "";} else {tr[i].style.display = "none";}}}}</script>
Baris kode di atas adalah baris kode javascript yang berguna untuk menyeleksi pencarian pada elemen id MyInput di tabel data yang akan kita buat nanti yaitu pada elemen myTable.
Selanjutnya kita akan membuat koding yang berkaitan dengan penyajian data dalam tabel. Berikut kode htmlnya:
<div data-role="page" id="page1" data-theme="c"><div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a"><a href="index.html" data-rel="back"data-rel="" data-icon="home" data-iconpos="" data-shadow="true" data-iconshadow="true">Beranda</a><h1>Kamus Bahasa Sunda-Indonesia</h1></div><div data-role="content"><div id="t"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table id="myTable"><tr class="header"><th style="width:100%;">Sunda</th><th style="width:100%;">Indonesia</th></tr><tr><td>aa</td><td> kakak</td></tr><tr><td>abah</td><td> ayah</td></tr><tr><td>abdi</td><td> saya</td></tr></table></div></div><div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="f"></div></div>
Kode di atas berfungsi untuk membuat tampilan berbentuk tabel. Dimana pada bagian atas terdapat kotak pencarian, yang akan mentrigger fungsi javascript myFunction. Fungsi MyFunction akan otomatis dijalankan untuk melakukan pencarian dan menampilkan datanya pada tabel yang kita buat.
Perhatikan kode yang saya buat dengan warna merah. Kode diatas digunakan untuk membuat tabel tempat data terjemahan di letakkan.
Pada kode yang berwarna hijau, disitulah kita meletakkan kata dan terjemahan bahasa sunda.
<tr><td>abdi</td><td> saya</td></tr>
Bagian <td>......</td> yang pertama adalah bagian kata dalam bahasa sunda. Sedangkan bagian <td>...</td> yang kedua adalah bagian terjemahan dalam bahasa indonesia.
Anda dapat meneruskan atau menambahkan jumlah kata yang diterjemahkan dengan menyalin bagian koding tersebut.
Kurang lebih jika disatukan, berikut koding ini harusnya dibuat:
<html><head><meta charset="utf-8" /><link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"><script src="css/jquery.js"></script><script src="css/jquery.mobile-1.3.2.min.js"></script></head><style>#t{text-align:justify; line-height:1.7;} #t h3{padding-bottom:10px;border-bottom: 6px double #3DB50E;margin-bottom:50px} img{max-width:100%;}.arab{font-size:25px;line-height: 2;direction:rtl;text-align:justify}#c{margin-bottom:5px}</style><style>* {box-sizing: border-box;}#myInput {background-position: 10px 10px;background-repeat: no-repeat;width: 100%;font-size: 12px;padding: 12px 10px 12px 20px;border: 1px solid #ddd;margin-bottom: 12px;}#myTable {border-collapse: collapse;width: 100%;border: 0px solid #ddd;font-size: 12px;}#myTable th, #myTable td {text-align: left;padding: 12px;}#myTable tr {border-bottom: 1px solid #ddd;}#myTable tr.header, #myTable tr:hover {background-color: #f1f1f1;}</style><body><script>function myFunction() {var input, filter, table, tr, td, i;input = document.getElementById("myInput");filter = input.value.toUpperCase();table = document.getElementById("myTable");tr = table.getElementsByTagName("tr");for (i = 0; i < tr.length; i++) {td = tr[i].getElementsByTagName("td")[0];if (td) {if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {tr[i].style.display = "";} else {tr[i].style.display = "none";}}}}</script><div data-role="page" id="page1" data-theme="c"><div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a"><a href="index.html" data-rel="back"data-rel="" data-icon="home" data-iconpos="" data-shadow="true" data-iconshadow="true">Beranda</a><h1>Kamus Bahasa Sunda-Indonesia</h1></div><div data-role="content"><div id="t"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table id="myTable"><tr class="header"><th style="width:100%;">Sunda</th><th style="width:100%;">Indonesia</th></tr><tr><td>aa</td><td> kakak</td></tr><tr><td>abah</td><td> ayah</td></tr><tr><td>abdi</td><td> saya</td></tr></table></div></div><div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="f"></div></div></body></html>
Dan inilah tampilan hasil dari koding program di atas:
Sampai disini dulu kita buat tutorial pembuatan aplikasi android kamus bahasa sunda ke bahasa indonesianya. Selanjutnya di part 2 kita akan mengkonversi koding html yang sudah kita buat ini ke dalam aplikasi android dengan webview.
Di Part2, saya juga akan memberikan database terjemahan bahasa sundanya.
Harap berikan komentar jika anda menyukai postingan ini ya....terima kasih
loading...
Histats.com © 2005-
0 komentar:
Posting Komentar