聯成電腦-讓你價值連城

Photo credit：Pexels

文、意如老師

參考目錄：

第1篇、TypeScript初探篇

第2篇、JavaScript的型別在TypeScript中應用（一）－認識原始資料型別

第3篇、JavaScript的型別在TypeScript中應用（二）－認識物件型別

第4篇、TypeScript物件導向－類別（Class）的使用方式

第5篇、TypeScript物件導向－介面（Interface）的使用方式

JavaScript的型別有兩種，分成原始資料型別（Primitive data types）與物件型別（Object types），原始資料型別介紹請參閱上一篇，本篇即將介紹物件型別與其它常見的型別。

任務一：認識物件型別（Object types）

1-1：認識物件

物件是由鍵（key）與值（value）組成。值可以是字串、數值、函數、陣列、物件等。

文、kk

哈囉！我是kk，一個『從事數位行銷十多年，也熱愛幫你透過網路，創造財富』的分享家。

網域類似於網站的門牌號碼，可以對應網站的IP位置，但IP位置是一連串的數字，不方便記憶，為了使用，因此產生網域。使用WordPress，會建議兩種申請網域的方式，一種是透過專業的網域代管商採購，例如：GoDaddy或PChome等。一種是透過虛擬伺服器提供商採購，以Bluehost為例，透過其申請第一年免費，但須注意第二年恢復收費時的費用。

Bluehost和WordPress整合度佳，也是WordPress官方推薦的虛擬伺服器廠商之一。總共有4月費種方案（以一次簽約36個月舉例）：

選擇BASIC方案，可以創造一個新的網域（透過Bluehost申請），或使用既有網域（透過其他網域代管商申請）

接著輸入Account Information（帳戶資訊）、確認Package Information（方案資訊）、Package Extras（額外加購）、Payment Information（付款資訊），點選submit（送出），確認相關內容，即完成Bluehost方案採購。

Photo credit：Pexels

文、KK

哈囉！我是kk，一個『從事數位行銷十多年，也熱愛幫你透過網路，創造財富』的分享家。

一般使用WordPress架設網站，又想打造網購平台，會建議使用整合度較高的

WooCommerce。進入WordPress後台，點選「外掛」>「安裝外掛」，搜尋「WooCommerce」下載並啟用。

點選「WooCommerce」>「設定」>「運送方式」>「新增運送區域」。「區域名稱」填寫台灣、「區域中的地區」填寫台灣，「運送方式」點選「新增運送方式」，物流方式預設有單一費率、免費運送、自行取貨，點選「新增運送方式」確認。

在「運送方式」內點選運送的方式，可調整標題名稱、設定相關條件。以「免費運送」為例，可修改名稱為，每筆訂單滿百免運費；設定相關條件，可選擇「不提供」(無門檻條件皆免運)，以及設定每筆訂單的最小金額與使用折扣碼的組合搭配，點選「儲存設定」完成設定。欄位可使用托放方式排序，建議將「免費運送」排序第一，滿足免運條件優先開放買家使用。

以「單一運費」為例，這是收取固定的運費，可設定多筆，依照各宅配包裹尺寸、區域(本島互寄、本島寄往離島、離島寄往本島)、常溫/低溫等費用計價。另以「自行取貨」為例，開放此選項，需填寫正確之商店地址，點選「WooCommerce」>「一般」完成設定。

如何設定不同商品，收取不同運費？

有些特定商品，例如：大型商品、易碎商品，因運送方式不同於一般商品，因此須設定不同運費，點選「WooCommerce」>「設定」>「運送方式」>「運送類別」>「新增運送類別」。

點選「WooCommerce」>「設定」>「運送方式」>選取之前設定好之區域>在運送方式下的「單一費率」(或有另外修正之名稱)>設定該運送費別費用。原來單一費用內的稅金狀態改「無」，費用留空白，並在運送類別費用內設定相關費用，計算方式選取「每一訂單：收取最貴的運送類別費用」，點選「儲存設定」完成相關設定。

然後到WooCommerce「商品」>「所有商品」選擇一個特定商品，調整「運送方式」>「運送類別」完成設定。

Photo credit：Pexels

文、意如老師

科普一下Nginx是一個輕量級的Http網頁反向代理伺服器，優點是支持多國語言、暫存少、併發強，同時間連線次數可以比較於Apache -httpd伺服器 來的更多，例Apache的連結數預設最大為250個連線，但一旦超過200以上，網頁開啟速度就會變的超級慢，反之如利用工具Docker-Nginx 則可承受大約1024個連線。

另外Nginx它有一個最大的特點是在處理靜態（多文字Html、圖片等）的性能，足足能比Apache高3倍以上，所以如果專案偏向多靜態處理，建議一定要試試看Nginx伺服器。

Nginx相較於其它的網頁伺服器也更方便於工程師開發與部署，我們直接馬上來實作將伺服器架到windows上。

任務一：下載、安裝與啟動、關閉

任務1-1.下載 nginx

下載網址：https://nginx.org/en/download.html

找到windows版本的檔案下載回來

下載後是一個壓縮檔，解壓後檔案如下圖

任務1-2.啟動 nginx

下載成功後就可以準備啟動nginx伺服器了

首先開啟cmd.exe（命令提示字元）

1. cd進入 nginx-1.19.6資料夾

輸入指令：cd nginx-1.19.6

2. 更新檔名

#ren 舊檔案 新檔名

輸入指令：ren nginx-1.19.6 nginx

3. cd進入 nginx資料夾

輸入指令：cd nginx

4. 啟動nginx

輸入指令：start nginx

此時會跳出Windows安全性警訊 → 按下允許存取即可

任務1-3.查詢啟動是否成功

最後查詢啟動是否成功。

輸入指令：tasklist /fi "imagename eq nginx.exe

也可以在瀏覽器輸入127.0.0.1 如果出現以下畫面代表安裝成功

任務1-4.關閉 nginx

輸入指令：強制停止 nginx -s stop 或 正常程序的停止 nginx -s quit

任務二：使用winsw部署將程式改成開機時自動啟動服務

任務2-1.先安裝 .NET Framework 3.5 以上功能

首先需要安裝 .NET Framework 3.5 以上功能，不然裝到一半會跑出以下畫面，還是得安裝。

任務2-2.下載winsw

下載路徑：http://repo.jenkins-ci.org/releases/com/sun/winsw/winsw/2.9.0/

目前安裝的版本為winsw-2.9.0.exe

任務2-3. 基本設定（複製winsw.exe 及 建立 winsw.xml 檔）

步驟一：將下載後的文件（如 winsw-2.9.0-bin.exe ）拷貝至nginx資料夾下，將重新命名為nginx-winsw.exe

步驟二：在nginx資料夾下創建 nginx-winsw.xml 文件，並輸入以下內容後存檔

nginx-winsw.xml

<?xml version="1.0" encoding="UTF-8" ?>

<service>

 <id>Nginx</id>

 <name>Nginx</name>

 <description>本服務用於加載Nginx服務，請確保開機啟動。</description>

 <logpath>C:\Users\yiru\Downloads\nginx-1.19.6\nginx\logs</logpath>

 <executable>nginx.exe</executable>

 <stopexecutable>nginx.exe</stopexecutable>

 <stopargument>-s</stopargument>

 <stopargument>stop</stopargument>

 <logmode>rotate</logmode>

</service>

建好這兩個檔案之後，目錄檔案如下：

任務2-4.安裝及卸載指令

開啟cmd （命令提示字元）→ 接著cd 到 nginx 目錄

輸入安裝指令：nginx-winsw.exe install

輸入卸載 指令：nginx-winsw.exe uninstall

任務2-5.部署將程式改成開機時自動啟動服務

方法一：首先開啟應用程式 → 服務

