Skip to content

zh

  • in zh
  • 1 min read

在Visual Studio Code中設定Python的自動格式化

我正在寫Python代碼，並遇到了格式化問題。這些格式問題可能會使代碼審查變得複雜，並對使用自動工具來檢測這些問題產生影響。幸運的是，當你將格式化工具集成到您的代碼編輯器中以在保存時自動修復這些問題時，生活會變得容易許多。這就是如何做的：

  1. 首先，安裝Google的yapf格式化工具：

pip install yapf

  1. 接著，打開你的Visual Studio Code編輯器。如果你使用的是Mac，按“Command + Shift + P”，如果你在Linux上，按“Ctrl + Shift + P”。在搜索欄中輸入"Open settings (JSON)"並添加以下行：

"python.formatting.provider": "yapf"

  1. 如果你希望你的代碼在保存時自動格式化，而不僅僅是在編輯器內部接收提示，也可以添加這個設置：

"editor.formatOnSave": true

  1. 如果你希望使用你的項目的.style.yapf而不是全局樣式，則添加以下行：

"python.formatting.yapfArgs": ["--style", ".style.yapf"]

現在你可以測試自動格式化功能。例如，如果你的Python文件末尾沒有新行，然後你保存它，格式化工具將自動為你修正這個問題。

  • in zh
  • 2 min read

如何使用Chrome遠程桌面在AWS實例上安裝Ubuntu桌面

在如今以雲端為中心的世界中，許多資源已被移至雲端，例如相片、檔案和伺服器等。那麼為何不將您的桌面環境也移到雲端呢？想像一下，不再需要帶著一台重型筆記本。您可以從任何薄型客戶端（例如帶有鍵盤的平板）在任何地方訪問您的計算能力。透過AWS實例，結合Ubuntu桌面和Chrome遠程桌面就可以實現這一點。雖然還有其他解決方法，如AWS工作區或VNC連接，但Chrome遠程桌面提供的延遲最低且性能最接近原生桌面。以下是如何設置的方法：

  1. 登錄AWS控制台，並使用Ubuntu Server AMI啟動一個實例。

  1. 實例啟動後，SSH登錄到您的Ubuntu服務器。更新包管理器並安裝wget：

sudo apt update sudo apt-get install --assume-yes wget

  1. 下載Chrome遠程桌面套裝軟體並安裝它：

wget https://dl.google.com/linux/direct/chrome-remote-desktop_current_amd64.deb sudo dpkg --install chrome-remote-desktop_current_amd64.deb sudo apt install --assume-yes --fix-broken

  1. 安裝桌面GUI環境。

在測試了各種不同的發行版本後，我發現Xfce在網路較慢的情況下表現最佳：

sudo DEBIAN_FRONTEND=noninteractive apt install --assume-yes xfce4 desktop-base

  1. 配置Chrome遠程桌面預設使用Xfce：

sudo bash -c 'echo "exec /etc/X11/Xsession /usr/bin/xfce4-session" > /etc/chrome-remote-desktop-session'

  1. 安裝xscreensaver作為預設的Xfce鎖屏程序的替代品，因為它不與遠程桌面兼容：

sudo apt install --assume-yes xscreensaver

  1. 禁用顯示管理器，因為沒有連接的顯示器：

sudo systemctl disable lightdm.service

  1. 將您的用戶賬戶添加到Linux群組，然後註銷：

sudo usermod -a -G chrome-remote-desktop $USER logout

  1. 在您的本地筆記本瀏覽器上，打開Chrome遠程桌面的無頭模式。按照步驟設置另一部電腦。您可能會在您的AWS實例中複製此類命令：

DISPLAY= /opt/google/chrome-remote-desktop/start-host --code="4/xxxxxxxxxxxxxxxxxxxxxxxx" --redirect-url="https://remotedesktop.google.com/_/oauthredirect" --name=

  1. 最後，您可以遠程連接到您的Ubuntu桌面了。

    額外的提示：您可以顯示屏幕保護程序，儘管這並不必要。

您現在可以使用任何設備，從任何地方訪問您的桌面環境。這種設置對於隨時需要訪問完整開發工具集的軟體工程師特別有用。

  • in zh
  • 1 min read

如何使用macOS在外部驅動器上安裝Ubuntu

