軟體開發(軟件開發)

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

室內設計、裝潢、窗簾報價估算軟體

網智數位主要提供套裝及客製化的軟體系統解決方案,針對室內設計師、木工、裝潢業產業,量身訂做客製化的軟體,達成客製化、智慧化及網路化的商用軟體。

商用軟體-客製化設計

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

IOT 物聯網-系統開發

根據客戶實際狀況,結合雲端與載具進行客製化物聯網IOT導入與軟體開發

雲端VPS虛擬主機租用

我們的雲端VPS虛擬主機是採用雲端(虛擬化)技術所開發之全新雲端伺服器服務,可以選擇多種作業系統(Windows、Linux等),客戶可載入自訂的應用環境,執行自己所要提供的網路服務,我們的雲端服務可為您的網站提供最完美的解決方案。

ERP軟體客製化導入

ERP軟體客製化導入,室內設計、營造業、裝潢、木作工程、系統櫃工程、會計系統,全面提升公司管理營運效率。

搜尋引擎最佳化SEO

搜尋引擎最佳化(SEO)不僅能提高網站在搜尋結果的排名,更能帶來大量對我們產品或服務真正有需求的訪客。SEO 最棒的特質之一就是不像廣告一樣亂槍打鳥而導致用戶的反感,反而更能提升點閱率跟成交率喔。

服務宗旨

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

我們的成立宗旨就是要以最猛的IT技術讓這個世界更Smart,在我們貫徹我們裡想的同時,我們希望可以把我們所開發的系統帶給台灣的中小企業,除了要推薦好的東西之外,我們也希望做點改變,所以我們的第一目標就是要使用最好用的系統再加上您寶貴的創意,不僅僅可以節省你大量的荷包,還可以有一個像樣的網站。我們可以幫你做的有

企業管理
  • 策略管理
  • 目標管理
  • 行銷管理
  • 財會管理
  • ERP導入
  • 企業流程自訂
資訊管理
  • 網站架設
  • 虛擬化/雲端架設
  • 主機代管
  • 私有雲建制與導入
軟體開發
  • UML設計
  • 版本控管
  • 企業軟體開發
  • APP開發
  • 網頁設計
資訊安全
  • 網頁弱點掃描
  • 主機弱點掃描
  • 木馬檢測
  • 資安鑑識
  • 設計網路架構
  • 資安監控
行銷
  • 關鍵字SEO
  • 社群網路行銷
  • 部落格行銷
  • FaceBook 粉絲團
其他
  • 協助企業申請Google Email
好玩工具開發

講出你的創意吧!沒有甚麼是資訊辦不到的

顯示具有 教學 標籤的文章。 顯示所有文章
顯示具有 教學 標籤的文章。 顯示所有文章

2017年7月6日 星期四

透過 Delegate 委託支援的方法,撰寫非同步任務(軟體開發、客製化軟體、系統設計)

      此篇文章主要是延續之前的文章 【C#多工作業與平行處理技術講解】,講解與實作如何在利用強大的 透過 Delegate 委託支援的方法,撰寫非同步任務,這裡一樣我會透過簡單程式碼進行實作教學。

       在.Net 平台的委派類型(Delegate)自身就可以很容易地使用非同步作業,因為只要是委派(Delegate)類型都一點有 BeginInvoke 以及對應的 EndInvoke() 這 2 個非同步操作方法,所以我們就可以非常容易地透過 委派實體 直接 使用非同步任務。
      在這邊我一樣使用 Windows Form 來做示範(因為比較單純可以講解程式技巧,所以不要問我為何不用 ASP.NET MVC),整個實作範例畫面為如下圖:


繪圖



步驟1 :
在 Visual Studio 新增一個 Windows Form 專案,我們準備拖拉幾個控制箱來達成 主要結果畫面,分別有
Label 控制箱 (Text = 基數)、Button 按鈕控制箱(Text = 進行計算作業 , Name = btnDelegateInvoke)、ProgressBar控制箱(用於顯示非同步作業的進度)、TextBox 文字方塊(Name = txtResult , 用於顯示執行計算結果)。


步驟 2:
在 Button 控制箱 (name = btnDelegateInvoke)的 Click 事件,撰寫主要核心代碼:
private void btnDelegateInvoke_Click(object sender, EventArgs e)
{
    int baseNum = default(int);
    if (!int.TryParse(txtBaseNum.Text, out baseNum))
    {
        MessageBox.Show("請輸入一個正整數哦!");
        return;
    }


    txtResult.Clear();

    // 顯示進度表的狀態
    IProgress<int> progressReporter = new Progress<int>((p) =>
    {
        this.progressBar1.Value = p;
    });


    //  計算階乘的委派實體
    Func<int, BigInteger> ComputeNumValueAction = (bsNum) =>
        {
            BigInteger bi = new BigInteger(1);
            for (int i = 1; i <= bsNum; i++)
            {
                bi *= i; //相乘
                // 用於計算目前進度
                double ps = Convert.ToDouble(i) / Convert.ToDouble(bsNum) * 100d;
                progressReporter.Report(Convert.ToInt32(ps));
            }
            return bi;
        };


    // 開始呼叫使用
    btnDelegateInvoke.Enabled = false;
    ComputeNumValueAction.BeginInvoke(baseNum, new AsyncCallback(FinishedCallback), ComputeNumValueAction);


}