開啟服務視窗後，這邊已經多了 Nginx 服務了

按下右鍵 → 直接啟動

當成功啟動時，會自動跳出瀏覽器，並打開127.0.0.1的歡迎畫面。

如果沒有自動跳出，請自己開啟瀏覽器並在網址中輸入127.0.0.1。

方法二：也可以使用指令啟動

首先開啟cmd → 右鍵以系統管理員身分執行

常用指令如下：

啟動服務：net start nginx

查看狀態指令：tasklist /fi "imagename eq nginx.exe"

停止服務：net stop nginx

啟動後，重新開機，這邊會自動執行 nginx，不需要再做其它設定，瀏覽器網址列上直接打 127.0.0.1 ，如果有看到歡迎畫面代表我們已經成功將nginx成功架在windows上了。

Photo credit：Pexels

文、意如老師

續上一篇 工程師一定要了解Vue.js 資料綁定篇

認識資料綁定後接續著我們來認識屬性綁定及事件處理，最後我們要實作一個計數器。

任務一：屬性綁定-v-bind使用方式

上一篇我們有介紹到可以利用 {{ }} 將資料輸出至網頁模版上，那如果屬性也想要{{}}是不是也能這樣？

例如我們預想的寫法

const vm = Vue.createApp({

  data () {

    return {

      memberId: 'abc123'

    }

  }

}).mount('#app');

<div id="app">

  <p id="{{ memberId }}">...</p>

</div>

但可惜無法直接這麼使用，必須使用屬性綁定v-bind的方式，

▶ 傳統寫法

<p id="member"></p>

▶ 綁定綁定v-bind寫法

const vm = Vue.createApp({

  data () {

    return {

      memberId: 'abc123'

    }

  }

}).mount('#app');

<div id="app">

  <p v-bind: memberId>

</div>

完整範例：

index.html

<!--以超連結為例-三種寫法都行的通--> 

<div id="myapp">

    超連結<br>

        Note：第一種寫法（傳統寫法）

    <a href="http://www.google.com/" title="連到YiruAtStudio">link0</a><br>

    Note：第二種寫法（綁v-bind）

    <a v-bind:href="url" v-bind:title="hint">link1</a><br>

    Note：第三種寫法

    <a :href="url" :title="hint">link2</a>

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    url: 'https://dotblogs.com.tw/YiruAtStudio',

    hint: '連到YiruAtStudio'

  }

})

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/y5d4o0jp/7/

任務二：綁定css-style屬性

2-1. 綁定多個css-Style屬性-使用大括弧{}包起來

▶ 傳統寫法：

<h2 style=”color:blue;font-size:50px;”>文字</h2>

▶ 屬性綁定寫法：

<h2 :style="{color:mycolor,fontSize:myfsize}">文字</h2>

完整範例：

index.html

<div id="myapp">

<h2 :style="{color:mycolor,fontSize:myfsize}">文字</h2>

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    mycolor: 'blue',

    myfsize: '50px'

  }

})

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/d3ye75ma/1/

2-2.綁定：style物件，使用object 寫法（集合）

▶ 傳統寫法：

<h3 style=”color:blue;font-size:50px;”>文字</h3>

▶ 使用object 綁定寫法：

<h3 :style="mystyleObj">HI,文字</h3>

完整範例：

index.html

<div id="myapp">

  <h3 :style="mystyleObj">HI,文字</h3>

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    mystyleObj: {

      color: 'blue',

      FontSize: '50px'

    }

  }

})

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/h16a5omp/3/

2-3.綁定:style array 寫法

▶ 傳統寫法：

<h3 style=”color:blue;font-size:50px;”>文字</h3>

▶ 綁定:style array 寫法

<h3 :style="[mycolor,myfontSize]">HI,文字</h3>

完整範例：

index.html

<div id="myapp">

 <h3 :style="[mycolor,myfontSize]">HI,文字</h3>

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    mycolor: {'color': 'blue'},

    myfontSize: {'fontSize': '50px'}

  }

})

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/c6yLfesq/3/

任務三：事件處理

如果需要功能事件處理function()的時候，可以寫在methods裡

▶ 傳統寫法：

<button onclick="fn()">文字</button>

▶ 綁定事件寫法1：

<button v-on:click="fn()">呼叫fn</button><br>

▶ 綁定事件寫法2：

<button @click="fn()">呼叫fn</button><br>

範例題目：

原文字為 “hihi”，

function方法功能為 :

如文字是 “hihi” 文字將改成 “hello” ,  如果是 “hello” 文字將改成 “hihi”

完整範例

index.html

<div id="app">

  <!--兩個按鈕效果都一樣-->

  <button v-on:click="fn()">呼叫fn</button><br>

  <!--@為縮寫方式-->

  <button @click="fn()">呼叫fn</button><br>

  {{msg}}

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    msg: 'hihi'

  },

methods: {

    fn: function () {

      if (this.msg === 'hihi') {

        this.msg = 'hello'

      } else {

        this.msg = 'hihi'

      }

    }

  }

})

console.log(myapp.mycolor)

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/djbemyo9/21/

任務四：實作計數器

完整範例：

index.html

<div id="myapp">

 <button v-on:click="fn()">+1</button><br>

 <button @click="fn2()">-1</button><br>

 計數:{{num}}

</div>

main.js

var myapp = new Vue({

  el: '#myapp',

  data: {

    num: 0

  },

  methods: {

    fn: function () {

      this.num += 1

    },

    fn2: function () {

      this.num -= 1

    }

  }

})

console.log(myapp.num)

參考以下網址查看完整程式碼以及試試效果：

https://jsfiddle.net/YiruAtStudio/08rubh6w/

Photo credit：Pexels

文、意如老師

前幾天接到任務，公司想要將自己的資訊放到維基百科，並且想要架在自己的伺服器上，說實在之前我也沒做過，但既然身為工程師就要有挑戰的精神，話不多說，開始實作吧！（實作時間約30分鐘）

任務一：下載mediawiki套件

首先到官方網站把mediawiki整包套件先載下來並安裝到自己的電腦上，

載點如下: https://www.mediawiki.org/wiki/Download/zh

目前抓的檔案是 .tar.gz壓縮的檔案，下載回來自己的硬碟後，解壓縮（記得自己安裝在哪個目錄）

完整目錄如下：

任務二：安裝Xampp伺服器與資料庫

安裝XAMPP包，它是一個Apache網頁伺服器與PHP及MariaDB集合在一起的安裝包，允許使用者可以在自己的電腦上輕易的建立網頁伺服器及MySQL資料庫。

下載路徑：https://www.apachefriends.org/zh_tw/download.html

下載回來後，安裝到自己的硬碟上

按下Next下一步，挑選要安裝的環境，如不需要使用時，取消打V

接著選擇要儲存路徑，建議預設即可（C:\xampp）

安裝成功後開啟Xampp控制台，左下角選單列，選擇Xampp Control Panel

啟動apache、mysql：點選Actions中的Start按鈕開啟

開啟瀏覽器 >> 在網址列上打入 localhost，會出現以下畫面，代表啟動成功

開啟MySql 圖形化介面（phpmyadmin）

在MySql右邊按鈕 >> 點選Admin

點選Admin按鈕後會自動開啟phpmyadmin 圖形化介面，如下圖：

有看到以上的畫面就代表伺服器與資料庫已經成功安裝好了

任務三：伺服器與資料庫基本設定

3-1.將檔案搬移至htdocs資料夾下

接下來開啟路徑C://xampp/htdocs，把剛剛下載的mediawiki整包套件檔案直接搬到 htdocs 資料夾底下，目前完成的檔案路徑如下：C://xampp/htdocs/mediawiki

3-2.設定port號

開Port 設定目錄，開啟路徑為：C:\xampp\apache\conf\extra\httpd-vhosts.conf

