分組期末報告

[mdecourse]

下載期末報告專用隨身系統 (無需自行升級, 請直接下載升級後的版本)

kmol2_1805 - 7z 檔案 340 MB, 解壓縮後 1.2 GB, 用法與 kmol_level1 相同.

kmol2_1805 可攜系統中 V-rep 3.5 rev4 缺少兩個 dll: vrep350_rev4_vcdlls.zip

建立各組的 heroku 雲端網站

各組組長必須利用 Gmail 帳號, 至 https://www.heroku.com/ 登記一組帳號, 並建立一個雲端應用程式, 應用程式名稱請選 vecp_組長學號, 之後所完成的雲端網站網址將為: https://vecp_組長學號.herokuapp.com

建立 heroku 帳號前, 必須先登入對應的 Gmail 帳號, heroku 帳號建立後, 必須在 Gmail 帳號中驗證後才可繼續使用 heroku 功能.

以 2015fallhw AT Gmail 郵箱建立的雲端範例網站為: http://a2015fallhw.herokuapp.com

步驟一: 建立 heroku 應用程式

確定各組已經利用組長 Gmail 郵箱登記 https://www.heroku.com/ 帳號後, 隨後登入 heroku 的帳號即為組長的 Gmail 郵箱, 密碼則為登記時所自選包含至少一個特殊符號的密碼.

假設第一組組長學號為 40628423, 且 Gmail 為 40628423@gm.nfu.edu.tw, 則預計建立的雲端應用程式名稱為 vecp-40628423, 之後設定完成的雲端網站將為: https://vecp-40628423.herokuapp.com

步驟二: 啟動 kmol2_1805 隨身系統

在命令列中輸入:

heroku login

系統將會回應 (以 40628423@gm.nfu.edu.tw 帳號登入為例) :

Enter your Heroku credentials:
Email: 40628423@gm.nfu.edu.tw
Password: ********************
Logged in as 40628423@gm.nfu.edu.tw

登入後, heroku 會將登入資料存入 y:\home_netrc 檔案中, 之後對遠端 heroku 的對應倉儲進行操作

git clone 之前所建立的 heroku 應用程式倉儲

當組長在 heroku 建立應用程式後, 進入 settings 中下方複製該應用程式對應的 git 網址, 例如: 與 vecp-40628423 應用程式對應的 git 網址為: https://git.heroku.com/vecp-40628423.git

在近端隨身系統的命令列中, 更換目錄到 y:\tmp 目錄中, 以 git clone 指令, 取下遠端 heroku 應用程式的倉儲內容 (一開始為空倉儲):

git clone https://git.heroku.com/vecp-40628423.git 

所取下的倉儲會以 vecp-40628423 目錄存檔, 空倉儲目錄中, 只會有一個 .git 目錄.

接下來, 以命令列, 在 y:\tmp 目錄中執行下列指令, 取下分組期末專案網站樣本:

git clone https://github.com/mdecourse/a2015fallhw

完成後, y:\tmp 目錄中會增加 vecp-40628423 目錄 (也就是各組所建立的 heroku 應用程式名稱), 以及 a2015fallhw 等兩個目錄, 接下來刪除 a2015fallhw 目錄中的 .git 目錄後, 將其餘的檔案複製到 vecp-40628423 目錄中.

將近端 vecp-40628423 目錄中的倉儲提交推送到雲端

接下來要操作 git 指令, 將各組 vecp-40628423 應用程式的近端內容, 提交推送到雲端, 這時需要先設定 git 使用者的對應資料, 必須在命令列中執行下列指令 (可以在 y:\tmp\vecp-40628423 目錄中執行):

git config --global user.email "40628423@gm.nfu.edu.tw"
git config --global user.name "40628423"

完成上述指令後, git 會將身分設定資料存入 y:\home.gitconfig 檔案中.

接下來, 在 y:\tmp\vecp-40628423 目錄中執行:

git add .
git commit -m "initial add"
git push

以上指令執行後, 若一切正常, 遠端的 heroku 雲端系統將會啟動對應的應用程式, 完成後, 使用者就可以利用瀏覽器連線到: https://vecp-40628423.herokuapp.com 檢視所建立的雲端系統, 其內容將與 http://a2015fallhw.herokuapp.com 相同.

由於使用的 heroku 雲端帳號屬於免收費類別, 因此每月只提供約 20 天的連線用量, 若一定時間無連線需求, 雲端主機便會自動關機, 等待有連結要求時, 再同步開機, 而且若使用者透過瀏覽器更改網站內容, 每隔幾十分鐘網站內容將會自動回復為原始倉儲中的版本.

[mdecourse]

建立雲端網站步驟

1. 下載 kmol2_1805 隨身系統, 點擊 start.bat 啟動系統

2. 利用電子郵箱 eimada@gmail.com 申請 Github 與 Heroku 帳號

3. 在 Heroku 建立 eimada 應用程式, 預計建立 eimada.herokuapp.com 網站

4. 在近端以 heroku login 登入遠端帳號, 登入資料將存入 y:\home\_netrc 檔案

    heroku login

5. 利用 git clone 從 heroku settings 中取 heroku 應用程式倉儲 

    git clone https://git.heroku.com/eimada.git

6. 利用 git config --global user.email 與 user.name 設定使用者資料, 資料將會存入 y:\home\.gitconfig

    git config --global user.email "eimada@gmail.com"

    git config --global user.name "eimada"

7. 從 https://github.com/mdecourse/a2015fallhw 以 git clone 取下 a2015fallhw 倉儲

    git clone https://github.com/mdecourse/a2015fallhw

8. 從 a2015fallhw 目錄複製 .git 以外的資料到 eimada 目錄

9. 利用 git add, commit 與 push 將近端的 eimada 倉儲資料提交推送到雲端

    git add .

    git commit -m "initial add"

    git push

10. 雲端應用程式完成開機啟動後, 可以從瀏覽器連結到雲端網際內容管理

    https://eimada.herokuapp.com

預計以 eimdalab At Gmail 實際操作錄影

如何建立雲端網際內容管理網站

[eimada]

git remote add 的運用

https://eimada.herokuapp.com 雲端網站的倉儲資料已經同步到 https://github.com/eimada/eimada_herokuapp

操作指令為:

確定在上述的 eimada 雲端倉儲目錄中, 以

git remote add github https://github.com/eimada/eimada_herokuapp

表示利用 git 指令, 以 remote add 遠端選項, 設定遠端倉儲的近端代號為 github, 然後新增該倉儲代號對應的倉儲 URL 為 https://github.com/eimada/eimada_herokuapp

如此設定之後, 就可以在每次改版 heroku eimada 應用程式倉儲之後, 以 git push github, 將新版本資料同步推送到 Github 倉儲中.

也就是說:

https://eimada.herokuapp.com 雲端網站的內容來自 https://git.heroku.com/eimada.git, 但是 git clone https://git.heroku.com/eimada.git 只限於 heroku login 的使用者, 並非任何人都能 git clone heroku 倉儲中的資料.

而透過 git remote add 設定之後, 近端的 https://git.heroku.com/eimada.git 倉儲, 可以同步推送到 https://github.com/eimada/eimada_herokuapp 倉儲.

[mdecourse]

W11 notes

vecp-eimdalab.herokuapp.com

https://git.heroku.com/vecp-eimdalab.git

set HTTP_PROXY=http://140.130.17.53:3128

git config --global http.proxy http://140.130.17.53:3128

git config --global user.email "eimdalab@gmail.com"

git config --global user.name "eimdalab"

git add .
git commit -m "initial add"
git push

python app_run.py

http://localhost:5000

admin

http://vecp-eimdalab.herokuapp.com

[mdecourse]

各組組員的雲端程式執行區