2017-07-06_01-01-56



程式碼邏輯講解:
1.在 Progress<T> 是實現 IProgress<T> 介面,所以這裡可以透過它支援的 Report()方法來報告目前非同步的操作進度數據,該對象在進度更新後,是允許使用者直接繼續操作主畫面的,例如拖拉。

2.Func<int,BigInteger> 委派,代表自身帶有一個 int 類型的參數,而返回的值類型為 BigInteger,這邊我特別用 BigInteger 類型,因為在計算階乘的計算結果,可能數字會非常大,會超出 long 類型的最大值。

3.在開始進行使用 委派(Delegate)支援的BeginInvoke方法時,必須再使用一個 AsyncCallback 委派,該委派主要是用於綁定一個方法,在檔非同步任務完成時,可以呼叫的回調方法,並且再回調方法中,再次調用 Delegate.EndInvoke方法來捕捉計算結果。

我們直接看 AsyncCallback 綁定的 FinishedCallback 方法。

private void FinishedCallback(IAsyncResult ar)
{
     // 取出委派變數
    Func<int, BigInteger> action = (Func<int, BigInteger>)ar.AsyncState;
    // 求得計算結果
    BigInteger res = action.EndInvoke(ar);
    this.BeginInvoke(new Action(() =>
     {
        btnDelegateInvoke.Enabled = true;
        // 顯示計算結果
        txtResult.Text = string.Format("計算結果:{0}", res);
     }));
}


ddd



上述程式碼撰寫完畢後,就可以編譯執行,在 基數欄位輸入一個正整數,就可以進行非同步的計算階乘作業。



參考文章
C#多工作業與平行處理技術講解
1.透過 Thread 類別撰寫多執行緒多工作業。
2.透過 Delegate 委託支援的方法,撰寫非同步任務。
3-1.透過 Parallel 類別操控多任務平行作業(一)。
3-2. 透過 Parallel 類別操控多任務平行作業(二)。
4.使用 Task 自行控制非同步任務作業。 
5.在非同步作業時,如何取消非同步任務。 
6.多執行緒多任務存取相同變數,但卻各自隔離保留各自任務的值。
7.非同步存取變數的問題。
8.非同步資源鎖定解決方式。






網智數位-軟體開發(軟件開發)

針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
公司電話:02-55991310
公司地址(業務營運處):台北市中山區錦州街 25 號 5 樓
skype: netqna
line:netqna
微信:netqna
黃先生 Allen
     

2017年7月3日 星期一

在 .Net 透過 Thread 類別撰寫多執行緒多工作業【軟體開發、軟件開發、客製化軟體】

     此篇文章主要是延續上一篇 【C#多工作業與平行處理技術講解】,講解與實作如何在利用強大的 Thread 類別,使用 C# 來撰寫多執行緒多工作業功能。
     在 .Net 平台中 Thread 類別位於 System.Threading 命名空間中,此類別封裝了多執行緒許多方法與功能,可以讓我們快速建立新的執行緒,進而在新的執行緒執行所需要的程式碼邏輯,在我們建立一個 Thread 的實例(Instance)時,需要透過一個委派(Delegate)與新建立的 Thread 實例和一個現有的方法(Method)進行綁定,當執行緒(Thread)啟動後,就會立即執行這個綁定的方法。
     傳遞給 Thead 的建構子的委派(Delegate)有 2 種,一種是不帶任何參數的委派方法;第二種是可以帶一個 object 參數的委派方法。在我們實體化 Thread 物件後,就可以開始調用 Thread.Start()方法,來啟動執行緒(也會開始執行綁定的方法),而在執行過程隨時可以調用 Thread.Abort()方法,來強制終止執行緒的執行,不過這個 Abort()方法會引發一個 ThreadStateException 例外錯誤。

     現在我就帶一個實際範例來是示範如何 用 C# 使用 Thread 類別,建立一個執行緒作業,這邊為了簡單講解觀念,我使用最簡單的 Windows Form 專案來講解。

Step 1. 透過 Visual Studio 2017(舊版本 2015/2013/2012都行啦)新增一個 Windows Form 專案
2017-07-02_23-33-29


Step 2.在 Step 1建立的 Windos  Form 專案後,會產生一個 Form1的界面表單,打開此表單,然後從工具箱拖拉一個 ProgressBar 控制箱到 Form1 畫面,並排好版面。
step2

          Step 3. 從工具箱在拖拉一個 Button 到 Form1 的畫面,並將 name 屬性命名為 btnTread , Text 修改為【Thread 執行緒 啟動】

step3