設定傾聽port為7410，並加入下列程式碼，請參考：

#Media-7410

Listen 7410

##NameVirtualHost *:7410

#

# VirtualHost example:

# Almost any Apache directive may go into a VirtualHost container.

# The first VirtualHost section is used for all requests that do not

# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.

#

<VirtualHost *:7410>

    ##ServerAdmin webmaster@dummy-host.example.com

    DocumentRoot "C:/xampp/htdocs/mediawiki"

    ##ServerName dummy-host.example.com

    ##ServerAlias www.dummy-host.example.com

    ##ErrorLog "logs/dummy-host.example.com-error.log"

    ##CustomLog "logs/dummy-host.example.com-access.log" common

</VirtualHost>

加入上述的程式碼後，儲存關閉檔案，記得最後要記得重啟XAMPP。

重啟可直接按下Apache 的 Actions 的Stop ，再按下Start，

重啟後需確認剛剛設定的7410port有開啟

接下來再次開啟瀏覽器，輸入localhost:7410，即可成功開啟mediawiki的首頁。

3-3.錯誤排除處理

如果網頁無法開啟，可能會碰到以下錯誤的發生

或者碰到這種錯誤

這是因為解壓縮檔案 WinRar和7-zip會忽略了PaxHeader文件，導致錯誤，可以使用WinZip來解壓縮。

3-4. mediawiki基礎設定

點選set up the wiki，基礎設定

這個連結到了wiki首頁-安裝頁，點選[繼續]

接下來會看到一個歡迎畫面

[繼續]往下設定設定資料庫>連線資料庫

基礎設定

資料庫主機：localhost

資料庫名稱：my_wiki

資料庫帳戶：root

勾選V使用與安裝程序相同的帳號後按下[繼續]

設定wiki的名稱、使用者名稱、使用者密碼、電子郵件地址，設定完後按下[繼續]

依自己的需求設定使用者權限，按下[繼續]按鈕直到安裝完成

安裝完成後還需要下載localsettings.php到自己本機上

把下載回來的 localsettings.php 放置在您的Wiki的根目錄（index.php所在的目錄）中

開啟index.php或直接開啟瀏覽器

網址輸入：localhost:7410/index.php/

即可成功連到你的wiki首頁

回到資料庫（phpmyadmin）

開啟Xampp控制台後在MySql右邊按鈕 >> 點選Admin

接下來會自動開啟phpmyadmin首頁，接著看到資料庫的地方，已經自動生成剛剛設定的資料表名稱為my_wiki的資料庫

確認資料表已經生成後，就可以開始編輯你自己想要的內容了。

完成檔如下圖：

Photo credit：Pexels

文、意如老師

了解了基本的程式架構後，接下來我們要來認識資料綁定以及屬性綁定

任務：資料綁定

1. 使用v-text 接資料

例：v-text="message"

範例index.html程式碼參考如下：

<div id="myapp">

      <span v-text="message"></span>

</div>

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    message: 'Hello myapp!'

  }

})

2. 使用大括弧 {{ }} 接資料

第二種方法，使用大括號的方式來接資料例如{{message}}，這種方式使用起來會較有彈性更方便。

範例Index.html程式碼如下：

<div id="myapp">

      <span>{{message}}</span>

</div>

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    message: 'Hello myapp!'

  }

})

兩種方式混合一起用：

範例Index.html程式碼如下：

<div id="myapp">

      <span v-text="message"></span>

      <span>{{message}}</span>

</div>

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    message: 'Hello myapp!'

  }

})

網頁結果顯示：

程式碼參考：https://jsfiddle.net/YiruAtStudio/e4809f6t/5/

如果你的main.js是首頁，並預設已經有寫一些內容，那麼我們也可以繼續往下加入（例：17行）

這時候開啟我們的首頁最下方，就會有我們剛剛輸入的文字了。

可參考-程式碼：https://jsfiddle.net/YiruAtStudio/01kdp57w/6/

3. 認識資料型態function

如元件檔副檔名為.vue例App.vue它們都是各自獨立非共用，所以元件中的data都只能是function型態，並可用return 方式來回傳資料

例路徑：src\components\mytest.vue

參考程式碼如下

<div class="myfont">

        {{mymsg}}

</div>

<script>

export default{

  data () {

    return {

      mymsg: 'hi,mymsg!'

    }

  }

}

</script>

4. 使用v-html接資料：例v-html="message

如果要返回（return）的是html，則需要使用的是v-html

範例Index.html程式碼如下：

<div id="myapp">

 <span v-html="message"></span>

</div>

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    message: '<a href="#">我是超連結</a>'

  }

})

console.log(myapp.message)

執行結果：

完成程式碼參考：https://jsfiddle.net/YiruAtStudio/sx35fd9m/

5. 使用v-model接資料

先來看看v-model的效果如下圖，在使用者填完資料或選擇資料時，下方資訊則會自動更新。

使用方式如下，範例index.html程式碼：

<div id="myapp">

  姓名:<input type ="text" v-model="myname">

  購買數量:<input type = "number" v-model="mynum">

  <br>

  {{myname}}，購買數量為:{{mynum}}

</div>

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    myname: 'Name:',

    mynum: '5'

  }

})

console.log(myapp.myname)

完成檔：

完成程式碼：https://jsfiddle.net/YiruAtStudio/8vex0af1/

6. 設計表單資料綁定

範例index.html程式碼如下：

<input type ="text" v-model="myname">

<input type = "number" v-model="mynum">

<textarea v-model="mynote"></textarea>

運送:<br>

<input type ="radio" name="s1" v-model="transport"  value="711">7-11<br>

<input type ="radio" name="s1" v-model="transport"  value="family">全家<br>

<input type ="radio" name="s1" v-model="transport"  value="hilife">萊爾富<br>

加購:<br>

<input type="checkbox" v-model="chkbox" value="python">python

<input type="checkbox" v-model="chkbox" value="Java">Java

<input type="checkbox" v-model="chkbox" value="PHP">PHP

付款方式:

<select v-model="select_item">

  <option value="ATM">ATM</option>

  <option value="pay">貨到付款</option>

  <option value="ment">取貨付款</option>

</select>

{{myname}}，購買數量為:{{mynum}}，<br>

{{mynote}}。<br>

運送方式{{transport}}<br>

加購{{chkbox}}<br>

付款方式{{select_item}}

範例main.js程式碼如下：

var myapp = new Vue({

  el: '#myapp',

  data: {

    myname: 'Name:',

    mynum: '5',

    mynote: '備註',

    transport: '請選擇',

    // 宣告checkbox-data中的變數為陣列[]

    chkbox:[],

    //也可宣告null

    select_item:null,

  }

})

執行結果如下圖：

Photo credit：Pexels

文、意如老師

續上一篇：管理多個IT部門的經理 學習篇（一）本篇繼續分享

3. 管理菜鳥和老鳥經理

管理菜鳥經理

花時間在培訓菜鳥經理是非常必要的前期時間成本，除了學習新技能外，人際互動也是需要接受一番訓練。

例如如何舉辦一對一會議，如何主持會議，怎麼紀錄和追蹤會議重點。

然後多關心一對一會議進展如何，觀察哪些問題或挑戰需要你協助解決。

菜鳥經理陷入常見情況，大多沒有把職責交給團隊其他人員，試著應付兩份工作，從未學會放手，不斷拉長工作時間，過度的工作也會為團隊帶來危機。

這時需要你明確的告訴他，移交工作以及幫助他對舊工作放手。

另外像是控制狂主管菜鳥經理總是希望每位成員都能詳盡報告工作，要求不必要的枝微末節，容易惹惱他的團隊，也剝奪團隊做出任何的決定，認為自己的工作自己的工作就是指派任務而已，最糟糕是，控制欲極強的經理會害怕被拿走控制權，因此經常會想對他們的主管隱匿實情，對團隊近況避而不答。

