Kumpulan Tulisan

Home About Kontak Android Photoshop CorelDraw Unduh

Saturday, 13 April 2019 Search This Blog

Begini Cara Membuat Ebook Android dengan App S

Inventor POSTINGAN TERBARU:

Begini Cara Membuat Ebook Android dengan App Inventor. Ebook atau buku Membuat Ukuran Kertas F4 di Komputer atau
elektronik kini sudah banyak bertebaran di Google Play, ada yang berbayar dan juga Laptop Secara Permanen
ada yang gratis. Bila sobat punya hobi menulis atau pernah menerbitkan buku
Praktek Ekstrakurikuler TIK MTs SMP: Membuat
karangan sendiri, mengapa tidak mencoba untuk mengkonversinya menjadi format Kop Surat dengan Tabel Word
digital atau ebook yang bisa dijajakan di Google Play.
Cara Menghilangkan Pesan Error : "Sorry, we
couldn't find …. Is it possible it was moved,
renamed or deleted?"
Di internet ada banyak software berbayar maupun free untuk membuat ebook
android ini, namun kali ini saya ingin berbagi cara membuat ebook android yang MTs Muslimin Citapen Praktek Ekstrakurikuler TIK
cukup mudah, bisa dilengkapi ilustrasi, gambar, atau foto. Membuat Kartu Peserta Ujian dengan Word plus
Foto
Langsung saja, apa saja yang mesti dipersiapkan:
Ekstra Kurikuler TIK MTs SMP : Cara Membuat
1. Naskah atau teks yang dibuat/disalin dengan Word atau Notepad
Presentasi dengan Microsoft Power Point
2. Gambar, foto, diagram yang akan disertakan dalam ebook.
2. Punya pengetahuan dasar koding HTML dan CSS (Jangan khawatir scriptnya saya MTs Muslimin Citapen Madrasah Terdepan di
buat yang sudah jadi tinggal dikopi) Citapen Bandung Barat
3. Sudah dipersiapkan cover ebook (silakan baca lagi Cara Membuat Cover E-book
Android dengan App Inventor) Kumpulan Tulisan, Blog Berisi Berbagai Tulisan,
Artikel, dan Tutorial Karya Dede Suhaya
4. Dan tentu saja App Inventor versi online atau offline.

Pertama-tama teks atau naskah diberi script HTML dan CSS, caranya, silakan baca POSTINGAN PENDIDIKAN
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 Ekstra Kurikuler TIK MTs SMP : Cara Membuat
Presentasi dengan Microsoft Power Point
untuk memudahkan pencarian. Sebagai contoh pada ebook “Laporan Prakerin-PKL”
saya pecah menjadi 5 file html: SMP Plus Manbaul Falah Kabupaten Bandung
Barat Menerima Peserta Didik Baru
bab1pendahuluan.html
Ekstrakurikuler TIK : Edit Foto dan Membuat
bab2uraian.html
Pas Foto Menggunakan Software GIMP
bab3layout.html
Ekstrakurikuler MTs : Memasang Foto atau
bab4tugas.html Gambar ke dalam Teks Word
bab5kesimpulan.html
Ekstrakurikuler MTs : Menghilangkan Latar
Belakang Foto dengan Software GIMP
Selanjutnya kita rancang UI/UX –nya, bisa corat-coret di kertas atau menggunakan
software Pencil, Adobe XD, Balsamik, dsb:
BLOGROLL:
--value sites--

CARI DI GOOGLE:

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.
FOLLOWER:
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 Pengikut (21)
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.
Ikuti

Di bawah app bar “Daftar Isi”, kita akan buat menu daftar isi dengan Button
sehingga bila disentuh akan langsung menuju halaman yang dimaksud. Sebelumnya
Subscribe To
kita drag  n drop Layout>VerticalScrollArrangement di bawah app bar, buat Height
dan Widht-nya Fillparent, AlignHorizontal ubah sesuai selera. Masukkan beberapa Posts
Button sesuai keperluan, ganti text-nya sesuai dengan judul bab (Rename juga
komponen Button tersebut misalnya jadi btnBab1), kalau terlalu rapat beri spasi Comments
dengan Label. Selengkapnya seperti di bawah ini:

ARSIP:
April 2019 (3)

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.

3 comments:
michelle 7 May 2019 at 15:16

dicoba keberuntungannya bersama dengan kami di ionqq*com

hanya dengan minimal deposit 20.000
ayooo buruan bergabung kami tunggu ya ^^

Reply

putut 16 October 2019 at 09:50

Ini jadinya e book online atau offline,,?
Reply

Replies

Dede Suhaya 30 December 2019 at 20:15

apk nya bisa diinstal di hp android
 Reply

Enter comment

Newer Post Home Older Post

Subscribe to: Post Comments (Atom)

Powered by Blogger.