Step 4. 在 Form1.cs 後置程式碼裡,我撰寫了一個 DoWok() 方法,裡面撰寫了一下邏輯,程式碼如下:
/// <summary>
/// 此方法將會透過委派(Delegate)指定給新的執行緒(Thread)
/// </summary>
private void DoWork()
{
  int p = 0;

  while (p < 100)
  {
    p++;
    Thread.Sleep(100);

    //更新進度表
    this.BeginInvoke(new Action(() =>
    {
       this.progressBar1.Value = p;
    }));
  }

  this.BeginInvoke(new Action(delegate ()
  {
   //再次啟用按鈕狀態
   btnTreadStart.Enabled = true;
   //重設定進度表為 0 
   progressBar1.Value = 0;
   //顯示執行緒已完成
   MessageBox.Show("執行緒已完成。", "執行緒已完成", MessageBoxButtons.OK, MessageBoxIcon.Information);
  }));

}
 

step4

Step 5. 在 Form1 的 Button 按鈕,雙擊滑鼠 (button1_Click),在button1_Click 事件我撰寫了 核心的 操控 Thread 程式碼
private void button1_Click(object sender, EventArgs e)
{

  //宣告一個 Thread 類別,並將在傳入 Step 4 所宣告的 DoWord 方法
  //待會 Thead 執行時,就會立即執行 DoWord 方法
  Thread newThread = new Thread(DoWork);

  //停用按鈕
  btnTreadStart.Enabled = false;

  //啟用新的執行緒
  newThread.Start();

}

step5


Step 6. Compile 編譯執行(執行F5),就可以看到結果
step 5-1


step 5-2



程式碼補充解釋:
因為基於執行緒的安全考量和包含使用者界面完整性,一般而言,系統是限制跨執行緒去更新修改使用者界面,所以在 Step 4 的 DoWokd方法,我透過呼叫 this.BeginInvoke() 方法傳遞一個 委派,使得可以在使用者界面的主執行緒上面進行更新使用者界面的控制箱(ProgressBar1),所以可以看到進度表一直不斷更新。


透過這一篇文章希望可以說明如何利用 Thread 類別來操作多執行作業,後續我還會抽出時間講解不同的非同步多工作業方式,分成不同的文章來一一描述。



參考文章
C#多工作業與平行處理技術講解
1.透過 Thread 類別撰寫多執行緒多工作業。
2.透過 Delegate 委託支援的方法,撰寫非同步任務。
3-1.透過 Parallel 類別操控多任務平行作業(一)。
3-2. 透過 Parallel 類別操控多任務平行作業(二)。
4.使用 Task 自行控制非同步任務作業。 
5.在非同步作業時,如何取消非同步任務。 
6.多執行緒多任務存取相同變數,但卻各自隔離保留各自任務的值。
7.非同步存取變數的問題。
8.非同步資源鎖定解決方式。



網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
公司電話:02-55991310
公司地址(業務營運處):台北市中山區錦州街 25 號 5 樓
skype: netqna
line:netqna
微信:netqna
黃先生 Allen


2017年5月26日 星期五

C#多工作業與平行處理技術講解

    在現行 CPU 都是多核心的、甚至多顆 CPU 硬體條件下,在我們開發軟體撰寫程式時,就可以好好利用多工作業、平行處理、非同步模型了,所以這次我想好好介紹一下,如何在 .Net C# 平台環境下,撰寫多執行緒平行作業與非同步 程式撰寫技巧與概念。




   
     以往軟體操作使用者,在執行比較耗時的作業時,例如需要大量運算、影像處理等,系統主要使用畫面很容易出現"卡主"、"頓頓"、"當機的感覺",這個很容易造成使用者的抱怨,認為應用程式已經當機,甚至沒有耐心地到【工作管理員】來強制將應用程式關閉,但事實上這會導致造成兩個影響層面,一是,原本應用程式要執行的功能操作,沒有徹底執行完成;二是,如果應用程式一旦被強制關閉時,有可能造成資料的遺失,例如在執行會計系統轉帳功能時,如果只轉部分資料成功、或者盤點作業更新大量庫存成本與數量時,被強制關閉,這時候的資料有可能造成遺失(當然我在開發時這類型,我會用交易處理(Transaction)進行Commit與Rollback,這是另外議題,有機會再來談),所以如果我們可以在需要執行耗時的作業時,就必須考慮使用非同步作業(多工作業、平行處理)技術來撰寫程式,當將比較耗時的作業任務放到另外一個執行緒(Thread),這樣在執行複雜耗時作業時,不會影響到主要的使用者界面(因為使用者界面是另外一個獨立的執行緒),所以使用者可以繼續點選界面、用滑鼠拖移視窗表單都可以,這樣就不會出現卡卡的、要當機的假象。

    原理解釋,當一個使用者執行一個執行檔程式(.exe)時,程序指令就會自動加載到記憶體中去執行,這個就是所謂的應用程式的實例(Instance),而在操作系統中被稱為"Process 行程(大陸用語為 進程 )",Process 與 Process 互相獨立隔離,A Process 不會影響到 B Process 的執行,而每個 Process 又可以包含多個 Thread(執行緒,大陸用語為 線程)。一個 Process 都至少包含一個 Thread (執行緒/線程),主要的 Thread 我們又稱為 Main Thread (主執行緒),當主執行緒被結束終止時,Process(行程/進程)也會跟隨之被關閉,整個應用程式就會被關閉結束。


    經過我上面的解釋,希望讀者可以比較清楚 非同步作業(多工、平行處理)的好處,但是說實在我專案經歷也不淺,跟不同程式開發人員合作也非常頻繁,真正可以把多工平行處理寫得好的真的也算少數,因為本身控制非同步的邏輯思考以及資源鎖定釋放就必須深入的進行了解各種程式技術,不過身為 .Net 開發陣營的我,已經覺得非常幸福,因為 .Net 框架已經把非同步、多工作業封裝成相關類別,程式開發人員不必花太多時間去管理執行緒的底層模型,我們只有好好地學會如何使用這些類別,就可以把多執行緒多工作業寫得很好。


