背景

プロジェクトの開発からオンラインに至るまで、必ずテストプロセスがあります.中小規模企業では、プログラムのテストバグ修正プロセスはほとんど手作業で行われています.一般的には、このいくつかの段階を経なければなりません.

はBugを発見し、開発へのフィードバック

をテストした.

開発とテストコミュニケーション、何度も関連状況(ページ、アカウントパスワード、操作、再現手順、ブラウザ情報など)を理解する*N

開発発見問題、コード修正、bug修復

完了

一般的に、バグの変更に最も時間がかかるのは、テストに状況を理解するためのこのステップを開発することであり、これは繰り返しコミュニケーションする過程であり、コミュニケーションコストが極めて大きく、情報コミュニケーションの漏れが発生する可能性がある.

モバイル側の項目であれば、バグを変更するのに時間がかかります.バックエンドと対話するデータの状況を理解するために、パッケージ(証明書のインストール、エージェントの設定、アドレスの入力など)

をつかむ必要があります.

プログラムの実行状況を理解するための操作は重複し、煩雑で、意味がない.

本プロジェクトは、手順2の作業をプログラムで代替し、テストとフロントエンドのコミュニケーションコストを削減し、バグの再現にかかる時間を削減し、作業効率を向上させることを目的としています.

プロジェクトの使用方法

本項は主にajaxリクエスト、ユーザアカウントパスワードなどの収集パラメータのカスタマイズ、ページパス、ブラウザ情報などのバグ発生時のプログラムの実行情報を記録し、バグの開発に参考データを提供し、問題を特定するために使用します.ツールの使い方も簡単で、次の4つのステップに分けられます.

テストでバグが発見された場合、ボタンをクリックしてデータ

を報告する.

リストを開き、報告されたばかりのデータの対応する詳細リンク

を見つけます.

は、開発へのフィードバックバグをテストし、Bug情報対応リンク

を添付する.

bug情報を通じてプログラムが当時実行していた情報を理解し、迅速に問題を再現または位置決めし、bug

を修復する開発

プロジェクトの特徴

フロントエンドは、システムの導入を独立して完了できます。

多くのパートナーがデータストレージやページの保存を見て悩んでいるかもしれませんが、これらのバックエンドのものは分かりません.バックエンドの人に迷惑をかけたくないでしょう.

恐れることなく、本プロジェクトはバックエンドプログラミングを必要としません.データストレージとページの保存は、サードパーティのサービス(LeanCloudとgithub、すべて無料で、後で説明します)を通じて行い、フロントエンドは完全に独立して構築できます.しかも過程は簡単です.

全体の構成プロセスは30分で十分であり、ピットは存在しない.

シンプルな機能

は全部で5つの関数で、見ると使います.

ソースコードが簡単

ソースコードは暗号化されていません

データストア(LeanCloud)を除き、サードパーティ製プラグイン

に依存しない

ソースコードは簡単で、自分のプロジェクトに対してカスタマイズ改造または拡張

を行うことができる.

ソース紹介ドキュメントの配備

背後の技術原理を理解することに興味のある学生はここをクリックして、ソースコードの説明ドキュメント

を見ることができます.

LeanCloud構成の説明

システムを使用する前に、まずLeanCloudを開通し、データストレージスペースを用意する必要があります.

LeanCloudの概要

LeanCloudはBaaSサービス業者の一種であり、データストレージサービスを提供することができる.フロントエンドは、サーバに格納されているデータをJSコードで簡単に操作できます.バックエンドの知識の敷居を回避し、バックエンドの開発を回避します.

国内で比較的流行しているBaaSサービス業者にはLeanCloud,Bmob,uncodeなどの

がある.

登録および基本使用

の登録方法は簡単で、githubとQQを通じて登録をバインドし、認証届出などの煩雑な過程を必要とせず、登録すれば利用できる.

登録が完了したら、コンソールをクリックします.

クリックしてアプリケーションを作成します.ここでは「開発版」を選択すればいいです.開発版は無料で、毎日30000回請求できます.一般的なプロジェクトテストには十分です.

アプリケーションをクリックして、詳細に入ります.注:データテーブルの作成など、新しいプロジェクトを初期化するためです.後続の操作は3分待ってから行う必要があります.

「設定-」をクリックしてkeyを適用し、「App ID」と「App Key」を記録します.その後LeanCloud機能を使用する場合は

が必要です.

クリックしてclassを作成し、クラス名をbugに設定し、デフォルトの権限を「無制限」にチェックする必要があります.そうしないと、一部の機能が制限されます.(データセキュリティが懸念される場合は、ここをクリックして最適化案を表示し、ここではまず本体機能を実現する)

新しく作成したclassをクリックすると、右側に表示されるのが、このクラスが保存しているデータテーブルです.

ここまで、LeanCloudの構成作業は完了しており、データベースのようにテーブルを定義したり、カラムごとの属性を定義したりする必要はなく、システム後に自分で処理します.

VUEコンポーネント使用説明

LeanCloudを設定すれば、情報収集のコンポーネントを使用できます.

コンポーネントの読み込み

通常のロード方式に従って、ここをクリックして、ソースコード

を取得します.

