Cara Membuat Aplikasi Android dan iOS di C# di Mac

Dahulu kala, ada perusahaan yang memiliki semua alat terbaik, dan menulis perangkat lunak untuk platform mereka sangat mengagumkan. Namun lambat laun, mereka menjadi acuh tak acuh terhadap masalah mereka sendiri. Mereka tidak menjadi khawatir ketika sistem mereka rusak, melainkan menerima keadaan alam semesta ini sebagai fakta kehidupan. Mereka percaya bahwa program mereka sempurna dalam diri mereka, tenang dan elegan, tujuan mereka jelas.

Ya ampun, andai saja mereka tahu betapa salahnya mereka...

Sudah terlambat ketika mereka menyadari kesalahan mereka dan CEO mereka menangis untuk membawa kembali semua pengembang yang meninggalkan platform mereka dan berlayar. Perusahaan itu adalah Microsoft dan saya, misalnya, yakin bahwa nasib mereka telah ditentukan dan bahwa mereka perlahan tapi pasti akan binasa dari garis depan lanskap teknologi.

Saya sangat senang bahwa saya salah!

Dalam beberapa tahun terakhir, Microsoft telah menarik beberapa ace dari lengan baju mereka. Ya, mereka mengacaukan Skype (saya masih membenci mereka karena itu), gagal dengan smartphone, dan hampir berhasil dengan tablet. Tapi, mereka juga melakukan beberapa hal yang sangat menakjubkan. Melepaskan pendekatan kerajaan tertutup mereka, mereka membuka .NET, bergabung dengan Linux Foundation, merilis SQL Server untuk Linux, dan menciptakan alat baru yang hebat ini yang disebut Visual Studio untuk Mac.

Itu benar , Microsoft IDE asli bukan untuk Windows, tetapi untuk Mac. Bayangkan itu!

Menulis Aplikasi Android dan iOS Lintas Platform Pertama Anda Menggunakan C# di Mac

Anda dapat menggunakan Visual Studio untuk Mac untuk membuat hampir semua jenis aplikasi. Itu bisa iOS, tvOS, Android, Mac, .NET Core, atau bahkan ASP.NET. Karena semua anak keren sekarang sedang menulis aplikasi seluler, mari kita lihat apa yang diperlukan di Visual Studio untuk Mac untuk membuat aplikasi C# yang akan berjalan di Android dan iOS.

Hal pertama yang perlu Anda lakukan adalah memilih template aplikasi. Mari kita mulai dengan "Aplikasi Satu Tampilan" sederhana.

Setelah mengisi nama paket dan mem-bootstrap aplikasi Anda, Visual Studio akan membuat solusi dengan tiga proyek. Proyek pertama akan menjadi perpustakaan bersama di mana Anda harus menyimpan kode platform-independen, dan dua lainnya adalah aplikasi Android dan iOS.

Anda dapat menggunakan menu "Jalankan", atau perintah di bilah aplikasi, untuk memulai aplikasi Anda.

Selamat! Anda sekarang adalah pengembang iOS dan Android terlepas dari kenyataan bahwa Anda tidak pernah menulis sebaris kode Objective-C, Swift, atau Java.

Kami belum benar-benar mencapai banyak hal dengan aplikasi kami. Mari buat semuanya lebih menarik dan gabungkan peta dan layanan lokasi.

Menggunakan Peta dan Layanan Lokasi

Ingatlah bahwa VS untuk Mac masih dalam "Pratinjau" dan tidak banyak bantuan dan dokumentasi yang akan Anda temukan untuk menggunakannya. Tempat terbaik untuk referensi tentang cara melakukan sesuatu masih dokumentasi resmi Xamarin.