那麼,我想分幾篇文章來講解如何使用 .Net C# 支援的撰寫技巧來介紹,非同步作業的實作方式



以上我會另外花時間各自寫文章來敘述與實作......





網智數位-軟體開發(軟件開發) 
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
公司電話:02-55991310
公司地址(業務營運處):台北市中山區錦州街 25 號 5 樓
skype: netqna
line:netqna
微信:netqna 
黃先生 Allen



    
這封郵件來自 Evernote。Evernote 是您專屬的工作空間,免費下載 Evernote

2016年12月27日 星期二

長榮航空 - 指定培訓課程廠商(軟體開發、教育訓練、程式設計)


      很榮幸,12月正式被長榮航空-資訊單位 委託安排一系列程式語言教育訓練課程,進行實務上的程式開發分享、技術課堂講解。

images




網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
公司電話:02-55991310
skype: netqna
line:netqna
微信:netqna
黃先生 Allen

2016年12月4日 星期日

微軟- 物聯網 Internet of Things , 成功企業案例的影片(軟體開發、客製化軟體、客製化設計)

微軟在雲端、物聯網、大數據分析在企業運用方面成功案例非常多,今天看到一個微軟的好的企業運用成功案例分享影片,真的講解的非常清楚,各位可以看一看


影片介紹
https://channel9.msdn.com/Series/Rolls-Royce/Solution 



網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen

2016年11月11日 星期五

繪圖程式-折線圖、區域圖 實作一(軟體設計、軟體開發、程式開發)

        這半年來一直不斷被客戶要求開發相關繪圖功能的程式,礙於現在很多程式開發人員,已經越來越多人只會資料庫的CRUD,對於繪圖程式撰寫掌握度不是很好,甚至基本觀念也沒有,所以大多數程式開發人員都是去找相關的Chart套件,也很少有人示範在 Windows 10 APP 如何開發相關繪圖程式功能(很抱歉目前Windows 10 似乎沒有提供相關繪圖控制箱可以直接使用,所以要真的自己寫繪圖功能),所以我這篇就來教導如何在 Windows Universal APP 開發一個 折線圖功能,折線圖在軟體應用上面常用於股票分析、統計分析、銷售分析、趨勢走向等圖表展現。

(折線圖)
r-data-exploration-and-visualization-line-plot-1


(區域圖)
886d1a27-3744-417b-a3e5-e9b9878e5760



折線圖原理其實就是在一個二維的空間(平面)中,利用多個 【X,Y】坐標點透過直線連結起來,所形成的趨勢圖形,通常 X 軸代表一個某種類別例如月份、年份、型別等,而Y軸代表某類別的實際值,例如業績、銷售量、收入、人數等。在折線圖中,X軸都呈現等量(距)的增加。
現在我們知道了簡單的折線圖原理後,在Windows 10 (UWP)平台開發上,是必須使用 Polyline 繪圖技術來進行開發,可以在界面直接選告 XAML 語法,例如底下Code:

<Polyline Stroke=“Blue” StrokThickness="3”Points=”5,10 20,30 25,40 100,120”/>

其中最重要的來自于 Points 屬性 ,5,10 =》代表一個點 [5,10] =>X=5,Y=10
但通常在開發繪圖功能時,都是動態繪圖產生,所以在這邊我也示範如何完全在背後使用程式開發一個折線圖功能,我在界面上我簡單的設計2個按鈕,分別作為繪製 折線圖跟區域圖,前端界面如下

image


//XAML Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>
        <StackPanel  Grid.Row="0" Orientation="Horizontal">
            <Button Content="折線圖繪製" Click="DrawChart_1" Margin="12" Background="AliceBlue"></Button>
            <Button Content="區域圖繪製" Click="DrawChart_2" Margin="12" Background="Wheat"></Button>
        </StackPanel>
        <Grid x:Name="gdChartCanvas" Grid.Row="1" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center">

        </Grid>
</Grid>