如果你在使用Mac硬體，但也想要運行Ubuntu，你可以在外部硬碟上安裝Ubuntu，而不會冒著刪除你的macOS安裝的風險。下面是如何在不搞砸你的引導裝載器的情況下進行操作：

  1. 將你的外部SSD/HDD插入。打開磁碟工具並將其格式化為MS-DOS（FAT）

  2. 打開終端窗口並運行： diskutil list

這將幫助你找到你的外部硬碟的標識符，例如，在這個示例中是disk2。

  1. 下載並安裝VirtualBox： VirtualBox網站

  2. 運行以下兩條命令並以管理員權限啟動VirtualBox：

sudo VBoxManage internalcommands createrawvmdk -filename bootcamp.vmdk -rawdisk /dev/disk2 sudo /Applications/VirtualBox.app/Contents/MacOS/VirtualBox

  1. 選擇“新建”然後點擊“專家模式”。選擇“使用現有的虛擬硬碟文件。”

  1. 在“系統”標籤中，勾選“啟用EFI（僅限特殊OS）”。

  2. 在“儲存”標籤中，將Ubuntu ISO文件掛載到虛擬機。 你可以從這裡下載Ubuntu ISO文件。

  3. 啟動虛擬機並進行Ubuntu安裝。

  4. 一旦安裝完成，你就可以從驅動器啟動了。 對於Mac，你也需要降低安全級別並允許從外部媒體啟動。要做到這一點，在你看到蘋果標誌後立即按住Command-R以啟動macOS恢復。

  5. 重新啟動你的Mac並按住選項鍵。你現在可以選擇你的驅動器擁有EFI標籤。

享受在Apple硬體上使用Ubuntu！請注意，你可能需要解決一些驅動問題，但希望這個指南能讓你的過程更容易。

  • in zh
  • 1 min read

如何修復 AWS Amplify Angular App 中的“拒絕存取”錯誤

當您在 AWS Amplify 上部署您的 Angular 應用程式時，第一個登陸頁面可以正常載入。然而，如果您在您的路由器中定義了一條路徑並嘗試存取它，您可能會遇到一個“拒絕存取”的錯誤：

要解決這個問題，首先導航至 AWS 控制台，然後選擇“重寫和重定向”。接著，加入一條新的重寫和重定向規則。點擊“開啟文字編輯器”並插入以下的規則：

[
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]

添加這條規則後，嘗試再次存取您的 URL。現在應該可以按預期工作了。

  • in zh
  • 2 min read

如何將您的Android應用程式寫入後台執行模式作為服務

在某些情況下，您可能會遇到一個問題，那就是當用戶將應用程式置於背景模式或鎖定屏幕後幾分鐘，您的應用程式的功能就會消失。這可能導致用戶體驗變差，例如藍牙設備從您的應用程式中斷開，或者數據同步到服務器中斷。用戶可能會抱怨您的應用程式的連接性和穩定性。

首先，為了解決這個問題，您需要了解Android應用程式活動生命周期。當用戶切換到另一個應用程式，例如Facebook，而不是使用您的，您的應用程式活動將被終止，並觸發 onDestroy() 方法。然而，這種行為對於Android系統是有利的，因為它可以幫助釋放未使用的記憶體和管理電池壽命，但對於您的應用程式來說，可能會有問題，因為其狀態和功能可能會丟失。

下一步是重構您的應用程式，將如藍牙連接等背景功能分離為服務。服務是一種應用程式組件，能夠在後台執行持久運作，獨立於使用者介面。下面是一個服務的代碼範例：

import android.app.Service

class MyService : Service() {

    override fun onBind(intent: Intent): IBinder? {
        return null
    }

    override fun onCreate() {
      // 在此擺放你的服務邏輯
    }

    override fun onDestroy() {
      // 在此清理你的服務邏輯
    }

}

要使用此服務，您還需要在您的 AndroidManifest.xml 中定義它。這是一個例子（將名稱替換為您的服務的套件名稱）：

<application>
    ...
    <service android:enabled="true" android:name="com.victorleungtw.myapp.services.MyService"></service>
</application>

此外，要在您的活動中啟動此服務（例如在 Activity.onCreate() 中），請添加以下行：

startService(Intent(this, MyService::class.java))

並在您希望停止服務的地方，包括此行：

stopService(Intent(this, MyService::class.java))

實施這些更改後，您的應用程式將有更好的結構，但還不能在背景中無限期運行。為了實現這一點，您還需要在您的服務中添加兩個方法：

