Nguyễn Hữu Kim

Bạn dùng Nginx hay Apache, bạn check lại config của hai cái đó xem, có thể bạn chưa trỏ root của web server vào thư mục /public.

dùng git để car team làm việc(mới tìm hiểu sơ sơ)

=> Bạn có thể tham khảo Git flow mình chia sẻ trong bài này: https://viblo.asia/p/slide-chia-se-ve-git-workflow-cac-van-de-thuong-gap-mot-so-rule-nen-co-khi-tao-pull-request-E375z4BjZGW. Trong đó thì Git flow sẽ chia branch và các rule đi kèm giúp tránh/giải quyết việc conflict (xung đột code khi nhiều người cùng sửa một file).

git chỉ có thể truy cập được từ máy công ty

=> Việc này mình nghĩ là cân thiết quá đến mức đấy và rất khó để control. Nếu để chỉ code được ở máy công ty cũng sẽ có nhiều bất cập. Giả sử phải làm remote do dịch bệnh sẽ khó mà kiểm soát được, trong khi xu hướng hiện nay là làm việc linh hoạt. Hoặc đơn giản nhất là dev làm chưa kịp deadline muốn về nhà làm tiếp thì làm sao. Dù bạn có setup hệ thống kiểu gì thì mấu chốt ở đây là con người, khi dev muốn kéo code về vẫn hoàn toàn có thể. Đơn giản là Dev sẽ push lên repo cá nhân của họ rồi về ở nhà thì kéo code từ repository cá nhân về là by pass được. Thế nên chỉ cần có rule cho team là ký điều khoản bảo mật cho dự án trong đó quy định không được public repo, không được lưu trữ dữ liệu về thiết bị cá nhân khi chưa được phê duyệt.

setup các máy tính của dev trong công ty để họ có thể làm remote

=> Cái này khi dùng git thì họ sẽ có private key / public key để sử dụng. Tuân thủ theo Git flow ở mục đầu là OK rồi. Bạn có thể tìm hiểu và setup CI/CD để tự động deploy nữa là OK.

E muốn hỏi là khi muốn thực hiện một số chức năng ở bên account service mà cần đăng nhập mới thực hiện được, thì cần làm thế nào để check access token ở bên authen trước, nếu access token ko hợp lệ thì ko cần gọi bên account-service nữa ạ.

Cái này của bạn là logic của ứng dụng. Nginx là reverse proxy nên không đảm nhiệm xử lý này. Cái này bạn viết trong code của service cần làm thôi.

Vì em thấy nginx chỉ giống kiểu đặt cấu hình chứ không thấy nhận dữ liệu trả về từ api được, và cũng không thấy gọi được 2 service trong cùng 1 endpoint

Đúng rồi bạn, Nginx chỉ đảm nhiệm là điều hướng request vào service phụ trách. VD: http://account.example.lc => Account Service | http://auth.example.lc => Auth Service.

Bạn nên lưu vào cookie với cờ http only, lưu vào session storage hoặc local storage sẽ dễ dàng bị đánh cắp thông tin nếu website bị XSS attack.

Cách 1

Sử dụng event change của component Pagination để gọi API lấy data trang mới mỗi khi người dùng nhấn vào ô số trang khác.

        <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="jobs"
            @change="pageChangeHandler"
          />

Cách 2

Chỗ phân trang bạn có thể dùng cái component: https://bootstrap-vue.org/docs/components/pagination-nav

Nó cho phép bạn generate link của ô số theo ý mình. VD: Ô số 2 => ?page=2&limit=20

Trong đoạn query API, bạn đọc dữ các tham số page & limit từ URL ra và gửi tới API.

<template>
  <div class="overflow-auto">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>

<script>
  export default {
    methods: {
      linkGen(pageNum) {
        return pageNum === 1 ? '?' : `?page=${pageNum}&limit=20`
      }
    }
  }
</script>

Mình vừa search thấy issue tương tự trên Stackoverflow. Bạn thử dùng đoạn script này để download image + convert image thành base64.

var request = require('request').defaults({ encoding: null });

request.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        const data = "data:" + response.headers["content-type"] + ";base64," + Buffer.from(body).toString('base64');
        console.log(data);
    }
});

