2018年11月18日 星期日

[Github] 用Django專案示範如何使用Travis CI自動測試


開始之前請先到Travis CI[官網]用Github帳號登入
同步github上的專案,並啟動需要測試的專案(Repository)!

請在根目錄新建檔案.travis.yml
使用語言為python,並用3.5和3.6版本。
language: python
python:
  - "3.5"
  - "3.6"

env則是設定這個腳本中的參數,後面install則是安裝這個專案所需的套件。
env:
  - DJANGO_VERSION=2.1
  - DJANGO_VERSION=2.1.2
# command to install dependencies
install:
  - pip install -q Django==$DJANGO_VERSION
  - pip install -r requirements.txt

針對這個專案我寫了一段測試(連結),script就是執行裡面預先寫好的元件測試。
script: python manage.py test

上傳Github後,可以看到測試的結果,我們分別設定了2個版本的python、2個版本Django,所以會產生4個執行結果,就不需要一一下載各個版本來進行測試囉!

如果測試成功會顯示passing,若失敗會顯示failing,我在readme.md加上的標誌方便知道結果,新增方法請參考下面:


完整檔案如下(連結):
# .travis.yml
language: python
python:
  - "3.5"
  - "3.6"
env:
  - DJANGO_VERSION=2.1
  - DJANGO_VERSION=2.1.2
# command to install dependencies
install:
  - pip install -q Django==$DJANGO_VERSION
  - pip install -r requirements.txt
# command to run tests
script: python manage.py test

完整專案請到Github(連結)下載。

2018年11月16日 星期五

[Symfony] Ubuntu16+PHP7 安裝Synfony3.4


這次作業軟體是Ubuntu16.04,安裝的php是7.0。

首先請下載symfony指令,並移到指定資料夾方便全域使用。
sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony
sudo chmod a+x /usr/local/bin/symfony

接著馬上就能新增一個專案,my_project可以替換成想要的專案名稱。
# create a symfony project
symfony new my_project 3.4

我第一次建完專案出現訊息提示"simplexml_import_dom() must be available",請指令安裝php-xml排除這個問題。
如果想確定環境是否符合symfony的執行需求,可用下面指令:
php my_project/bin/symfony_requirements

如果看到這樣的畫面,基本上就沒問題,下面還另外有一些建議,可以選擇性安裝!


將Symfony專案啟動的方式
# run application
cd my_project
php bin/console server:run

打開網頁 http://localhost:8080可以看到預設Symfony的頁面,收工囉~


2018年11月13日 星期二

[Boostrap] 透過scss自訂個人風格的主題(Theme)


Bootstrap將常用的Navbar、Button等元件定義好css
可以讓前端的開發更加快速,是最多人使用的前端開發套件!

但有時boostrap的設定不合意要怎麼辦呢?
而且這麼多人使用bootstrap是不是有失個人風格呢?
這時你可以下載scss的版本來定義屬於自己的bootstrap模板喔!

請新建一個檔案加入bootstrap,第一種方法是把所有的元件都引用:
// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

或者有時你只需要使用bootstrap部分的元件
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
以上二選一即可,另外還提供了bootstrap-grid、bootstrap-reboot兩種常用的部分元件集,像bootstrap-grid就是針對網頁排版的所有bootstrap元件集,在RWD的網站時非常便利。

接著,進入正題!例如btn-primary、text-primary等都是藍色(#007bff),如果要自訂為粉紅色(#e83e8c),請將重新定義的顏色寫在引用bootstrap之前,檔案內容如下:
// Custom.scss
$primary: #e83e8c;

@import "node_modules/bootstrap/scss/bootstrap";
所有的primary就會變成你定義的粉紅色(#e83e8c),基本上所有的參數都能在_variables.scss找到原始的設定,只要加上你需要修改的參數,就可以輕鬆打造屬於你的bootstrap主題囉!

參考資料:
https://getbootstrap.com/docs/4.0/getting-started/theming/

2018年11月2日 星期五

[Javascript] 用Javascirpt截圖的小幫手 html2canvas


請先到html2canvas的官網下載套件
https://html2canvas.hertzen.com/

在想要擷取的畫面加上一個id方便來獲取這個元件,這邊設成capture。
<div id="capture"> ... </div>

這時候就可以擷取儲存成canvas,這邊是直接將這個畫面加到網頁的結尾。
html2canvas(document.querySelector("#capture")).then(canvas => {
    // do something
    document.body.appendChild(canvas)
});
querySelector這邊請記得針對你要擷取的元件設定!

完整的範例如下:
<html>
 <head>
<html>
 <head>
  <title>Screenshots with JavaScript</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
 </head>

 <body>
  <div class="container">
   <div class="row">
    <div class="col my-5">
     <!-- The Screenshot Component -->
     <div class="target">
      <div class="card text-center">
       <div class="card-header">
        Featured
       </div>
       <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additiona    l content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
       <div class="card-footer text-muted">
        2 days ago
       </div>
      </div>
     </div>

     <!-- Display Area -->
     <div class="mt-5 result border border-success">
      <p class="text-center">Display Here!</p>
     </div>

     <!-- Download Link -->
     <a herf="#" class="download-link btn">Download</a>
    </div>
   </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script type="text/javascript" src="./html2canvas.min.js"></script>
  <script>
  $(document).ready(function() {
   html2canvas(document.querySelector(".target")).then(canvas => {
     $(".result").append(canvas);
     $(".download-link").attr("href", canvas.toDataURL());
   });
  });
  </script>
 </body>

</html>