Tentang Web View dan Email di iOS – FoodPin Apps

Hai All, di postingan kali ini kita akan membahas tentang Web View dan Email di iOS, selain itu kita juga akan mencoba mengimplementasikan Web View dan Email kedalam aplikasi iOS, so check this out ..

Web View dan Email di iOS

Pengenalan tentang UIWebView dan MFMailComposeViewController

Di postingan sebelumnya kita telah berhasil membuat halaman About, tetapi kita belum mengimplementasikan fungsi apapun didalamnya. Halaman About ini nantinya berisikan dua tombol yaitu Contact Us dan Visit Our Website. Ketika user menekan tombol Contact Us, user akan diarahkan ke aplikasi email, dan ketika user menekan tombol Visit our website user akan diarahkan ke halaman web view yang mengakses website.

Di iOS SDK, terdapat class yang dinamakan dengan MFMailComposeViewController untuk developer yang bisa digunakan untuk memanggil fitur email dengan aplikasi kita. Class ini bertanggung jawab terhadap tampilan email bawaan dan pengaturan email seperti editing, dan juga mengirim email.

Untuk menananmkan konten website kedalam aplikasi kita, kita nantinya akan menggunakan class UIWebView. Class ini nantinya mengambil konten berdasarkan URL. Kita hanya perlu menginisialisasi URL dan class ini akan menghandle konten yang akan ditampilkan pada halaman.

Nah pada postingan kali ini, kita akan belajar bagaimana menanamkan web view dan memperbolehkan user untuk mengirimkan email menggunakan aplikasi kita. Dengan membuat halaman About, kita akan belajar bagaimana menggunakan UIWebView dan class MFMailComposeViewController.


 

Mendesign Tampilan Halaman About

Pertama kali kita akan membuat halaman layout about, tapi sebelumnya download gambar dari sini https://www.dropbox.com/s/3kdcmd7bv5lrfa4/about.png?dl=0 dan masukkan kedalam images.xcasset yang berguna untuk konten halaman About nantinya. Pergi ke Interface Builder dan pindahkan image view kedalam About view. Pasang gambar yang baru didownload kedalam about. Ganti ukurannya menjadi 200×200 point. Selanjutnya tambahkan sebuah label dan teks (seperti : Got Question?). Terakhir, pindahkan dua tombol kedalam view. Beri tombol pertama dengan nama “Contact Us” dan tombol kedua dengan “Visit out website”.

Sekarang pindahkan view controller lainnya dan letakkan di next dari About view controller. Tujuan dari view controller adalah untuk memanggil konten dari web. iOS SDK sudah memiliki object UIWebView bawaan untuk menampilkan konten web. Kita hanya perlu menanamkan object UIWebView di view controller manapunda dan itu akan otomatis mengambil konten web dan menampilkannya di halaman kita. Letakkan “Web View” di Object Library dan tambahkan kedalam View Controller.

Ketika user menekan tombol “Visit our website”, maka itu akan berpindah ke view controller dan menampilkan konten website. Jadi kita harus membuat segue antara tombol dengan view controller yang menampilkan web view. Tekan dan tahan tombol control dan pindahkan dari tombol “Visit our website” ke view controller. Lepaskan kedua tombol dan pilih Push sebagai tipe seguenya. Nah hasilnya akan terlihat seperti gambar dibawah ini:

Design halaman untuk About dan web view
Design halaman untuk About dan web view

 

Membuat Class untuk View Controller

Nah disini kita membuat sebuah class untuk menghubungkan view controller di storyboard. Klik kanan folder FoodPin dan pilih “New File ..”. Beri nama classnya dengan AboutViewController lalu pasang subclassnya dengan UIViewController. Di storyboard, pilih About View Controller dan pasang custom classnya dengan AboutViewController di Identity Inspector.

Ulangan prosedur yang sama dan buat class lain dan beri nama dengan WebViewController. Di storyboard , pilih view controller yang berisikan web view. Pilih Identity Inspector dan pasang subclassnya degan WebViewController.

Mengatur custom class dari web view controller
Mengatur custom class dari web view controller

 

Memanggil Konten Web menggunakan UIWebView

Class UIWebView bisa memanggil konten web secara local atau remote. Jika kita memasukkan file html ke dalam aplikasi, kita juga bisa menggunakan class load web page. Biasanya kita harus membuat object NSURL, karena dengan object NSURLRequest makan kita bisa menggunakan method loadRequest dari UIWebView untuk merequest konten dari sebuah wesite. Berikut contoh potongan codenya:


if let url = NSURL(string: "http://www.wirasetiawan29.wordpress.com") {
let request = NSURLRequest(URL: url)
webView.loadRequest(request)
}

