Giới thiệu về các chức năng của project là 1 trong những kỹ năng cần thiết của 1 IT Comtor, vì điều đó chứng minh được bạn là người có kiến thức về dự án công nghệ thông tin nên mới có thể giới thiệu được.

Nhiều trường hợp khi đi phỏng vấn chúng ta sẽ gặp phải các câu hỏi kiểu như là : hãy giới thiệu cho chúng tôi biết dự án trước đây mà bạn làm như thế nào? trong trường hợp đó nêu thiếu từ vựng hoặc kỹ năng sẽ làm bạn bị lúng túng gây mất điểm. Hoặc nhiều trường hợp chúng ta cần trình bày với khách hàng về chức năng dự án.

Chính vì điều nay mà hôm nay mình muốn làm bài viết về cách giới thiệu dự án IT, các bạn cùng tìm hiểu nhé.

開発したアプリ「 PLOTemo 」とは？

PLOTemo đã phát triễn là gì?

アプリを簡単に説明すると、「グラフ画像のプロットデータ読み取りを効率化 & メモ管理」ができるアプリです。。

giải thích 1 cách đơn giản thì nó là ứng dụng cho phép tối ưu hóa việc đọc data plot của hình ảnh biểu đồ và quản lý ghi chú

主な特徴

画像化されたグラフのデータポイントを効率的に読み取る。
クラウド上にメモのように保存・一括管理が可能。
検索で必要なデータがすぐに見つかり、CSVダウンロードでデータがすぐに使える。

Những điểm đặc biệt

tối ưu hóa đọc dữ liệu plot của biểu đồ đã được hình ảnh hóa
cho phép lưu trữ, quản lý hàng loạt ghi chú trên cloud (đám mây)
các data cần thiết có thể được tìm kiếm ra ngay lập tức, data có thể download sử dụng ngay

アプリを試す

アプリURL：plot-memo-app.com

(現在は公開しておりません)

「ゲストログイン」 or 「機能を試す」ボタンで登録せずに機能が試せます。 ※ゲストユーザーは一部機能を制限しております。
本アプリは基本的にPCでの使用を想定しておりますが、スマホ対応もしております。

dùng thử app

đường link app : plot-memo-app.com

(hiện tại chưa được publish (công khai))

guest user sẽ bị giới hạn 1 số tính năng
ứng dụng hiện tại cơ bản được tạo ra mục đích chủ yếu sử dụng bằng PC (máy tính). tuy nhiên chúng tối cũng có đối ứng để sử dụng bên phiên bản mobile

不便に感じていた点

UIの問題で初めての人には使いにくい。
windows専用のデスクトップアプリで異なるデバイスからアクセスできない。
一度読み取ったデータはアプリ上で保存できない。(別管理しないと後で確認できない & 再利用できない。)
読み取ったデータがすぐに使える形式ではなく、Excelなどで使う場合は加工して使う必要があった。

Những điểm cảm thấy còn bất tiện, khó sử dụng

vấn đề liên quan đến UI (giao diện người dùng), khó sử dụng đối với người mới
ứng dụng desktop dành cho window ko thể truy cập được từ các thiết bị khác
dữ liệu sau khi được đọc vào không thể lưu trữ trên ứng dụng (nếu không có việc khác lý khác thì không thể xem lại được cũng như không thể tái sử dụng)
data đã đọc không phải là format mà có thể sử dụng ngay được. trường hợp sử dụng Excel chẳng hạn thì phải chỉnh sửa lại nửa mới có thể sử dụng được

そこで・・・

UIを意識しながら、下記の利便性を組み合わせたグラフ画像の読み取り効率化アプリを作成しました。

webで利用可能 + メモ形式で一括管理し、再利用可能 + 検索、CSVダウンロードですぐに使える

Chính vì vậy

mình đã suy nghĩ giao diện UI song song với tạo ra ứng dụng tối ưu hóa đọc hình ảnh biểu đồ kết hợp các tính tiện dụng bên dưới

グラフ読み取り、プロットメモの作成

アップロードされたグラフ画像を表示し、軸設定後に読み取りたいポイントをクリックして値を取得 & 保存する。

ドラッグ&ドロップ or ファイル選択で画像を読み込む。
X軸、Y軸の最小値・最大値の設定。
グラフ画像上で読み取りたいポイントをクリックして値を取得。
メモを記入し、保存する。

đọc biểu đồ, tạo ghi chú plot

hiển thị hình ảnh biểu đồ đã upload, sau khi thiết lập trục tọa độ, click vào các điểm cần đọc vào , lấy các giá trị và lưu trữ