在後端的程式碼,分別設計了 GetAllPoints()方法、與對應的 DrawChart_1 、DrawChart_2 事件方法

       /// <summary>
       /// 取得所有折線圖、區域圖的 Y值清單
       /// </summary>
       /// <param name="yValues">Y值清單</param>
       /// <param name="perWidth">X等距寬度</param>
       /// <param name="yStartValue">Y起始值</param>
       /// <returns></returns>
       private PointCollection GetAllPoints(List<double> yValues, double perWidth, double yStartValue)
       {
           PointCollection points = new PointCollection();
           double x = 0;

           foreach (double yVal in yValues)
           {
               double y;

               //判斷 Y 值是否小於 Y坐標起始值,因為畫布是從 100 開始
               if (yVal < yStartValue)
               {
                   y = 100;
               }
               else
               {
                   //可以套用自己的公式來設定Y值
                   //y = Math.Floor((500 - (yVal * 200) / 300));
                   y = yVal;
               }

               Point point = new Point(x, y);
               points.Add(point);
               x += perWidth;
           }

           return points;
       }


      /// <summary>
      /// 繪製折線圖
      /// </summary>
      /// <param name="sender"></param>
      /// <param name="e"></param>
      private void DrawChart_1(object sender, RoutedEventArgs e)
      {
          //清除畫布
          this.gdChartCanvas.Children.Clear();

          //Y值清單
          List<double> datas = new List<double> { 185, 130, 230, 140, 200, 60, 170, 150, 190, 150, 110, 220, 130, 190, 150 };

          //取得套用公式的Y轉變值
          PointCollection pointCollection = GetAllPoints(datas, 45, 100);

          Polyline polyline = new Polyline { Points = pointCollection, Stroke = new SolidColorBrush(Colors.Red) };
          this.gdChartCanvas.Children.Add(polyline);
      }




上述程式撰寫完畢後,就可以直接點選【折線圖繪製】按鈕,畫面馬上呈現折線圖,如下執行結果

image
image







網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen






2016年11月6日 星期日

Windows 10 UWP 存取 JSON 格式 - 程式實作講解(軟體開發、客製化軟體、程式設計、程式開發)

      在我們開發各種專案時,一定多少都會需要存取各種跨平台傳輸的資料,目前最普遍的傳輸格式為 XML 與 JSON , 而今天我想要深入講解在 Windows 10 Universal APP (UWP)平台下,如何讀取跟儲存 JSON 格式資料。

      images


    JSON 的全名為 Java Script Object Notation , 它是一種輕量級的資料傳輸交換格式語言,特點是容易閱讀、依字串為基礎,格式都是經過壓縮地所以在網路傳輸過程,佔用的頻寬極小,因此被廣泛地應用在跨平台、跨程式語言。
JSON 的格式在宣告一個類別/物件,是用 大括號 { };宣告一個陣列使用 中括號 [ ] ;而在大括號裡面,是使用 名稱 :值 ,下圖是官方的範例圖解釋
1356331778-696014507


