學習 - 技術面

WebForm

在剛進公司時,帶我的小主管(資管畢業的學姊)有讓我先看一些基本程式及資料庫相關的影片,結束後就開始會出作業給我,讓我能夠先熟悉公司產品的各項功能,並在每項作業做完後進行CodeReview,確認所做出來的東西是沒有問題的。

第一個作業最主要是要做出查詢畫面及編輯畫面,還有Excel匯出的功能。查詢的部分是比較簡單的,但因為是公司的產品,所以很多的function都是共用的,架構相比自己做的小專題來說是非常完整的,也因此許多地方都需要腦袋多想一下,並不是像在學校那種直覺性的寫法,也讓我學到要如何將function進行有效的分類,方便各頁面使用。Excel匯出的部分是沒有接觸過的,也是第一次知道直接將資料匯出成Excel是使用這樣的方式,從一開始的建立Table、連線、畫表格、Insert 資料,到最後下載檔案,過程中原本以為很順利,但最後的匯出部分因為還需要先載另一個關於下載資料的程式,所以花了不少時間,先上網查過後才發現就是缺少了那個程式所以會運作失敗,雖然說似乎是主管剛開始忘記先跟我說有這個東西,不過這也算是學到了一課,這樣以後如果我或是身旁的朋友再遇到這樣的問題時,我也能夠直接地跟他們說該如何解決。

...

Excel匯出

第一個作業最主要是要做出查詢畫面及編輯畫面,還有Excel匯出的功能。查詢的部分是比較簡單的,但因為是公司的產品,所以很多的function都是共用的,架構相比自己做的小專題來說是非常完整的,也因此許多地方都需要腦袋多轉一下,並不是像在學校那種直覺性的寫法,也讓我學到要如何將function進行有效的分類,方便各頁面使用。

Excel匯出的部分是沒有接觸過的,也是第一次知道直接將資料匯出成Excel是使用這樣的方式,從一開始的建立Table、連線、畫表格、Insert 資料,到最後下載檔案,過程中原本以為很順利,但最後的匯出部分因為還需要先載另一個關於下載資料的程式,所以花了不少時間,先上網查過後才發現就是缺少了那個程式所以會運作失敗,雖然說似乎是主管剛開始忘了先跟我說有這個東西,不過這也算是學到了一課,這樣以後如果我或是身旁的朋友再遇到這樣的問題時,我也能夠直接地跟他們說該如何解決。

一對多資料的新建

第二個作業開始都是延續上個作業的內容去新增頁面,其中讓我花比較多時間思考的部分就是一對多的表,比如一筆捐款項目中,這位捐款人捐的物品可能有非常多種,那要如何將物品新增進資料庫並在畫面中顯示?一開始想的時候,只有單純資料庫的部分感覺很容易,加上網頁呈現的部分後,複雜程度大幅提升,由於過去沒有做過類似的,所以當時在做卡關卡了很久,參考了兩種方法,兩種方法都嘗試過,花了不少時間,後來確定採用其中一種才開始慢慢有點進度。

這是需要使用前端的JS傳給另一個後端資料再傳回原本的前端,新增細項資料的時候需要注意目前主Table的編輯模式,如果是新增模式的話,就必須要在新增資料取得新的uid後再重新給細項的Table中對應的uid值,如果是修改模式就會比較直觀,在新增時直接給對應的uid即可。這部份是我在訓練階段時最有印象的,透過這樣的練習,也讓我的邏輯思考能力有所進步,不單單只是像以前直覺性的寫法,而是透過前後端的轉換寫出一隻完整的程式。

Word替代字元

這也是在做作業時學到的一個資料匯出技巧。在要匯出的參考檔案裡有很多$符號,稱之為”替代字元”,而在列印的時後,都是先設計好這樣的樣板word檔,上面會有代表不同資訊的替代字元,例如$DonorName$代表要替換成捐款人名、$DonatePayment$要替換成收據的捐款方式,當USER按下列印時,會在server上打開這個有替代字元的樣板word,再用程式進行將替代字元替換成收據資訊,最後在畫面上就可以下載出一個word,且裡面不會有替代字元。

