By Muh
Kamaludin Fadhil | Sep 3 2018
Persiapan
Proyek
Kita menggunakan perintah ionic 2
CLI untuk membuat folder proyek untuk deployment ke Android.
Kita juga memasang beberapa plugin yang
membantu:
Mengkoding Halaman Awal
Dalam tutorial ini, kamu akan
mbekerja dalam folder src, jadi anggaplah folder src adalah akar setiap kali
kamu melihat file path.
Dalam folder src ada empat
direktori:
- App: adalah dimana app-wide code didefinisikan. Jika
kamj perlu menjalankan kode tertentu ketika aplikasi dimulai, atau jika
kamu ingin mempernaharui css global, maka disinilah tempatnya.
- Assets: ini tempat asses seperti gambar yang
digunakan aplikasi berada.
- Pages: ini adalah tempat kode untuk tip halaman. Tiap
halaman memiliki foldernya sendiri. Dan tiap folder terdapat tiga berkas
yang mendefinisikan tempate (HTML), styling (CSS) dan skrip (TypeScript)
untuk laman
- Themes: tempat jika kamu ingin memodifikasi tema
bawaan Ionic 2.
Template
Halaman Awal
Secara bawaan, Ionic blank starter
template menjadi halaman awalmu. Jadi yang perlu kamu lakukan ada mengedit
untuk menunjukkan konten yang kamu inginkan. Buka pages/home/home.html dan
pastikan kontennya saag ini. Tambahkan berikut di bagian atas laman :
Kode di atas adalah boilerpkate dari
header aplikasi.
<ion-navbar> berguna sebagai toolbar navigasi.
Itu akan secara otomatis menunjukkan tombol kembali ketika kamu bernavigasi
jauh dari halaman awal. <ion-title>
menyetel judul dari nav bar.
Lalu, konten dari laman. Kamu bisa
mendefinisikannya di dalam <ion-content>, padding bawaan bisa diterapkan dengan mengspesifikasikan
opsi padding. Dalam kontainer, buat sebuah daftar yang mengandung bagian
inout untuk memasukkan username dan password. Membuat daftar yang berisi edit
fields adalah praktik dasar dalam Ionic - itu mengizinkanmu untuk menumpuk tiap
field secara rapih di atas yang lainnya. Di bawah ini adalah tombol untuk
login.
Mari ambil waktu sejenak untuk melihat kode
untuk memasukkan teks dan mengklik tombol. Di ionic kamu bisa mendifinisikan
field inout teks dengan <ion-input> Untuk mengikat field teks ke class yang didefinisikan di
laman, gunakan [(ngModel)]. Lalu nilai yang diterapkan akan menjadi nama dari class.
Untuk membuat two-way data bindig,
kamu bisa menyetel [value]
menjadi sama dengan nama yang
digunakan di [(ngModel)] Ini mengizinkan mu utuk memperbaharui field teks dengan
mengganti nilai model dari skrip laman. Nantinya, kamu akan melihat cara
menentukan class property di dalam skrip laman.
Untk membuat tombol, gunakan element standar button
di HTML. Dan jika kamu bertanya kenapa bukan <ion-button>, ini
karena alasan aksesibilitas. Tombol adalah antarmuka yang krusial, jadi tim
Ionic memutuskan untuk tetap dengan standar HTML untuk membuatnya mudah
diakses. Ion-button sendiri duganakan untuk menyediakan fungsionalitas tambahan
Untuk menambahkan handler klik, kamu
bisa menggunakan (click)
directive, dengan sebuah nilai
fungsi (definisikan di skrip laman) untuk mengeksekusi ketika even klik
terjadi.
Skrip Laman Awal
Buka berkas pages/home/home.ts,
hilangkan semua kontennya dan tambahkan yang berikut:
Menjelaskan kode diatas, pertama kita
mengimpor komponen angular yang memiliki semua Ionic directive yang telah
matang.
Lalu kita mengimpor controller untuk naigasi
dan peringatan ke package ionic-angular. Ini di mana Ionic controller dimasukkan.
Setelahnya, kita mengimpor PickerPage. Kamj akan membuatnya nanti, jadi biarkan itu dalam
komentar. Ingat untuk menghapusnya ketika siao untuk dimuat.
Setelah impor, gunakan @Component decorator untuk menentukan template HTML yang digunakan
dengan skrip:
Sekarang kamu bisa menentukan kelas
untuk skrip laman awal. Mari ekspor kelas ini sehingga ini bisa diimpor dsri
berkas lain dalam aplikasi.
Buat NavController
dan AlertController tersedia melalui kelas dengan mendefinisikan mereka sebagai
parameter dalam constructor. Ini mengizinkan untuk menggunakan this.navCtrl, contohnya, ketika ingin menggunakan NavController untu navigasi ke halaman lain.
Sekaran kita siap untuk
mendefinisikan properti dari kontroller yang bisa direferensikan dsri template,
properti ini akan mengandung nikai sekarang dari field teks untuk username dan
password.
Utuk membuatnya sederhana, kita akan
menggunakanhard-coded value untuk username dan password. Namun dalam apkikasi
nyata, kamu akan meminta server untuk mengotentikasi pengguna,
Di dalam fungsi login(), buat sebuah alert ketika pengguna
memasukkan username dan password yang salah
Jika kredensialnya salah, tunjukkan
alert:
Jika username dan password benar,
kamu menggunakan NavController untuk mendorong Picker Page ke Navigstion Stakc. Apapun
yang kamu dorong ke navigation stack akan menjadi halaman sekarang, ketika
memuat laman secara efektif bernavigasi ke hakaman sebelumnya. Beginilah navigasi bekerja di Ionic
2.
Picker Page
Selanjutnya, kamu harusmembuat
picker page. Seperti yang telah kamu ketahui, standar untuk membuat folder
terpisah untuk tiap laman, dan tiap folder akan memiliki tiga berkas di
dalamnya. Untungnya, Ionic CLI hadir ddngan perintah untuk membuat laman baru.
Ini menggunakan fugsi generate yang akan membuat folder halaman
dengan 3 berkas di dalamnya. Bahkan berkasnyapun sudah dilengkapi boilerplate.
Picker
Page Template
Setelah selesai, buka
pages/picker/picker.html dan ganti boilerplat dengan kode berikut:
Tidak ada kode yang tidak familiar
kecuali hidden directive dan komponen <ion-card>.
Hidden directive mengizinkanmu untuk menyembunyikan elemen
berdasarkan nilai tertentu yang didefinisikan dilaman. Jadi jika has_picked_image bernilai true, hanya div yan
akan tampil.
Komponen <ion-card> digunakan untuk
membuat card. Cards adalah cara untuk menamoilkan gambar dalam aplikasi,
Picker
Page Style
Buka pages/picker/picker.css dan
tambahkan baris berikut:
Picker Page Script
Buka pages/picker/picker.ts dan
tambahkan baris berikut:
Akan saya jelaskan sedikit. Pertama
kita mengimpor pkugin yang telah dipasang sebelumnha. Perhatikan bahwa plugin
dipasang dalam package yang sama (ionic-native) Ini bagus
karena dsripada harus mengimpor satu persatu plugin. Kamu bisa melakukan
semuanya dalam satu baris.
Selanjutnya deklarasikan class
properties:
Ketika pick image diklik, tentukan
opsi untuk image picker. Opsi ini mudah untuk dipahami namun saya telah
memberikan beberapa penjelasan untuk mengklarifikasinya.
Tentukan width dan height tidak berarti menghasilkan gambar menggunakan tigi dan
lebar yang eksak. Maksudnha adalah Ionic akan menggunakan dimensinya sebagai
dimensi maksimum dan tetap menjaga rasionya.
Kita menggunakan data URI sebagai
tipe output karena Instagram hanya menerima URI. Ni berarti kamu juga harus
menyesuaikan panjang, lebar, dan kualitas ke minimum karena data URI bisa jadi
sangan panjang jika kualitasnya tinggi - seluruh gambar diencode menggunakan
kalimat URI. Ini bisa membuat aplikasi crash, jadi akan bahus jika bekerja di
kualitas yang lebih rendah dan gambar yang kecil ketika bekerja dengan data
URI.
Selanjutnha, gunakan Image Picker
untuk memacu layar image selection. Karena kita berharap sebuah gambar, kita
bisa mengakses item pertama dalam array hasil. Kita juga harus tambahkan prefix
untuk data URI.
Akhirnya, ketika tombol share image
ditekan, metode share dari instagram akan memacu layar sharing dalam instagram
utuk muncul.
Captionnya tidak akan dikopi karena
knstagram melarang caption yang sudah terisi sebelumnya sehingga saat aplikasi
Instagram terbuka captionnya akan kosong, Sebagai solusi, pkugin instagram
mengkopi caption ke clipboard, ini artinya pengguna hanya perlu menyalin
caption ke aplikasi instagram.
Membawa Semuanya Bersama
Tahap terakhir adalah dengan membuka
app/app.module.ts. ini adalah modul akar dari aplikasi di mana kamu
mendefinisikan laman dan provider (seperti default Ionic error handler) yang
akan kam gunakan dalam aplikasil
Pastikan semua laman yang kamu buat
telah didefinisikan, jika tidam kamu akan mendapat pesan eror ketika
bernavigasi ke laman yang belum didefinisikan. Pada dasarnya HomePage telah didefinisikan jadi kamu hanya perlu menambah PickerPage. Impor saja di bsgian teratas berkas dan tambahkan itu di
bawah array declarations dan entryComponents. Ingat bahwa MyApp bukanlah sebuah laman; itu adalah
komponen yang hadir sebagai empty shell untuk laman dimuat ke dalamnya.
Jika kamu membuka berkas
app/app.module.ts kamu akan melihag berikt:
Ini adalah di mana kamu
mendifinisikan laman akar-laman yanv akan pengguna lihat ketika membuka
aplikasi. Dalam kasus ini, HomePage adalah laman akar. Ini juga sempurna untuk mengeksekusi
kode inisialisasi, semenjak kode di sini hanya dieksekusi ketika pengguna
menjalankan aplikasi. Ketika menginisialisasi sesuatu (seperti meminta izin
untuk menjalankan bluetooth). Kamu akan selalu ingin untuk menunggu hingga even
platform.ready() menyala. Hanya dengan begitu kamu bisa yakin bahwa fungsi
bawaan siap untuk dipanggil.
Menjalankan
Aplikasi
Sekarang kamu siap untuk
menjalankannaplikasi dari perangkat ponsel atau emulator. Kamu bisa
melakukannya dengan mengeksekusi perintah berikut:
Pastikan kamu memiliki perangkat
terhubung ke komputer atau kamu menjalankan sebuah emulator ketika mengeksekusi
kode di atas. Jika masih belum bekerja, cek apakah kamu telah mengaktifkan usb
debugging di perangkatmu dan jalankan adb devices. Itu akan
memancing komoutermu untuk menghubungkan komouter ke perangkat. Setuju pada
perintah di oerangkatmu ketika kamu melihat perintah otentikasi,
Jika kamu ingin memiliki salinan
dari berkas APK nya sehingga dapat dibagikan dengan teman. Kamu bisa membuatnya
dengan menjalankan kode berikut:
Ini akan membuat sebuah berkas
android-debug.apk di folder platforms/androibuild/outputs/apk
Seperti
itulah cara membuat aplikasi pembagi foto android dengan ionic framework.
Bias juga
anda membuat aplikasi android bertema Dongeng digital bias di
klik Disini
Sumber : https://code.tutsplus.com
Komentar
Posting Komentar