bQsqpPcZvKyg8Vvzo6jobl9lgcVr4zroDMLffJhS
Bookmark

Membuat Aplikasi Native Webview Blog Keren Untuk Android Dengan Mudah

Siapa nih yang ingin membuat aplikasi untuk situs/blognya sendiri? Ada beberapa aplikasi yang memungkinkan kita untuk membuat aplikasi webview seperti Android Studio dan Appsgeyser. Namun kali ini admin akan memberikan tutorial membuat aplikasi webview native yang super keren tanpa menggunakan aplikasi. Cukup gunakan browser yang ada pada gadget kalian.

Cara membuatnya cukup mudah. Kalian harus mempersiapkan beberapa hal yakni seperti yang tertera di bawah ini:

  1. Logo. Untuk logo, silahkan pakai logo yang kalian pasang pada header blog. Jika tidak punya, silahkan buat pada aplikasi manipulasi gambar seperti Picsay Pro
  2. Ikon. Gunakan ikon yang memiliki resolusi tinggi. Disarankan ikon tersebut punya ukuran 1024 × 1024 satuan pixel. Usahakan untuk membuat ikon yang keren 😊.
  3. Sedikit pengetahuan CSS. Ini berfungsi untuk mengatur tampilan blog pada aplikasi. Nanti dijelaskan pada bagian tutorialnya. Dan wajib bagi kalian untuk mengetahui struktur template dari blog kalian.
  4. E-mail. Kalau e-mail pasti semuanya sudah punya bukan? E-mail ini nantinya akan dikirimkan sebuah link untuk menajemen aplikasi (terdapat link download).

Itu sudah yang harus dipersiapkan. Kita lanjut ke bagian tutorial.

Pertama-tama kalian kunjungi situs Gonative. Akan terbuka tab baru pada browser kalian. Di halaman utama Gonative, silahkan masukkan URL atau alamat blog kalian yang ingin dibuatkan apliaksi dan klik Build >>. Lengkapnya lihat gambar di bawah ini.
Nah, akan muncul tampilan baru. Silahkan masukkan e-mail kalian. Untuk nama aplikasi, akan mengikuti judul blog kalian. Jika tidak sesuai keinginan, kalian bisa mengubah nama aplikasinya. Dalam situs ini tidak tersedia bahasa Indonesia. Jadi pandai-pandailah berbahasa Inggris.
Gulir kebawah lagi, kalian akan menemukan menu General Styling dan klik menu tersebut. Di menu ini, kalian bisa mengatur ikon aplikasi jadi silahkan unggah ikon yang telah kalian sediakan tadi dengan mengklik Browse.

Kemudian ada lagi Custom CSS. Di Custom CSS, kalian bisa mengatur selektor mana yang tidak boleh tampil pada aplikasi nantinya. Sehingga tampilan blog dalam aplikasi akan terlihat rapi. Di bawah ini adalah settingan dari aplikasi blog ini.
Karena di sini kita hanya membuat aplikasi untuk platform android, maka dari itu kita abaikan saja untuk settingan iOS. Tapi jika ingin membuat juga untuk platform iOS bisa juga dan cara mengaturnya juga hampir sama dengan pengaturan tema android.

Masih di menu General Styling, silahkan pilih warna tema aplikasi yang ingin kalian terapkan. Ada Android Accent Color dan Android StatusBar Background.
Selanjutnya kalian akan mengatur apa yang akan tampil dalam proses launching atau dengan kata lain aplikasi sedang dalam proses permulaan. Di situ ada dua pilihan. Tetap menggunakan ikon sebagai gambar launching atau gunakan gambar lain.

Pilih salah satunya dan klik Generate. Secara default untuk gambar transparan latar akan berubah warna putih. Silahkan atur warna latarnya jika ingin warna yang lain.
Baru satu menu saja sudah agak terasa lama ya tahap-tahapnya. Kita melangkah ke menu Navigation, dan centang Add Native Sidebar Navigation. Di menu ini kalian akan mengatur tampilan dari Native Sidebar Navigation.

Konten navigasinya akan mengikuti komponen navigasi blog kalian secara otomatis. Jadi yang pakai template fixed header atau yang punya menu sidebar itu enak.

Agar tampil lebih bagus, kalian bisa ganti ikon tiap list menu sidebarnya sesuai keinginan.
Kalian juga bisa menambahkan Tab Native dan pengaturan tampilannya sama dengan Native Sidebar Navigation. Sekarang saatnya untuk menambahkan menu pencarian pada aplikasinya. Centang Add Native Search Form, isi Template Search URL dengan format sebagai berikut.
https://blogkamu.blogspot.com/search?q=
Format itu untuk blog yang host di blogger. Mungkin untuk wordpress beda lagi, yang penting pahami apa itu parameter URL suatu website.