例如 我在此 有個 員工類別 ,分別屬性有員工編號、姓名、職位、學歷,則對應的 JSON 格式為 
(JSON Code)
var empJsonObj = { “員工編號”:“emp001”, “姓名”: “台灣李奧納多,”“職位”: “技術總監”,"年齡”:33 } ;

接下來,就是要開始講解如何在 Windows 10 Universal APP (UWP)平台,存取 JSON 格式的支援與程式開發技巧。
在 Windows 10 UWP 平台,主要有 2 種技巧來存取 JSON 格式,第一種是使用 DataContractJsonSerializer (MSDN 介紹),透過 DataContractJsonSerializer 來對 JSON 數據進行序列化與反系列化動作 ;而第二種是使用 JsonObject 類別來自行定義 JSON 物件。這兩種方式我都會在這篇完整介紹。


1.透過 DataContractJsonSerializer 對 JSON 資料進行序列化與反序列化
      使用 DataContractJsonSerializer 類別來對 JSON 數據進行序列化與反序列化,這是最簡單的方式,所謂序列化過程就是把 實體類別物件 轉成 JSON 格式化的字串,反之 反序列化 過程,就是把 JSON 物件字串({ 名稱:值,名稱1:值1….}) 轉換成對應的 .NET 類別。

下圖,是實際程式範例
image


image



2.透過使用 JsonObject 類別來自行定義 JSON 物件
這個就讓我直接用實際程式碼來講解….
首先我先新增2個類別 ,分別為 員工類別 (Employee)和研發群組類別(RDGroup),在此我假設一個員工可以同時歸屬多於于一個研發群組以上。

底下為 員工類別程式碼:

   /// <summary>
   /// 員工類別
   /// </summary>
   public class Employee
   {
       private const string idKey = "id";
       private const string nameKey = "name";
       private const string rdKey = "rd";
       private const string ageKey = "age";
       private const string enableKey = "enable";

       public Employee()
       {
           Id = "";
           Name = "";
           RDGroups = new ObservableCollection<RDGroup>();
       }

       public Employee(string jsonString) : this()
       {
           JsonObject jsonObject = JsonObject.Parse(jsonString);
           Id = jsonObject.GetNamedString(idKey, "");
           Name = jsonObject.GetNamedString(nameKey, "");
           Age = jsonObject.GetNamedNumber(ageKey, 0);
           Enable = jsonObject.GetNamedBoolean(enableKey, false);

           foreach (IJsonValue jsonValue in jsonObject.GetNamedArray(rdKey, new JsonArray()))
           {
               if (jsonValue.ValueType == JsonValueType.Object)
               {
                   RDGroups.Add(new RDGroup(jsonValue.GetObject()));
               }
           }
       }
       public string Stringify()
       {
           JsonArray jsonArray = new JsonArray();
           foreach (RDGroup group in RDGroups)
           {
               jsonArray.Add(group.ToJsonObject());
           }

           JsonObject jsonObject = new JsonObject();
           jsonObject[idKey] = JsonValue.CreateStringValue(Id);
           jsonObject[nameKey] = JsonValue.CreateStringValue(Name);
           jsonObject[rdKey] = jsonArray;
           jsonObject[ageKey] = JsonValue.CreateNumberValue(Age);
           jsonObject[enableKey] = JsonValue.CreateBooleanValue(Enable);

           return jsonObject.Stringify();
       }

       public string Id { get; set; }
       public string Name { get; set; }
       public ObservableCollection<RDGroup> RDGroups { get; set; }
       public double Age { get; set; }
       public bool Enable { get; set; }

   }

底下為 研發群組類別(RDGroup)程式碼:

  /// <summary>
  /// 研發群組 類別,一個員工可以歸屬多個研發群組
  /// </summary>
  public class RDGroup
  {
      private const string idKey = "id";
      private const string rdKey = "rd";
      private const string nameKey = "name";

      public RDGroup()
      {
          Id = "";
          Name = "";
      }

      public RDGroup(JsonObject jsonObject)
      {
          JsonObject schoolObject = jsonObject.GetNamedObject(rdKey, null);
          if (schoolObject != null)
          {
              Id = schoolObject.GetNamedString(idKey, "");
              Name = schoolObject.GetNamedString(nameKey, "");
          }
      }

      public JsonObject ToJsonObject()
      {
          JsonObject schoolObject = new JsonObject();
          schoolObject.SetNamedValue(idKey, JsonValue.CreateStringValue(Id));
          schoolObject.SetNamedValue(nameKey, JsonValue.CreateStringValue(Name));

          JsonObject jsonObject = new JsonObject();
          jsonObject.SetNamedValue(rdKey, schoolObject);
          return jsonObject;
      }

      public string Id { get; set; }
      public string Name { get; set; }
  }



再來我設計一個前端UI界面,作為讀取與寫入 JSON 的案例實作

前端界面
image



在執行存檔時,我們將新增一個 Employee 類別,並透過 JsonObject 轉成(序列化)為 JSON 字串,儲存在設定檔。
image

而在【讀取資料】時,是透過 JsonObject 進行反序列化,將 Json String 轉回成 .Net 的 Employee 類別(Class)
image



程式執行結果畫面
存檔
image


讀取資料
image






網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen





2016年10月24日 星期一

Windows 10 的 UDP 與 TCP 網路通訊實作案例一(軟體開發、軟件開發、程式設計、程式開發)

        今年公司承包了許多大型專案,都是必須用到網路存取技術,例如 圖控軟體我們就必須透過 TCP 協定跟硬體設備溝通,來讀取上萬台工業風扇裝置的轉速、溫度等訊息;再來還有影像監控軟體也是大量用到TCP/UDP、Web API網路協定存取,因此在開發各種軟體時,很多機會勢必需要用到網路通訊的技術。

        而這篇教學技術文章,我特別是針對微軟的 Windows 10 平台上,也就是所謂的 Windows 10 通用應用開發(Universal APP,UAP),示範關鍵的程式技術,我想分為 2 篇文章分別介紹 UDP 與 TCP 存取技巧,而這篇文章就先針對 UDP協定來介紹,UDP協定是個無連接(不可靠)的協議,它只提供資料的不可靠傳遞,它一旦把應用程式發給網路層的資料傳送出去,就不保留資料備份(所以UDP有時候也被認為是不可靠的資料報協定),UDP在IP資料報的頭部僅僅加入了復用和資料校驗(欄位),但它相對于TCP 協定來說,資源耗用少、而且處理速度夠快,所以常被用在傳輸要求沒有那麼嚴格的條件下,例如:聊天訊息、網路視訊、語音傳遞。

在 WIndows 10 的 UAP/UWP 平台上,微軟透過一個 DatagramSocket 類別來封裝了所有有關 UDP 網路存取的相關功能。

我將示範 伺服器端(Server) 與 用戶端(Client) 的程式技巧

在 Server 端,主要步驟有

1.建立一個 DatagramSocket 實體物件。

2.建立一個對應的 MessageReceived 事件,它將用來接收 Client 發送的訊息。

3.使用 BindEndPointAsync 方法來綁定本機的位址(IP)、端口(Port),如果是需要本機的所有網路位址(有多張網卡、無線網路等)都可以監聽訊息,我們就改用 BindServiceNameAsync 方法,然後只要指定要擊結對應的Port即可。

而在 Client 端,主要是一樣建立一個 DatagramSocket 實體物件,在透過該 DatagramSocket 提供的 GetOutputSteamAsync() 方法,並在該方法傳入 Server端IP位址、Port即可。

在 XAML 界面我為了好示範,我將 Server 界面跟 Client 界面 放在一起,分別為2個頁籖,這是使用 <Pivot> 元素 (我在這邊不花時間解釋 XAML Code 知識,但開發 Windows 10 XAML 是必備的基本語法,一定要會而且很熟,我就特別喜歡 XAML Code)。

XAML 畫面如下圖

<Pivot>
           <PivotItem Header="Server 伺服器端">
               <Grid>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition />
                   </Grid.RowDefinitions>
                   <StackPanel>
                       <TextBlock Text="Server IP地址:" FontSize="20"/>
                       <TextBlock Name="tbIp" FontSize="36" IsTextSelectionEnabled="True"/>
                   </StackPanel>
                   <ListView Grid.Row="1" Margin="0,15,0,3" Name="lvMsg">
                       <ListView.Header>
                           <TextBlock Foreground="LightGreen" Text="已截取的Client端請求" FontSize="20"/>
                       </ListView.Header>
                       <ListView.ItemTemplate>
                           <DataTemplate>
                               <StackPanel Margin="6,20">
                                   <TextBlock FontSize="20" Foreground="Yellow">
                                       来自
                                       <Run Text="{Binding Path=FromIP}"/>
                                       的消息:
                                   </TextBlock>
                                   <TextBlock TextWrapping="Wrap" FontSize="24" Text="{Binding Path=Message}"/>
                               </StackPanel>
                           </DataTemplate>
                       </ListView.ItemTemplate>
                   </ListView>
               </Grid>
           </PivotItem>
           <PivotItem Header="Client 端">
               <StackPanel>
                   <TextBox Name="txtServer" Header="Server IP:"/>
                   <TextBox Name="txtMessage" Header="發送訊息內容:" TextWrapping="Wrap" Height="200"/>
                   <Button HorizontalAlignment="Center" Content="送出" Padding="20,0" Click="OnSend"/>
               </StackPanel>
           </PivotItem>
       </Pivot>

程式運行畫面如下圖

(Server 頁籖)

2016-10-23_23-25-03

(Cilent 頁籖)

2016-10-23_23-25-39

 

看完主要的界面宣告與結果,就開始來講解幾個主要核心程式碼

步驟 1.首先我宣告了 1 個常數 servicePort ,用於指定伺服器服務的端口Port.
    再宣告 2 個欄位(Fields), 作用於 Server UDP 與 Client UDP。

image

步驟 2.在 MainPage 建構子,宣告了載入實際時 綁定 Server 與 Client 端的 UDP Socket 。
   以及 Unload 時,釋放資源。

還有 我還綁定一個 Server 端要監聽 Client 端發送的訊息請求事件

image

步驟 3. Server 監聽事件 ,核心程式碼邏輯

相關程式碼,都附上註解

image

在上述 步驟 1 ~ 步驟 3 ,就完成 Server 端的主要監聽任務。

而 Client 端接下來的邏輯,就是在 Client 頁籖界面,輸入 Server 的 IP 位址、端口,以及要發送的內容,相關程式碼邏輯如下

OnSend() 是在 Client 頁籖界面,執行【送出】按鈕對應的動作方法

image

以上完成後,讓我們就可以來執行看看

在 Client 端頁籖 輸入訊息內容

image

在 Server 端監聽到的訊息如下

image

 

 

網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen

2016年10月12日 星期三

Windows APP 截取網頁內容轉存圖片檔(程式設計、程式開發、軟體開發)

今天早上在跟客戶開會時,客戶提到有個需求,就是客戶的員工需要常常瀏覽購物平台網頁商品、資訊,但必須及時截取畫面拍照,所以 Allen 我就開發一個小工具,可以讓使用者瀏覽網頁時,進行截取網頁畫面並轉成圖片檔。

(圖示1)


而這個程式我用目前最新的平台(Windows Universal Platform)開發,因為是用短短 1小時的時間進行程式撰寫,所以功能比較陽春,但可以當做教學跟小工具使用,所以我就拿出來分享。

       一開始在上方的 網址 輸入,你要瀏覽的網頁,例如 http://tw.yahoo.com , 然後在點選瀏覽,就會載入 Yahoo 的網頁,此時你可以按左邊(中間偏下一點)有個按鈕【截取畫面】,執行後就會截取現在瀏覽的網頁“畫面”,

(圖示 2)

02

(圖示 3)

03

如果想要把網頁快照轉成圖片,我也寫了一個小功能的按鈕【將畫面存成圖片】,就可以存成實際的圖片。

05

    這樣就可以把網頁畫面及時拍照存檔,這個是個小範例,但是這個技術在知名的電子商務平台,例如 PCHome、Yahoo、淘寶等,都有類似的機制,就是你在訂購商品那瞬間,程式會把當時的產品訂購頁面存成及時圖片,以防止未來買賣有發生爭議時,可以作為交易的依據。

同時,我也把安裝程式放在 DropBox,因為我開發的平台為 Windows Universal APP,所以安裝方式請打開 powershell 直接把 Add-AppDevPackage.ps1 檔案拖拉到powershell 畫面,再按 Enter 鍵即可。

螢幕快照 2016-10-12 上午3.04.26

ddd

aaaaa

螢幕快照 2016-10-12 上午3.21.26

程式下載點

https://www.dropbox.com/s/673eet6odd4gyyk/NetQna_1.0.5.0_Debug_Test.rar?dl=0

下一篇,我會講解核心程式碼技巧(待續)

 

網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen

2016年9月22日 星期四

系統分割 - 無法刪除 使用 diskpart 指令 (軟體開發、軟件開發、程式開發)

 今天 Allen 我在整理公司機房的機器設備,也把多年專案開發的系統要做備份,順道買了一個行動硬碟 4 T的容量,但在 MAC Pro 先進行格式化後,再插入回 Windows 作業系統環境後,使用磁碟管理發現該顆硬碟最前面出現200MB的EFI磁碟分割,而磁碟管理圖形界面無法進行刪除該多餘磁碟分割,雖然才 200 M,但就覺得浪費了空間,所以忽然想到使用 DiskPart 指令,以下就是簡單的指令操作步驟教學… 
diskpart-list-volume

我們要如何刪除多餘的EFI磁碟分割呢?

此時選擇[開始] -> [執行], 執行"cmd"出現終端機視窗

此時輸入 diskpart 指令並按[Enter]鍵

DISKPART> list disk

磁碟###   狀態         大小        可用     Dyn  Gpt
--------      ----------   -------     -------   ---    ---
磁碟 0       連線         1000 GB   0 B
磁碟 1       沒有媒體   0 B         0 B
磁碟 2       沒有媒體   0 B         0 B
磁碟 3       連線         37 GB     37 GB   *


DISKPART> select disk 3

磁碟 3 是所選擇的磁碟。

DISKPART> list partition

磁碟分割 ###   類型                大小         位移
----------------   ----------------  -------       -------

磁碟分割 1        系統                200 MB    20 KB

DISKPART> clean

DiskPart 成功地清理了磁碟。

DISKPART> exit

最後再使用 clean 指令清除磁碟時務必確定選擇的磁碟是否正確。




網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen

2016年7月20日 星期三

HTML CSS 動畫教學–【軟體開發(軟件開發)】

 今天 Allen 我想教大家如何在設計網頁時,透過簡單的 CSS 語法,來做到簡易的動畫效果,而且過程完全用不到 Java Script 語法….
下載
  這邊我們是直接使用 CSS Animation Level 1 所定義的 CSS 規則,而想學習更詳細的功能定義,可以花時間閱讀 http://www.w3.org/TR/css3-animations/ .. 這邊我只簡單列舉我們常會用到的屬性列表,列表如下:
在 animation 相關屬性的部份,可以使用的 CSS 屬性有:
CSS 屬性    說明
animation-delay    設定網頁元素在被載入之後到開始播放動畫之間的等待時間。
animation-direction    設定網頁元素在動畫播放完之後,是否要以相反方向的方式播放,或是從頭開始以原來的方向重複播放。
animation-duration    設定整個動畫播放一次的時間長度。
animation-iteration-count    設定動畫播放的次數,若要不斷重複播放,則可設為 infinite。
animation-name    設定 @keyframes at-rule 所使用的動畫名稱。
animation-play-state    這個屬性可用來暫停或繼續動畫播放。
animation-timing-function    透過加速曲線(acceleration curves),設定動畫播放的速度。
animation-fill-mode    設定動畫元素在播放前與播放後,如何套用 CSS 的樣式。


在開始實作 HTML CSS 動畫前,我們必須把握 3 個主要步驟,
1. 我們必須使用 @keyframes 來定義與建立我們所需要的動畫。
@keyframes 是讓我們用來定義與建立動畫的內容,換句話說就是用來指定動畫的畫格(frame)是如何轉變。
使用關鍵影格定義動畫流程
  在你設定了動畫的時間資訊之後,你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 @keyframes )。關鍵影格描述了該元素在漸變過程中的外觀。
  因為動畫漸變時間已經在 CSS style 中被定義,所以關鍵影格使用 percentage 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點,而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義,如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要,所以這兩個時間點有特殊的別名: from 和 to。