解決方式：讓經理明白他們對團隊需要對交付的成果負責，引導團隊成員專注目標和創造成果。再三提醒他承諾過什麼，手把手教他如何做團隊規劃，提供指導，明確告訴經理，你的期望，經理必須為團隊成敗負責，並幫他掌握相應技能。

管理老鳥經理：

他知道如何帶好團隊，甚至有自己的獨門管理心法，唯一要注意的是，需要確保這個人是否符合團隊文化。

老鳥經理對於管理的看法或風格可能與你不同，而你必須去克服這些差異，如這人帶領技術團隊經驗比你豐富，你可以向他請教，但也不要害怕提供你自己的意見回饋，允許他教你新東西，在各自擅長的領域協力合作。

4. 招募新經理

經理與組織文化能否契合非常重要，如果經理與你的理念和團隊格格不入，通常會導致經理失責，你得開除他，團隊紛紛出走，你也得開除他。

雇用更有經驗的經理和管理高層來彌補團隊其他成員的不足，成效有時可能一塌糊塗，帶著新文化而來的人們和組織既有文化產生摩擦，所以在招募經理時特別要謹慎。

Photo credit：Pexels

5. 找出組織失能的原因

觀察團隊

團隊表現就是不如預期時，需要觀察團隊，可以旁聽他們的日常會議，枯燥的會議是一種訊號，可能會議組織欠缺效率，運作良好的會議，人會積極參與討論，交流意見，激盪想法，如會議過度制式化，會壓縮了團隊對話的機會，反而會抹殺富有創造性的討論。

提出問題

為誰而打造系統，他們參與的原因是什麼，團隊是否不欣賞或理解這些產品，因此缺乏解決這些問題的工作動力。

檢查團隊氛圍

團隊是否在專案上互相合作，還是各做各的？聊天室和電子郵件互動有趣嗎？與產品經理互動友善嗎，如果團隊績效良好，相敬如賓當然沒問題，但如果團隊效率不佳，那麼可能就會為你帶來麻煩。

當你發現團隊這些問題時，需要輔助經理拉他一把，向經理傳授經驗，幫助他從錯誤中學習。

6. 培養團隊的技術策略

思考如何將大專案拆分成一系列較小的可交付成果，這樣一來，即使無法實現宏大的目標願景，也能取得一些實際的成果。

將團隊工作時程的20%時間投入「持續性工程」為團隊保留時間，進行系統重構，修復錯誤，改善技術流程，進行小規模系統清理，提供持續系統支援等工作。

Photo credit：Pexels

最後結論如何幫助自己再不斷的往上進步？

例如：在IT領域不論是任何職位的IT們，一定要保持對技術的敏銳度，也撥出一些時間來閱讀程式碼，了解一些未知領域，日常參加事後檢討會議，跟上軟體開發流程的業界趨勢，經營公司外部的技術人脈等等，最後就是學無止盡，這些都可以幫助自己不斷的往上提身自己能力，增加保持對技術的敏銳度。

Photo credit：Pexels

文、意如老師

今天想跟大家分享一本書，書名為：經理人之道，這本書是專門寫給工程師經理的一本工具書，作者以工程師到經理主管最後到決策者的角度來分析說明，例如：如何帶好一個IT團隊或者多個跨部門的IT團隊管理以及到最後到高階管理層等等…，在每一個章節都有很豐富的介紹，本篇為書中的其一章節來做重點分享。

這篇章節為“管理經理人“，這個角色需要管理多個團隊的部門經理，例如A、B、C、D團隊中的經理，而這些經理底下也會有個技術領導（TechLead），這些技術lead底下就會是工程師們。

如何管理多個團隊的經理？

常見問題：

1. 管理經理人如何避免這項工作佔掉所有的時間？

2. 如何解決我不在場，只能聆聽“不可靠的證人”片面說法

在管理的初期可能很難在事態釀大之前就發現問題，因此需要不斷磨練敏銳的直覺，快速分辨事務的重要性，知道何時該深入了解狀況，不要浪費在非要務的任務上。

如何有效監督整個部門的6個關鍵要點

1. 如何從跨層級下屬獲得資訊

2. 讓經理當責的意義

3. 管理菜鳥和老鳥經理

4. 招募新經理

5. 找出組織失能的原因

6. 培養團隊的技術策略

1. 如何從跨層級下屬獲得資訊

有些人很擅長向上管理，對問題隱而不報，所以有些問題永遠不會升級到你那裡，當你發現時可能已經無法挽救。

作者建議舉辦跨層級的一對一會議和「下屬的下屬」開會，讓人們有機會進行真正的對話，目的是為了讓你可以隨時掌握團隊的運作。

2. 讓經理當責的意義

經理的工作主要是分憂，讓你將注意力放在大局上，而不是對任何團隊的細節緊抓不放，所以應讓經理擁有一致的目標，當他們一再無法達成目標，表示他們沒有盡到管理責任。

什麼是經理的責任？

不穩定的產品路徑圖

團隊效率不高，系統不穩定，大量人事異動或者團隊一直改變任務目標。

掉入無底洞的TechLead

全心全意試著重新設計某個核心系統，才剛起筆，但其工作堆積如山，但經理堅持認為這是一個不能心急求快的大問題。

全日制救火模式

經理帶領的團隊負責陳舊的系統，問題層出不窮，除了花時間救火還需要支援其他團隊，不斷的分散團隊的注意力，團隊規劃了遷移這些老系統的路徑圖，但是經理沒聽到這個計畫的進展，盡量應對滔滔不絕的支援請求。

以上的問題經理都必須承擔起帶領團隊走出困境，經理有責制定一個解決火災的原因計劃，如有其他問題而停滯不前，經理不應該隱匿事態，有責任向你反映，明確回報問題出自何處。

大多數情況下，他們沒有底氣與產品團隊斡旋，這時你就需要挺身而出，尋找其他經驗老道的幫手來協助經理。

經理也需要工作上的指導，多花時間與經理們相處，向他們提供回饋和指導，積極協助經理們的管理工作。

下一篇將繼續跟大家繼續分享：管理多個IT部門的經理 學習篇（二）

3. 管理菜鳥和老鳥經理

4. 招募新經理

5. 找出組織失能的原因

6. 培養團隊的技術策略

Photo credit：Pexels

文、意如老師

續上一篇：聯成電腦分享：最熱門的網頁前端框架，從零開始學Vue.js 安裝篇

任務一：認識目錄結構

續 上一篇 安裝好後，先到專案資料夾下，目前的目錄結構如下圖

我們先來認識一下幾個比較常會用到的資料夾

任務二：了解整個流程，及實作第一個vue.js網頁

首先開啟專案的主要入口點main.js以及index.html

接著修改main.js檔案，如下圖

▶ Index.html 為專案開始的樣板，預設要顯示的網頁內容顯示於

<div id=”app”></div> 中。

▶ main.js程式解說：

var myvue = new Vue({ })  //每個 Vue  都需要通過實例化

程式碼參考如下：

new Vue({

  el:  // index.html 中 id名為app

  router: //傳入 vue-router元件(ES6)

  components : //會使用到UI子元件(App.vue)

  template ://表示html模板套用至<App/> 的 el 的標籤

})

接下來cmd（命令提示字元）執行指令：npm run dev

這個指令會啟動http server，這個指令會同時開啟根目錄下的index.html與src資料夾內的main.js這兩個檔案

main.js也會同時運行App.vue以及在router資料夾內的index.js

▶ App.vue程式解說：

<route-view/>是路由器顯示標籤，為vue-router使用，在index.js下Router函數中所使用的UI元件皆會套用至這個標籤當中。

