แบ็คเอนด์

วิธีสร้างแอพ Android และ iOS ใน C # บน Mac

กาลครั้งหนึ่งมี บริษัท ที่มีเครื่องมือที่ดีที่สุดและการเขียนซอฟต์แวร์สำหรับแพลตฟอร์มของพวกเขานั้นยอดเยี่ยมมาก แต่ช้าไปพวกเขาก็ไม่สนใจปัญหาของตัวเอง พวกเขาไม่ได้ตื่นตระหนกเมื่อระบบของพวกเขาพัง แต่ยอมรับสภาพของจักรวาลนี้ว่าเป็นความจริงของชีวิต พวกเขาเชื่อว่าโปรแกรมของพวกเขาสมบูรณ์แบบในตัวเองเงียบสงบและสง่างามมีจุดมุ่งหมายที่ชัดเจนในตัวเอง

โอ้ที่รักถ้าพวกเขารู้แค่ว่าคิดผิด ...

มันเกินกำหนดเมื่อพวกเขาตระหนักถึงความผิดพลาดและซีอีโอของพวกเขาร้องให้ นำนักพัฒนาทั้งหมดกลับมา ที่ทิ้งชานชาลาและแล่นออกไป บริษัท คือ Microsoft และฉันคนหนึ่งเชื่อมั่นว่าชะตากรรมของพวกเขาถูกปิดตายและพวกเขาจะต้องพินาศอย่างช้าๆ แต่แน่นอนจากแนวหน้าของภูมิทัศน์เทคโนโลยี

ดีใจสุด ๆ คิดผิด!

ในช่วงไม่กี่ปีที่ผ่านมา Microsoft ได้ดึงเอซสองสามตัวออกจากแขนเสื้อ ใช่พวกเขาทำ Skype ยุ่ง (ฉันยังเกลียดพวกเขาอยู่) ล้มเหลวกับสมาร์ทโฟนและเกือบจะประสบความสำเร็จกับแท็บเล็ต แต่พวกเขาก็ทำสิ่งที่น่าอัศจรรย์เช่นกัน เลิกใช้วิธีการปิดอาณาจักรของพวกเขาพวกเขาเปิด. NET เข้าร่วม Linux Foundation เปิดตัว SQL Server สำหรับ Linux และสร้างเครื่องมือใหม่ที่ยอดเยี่ยมนี้ชื่อว่า Visual Studio สำหรับ Mac .

ถูกต้องก จริง Microsoft IDE ไม่ใช่สำหรับ Windows แต่สำหรับ Mac ลองนึกดูสิ!

Visual Studio สำหรับ Mac

การเขียนแอปพลิเคชันข้ามแพลตฟอร์ม Android และ iOS เครื่องแรกของคุณโดยใช้ C # บน Mac

คุณสามารถใช้ Visual Studio for Mac เพื่อสร้างแอปพลิเคชันเกือบทุกประเภท อาจเป็น iOS, tvOS, Android, Mac, .NET Core หรือแม้แต่ ASP.NET ขณะที่เด็ก ๆ ทุกคนกำลังเขียนแอปบนอุปกรณ์เคลื่อนที่มาดูกันว่าต้องใช้อะไรบ้างใน Visual Studio for Mac เพื่อสร้างแอปพลิเคชัน C # ที่จะทำงานบน Android และ iOS

สิ่งแรกที่คุณต้องทำคือเลือกเทมเพลตแอปพลิเคชัน เริ่มต้นด้วย“ แอป Single View” ง่ายๆ

แอปมุมมองเดียว

หลังจากกรอกชื่อแพ็กเกจและบูตแอปของคุณแล้ว Visual Studio จะสร้างโซลูชันที่มีสามโปรเจ็กต์ โปรเจ็กต์แรกจะเป็นไลบรารีที่ใช้ร่วมกันซึ่งคุณควรเก็บโค้ดที่ไม่ขึ้นกับแพลตฟอร์มและอีก 2 รายการจะเป็นแอป Android และ iOS

เริ่มต้นใช้งาน

คุณสามารถใช้เมนู“ เรียกใช้” หรือคำสั่งในแถบแอปพลิเคชันเพื่อเริ่มแอปของคุณ

สวัสดีชาวโลกคลิกฉัน!

เข้าสู่ระบบสองคลิก

ยินดีด้วย! ตอนนี้คุณเป็นนักพัฒนา iOS และ Android ไม่ว่าคุณจะไม่เคยเขียนโค้ด Objective-C, Swift หรือ Java เลยก็ตาม

