Hands-free Client
Assignment web (HCMUT) - Client for Hands-free App
Admin page for Hands-free shop (free host): http://admin.hands-free.epizy.com/
Client page for Hands-free shop (free host): http://hands-free.epizy.com/
Apache Server API endpoint (Deploy on AWS EC2 with XAMPP): http://api.hands-free.tk/handsfree
Client Repository: https://github.com/huynhsamha/hands-free-client
Server Repository: https://github.com/huynhsamha/hands-free-server
Admin Page Repository: https://github.com/DarrenNguyen159/hands-free-admin
Screenshots
Quickstart
Clone project
git clone https://github.com/huynhsamha/hands-free.git
cd hands-free
Installing packages NPM
npm install
Development
npm start
Open localhost:4200.
Build production
npm run build
Directory dist
is created.
Hướng dẫn về source code
views
Thư mục Chứa các giao diện màn hình khác nhau cho trang web
./views
├── blog.html
├── blog_single.html
├── cart.html
├── contact.html
├── index.html
├── product.html
└── shop.html
Mỗi file là tương ứng cho 1 giao diện màn hình cho web.
layout
Thư mục Chứa các đoạn mã HTML cho các thành phần của trang web, sẽ được require()
từ thư mục src
.
./layouts
├── adverts.html
├── banner.html
├── banner2.html
├── brands.html
├── characteristics.html
├── copyright.html
├── deals_of_week.html
├── footer.html
├── header.html
├── hot_new_arrivals.html
├── newsletter.html
├── popular_categories.html
├── recently.html
└── trends.html
├── include
│ ├── meta.html
│ ├── script.html
│ ├── script_plugins.html
│ ├── stylesheet.html
│ └── stylesheet_plugins.html
Ví dụ file footer.html
hay copyright.html
được tái sử dụng ở nhiều trang khác nhau trong thư mục src
:
Trong các file index.html
, cart.html
, ... có:
<!-- Footer -->
${require('../layouts/footer.html')}
<!-- Copyright -->
${require('../layouts/copyright.html')}
public
Thư mục Chứa các file public của trang web, khi build production, các file trong public
sẽ được serve static từ web.
/public
├── css
| └── bootstrap.min.css
├── images
├── js
| ├── bootstrap.min.js
| ├── jquery-3.3.1.min.js
| └── popper.js
└── plugins
| ├── Isotope
| ├── OwlCarousel2
| ├── easing
| ├── FontAwesome5
| ├── greensock
| ├── jquery-ui
| ├── parallax-js-master
| ├── scrollmagic
| └── slick-1.8.0
Ví dụ: Các file này sẽ được serve static từ web, ví dụ nếu tên miền trang web là example.github.io
thì file public/css/bootstrap.min.css
sẽ được serve là example.github.io/css/bootstrap.min.css
src
Thư mục Chứa các file javascript cho tương ứng mỗi giao diện, hỗ trợ viết ES6, ES7 syntax.
scss
Thư mục Chứa các file stylesheet cho mỗi giao diện. Các file này được sử dụng từ các file javascript tương ứng ở thư mục src
. Ví dụ file cart.js
thì import 2 file scss tương ứng cho nó:
import '../scss/cart_styles.scss';
import '../scss/cart_responsive.scss';
Các files scss
sau khi build production, sẽ được compile thành mã css, và dùng PostCSS để autoprefix các mã css cho các phiên bản trình duyệt khác nhau (danh sách các phiên bản trình duyệt hỗ trợ được định nghĩa trong file .browserslistrc
, sẽ nói sau). Ngoài ra còn minimize các files này.
.browserslistrc
File Là file cấu hình cho thư viện postcss-preset-env
được sử dụng trong PostCSS, giúp hỗ trợ các mã CSS cho các trình duyệt khác nhau. Do đó lúc viết code trong các file scss, không cần viết các mã cho các trình duyệt khác nhau. Ví dụ, thay vì viết:
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
Thì chỉ cần viết:
div {
transition: width 2s, height 4s;
}
Vào đây để thay đổi các trình duyệt và các phiên bản khác nhau hỗ trợ.
Danh sách các framework và plugins
- Bootstrap v4.0 (https://getbootstrap.com/docs/4.0/getting-started/introduction/)
- jQuery 3.3.1 (https://api.jquery.com/)
- FontAwesome 5 (https://fontawesome.com/icons?d=gallery&m=free)
- jQuery UI 1.12.1 (http://jqueryui.com/)
- jQuery Easing v1.3 (http://gsgd.co.uk/sandbox/jquery/easing/)
- Owl Carosuel 2 v2.2.1 (https://owlcarousel2.github.io/OwlCarousel2/)
- parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
- ScrollMagic v2.5.0 (http://scrollmagic.io/)
- Slick (http://kenwheeler.github.io/slick/)
- Isotope (https://isotope.metafizzy.co/)
- jquery-confirm v3.3.0 (https://craftpip.github.io/jquery-confirm/)