簡單的說這邊樣板設定會套用至main.js

▶ index.js程式解說：

index.js 是由路由配置，定義路徑和UI元件，可以在Router這個函數內，自定義url路徑名稱(path)，components下可以放入寫好的UI元件。

<router-view/> 為Vue-router使用，這樣index.js Router 這個函數下寫的components才會顯示出來

所以我們要產生新的UI元件，就要寫一個.vue檔，可放置在components資料夾之下；如要顯示這個vue元件，就需要到index.js中修改路由配置。

例：在src/components 新增 mytest.vue

路徑：src/components/mytest.vue

程式碼參考如下：

<template>

    <div class="myfont">

        {{mymsg}}

    </div>

</template>

<script>

export default{

    data(){

        return{

            mymsg:"hi,mymsg!"

        }

    }

}

</script>

<style>

    .myfont{

        background:yellow;

    }

</style>

再開啟路徑：src/router/index.js，程式碼參考如下：

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import mytest from '@/components/mytest'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

      path: '/mytest',

      name: 'mytest',

      component: mytest

    }

  ]

})

執行結果：

到cmd（命令提示字元）執行 npm run dev

下指令啟動server（伺服器）後，瀏覽器網址列輸入http://localhost:8080/#/mytest，會如下圖所示，你的第一張vue.js網頁已經完成了。

啟動後，只要一修改程式碼，瀏覽器上的這張網頁也都會自動更新，最後如果要關閉專案執行只要在cmd（命令提示字元）中輸入：Ctrl+C即可關閉整個專案。

Photo credit：Pexels

文、意如老師

什麼是Vue.js？

Vue.js是現在正當紅的網頁前端框架之一，主要程式語言為javascript，無論你是想寫一些簡單的網頁或者一個大型複雜的專案網站都可以快速使用Vue框架，來達到良好的開發效率。

我們直接先實作把Vue.js安裝到電腦上吧！

本篇會介紹3種比較常用的安裝方式。

方式1：下載回來至本機

步驟如下：

首先把vue.min.js下載回來到本機，

https://vuejs.org/js/vue.min.js

點選網址開啟網頁，按下右鍵另存新檔後備用。

先在本機建立一個網站資料夾Test1，再建立一個名為javascript的資料夾，再到javascript資料夾內放入剛剛下載回來的vue.min.js。

接下來只要在網頁中使用<script>標籤將vue.min.js引入，就可以自由的使用Vue.js了

直接先來簡單測試一下看有沒有下載並套用成功，首先再建立一個空的檔案名為：testpage1.html

接下來開始輸入程式碼

testpage1.html

<html>

<head>

<meta charset="utf-8">

<title>Vue測試</title>

<script src="javascript/vue.min.js"></script>  <!—這邊記得要引入vue.min.js -->

</head>

<body>

<div id="info">

        <h3>{{message}}</h3> <!—測試Vue.js是否套用成功-->

</div>

</body>

</html>

<script>

new Vue({

        el:'#info',

        data:{

                message:'My data Info Message'

        }

})

</script>

如成功套用在網頁中時出現的文字會是” My data Info Message”，如套用失敗文字則會顯示{{message}}

方式2：使用CDN方式引入

CDN是什麼？

就是將主要元件Vue.js 檔案是放在官方雲端中，如果我們要快速使用它時，不需安裝任何，直接加上一行程式碼即可。

例如：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

完整程式碼如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<html>

<head>

<meta charset="utf-8">

<title>Vue測試</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="info">

        <h3>{{message}}</h3>

</div>

</body>

</html>

<script>

new Vue({

        el:'#info',

        data:{

                message:'My data Info Message'

        }

})

</script>

使用CDN的優點是大家都可以自由使用不須額外安裝，而缺點是如果今天雲端伺服器突然當機，那麼只要使用CDN方式引入的網頁全都會出現跑版等等其他錯訊，所以如果要開發大型專案時盡可能使用第1種方式會較好，而如果只是要測試小程式的話就可以使用第2種方式。

方式3：使用command 下指令安裝

這邊會使用npm指令來安裝專案，先確認自己的本機是否有安裝npm，先開啟cmd(命令提示字元)。

接下來打入npm-v 來查詢自己的npm是什麼版本，如果沒有安裝的話會顯示”找不到檔案”，這時你就會需要安裝一下npm套件了，再裝npm前記得必須先安裝node.js，才會有npm。

步驟如下：

查看npm版本號

npm -v

更新到最新版的npm：

npm install npm -g

接下來安裝:  vue-cli

vue-cli 是可以快速將 vue.js 專案的整體架構建置起來的工具

npm install --global vue-cli

初始化專案

vue init [template] [project_name]

 [template] 可以採用官方提供的幾種template，若不知道有什麼template，可以下指令查看

#查看官方提供的template與說明

$ vue list

目前使用webpack模板

vue init webpack yrtest1

接下來會遇到幾個問題，直接按下ENTER即可

? Project name vue-project-base //專案的名稱

? Project description A Vue.js project //專案的描述

? Author GuaHsu <guaswork@gmail.com> //專案的所有者 (通常是你自己)

? Vue build standalone //詳見備註1

? Install vue-router? Yes //vue 的 route 意即專案路由

? Use ESLint to lint your code? Yes //規範 coding style 的工具

? Pick an ESLint preset Standard //好幾種規則, 這邊是選 Standard

? Set up unit tests Yes //是否設定單元測試

? Pick a test runner jest //使用單元測試的工具，這裡選 jest

? Setup e2e tests with Nightwatch? //e2e 測試的工具

? Should we run `npm install` for you after the project has been created? (recommended) npm //幾種 install 的方式，這裡是用預設的 npm

接下來就會開始安裝

按照指示：

cd yrtest1

npm run dev

開啟瀏覽器打入

http://localhost:8080

安裝成功畫面如下：

下一篇將帶大家了解Vue.js的目錄結構以及整個程式的流程架構

Photo credit：Pexels

文、意如老師

續上一篇：聯成電腦分享：你的網站GA了嗎？Google Analytics網站分析教學

上一篇我們使用Google Analytics只是針對一個網站來做分析，但是如果我們有很多網站很多專案是否可以導入一起分析呢？

答案是可以的，本篇將實作把所有的網站導入GoogleFirebase一起分析數據

建立專案：

首先到下列網址：

https://console.firebase.google.com/u/0/

點選建立專案按鈕

先輸入專案名稱：

取一個跟專案有相關的名字後，看完並接受Firebase條款後按下繼續按鈕。

了解將Firebase新增至GoogleCloud專案時的注意事項，並按下繼續按紐。

設定GoogleAnalytics  分析的帳戶，選擇或建立（可參考上一篇文章）

選擇帳戶或建立帳戶完成後按下繼續按鈕，即可看到Firebase的後台

新增應用程式：

接著開始新增應用程式，點選</>按鈕

接下來將Firebase新增至你的網頁應用程式，需要填一些註冊應用程式需要的資料。

填完暱稱，並勾選ㄧ併為這個應用程式設定Firebase代管功能後，按下註冊應用程式。

第2步驟就可以新增FirebaseSDK到你的網頁應用程式

直接複製firebaseSDK中的程式碼，複製到自己網站<Body>標記的最下方處即可，也可參考下列網址設定：

https://firebase.google.com/docs/web/setup?authuser=0

https://firebase.google.com/docs/reference/js/?authuser=0

https://firebase.google.com/docs/samples/?authuser=0

最後按下ㄧ步安裝FirebaseCLI，即可自動部署至Firebase代管。

完成後會回到主控台於下列網址：https://console.firebase.google.com/

專案設定：

點選左上角專案總覽的專案設定

找到Firebase SDK snippet >> CDN

複製程式碼到我們網頁全域的地方

