<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Code Smell &#8211; Few Steps &#8211; ก้าวสั้นๆ แต่ไปเรื่อยๆ</title>
	<atom:link href="https://myifew.com/tag/code-smell/feed/" rel="self" type="application/rss+xml" />
	<link>https://myifew.com</link>
	<description></description>
	<lastBuildDate>Sun, 20 Aug 2017 17:24:01 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://myifew.com/wp-content/uploads/2018/07/cropped-logo6-ts-32x32.png</url>
	<title>Code Smell &#8211; Few Steps &#8211; ก้าวสั้นๆ แต่ไปเรื่อยๆ</title>
	<link>https://myifew.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ตรวจสอบคุณภาพของ Code ด้วย SonarQube</title>
		<link>https://myifew.com/4139/continuous-code-quality-with-sonarqube/</link>
					<comments>https://myifew.com/4139/continuous-code-quality-with-sonarqube/#comments</comments>
		
		<dc:creator><![CDATA[iFew]]></dc:creator>
		<pubDate>Sun, 20 Aug 2017 17:23:07 +0000</pubDate>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Code Coverage]]></category>
		<category><![CDATA[Code Quality]]></category>
		<category><![CDATA[Code Smell]]></category>
		<category><![CDATA[SonarQube]]></category>
		<guid isPermaLink="false">https://myifew.com/?p=4139</guid>

					<description><![CDATA[โปรแกรมเมอร์ส่วนใหญ่จะมุ่งมั่นพัฒนา Software ให้เสร็จตามเวลาที่กำหนด จนบางทีก็ละเลยแบบตั้งใจและไม่ได้ตั้งใจ ที่จะทำให้ Sorcecode ที่เขียน มีคุณภาพหรืออย่างน้อยก็ได้ตามมาตรฐานที่มันควรจะเป็น

เรื่องเหล่านี้บางคนอาจไม่ค่อยอินเท่าไร หากทำงานคนเดียว หรืองานที่เร่งด่วนมากๆ ("งานร้อน" นั่นหละ) โดยเฉพาะงานทำครั้งเดียวเสร็จ ส่ง รับเงิน แล้วก็แยกย้าย.. แต่กับอีกหลายคนที่ต้องทำงานเป็นทีม หรือมี QA , CTO, Team Lead คอยเข้ามาตรวจสอบการทำงานของ Software และ Review Code อยู่สม่ำเสมอ ก็คงต้องปวดหัวกลับมาแก้งานรายชั่วโมง จนไม่ต้องทำมาหากิน

วันนี้เลยเอาเครื่องมือว้าวๆ ตัวหนึ่งชื่อ SonarQube มาให้ลอง มันเป็นตัวที่ช่วยตรวจสอบคุณภาพของ Source Code ให้เราได้แบบอัตโนมัติ ]]></description>
										<content:encoded><![CDATA[<p>โปรแกรมเมอร์ส่วนใหญ่จะมุ่งมั่นพัฒนา Software ให้เสร็จตามเวลาที่กำหนด จนบางทีก็ละเลยแบบตั้งใจและไม่ได้ตั้งใจ ที่จะทำให้ Source Code ที่เขียน มีคุณภาพหรืออย่างน้อยก็ได้ตามมาตรฐานที่มันควรจะเป็น</p>
<p>เรื่องเหล่านี้บางคนอาจไม่ค่อยอินเท่าไร หากทำงานคนเดียว หรืองานที่เร่งด่วนมากๆ (&#8220;งานร้อน&#8221; นั่นหละ) โดยเฉพาะงานทำครั้งเดียวเสร็จ ส่ง รับเงิน แล้วก็แยกย้าย.. แต่กับอีกหลายคนที่ต้องทำงานเป็นทีม หรือมี QA , CTO, Team Lead คอยเข้ามาตรวจสอบการทำงานของ Software และ Review Code อยู่สม่ำเสมอ ก็คงต้องปวดหัวกลับมาแก้งานรายชั่วโมง จนไม่ต้องทำมาหากิน</p>
<p>วันนี้เลยเอาเครื่องมือว้าวๆ ตัวหนึ่งชื่อ SonarQube มาให้ลอง มันเป็นตัวที่ช่วยตรวจสอบคุณภาพของ Source Code ให้เราได้แบบอัตโนมัติ <span id="more-4139"></span></p>
<h2>ความสามารถของ SonarQube หลักๆ มีดังนี้</h2>
<ul>
<li>ตรวจหาข้อผิดพลาด (Bugs) ใน Source Code</li>
<li>ช่วยค้นหาพวก Source Code ที่แย่ๆ ซับซ้อน มีกลิ่นตุๆว่าจะเป็นปัญหาในอนาคต (Code Smells)</li>
<li>ช่วยค้นหาช่องโหว่ต่างๆ ที่เป็นข้อผิดพลาดหรือปัญหาด้านความปลอดภัย (Vulnerabilities)</li>
<li>กำหนดค่าของคุณภาพที่จะให้ผ่านได้ด้วยนะ (Quality Gate) เช่น ต้องมี Code Coverage 80%</li>
<li>ทำงานร่วมกับ Automation Tools เช่น <a href="https://myifew.com/4027/how-to-setup-jenkins-automation-tools/">Jenkins</a> เพื่อทำ <a href="https://myifew.com/4039/automation-testing-by-phpunit-and-jenkins/">Continueus Integration</a> ได้ (Continuous Code Quality)</li>
<li>รองรับการตรวจสอบภาษาฮิตๆ ได้มากกว่า 20 ภาษา เช่น Java, PHP, C#, Python, Swift, C/C++, Javascript ฯลฯ</li>
<li>ทั้งหมดนี้&#8230; ฟรี!! (Open Source)</li>
</ul>
<p>แค่อ่านความสามารถจบก็ โครต &#8220;ว้าว!!&#8221; ตามที่บอกเลยปะล่ะ</p>
<p><img fetchpriority="high" decoding="async" class="alignnone size-large wp-image-4154" src="https://myifew.com/wp-content/uploads/2017/08/Projects-1200x552.png" alt="" width="1024" height="471" srcset="https://myifew.com/wp-content/uploads/2017/08/Projects-1200x552.png 1200w, https://myifew.com/wp-content/uploads/2017/08/Projects-600x276.png 600w, https://myifew.com/wp-content/uploads/2017/08/Projects-1024x471.png 1024w, https://myifew.com/wp-content/uploads/2017/08/Projects-768x354.png 768w, https://myifew.com/wp-content/uploads/2017/08/Projects-700x322.png 700w, https://myifew.com/wp-content/uploads/2017/08/Projects.png 1349w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>ลองติดตั้ง SonarQube Server กัน</h2>
<p>ถ้าใครใช้ Docker ก็ติดตั้งไม่ยาก จะใช้ sonarqube ที่ <a href="https://hub.docker.com/_/sonarqube/">hub.docker</a> หรือ <a href="https://github.com/ifew/sonarqube">git</a> ของผมก็ได้ (เอา official มาปรับนิดหน่อย ใส่ extension + ทำเป็น docker-compose)</p>
<p>ถ้าใช้ official ก็ทำคำสั่งง่ายๆเลย คือ</p>
<p>[wc_code]$ docker run -d &#8211;name sonarqube -p 9000:9000 -p 9092:9092 sonarqube[/wc_code]</p>
<p>แต่ถ้าไม่ได้ใช้ Docker ก็ไปหาติดตั้งได้ที่นี่ครับ <a href="https://www.sonarqube.org/downloads/">https://www.sonarqube.org/downloads/</a></p>
<p>เวลาใช้งาน Server จะเข้าผ่าน URL</p>
<p>[wc_code]http://localhost:9000[/wc_code]</p>
<p>ติดตั้ง</p>
<h2>ติดตั้ง SonarQube Scanner</h2>
<p>หลังจากมี Server สำหรับเก็บรวบรวม Report แล้ว จะต้องมีตัว Scanner เพื่อทำการประมวลผล Source Code ของเราเพื่อส่งเข้าไปทำ Report ซึ่งตัวนี้เรียกว่า SonarQube Scanner</p>
<p>โดยตัวมาตรฐาน จะสามารถดาวโหลดได้ที่<br />
<a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner">https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner</a></p>
<p>ที่ผมบอกว่าเป็นตัวมาตรฐาน เพราะมีภาษาบางภาษาจะต้องใช้ Scanner ที่ทำมารองรับภาษาของตัวเอง เช่น .Net Core จะต้องใช้ SonarQube Scanner for MSBuild เท่านั้น ถึงจะอ่าน Source Code ออก เป็นต้น ดังนั้น ลองดูความเหมาะสมของภาษาที่ตนเองใช้ และโหลดตามลิงค์ด้านล่างได้เลยครับ</p>
<ul>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+MSBuild">SonarQube Scanner for MSBuild</a>: Launch analysis of .Net projects</li>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+Maven">SonarQube Scanner for Maven</a>: Launch analysis from Maven with minimal configuration</li>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+Gradle">SonarQube Scanner for Gradle</a>: Launch Gradle analysis</li>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+Ant">SonarQube Scanner for Ant</a>: Launch analysis from Ant</li>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+Jenkins">SonarQube Scanner For Jenkins</a>: Launch analysis from Jenkins</li>
<li><a href="https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner">SonarQube Scanner</a>: Launch analysis from the command line when none of the other analyzers is appropriate</li>
</ul>
<h2>สร้างไฟล์ Sonar Config</h2>
<p>ในการสั่งให้ Scanner ทำงานอ่าน Source Code ใดๆ จะต้องสร้าง Config ไว้ในโฟลเดอร์ของ Source Code นั้นไว้ด้วย</p>
<p>โดยไฟล์ที่สร้างจะชื่อว่า &#8220;sonar-project.properties&#8221; และข้อมูลหลักๆที่ใส่คือ</p>
<blockquote><p># SonarQube server<br />
sonar.host.url=<span style="color: #0000ff;">http://localhost:9000</span></p>
<p># must be unique in a given SonarQube instance<br />
sonar.projectKey=<span style="color: #0000ff;">my:project</span></p>
<p># this is the name and version displayed in the SonarQube UI. Was mandatory prior to SonarQube 6.1.<br />
sonar.projectName=<span style="color: #0000ff;">My project</span><br />
sonar.projectVersion=<span style="color: #0000ff;">1.0</span></p>
<p># Path is relative to the sonar-project.properties file. Replace &#8220;\&#8221; by &#8220;/&#8221; on Windows.<br />
# This property is optional if sonar.modules is set.<br />
sonar.sources=<span style="color: #0000ff;">.</span></p>
<p># Encoding of the source code. Default is default system encoding<br />
#sonar.sourceEncoding=<span style="color: #0000ff;">UTF-8</span></p></blockquote>
<p>เช่น ผมจะให้ Scan Source Code ของ PHP Project เพื่อทำ report ไว้บน Docker บนเครื่องผมเอง</p>
<div>
<blockquote>
<div>sonar.host.url=http://localhost:9000</div>
<div>sonar.projectKey=My-PHP-Project</div>
<div>sonar.projectName=My-PHP-Project</div>
<div>sonar.projectVersion=1.0</div>
<div>sonar.sourceEncoding=UTF-8</div>
<div>sonar.sources=./application/</div>
<div>sonar.language=php</div>
</blockquote>
<h2>สั่งให้ SonarQuber Scanner ทำงาน</h2>
<p>เมื่อเซ็ตทุกอย่างเรียบร้อย ก็เข้าไปที่โฟลเดอร์ Source Code ของเรา ที่มีไฟล์ sonar-project.properties เรียบร้อยแล้ว จากนั้นรันคำสั่ง</p>
<p>[wc_code]$ sonar-scanner[/wc_code]</p>
<p>จะขึ้นข้อความแสดงการทำงาน ก็รอมันทำจนเสร็จ และมีข้อความ Excution Success</p>
<p><img decoding="async" class="alignnone size-full wp-image-4153" src="https://myifew.com/wp-content/uploads/2017/08/2560-08-20-23_50_36-Administrator_-Windows-PowerShell.png" alt="" width="680" height="262" srcset="https://myifew.com/wp-content/uploads/2017/08/2560-08-20-23_50_36-Administrator_-Windows-PowerShell.png 680w, https://myifew.com/wp-content/uploads/2017/08/2560-08-20-23_50_36-Administrator_-Windows-PowerShell-600x231.png 600w" sizes="(max-width: 680px) 100vw, 680px" /></p>
<p>จากนั้นเข้าไปที่ [wc_code]http://localhost:9000[/wc_code] มันก็จะแสดงข้อมูล Dashboard ทุกโปรเจ็คที่เราเคยสั่งให้มัน Scan ทั้งหมดมาให้</p></div>
<div></div>
<div><img fetchpriority="high" decoding="async" class="alignnone size-large wp-image-4154" src="https://myifew.com/wp-content/uploads/2017/08/Projects-1200x552.png" alt="" width="1024" height="471" srcset="https://myifew.com/wp-content/uploads/2017/08/Projects-1200x552.png 1200w, https://myifew.com/wp-content/uploads/2017/08/Projects-600x276.png 600w, https://myifew.com/wp-content/uploads/2017/08/Projects-1024x471.png 1024w, https://myifew.com/wp-content/uploads/2017/08/Projects-768x354.png 768w, https://myifew.com/wp-content/uploads/2017/08/Projects-700x322.png 700w, https://myifew.com/wp-content/uploads/2017/08/Projects.png 1349w" sizes="(max-width: 1024px) 100vw, 1024px" /></div>
<p>เมื่อกดเข้าไปดูรายละเอียดของ Project จะบอกเลยครับว่า มี Bug เท่าไร, Code Smell เท่าไร ฯลฯ</p>
<p><img decoding="async" class="alignnone size-large wp-image-4155" src="https://myifew.com/wp-content/uploads/2017/08/project-php-1200x769.png" alt="" width="1024" height="656" srcset="https://myifew.com/wp-content/uploads/2017/08/project-php-1200x769.png 1200w, https://myifew.com/wp-content/uploads/2017/08/project-php-600x385.png 600w, https://myifew.com/wp-content/uploads/2017/08/project-php-1024x657.png 1024w, https://myifew.com/wp-content/uploads/2017/08/project-php-768x492.png 768w, https://myifew.com/wp-content/uploads/2017/08/project-php-700x449.png 700w, https://myifew.com/wp-content/uploads/2017/08/project-php.png 1349w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>กดเข้าไปดูรายละเอียดลึกลงไปอีก ก็จะเห็นว่ามีปัญหาอะไรที่ไฟล์ไหน เพื่อให้เราแก้ไข (ซึ่งบางที ปัญหาหลายอย่างที่พบ ก็อาจไม่ได้ส่งผลให้ Software ทำงานผิดพลาด แต่แค่ไม่เป็นไปตามมาตรฐานนั่นเอง)</p>
<p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-4156" src="https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-1200x509.png" alt="" width="1024" height="434" srcset="https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-1200x509.png 1200w, https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-600x254.png 600w, https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-1024x434.png 1024w, https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-768x326.png 768w, https://myifew.com/wp-content/uploads/2017/08/Issues-php-project-700x297.png 700w, https://myifew.com/wp-content/uploads/2017/08/Issues-php-project.png 1349w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></p>
<h2>สรุป</h2>
<p>ลองใช้ดูแล้ว สนุกมากครับ ช่วยเราหา Bug หาโค้ดที่ไม่ดีได้ อ่านไปก็แก้ไป จำไป ดีต่อการพัฒนาความรู้ตัวเอง แต่สิ่งที่ต้องระวังและที่ผมพบปัญหาคือ บางทีติดตั้ง Scanner สำหรับใช้ในภาษาต่างๆ พอใช้แล้วปรากฎว่า ได้เกรด A ทุกหัวข้อ ไม่มี Code Smell ไม่มีข้อผิดพลาดอะไรเลย ซึ่งก็อย่าไปเชื่อมันนะครับ ปัญหานี้เกิดจากมัน Analyst Code ไม่ได้ เลยทำให้ไม่เจอปัญหา แล้วไอ้เจ้า SonarQube ก็ดันไม่แจ้ง Error อะไรมาด้วยว่ามัน Analyst ไม่ได้ ซึ่งจุดนี้ต้องทดสอบ Code ให้มันแบบ Pass และ Fail คู่กัน ให้เห็นว่ามันทำงานได้จริงไหม</p>
<p>เมื่อใช้คล่องตัวแล้ว เอามันไป Integrate กับ Jenkin เพื่อทำ CI/CD ก็ได้นะครับ เช่น เมื่อ Test ผ่านหมดแล้ว ก็ให้ Analyst Code ต่อว่าผ่านมาตรฐานที่เรากำหนดไว้ร่วมกันหรือไม่ ถ้าผ่านค่อย Deploy ต่อไป เป็นต้น .. แค่คิดก็มันส์แล้ววว</p>
]]></content:encoded>
					
					<wfw:commentRss>https://myifew.com/4139/continuous-code-quality-with-sonarqube/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
	</channel>
</rss>