起初在做的時候以為會很困難,後來發現其實就是複雜了點,需要細心的對照,才能夠將資料完整匯出。第一次匯出時,我印象中有好幾個欄位的資料是沒有出現的,後來對照程式才發現有些欄位名打錯了,所以在做這部分的時候就要特別注意,不能夠有任何錯字,不然就很容易會出問題。

程式除錯(Debug)

在剛開始做作業的時候遇到了一些問題,原本的我可能就只會直接看程式碼哪裡可能有出錯,或是上網找,最後真的不行就會直接問主管。後來主管開始教我如何下中斷點,並利用一些小技巧查看變數等等,讓我後來在debug時更快速、更順利,除錯久了也會發現有些地方是很常見的錯誤,就不用再重複同樣的動作,也能快速解決問題。

...

版本控制(SVN/Git)

過去的專題大部分都是自己做的,若是需要分工的就會比較麻煩,會大家分開寫在找個人統整起來,也用過一個方法是透過Live Share大家一起做,不過就會需要同一時間,負責開專案的人也不能關掉,不然大家就會無法使用。在進入公司後,開始學著使用SVN進行版本控制,原本以為會有點困難,學會之後發現真的非常實用且非常方便。

在每次修改完確認無誤後,就可以將程式commit上去,不過在這之前可能會有人在自己commit之前更新了程式,若是直接commit可能就會有衝突,所以就必須要先update,確認檔案更新後沒問題,再進行commit。因為之前有過這樣的經驗,有好幾隻有衝突的程式,但因為這個專案是自己做的,所以我後來都會先另外開一個資料夾,將檔案抓下來,將自己改過的程式丟進去後,在進行commit,就不會有衝突的問題,不過如果檔案很大但需要commit的東西很少,一個一個commit或許就會比較快,不然可能就會花費更多時間在重載的部分。

最初公司都是使用要連結特定IP才能夠使用的SVN,近期公司開始轉換成使用Git svn,這樣在家工作時也能進行更新。同組的那位資深同事跟我說了一些關於Git的基本常識,像是我們在使用的TortoiseGit可以說是一個UI,Git其實是一連串的指令碼,利用這個UI方便運作,還有我們過去使用的SVN的Commit與現在的Commit&Push才是一樣的,如果現在只有Commit就只有在Local上去,網站上是沒有的,所以剛開始使用時覺得不太習慣,有很多需要注意的地方,但同時也覺得很有趣,因為每次的測試都是一種新的嘗試,讓我學到更多相關技巧,在未來不管到哪都可以好好運用。

之前在準備作品集時,有將自己的作品上傳至Github,但當時的我對版本控制還不太了解,只知道可以上傳後保存檔案,讓其他人也可以下載。但現在開始對於這方面有點了解,所以未來在與同學合作做專案時,就能夠試著使用Git來進行版本控制,不僅使用方便,在之後工作需要作品集時也能夠展現自己的成果。

Google Chart

這是在做個案時客戶所提出的需求,在這之前,公司還沒有做過個功能,所以我算是第一位使用的。剛開始是一位資深工程師先研究這個功能,設計出產品的模板,完成後再教我要如何使用。

這是Google獨有的功能,所以如果要使用的話瀏覽器就只能夠用Chrome,剛開始做完要測試是否有問題,沒有發現自己瀏覽器是使用IE,結果跳出很多的錯誤訊息,才發現瀏覽器錯誤,因此在這之後,都會特別注意到瀏覽器的部分。

Google Chart有分很多種類型,像是Line Chart、Bar Chart 、ColumnChart,雖然樣子不同,但其實寫的方式大同小異。

在html的部分,是使用div設定圖表顯示的位置與大小,後端C#生成資料傳送至前端,並利用Javascript控制事件。而後端生成資料的部分是非常重要的,只要一個設定值錯誤,圖表就會直接顯示不出來,且不會有任何錯誤訊息,所以Bug就會非常難抓。有幾次遇到這樣的問題(圖表出不來),都會想很久到底是因為甚麼原因,就會需要下中斷點、設alert測試訊息等等方法來解決問題。但也是因為這樣,有了多次的經驗,讓我對於這個功能也更加熟悉。