เรายังไม่ประสบความสำเร็จมากนักกับแอปของเรา มาทำให้สิ่งต่างๆน่าสนใจยิ่งขึ้นและรวมแผนที่และบริการระบุตำแหน่ง

การใช้แผนที่และบริการตำแหน่ง

โปรดทราบว่า VS for Mac ยังอยู่ใน 'Preview' และไม่มีความช่วยเหลือและเอกสารประกอบที่คุณจะพบในการใช้งานมากนัก สถานที่ที่ดีที่สุดสำหรับการอ้างอิงเกี่ยวกับวิธีการทำสิ่งต่างๆยังคงเป็นเอกสาร Xamarin อย่างเป็นทางการ

Visual Studio For Mac ไม่ได้ใช้โซลูชันและโครงสร้างแอปพลิเคชันเดียวกันกับเครื่องมือ Xamarin ที่คุณอาจเคยเห็นบนพีซี ในกรณีส่วนใหญ่คุณจะต้องทดลองและหลีกเลี่ยงอุปสรรคเล็กน้อยเพื่อให้ตัวอย่างใช้งานได้จริง หวังว่า Microsoft จะอยู่เหนือเกมของพวกเขาและมอบคอลเล็กชันทรัพยากร MSDN ที่ยอดเยี่ยมเมื่อ VS for Mac เวอร์ชันสุดท้ายเปิดตัว

แสดงตำแหน่งปัจจุบันบน iOS

การเข้าถึงทรัพยากรของอุปกรณ์เคลื่อนที่เช่นตำแหน่งปัจจุบันต้องการให้ผู้ใช้ 'ด้วยตนเอง' ให้สิทธิ์แอปของคุณเพื่อใช้ทรัพยากรเหล่านั้น iOS ใช้ไฟล์ info.plist เพื่อจัดเก็บการตั้งค่าเหล่านี้ VS for Mac มีอินเทอร์เฟซภาพสำหรับแก้ไขไฟล์นี้ สิ่งแรกที่เราต้องทำคือเพิ่มค่าสำหรับการตั้งค่าชื่อ NSLocationWhenInUseUsageDescription

การเพิ่มค่าสำหรับตำแหน่งเมื่ออยู่ในคำอธิบายการใช้งาน

บันทึก: VS จะแสดงชื่อยาวสำหรับ“ NSLocationWhenInUseUsageDescription” เมื่อคุณตั้งชื่อคุณสมบัติ นี่เป็นสิ่งที่คาดหวังและไม่ต้องกังวลกับมัน

แอปพลิเคชัน bootstrapped ของเราถูกสร้างขึ้นด้วยปุ่มง่ายๆที่นับการคลิก สิ่งแรกที่คุณต้องทำคือลบออกและแทนที่เนื้อหาบนหน้าจอด้วยแผนที่ ในการดำเนินการนี้ให้มองหา Main.storyboard ไฟล์ในเบราว์เซอร์โซลูชันและดับเบิลคลิกเพื่อเปิดในตัวแก้ไข

สตอรี่บอร์ดคือการแสดงภาพของอินเทอร์เฟซผู้ใช้ของแอปพลิเคชันโดยแสดงหน้าจอของเนื้อหาและการเชื่อมต่อระหว่างหน้าจอเหล่านั้น สตอรีบอร์ดประกอบด้วยลำดับฉากซึ่งแต่ละฉากแสดงถึงตัวควบคุมมุมมองและมุมมอง ฉากเชื่อมต่อกันด้วยวัตถุต่อเนื่องซึ่งแสดงถึงการเปลี่ยนระหว่างตัวควบคุมมุมมองสองตัว

สตอรี่บอร์ดได้รับการแนะนำโดย Apple และนำมาใช้โดย Xamarin เช่นกัน อ้างถึง เอกสารของ Apple หรือ เอกสาร Xamarin สำหรับข้อมูลเพิ่มเติม.

ลบปุ่มและเพิ่มคอมโพเนนต์มุมมองแผนที่ลงในเพจ

ลบองค์ประกอบมุมมองแผนที่

อย่าลืมตั้งชื่อส่วนประกอบ“ mapView” ของคุณอย่างถูกต้อง

การตั้งชื่อองค์ประกอบมุมมองแผนที่

สิ่งที่เหลืออยู่ตอนนี้คือการล้าง ViewController.cs ของคุณ ไฟล์และแก้ไข ViewDidLoad() วิธีการจับคู่ต่อไปนี้:

 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; }