class MyService : Service() {
    // ... 現有的代碼

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
        val channelId =
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    createNotificationChannel("my_service", "My Background Service")
                } else {
                    // 如果是較早的版本，則不使用頻道ID
                    ""
                }

        val notification: Notification = Notification.Builder(this, channelId)
                .setContentTitle("Title")
                .setContentText("Text")
                .build()
        startForeground(2001, notification)

        return START_STICKY
    }

    @RequiresApi(Build.VERSION_CODES.O)
    private fun createNotificationChannel(channelId: String, channelName: String): String {
        val channel = NotificationChannel(channelId,
                channelName, NotificationManager.IMPORTANCE_NONE)
        channel.lightColor = Color.BLUE
        channel.lockscreenVisibility = Notification.VISIBILITY_PRIVATE
        val service = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        service.createNotificationChannel(channel)
        return channelId
    }
}

在這裡，創建了一個通知，通知用戶該應用程式繼續在背景中運行。它可能看起來像這樣：

就是這樣。現在您的用戶可以進行多任務操作，例如瀏覽Facebook，同時您的應用程式繼續在後台運行，保持藍牙連接，同步用戶數據，播放音樂或執行其他取決於您的應用程式功能的任務。

  • in zh
  • 1 min read

Android應用內瀏覽器的注意事項

當您正在開發一個網頁應用時，您需要考慮到瀏覽器的兼容性問題。我在開發過程中並未對Android應用內瀏覽器進行測試，但在正式上線以後出現了問題，導致數千次的交易失敗。我並不能從日誌中清楚地找出問題的根源，因此我花了一些時間來解決。我在這裡記錄下了這個問題，希望可以節省您未來的除錯時間。

當您的終端用戶透過第三方的Android應用內瀏覽器來訪問您的網頁應用時，您無法控制這個webView，因為它是由第三方提供的。如果setJavaScriptEnabled方法設置為false，那麼您就陷入了絕境。如果你有幸使前端代碼依舊能加載，請注意setDomStorageEnabled的設置預設為false。如果您參考官方文檔：

Android WebSettings setDomStorageEnabled Method

這個布爾標誌設定DOM存儲API是否啟用。預設值為false，表示WebView將停用DOM存儲API。當它嘗試訪問瀏覽器中的localStorage對象時，此設定可能會阻止您的代碼執行。

MDN Web Docs on localStorage

解決方案很簡單：在執行代碼之前，添加一個條件來檢查localStorage是否可用。這個問題不會產生有意義的錯誤消息，使得除錯變得特別困難，尤其是當您需要在Android應用內瀏覽器中模擬問題時。

複製此問題的一個技巧是下載以下工具：

Android WebView Test App on Google Play

此應用程式非常實用，因為它可以讓您在Android應用內瀏覽器中查看控制台日誌。

另一個通過服務器日誌進行故障排除的技巧是檢查請求頭部的User-Agent Strings。您可以通過檢查下面的範例頭部中的wv字段來識別WebView的請求：

Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36

我希望這篇文章能對您有所幫助，並節省您處理這一特殊注意事項所需的時間。

  • in zh
  • 1 min read

解釋 Angular 錯誤：'Expression Changed After It Has Been Checked'

我的一位同事在開發 Angular 前端應用程序時遇到了一個錯誤訊息，錯誤訊息為：

ExpressionChangedAfterItHasBeenCheckedError：Expression在檢查之後已更改。先前的值：'null'，當前的值：'true'。

這個錯誤發生在他開發一個從第二頁導航回第一頁的後退按鈕功能時。第一頁已經渲染過一次，並需要以不同的初始值重新渲染。

這個錯誤的根本原因在於Angular的變更檢測機制。每次操作後，Angular都會將用於該操作的值存儲在組件視圖的 oldValues 屬性中。一旦所有組件都已經檢查過，Angular就會啟動下一個摘要週期。但是，它不進行操作，而是將當前值與上一個週期存儲的值進行比較。

值得注意的是，這種額外的檢查只在開發模式中發生。Angular從組件樹的頂部到底部強制執行單向數據流。一旦父組件的變更已經被處理，就不允許任何子組件更新父組件的屬性。

要解決上述問題，可能的解決方案包括使用異步更新，如 setTimeout，或者在 ngAfterViewInit() 的生命週期鉤子中手動觸發變更檢測，利用 _changeDetectorRef.detectChanges()。 ChangeDetectorRef 類提供以下五種方法：

抽象類 ChangeDetectorRef {
 抽象 markForCheck(): void;
 抽象 detach(): void;
 抽象 detectChanges(): void;
 抽象 checkNoChanges(): void;
 抽象 reattach(): void;
}