剛開始做的時候有點卡關,因為資料呈現方式不同,取出來的資料欄位也會不一樣,所以就要仔細去思考SQL 語法的部分要怎麼寫。有次要取的資料欄位較為複雜,想了很久都想不透要怎麼寫會比較好,就去問資深同事,在他點提點我後,才赫然發現,原來在學校學到的這個語法是這樣使用,因為平常較少使用到,所以都沒有注意,透過這次的經驗,也使我更了解這個語法該如何應用。

報表

報表是在做個案時最後做的功能,會根據客戶的資料需求產生相對應的報表。在做某張報表時,因為客戶剛開始沒有特別說要用甚麼樣的方式呈現資料,我就以為都是直接匯出Excel報表,所以就都先做好了,到後面客戶才說有幾張表想用特定的方式呈現,就要重新調整,雖然很花時間,但也是一個挑戰。

其中一張是客戶想用時間線的方式呈現,起初我跟主管還有資深同事想了很久還是想不到有甚麼方法可以直接繪製出來,後來我突然靈機一動,好像可以用套印的方式,將線條存成圖片,在每個部分都帶參數進去,有資料就取代,沒資料就空白,最後就成功產出了這張報表。

一對多資料的新建

由於近期捐款系統的客戶多次反映他們的捐款人多次收到詐騙訊息、詐騙電話,所以主管請我在前台做防詐騙訊息的警告頁面。這個訊息是可以在後台編輯的,並不是單純將訊息顯示在頁面上,是需要在資料庫新增欄位儲存訊息,再由前台讀取。在前台顯示的文字如果只是單純的黑白文字就會顯得有點單調,所以在後台編輯文字的地方是使用ckeditor文字編輯器,可以選擇字型、顏色…等字體樣式。

警告訊息的畫面只需要在第一次進入頁面時顯示,之後再點擊其他分頁就不需要再跳警告。剛開始主管建議用網址儲存是否跳過警告,以及原跳轉頁面資訊,後來就想到可以用Session的方式,就可以更方便的儲存資訊,且必須要在完全重啟瀏覽器之後才會再次顯示訊息警告。平常使用Session普遍都是用來儲存會員資訊,雖然不是很難的功能,但是能夠將學到的東西實際運用在不同的方面,我覺得這就是工作與學校最不一樣也是最重要的地方吧!在學校的都是學甚麼用甚麼,在公司是要思考如何運用學到的東西來完成需求項目、解決問題,透過這次的經驗,也感受到自己的成長、進步。

API串接

API是一個不同資料庫間傳遞資訊的媒介,雖然過去是有聽過的,但這是我第一次實際做這個功能。剛開始資深的同事有先教我要怎麼做,跟我說了大概的流程,也給了我一些參考的程式碼,就讓我先嘗試自己做,如果有問題再請教他。

第一步是要將資料轉成json的格式才可以傳遞,所以會先用class 包資料,再用C#的function轉成json格式,因為這個API的json格式較為複雜,所以在做的時候有很多的小細節沒有注意到,但只要差一個字,就會出問題轉不成功,所以在第一階段就花了很多的時間在debug。

第二階段就開始要測試資料是否可以成功傳遞並回傳資料,這個階段也是處理最久的部分。在剛做好測試時一直都沒辦法成功,原本以為是加密的部分與廠商所要的格式不同,也有將測試的相關資料給廠商,請廠商幫忙確認,但始終沒有發現是哪裡出錯,過了快一周才在意外發現是參數的問題,主要原因是某個字的大小寫錯誤,導致不管嘗試幾次都是相同的錯誤訊息。在完成這個階段後,後面的階段就順了許多,當天就完成90%左右了。透過這次的經驗也讓我更深刻體會到複雜的資料不能只用眼睛看,必須要用電腦才可以真正的確認資料是否完全正確無誤。

雖然在做的過程中遇到了許多的問題,但也是因為這樣,讓我從中學到了許多,不僅僅是了解API程式的流程,更重要的是在過程中遇到的問題該如解決。在完成後也相當有成就感,因為完成了一件過去從來沒有做過的功能,也期許自己之後在撰寫這個功能時,可以有所進步,更快的完成。