2.在 HTML 的 Style 設定好我們要套用的 css animations 屬性以及屬性值。
3.思考我們要實作的動畫,會需要影響那些 HTML 支援的屬性,例如 背景顏色 (background-color)、img元素的Url 圖片變更、某個HTML 元素位置轉移(top、left、position) 等等。

開始動手實作:
1.我們首先在 Head 的 <style> 裡宣告以下語法:
  @keyframes moving {
            from { background-position: 0% }
         
            to   { background-position: 100% }
        }
/*這段語法,是宣告一個動畫名稱為 moving ,它將從背景圖位置 0% 到 100 %,就是從左到右移動。*/
2.宣告 <body> 的元素內容,如下語法:
body {
           background-image : url(media/ironman.jpg);
            background-repeat : no-repeat;
            background-position: center center; 
            height: 500px;
            
            animation: moving 30s linear infinite;         }
重點語法,我把它標示為藍色字體,第一行~第三行 分別只是簡單的設定,背景圖為那個位置,這邊是存放在 media/ironman.jpg,最重要的動畫語法為 animation: moving 30s linear infinite;
就是設定在 body 元素裡,我們要套用 CSS 動畫,而 moving 就是我們步驟 1 @keyframes moving 
設定的動畫名稱。
完成上述很簡單的語法,我們連 Java Script 程式碼,一行都沒寫,就可以完成簡易動畫了,執行結果如下圖
image


網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen