目前分類:講師技術文 (45)

瀏覽方式: 標題列表 簡短摘要
article_main_img

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:認識物件

  1-2:修改物件型別中的值

  1-3:物件可當參數傳遞

任務二:認識鴨子類型(Duck Typing

任務三:其它常見的資料類型

  3-1:認識Map

  3-2:認識Set

  3-3:認識Tuple元組

 

 

 

任務一:認識物件型別(Object types

 

1-1:認識物件

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

 

var myobject = {

    key1: "mydata", // 字串

    key2: 123 //整數

    key3: function() {// 函數

        console.log("ABC");

        return "BCD"

    },

    key4:["arr1", "arr2"] //陣列

}

//物件

console.log(myobject)

 

/*{

  key1: 'mydata',

  key2: 123,

  key3: [Function: key3],

  key4: [ 'arr1', 'arr2' ]

} */

 

//物件中的值

console.log(myobject.key1) //mydata

//物件中的函數

console.log(myobject.key3())//ABC BCD//

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

文、kk

 

 

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

 

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

 

 

 

 

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

 

 

BASIC

PLUS

CHOICE PLUS

PRO

費用

每月$2.95美金

每月$5.45美金

每月$5.45美金

每月$13.95美金

適合對象

適合僅擁有單一網站的入門者

適合成長中的網站

適合成長中的網站

適合大型網站

網站空間

提供50GB網站空間等服務

網站空間不受限制

網站空間不受限制

網站空間不受限制

更多功能

-

提供無限的網站支援

多數功能和PLUS方案相同,但多了網域隱私保護、自動備份等功能

多數功能和CHOICE PLUS方案相同,但多了高效能、獨立IP

 

 

 

 

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

 

 

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


文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、KK

 

 

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

 

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

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

 

 

 

 

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

 

 

 

 

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

 

 

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

 

 

 

如何設定不同商品,收取不同運費?

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 


文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

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

 

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

 

 

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

 

 

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

        任務1-1.下載 nginx

        任務1-2.啟動 nginx

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

        任務1-4.關閉 nginx

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

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

        任務2-2.下載winsw

        任務2-3.基本設定(複製winsw.exe  建立 winsw.xml 檔)

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

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

 

 

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

 

任務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上了。

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

文、意如老師

 

 

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

 

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

 

 

 

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

任務二:綁定css-style屬性

2-1.綁定多個css-Style屬性

2-2.綁定:style物件object 寫法(集合)

2-3.綁定:style array 寫法

任務三:事件處理

任務四:實作計數器

 

 

 

任務一:屬性綁定-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/

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

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

 

 

任務一:下載mediawiki套件

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

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

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

        3-2.設定port

        3-3.錯誤排除處理

        3-4.mediawiki基礎設定

 

 

 

任務一:下載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的資料庫

 

 

 

 

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

 

 

 

 

完成檔如下圖:

 

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

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

 

任務:資料綁定

1. 使用v-text 接資料

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

3. 認識資料型態function

4. 使用v-html 接資料

5. 使用v-model接資料

6. 設計表單資料綁定

 

 

 

任務:資料綁定

 

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,

  }

})

 

 

 

執行結果如下圖:

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

續上一篇:管理多個IT部門的經理 學習篇(一)本篇繼續分享

 

3. 管理菜鳥和老鳥經理

4. 招募新經理

5. 找出組織失能的原因

6. 培養團隊的技術策略

 

 

3. 管理菜鳥和老鳥經理

 

管理菜鳥經理

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

 

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

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

 

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

 

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

 

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

 

 

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

 

 

管理老鳥經理:

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

 

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

 

 

 

4. 招募新經理

 

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

 

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

 

 

Photo credit:Pexels

 

 

 

5. 找出組織失能的原因

 

觀察團隊

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

 

 

提出問題

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

 

 

檢查團隊氛圍

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

 

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

 

 

 

6. 培養團隊的技術策略

 

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

 

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

 

 

Photo credit:Pexels

 

 

 

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

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

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

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. 培養團隊的技術策略


文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

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

 

 

 

任務一:認識目錄結構

任務二:了解整個流程,及實作第一個Vue.js網頁

 

 

 

任務一:認識目錄結構

 

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

 

 

 

 

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

 

資料夾

說明

build

這個資料夾中可以放一些環境的配置

例如開發時用的程式版本node.js或是npm的版本等等

有關環境配置的檔案都會放在此資料夾內

config

程式常會使用的目錄路徑,或者port號等等的資訊會放在此資料夾下

node_modules

會使用到的套件都會放在此資料夾下,也是安裝npm時會附帶的套件

src

開發的項目都會放在此資料夾內

例如我們寫的程式碼就全都會放在src這個資料夾內

src/assets/css

放置會使用到的CSS

src/assets/images

放置會使用到的圖片,如icon,logo等圖

src/components

放置組件

src/App.vue

功能的入口

main.js

核心的文件也是整個專案的主要入口點,透過它連接到這個專案主要的根(功能)App.vue

static

靜態資源目錄,如圖片、字體等,

放在這個資料夾,不會被webpack處理。

test

初始測試目錄,可刪除

.xxxx文件

這些是一些配置文件,包括語法配置,git配置等

index.html

首頁入口文件

package.json

專案配置文件

README.md

專案的說明文檔,markdown 格式

babel

babel是一個轉碼器,因為目前瀏覽器對於新型態JavaScript語法支援度不高,babel-loader可將ES6或ES7語法轉為支援度高的ES5的語法。

ESLint

ESLint目的是改善程式碼品質,發現與調整程式碼的問題達到一致性,所以有安裝此套件的話,常常會在編譯執行時看到很多警告訊息,如果安裝之後想要忽略ESLint檢查,可以到.eslintignore文件中做修改。

 

 

 

任務二:了解整個流程,及實作第一個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即可關閉整個專案。

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pexels

 

 

 

文、意如老師

 

 

什麼是Vue.js?

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

 

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

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

 

 

 

方式1:下載回來至本機

方式2:使用CDN方式引入

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

 

 

 

方式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的目錄結構以及整個程式的流程架構

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

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來統一管理分析數據。


文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

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是只針對一個網站來做分析,但是如果我們有很多網站很多專案是否可以導入一起分析呢?


文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

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

 

 

字串

說明

Mozilla/5.0

Mozilla/5.0 是一個通用標記符號,用來表示與 Mozilla 相容,這幾乎是現代瀏覽器的標配。[4]

(iPad; U; CPU OS 3_2_1 like Mac OS X; en-us)

瀏覽器所執行的系統的詳細資訊

AppleWebKit/531.21.10

瀏覽器所使用的平台

(KHTML, like Gecko)

瀏覽器平台的細節

Mobile/7B405

被瀏覽器用於指示特定的直接由瀏覽器提供或者通過第三方提供的可用的增強功能。這方面的一個實例是Microsoft Live Meeting,它註冊了一個擴充以使Live Meeting服務知道該軟體是否已經安裝上,這意味著它可以為加入會議提供一個簡化的體驗。

 

 

 

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

 

 

 

 

 

先找到原始碼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)   

 

 

 

完成畫面如下:

 

 

 

 

抓取的網頁如下:

 

 

 


文章標籤