コードフォルダをプロジェクトに入れます.例えば、ここではcomponentsフォルダに

を入れます.

は、layoutコンポーネントの

のようなすべてのVUEにコンポーネントをロードする.

import FrontTool from '@/components/front-tool/front-tool'

参照

登録components: {FrontTool},

を用いる.

APIの紹介

【this.$addCustomData(Object)】カスタムデータを追加します.つまり、データ収集時に特定のカスタムデータを報告し、key-valueで保存します.

【this.$clearCustomData()】ルーティング変更時に自動的に呼び出されるカスタムデータを消去します.すなわち、カスタムデータは現在のルーティングのみ有効であり、ルーティングジャンプ後に自動的に空になります.

【this.$addGlobalData(Object)】グローバルカスタムデータを追加し、プログラム全体で有効であり、報告されるたびにこの情報を携帯し、ユーザーアカウントのパスワードなどのグローバル情報を保存し、バグを変更したときに再びログインし、問題を再現するために

【this.$clearGlobalData()】グローバルカスタムデータを消去します.

以上の関数はVUEグローバル関数に自動的に登録され、VUEファイルにおいてthis.によって直接呼び出すことができる

である.

以上の関数は生成環境で自動的に失効し、エラーを報告する心配はなく、関連コードを特に注釈する必要はありません.

プロファイルの変更

LeanCloudの構成情報を変更しfront-toolを開く.VUE、AVを見つける.Initは、前に記録したLeanCloudの「App ID」と「App Key」を記入します.

各環境に対応するドメイン名プレフィックスを変更します.すべてがヒットしない場合は、自動的にlocalローカル環境に設定されます.

let envObj = {
  dev: '-d.xxx.com', //  
  test: '-t.xxx.com', //  
  pre: '-p.xxx.com', //  
  prod: '.xxx.com', //  
}

プロジェクトの実行

元ページ左下隅にフロントエンドツールボタン

が表示されます.

ポップアップメニューをクリック->レポートデータをクリックします.

LeanCloudを再開し、bugクラスを開きます.右側には、アップロードしたばかりのデータが表示されます.

これで、データのエスカレーションも完了し、最後にデータ表示部の構成手順が残ります.

bug管理システム構成説明

の部分はもっと簡単です.まずここをクリックして、関連コードを取得します.

av.jsはleadCloudプラグイン、VUEです.jsはVUEライブラリ、bug-listである.htmlはデータリストページ、bug-detailです.htmlは詳細ページです.

bug-listを修正する.htmlおよびbug-detail.htmlページのLeanCloudの配置、同様にAVを探し当てます.Init、「App ID」と「App Key」を記入します.

この4つのファイルを静的サーバに格納し、bug-list対応リンクに直接アクセスします.レポートされたデータのリストが表示されます.詳細をクリックすると、あるデータの詳細情報

が表示されます.

ここまで、データ表示部分も配置されていて、システム全体の配置も完了しているので、簡単でしょう.

githubのWebサイト構成

一部の学生は自分の静的サーバーを持っていないかもしれませんが、大丈夫です.githubでも静的サーバーを作ることができます.

新しいプロジェクトを作成します.プロジェクト名は重要ではありません.

settingをクリックしてGitHub Pagesバーを見つけ(ctrl+f GitHub Pages検索で素早く位置決め可能)、masterブランチに設定します.

プロジェクトに戻ると、倉庫が複数あることがわかります.config.ymファイルです.githubを使用して静的サーバの構成ファイルです.

は、次に通常の操作、クローン、プッシュ、前にダウンロードした4つのファイルをgithubにプッシュします.

GitHub Pagesバーを再開し、与えられたパスを開きます.このパスはgithubの倉庫にアクセスします.パスに/bug-list.htmlを加えると、データリストページにアクセスできます.

Githubの配置も便利で、アクセス速度が少し遅くて、不定期に壁にされる可能性があります.时間のある学生はクラウドサーバーを買うことをお勧めします.流量で料金を計算するのは安いです.毎日1毛数毛でいいです.困ったことがあったら、伝言エリアに伝言を残して、筆者は暇があれば文章の紹介を書くことができます.

最適化対象

システムの導入が完了し、一般的なプロジェクトのニーズに対応できます.しかし、本システムにはさらに最適化できる点があります.

データセキュリティの問題は、LeanCloudの構成情報がコードに明示的に書かれているためです.フロントエンドコードは解読されやすいので、データの安全性を保証する方法はありませんか?

このシステムは、テスト環境だけでなく、生成環境でもその役割を果たすことができます.例えば、バックエンドで返されるインタフェースの状況を監視し、異常ステータスコードを返すと、自発的にデータを報告することができます.生成環境の問題を特定します.

インタフェースの状況に加えて、VUEのエラー情報を収集し、カスタムデータに格納し、本番環境のエラー情報を収集することもできます.

非VUEバージョン.現在、このシステムのデータ収集部分はVUEバージョンのみであり、その後、純粋なjsバージョンが開発され、非VUEプロジェクトを開発する際にも使用できるようになります.

の最初の3つの問題の解決策は、後続の文章に注目してください.ここをクリックして

を参照してください.

終わりを祝う