kéo thả hoặc là chọn file để đọc hình ảnh vào
thiết lập giá trị nhỏ nhất và lớn nhất của trục x và trục y
trên hình ảnh biểu đồ, click lên các điểm cần đọc vào để lấy giá trị
nhập ghi chú và lưu lại

CSVダウンロード機能

CSVダウンロードをクリックする。
読み取ったデータがダウンロードされ、データを加工せずにグラフ作成できる。

chức năng download csv

click download csv
data đã đọc sẽ được tải xuống, không cần phải chỉnh sửa gì thêm mà có thể tạo luôn được biểu đồ

メモの検索機能

日時のソート
お気に入り検索
タグ検索
キーワード検索 (スペースでOR検索)

chức năng tìm kiếm ghi chú

sắp xếp theo ngày giờ
tìm kiếm yêu thích
tìm kiếm bằng tag
tìm kiếm bằng từ khóa (sử dụng space - khoảng trắng để tìm kiếm OR)

ゴミ箱機能

ゴミ箱一覧表示
復元
完全削除

chức năng thùng rác

hiển thị danh sách trong thùng rác
phục hồi tài nguyên đã xóa
xóa hẳn ra khỏi hệ thống

アカウント設定機能

プロフィールの変更 (ニックネーム、アバター画像)
メールアドレスの変更
パスワードの変更
退会確認・処理

chức năng thiết lập tài khoản

thay đổi profile (nickname, hình ảnh avatar)
thay đổi email
thay đổi password
hủy tài khoản

使用技術

バックエンド

PHP 7.4.1
Laravel 6.20.34

フロントエンド

HTML、CSS、Sass
MDBootstrap 4.19.1
Vue.js 2.6.14

kỹ thuật sử dụng

backend

PHP 7.4.1
Laravel 6.20.34

frontend

HTML、CSS、Sass
MDBootstrap 4.19.1
Vue.js 2.6.14

機能一覧 Danh sách chức năng

認証機能 chức năng chứng thực

新規登録 đăng ký mới
ログイン / ログアウト login / logout
ゲストユーザーログイン đăng nhập bằng guest user
- 全ての操作は可能だが、一部のDB更新は無効化 (条件分岐でリダイレクトしてメッセージを返す) tất cả thao tác đều có thể tuy nhiên 1 phần của update DB bị vô hiệu hóa (sẽ bị redirect chuyển hướng bằng điều kiện if else và trả về message)
バリデーション (Laravel) validate

認可機能 chức năng xác thực

ログインユーザーと異なるユーザーの情報にアクセスした際に403(権限)エラーレスポンスを返す。 khi truy cập đến thông tin user khác với user đang đăng nhập sẽ bị trả về lỗi 403 (quyền hạn)

アカウント設定機能 chức năng thiết lập tài khoản

CRUD処理 xử lý CRUD
プロフィール (画像、名前) 編集 (intervention、imageとGDライブラリ) chỉnh sửa profile (hình ảnh , tên) (intervention、image và thư viện GD)
プロフィール画像のプレビュー　(Vue) preview xem trước hình ảnh upload
メールアドレス、パスワード編集 thay đổi mail, password
退会処理と確認のUI (Laravel、 Vue) giao diện xác nhận và xử lý hủy bỏ tài khoản
バリデーション (Laravel) validate

グラフ画像のプロット & メモ機能 chức năng plot và ghi chú hình ảnh biểu đồ

プロットメモ一覧表示 hiển thị danh sách ghi chú plot
- Canvas画像とグラフ画像を重ねて配置 (Sass) đặt hình ảnh canvas và hình ảnh biểu dồ chồng lên nhau
- ページネーション (Laravel) pagination phân trang
- ツールチップ(マウスホバー時にヒントの表示) tooltip (khi rê chuột lên thì sẽ hiển thị ra)
- タグ機能 (vue-tags-input, Vue) chức năng tag
- お気に入り機能 (axios, Vue, Laravel) chức năng favourite yêu thích
- N + 1問題の解消 giải quyết vấn đề n +1
プロットメモの新規作成 / 編集機能 tạo mới / chỉnh sửa ghi chú plot
- グラフ画像アップロード (Vue, Laravel, axios, Canvas API) upload hình ảnh biểu đồ
  - ドラッグ&ドロップ or 選択 kéo thả hoặc chọn
  - 画像をCanvasに表示 hiển thị hình ảnh lên canvas
  - 画像の保持 (非同期通信でサーバーに保存&セッションで名前データの保持) lưu trữ hình ảnh (sử dụng phương thức truyền bất đồng bộ để lưu đến server và lưu trữ dữ liệu tên bằng session)
  - 画像のバリデーション (非同期通信でエラーレスポンスを取得) validate hình ảnh (lấy phản hồi lỗi bằng phương thức truyền tin bất đồng bộ)
