{{site.data.resources[page.lang].github-edit-text}}
8 |
9 | Redirecting you to WindowsOnDevices.com... Click here if you are not automatically redirected.
24 | -------------------------------------------------------------------------------- /_includes/script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 |Redirecting you to WindowsOnDevices.com... Click here if you are not automatically redirected.
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /_site/js/app.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | $('img:not(.nr)').addClass('img-responsive'); 4 | 5 | var filename = window.location.pathname.split('/').pop(); 6 | $("a[href*='" + filename + "'] h3").toggleClass('active'); 7 | 8 | var platformToggle = $("[name=platform]"); 9 | 10 | if (platformToggle.length > 0) { 11 | var prevPlatform = platformToggle[0].checked ? platformToggle[0].value : platformToggle[1].value; 12 | 13 | if (window.location.hash) { 14 | var hash = window.location.hash.substring(1); 15 | 16 | if (hash != prevPlatform) { 17 | if (hash == platformToggle[0].value) { 18 | platformToggle[0].checked = true; 19 | platformToggle[1].checked = false; 20 | prevPlatform = hash; 21 | } 22 | 23 | if (hash == platformToggle[1].value) { 24 | platformToggle[1].checked = true; 25 | platformToggle[0].checked = false; 26 | prevPlatform = hash; 27 | } 28 | } 29 | } 30 | 31 | $("#reqs-" + prevPlatform).show(); 32 | $("#steps-" + prevPlatform).show(); 33 | 34 | platformToggle.click(function () { 35 | var curPlatform = $(this).val(); 36 | 37 | if (curPlatform != prevPlatform) { 38 | $(".reqs").hide(); 39 | $(".steps").hide(); 40 | $("#reqs-" + curPlatform).show(); 41 | $("#steps-" + curPlatform).show(); 42 | prevPlatform = curPlatform; 43 | window.location = "#" + curPlatform; 44 | } 45 | }); 46 | } 47 | }); 48 | -------------------------------------------------------------------------------- /_site/web.config: -------------------------------------------------------------------------------- 1 | 2 |Whether you're using Mac or Windows, you can create your very own Hosted Web App in a matter of minutes. Choose your development platform, then follow the below instructions.
41 |ManifoldJS is a Node.js app that easily installs from NPM. It takes the meta-data about your web site and generates native hosted apps across Android, iOS, and Windows. If your site does not have a web app manifest, one will be automatically generated for you.
88 |Open a command prompt and NPM install ManifoldJS.
92 |npm install -g manifoldjs
Run the manifoldjs command on your web site URL.
manifoldjs http://codepen.io/seksenov/pen/wBbVyb/?editors=101
App Studio is a free, online app creation tool that allows you to quickly build Windows 10 apps.
114 |Choose an existing website that will work great as a single-page app. We highly recommend that you are the owner or developer of the site; this way you will be able to make all the necessary changes. If you do not have a URL in mind, we will be walking you through using this Codepen example as the website. Copy your URL, or the Codepen URL, to use throughout the tutorial.
136 |
143 |
144 | Launch Visual Studio 2015.
155 |
167 |
168 | Since this is a hosted web app, where the content is served from a remote server, you will not need most of the local app files that come with the JavaScript template by default. Delete any local HTML, JavaScript, or CSS resources. All that should remain is the package.appxmanifest file, where you configure the app, and the image resources.
186 |
187 | package.appxmanifest file.default.html with your website URL.
209 |
210 | Application Content URI Rules (ACURs) specify which remote URLs are allowed access to your app and to the Universal Windows APIs. At the very minimum, you will need to add an ACUR for your start page and any web resources utilized by that page. For more information on ACURs, click here.
221 |package.appxmanifest file.Add any necessary URIs for your start page.
226 |For example:
227 |1. http://codepen.io/seksenov/pen/wBbVyb/?editors=101
2. http://*.codepen.io/
239 |
240 | At this point, you have a fully functioning Windows 10 app capable of accessing the Universal Windows APIs!
251 |If you are following along with our Codepen example, click the Toast Notification button to call a Windows API from hosted script.
252 |
259 |
260 | Copy and paste the JavaScript code below to enable camera capture. If you are following along with your own website, create a button to invoke the cameraCapture() method. If you are following along with our Codepen example, a button is already present in HTML. Click the button and a take a picture.
282 |
283 | The following tutorial will teach you how to quickly create a hosted web app and deploy it to a Raspberry Pi 2 using Visual Studio (VS). This is now possible thanks to the Windows Internet of Things (IoT) core and project Westminister. By the end of this tutorial, you will have succesfully converted your website into a Universal Windows Platform (UWP) application that can run on the Raspberry Pi and even communicate with sensors!
17 | 18 |
25 |
26 | Choose an existing website that will work great as a single-page app. We highly recommend that you are the owner or developer of the site; this way you will be able to make all the necessary changes.
37 |If you do not have a URL in mind, we will be walking you through using this Codepen example as the website. The codepen allows you to control the Pi's on-board LED.
38 |Copy your URL, or the Codepen URL, to use throughout the tutorial.
39 |
46 |
47 | Launch Visual Studio 2015.
58 |
70 |
71 | Since this is a hosted web app, where the content is served from a remote server, you will not need most of the local app files that come with the JavaScript template by default.
82 |Delete any local HTML, JavaScript, or CSS resources. All that should remain is the package.appxmanifest file, where you configure the app, and the image resources.
90 |
91 | package.appxmanifest file.default.html with your website URL.
113 |
114 | Application Content URI Rules (ACURs) specify which remote URLs are allowed access to your app and to the Universal Windows APIs. At the very minimum, you will need to add an ACUR for your start page and any web resources utilized by that page. For more information on ACURs, click here.
125 |package.appxmanifest file.Add any necessary URIs for your start page.
130 |For example:
131 |1. http://codepen.io/
2. http://*.codepen.io/
143 |
144 | At this point, you have a fully functioning Windows 10 app capable of accessing the Universal Windows APIs!
155 |
162 |
163 | 
186 |
187 | Windows 10 IoT Core will boot automatically after connecting the power supply. This process will take a few minutes. After seeing the Windows logo, your screen may go black for about a minute - don't worry, this is normal for boot up.
198 |Once the device has booted, the DefaultApp will launch. Click on device information on the top left. This will display the IP address of your RPi2. Take note of the IP address you will need it later.
199 |
206 |
207 | At this point, Visual Studio will present the Remote Connections dialog. If you previously used Powershell to set a unique name for your device, you can enter it here (in this example, we're using my-device). Otherwise, use the IP address of your Windows IoT Core device. After entering the device name/IP select Universal (Unencrypted Protocol) Authentication Mode, then click Select.
218 |You can verify or modify these values by navigating to the project properties (select Properties in the Solution Explorer) and choosing the Debug tab on the left.
219 |
226 |
227 | 
97 |
98 | Call Windows Runtime APIs with whatever environment or technique is most familiar to you by keeping your resources on a server feature detecting for Windows capabilities prior to calling them. If platform capabilities are not available, and the web app is running in another host, you can provide the user with a standard default experience that works in the browser.
99 |
100 | ## Integrate Cortana voice commands
101 |
102 | You can take advantage of Cortana integration by specifying a Voice Command Definition (VCD) file in your html page. The VCD file is an xml file that maps commands to specific phrases. For example, a user could tap the Start button and say "Contoso Books, show best sellers" to both launch the Contoso Books app and to navigate to a "best sellers" page.
103 |
104 | When you add a `` element tag that lists the location of your VCD file, Windows automatically downloads and registers the Voice Command Definition file.
105 |
106 | Here is an example of the use of the tag in an html page in a hosted web app:
107 |
108 | {% highlight html %}
109 |
110 | {% endhighlight %}
111 |
112 | For more info on Cortana integration and VCDs, see [**Cortana interactions**](https://msdn.microsoft.com/en-us/library/windows/apps/dn974231.aspx) and [**Voice Command Defintion (VCD) elements and attributes v1.2**](https://msdn.microsoft.com/en-us/library/windows/apps/dn954977.aspx).
113 |
114 |
115 | ## Create Hybrid apps -- Packaged web apps vs. Hosted web apps
116 |
117 | You have options for creating your UWP app. The app might be designed to be downloaded from the Windows Store and fully hosted on the local client; often referred to as a **Packaged Web App**. This lets you run your app offline on any compatible platform. Or the app might be a fully hosted web app that runs on a remote web server; typically known as a **Hosted Web App**. But there is also a third option: the app can be hosted partially on the local client and partially on a remote web server. We call this third option a **Hybrid app** and it typically uses the **WebView** component to make remote content look like local content. Hybrid apps can include your HTML5, CSS, and Javascript code running as a package inside the local app client and retain the ability to interact with remote content.
118 |
119 |
120 | ## Web authentication broker
121 |
122 | You can use the web authentication broker to handle the login flow for your users if you have an online identity provider that uses internet authentication and authorization protocols like OpenID or OAuth. You specify the start and end URIs in a `` tag on an html page in your app. Windows detects these URIs and passes them to the web authentication broker to complete the login flow. The start URI consists of the address where you send the authentication request to your online provider appended with other required information, such as an app ID, a redirect URI where the user is sent after completing authentication, and the expected response type. You can find out from your provider what parameters are required.
123 | Here is an example use of the `` tag:
124 |
125 | {% highlight html %}
126 |
127 | {% endhighlight %}
128 |
129 | For more guidance, see [**Web authentication broker considerations for online providers**](https://msdn.microsoft.com/en-us/library/windows/apps/dn448956.aspx).
130 |
131 | ## App capability declarations
132 |
133 | If your app needs programmatic access to user resources like pictures or music, or to devices like a camera or a microphone, you must declare the appropriate capability. There are three app capability declaration categories:
134 | - [**General-use** capabilities that apply to most common app scenarios.](https://msdn.microsoft.com/en-us/library/windows/apps/Mt270968.aspx#General-use_capabilities)
135 | - [**Device** capabilities that allow your app to access peripheral and internal devices.](https://msdn.microsoft.com/en-us/library/windows/apps/Mt270968.aspx#Device_capabilities)
136 | - [**Special-use** capabilities that require a special company account for submission to the Store to use them.](https://msdn.microsoft.com/en-us/library/windows/apps/Mt270968.aspx#Special_and_restricted_capabilities) *For more info about company accounts, see [Account types, locations, and fees](https://msdn.microsoft.com/en-us/library/windows/apps/jj863494.aspx).*
137 |
138 | **Note:** It is important to know that when customers get your app from the Windows Store, they are notified of all the capabilities that the app declares. So do not use capabilities that your app does not need.
139 |
140 | You request access by declaring capabilities in your app's [package manifest](https://msdn.microsoft.com/en-us/library/windows/apps/br211474.aspx). You can declare general capabilities by using the [Manifest Designer](https://msdn.microsoft.com/library/windows/apps/xaml/hh454036(v=vs.140).aspx#Configure) in [Microsoft Visual Studio](https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx), or you can add them manually—see [How to specify capabilities in a package manifest](https://msdn.microsoft.com/en-us/library/windows/apps/br211477.aspx).
141 |
142 | Some capabilities provide apps access to a sensitive resource. These resources are considered sensitive because they can access the user's personal data or cost the user money. Privacy settings, managed by the Settings app, let the user dynamically control access to sensitive resources. Thus, it's important that your app doesn't assume a sensitive resource is always available. For more info about accessing sensitive resources, see [Guidelines for privacy-aware apps](https://msdn.microsoft.com/en-us/library/windows/apps/hh768223.aspx).
143 |
144 |
145 | ## manifoldjs and the app manifest
146 |
147 | An easy way to turn your website into a UWP app is to use an **app manifest** and **manifoldjs**. The app manifest is an xml file that contains metadata about the app. It specifies such things as the app's name, links to resources, display mode, URLs, and other data that describes how the app should be deployed and run. **manifoldjs** makes this process very easy, even on systems that do not support web apps. Please go to [manifoldjs.com](http://go.microsoft.com/fwlink/p/?LinkId=615590) for more information on how it works. You can also view a manifoldjs demonstration as part of this [Windows 10 Web Apps presentation](http://channel9.msdn.com/Events/WebPlatformSummit/2015/Hosted-web-apps-and-web-platform-innovations?wt.mc_id=relatedsession).
148 |
149 | 
25 | Build great Windows apps with your existing website code.
29 |For existing web applications, Windows 10 makes it easy for you to create a Universal Windows Platform (UWP) app that packages your website for publishing to the Store.
44 |.appx package from your existing .zip or .crx files.The Contoso Travel App demonstrates a few simple ways to call the Windows Runtime APIs. The source code is available here.
138 |Experiment with Windows APIs using this simple demo page. The source code is available here.
148 |In this tutorial, we are going to create and deploy the sample applciation, MeteorJS Todos, as a Universal Windows App that can run on the Raspberry Pi 2 as well as any other Windows Device.
18 |To download the app, open your terminal and type:
53 | meteor create --example todos
This will create a new folder called todos with all of the files that a Meteor app needs.
55 |To run the newly create app, open your terminal and type:
58 |
59 |
60 | cd todos
61 |
62 |
64 |
65 | meteor
66 |
67 |
Open Edge and go to http://localhost:3000 to see the app running. It should look like the picture to the left.
69 |
79 |
80 | Now that we have tested the app locally, let's deploy it to the web so we can use that URL to make a hosted web app.
91 |Go to your directoy and type:
92 |
93 |
94 | meteor deploy my_app_name.meteor.com
95 |
96 |
Once it's done, you can navigate to http://my_app_name.meteor.com to play with your app.
98 |
105 |
106 | Follow this tutorial to deploy your newly MeteorJS app as a Windows Universal Platform app.
119 |