接下來只要在有需要收集數據的每一張網頁都引入

只要在你有需要的網頁中引入後此頁程式碼後，就可以到後台中查看瀏覽的數據了。

設定按鈕事件：

在Firebase中也可以設定按鈕事件，到後台點選Events>在現有的事件中增加事件

接下來到程式碼中，找到按鈕元件後加入點擊事件，例如先建立一個下載按鈕。

<button id = "btn-download">下載</button>

再來幫這個下載按鈕添加事件，只要加上下列這行程式碼即可

firebase.analytics().logEvent('nnnnhihi');

完整程式碼如下：

<button id = "btn-download">下載</button>

<script>

var btnDownload = document.getElementById('btn-download');

btnDownload.addEventListener('click', function() {

  alert("hi");

  firebase.analytics().logEvent('nnnnhihi');

 }, false);

</script>

程式碼加入參考示意圖：

新增轉化事件：

程式碼設定完成後，再回到主控台 >> Conversions，新增轉化事件，事件名稱為剛剛放在logEvent('')中的字串’nnnnhihi’按下保存及完成設定。

回到到主控台（Dashboard）即可看到所有目前事件的數據已經開始跑了。

事件加上參數：

如果想要更進階的設定一些事件例如幫你的按鈕再加上一些參數，例如產品名稱標題，價錢等等…可以再回到轉化（conversions）設定

在程式碼中將按鈕事件寫入firebase.analytics().logEvent()並帶入參數。

程式碼解析：

參數類型的值可以是一個字串，例如按鈕內容名稱可以以事件來命名

firebase.analytics().logEvent(‘我要購買ABC’) ;

也可以有key 跟 value，例如按鈕內容的類型跟id

firebase.analytics().logEvent(

{

                content_type:'event_buy',

                content_id:'myid_a001',

})

如果資料很多，參數也可以帶入陣列類型，例如

firebase.analytics().logEvent(

items:[{

                goodname:'購買abc',

                price:123,

}]

)

參數帶入時也可混合所有類型的值非常彈性方便，例如

firebase.analytics().logEvent(

'我要購買ABC',{

                content_type:'event_buy',

                content_id:'myid_a001',

                items:[{

                        goodname:'購買abc',

                        price:123,

}]

了解了以上參數帶入方法後，最後整合至程式碼中。

程式碼如下：

<button id = "eventlog">我要購買ABC</button>

<script>

var eventlog=document.getElementById('eventlog');

eventlog.addEventListener('click',function(){

        alert("紀錄事件:我要購買ABC");

        firebase.analytics().logEvent('我要購買ABC',{

                content_type:'event_buy',

                content_id:'myid_a001',

                items:[{

                        goodname:'購買abc',

                        price:123,

                }]

        });

},false);

</script>

同時在Analytics（分析） 同步更新

結論：

假設你只有一個專案的話你可以使用Google Analytics，但如果我們同時有很多網站或很多專案就可以直接導入GoogleFirebase（可以把多個專案Google Analytics導入進去）一起使用GoogleFirebase來統一管理分析數據。

Photo credit：Pexels

文、意如老師

Google Analytics （Google分析） 簡稱GA，顧名思義就是Google的數據分析工具，我們可以把自己正在經營的網站導入GA，藉由GA來幫我們蒐集一些有用的資訊並把它記錄下來。

例如：使用者都是使用什麼平台來上網（手機？電腦？）、進入網站的目標對象（年齡層？性別？來自地區？）、觀察使用者進入網站後的行為（網頁瀏覽次數，按鈕點擊次數，廣告點擊次數）等等，藉著GA來幫我們蒐集了這些使用者的大量資訊與數據後再來做有效的分析，也提高未來網站改善的依據及創造更大的利益。

將你的網站導入GA開始實作：

步驟1、首先到下列網址點選免費設定按鈕https://analytics.google.com/analytics/web/provision/#/provision

步驟2、建立帳戶，填入帳戶名稱後，再設定一下帳戶資料共用設定後按下一步。

步驟3、選擇你想要評估的是網站還是手機IOS或Android應用，選完後按下一步，在此範例中選擇的是網站。

步驟4、輸入網站名稱及網址後點選建立按鈕。

步驟5、看完Google列出的條款勾選後，按下我同意按鈕。

完成建置了，接下來就可以看到GA的後台，並且手把手的教你怎麼埋入GA追蹤的程式碼。

埋入GA追蹤碼設定：

首先點選左下角管理

接著在資源中點選追蹤程式碼

此時將會看到全域網站代碼（gtag.js），請全選本段程式碼後複製程式碼

接下來只要把剛剛複製的程式碼貼到想追蹤的網頁中，例如我有一張Test.php的網頁，直接把剛剛複製的程式碼貼到Test.php的最下方，即完成埋入GA的工程。

Test.php

<?php

        echo "yiru_test";

?>

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-174020974-1"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'UA-174020974-1');

</script>

程式碼截圖如下：

埋入GA程式碼完成後，就可以回到GA後台中的首頁，即可看到GA已經在幫你的網站分析了，開啟剛剛的Test.php後，也可以看到後台的數據變化，當下活耀的使用者變成了1。

往後如果想要更新網址，只要點選在右下角的管理按鈕。

在點選資源中的資源設定。

即可修改資源名稱及預設網址了。

我們也可以針對一些按鈕來做分析，比如按鈕的點擊數，只要將按鈕加上事件即可。

程式碼如下：

<script>

#有一顆下載的按鈕id為” btn-download”

var btnDownload = document.getElementById('btn-download');

#點選這顆按鈕的作用是先跳出警告視窗(hi)

btnDownload.addEventListener('click', function() {

  alert("hi");

#GA程式碼埋入

  gtag('event', 'yr_addclick', {

   'event_category': 'y_add按鈕',

   'event_label': 'y新增按鈕'

  });

}, false);

</script>

埋入完成後只要到後台新增行為>>目標在這邊設定一模一樣的參數即完成設定。

而另一種寫法是使用全域程式碼：

複製本段程式碼到全域（每個地方都讀的到的共用區）

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-174465073-1"></script>

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-174567513-1', 'auto');

ga('send', 'pageview');

</script>

接下來只要到你想加入事件的地方，埋入以下GA程式即可完成。

例如：點擊頭像後跳轉到會員資訊首頁的事件，埋入GA程式碼

ga('send', 'event', '點擊頭像', '跳轉', '會員資訊首頁');

最後記得到GA控制後台  行為>>目標 設定一模一樣的參數即完成以上設定。

設定完成後即可回到後台首頁中觀看分析數據，只要埋入越多的GA事件，你的後台的分析數據就會越豐富。

目前我們使用GA是只針對一個網站來做分析，但是如果我們有很多網站很多專案是否可以導入一起分析呢？

Photo credit：Pexels

文、意如老師

首先準備好待查詢的股票代碼，此範例以長榮海運股票為例，代碼為2603，接下來到google直接搜尋2603，就可以找到長榮海運股票的資訊，也就是我們這次爬蟲要抓的資訊。

首先確認目標：

確認一下網址，目標網址為:https://www.google.com/search?q= "個股"代號

長榮代號為：2603

因此目標位置為 https://www.google.com/search?q=2603

準備開始寫程式，程式碼如下：

#先匯入爬蟲基本套件requests

import requests

#匯入爬蟲解析套件requests

from bs4 import BeautifulSoup

#目標網址後方加上個股資訊. ex長榮: TPE：2603

targetURL = 'https://www.google.com/search?q='

接下來我們需要先把整張網頁HTML全部都抓回來的功能

方法名稱：get_stock_page

帶入參數1-url：要抓取的目標網址

帶入參數2-stock_id：要抓取的股票代號

程式參考如下：

def get_stock_page(url, stock_id):

        #此段參考下方headers補充說明

    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '

             'AppleWebKit/537.36 (KHTML, like Gecko) '

             'Chrome/66.0.3359.181 Safari/537.36'}

    resp = requests.get(url + stock_id, headers=headers)

        #如果抓取失敗,印出失敗的網址

    if resp.status_code != 200:

        print('Invalid url:', resp.url)

        return None

        #如果抓取成功,返回抓回的html碼

    else:

        return resp.text

#主程式從這裡開始

if __name__ == '__main__':

#呼叫get_stock_page並傳入目標位置及股票代碼

    page = get_stock_page(targetURL, '2603')

    #印出結果

    print(page)

先執行看看，目前已經成功把整張網頁的HTML抓回來了。

程式碼中的headers補充說明：

有時在爬一些網站的時候會一直連不上，因為有的網站是不允許被爬蟲的，所以我們可以設定User-Agent假裝自己是瀏覽器，因為User-Agent會告訴網站它是透過什麼工具。

一般的網站可以分析出瀏覽器名稱、瀏覽器版本號、渲染引擎、操作系統、發送請求，因此我們可以寫下面這一段來假裝自己是用瀏覽器開啟的。

headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '

                             'AppleWebKit/537.36 (KHTML, like Gecko) '

                             'Chrome/66.0.3359.181 Safari/537.36'}