Kita beranjak lagi ke Navigation Styling. Ini adalah pengaturan tampilan paling utama dan penting. Usahakan pilih komposisi warna yang bagus. Untuk settingan iOS langkahi dan abaikan saja ya.

Ada beberapa option yakni:

  1. Android ActionBar Title Type. Pilih motode judul yang akan ditampilkan apakah teks dengan menggunakan judul aplikasi ataukah menggunakan logo.
  2. Android ActionBar Image. Hanya akan tampil jika pada tahap sebelumnya kalian memilih opsi Show Image.
  3. Android ActionBar Background. Adalah warna latar dari fixed header aplikasi. Tentukan warna yang sesuai.
  4. Android ActionBar Foreground. Ini adalah warna dari ikon-ikon yang ada di fixed header.
  5. Android StatusBar Background. Nah, ini adalah warna latar dari statusbar (tempat ikon baterai, sinyal, wifi, notifikasi dan lain-lain) HP kalian ketika membuka aplikasi.
  6. Android ActionBar Preview. Ini adalah tempat kalian melihat perubahan warna yang kalian lakukan. Untuk lebih lengkapnya lihat gambar di bawah ini.
Setelah pengaturan ActionBar, kini kita melangkah ke pengaturan Menu SideBar. Di sini kita cuma ganti-ganti warna yang sesuai. Isi warna yang menurut kalian cocok dan jangan pilih warna yang tidak nyambung dengan warna sebelumnya.
Tahap pengeditan atau pengaturan tema sampai di sini saja. Sekarang saatnya untuk menentukan paket dan versi dari aplikasi. Untuk nama paket kalian bisa menggunakan gabungan sama kalian serta nama blog kalian agar kelihatan bahwa kalian yang membuat aplikasinya. Untuk versi berikan 1.0.0 saja atau terserah mau versi 3.4.2, itu tergantung dari keinginan kalian.
Sekali lagi langkahi saja yang iOS :v. Setelah semuanya selesai klik Build my app!. Tunggu sekitar 2-3 menit hingga link download aplikasinya sampai pada e-mail kalian. Klik Privat Management URL. Download aplikasinya dengan mengklik Download Android APK.
Sebagai demo, kaloan bisa mencoba aplikasi yang admin telah sediakan di bawah ini.


Setelah membuka aplikasi yang kalian buat tadi, akan muncul popup lisensi. Itu menandakan bahwa aplikasi tersebut tidak dapat dipublikasikan. Lalu bagaimana cara menghilangkannya? Tak perlu membayar cukup bermodalkan beberapa aplikasi, notifikasi popup lisensinya akan hilang. Mau tahu? Nantikan tutorial selanjutnya dari admin.

Oke, cukup sudah tutorial membuat aplikasi webview nativenya semoga bermanfaat. Dan sampai jumpa.
5 komentar

5 komentar

Kebijakan berkomentar:
1. Meninggalkan komentar sebagai anonim tidak dibolehkan di blog ini.
2. Dilarang memasang link aktif dalam komentar.
3. Berkomentar sesuai topik.

Be nice and be respectful.
  • Irvan Fauzi
    Irvan Fauzi
    19 April, 2019 14:53
    Bukan bermaksud gimana, tapi itu logonya kok bisa sama kayak blog saya ya akwkakwakw
    Reply
  • Takashi Draylus
    Takashi Draylus
    28 Maret, 2019 20:09
    Bisa buat versi apk dari blog kita gitu? Kayaknya keren tuh.

    Btw, kunbal ya min 😅 https://animangakun.blogspot.com/2019/03/pasangan-yang-sangat-serasi-berikut.html?m=1
    • Takashi Draylus
      John Asto
      28 Maret, 2019 20:28
      Ashiiyaapp langsung ke TKP 👍
    Reply
  • Heffri Hutapea
    Heffri Hutapea
    11 Februari, 2019 02:45
    Mantap tutorialnya bang.. saya tunggu post ttg menghilangkan lisensi. Mampir blogku juga yaaa
    • Heffri Hutapea
      John Asto
      11 Februari, 2019 08:45
      Artikelnya masih dalam tahap pengetikan bang. Mudahan nanti sore bisa selesai. Oke langsung ke TKP..
    Reply