Skip to content

Commit

Permalink
新增兩份純 HTML 檔案
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Hsu (徐承志) authored and Michael Hsu (徐承志) committed May 13, 2015
1 parent c2a01fc commit 090b526
Show file tree
Hide file tree
Showing 6 changed files with 924 additions and 0 deletions.
199 changes: 199 additions & 0 deletions content/en/development_cycle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<div class="mcs-grid">
<div class="mcs-grid-lg-12">
<h1>
Tutorial
</h1>
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-12">
<h2>
Development cycle
</h2>
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-6">
<h2 style="margin-top:170px" class="mcs-color-blue">
a. Start
</h2>
<p>
<a href="https://api.mediatek.com/mcs/v2/users/me" >
Login
</a>
to MCS or
<a href="https://api.mediatek.com/mcs/v2/users/me" >
Sign up
</a>
for a free account
</p>
</div>
<div class="mcs-grid-lg-6">
<img src="img/img-cycle-01.svg" alt="">
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-6">
<img src="img/img-cycle-02.svg" alt="">
</div>
<div class="mcs-grid-lg-1" style="height:100px"></div>
<div class="mcs-grid-lg-5">
<h2 style="margin-top:145px" class="mcs-color-blue">
b. Create Prototype
</h2>
<p style="text-align: justify;">
Click development on the top menu bar to create prototypes. In a prototype you can define data channels, configure notification user privilege, and firmware.
</p>
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-6">
<img src="img/img-cycle-03.svg" alt="">
</div>
<div class="mcs-grid-lg-1" style="height:100px"></div>
<div class="mcs-grid-lg-5">
<h2 style="margin-top:160px;text-align: justify;" class="mcs-color-blue">
c. Add data channel
</h2>
<p>
Click Add in the prototype to create data channels for the test device.
</p>
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-12">
<img src="img/img-cycle-04.svg" alt="">
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-5">
<h2 class="mcs-color-blue">
d. Create test device
</h2>
<p style="text-align: justify;">
After all data channels are set, click Create test device button to create a test device.
</p>
</div>
<div class="mcs-grid-lg-2" style="height:100px"></div>
<div class="mcs-grid-lg-5">
<h2 class="mcs-color-blue">
e. Connect test device
</h2>
<p>
Connect a real device to the MCS platform.
</p>
</div>
</div>
<div class="mcs-grid">
<div class="mcs-grid-lg-5">
<h2 style="margin-top: 200px;" class="mcs-color-blue">
f. Manage and control the test device
</h2>
<p style="text-align: justify;">
In the My device page. You can manage and view all authorize test devices.
</p>
</div>
<div class="mcs-grid-lg-1" style="height:100px"></div>
<div class="mcs-grid-lg-6">
<img src="img/img-cycle-05.svg" alt="">
</div>
</div>
<div class="mcs-grid-lg-12">
<a href="tutorial/implementing_using_linkit_one" ng-click="scrollToTop()" class="mcs-btn-lg">
Develop with Linkit One
</a>
<a href="tutorial/implementing_using_mt7681_development_board" ng-click="scrollToTop()" class="mcs-btn-lg">
Develop with Linkit Connect 7681
</a>
</div>
<div class="mcs-grid-lg-12">
<h2 class="resource__title">
Create Prototype
</h2>
<p style="text-align: justify;">
The Development page has features that enable you to create one or more Prototypes then define a number of physical devices based on that prototype. Each prototype may contain:
</p>
<ul>
<li style="margin-left: 15px">
Data Channels, each of a particular Data Type.
</li>
<li style="margin-left: 15px">
Notifications for changes in the data received from or sent to a device.
</li>
<li style="margin-left: 15px">
User privileges to enable team members or collaborators to view or edit prototypes and device details.
</li>
<li style="margin-left: 15px">
Firmware versions that can be pushed to devices.
</li>
<li style="margin-left: 15px">
Test device that represent each physical device based on the prototype.
</li>
</ul>
<img src="img/img-prototype.svg" style="margin-top: 15px; margin-bottom: 15px" alt="">
<p>
Once you’ve defined a Prototype, you can add devices as you need throughout your project.
</p>
</div>
<div class="mcs-grid-lg-12">
<h3 class="resource__title">
Add data channel
</h3>
<p>
A Data Channel represents:
</p>
<ul>
<li style="margin-left: 15px">
data generated by a component of a device that will be stored in the sandbox or
</li>
<li style="margin-left: 15px">
a command that can be send from the sandbox to a component of the device.
</li>
</ul>
<p>
These data channels are implemented in the sandbox as the following types:
<p>
</div>
<div class="mcs-grid-lg-4">
<img src="img/img-dc-01.svg" alt="">
<h3>
Display
</h1>
<p style="text-align: justify;">
Display data channel takes data generated from a device and show the data to the users. For example, data from a temperature sensor.
</p>
</div>
<div class="mcs-grid-lg-4">
<img src="img/img-dc-02.svg" alt="">
<h3>
Controller
</h1>
<p style="text-align: justify;">
Controller data channel allows users to send control command to the device. For example, a switch to turn a light on or off.
</p>
</div>
<div class="mcs-grid-lg-4">
<img src="img/img-dc-03.svg" alt="">
<h3>
Hybrid
</h1>
<p style="text-align: justify;">
This data channel enables a Display and Controller data channel to be combined. For example, as a temperature display and controller for an air conditioner.
</p>
</div>
<div class="mcs-grid-lg-12">
<h3 class="resource__title">
Create test device
</h3>
<p style="text-align: justify;">
In the prototype page, you can create a test device by click on the Create test device button. Each device you create is given a Device ID and Device Key, which you use in the MediaTek Cloud Sandbox APIs to identify data pushed to and pulled from the device. Device details, along with their ID and key, are displayed in your test device tab or you can also manage all the test devices in the My Devices page.
</p>
</div>
<div class="mcs-grid-lg-12">
<h3 class="resource__title">
Connect test device
</h3>
<p style="text-align: justify;">
Connect the development board to Wi-Fi first, and then download the MCS mobile app and log in as an authorized user to access the device. Use the smart connection function build in to the mobile app to connect to the device and register the device to be active.
</p>
</div>
109 changes: 109 additions & 0 deletions content/en/tutorial.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<div class="mcs-grid">
<div class="">
<div class="row__container mcs-grid">
<div class="panel-body api-reference">
<p class="panel-body__font" >
Step by guides to use the MCS service and build your IoT prototype.
</p>
<div class="displayCard--component displayCard--border mcs-grid-4">
<div class="componentCard">
<div class="componentCard__display">
<img
src="img/tutorial_quick_start.svg"
class="componentCard__displayIcon" />
</div>
<div class="componentCard__detail">
<h5 class="componentCard__detail--tutorialTitle">
Quick start guide
</h5>
<article
class="componentCard__detail--WithoutMaxHeight componentCard__detail--tutorialArticle" >
<ul>
<li>
<a href="development_cycle">
Development cycle
</a>
</li>
<li>
<a href="tutorial/getting_started" >
Getting started step by step
</a>
</li>
</ul>
</article>
</div>
</div>
</div>
<div class="displayCard--component displayCard--border mcs-grid-4">
<div class="componentCard">
<div class="componentCard__display">
<img
src="img/tutorial_implement.svg"
class="componentCard__displayIcon"
/>
</div>
<div class="componentCard__detail">
<h5 class="componentCard__detail--tutorialTitle">
Implement with device
</h5>
<article
class="componentCard__detail--WithoutMaxHeight componentCard__detail--tutorialArticle" >
<ul>
<li>
<a href="tutorial/connect_device" >
How to connect device
</a>
</li>
<li>
<a href="tutorial/implementing_using_linkit_one" >
Implement with Linkit One
</a>
</li>
<li>
<a href="tutorial/implementing_using_mt7681_development_board" >
Implement with Linkit Connect 7681
</a>
</li>
</ul>
</article>
</div>
</div>
</div>
<div class="displayCard--component displayCard--border mcs-grid-4">
<div class="componentCard">
<div class="componentCard__display">
<img
src="img/tutorial_advanced.svg"
class="componentCard__displayIcon"
/>
</div>
<div class="componentCard__detail">
<h5 class="componentCard__detail--tutorialTitle" >
Advanced setting
</h5>
<article class="componentCard__detail--WithoutMaxHeight componentCard__detail--tutorialArticle" >
<ul>
<li>
<a href="tutorial/setting_notification" >
Using notification
</a>
</li>
<li>
<a href="tutorial/setting_user_privilege" >
Setting user privilege
</a>
</li>
<li>
<a href="tutorial/managing_firmware" >
Managing firmware
</a>
</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Loading

0 comments on commit 090b526

Please sign in to comment.