- 軸設定機能 (Vue, Canvas API) chức năng thiết lập trục tọa độ
  - Canvasのレスポンシブ対応 (Canvasサイズを取得して計算に用いる) đối ứng responsive của canvas (lấy size canvas để dùng cho tính toán)
  - x軸、y軸の設定 thiết lập trục y và trục x
  - 軸設定の誤操作防止モーダル modal tránh thao tác sai thiết lập trục
  - 設定完了時のチェックマーク check mark khi hoàn thành thiết lập
  - クリックイベント毎に異なる表記をCanvasへ描画 mỗi sự kiện click chuột sẽ vẽ các kí hiệu khác nhau lên canvas
  - 軸設定のリセット機能 chức năng reset thiết lập trục
- プロットデータの読み取り機能 (Vue, Laravel, axios, Canvas API) chức năng đọc data plot
  - クリックポイントをCanvasへ描画 vẽ các điểm click lên canvas
  - クリックポイント値を軸設定した値に換算して取得してテキストエリアに表示 giá trị các điểm click chuột sẽ được chuyển đổi sang giá trị thiết lập trục sau đó lấy nó ra và hiển thị lên vùng text
  - クリックデータとテキストエリアの表示の双方向バイディング Two-way binding giữa dữ liệu click với hiển thị text area
  - テキストエリアの更新イベントを検知して再描画 phát hiện sự kiện update text area và vẽ lại
  - テキストエリアの値を規則性を持たせ表示 (桁数、カンマ区切り、改行) hiển thị giá trị trong vùng text theo qui tắc (số lượng ký số, phân cách bằng dấu phẩy, xuống hàng)
  - プロットデータを画像化して、非同期でサーバーへ保存 hình ảnh hóa plot data, lưu dữ liệu về server 1 cách bất đồng bộ
  - 座標の角度補正 (画像が傾いている場合でも座標の角度を補正する) điều chỉnh góc tọa độ (trường hợp hình ảnh bị nghiêng cũng thực hiện chỉnh góc tọa độ)
- メモ作成機能 (vue-tags-input, Laravel) chức năng tạo memo
  - タイトル、メモ、タグの保存 lưu tag, memo, title
  - canvasデータとplotデータの保存 lưu data canvas và data plot
  - バリデーション validate
  - バリデーション後のold値、画像の保持 lưu hình ảnh, giá trị củ sau khi validate
  - 保存タブのcanvasの誤操作防止モーダル modal tránh thao tác sai canvas của lưu tab
CSVダウンロード機能 chức năng download csv
- データベースのプロットデータをすぐに使える形に加工 tạo dưới dạng data plot của database mà có thể sử dụng được ngay
メモ検索機能 chức năng tìm kiếm memo
検索結果が見つからなかったことを明示的に表示 khi ko tìm thấy kết quả nào cũng hiên thị lên rõ ràng
下記をAND条件の絞り込み (セッションで条件を保持) tìm kiếm những cái bên dưới bằng đk and (lưu điều kiện vào session)
- お気に入り有無 có hay không favourite
- タグ名 tên tag
- ソート sort
ページネーション (コレクションクラスの型のため LengthAwarePaginatorクラスを使用) thực hiện phân trang (sử dụng class LengthAwarePaginator dành cho kiểu collection class)
キーワード検索機能 (スペース区切りで or条件が設定可能) chức năng tìm kiếm từ khóa (dùng phím space tách ra chúng ta có thể thiết lập đk or )

ゴミ箱機能 chức năng thùng rác

メモをゴミ箱に移動 (論理削除) di chuyển memo vào thùng rác (xóa bằng logic)
ゴミ箱にあるメモの一覧表示 (論理削除されたメモを表示) hiển thị danh sách memo trong thùng rác
ゴミ箱が空の状態を明示的に表示 hiển thị chi tiết thông tin trạng thái của thùng rác
リストア、完全削除 (物理削除) phục hồi và xóa hoàn toàn (xóa vật lý)

その他 những chức năng khác

レスポンシブ対応 đối ứng responsive
パンくずリスト Breadcrumb list
サクセス、エラーのトースト通知 (vue-toasted Vue) thông báo trace lỗi hoặc thành công (vue-toasted Vue)

Còn đang cập nhật ...

Tham khảo : qiita.com/hinanam3/items/51f608ea796ad535763e