Pada code diatas menginstrukskan web view untuk memanggil konten website secara remote. Seperti yang telah disebutkan sebelumnya bawah kita juga bisa membaca halaman website local yang disimpan didalam aplikais. Seperti file HTMLS, kita bisa memanggilnya dengan menggunakan object NSURL melalui code berikut:

let url = NSURL(fileURLWithPath: "about.html")

UIWebView akan memanggil konten web secara local, dan ini tetap akan bekerja walupun tidak adanya koneksi internet.

Dengan mengertinya tentan class UIWebview, mari kita lanjutkan implementasi WebViewController. Pertama buat variabel outlet untuk web view di class WebViewController :

@IBOutlet weak var webView:UIWebView!

Pada method viewDidLoad, tambahkan code dibawah ini untuk memanggil website. Kita bebas mengganti URL dari websitenya:


if let url = NSURL(string: "http://www.wirasetiawan29.wordpress.com/about") {
let request = NSURLRequest(URL: url)
webView.loadRequest(request)
}

Terakhir, kembali ke Interface Builder dan buat koneksi dengan outlet webView. Klik kanan Web View Controller di Document Outline. Hubungkan outlet webView dengan object UIWebView di view.

Membuat koneksi dengan outlet web view
Membuat koneksi dengan outlet web view

Sekarang kita sudah siap untuk menjalankan aplikasi dan melakukan testing. Pilih tab More dan klik tombol  “Visit our Website”. Website akan ditampilkan pada halaman web view. Seperti yang terlihad digambar dibawah ini:

Halaman About dan halaman web view ketika mengunjungi website
Halaman About dan halaman web view ketika mengunjungi website

 

Menggunakan MFMailComposeViewController

Sekarang kita akan mengimplementasikan tombol Contact Us. Ketika user menekannya, aplikasi akan menampilkan tampilan email dan kita bisa membuat email dengan aplikasi tersebut.

Seperti yang telah disebutkan sebelumnya, kita akan menggunakan class MFMailComposeViewController untuk membuat tampilan email. Hampir sama dengan UIWebView, class MFMailComposeViewController ini menghandle fitur email yang ada di aplikasi. Yang kita butuhkan adalah menambahkan framework MessageUI, dan membuat contoh MFMailComposesViewController untuk memanggil method presentViewController. Berikut contoh codenya:

Class itu bertanggung jawab terhadap method canSendMail yang berfungsi untuk mengecek jika device bersedia untuk mengirimkan email. Kita harus memanggil method ini sebelum percobaan membuat tampilan membuat email.

MailComposeDelegate menggunakan object delegate untuk menghilangkan tampilan mail. Object delegate harus menggunakan protocol MFMailComposeViewControllerDelegate dan mengimplementasikan method mailComposeController(_:didFinishWithResult:ereror:). Method ini dipanggil ketika user menakan tombol Send/Cancel pada tampilan Mail


 

Mengimplementasikan tombol Contact Us

Sekarang kita akan mengimplementasikan tombol Contact Us. Pertama, tambahkan statement berikut diawal file AboutViewController.swift:

import MessageUI

Lalu tambahkan method action di AboutViewController:

Code diatas sebenarnya hampir sama dengan yang dibawah dipostingan sebelumnya, kita hanya menambahkan dua baris code untuk memodifikasi warna navigation bar dan status bar style.

Class ini ditandai sebagai object delegate dari mail compose view controller. Jadi nantinya akan membutuhkan protocol MFMailComposeViewControllerDelegate dan UINavigationControllerDelegate. Jadi ganti deklrasi class tersebut menjadi:

class AboutViewController: UIVi

Lalu implementasikan method yang dibutuhkan seperti code berikut:

Seperti yang telah dibahas sebelumnya, method ini ditetapkan sebagai protocol MFMailComposeViewControllerDelegate dan akan otomatis dipanggil ketika tampilannya ditutup (user membantalkan operasinya melalui tombol cancel).

Sebelum method sendMail digunakan, kita harus membuat koneksi dengan tombol Contact Us. Ergi storyboard, tekan dan tahan tombol contro dan pindahkan dari tombol Contact Us ke About View Controller di Document Outline. Seperti yang terlihat pada gambar dibawah ini:

Membuat koneksi deengan action sendEmail
Membuat koneksi deengan action sendEmail

Nah itu dia, kita sudah bisa menjalankan aplikasi, dan seharuya aplikasi sudah bisa menampilkan halaman mail ketika kita menekan tombol Contact Us. Seperti yang terlihat digambar dibawah ini.

Tampilan Membuat Email
Tampilan Membuat Email

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code bisa didownload disini: https://www.dropbox.com/s/nu77onxoj60aqvj/FoodPinWebEmail.zip?dl=0

Semoga bermanfaat ya Guys, See Yaa … 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s