Visual Studio For Mac tidak menggunakan solusi dan struktur aplikasi yang sama seperti alat Xamarin yang mungkin Anda lihat di PC. Dalam kebanyakan kasus, Anda perlu bereksperimen dan mengatasi beberapa rintangan agar contoh mereka berhasil. Mari berharap bahwa Microsoft akan tetap menjadi yang teratas dalam permainan mereka dan menyediakan koleksi sumber daya MSDN yang luar biasa setelah versi final VS untuk Mac dirilis.

Menampilkan Lokasi Saat Ini di iOS

Mengakses sumber daya perangkat seluler, seperti lokasi saat ini, mengharuskan pengguna untuk "secara manual" memberikan izin ke aplikasi Anda untuk menggunakan sumber daya tersebut. iOS menggunakan file info.plist untuk menyimpan pengaturan ini. VS untuk Mac menyediakan antarmuka visual untuk mengedit file ini. Hal pertama yang perlu kita lakukan adalah menambahkan nilai untuk pengaturan bernama NSLocationWhenInUseUsageDescription .

Catatan: VS akan menampilkan nama panjang untuk "NSLocationWhenInUseUsageDescription" saat Anda menetapkan nama properti. Ini diharapkan dan jangan khawatir tentang hal itu.

Aplikasi bootstrap kami dibuat dengan tombol sederhana yang menghitung klik. Hal pertama yang ingin Anda lakukan adalah menghapusnya dan mengganti konten layar dengan peta. Untuk melakukan ini, cari file Main.storyboard di browser solusi dan klik dua kali untuk membukanya di editor.

Storyboard diperkenalkan oleh Apple dan diadopsi oleh Xamarin juga. Lihat Dokumentasi Apple atau Dokumentasi Xamarin untuk informasi lebih lanjut.

Hapus tombol dan tambahkan komponen Tampilan Peta ke halaman.

Pastikan untuk memberi nama komponen "mapView" Anda dengan benar.

Yang tersisa sekarang adalah membersihkan file ViewController.cs Anda, dan memodifikasi metode ViewDidLoad() agar sesuai dengan yang berikut:

 using CoreLocation; public override void ViewDidLoad() { base.ViewDidLoad(); // Perform any additional setup after loading the view, typically from a nib. CLLocationManager locationManager = new CLLocationManager(); locationManager.RequestWhenInUseAuthorization(); mapView.ShowsUserLocation = true; }

Anda dapat menggunakan fitur "Perbaikan cepat" agar VS secara otomatis menambahkan referensi ke perpustakaan CoreLocation atau Anda dapat menambahkannya secara manual.

Setelah menjalankan aplikasi iOS, Anda akan melihat permintaan untuk mengakses lokasi Anda. Setelah izin diberikan, peta Anda akan dimuat dengan titik biru standar yang menunjukkan di mana Anda berada (atau di mana Anda berpura-pura dengan menggunakan simulator iOS :)).

Menampilkan Lokasi Saat Ini di Android

Sayangnya, Google dan Microsoft memutuskan untuk membuat tugas sederhana ini sedikit lebih rumit daripada iOS. Untuk menggunakan peta di aplikasi Android, Anda perlu membuat kunci Google Maps API, dan menambahkannya ke file AndroidManifest.xml Anda.

Teman-teman Xamarin membuat panduan yang cukup mudah untuk mendapatkan kunci Google Maps API. Silakan ikuti langkah-langkah dalam panduan mereka sebelum Anda melanjutkan. Setelah selesai, AndroidManifest.xml Anda akan berisi pengaturan seperti ini:

 <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR KEY" />

Anda sekarang siap untuk menambahkan peta ke aplikasi Anda.

Hal yang hebat dengan VS untuk Mac adalah ia didukung oleh NuGet, sama seperti kakaknya. Karena pustaka penanganan peta tidak disertakan secara default, Anda perlu menginstal paket Xamarin.Forms.Maps .

