用 Xamarin.Forms 開發拍照與上傳照片的功能

這是有人提出的問題，想要使用 Visual Studio + Xamarin.Forms，開發出一個可以使用手機拍照的功能，並且可以將這個照片檔案，上傳到網路上；我剛剛寫了一個小的範例程式，底下的程式碼為這個拍照頁面的 ViewModel 程式碼。

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

想要使用拍照功能，您需要安裝這兩個 PCLStorage / Xam.Plugin.Media NuGet 套件。
其中，要進行拍照的時候，可以使用這個方法 CrossMedia.Current.TakePhotoAsync 來啟動手機中的照相機，一旦完成照相作業，就可以取得這個照片的檔案路徑。
而要將圖片上傳到遠端伺服器的工作，則使用了 .NET 裡面的 HttpClient 物件，當然，在 PCL 專案內您會找不到這個類別，請您要安裝 Microsoft.Net.Http 這個 NuGet 套件即可使用。

        public MainPageViewModel(IPageDialogService dialogService)
        {

            _dialogService = dialogService;
            拍照Command = new DelegateCommand(async () =>
            {
                // 進行 Plugin.Media 套件的初始化動作
                await CrossMedia.Current.Initialize();

                // 確認這個裝置是否具有拍照的功能
                if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
                {
                    await _dialogService.DisplayAlertAsync("No Camera", ":( No camera available.", "OK");
                    return;
                }

                // 啟動拍照功能，並且儲存到指定的路徑與檔案中
                var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
                {
                    Directory = "Sample",
                    Name = "Sample.jpg"
                });

                if (file == null)
                    return;

                // 讀取剛剛拍照的檔案內容，轉換成為 ImageSource，如此，就可以顯示到螢幕上了
                MyImageSource = ImageSource.FromStream(() =>
                {
                    var stream = file.GetStream();
                    return stream;
                });

                #region 將剛剛拍照的檔案，上傳到網路伺服器上
                using (var client = new HttpClient())
                {
                    using (var content = new MultipartFormDataContent())
                    {
                        // 取得這個圖片檔案的完整路徑
                        var path = file.Path;
                        // 取得這個檔案的最終檔案名稱
                        var filename = Path.GetFileName(path);

                        // 開啟這個圖片檔案，並且讀取其內容
                        using (var fs = file.GetStream())
                        {
                            var streamContent = new StreamContent(fs);
                            streamContent.Headers.Add("Content-Type", "application/octet-stream");
                            streamContent.Headers.Add("Content-Disposition", "form-data; name=\"file\"; filename=\"" + Path.GetFileName(path) + "\"");
                            content.Add(streamContent, "file", filename);

                            // 上傳到遠端伺服器上
                            HttpResponseMessage message = await client.PostAsync("http://YourHost/api/UploadImage", content);

                            var input = message.Content.ReadAsStringAsync();
                            // 更新頁面上的 Image 控制項，顯示出剛剛上傳的圖片內容
                            RemoteImageURL = $"http://YourHost/uploads/{filename}";
                        }
                    }
                }
                #endregion

            });
        }

只要7天，一步一步地學會 MVC (Model view controller) 開發技術

光看字面意義，真的滿吸引人的 『Learn MVC (Model view controller) Step by Step in 7 days』，這好像是台灣在賣藥品或者保養品的廣告；只要短短7天，本商品就可以幫助您年輕10歲。

不過，師父領進門，修行在個人，再好的入門文章、技巧、教學影片、課程，若您之後不自己來修練，說真的，還是無效的。

來看看這個作者的前五天的課程規劃

Day 1: -Controllers, strong typed views and helper classes
Day 2: - Unit test, routing and outbound URLS
Day 3:- Partial views, Data annotations,Razor, Authentication and Authorization
Day 4:- JSON, JQuery, State management and Asynch controller
Day 5:- Bundling , Minification , ViewModels,Areas and Exception handling
Day 6: - Display Modes,MVC OAuth,Model Binders,Layout and Custom view engine

真的滿不錯的，若您實際有打開這些課程連結，您就會發現到作者是相當的用心，每天的課程有著 Youtube 的影片，透過影片的學習，快速地聽老師講解一遍，甚至可以看到老師對於範例的操作過程，有助於您對於 ASP.NET MVC 的觀念與作法上的了解。若您聽不太懂英文，真的有些抱歉，因為，這些影片在 Youtube 上沒有提供翻譯字幕。

最後，這是一個值得推薦的 ASP.NET MVC 課程 (免費的喔 )

Visual Studio "14" CTP 與 Azure，讓您立即體驗 VS2014的新功能

微軟最近推出了下一代的Visual Studio版本，代號叫做 Visual Studio “14”，不過，想要體驗與試用這個軟體，要去下載，而且可能會與現在使用的Visual Studio 2013/2012/2010相衝突，又不想自己使用另外一台機器來安裝這樣的環境或者自己建立一個虛擬主機VM。

