BluemixとXamarinでモバイルアプリ開発

こちらは、2017年5月18日に開催されたiOSコンソーシアム開発技術WG向けの資料になります。

Transcript

1. © 2016 IBM Corporation 1 IBM Bluemix www.bluemix.net BluemixとXamarinで モバイルアプリ開発を簡単に Taiji HAGINO IBM BlueHub
2. © 2016 IBM Corporation 2 IBM Bluemix www.bluemix.net ⽬次 1. 登壇者の紹介 2. Bluemix概要 3. モバイルアプリを作る
3. © 2016 IBM Corporation 3 IBM Bluemix www.bluemix.net 1. Profile
4. © 2016 IBM Corporation 4 IBM Bluemix www.bluemix.net Taiji HAGINO Developer Advocate IBM Japan BlueHub taiponrock • スタートアップ⽀援 • 技術サポート • イベント・コミュニティ • パートナー連携
5. © 2016 IBM Corporation 5 IBM Bluemix www.bluemix.net 1. Bluemix Overview
6. © 2016 IBM Corporation 6 IBM Bluemix www.bluemix.net オープン・スタンダード を採⽤したPaaS 豊富な「API」と 「サービス」の提供 DevOpsの推進 絶えず追加される 新機能・サービス 外部リソースとの 容易な連携 お客様に合わせた 提供形態 アプリケーションを構築・管理・実⾏するための、オープン・スタンダード （Cloud Foundry）を活⽤した、PaaS型クラウド・ソリューション
7. © 2016 IBM Corporation 7 IBM Bluemix www.bluemix.net Platform as a Service (PaaS)型のサービスを提供することで、 ユーザーにアプリ開発に集中できる実⾏基盤を迅速に構築 Networking Networking Networking Networking Storage Storage Storage Storage Servers Servers Servers Servers Virtualization Virtualization Virtualization Virtualization O/S O/S O/S O/S Middleware Middleware Middleware Middleware Runtime Runtime Runtime Runtime Data Data Data Data Applications Applications Applications Applications Traditional On-Premises Infrastructure as a Service Platform as a Service Software as a Service ：利⽤者が⽤意 ：サービスとして提供
8. © 2016 IBM Corporation 8 IBM Bluemix www.bluemix.net Bluemix SoftLayer IaaS PaaS ~ SaaS Storages (Object, CDN, etc..) Bare Metal Virtual Network (LB, VPN, Firewall, etc…) 2016年10⽉下旬より、BluemixはSoftLayerとサービスを融合 Bluemix InfrastructureとしてSoftLayerの各サービスが利⽤可能
9. © 2016 IBM Corporation 9 IBM Bluemix www.bluemix.net Great Characteristic 1. Open standard PaaS
10. © 2016 IBM Corporation 10 IBM Bluemix www.bluemix.net Cloud Foundryと呼ばれるオープンソース・ソフトウェアをベースとして Open PaaS (特定のIaaS/ベンダーに縛られないPaaS) 基盤を提供 ・Heroku (Salesforce) ・Google App Engine (Google) ・AWS Elastic Beanstalk (Amazon) ・Microsoft Azure (Microsoft) ・IBM Pattern (IBM) 基盤が同じCloud Foundryであれば、基本的な操作・運⽤を共通化でき、プラットフォーム間の移⾏も容易になる Cloud Foundryは多くのベンダーに採⽤されており、現時点でOpen PaaSのスタンダードな基盤の1つとなっている Proprietary PaaS (独⾃実装) 2011年にVMWare社からリリースされ、現在はPivotal社にスピンアウト IBMを含む45社から構成されるCloud Foundry Foundationが管理・運営 GitHubでソースコードを公開、オンプレミスに構築可 (かなり難しい) q Cloud Foundry ・Cloud Foundry Bluemix, Pivotal, Cloudn PaaS, … ・Docker OPENSHIFT, Deis, Flynn, … Open PaaS (オープンな実装) q PaaSの代表的なサービス
11. © 2016 IBM Corporation 11 IBM Bluemix www.bluemix.net 【参考】Cloud Foundryのアーキテクチャー Cloud Foundry Runtime Cloud Foundry BOSH VMWare Openstack Softlayer Router DEA （ランタイム) Cloud Controller Health Manager NATS Service Broker Service § DEA: Droplet Execution Agent – アプリケーション実⾏環境 § Router – 要求をルーティング § Cloud Controller – 管理機能、管理APIを提供 § Service – 機能コンポーネントを提供 – サービスノードまたは外部で稼動 § Health Manager – DEAの稼動状況をモニタリング § NATS – 内部メッセージング・バス § Service Broker – サービスを管理 § BOSH – IaaS層を抽象化
12. © 2016 IBM Corporation 12 IBM Bluemix www.bluemix.net Great Characteristic 2. Amazing selection of APIs & Services
13. © 2016 IBM Corporation 13 IBM Bluemix www.bluemix.net IBM製品をはじめとした, 100種類を超える様々なAPI, サービスが提供 実⾏環境(⾔語)を選択 アプリが必要とするサービス（=機能）を選択 IBM提供 コミュニティー提供 11カテゴリーから選択 ・データおよび分析 ・Watson ・モノのインターネット ・API ・ネットワーク ・ストレージ ・セキュリティー ・DevOps ・アプリケーション・サービス ・統合 ・モバイル アプリに合わせて ⾃由に構成   ,
14. © 2016 IBM Corporation 14 IBM Bluemix www.bluemix.net 例）IBM Insights for Twitterサービス • Twitter社とのパートナーシップ締結の際に提供されたサービス • Twitterの公開ツイート全体の中のランダムな約10%のデータ(decahose)を検索の対象として提供 • IBM Social Media Analyticsの技術を利⽤してデータを分析し、情報を付与 • ツイート内容のセンチメント分析 • つぶやいた⼈の属性情報 パートナー様各社のサービスを提供することで、開発者がアイディアを形に できる幅を常に広げ続けている
15. © 2016 IBM Corporation 15 IBM Bluemix www.bluemix.net Bluemix上でのアプリの開発アプローチ： 組み⽴て型（コンポーザブル）のアプローチを採⽤し、最⼩限の機能から開発 必要な機能を独⾃にすべて開発するのではなく、基盤や外部システムが提供するサービスを⾃由に追加・削除 コアとなるアプリの機能開発に注⼒でき, 段階的な機能開発がしやすい点がポイント Internet of Things モバイル アプリ 実⾏環境 データベース コグニティブ コンピューティング 必要に応じて サービスを追加・削除 アナリティクス セキュリティー
16. © 2016 IBM Corporation 16 IBM Bluemix www.bluemix.net Great Characteristic 3. Great DevOps tools
17. © 2016 IBM Corporation 17 IBM Bluemix www.bluemix.net BluemixのDevOpsツールであるIBM continuous delivery solutions を活⽤し、初期投資を抑えた迅速なスタートアップを⽀援 IBM UrbanCode™ Deploy Orchestrate and automate application deployments, middleware configurations and database changes to on-premises or cloud-based development, test and production environments to facilitate rapid feedback and continuous delivery. IBM UrbanCode Build Easily scale the configuration and management of build infrastructures, using this continuous integration and build management solution integrated with development, testing and release tools and optimized for the enterprise. IBM UrbanCode Release Manage the release of complex interdependent applications, infrastructure changes and simultaneous deployments of multiple applications with this collaborative release-planning solution. IBM PureApplication® Simplify and automate application environment deployment for both on-premises and off-premises cloud landscapes. IBM Bluemix® Continuous Delivery Accelerate your DevOps transformation with continuous delivery toolchains on the IBM Bluemix cloud, which support development, deployment and operations tasks.
18. © 2016 IBM Corporation 18 IBM Bluemix www.bluemix.net Great Characteristic 4. Adding or Updating new App/API everyday
19. © 2016 IBM Corporation 19 IBM Bluemix www.bluemix.net Cloud Foundryだけでなく、様々なアプリ実⾏基盤を提供中 1. Cloud Foundry 2. IBM Containers (Docker) 3. Virtual Machines (OpenStack) 4. OpenWhisk ü 制御されたコンテナー ü Bluemixの標準 ü 様々なサービスと容易に連携 ü ⾔語の単位で提供され、利⽤ ü 可搬性のあるコンテナー ü CFと同様にサービスと連携 ü MWの単位で提供され、利⽤ WLP MFPF ・・・ ・・・ ü 仮想マシン ü OSの単位で意識し、利⽤ ü ベータ版 Ubuntu RHEL SLES ü イベント駆動型 ü 事前にアクションとして処理を定義 ü 計算リソースは実⾏時に確保 ü 試験的なサービス Action Node.js Action Swift Action Docker Deprecated → Bluemix Infrastructure
20. © 2016 IBM Corporation 20 IBM Bluemix www.bluemix.net • Blockchainサービス (HyperledgerベースのIBM Blockchain) • 複数のシステムで取引履歴を分散管理する仕組み • ⾮集中管理とデータの改ざんができない点がポイントのテクノロジー サンプル・アプリをまずは確認： https://github.com/IBM-Blockchain/cp-web Blockchainなど、話題のテクノロジーを試せる環境を速やかに提供
21. © 2016 IBM Corporation 21 IBM Bluemix www.bluemix.net Great Characteristic 5. Connect to external resources easily
22. © 2016 IBM Corporation 22 IBM Bluemix www.bluemix.net 分類 サービス サービスの概要 統合 Secure Gateway Bluemix上のアプリから他クラウド, オンプレミス上の外部リソースへ安全に通信 するために、セキュアな通信路を確⽴するためのサービス Websocketベースで、汎⽤的に外部リソースと連携できる点がポイント NW (*1) VPN IBM Containersのコンテナー・ネットワークとオンプレミス/他クラウド間を IPSec VPNで拠点間接続するためのサービス App (*2) Statica Bluemix上のアプリから他クラウド, オンプレミス上の外部リソースに通信するた めのフォワード・プロキシーを提供するためのサービス HTTP/HTTPS通信のためのHTTP, それ以外のSOCKSエンドポイントを提供 API API Connect 既存のアプリやクラウド・サービスからシンプルな⼿順で半⾃動的にAPIを作成・ 公開するためのサービス (*1) ネットワーク, (*2) アプリケーション・サービス 外部リソースと連携し、容易にハイブリッド化するためのサービスが複数提供
23. © 2016 IBM Corporation 23 IBM Bluemix www.bluemix.net Great Characteristic 6. Several style for each customers
24. © 2016 IBM Corporation 24 IBM Bluemix www.bluemix.net パブリック・クラウド(SoftLayer)上 オンプレミス(お客様DC) 共有 専有 オンプレミス IBM Bluemix (Public) ・マルチテナントの経済性を活⽤し、 費⽤を抑えてアプリを開発したい ・思い⽴ったときにすぐに始められる 迅速性を活かしたい ・いろいろなサービスを試してみたい ・規制遵守やコンプライアンス対応の 観点から、SoftLayerの国内のDCで かつ占有環境を確保し、使⽤したい ・物理的に社内環境での運⽤を必要 としている ・オンプレミスの資産を有効活⽤したい IBM Bluemix Dedicated IBM Bluemix Local 3つの提供形態で、お客様の要件に応じた最適な環境を選択可能
25. © 2016 IBM Corporation 25 IBM Bluemix www.bluemix.net Conclusion, Bluemix is…
26. © 2016 IBM Corporation 26 IBM Bluemix www.bluemix.net • アイディアを形にし、アプリ開発に専念できるプラットフォーム： IBM Bluemix • 100を超える⾼品質のサービスを組み合わせて、クイックにアプリを開発できる • 主な特徴 • オープン・スタンダードを採⽤したPaaS • 豊富な「API」と「サービス」の提供 • DevOpsの推進 • 絶えず追加される新機能・サービス • 外部リソースとの容易な連携 • お客様に合わせた提供形態 • Bluemixの基本と利⽤の流れ • ランタイム, サービス, バインド・・・ • 構成例とサービス紹介 • 標準的な構成を紹介 • IoT, ⾃然⾔語処理など、必要な機能に応じてサービスを順次追加
27. © 2016 IBM Corporation 27 IBM Bluemix www.bluemix.net q以下の資料から触ってみるとBluemixの基本が学べます [1] Bluemixハンズオンセミナー資料： 基本操作はこちらから § https://ibm.biz/BMhandsontext [2] IBM Bluemix の基礎： [1]と同じく基本操作/サンプルを説明 § http://www.ibm.com/developerworks/jp/bluemix/fundamentals/ [3] 今からはじめるBluemix Webinarシリーズ： サービスの紹介など動画で公開 § https://www.ibm.com/developerworks/community/wikis/home?lang=ja#!/wiki/Wdec01e50fbfa_493c_8 a88_6dd85c4d983f/page/今からはじめるBluemix Webinarシリーズ [4] IoTをBluemixで使ってみる： IoT関連のブログ記事などの紹介 § https://ibm.biz/bluemix-iot [5] dashDB Learning Center： dashDBの利⽤⽅法を紹介 • https://developer.ibm.com/clouddataservices/docs/dashdb/ Qiita Watson Qiita Bluemix 他にも以下のキーワードで検索すると 様々な情報が⾒つかります
28. © 2016 IBM Corporation 28 IBM Bluemix www.bluemix.net 2. Making Mobile App
29. © 2016 IBM Corporation 29 IBM Bluemix www.bluemix.net ▪作る流れは下記の通り 1. Bluemix登録 2. Weather API作成 3. Xamarinアプリ作成 4. 確認
30. © 2016 IBM Corporation 30 IBM Bluemix www.bluemix.net Chapter 1. Making API on Bluemix
31. © 2016 IBM Corporation 31 IBM Bluemix www.bluemix.net Bluemixへログイン https://console.ng.bluemix.net/
32. © 2016 IBM Corporation 32 IBM Bluemix www.bluemix.net サービスの作成 (or カタログ) ↓ Weatherで検索 ↓ Weather Company Dataを選択
33. © 2016 IBM Corporation 33 IBM Bluemix www.bluemix.net 価格プランを選択し、作成をクリック
34. © 2016 IBM Corporation 34 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます
35. © 2016 IBM Corporation 35 IBM Bluemix www.bluemix.net サービス資格情報のurlを後ほど使います
36. © 2016 IBM Corporation 36 IBM Bluemix www.bluemix.net Chapter 2. Making Mobile App with Xamarin
37. © 2016 IBM Corporation 37 IBM Bluemix www.bluemix.net インストールされているアプリケーションから、 Xamarin Studioを起動します。 ※Windowsの場合はVisual Studioを起動しますが、 本書ではMacでの開発を前提とします。 動作確認に、スマホのエミュレーターを使⽤します。 Macでしたら、Xcodeと共に、iOSのエミュレーター が使えます。 Androidで動作確認したい場合は、別途Androidの エミュレーターをインストールしておいてください。 Xamarin Studioのダウンロードはこちら https://www.xamarin.com/download-it
38. © 2016 IBM Corporation 38 IBM Bluemix www.bluemix.net Xamarinを起動し、 Multiplatform > Xamarin.Forms > Forms App を選択し、「次へ」をクリックします。
39. © 2016 IBM Corporation 39 IBM Bluemix www.bluemix.net App Nameに任意の名前を指定し、 「次へ」をクリックします。 ここでは、WeatherForecastApp、としました。
40. © 2016 IBM Corporation 40 IBM Bluemix www.bluemix.net 今回は特にバージョン管理をしないので、 Gitの利⽤はチェックしません。 UIテストも⾏わないのでチェックしません。 「作成」をクリックすればプロジェクトが作成 されます。
41. © 2016 IBM Corporation 41 IBM Bluemix www.bluemix.net Xamarin.Formsプロジェクト Androidプロジェクト iOSプロジェクト Cross Platform
42. © 2016 IBM Corporation 42 IBM Bluemix www.bluemix.net XAMLは初期でこんな感じ。 このファイルがUIのデザインになります。
43. © 2016 IBM Corporation 43 IBM Bluemix www.bluemix.net コードビハインド（C#）は初期でこんな感じ。 このファイルが処理を制御します。
44. © 2016 IBM Corporation 44 IBM Bluemix www.bluemix.net XAMLをコーディングします！ <?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.micros oft.com/winfx/2009/xaml" xmlns:local="clr- namespace:WeatherForecastApp" x:Class="WeatherForecastApp.WeatherForecastAppPage"> <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" /> <Grid HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="320" RowSpacing=" 20"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Text="Get Weather Infomation" Clicked="getWeatherInfo" /> <Label Grid.Row="1" Text="⽇付： " VerticalOptions="Center" HorizontalOptions="Center" /><Entry x:Name="Text1" Grid.Row="1" Grid.Column="1" Placeholder="" /> <Label Grid.Row="2" Text="最低気温： " VerticalOptions="Center" HorizontalOptions="Center" /><Entry x:Name="Text2" Grid.Row="2" Grid.Column="1" Placeholder="" /> <Label Grid.Row="3" Text="最⾼気温： " VerticalOptions="Center" HorizontalOptions="Center" /><Entry x:Name="Text3" Grid.Row="3" Grid.Column="1" Placeholder="" /> <Label Grid.Row="4" Text="内容： " VerticalOptions="Center" HorizontalOptions="Center" /><Editor x:Name="Text4" Grid.Row="4" Grid.Column="1" HeightRequest="80" /> </Grid> </ContentPage>
45. © 2016 IBM Corporation 45 IBM Bluemix www.bluemix.net C#をコーディングします！ using System.Net.Http; using Xamarin.Forms; using System.Diagnostics; using System; using System.Text; using System.Net.Http.Headers; using Newtonsoft.Json.Linq; namespace WeatherForecastApp { public partial class WeatherForecastAppPage : ContentPage { private static readonly string ApiUrl = "https://<USER>:<PASS>@twcservice.mybluemix.net/api/weather/v1/geocode/ 33.40/-83.42/forecast/daily/3day.json?language=ja-JP"; public WeatherForecastAppPage() { InitializeComponent(); } public async void getWeatherInfo(object sender, System.EventArgs e) { using (var client = new HttpClient()) { var headerVal = Convert.ToBase64String(Encoding.UTF8.GetBytes("f7d41aa6-fff5-4abf-ac00- 44aad41a88a5:GA43SPGTMr")); var header = new AuthenticationHeaderValue("Basic", headerVal); client.DefaultRequestHeaders.Authorization = header; var response = await client.GetAsync(ApiUrl); if (response.IsSuccessStatusCode) { var json = await response.Content.ReadAsStringAsync(); var parsedJson = JObject.Parse(json); var forecasts = parsedJson["forecasts"]; Debug.WriteLine("forecasts: " + forecasts[0].ToString()); this.Text1.Text = forecasts[0]["fcst_valid_local"].ToString(); this.Text2.Text = forecasts[0]["min_temp"].ToString(); this.Text3.Text = forecasts[0]["max_temp"].ToString(); this.Text4.Text = forecasts[0]["narrative"].ToString(); } else { Debug.WriteLine(response.StatusCode); } } } } }
46. © 2016 IBM Corporation 46 IBM Bluemix www.bluemix.net using Newtonsoft.Json.Linq; 上記を使うために、ライブラリを追加します。
47. © 2016 IBM Corporation 47 IBM Bluemix www.bluemix.net Chapter 3. Execute!!!
48. © 2016 IBM Corporation 48 IBM Bluemix www.bluemix.net 実⾏します！ ボタンを押すだけ！！
49. © 2016 IBM Corporation 49 IBM Bluemix www.bluemix.net Get Eather Informationをタップ！
50. © 2016 IBM Corporation 50 IBM Bluemix www.bluemix.net Congrats!
51. © 2016 IBM Corporation 51 IBM Bluemix www.bluemix.net