Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2

Buat Aplikasi Ionic 2 Pertamamu: Sebuah Aplikasi Berbagi Foto

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Dalam seri tutorial dua bagian inim kamu akan belajar cara membuat aplikasi Ionic 2 paling pertmaamj. Sekarang kamu telah menyiapkan lingkungan pengembangan dan mempelajari tentang perkembangan workflow di Ionic w, sekarang waktunya untuk membuat tanganmu kotor dengan mengkode aplikasi.

Jika kamu belum, ikuti pos pertama untuk mendapatkan lingkungan pengembang siap dan bootstrap di proyekmu.

Bagian dua ini akan melingkupi hal yang perl kamu tahu ketika mengkode aplikasi di Ionic w. Kamu akan belajar cara membuat laman apkikasi, cara mendapat input pengguna, dan cada menggunakan plugin untuk fungsional bawaan. Setelah selesai kamj akan menjalankannya di perangkatmu atau emulator. Tapi sebelumnya, mari berbicada mengenai apa yang akan kita buat.

Apa yang akan kamu buat

Dalam tutorial ini, kamu akan membuat sebuah aplikasi berbagi foto. Dasarnya harus mengikuti alur berikut:

  1. Pengguna membuka aplikasi dan login. Mereka dialihkan ke laman untuk memilih gambar yang akan dibagi.
  2. Pengguna memilih tombol Pick Image. Image Picker muncul dan pengguna memilih satu. Gambar tersebut akan dipratinjau.
  3. Pengguna memasukkan caption dan mengkil tombol Share image untuk membagikan gambar ke Aplkkasi Instagram.

Tutorial ini hanya akan menunjukkan cara menjalankan aplikask di perangkat android, naum cordova (framework yang berjalan di Ionic) bersifat multiplatform. Ionic 2 memiliki tema bawaan untuk Android, iOS, dan Windows. Jadi mudaj utuk membuat versi aplikasimu untuk perangkat tersebut juga.

Beginilah tampilan aplikasinya:

Completed photo sharing app

Persiapan Proyek

Jika kamu mengikuti tutorial sebelumnya maka kamu telah menyiapkan lingkungan pengembangan Ionic 2. Kita menggunakan perintah ionic 2 CLI untuk membuat folder proyek untuk deployment ke Android.

Kitamjuga memasang beberapa plugin yang membantu:

Memngkoding Halaman Awal

Dalam tutorial ini, kamu akan mbekerja dalam folder src, jadi anggaplah folder src adalah akar setiap kali kamu melihat file path. (jika kamu ingin mempersegar path yang dibuat dengan Ionic, lihatlah tutorial sebelumnya)

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

Ionic 2 buttons

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:

Ionic 2 alerts

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 kide 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 cards. Cards adalah cara untuk menamoilkan gambar dalam aplikasi,

Ionic 2 card images

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

Kesimpulan

Itulah! Di tutorial ini kamu telah membuat aplikasi Ionic 2 pertamamu. Aplikasi yang sederhana dan mungkin kamu menganggapnya mudah. Tapi kamu telah belajar lingkungan pengembangan dan konsep dasar yang bisa diterapkan ketika membuat aplikasimu lagi nanti. Termasuk mendapatkan nilai sekarang dari field teks, merespon event klik, menghubungkan gambar, dan menggunakan plugin untuk mengakses fungsi bawaan. Kamu telah melakukan kerja yang bagus.

Dalam waktu luang, cek tutorial lain menggunakan Ionic 2.

Jika ingin pengantar yang lebih menfalam tentang ionic 2. Cobalah course Memulai dengan Ionic 2

Dalam course ini, Reggie Dawson akan mengajarkanmu semua tentanf framework Ionic dan akan ,emunjukkan cara membuat aplikasi ponsel dari awal. Kamu juga akan belajar komponen pustaka Ionic, tentang pemogramman JavaScript bertipe statis dengan TypeScript, dan mengintegrasikan aplikasi ionic 2 dengan API.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.