คุณสามารถใช้คุณสมบัติ“ แก้ไขด่วน” เพื่อให้ VS เพิ่มการอ้างอิงไปยังไลบรารี CoreLocation โดยอัตโนมัติหรือคุณสามารถเพิ่มด้วยตนเองก็ได้

หลังจากที่คุณเรียกใช้แอป iOS ของคุณคุณจะเห็นคำขอเข้าถึงตำแหน่งของคุณ เมื่อได้รับอนุญาตแผนที่ของคุณจะโหลดด้วยจุดสีน้ำเงินมาตรฐานที่แสดงว่าคุณอยู่ที่ไหน (หรือว่าคุณกำลังแกล้งทำอยู่ที่ไหนโดยใช้โปรแกรมจำลอง iOS :))

อนุญาตให้ใช้ตำแหน่งในแอปพลิเคชัน

แสดงตำแหน่งปัจจุบันบน Android

น่าเสียดายที่ Google และ Microsoft ตัดสินใจที่จะทำให้งานง่ายๆนี้ซับซ้อนกว่า iOS เล็กน้อย ในการใช้แผนที่ในแอปพลิเคชัน Android คุณจะต้องสร้างคีย์ Google Maps API และเพิ่มลงใน AndroidManifest.xml ของคุณ ไฟล์.

พวก Xamarin สร้างคำแนะนำที่ตรงไปตรงมาสำหรับ การรับคีย์ Google Maps API . โปรดทำตามขั้นตอนในคำแนะนำก่อนดำเนินการต่อ เมื่อคุณทำเสร็จแล้ว AndroidManifest.xml ของคุณ ควรมีการตั้งค่าดังนี้:

Xamarin.Forms.Maps

ตอนนี้คุณพร้อมที่จะเพิ่มแผนที่ลงในแอปพลิเคชันของคุณแล้ว

สิ่งที่ยอดเยี่ยมสำหรับ VS สำหรับ Mac คือมันขับเคลื่อนโดย NuGet เหมือนกับพี่ใหญ่ เนื่องจากไม่รวมไลบรารีการจัดการแผนที่โดยค่าเริ่มต้นคุณจึงต้องติดตั้ง LinearLayout แพ็คเกจ

ติดตั้ง Xamarin.Forms.Maps

อย่างไรก็ตามไม่มีองค์ประกอบ“ มุมมองแผนที่” ที่คุณสามารถลากไปที่“ กิจกรรม” ของคุณได้ แต่การเพิ่มแผนที่ลงในหน้าจอจำเป็นต้องเปลี่ยนไฟล์ Resources-> layout-> Main.axml ด้วยตนเอง คุณสามารถใช้มุมมองตัวออกแบบเพื่อลบปุ่มที่สร้างขึ้นก่อนหน้านี้ แต่จากนั้นเปลี่ยนเป็น“ มุมมองโค้ด” และเพิ่มโค้ดแฟรกเมนต์ต่อไปนี้ใน AndroidManifest.xml ของคุณ:

MainActivity.cs

เช่นเดียวกับ iOS คุณจะต้องกำหนดค่าแอปของคุณเพื่อขอสิทธิ์ที่เหมาะสม โดยเปิด 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); } } เพื่อแก้ไขและคลิกปุ่ม 'แอปพลิเคชัน' ที่ด้านล่างซ้ายของตัวแก้ไข VS จะแสดงอินเทอร์เฟซภาพสำหรับการตั้งค่าเหล่านี้ มีบางส่วนที่คุณต้องเปิดใช้ดังที่แสดงด้านล่าง

การเปิดใช้งานสิทธิ์

ถึงเวลาเขียนโค้ดจริงแล้ว ค้นหา LocationManager locMgr; string locationProvider; เปิดไฟล์เพื่อแก้ไขและทำการเปลี่ยนแปลงต่อไปนี้:

เพิ่มการอ้างอิงเนมสเปซ:

OnCreate()

เพิ่มสองตัวแปรต่อไปนี้เป็นตัวแปรระดับคลาส:

 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); }

และล้างข้อมูล OnCreate() วิธีการมีลักษณะดังนี้:

MainActivity

โดยเรียก GetSystemService จากภายใน ILocationListener วิธีการของคุณ RestClient.cs จะเปิดใช้งานเป็น 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); } } } } และจะสามารถจัดการกับเหตุการณ์ทั้งหมดที่ระบุไว้ข้างต้นได้