通過利用這些方法，您可以手動運行變更檢測並更新子視圖。我的同事很高興發現錯誤在這種解釋之後得到了解決。

  • in zh
  • 2 min read

使用Karma為Angular組件撰寫單元測試案例

我想為你的Angular網頁應用程序編寫單元測試。加速生產時間並不能成為積累技術債的合理理由。以下是一些開始的有力理由：

  1. 單元測試幫助盡可能早地識別問題，尤其是當多個團隊在同一個代碼庫上工作，不經意地引入了錯誤。避免在深夜接到生產支持的電話是一個值得追求的目標。

  2. 測試使您能夠自信地重構代碼，確保您的應用程序繼續按預期運行。您可以將您的代碼分割為可管理的，可測試的單元，而不是處理一個龐大的系統。

  3. 您公司的政策可能要求某種程度的代碼覆蓋率，通常為80%或更高。

如果你是新手，你可能不知道如何開始，或者為什麼這個重要。幸運的是，Angular讓它變得很容易。開始，只需在您的項目目錄中運行以下命令：

npm run test

這將在本地主機的9876端口打開一個Chrome瀏覽器窗口。

Image 1

點擊"Debug"按鈕以啟動測試。

Image 2

此時，由於我們還沒有寫任何測試，所以不會有任何測試運行。但是，您可以開始撰寫測試用例以覆蓋特定的，獨立的代碼片段。例如，讓我們考慮一個login.component.ts檔案，其中包含一個login()方法，該方法將一個布爾標誌從假轉為真：

export class LoginComponent {
  isLogon = false

  login() {
    this.isLogon = true
  }
}

接下來，創建一個名為login.component.spec.ts的檔案以撰寫您的測試用例。如下所示撰寫您的第一個測試用例：

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

在您的describe()函式中，您將找到測試用例。每個案例都在其自己的it()函式中。這裡的目標是測試isLogon標誌在觸發login()方法後是否變為真。

Image 3

您的第一個測試用例應該通過！如果另一個開發者修改了您的代碼，您的測試將捕獲它：

Image 4

在現實世界的情境中，您可能會向服務器發送API呼叫。但是，在您的測試期間重要的是不要真的撥打API。您應該用stub數據模擬您的API呼叫。

例如，讓我們加強我們的LoginComponent以進行服務呼叫：

import { AuthenticationService } from "../../services/authentication.service"

export class LoginComponent {
  constructor(private authenticationService: AuthenticationService) {}

  isLogon = false

  login() {
    this.authenticationService.login().subscribe(
      data => {
        this.isLogon = true
      },
      error => {
        this.isLogon = false
      }
    )
  }
}

現在，您的測試將會失敗，因為AuthenticationService尚未注入我們的測試環境。我們可以如下所示修復這個問題：

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
import { AuthenticationService } from "../../services/authentication.service"
import { of } from "rxjs"

const stubData = {
  username: "testing",
}

class FakeAuthenticationService {
  login() {
    return of(stubData)
  }
}

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>
  const newFakeAuthenticationService = new FakeAuthenticationService()

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [
        {
          provide: AuthenticationService,
          useValue: newFakeAuthenticationService,
        },
      ],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

您的測試用例現在應該通過！

Image 5

這個例子為了演示的目的而簡化，但是重要的要取的是，你不應該避免撰寫單元測試。

  • in zh
  • 2 min read

使用Apache虛擬主機和Python虛擬環境設置Django服務器

花了我一些時間才使所有東西都能一起工作，所以我想把步驟記錄下來，以節省你未來的時間。

首先，假設你已經有你的CentOS/Ubuntu實例正在運行，並且已安裝Python。創建一個專案資料夾並設定適當的權限：

    sudo mkdir /opt/yourpath/projects
    sudo chown $USER /opt/yourpath/projects

如果你還沒有初始化你的專案，你可以這樣做：

    python -m pip install Django
    django-admin startproject APPNAME /opt/yourpath/projects/APPNAME

默認情況下，服務器運行在8000端口：

    python manage.py runserver

為了準備你的Django服務器進入生產模式，編輯settings.py文件，使用以下設置：

    DEBUG = False
    ALLOWED_HOSTS = ['*']
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

然後，你可以使用下面的命令構建靜態文件：

    python manage.py collectstatic --noinput