在各組所完成的雲端網站中的 https://eimada.herokuapp.com/lua 頁面, 牽涉三個檔案, 包括倉儲中的 lua.html, static/ex1.lua 與 app_run.py 檔案中的:

@app.route('/lua')
def lua():
    output = ""
    with open("lua.html", "r", encoding="utf-8") as fh:
        lines = fh.readlines()
        for i in range(len(lines)):
            output+=lines[i]
    return output

意即, 只要在 app_run.py 中新增一組函式 (可以從上述程式碼複製):

@app.route('/lua2')
def lua2():
    output = ""
    with open("lua2.html", "r", encoding="utf-8") as fh:
        lines = fh.readlines()
        for i in range(len(lines)):
            output+=lines[i]
    return output

且複製 lua.html 一份存為 lua2.html, 並且複製一份 static/ex1.lua 為 static/ex2.lua, 接著修改 lua2.html 中的

<!-- 導入外部的 ext1.lua 程式內容 -->
<script type="application/lua">
package.path = "/static/ext1.lua"
require("ext1")
js = require "js"

改為

<!-- 導入外部的 ext2.lua 程式內容 -->
<script type="application/lua">
package.path = "/static/ext2.lua"
require("ext2")
js = require "js"

就可以在同一個分組雲端網站中, 以 https://eimada.herokuapp.com/lua2 執行第二位組員的線上程式頁面.

[mdecourse]

雲端網際 Lua 程式呼叫

第一種寫法

在 app_run.py 中, 透過 /lua 導入 lua.html, 然後再由 lua.html, /static/editor.lua 與 ex1.lua, 將所有要載入網際編輯器的函式全部寫入 ex1.lua, 由 http://wcms-scrum3.herokuapp.com/lua?filename=hello 判定所要載入的函式名稱.

http://wcms-scrum3.herokuapp.com/lua

第二種寫法

同樣在 app_run.py 中加入 /lua2 的呼叫對應, 可以將程式導到 lua2.html 頁面, 然後在 lua2.html 中, 由 http://wcms-scrum3.herokuapp.com/lua2?filename=hello 判定所要載入的函式名稱. 而這些 filename.lua 則分別以檔案格式存在 /static/ext 目錄中, 例如: http://wcms-scrum3.herokuapp.com/lua2?filename=hello 會將 /static/ext/hello.lua 載入編輯器中, 若無 filename 宣告, 則導入內定的 fun1.lua

相關說明可以參考: http://wcms-scrum3.herokuapp.com/get_page/Lua2

[mdecourse]

雲端 Lua 繪圖

畫一條直線

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 找出畫布中心點位置
cx = canvas.height/2
cy = canvas.width/2

-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,200)"

-- 準備畫一條直線
ctx:beginPath()
ctx:moveTo(cx,cy)
ctx:lineTo(cx + 100, cy + 100)
ctx:closePath()
ctx:stroke()

畫四條直線

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 找出畫布中心點位置
cx = canvas.height/2
cy = canvas.width/2

-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,200)"

-- 準備畫四條直線
ctx:beginPath()
ctx:moveTo(cx,cy)
ctx:lineTo(cx + 100, cy)
ctx:lineTo(cx + 100, cy + 100)
ctx:lineTo(cx, cy + 100)
ctx:lineTo(cx, cy)
ctx:closePath()
ctx:stroke()

在所畫的四條直線區域填色

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 找出畫布中心點位置
cx = canvas.height/2
cy = canvas.width/2

-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,200)"
-- 設定填圖顏色
ctx.fillStyle = "rgb(200,0,0)"

-- 準備畫四條直線
ctx:beginPath()
ctx:moveTo(cx,cy)
ctx:lineTo(cx + 100, cy)
ctx:lineTo(cx + 100, cy + 100)
ctx:lineTo(cx, cy + 100)
ctx:lineTo(cx, cy)
ctx:closePath()
ctx:fill()