---
# System prepended metadata

title: 林惠霖的系統開發自主學習

---

# 林惠霖的系統開發自主學習
:::spoiler 目錄
[TOC]
:::

# 10/04
## 連結
[moodle - 資訊系統開發與實務](https://moodle.ncnu.edu.tw/course/view.php?id=50142)
[C# Tutorial](https://docs.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-console?view=vs-2019)
[系統開發 - 雲端資料夾](https://drive.google.com/drive/u/3/folders/167ZLmN7Dq85jk_CxRZW-swNaXNubR_5F)
## 資料 
![](https://i.imgur.com/zs9FJ6m.png =50%x)
- 資料分析
- 資料處理
- OS 作業系統
- cloud (雲端)
> 查甚麼是**Cloud computing、雲端服務**
- 硬體與機房環境
    - 電腦機櫃
![](https://i.imgur.com/X1luA4B.png =30%x)

![](https://i.imgur.com/qc8lZ7E.png =30%x)
## 資料處理
- 先會資料處理，再會資料分析
> 資料分析的語言:python
- 知道如何收集、儲存、運算資料、設計使用者介面
- 要充分掌握一種程式語言(C#、PHP)
- 要掌握**資料庫**(SQL)
![](https://i.imgur.com/zKom3NT.png =300x)
## 開發程式的4項工具
- C#、F#、VB
- 框架(faramework)\套件(packages)\函式庫(libraries): .Net core
- 整合式開發環境(IDE): Visual Studio 2019、Visual Studio code
- 部署：開發不同平台上的APP
> windows、maxOS、Linux、Android、iOS、tvOS、watchOS

# 10/18
## c# 基本語法解釋
- `console` 是控制視窗的物件
- `=` 設定
- 字元是`''`表示，引號中就只有一個字元
- 字串是`""`表示，引號中是由一個或多個字元串自一起的
- 當要計算記憶體、硬體大小就很重要
![](https://i.imgur.com/gN048nf.png)
- 在設定浮點數的話後面要加F
- 在設定double時後面要加D
- e、E代表10的幾次方
- Convert是一個物件
	`Convert.ToString()`

## 回家作業
1. C#中的Console是什麼意思
2. Cloud computing
3. 雲端服務

# 10/25 
如果你在android手機開發，記得要開啟USB偵錯功能
擴充
license agreement 同意書
images: 可以想成disk，就像是你Clone出一個目錄下的所有檔案，那就稱為image
.NET Framework是特定針對Windows的作業系統
console是控制台的物件

## 回家作業
1. 帶手機&USB線
### router 路由器
- 路由器就是負責連接網路，決定資料封包的傳輸路徑
- 判斷檔案、訊息、網路互動等資料傳輸的優先順序
- 以最佳路徑將資料傳送到指定的IP位址
- 功能: 將傳入的封包拆，再依照 Header（Network Header, NH）上的 目的位址，依據 router table上搜尋下一個路徑（Next-hop），轉送到適當的埠口上。

>**參考網址**
>[router 路由器](http://www.tsnien.idv.tw/Internet_WebBook/chap3/3-6%20%E8%B7%AF%E7%94%B1%E5%99%A8.html)

### switch 交換器
- switch是一種負責網路橋接（network bridging）的網路硬體設備
	- 可以透過 switch 將多台電腦接在一起
- 會讀取網卡的 MAC 位址來轉發資料，將資料準確地送達目的地
- 目的: 建立網路，負責將資料準確送達，建立整個網路運作的基礎
>**參考網址**
>[switch - 連結1](http://www.tsnien.idv.tw/Internet_WebBook/chap2/2-4%20Ethernet%20Switch%20%E7%B6%B2%E8%B7%AF.html)
>[switch - 連結2](https://www.tp-link.com/tw/blog/119/%E4%BA%A4%E6%8F%9B%E5%99%A8%E6%98%AF%E4%BB%80%E9%BA%BC-3%E7%A8%AE%E5%B8%B8%E8%A6%8B%E7%9A%84%E4%BA%A4%E6%8F%9B%E5%99%A8%E6%8E%A5%E6%B3%95-%E6%87%89%E7%94%A8%E5%A0%B4%E6%99%AF%E5%8F%8A%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%B4%B9/)

### 防火牆
- 監控傳入和傳出網路流量的網路資安裝置
	- 利用系統所建立的安全性規則，有效的控制對內與對外流量
	- 用來隔離兩個安全信任度不同的網路 
	- 可以是軟體或硬體，
	
![](https://i.imgur.com/ZLWlBbQ.png =50%x)

#### 防火牆可以做甚麼
![](https://i.imgur.com/ZiDICdJ.png)
1. .形成內部網路與網際網路的咽喉點(Choke Point)，落實安全性政策
2. 有效的控管非必要或有安全性疑慮的封包
3. 記錄及監控內部與網際網路活動
4. 偵測與避免 非經授權者 存取組織單位網路資源
5. 避免耗費大量公開位址
6. 避免內部網路資訊直接暴露在外

>**參考網址**
>[防火牆](http://itcproject1.npust.edu.tw/ISMS/Lecture/%E8%B3%87%E5%AE%89%E6%8A%80%E8%A1%93/%E9%98%B2%E7%81%AB%E7%89%86%E5%8E%9F%E7%90%86%E6%9E%B6%E6%A7%8B%E5%92%8C%E7%A8%AE%E9%A1%9E%E4%BB%8B%E7%B4%B9.pdf)

### cloud computing 雲端運算
只要使用者能透過網路，由用戶端登入遠端伺服器進行操作，就可以稱為雲端運算
- 通過網路(雲端)向使用者或公司提供運算資源。
	- 運算資源: 伺服器、儲存、資料庫、網路、軟體、分析、人工智慧等
- 雲端運算通常基於虛擬化技術快速部署資源或獲得服務。
#### 不同類型的 cloud computing 
- public clouds 公有雲
	- 銷售雲端服務的廠商建立，提供給大眾使用，並依照使用量計費
	- 例如: AWS、Microsoft Azure 或 Google Cloud
- private clouds 私有雲
	- 由單一組織建立，只供該組織所使用
- hybrid clouds 混合雲
	- 結合兩種以上的雲端運算架構，透過標準或私有技術而讓資料與應用程式擁有可攜性
#### 3種雲端運算服務型式
1. SaaS（Software as a Service，軟體即服務）

2. PaaS（Platform as a Service，平臺即服務）
	
3. IaaS（Infrastructure as a Service，基礎設施即服務）

> **參考網址**
> [**雲端運算 - 連結1**](https://www.ithome.com.tw/article/93006)
> [**雲端運算 - 連結2**](https://www.gigabyte.com/tw/Glossary/cloud-computing)

## 計算機
- `\r\n`: windows的換行符號
- `\n`: 換行
- `\t`: 水平方向的Tab
### Find and Replace control
- `ctrl`+`h`: 打開 `Find and Replace control` 的功能
- 上面: 哪些字要被換
- 下面: 要被換成甚麼字
- `alt`+`r`: 取代下一個
- `alt`+`a`: 全部取代
- `alt`+`c`: 大小寫需要相符
- `alt`+`w`: 全字拼寫需要相符
- `double.TryParse(s, out result)`
這個方法用來檢視字串 s 是不是能夠轉成一個 double 型態的數字，如果能轉換成功則函式返回值為true，且用out result來儲存這個轉換後的 double,如果不能轉換則 false, resulr 保持原來的值不變.

# 11/01
- 編譯器: 把人看得懂的程式語言轉換成 CPU 看得懂的低階語言(exe檔)
	- 直譯器: 另一種編譯器，把人看得懂的程式碼直接一行一行編譯成低階語言，如果有錯就停在錯的地方。
- `ctrl`+`Q` is a great way to rapidly find IDE features and code in one place.
- `Go To Definition`: 可以跳回你當初是怎麼、在哪宣告的
- `ctrl`+`r`+`r`: 重新命名參數

## 回家作業
[Welcome to the Visual Studio IDE](https://docs.microsoft.com/en-us/visualstudio/get-started/visual-studio-ide?view=vs-2019)


# 11/08
`MainPage.xaml` 定義UI畫面
`Clicked` event，event 定義在`MainPage.xaml.cs` 

[grid](https://www.c-sharpcorner.com/article/how-to-create-a-simple-calculator-using-grid-layout-in-xamarin-forms2/)

# 11/15
`xaml`是UI元件檔
`cs` 是UI元件產生的相對應函數

前端都會觸發UI元件函數，要去確認你按的是哪個按鈕。
## Button
- `ClassId="<index>"` 可以為 button 編號
```xml=
<Button Text="Click me!" ClassId="0" Clicked="Handle_Clicked" />
```
>cs 檔
```cs=
void Handle_Clicked(object sender, System.EventArgs e)
        {
            count++;
            Button aaa = ((Button)sender);
            var classId = aaa.ClassId;
            ((Button)sender).Text = $"You clicked Button {classId} {count} times.";
        }
```
## Xamarin.Forms
> 這個 APP 使你能夠輸入 note 並將其存到記憶體裡
![](https://i.imgur.com/1OvB75c.png =70%x)
### NotesPage.xaml
定義使用者的畫面，外觀會長怎樣
- `Editor` 輸入文字
```xml=
 <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
```
- `Button` 儲存/刪除按鈕
```xml=
<Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
```


# 11/22
:::danger
**抽問** 
.xaml
.cs
classId
sender
casting
button 的 event
property
function
:::

:::spoiler **Button - 參考網址**
[xmal介紹](https://docs.microsoft.com/zh-tw/windows/uwp/xaml-platform/xaml-overview)
[`.xaml` 與 `.xaml.cs` 的關係](https://www.itread01.com/content/1547614639.html)
[Xamarin.Forms 按鈕](https://docs.microsoft.com/zh-tw/xamarin/xamarin-forms/user-interface/button)
[Button 類別](https://docs.microsoft.com/zh-tw/dotnet/api/xamarin.forms.button?view=xamarin-forms)
:::

- .xaml
	- UI 元素檔
	- 大部分用來定義頁面的視覺內容
		- 類似 HTML
	- `MainPage.xaml` 定義使用者介面 (UI)
	- 官方說法: 宣告物件的語言，為我們建立物件提供便捷的一種方式
	> 前端都會觸發UI元件函數，要去確認你按的是哪個按鈕。
- .xaml.cs
	- UI 元素產生的相對應 function 
	- 程式碼隱藏檔案
	- 定義你在 `.xmal`檔中的event，這些事件處理程式的地方
		- 例如: Button 的 Click 事件
	- event 定義在 `MainPage.xaml.cs`
- classId
	- 可以在處理程式的時候使用 `classId` 進行索引，查目前的 `index` 是甚麼
- casting: 把 object 的型態換成 button
	- 原本: `void Handle_Clicked(object sender, System.EventArgs e)`
	- 例如: `Button aaa = ((Button)sender);`
- button 的 event
	- `Pressed`: 按著按鈕時發生
	- `Release`: 放開按鈕時發生
		> 已 Release 的事件一律會在按下事件之前發生
	- `Clicked`: 按一下 Button 時
		- `Clicked` 也會同時引發 `Released`
		> 當按鈕具有焦點時，使用者可以使用協助工具或鍵盤控制項來引發按一下的事件
:::success
點 `Button` 時會觸發`Clicked`, `Release`, `Pressed` 事件， 這些事件會以 `object` 型態傳至 `MainPage.xaml.cs`
:::
- sender
	- `void Handle_Clicked(object sender, System.EventArgs e)`
	- 傳進來的事件型態為 `object`，然後這個 `object` 叫 `sender` 
- property
	- Text="Press me!"
    - Image="icon.png"
    - BackgroundColor="White"
    - BorderRadius="10"
    - BorderWidth="2"
    - BorderColor="Black"
    - HorizontalOptions="Center"
    - `classId` 區別多個 Button 共用相同事件的 object
    	> 分辨是哪個 button 傳送的 object (事件)
- function
	- 在 `MainPage.xaml.cs` 定義 `MainPage.xaml` UI 元素產生的相對應 **function**，讓 UI 元素產生相對應的動作


### 計算機
:::spoiler **計算機 - 參考連結**
- [Basic Calculator - 範例連結  ](https://github.com/xamarin/mobile-samples/tree/main/LivePlayer/BasicCalculator)
- [Xamarin.Forms - Basic Calculator](https://docs.microsoft.com/en-us/samples/xamarin/mobile-samples/liveplayer-basiccalculator/)
- [Xamarin.Forms 教學系列文（六.壹）Button](https://www.loganedge.tw/2017/02/xamarinforms-button.html)
- [How can I change the text of a label in a button event?](https://stackoverflow.com/questions/56329767/how-can-i-change-the-text-of-a-label-in-a-button-event)
:::
#### MainPage.xaml
```csharp=
<?xml version="1.0" encoding="UTF-8"?>
```
- `version` 指定 XML 版本，目前[有兩個XML版本](https://en.wikipedia.org/wiki/XML#Versions)
	- encoding: 表示此文件是使用 `UTF-8 umicode ` 編碼

```csharp=
<ContentPage x:Class="Calculator.MainPage"
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:local="clr-namespace:Calculator"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
```
- XAML Namespaces(命名空間) in Xamarin.Forms
- XAML 檔案的根項目中一律會有**兩個** XAML 命名空間宣告 
	- 第一個會定義預設命名空間: `xmlns="http://xamarin.com/schemas/2014/forms"`
	- 第二個命名空間宣告會使用 `x` 前置詞: `xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"`
	- `xmlns:local="clr-namespace:Calculator"`
		-  local 是 XML namespace，而 `Calculator` 是 `.NET code` 的 nameapace
		> 有了這個定義，你就可以在 XML 中引用這個 namespace 中的 classes
		> 例如: `BackgroundColor="{x:Static local:SharedResources.OpButtonBkColor}"`
		> [**xmlns:local**](https://stackoverflow.com/questions/14929141/do-i-need-two-xmlnslocal-clr-namespace)
```csharp=
<ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <OnPlatform.iOS>0,20,0,0</OnPlatform.iOS>
        </OnPlatform>
    </ContentPage.Padding>
```
- `<ContentPage.Padding>` 屬性定義其**上下左右**的內縮值
	- 以上範例是 `Thinckness` 類型的值
	- 範例針對了 `OnPlatform.iOS` 這個平台定義
		- 有分這三種平台: `OnPlatform.iOS` / `OnPlatform.Android` / `OnPlatform.WinPhone`


- `this.resultText.Text = number.ToString("N0");`
![](https://i.imgur.com/uABkIkj.png =70%x)

# 12/06 計算機
- `Device.StartTimer(時間區間, 不記名函數)`
```csharp=
// 時間區間, 不記名函數
Device.StartTimer( _timespan,
               () => {
                   if (cts.IsCancellationRequested)
                           return false;

                   // 倒數
                   _callback.Invoke();

                   return true; // or 注入的 Action 若不需要週期性則設為 false
                });
```

- 老人送餐系統
	- 叢集式資料庫
		- 可能有4台資料庫，如果資料寫進第一個資料庫，資料也會自動複製到其他3台資料庫，所以其中一台資料庫掛了，也還是可以繼續執行

:::danger
**回家作業**
播放聲音
手機抓GPS資料(經緯度)
:::

# 12/20
:::warning
**回家作業**
震動 通電、斷電
氣壓變化
> 三軸加速訊息電池狀態 GPS * 網路連線 請問可以發展出什麼應用？
> 說明清楚這個應用的使用情境。
> 創意引導：可以想想看，什麼情況下會震動伴隨著斷電？
> 什麼情況下會震動伴隨著充電？
> 什麼情況下會往上加速伴隨著斷電？
> 什麼情況下會往下加速伴隨著斷電?
:::

# 01/03
:::danger
**期末作業檢查**
- [x] 計算機
- [x] 倒數計時器+音效
- [x] GPS追蹤
- [x] 取得三軸加速與陀螺儀
- [ ] 啟動相機與掃描QRcode [**加分題**]
- [ ] 自動15秒拍一張照片 [**加分題**]
- [ ] 連接MQTT伺服器 [**加分題**]
:::






