接下來，通過Apache網絡服務器來提供你的web應用程式。假設你透過yum或apt-get安裝了Apache2，為你的專案啟用虛擬主機，並創建以下文件：

    touch /opt/yourpath/apache2/conf/vhosts/project-vhost.conf

在下面填入内容：

    <IfDefine !IS_APPNAME_LOADED>
      Define IS_APPNAME_LOADED
      WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME
    </IfDefine>
    <VirtualHost 127.0.0.1:80 _default_:80>
    ...

記住要用你的Django專案名稱替換所有的APPNAME。然後，為HTTPS創建另一個文件：

    touch /opt/yourpath/apache2/conf/vhosts/project-https-vhost.conf

並用相似的內容填充它，適當替換APPNAME。

更新配置後，重新啟動Apache服務器。你的Django站點現在應該已經可以運行了。

最後，在虛擬環境內隔離Python依賴，以避免依賴問題和版本衝突。在你的專案目錄裡，運行：

    pip install virtualenv
    virtualenv venv
    source venv/bin/activate

這會創建一個包含所有Python可執行文件的資料夾。後續的pip install命令只會影響這個資料夾。現在，回去編輯project-vhost.conf 和 project-https-vhost.conf，將 python-home路徑改為指向venv資料夾：

由：

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME

變為：

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/projects/APPNAME/venv python-path=/opt/yourpath/projects/APPNAME

一定要將Python home路徑指向venv資料夾，而不是/bin可執行檔或Python位置，以避免出現500錯誤。如果你遇到問題，請檢查Apache服務器的錯誤日誌：

    tail /opt/yourpath/apache2/logs/error_log

就這樣！在你的公開IP地址上導航，你應該能看到你的Django頁面。

附註：如果你在WSGI層面遇到超時錯誤：

    Timeout when reading response headers from daemon process

編輯project-vhost.conf 和 project-https-vhost.conf，在WSGIDaemonProcess下面添加以下行：

    WSGIApplicationGroup %{GLOBAL}

這種增加可以解決由Python C擴展模組（如NumPy）導致的超時。

  • in zh
  • 1 min read

不要為所有事情下載應用程式

應用程式越來越無關緊要。 當瀏覽器可以作為足夠的替代品時，就不需要下載無效的軟件。 使用應用程式的主要好處是數據收集和廣告服務，這有利於科技巨頭而不是終端用戶。

一個能幹的程序員會花時間淬煉他們的工作。他們構建測試案例，將複雜的問題簡化為較小的任務，並對手頭的主題進行深思熟慮。相比之下，技能較差的開發人員往往缺乏實現任何重大成就的意願或才能。作為用戶，很難確定哪個應用程式更優越。

當開發人員犯錯時，後果通常是次要的。最壞的情況下，他們可能會在應用商店上獲得差評。在更嚴重的情況下，管理層可能會追究他們的責任。但是，大多數情況下，沒有持久的後果。有些開發人員可能會修補這些缺陷，而其他人可能會引入新的缺陷。您不進行全面的回歸測試就無法知道。

問題不僅僅在於差劣的開發者；即使是有才華的人也發現自己陷入了一個日益非理性的行業。這些技能優秀的程序員往往沒有時間來明確要求或進行 gronding 的計劃。此外，他們承受著不斷推出新功能的巨大壓力，特別是自從最新的 iPhone 發布以來。許多公司希望他們的開發人員能每天產出多個新功能以增加應用程式的下載量，但這種節奏對於保持質量來說是無法持續的。

創建經過充分測試，堅固的軟件以處理所有可能的狀態本身就是一項挑戰。這更加困難，因為來自 Slack 消息和進度報告會議的持續干擾。通常，公司會雇用經驗豐富的全棧工程師來完成工作，卻發現這成本過高。

用戶大多並未意識到這些挑戰。受到 spaghetti 代碼和無數缺陷的困擾，軟件開發人員變得不滿或悲觀，甚至兩者兼而有之。難怪許多人轉行成為項目管理角色，這提供了較少的壓力，更高的收入和更可預見的工作時間。他們不再致力於通過更好的軟件改變世界。

這種失功能的軟件工程文化的責任並不完全在於公司。像 Apple、Google、Facebook 和 Amazon 這樣的科技巨頭塑造了我們做生意的方式。當我們在他們的平台上花費更多的時間，他們就會變得更成功，從而鼓勵了軟件質量的低劣競爭。我特別建議我的軟件開發同行退出這場競賽。真正的專業人士應該以他們精心打造的工作為傲，而不是表現得像寫代碼的猴子。