Begini Cara Membuat Ebook Android dengan App Inventor. Ebook atau buku elektronik kini sudah banyak bertebaran di Google Play, ada yang berbayar dan juga ada yang gratis. Bila sobat punya hobi menulis atau pernah menerbitkan buku karangan sendiri, mengapa tidak mencoba untuk mengkonversinya menjadi format digital atau ebook yang bisa dijajakan di Google Play.
Di internet ada banyak software berbayar maupun free untuk membuat ebook android ini, namun kali ini saya ingin berbagi cara membuat ebook android yang cukup mudah, bisa dilengkapi ilustrasi, gambar, atau foto.
Langsung saja, apa saja yang mesti dipersiapkan:
1. Naskah atau teks yang dibuat/disalin dengan Word atau Notepad
2. Gambar, foto, diagram yang akan disertakan dalam ebook.
2. Punya pengetahuan dasar koding HTML dan CSS (Jangan khawatir scriptnya saya buat yang sudah jadi tinggal dikopi)
3. Sudah dipersiapkan cover ebook (silakan baca lagi Cara Membuat Cover E-book Android dengan App Inventor)
4. Dan tentu saja App Inventor versi online atau offline.
Pertama-tama teks atau naskah diberi script HTML dan CSS, caranya, silakan baca lagi : Cara Membuat Teks Halaman Web Menggunakan Kode HTML dan CSS. Simpan file berekstensi .html ini dalam sebuah folder khusus bersama file-file gambar/foto untuk memudahkan pencarian. Sebagai contoh pada ebook “Laporan Prakerin-PKL” saya pecah menjadi 5 file html:
bab1pendahuluan.html
bab2uraian.html
bab3layout.html
bab4tugas.html
bab5kesimpulan.html
Selanjutnya kita rancang UI/UX –nya, bisa corat-coret di kertas atau menggunakan software Pencil, Adobe XD, Balsamik, dsb:
Berdasarkan wireframe di atas kita wujudkan dalam rancangan di App Inventor.
Tahap pertama sobat buat cover ebooknya, ini sudah saya bahas di postingan Cara Membuat Cover E-book Android dengan App Inventor, silakan dibaca kembali.
Setelah cover selesai dibuat di Screen1, lanjutkan buat rancangan untuk menu Daftar Isi, klik Add Screen. Di Screen2 ini kita akan membuat menu daftar isi dan halaman-halaman ebook-nya itu sendiri.
Untuk navigasi kita buat dulu app bar (Silakan baca lagi Cara Membuat App Bar Android dengan App Inventor) sehingga saat menyentuh icon Back (panah kiri atau “<”) atau Next (panah kanan atau “>”) kita bisa berpindah halaman sebelum atau sesudahnya.
Di bawah app bar “Daftar Isi”, kita akan buat menu daftar isi dengan Button sehingga bila disentuh akan langsung menuju halaman yang dimaksud. Sebelumnya kita drag n drop Layout>VerticalScrollArrangement di bawah app bar, buat Height dan Widht-nya Fillparent, AlignHorizontal ubah sesuai selera. Masukkan beberapa Button sesuai keperluan, ganti text-nya sesuai dengan judul bab (Rename juga komponen Button tersebut misalnya jadi btnBab1), kalau terlalu rapat beri spasi dengan Label. Selengkapnya seperti di bawah ini:
Selanjutnya kita akan membuat halaman untuk Pendahuluan di Screen yang sama, buat juga app bar baru dengan judul Bab I.
Pertama-tama kita Rename dulu VerticalScrollArrangement1 menjadi vsaDaftarIsi, lalu hilangkan tanda cek Visible pada Properties-nya, agar layout Daftar Isi tidak kelihatan, begitu juga dengan app bar Daftar Isi. Sehingga kita bisa membuat layout untuk app bar Bab I dan halaman Pendahuluan pada layar yang sama.
Di viewer yang kosong ini kita mulai lagi membuat app bar Bab I (prosesnya sama dengan membuat appbar Daftar Isi, hanya label-nya diganti jadi “Bab I”)
Di bawah app bar Bab I buat halaman Pendahuluan, caranya dengan men-drag n drop Layout>VerticalArrangement, tentukan Height/ Widht: Fillparent
Drag n drop User Interface>WebViewer di dalam VerticalArrangement1 ini.
Untuk membuat halaman selanjutnya, Uraian Umum dan app bar Bab II, prosesnya sama. (Pada tutorial ini saya hanya membuat cover, halaman Daftar isi, halaman Pendahuluan, dan halaman Uraian Umum).
Untuk menampilkan teks html plus gambar/foto menjadi tampilan web dalam ebook android ini, kita memerlukan sebuah extension WebViewer yaitu TaifunTools.aix yang bisa sobat download dari menu Help>Extensions atau bisa dicari di Google. Untuk mudahnya silakan di download di sini. Untuk menambah extension caranya scroll kolom Pallete ke paling bawah, klik Extension kemudian klik Import extension, pilih file TaifunTools.aix yang sudah di-download.
Setelah TaifunTools muncul di Extension, silakan di drag n drop ke Screen2 yang ada komponen WebViewer-nya. Sehingga muncul di bawah Viewer berupa Non-visible components dan juga muncul di kolom Components.
Tahap selanjutnya adalah menyusun code perintah berupa block-block warna-warni untuk Screen1 maupun Screen2.
Blocks di Screen1
Silakan pindah ke Screen1 dengan mengklik menu drop down Screen.
Blok-blok code di Screen1 ini gunanya untuk mengaktifkan Screen1 dan tombol “BACA”, sehingga saat dieksekusi di emulator atau di hp, komponen yang kita inginkan akan muncul di Screen1 dan saat tombol BACA disentuh, layar otomatis akan berpindah ke Screen2 untuk membuka Daftar Isi.
Di Screen1 silakan klik menu Blocks yang ada di ujung paling kanan, sehingga akan muncul kolom Blocks dan Viewer editor block. Bila sobat mengklik salah satu komponen di kolom Blocks sebelah kiri, maka sekumpulan blok-blok perintah akan muncul, dan bila salah satu di-klik atau diseret maka blok tersebut akan berpindah dan nempel di editor blok viewer sebelah kanan.
Di kolom Blocks klik Screen1, saat muncul sekumpulan blok, pilih yang ada tulisan when Screen1 .Initialize
klik atau seret ke editor blok.
Dengan code blok ini kita akan menyusun perintah apa saja yang harus dilakukan ketika Screen1 diaktifkan.
Berdasarkan UI/UX di atas, saat aplikasi dijalankan akan muncul layar pertama (Screen1) yang menampilkan cover dan tombol BACA. Karena cover (Image1) berada dalam layout VerticalScrollArrangement1, maka layout ini harus diprogram terlihat (Visible) begitu juga tombol BACA (btnBaca).
Silakan klik VerticalScrollArrangement1, cari blok yang ada tulisan set VerticalScrollArrangement1 .Visible to
klik HorizontalArrangement1, cari yang bertuliskan set HorizontalArrangement1 .Visible to
Kedua blok ini pasang ke dalam blok when Screen1 .Initialize
Klik Logic pilih blok true, pasangkan di ujung kedua blok layout tersebut.
Sekarang kita klik btnBaca, pilih blok bertuliskan when btnBaca .Click lepaskan di editor blok.
Klik Control, pilih blok open another screen screenName
Klik Text, pilih blok paling atas bertanda kutip “… “, tulis di antara tanda kutip nama screen yang dituju, dalam hal ini “Screen2”.
Selengkapnya code blok di Screen1 adalah:
Untuk sementara pemasangan blok perintah di Screen1 selesai. (Jangan lupa Projects>Save project)
Blocks di Screen2
Pindahkan Screen1 ke Screen2, proses pemasangan blok-blok code sama seperti sebelumnya.
Di bagian ini kita akan menampilkan Daftar Isi dan app bar-nya setelah tombol BACA di Screen1 disentuh.
Code blok-nya akan memerintahkan; komponen apa yang terlihat (visible) saat halaman Daftar Isi terbuka; dalam hal ini layout appbarDI dan layout vsaDaftarIsi dibuat Visible: true. Sementara layout appbarBab1, vaBAB1, appbarBab2, dan vaBAB2 dibuat tidak muncul alias Visible to false.
Code blok untuk button menu (Daftar Isi) pengerjaannya adalah sbb:
Klik btnBab1 di dalam layout vsaDaftarIsi, pilih blok when btnBab1 .Click
Klik layout vaBAB1, pilih blok set vaBAB1 .Visible to pasang dengan blok true
Klik WebViewer1 di dalam layout vaBAB1, pilih blok call WebViewer1 . GoToUrl pasang blok join dari komponen Text
Klik TaifunTools1, pilih blok call TaifunTools1 . PathToAssets, join dengan blok “…” dari komponen Text lalu tulis nama file bab1pendahuluan.html yang sudah dibuat sebelumnya.
Klik layout vaBAB2, pilih blok set vaBAB2 .Visible to pasang dengan blok false, demikian juga untuk layout sisanya (ini agar yang tampil hanya layout BAB1).
Selengkapnya adalah:
Untuk mengisi teks di antara tanda “…”. Sebelumnya kita harus mengupload file-file html yang telah dibuat (bab1pendahuluan.html, bab2uraian.html, dst.) juga file-file foto/gambar yang terkait dengan file html tersebut (kantorpr.jpg, quarkxpress.jpg, dst.)
Karena tombol button ada lima, maka harus dibuat code perintah Click untuk setiap tombol (dalam tutorial ini saya hanya buat dua tombol). Untuk memudahkan, tinggal diduplikat dengan cara klik kanan pada komponen when btnBab1 .Click>Duplicate, ubah btnBab1 dengan btnBab2, dan seterusnya dengan mengklik drop down (tanda segitiga kecil).
Selengkapnya seperti di bawah ini:
Tahap selanjutnya adalah menyusun blok code untuk tombol Back dan Next yang ada pada app bar.
Sedikit penjelasan:
Di appbar Daftar Isi (appbarDI) ada dua tombol : btnBackDI dan btnNextDI
btnBackDI bila diklik akan menampilkan halaman sebelum Daftar Isi yaitu halaman cover (Screen1)
btnNextDI bila diklik akan menampilkan halaman setelah Daftar Isi yaitu halaman Bab I (sama dengan saat btnBab1 .Click)
Di appbar Bab I (appbarBab1) ada dua tombol : btnBack1 dan btnNext1
btnBack1 bila diklik akan menampilkan halaman sebelum Bab I yaitu halaman Daftar Isi (sama dengan saat Screen2 .Initialize)
btnNext1 bila diklik akan menampilkan halaman setelah Bab I yaitu halaman Bab II (sama dengan saat btnBab2 .Click)
Di appbar Bab II (appbarBab2) ada dua tombol : btnBack2 dan btnNext2
btnBack2 bila diklik akan menampilkan halaman sebelum Bab II yaitu halaman Bab I
btnNext2 bila diklik akan menampilkan halaman setelah Bab II yaitu halaman Bab III
(dalam tutorial ini tombol btnNext2 tidak saya aktifkan)
Jadi blok-blok selengkapnya adalah:
Setelah Connect dengan Emulator, hasilnya seperti di bawah ini:
Demikian semoga bermanfaat. Bila ada cara yang lebih simpel silakan sobat tulis di kolom komentar.
Di internet ada banyak software berbayar maupun free untuk membuat ebook android ini, namun kali ini saya ingin berbagi cara membuat ebook android yang cukup mudah, bisa dilengkapi ilustrasi, gambar, atau foto.
Langsung saja, apa saja yang mesti dipersiapkan:
1. Naskah atau teks yang dibuat/disalin dengan Word atau Notepad
2. Gambar, foto, diagram yang akan disertakan dalam ebook.
2. Punya pengetahuan dasar koding HTML dan CSS (Jangan khawatir scriptnya saya buat yang sudah jadi tinggal dikopi)
3. Sudah dipersiapkan cover ebook (silakan baca lagi Cara Membuat Cover E-book Android dengan App Inventor)
4. Dan tentu saja App Inventor versi online atau offline.
Pertama-tama teks atau naskah diberi script HTML dan CSS, caranya, silakan baca lagi : Cara Membuat Teks Halaman Web Menggunakan Kode HTML dan CSS. Simpan file berekstensi .html ini dalam sebuah folder khusus bersama file-file gambar/foto untuk memudahkan pencarian. Sebagai contoh pada ebook “Laporan Prakerin-PKL” saya pecah menjadi 5 file html:
bab1pendahuluan.html
bab2uraian.html
bab3layout.html
bab4tugas.html
bab5kesimpulan.html
Selanjutnya kita rancang UI/UX –nya, bisa corat-coret di kertas atau menggunakan software Pencil, Adobe XD, Balsamik, dsb:
Berdasarkan wireframe di atas kita wujudkan dalam rancangan di App Inventor.
Tahap pertama sobat buat cover ebooknya, ini sudah saya bahas di postingan Cara Membuat Cover E-book Android dengan App Inventor, silakan dibaca kembali.
Setelah cover selesai dibuat di Screen1, lanjutkan buat rancangan untuk menu Daftar Isi, klik Add Screen. Di Screen2 ini kita akan membuat menu daftar isi dan halaman-halaman ebook-nya itu sendiri.
Untuk navigasi kita buat dulu app bar (Silakan baca lagi Cara Membuat App Bar Android dengan App Inventor) sehingga saat menyentuh icon Back (panah kiri atau “<”) atau Next (panah kanan atau “>”) kita bisa berpindah halaman sebelum atau sesudahnya.
Di bawah app bar “Daftar Isi”, kita akan buat menu daftar isi dengan Button sehingga bila disentuh akan langsung menuju halaman yang dimaksud. Sebelumnya kita drag n drop Layout>VerticalScrollArrangement di bawah app bar, buat Height dan Widht-nya Fillparent, AlignHorizontal ubah sesuai selera. Masukkan beberapa Button sesuai keperluan, ganti text-nya sesuai dengan judul bab (Rename juga komponen Button tersebut misalnya jadi btnBab1), kalau terlalu rapat beri spasi dengan Label. Selengkapnya seperti di bawah ini:
Selanjutnya kita akan membuat halaman untuk Pendahuluan di Screen yang sama, buat juga app bar baru dengan judul Bab I.
Pertama-tama kita Rename dulu VerticalScrollArrangement1 menjadi vsaDaftarIsi, lalu hilangkan tanda cek Visible pada Properties-nya, agar layout Daftar Isi tidak kelihatan, begitu juga dengan app bar Daftar Isi. Sehingga kita bisa membuat layout untuk app bar Bab I dan halaman Pendahuluan pada layar yang sama.
Di viewer yang kosong ini kita mulai lagi membuat app bar Bab I (prosesnya sama dengan membuat appbar Daftar Isi, hanya label-nya diganti jadi “Bab I”)
Di bawah app bar Bab I buat halaman Pendahuluan, caranya dengan men-drag n drop Layout>VerticalArrangement, tentukan Height/ Widht: Fillparent
Drag n drop User Interface>WebViewer di dalam VerticalArrangement1 ini.
Untuk membuat halaman selanjutnya, Uraian Umum dan app bar Bab II, prosesnya sama. (Pada tutorial ini saya hanya membuat cover, halaman Daftar isi, halaman Pendahuluan, dan halaman Uraian Umum).
Untuk menampilkan teks html plus gambar/foto menjadi tampilan web dalam ebook android ini, kita memerlukan sebuah extension WebViewer yaitu TaifunTools.aix yang bisa sobat download dari menu Help>Extensions atau bisa dicari di Google. Untuk mudahnya silakan di download di sini. Untuk menambah extension caranya scroll kolom Pallete ke paling bawah, klik Extension kemudian klik Import extension, pilih file TaifunTools.aix yang sudah di-download.
Setelah TaifunTools muncul di Extension, silakan di drag n drop ke Screen2 yang ada komponen WebViewer-nya. Sehingga muncul di bawah Viewer berupa Non-visible components dan juga muncul di kolom Components.
Tahap selanjutnya adalah menyusun code perintah berupa block-block warna-warni untuk Screen1 maupun Screen2.
Blocks di Screen1
Silakan pindah ke Screen1 dengan mengklik menu drop down Screen.
Blok-blok code di Screen1 ini gunanya untuk mengaktifkan Screen1 dan tombol “BACA”, sehingga saat dieksekusi di emulator atau di hp, komponen yang kita inginkan akan muncul di Screen1 dan saat tombol BACA disentuh, layar otomatis akan berpindah ke Screen2 untuk membuka Daftar Isi.
Di Screen1 silakan klik menu Blocks yang ada di ujung paling kanan, sehingga akan muncul kolom Blocks dan Viewer editor block. Bila sobat mengklik salah satu komponen di kolom Blocks sebelah kiri, maka sekumpulan blok-blok perintah akan muncul, dan bila salah satu di-klik atau diseret maka blok tersebut akan berpindah dan nempel di editor blok viewer sebelah kanan.
Di kolom Blocks klik Screen1, saat muncul sekumpulan blok, pilih yang ada tulisan when Screen1 .Initialize
klik atau seret ke editor blok.
Dengan code blok ini kita akan menyusun perintah apa saja yang harus dilakukan ketika Screen1 diaktifkan.
Berdasarkan UI/UX di atas, saat aplikasi dijalankan akan muncul layar pertama (Screen1) yang menampilkan cover dan tombol BACA. Karena cover (Image1) berada dalam layout VerticalScrollArrangement1, maka layout ini harus diprogram terlihat (Visible) begitu juga tombol BACA (btnBaca).
Silakan klik VerticalScrollArrangement1, cari blok yang ada tulisan set VerticalScrollArrangement1 .Visible to
klik HorizontalArrangement1, cari yang bertuliskan set HorizontalArrangement1 .Visible to
Kedua blok ini pasang ke dalam blok when Screen1 .Initialize
Klik Logic pilih blok true, pasangkan di ujung kedua blok layout tersebut.
Sekarang kita klik btnBaca, pilih blok bertuliskan when btnBaca .Click lepaskan di editor blok.
Klik Control, pilih blok open another screen screenName
Klik Text, pilih blok paling atas bertanda kutip “… “, tulis di antara tanda kutip nama screen yang dituju, dalam hal ini “Screen2”.
Selengkapnya code blok di Screen1 adalah:
Untuk sementara pemasangan blok perintah di Screen1 selesai. (Jangan lupa Projects>Save project)
Blocks di Screen2
Pindahkan Screen1 ke Screen2, proses pemasangan blok-blok code sama seperti sebelumnya.
Di bagian ini kita akan menampilkan Daftar Isi dan app bar-nya setelah tombol BACA di Screen1 disentuh.
Code blok-nya akan memerintahkan; komponen apa yang terlihat (visible) saat halaman Daftar Isi terbuka; dalam hal ini layout appbarDI dan layout vsaDaftarIsi dibuat Visible: true. Sementara layout appbarBab1, vaBAB1, appbarBab2, dan vaBAB2 dibuat tidak muncul alias Visible to false.
Code blok untuk button menu (Daftar Isi) pengerjaannya adalah sbb:
Klik btnBab1 di dalam layout vsaDaftarIsi, pilih blok when btnBab1 .Click
Klik layout vaBAB1, pilih blok set vaBAB1 .Visible to pasang dengan blok true
Klik WebViewer1 di dalam layout vaBAB1, pilih blok call WebViewer1 . GoToUrl pasang blok join dari komponen Text
Klik TaifunTools1, pilih blok call TaifunTools1 . PathToAssets, join dengan blok “…” dari komponen Text lalu tulis nama file bab1pendahuluan.html yang sudah dibuat sebelumnya.
Klik layout vaBAB2, pilih blok set vaBAB2 .Visible to pasang dengan blok false, demikian juga untuk layout sisanya (ini agar yang tampil hanya layout BAB1).
Selengkapnya adalah:
Untuk mengisi teks di antara tanda “…”. Sebelumnya kita harus mengupload file-file html yang telah dibuat (bab1pendahuluan.html, bab2uraian.html, dst.) juga file-file foto/gambar yang terkait dengan file html tersebut (kantorpr.jpg, quarkxpress.jpg, dst.)
Karena tombol button ada lima, maka harus dibuat code perintah Click untuk setiap tombol (dalam tutorial ini saya hanya buat dua tombol). Untuk memudahkan, tinggal diduplikat dengan cara klik kanan pada komponen when btnBab1 .Click>Duplicate, ubah btnBab1 dengan btnBab2, dan seterusnya dengan mengklik drop down (tanda segitiga kecil).
Selengkapnya seperti di bawah ini:
Tahap selanjutnya adalah menyusun blok code untuk tombol Back dan Next yang ada pada app bar.
Sedikit penjelasan:
Di appbar Daftar Isi (appbarDI) ada dua tombol : btnBackDI dan btnNextDI
btnBackDI bila diklik akan menampilkan halaman sebelum Daftar Isi yaitu halaman cover (Screen1)
btnNextDI bila diklik akan menampilkan halaman setelah Daftar Isi yaitu halaman Bab I (sama dengan saat btnBab1 .Click)
Di appbar Bab I (appbarBab1) ada dua tombol : btnBack1 dan btnNext1
btnBack1 bila diklik akan menampilkan halaman sebelum Bab I yaitu halaman Daftar Isi (sama dengan saat Screen2 .Initialize)
btnNext1 bila diklik akan menampilkan halaman setelah Bab I yaitu halaman Bab II (sama dengan saat btnBab2 .Click)
Di appbar Bab II (appbarBab2) ada dua tombol : btnBack2 dan btnNext2
btnBack2 bila diklik akan menampilkan halaman sebelum Bab II yaitu halaman Bab I
btnNext2 bila diklik akan menampilkan halaman setelah Bab II yaitu halaman Bab III
(dalam tutorial ini tombol btnNext2 tidak saya aktifkan)
Jadi blok-blok selengkapnya adalah:
Setelah Connect dengan Emulator, hasilnya seperti di bawah ini:
Demikian semoga bermanfaat. Bila ada cara yang lebih simpel silakan sobat tulis di kolom komentar.
Ini jadinya e book online atau offline,,?
ReplyDeleteapk nya bisa diinstal di hp android
Delete