#在請求抓取網頁時記得帶入headers參數

resp = requests.get(url + stock_id, headers=headers)

如果想更進階了解自己的User-Agent，你也可以自己試著開啟網站看看，

按下F12 >>Network->隨便點選一頁>>就可以知道自己的User-Agent

接下來我們繼續往下抓更細的股票資料（如下圖紅框的資料）

先找到原始碼html標籤中股票資訊放在哪？

網頁中>>按下鍵盤F12

1. 點選網頁元素按鈕

2. 點選要找的網頁元素

3. 找到我們的資料在哪裡：第4個 g-card-section 中

4. 找到Table是分別存放股票資訊

程式碼：

#先使用for迴圈把所有<Table>資料通通抓出來

for table in sections[3].find_all('table'):

        #再把每一行<tr>的資料讀出

   for tr in table.find_all('tr')[:3]:  #[:3]  取得3個字

key = tr.find_all('td')[0].text.lower().strip() 

#lower()轉小寫

#strip()去除頭尾空格

#key值為抓到的中文字（如下圖）

    value = tr.find_all('td')[1].text.strip()

        #value值為抓到的數據（如下圖）

    stock[key] = value #將抓到的key跟value值存進我們自己所建立的陣列

    return stock #返回抓到的股票資訊

#程式從這裡開始跑

if __name__ == '__main__':

    page = get_stock_page(targetURL, '2603')

    #當有資料時

    if page:

        stock = get_stock_info(page)

        for k, v in stock.items():

                        #印出抓回來的key跟value資料

            print(k, v)   

這樣就完成了，最後參考完整程式碼如下：

#目標: https://www.google.com/search?q=

#2603

#匯入爬蟲基本套件requests

import requests

#匯入爬蟲解析套件requests

from bs4 import BeautifulSoup

#目標網址後方加上個股資訊. ex長榮:2603

targetURL = 'https://www.google.com/search?q='

def get_stock_page(url, stock_id):

    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '

                             'AppleWebKit/537.36 (KHTML, like Gecko) '

                             'Chrome/66.0.3359.181 Safari/537.36'}

    resp = requests.get(url + stock_id, headers=headers)

    if resp.status_code != 200:

        print('Invalid url:', resp.url)

        return None

    else:

        return resp.text

def get_stock_info(webtxt):

    soup = BeautifulSoup(webtxt, 'html.parser')

    stock = dict()

    sections = soup.find_all('g-card-section')

    # 第4個 g-card-section, 有左右兩個 table 分別存放股票資訊

    for table in sections[3].find_all('table'):

        for tr in table.find_all('tr')[:3]:  #[:3]  取得3個字

            key = tr.find_all('td')[0].text.lower().strip() 

#lower()轉小寫。 strip()去除頭尾空

            value = tr.find_all('td')[1].text.strip()

            stock[key] = value

    return stock

if __name__ == '__main__':

    page = get_stock_page(targetURL, '2603')

    if page:

        stock = get_stock_info(page)

        for k, v in stock.items():

            print(k, v)   

完成畫面如下：

抓取的網頁如下：

文、意如老師

＂要了解什麼是結構化之前，我們首先需要認識什麼是資料？資訊？＂

什麼是資料？

資料可以是文字、圖片、數字、影片、音樂、檔案等，資料是蒐集而來的，也是未經過整理的。

例如：我們常常會到圖書館蒐集需要的資料。

什麼是資訊？

將蒐集的資料經過整理後，使其可較好閱讀並且有意義的資訊（資料）。

例如：我們需要將到圖書館蒐集回來的一堆未整理的資料整理成對我們有意義的資訊。

什麼是結構化資料？

將蒐集而來未整理過的資料，變成乾淨整齊有意義好閱讀的資訊也就叫做結構化資料。

如何將未整理過的資料結構化成資料的三大步驟：

1. 簡單的先畫個表格，並給予欄位

2. 值=寫入資料

3. 寫入的地方可以是一張紙或資料庫或Excel

如下表為結構化後的資料

結構化：先建結構才有資料，步驟如下：

1. 資料蒐集

2. 整理

3. 結構化資料

4. 資訊

5. 管理

結構化資料有什麼優缺點？

優點：好閱讀資料查詢快速、存儲空間少。

缺點：資料交換上較不易。

以工程師的角度，因為常常要做資料交換，如要處理結構化的資訊就需要將表格或儲存格內的文字再轉成程式陣列資料才可以任意使用資料，多了一道工作，所以盡可能建議不使用結構化好的資料來做資料交換。但以使用者的角度，只能接受有整理過的結構化資料。

所以一般工程師日常就是把未整理過的資料，整理成結構化的資料，讓使用者更好閱讀及管理。

什麼是半結構化資訊？

有資料，但還沒整理成好閱讀的格式。

例如： Json檔、csv檔 、xml檔都是屬於半結構性的資料。

半結構性的資料例如：JSON檔，參考如下圖：

半結構性的資料例如：XML檔如下圖：

我們可以將類似以上的檔案（半結構性資料），將它整理成結構化資料，如下圖變成可較好閱讀的表格式資料（結構性資料）

半結構化成結構化五大步驟如下：

1. 資料蒐集

2. 整理

3. 半結構資料

4. 結構化資料

5. 管理

資料搜尋後先整理成半結構資料後再建立整理成結構化資料，因為工程師常常會碰到資料交換的需求，所以整理成半結構資料通常是工程師的工作內容之一。

另外工程師也常常會需要將這些半結構性的資料整理成結構性的資料讓使用者更好閱讀。

半結構化資料優缺點？

優點：資料交換方便、新增資料欄位快速

缺點：無法像結構化表格易閱讀

所以就工程師的角度，最愛使用的是JSON格式（半結構式的資料）來做交換資料，因為不論是新增欄位或修改欄位都非常的方便，但是以一般使用者的角度看半結構性的資料是非常不易閱讀的。

所以我們在準備資料的時候，要考慮誰來使用這些資料，給一般使用者看的就是給結構化資料，如要給工程師的資料就給半結構性資料。

什麼是非結構化資料？

完完全全沒整理過的資料，例如：文字、音訊、網頁等等…

▶ 資料最原始的本質

▶ 這種資料最終還是需經過一番整理才能夠變成結構化資料

例如：網站上隨意蒐集來的資料欄位

將其變成結構化成資料（看得懂並有意義的資訊）

最後總結：

（一）整體的步驟如下

1. 資料蒐集

2. 整理

3. 資訊

4. 結構化資料