Trước mình cũng gặp một bài toán tương tự, cách mình thực hiện là lưu công thức tính toán dạng string vào trong database.

Khi cần tính toán sẽ lấy công thức ra + tổng hợp các tham số cần thiết rồi đưa vào module tính toán. Module tính toán sẽ trả về kết quả của phép tính. Bên mình xây dựng module tính toán dựa trên library: https://docs.rs/meval/latest/meval.

Bạn kiểm tra xem table trên đang encoding theo chuẩn utf8 chưa. VD: utf8_general_ci. Hoặc bạn thử đổi lại font chữ của terminal xem có hết lỗi không?

Cái đoạn code của bạn đang trả về string chứ không phải object:

async function getAccessToken () {
  let accessTokenInit = await oauth2Client.getAccessToken()
  let accessToken = JSON.stringify(accessTokenInit)
  
  return accessToken
}

Bạn thử log cái accessTokenInit ra console, nếu là accessTokenInit là string thì bạn dùng JSON.parse(accessTokenInit). Kiểu như này:

async function getAccessToken () {
  let accessTokenInit = await oauth2Client.getAccessToken()
  let accessToken = typeof accessTokenInit === 'string' ? JSON.parse(accessTokenInit) : accessTokenInit;
  
  return accessToken.res.data.access_token;
}

getAccessToken()
.then((accessToken) => {
  console.log(accessToken)
});

// const accessToken = await getAccessToken();

Mình không code .NET nên mình sẽ suggest bạn một vài hướng xử lý khác cho bạn tham khảo:

1. Đặt giới hạn dung lượng file được upload để không phải convert ảnh
2. Cứ cho user upload ảnh như bình thường, phía server sẽ dựng một service cho ảnh riêng. Bạn có thể tham khảo https://github.com/h2non/imaginary. bạn không cần phải convert ảnh, service này sẽ tự động compress, convert, hỗ trợ resize ảnh theo yêu cầu.
3. Sử dụng các dịch vụ thứ 3 như cloudinary, cloudflare images... có nhiều chức năng rất ngon lành như convert, resize, compress, cdn, cache hình ảnh. Tốc độ load ảnh thì cực nhanh.

P/S: Ngoài ra, với các service như Cloudinary, Cloudflare Images, Imaginary, thường nó sẽ tự động trả về ảnh ở định dạng webp (định dạng mới, nhỏ nhẹ hơn nhiều so với png/jpg) nếu trình duyệt hỗ trợ.

Trong example của bạn thì có vẻ giá trị worked_days = 2 có vẻ bạn đang muốn đếm theo department_id nhỉ?

Mình nghĩ bạn thử nhóm các dòng trong bảng lại theo staff_id + office_id + date có lẽ sẽ đếm được số bộ phận đã checkin trong ngày:

SELECT staff_id, office_id, count(*) as worked_days
FROM timesheets
GROUP BY staff_id, office_id, date;

Bạn làm như trên cho chức năng verify email cũng được rồi nhé.

Với chức năng quên mật khẩu, bạn có thể tạo thêm một bảng password_resets, một email có thể có nhiều tokens để reset password. Mỗi lần có yêu cầu reset password, bạn sẽ tạo một row. Khi reset thành công thì xóa hết các token của email đó đi.

password_resets:

• email: string
• token: string
• created_at: datetimez

Bạn đánh index cho 2 cột email + token để truy vấn nó nhanh hơn nhé.

Nếu code Laravel thì bạn có hàng mì ăn liền từ framework luôn mà không phải code thêm nhiều:

• https://laravel.com/docs/9.x/verification
• https://laravel.com/docs/9.x/passwords

Bonus: Chức năng verify email bạn có thể ký (sign) cái link. Khi người dùng truy cập link thì bạn chỉ cần check xem cái chữ ký (signature) có valid hay không là được. Làm như này sẽ không cần phải lưu lại token cho chức năng verify email.

Một khi bạn tắt trình duyệt thì không có cách nào để đẩy dữ liệu lên được nhé bạn.

Bạn chỉ có thể lưu dữ liệu dưới local vào IndexedDB trước khi trình duyệt bị tắt, rồi kết hợp dùng Service Worker chạy background để tự động đồng bộ dữ liệu lên server khi người dùng mở lại trình duyệt mà thôi.