最近從我的 MSDN所提供的 Azure 服務中，無意間看到了 Azure 的虛擬主機 VM 服務，正好有提供一款虛擬主機，已經幫您準備好了 [Visual Studio 14 CTP 1]的環境，二話不囉嗦，馬上建立起來，看看有甚麼新功能在未來要推出的 Visual Studio 上呢?

首先，進入您的 Azure 服務網頁，選擇[虛擬主機] > [新增]，此時會出現如下圖的畫面，請依序選擇 [計算] > [虛擬主機] > [從組件庫] 選項。

在出現 [建立虛擬機器] 的 [選擇映像] 畫面後，捲動可以選擇的虛擬主機映像，您會看到 Visual Studio Professional 14 CTP 1 (Windows Server 2012 R2)，請選擇這個項目。

接這設定您的虛擬機器組態，這包含了虛擬機器名稱(自行決定)、層次(我使用標準)、大小(我選擇 A2 (2核心，3.5GB記憶體)、最後請輸入要登入該虛擬機器的帳號與密碼。

在第三個步驟頁面，關於設定值：雲端服務、雲端服務 DNS 名稱、區域/同質群組/虛擬網路、儲存體帳戶、可用性設定組的參數，我都是維持系統預設的。

在最後一個步驟哩，我選擇了不 [安裝 VM 代理程式]，這樣就完成了這台虛擬機器的設定，稍帶一段時間，Azure VM 就建立好了。

此時在 Azure 儀表板上，可看到文字：
VulcanVS14 正在啟動 (正在佈建) Windows Azure MSDN - Visual Studio Professional

一旦虛擬主機建置完成後，馬上利用遠端桌面連上這台剛剛建立好的虛擬機器，登入完成後，在桌面，很快地看到了 [Visual Studio 14 CTP] 圖示，想當然耳的，就是馬上打開來瞧瞧囉。

第一次啟動的選擇設定，這部分似乎沒有太多的變化。

接著要稍待一段時間，做第一次的啟動。
不知道為什麼，Visual Studio Professional 14 CTP一定要我做 Sing in的動作，所以，沒有辦法，只好登入到我的 Microsoft Account Live ID了。
Sign in to Visual Studio
Visual Studio will help you play projects, collaborate with your team, and manage your code online from anywhere.

Visual Studio will automatically keep you signed in, sync your settings between devices, and connect to online developer serivces.

登入完成後，接著建立一個新的專案。
不過，觀察了一下，關於 [Store Apps]類型的專案，似乎和 Visual Studio 2013沒有太大的差異，所以，我選擇了 [Web] 類型的專案，接著選擇 [ASP.NET vNext Web Application] ，看看產生了甚麼？

好像沒有看到 Web.config了，所以，我將 config.json & HomeController.cs & Startup.cs 的內容貼出來。

[config.json]

{
    "Data": {
        "DefaultConnection": { 
            "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnetvnext-e3cd9372-49c2-4e9c-b97d-aa146a1185dd;Trusted_Connection=True;MultipleActiveResultSets=true"
        }
    }
}

[Startup.cs]

using System;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.Security;
using Microsoft.AspNet.Routing;
using Microsoft.AspNet.Security.Cookies;
using Microsoft.Data.Entity;
using Microsoft.Framework.ConfigurationModel;
using Microsoft.Framework.DependencyInjection;
using WebApplication1.Models;

namespace WebApplication1
{
    public class Startup
    {
        public void Configure(IBuilder app)
        {
            // Enable Browser Link support
            app.UseBrowserLink();

            // Setup configuration sources
            var configuration = new Configuration();
            configuration.AddJsonFile("config.json");
            configuration.AddEnvironmentVariables();

            // Set up application services
            app.UseServices(services =>
            {
                // Add EF services to the services container
                services.AddEntityFramework()
                    .AddSqlServer();

                // Configure DbContext
                services.SetupOptions(options =>
                {
                    options.UseSqlServer(configuration.Get("Data:DefaultConnection:ConnectionString"));
                });
                
                // Add Identity services to the services container
                services.AddIdentity()
                    .AddEntityFramework()
                    .AddHttpSignIn();

                // Add MVC services to the services container
                services.AddMvc();
            });

            // Add static files to the request pipeline
            app.UseStaticFiles();

            // Add cookie-based authentication to the request pipeline
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login"),
            });

            // Add MVC to the request pipeline
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default", 
                    template: "{controller}/{action}/{id?}",
                    defaults: new { controller = "Home", action = "Index" });

                routes.MapRoute(
                    name: "api",
                    template: "{controller}/{id?}");
            });
        }
    }
}

[HomeController.cs]

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public IActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

若您有 Microsoft Azure 的帳號，可以馬上來體驗一下，若您沒有的話，那也沒關係，因為您可以馬上申請試用 Azure 服務，試用期間是不用錢的。

微軟 Azure 官方網站