เรียกใช้แอปพลิเคชัน Android ของคุณและคุณควรวางแผนที่ไว้ในตำแหน่งของคุณคล้ายกับภาพต่อไปนี้

แผนที่ตำแหน่งในซาราเยโว

การใช้ไลบรารีที่ใช้ร่วมกันสำหรับ iOS และ Android

หนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุดของ VS for Mac คือความเป็นไปได้ที่จะมีรหัสที่ใช้ร่วมกันระหว่างแอพ iOS และ Android ตามหลักการแล้วเราสามารถมีตรรกะทางธุรกิจทั้งหมดของแอปในไลบรารีที่ใช้ร่วมกันโดย จำกัด โค้ดเฉพาะ iOS และ Android ให้เป็นส่วนหนึ่งของ UI

มาสร้างคลาสที่ใช้ร่วมกันซึ่งจะดำเนินการตามคำขอ HTTP แบบอะซิงโครนัสและแสดงเนื้อหาในคอนโซลการแก้ไขข้อบกพร่อง

สร้างไฟล์คลาสใหม่ในไลบรารีที่แชร์ของคุณชื่อ ViewController.cs ด้วยรหัสต่อไปนี้:

(อย่าลืมใช้เนมสเปซที่ถูกต้องจากโปรเจ็กต์ของคุณ)

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. } } }

การใช้ไลบรารีบน iOS

แก้ไข MainActivity.cs ของคุณ ไฟล์ในโครงการ iOS เพื่อให้ตรงกับรหัสต่อไปนี้:

(อย่าลืมใช้เนมสเปซที่ถูกต้องจากโปรเจ็กต์ของคุณ)

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(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(Resource.Id.myButton); button.Text = 'All done'; System.Diagnostics.Debug.WriteLine(content); }); } } }

เรียกใช้แอป iOS ของคุณคลิกปุ่มและตรวจสอบแท็บ“ Application Output” ใน Visual Studio ควรแสดงสิ่งนี้:

แท็บ Application Output

การใช้ไลบรารีบน Android

การเปลี่ยนแปลงที่จำเป็นในแอป Android นั้นคล้ายกับการเปลี่ยนแปลงที่จำเป็นบน iOS แก้ไข RunOnUiThread ไฟล์ให้ตรงกับสิ่งต่อไปนี้:

(อย่าลืมใช้เนมสเปซที่ถูกต้องจากโปรเจ็กต์ของคุณ)

InvokeOnMainThread

บันทึก: สถาปัตยกรรมระบบของทั้งสองแพลตฟอร์ม Android และ iOS กำหนดให้การโต้ตอบ UI ทั้งหมดเกิดขึ้นบนเธรดแอปพลิเคชันหลัก ซึ่งหมายความว่าการเปลี่ยนแปลงองค์ประกอบ UI ควรเกิดขึ้นจากภายในเธรดหลักด้วยเช่นกัน นั่นคือที่ doneCallback() และ

|_+_|

เข้ามาเนื่องจากคำขอ HTTP ถูกดำเนินการในเธรดแยกต่างหากและ
ถูกเรียกว่านอกเธรดหลักเราต้องใช้วิธีการเหล่านี้เพื่อให้สามารถเข้าถึงปุ่มและเปลี่ยนป้ายกำกับ

นักพัฒนา C # กำลังครอบครอง Android และ iOS

Visual Studio for Mac ยังมีริ้วรอยเล็กน้อยที่ต้องแก้ไข แต่จากการมองครั้งแรกฉันรู้สึกตื่นเต้นมากเกี่ยวกับอนาคตของมัน ความต้องการแอปพลิเคชันมือถือเพิ่มขึ้นในแต่ละวันและด้วย Visual Studio for Mac Microsoft ได้เปิดใช้งานกองทัพของ นักพัฒนา C # ที่ยอดเยี่ยม เพื่อเติมเต็มความต้องการนี้

ตอนนี้ Swift และ Java / JVM มีคู่แข่งใหม่และแข็งแกร่งมากในการต่อสู้เพื่อสภาพแวดล้อมการพัฒนาอุปกรณ์มือถือของเรา ที่เกี่ยวข้อง: .NET Core - ไปป่าและโอเพ่นซอร์ส Microsoft ใช้เวลาอะไรนานขนาดนี้! ที่เกี่ยวข้อง: ภาษา Dart: เมื่อ Java และ C # ไม่คมพอ