Namun, tidak ada komponen "Tampilan Peta" yang bisa Anda seret ke "Aktivitas" Anda. Sebagai gantinya, menambahkan peta ke layar mengharuskan Anda mengubah file Resources->layout->Main.axml secara manual. Anda dapat menggunakan tampilan desainer untuk menghapus tombol yang dibuat sebelumnya, tetapi kemudian beralih ke “Tampilan Kode” dan menambahkan kode fragmen berikut di LinearLayout Anda :

 <fragment xmlns:andro android: android:layout_width="match_parent" android:layout_height="match_parent" class="com.google.android.gms.maps.MapFragment" />

Seperti halnya iOS, Anda perlu mengonfigurasi aplikasi Anda untuk meminta izin yang tepat. Untuk melakukannya, buka AndroidManifest.xml untuk mengedit dan klik tombol "Aplikasi" di sisi kiri bawah editor. VS akan menunjukkan kepada Anda antarmuka visual untuk mengatur nilai-nilai ini. Ada beberapa di antaranya yang perlu Anda aktifkan, seperti yang ditunjukkan di bawah ini.

Sekarang saatnya untuk menulis beberapa kode nyata. Temukan file MainActivity.cs , buka untuk diedit, dan buat perubahan berikut:

Tambahkan referensi namespace:

 using Android.Gms.Maps.Model; using Android.Gms.Maps; using Android.Locations; Make your MainActivity also a ILocationListener. public class MainActivity : Activity, ILocationListener Implement the ILocationListener methods within your MainActivity: public void OnProviderEnabled(string provider) {} public void OnProviderDisabled(string provider) {} public void OnStatusChanged(string provider, Availability status, Bundle extras) {} public void OnLocationChanged(Android.Locations.Location location) { LatLng latLng = new LatLng(location.Latitude, location.Longitude); CameraPosition.Builder builder = CameraPosition.InvokeBuilder(); builder.Target(latLng); builder.Zoom(15); builder.Bearing(155); builder.Tilt(10); CameraPosition cameraPosition = builder.Build(); CameraUpdate cameraUpdate = CameraUpdateFactory.NewCameraPosition(cameraPosition); MapFragment mapFrag = (MapFragment)FragmentManager.FindFragmentById(Resource.Id.map); GoogleMap map = mapFrag.Map; if (map != null) { map.MoveCamera(cameraUpdate); } }

Tambahkan dua variabel berikut sebagai variabel tingkat kelas:

 LocationManager locMgr; string locationProvider;

Dan bersihkan metode OnCreate() agar terlihat seperti ini:

 protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); locMgr = GetSystemService(LocationService) as LocationManager; Criteria locationCriteria = new Criteria(); locationCriteria.Accuracy = Accuracy.Coarse; locationCriteria.PowerRequirement = Power.Medium; locationProvider = locMgr.GetBestProvider(locationCriteria, true); locMgr.RequestLocationUpdates(locationProvider, 2000, 1, this); }

Dengan memanggil GetSystemService dari dalam metode OnCreate() , MainActivity Anda akan diaktifkan sebagai ILocationListener dan dengan demikian akan dapat menangani semua peristiwa yang tercantum di atas.

Jalankan aplikasi Android Anda dan Anda akan mendapatkan peta diposisikan ke lokasi Anda, mirip dengan gambar berikut.

Menggunakan Pustaka Bersama untuk iOS dan Android

Salah satu fitur terbaik VS untuk Mac adalah kemungkinan memiliki kode bersama antara aplikasi iOS dan Android. Idealnya, kita dapat memiliki semua logika bisnis aplikasi di perpustakaan bersama, membatasi kode khusus iOS dan Android untuk menjadi bagian dari UI.

Mari buat Kelas bersama yang akan melakukan permintaan HTTP secara asinkron dan menampilkan konten di konsol Debug.

Buat file kelas baru di perpustakaan bersama Anda bernama RestClient.cs dengan kode berikut:

(Pastikan untuk menggunakan namespace yang benar dari proyek Anda)

 using System; using System.Net; namespace testshared { public delegate void callback(string responseText); class ReqState { public ReqState(HttpWebRequest req, callback cb) { request = req; callback = cb; } public HttpWebRequest request { get; set; } public callback callback; } public class RestClient { public RestClient() {} public void FetchPage(string url, callback cb) { HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); request.BeginGetResponse(new AsyncCallback(FinishWebRequest), new ReqState(request, cb)); } private void FinishWebRequest(IAsyncResult result) { ReqState reqState = (result.AsyncState as ReqState); HttpWebResponse response = reqState.request.EndGetResponse(result) as HttpWebResponse; using (var reader = new System.IO.StreamReader(response.GetResponseStream())) { string responseText = reader.ReadToEnd(); reqState.callback(responseText); } } } }

Menggunakan Perpustakaan di iOS

Ubah file ViewController.cs Anda di proyek iOS agar sesuai dengan kode berikut:

(Pastikan untuk menggunakan namespace yang benar dari proyek Anda)

 using System; using UIKit; using System.Diagnostics; namespace testshared.iOS { public partial class ViewController : UIViewController { RestClient rest = new RestClient(); public ViewController(IntPtr handle) : base(handle) {} public override void ViewDidLoad() { base.ViewDidLoad(); // Perform any additional setup after loading the view, typically from a nib. Button.AccessibilityIdentifier = "myButton"; Button.TouchUpInside += delegate { Button.SetTitle("Loading...", UIControlState.Normal); rest.FetchPage("http://www.google.com", doneCallback); }; } public void doneCallback(string content) { InvokeOnMainThread(() => { Debug.Write(content); Button.SetTitle("All Done", UIControlState.Normal); }); } public override void DidReceiveMemoryWarning() { base.DidReceiveMemoryWarning(); // Release any cached data, images, etc that aren't in use. } } }

Jalankan aplikasi iOS Anda, klik tombol dan centang tab "Application Output" di Visual Studio. Seharusnya menampilkan sesuatu seperti ini:

Menggunakan Perpustakaan di Android

Perubahan yang diperlukan pada aplikasi Android sangat mirip dengan yang diperlukan di iOS. Ubah file MainActivity.cs agar sesuai dengan berikut ini:

(Pastikan untuk menggunakan namespace yang benar dari proyek Anda)

 using Android.App; using Android.Widget; using Android.OS; namespace testshared.Droid { [Activity(Label = "testshared", MainLauncher = true, Icon = "@mipmap/icon")] public class MainActivity : Activity { RestClient rest = new RestClient(); protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); // Get our button from the layout resource, // and attach an event to it Button button = FindViewById<Button>(Resource.Id.myButton); button.Click += delegate { button.Text = $"Loading..."; rest.FetchPage("http://www.google.com", doneCallback); }; } public void doneCallback(string content) { RunOnUiThread(() => { Button button = FindViewById<Button>(Resource.Id.myButton); button.Text = "All done"; System.Diagnostics.Debug.WriteLine(content); }); } } }

Catatan: Arsitektur sistem kedua platform, Android dan iOS, mengharuskan semua interaksi UI terjadi di thread aplikasi utama. Ini berarti bahwa setiap perubahan pada elemen UI harus terjadi dari dalam utas utama juga. Di situlah RunOnUiThread dan InvokeOnMainThread masuk. Karena permintaan HTTP dieksekusi di utas terpisah dan doneCallback() dipanggil di luar utas utama, kami harus menggunakan metode ini untuk dapat mengakses tombol dan mengubah label.

Pengembang C# Mengambil alih Android dan iOS

Visual Studio untuk Mac masih memiliki beberapa kerutan yang harus diselesaikan, tetapi dari tampilan pertama, saya sangat bersemangat tentang masa depannya. Kebutuhan akan aplikasi seluler tumbuh setiap hari dan, dengan Visual Studio untuk Mac, Microsoft telah memungkinkan lebih lanjut pasukan pengembang C# yang hebat untuk memenuhi kebutuhan ini.