Docker Desktop chỉ là công cụ để bạn cài đặt Docker trên môi trường Windows. Sau khi cài đặt, bạn có thể đóng gói web của bạn thành Docker image để deploy lên heroku hoặc aws, vps...

Ngoài ra, mình khuyên bạn nếu là web developer thì nên cài WSL trên Window, sau đó thì cài docker native trong WSL nhé. Chạy docker như vậy sẽ nhẹ và ổn định hơn.

Gỡ bỏ Docker Desktop đi bạn ạ, vừa nặng vừa lag. Thay vào đó thì bạn dùng Windows Sub-system Linux (WSL) để cài Ubuntu. Sau rồi vào trong terminal của Ubuntu gõ lệnh cài Docker như bình thường https://docs.docker.com/engine/install/ubuntu/. Dùng vừa nhẹ, vừa ổn định, vừa ngon.

Bạn có thể tham khảo các bài viết về Docker, WSL, các tool để setup mỗi trường web development cho máy tính Windows trong trang của mình nhé. https://viblo.asia/u/huukimit

Cái này là báo lỗi máy bạn chưa cài đặt ứng dụng trình duyệt mặc định.

Bạn có thể copy cái link trên terminal rồi vào trình duyệt paste vào thanh địa chỉ để truy cập, thay vì nhấn chuột vào link.

Ngoài ra, bạn thử vào trong mục Settings trên Windows, tìm Default Apps rồi kiểm tra mấy chỗ Internet | Browser xem đã chọn trình duyệt mặc định chưa. Nếu có default app rồi mà gõ vẫn lỗi thì bạn cứ làm cách trên nhé.

Bạn có thể đặt tên bảng với các thông tin cơ bản sau:

browsing_histories:

• id: integer | auto increment
• customer_id: ID tài khoản khách hàng
• product_id: ID của sản phẩm được xem
• viewed_at: datetimez | default: now()

Như này là đủ dữ liệu để bạn có thể tạo thêm chức năng:

• Lịch sử các sản phẩm đã xem
• Thống kê danh sách người dùng đã xem của một sản phẩm trong một khoảng thời gian + số lựợt xem

• Thứ nhất, file .env bị mờ là do nó bị ignore khỏi Git (được khai báo trong file .gitignore) nên editor làm mờ để developer dễ nhận biết. Vì file .env có thể chứa các thông tin nhạy cảm như thông tin đăng nhập database, các API Key... Mỗi môi trường file này lại có giá trị khác nhau nên nó được ignore để không lưu vào trong Git mỗi khi bạn commit code.
• Thứ hai, strapi support file .env nên nếu bạn gọi env(name, default) mà không có value trả ra thì bạn hãy thử kiểm tra lại nội dung trong file .env của bạn xem đã đúng syntax chưa? Tên biến environment được sử dụng trong code đã trùng với tên environment trong file .env hay chưa (đôi khi do lỗi đánh máy gõ sai tên biến). MÌnh ví dụ file .env:

DATABASE_HOST=my_variables
DATABASE_SRV=true
DATABASE_PORT=27017

Style thì bác phải sửa lại trong file css của bác chứ. Pug sao nó tự style được đâu. ) Bác cần dùng giao diện thì dùng luôn Nuxt.js viết bằng Vue nó dễ phát triển hơn. Hoặc là dùng Next.js / Remix.run nếu bác dùng React.

Mình chưa dùng GoongJS nhưng vừa ghé qua doc của nó. Bạn đang dùng Marker, cái method setHtml của nó nhận tham số bản chất là HTML string làm popup content chứ không phải Vue component như bạn nghĩ. Do vậy cái onClick thì bạn phải truyền global function thì mới được.

Bạn hãy thử dùng chuyển qua dùng setDOMContent xem nhé. Nó sẽ nhận tham số là HtmlNode chứ không phải là HTML string.

// create an element with the popup content
const div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';

const popup = new goongjs.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

Còn nếu dùng kiểu setHtml này thì bạn phải khai báo function này ở root của file HTML (đặt trước cả script của Vue).

<html>
<body>
  <script>
    function enterDistrict() ...
  </script>
  <script>Vue script...</script>
</body>