5. 最後才能用這些資料來管理

（二）非結構化資料、半結構化資料、結構化資料

1. 非結構化資料（未整理過的資料）

2. 半結構化資料（半整理過的資料，資料交換中最常見）

3. 結構化資料（已整理過的）

（三） 資料分析與管理

綜合以上為什麼工程師為什麼一定要知道這些數據型態？

因為工程師的日常工作最常就是處理這三種結構的資料，所以想當工程師的您務必先熟悉處理這三種結構化的資料。

圖片來源：Pexels

文、意如老師

網路爬蟲要學什麼程式語言呢？ PHP？JAVA？Python？還是其他程式語言？

這是目前聽到最多人問的問題了，所以今天就來探討一下這個主題吧！

快速介紹一下網路爬蟲，簡單的說網路爬蟲其實就是去網路上抓取網頁上的任何資料，蒐集資料。更詳細說明請參考上一篇文章：聯成電腦分享：什麼是網路爬蟲？為什麼每一個工程師都要會？

圖片來源：Pixabay

那抓取網頁上的資料（爬蟲）要做什麼？

把網路上的資料抓回來後再經過我們整理成為有用的資訊，存在我們自己的資料庫，就可以任意使用了。

圖片來源：Pixabay

那爬蟲需要會什麼程式語言呢？

其實呢學什麼程式語言並不重要，因為每一種語言幾乎都可以做到任何你想要的功能，對工程師來說程式語言只是一個工具，差別只是在使用起來方不方便，執行的快不快速跟好不好維護。

以程式語言像是php、java、python、node.js等選擇任一個語言都能做到爬蟲（因為現在的套件）非常多，這邊的套件指的是人家做好的功能，我們只要把套件引入我們的專案內，再傳入幾個參數就可以使用了。因此你可以使用你熟悉的語言玩玩爬蟲。

圖片來源：Pixabay

但如果要以快速上手的語言，這邊就比較推薦python或 node.js 這兩種語言都只需要幾行程式碼跟幾個簡單的語法就可以把資料爬回來了。

網路爬蟲要從哪裡開始學？先練基礎功

網路爬蟲主要是抓網頁上面的資料，所以當然一定是從最基礎網頁語法HTML開始學起，例如我們要抓取網頁的標題，這時候在下語法時就要去抓名為<title> </title>標籤內的文字。

圖片來源：Pixabay

為了我們爬蟲可以更順利抓到更多想要的資料，除了標籤HTML外，基本的css和javascript也需要略懂略懂。

例如我們要抓的資訊也有可能是包在css樣式中的文字，像是<span class="first_word">門市資訊</span>等等…

所以想要爬蟲第一步建議先把網頁語法學好，等基礎功都練熟站穩腳步後再用你習慣的語言（python或java或php或node.js）等其他程式語言把網頁中的資料爬回來。

圖片來源：Pixabay

最後把資料抓回來後集中整理，通通存入我們自己的資料庫中，結構化成我們可較好閱讀的資訊。

Photo credit：Pixabay

文、意如老師

軟體工程師在面試時，往往第一關都是要先筆試，就算實力堅強的求職者，也有可能在這一關就被淘汰。原因如下：

圖一

1. 全英文題型（光理解題目就要花上很多時間）例：圖一

2. 在時間的壓力下很難快速解題

3. 使用不熟悉的線上編輯器寫程式

所以基於這三個原因，很多求職者紛紛卡在筆試這關實在很可惜，那有什麼方法可以有系統的準備考試呢？

我使用的方法是勤能補拙靠刷題的方式（反覆練習所有題型），所以今天要跟大家分享的是LeetCode ， 這個網站主要蒐集了國內、國外所有大大小小企業的面試題目，不論您想找什麼類型的題目應有盡有。

例如您可挑選的題型有下列：

1. 簡單、中等、困難，由淺入深的做題目。

2. 陣列、堆疊、遞歸、演算法、二元樹等分類題型。

3. 人工智慧、機器學習、雲端服務、以及資料科學等用相關職位來找題目。

4. 知名企業的考古題，例如: AWS、APPLE、Adobe、FaceBook、Google、微軟等知名企業。

5. 當月挑戰題，也可以每周參加程式設計比賽，增強自己的實戰能力。

6. 最常考的面試熱門題型。

這個網站除了目前已經蒐集了2000多題的考古題外，使用它的線上考試的編輯器還支援了不少常見的程式語言，您可以選用您最慣用的語言來練習考試，也可以嘗試用多種語言來解題。例如：JAVA、PHP、C++、JavaScript、Ruby、Python、GO、TypeScript等語言。

怎麼使用LeetCode？

首先到LeetCode網站辦一個帳號，其實用Google帳號登入直接登入就可以了。

https://leetcode.com/accounts/login/?next=/explore/interview/card/top-interview-questions-easy/92/array/

註冊帳號的優點如下：

1. 它的線上編輯器，可以紀錄您的所有作答，就算臨時想離開座位休息一下或者把網頁關掉，下次登入時還能保留您上次編寫的程式碼。

2. 可以記錄下您所有解答過的題型，您也可以把它當作玩遊戲一樣，一關一關的闖，把所有的題型都刷過一遍。

3. 可以分析您之前做過的題目、分數，可以藉由此紀錄來自我判斷是否有無進步。

4. 想要進一步的挑戰自己，也可以參加每週程式比賽。

5. 解法不只一種，也可參考各大工程師的解決方法，提升自己的解題能力，而您也可以分享您的解法上傳至此網站分享給大家。

目前業界已經越來越多公司都有準備工程師的筆試題目，而筆試的題目有很多都是參考LeetCode上的題目，因為企業可以在LeetCode上挑題目，並快速建置一個給求職者的線上考試環境(支持各程式語言的編輯器)，對企業來說是一個很實用的建置考試環境的平台，再將設定好的試卷連結發給求職者，求職者點選進去就可以馬上計時考試，甚至作答完後還可以系統自動改考卷，對於企業來說可說是相當方便。

LeetCode 這個網站除了可以幫助我們更有系統的準備筆試，平時也可以當作練練基本功以及挑戰自我並可以訓練自己用各式不同的程式語言來解題，增強自己的程式功力。

文、意如老師

續上一篇 — 基礎工程師面試時，常用的技術問與答（二）

本篇要跟大家分享的是工程師面試筆試中最常出現的題型程式應用篇，這個方向類的主題會落在工作上較偏向觀念理論實作及實際應用

Q1、什麼是GET跟 POST？

這題是基礎工程師的必考題，所以務必徹底理解這兩種HTTP 協議的請求方式，這裡我們分成3小題

1. 如何送參數？

2. 傳遞時該如何選擇GET或POST？

3. 安全性如何？

Photo credit：Pixabay

⭐ 1. 如何使用GET與POST傳送參數？

使用GET方法送只要在網址(URL)後面代入參數即可。

例如: 網址後面加上問號(?)，參數1=值1 ，再使用連結符號 (&) ，再帶入參數2=值2，如 xxxxx.com.tw?name=’1’ & age=’18’

而POST方法是需要把參數放在HTTP 協議裡BODY中。

⭐ 2. 傳遞時該如何選擇GET或POST？

因為GET 是在URL中傳送資料（參數），屬於明碼大家都看的到，類似較隱蔽的資料例如:帳號、密碼這類的資料就不能使用GET方式來送，另外一點URL 的最大長度是 2048 個字符，所以當您的資料超過2048個字時也不能使用網址（GET）來傳送，所以很好判斷您該選擇GET方式傳送或POST方式傳送。

⭐ 3. GET與POST安全性如何？

以大部分的文章、或使用者經驗，大多會認為POST 傳輸方式會比GET傳輸方式來的安全，因為POST 傳輸的參數一般是不可見的。