GIỚI THIỆU VỀ CÔNG TY THỰC TẬP
Giới thiệu tổng quan về công ty cổ phần Hitime
1.1 Sơ lược về công ty.
Tên công ty: Công Ty Cổ phần Hitime Địa chỉ: 373/9 đường âu Cơ, tổ 09, khu phố 1, Phường Phú Trung, Quận Tân Phú, Thành phố Hồ Chí Minh Điện thoại: 0903725050
Kể từ khi ra mắt vào năm 2017, Hitime đã nhanh chóng trở thành một trong những công ty dịch vụ CNTT phát triển nhất tại Việt Nam Với niềm đam mê và sự nỗ lực không ngừng, Hitime cam kết hỗ trợ khách hàng xây dựng doanh nghiệp mạnh mẽ, linh hoạt và sáng tạo hơn.
HiTime là một tổ chức được xây dựng dựa trên các nền tảng có sẵn, nhằm mang công nghệ đến gần hơn với khách hàng Với phương châm đơn giản hóa quy trình sử dụng, giải pháp của chúng tôi tập trung vào việc mang lại kết quả tối ưu cho hoạt động kinh doanh của khách hàng.
1.2 Văn hóa của công ty
- Nhân viên phải có mặt ở công ty trước 9:00 AM và kết thúc ngày làm việc vào 6:00 PM.
- Thời gian làm việc từ thứ 2 đến thứ 6,
- Thời gian nghỉ trưa từ 12:00 PM đến 1:00 PM, nhân viên có thể ăn trưa và ngủ trước khi bắt đầu công việc buổi chiều.
Giới thiệu về công việc thực tập
Sinh viên thực tập tại vị trí React.js Developer Intership.
- Tìm hiểu về quy trình phát triển phần mềm
- Tìm hiểu về các chuyên đề phát triển một ứng dụng web hoàn thiện.
- Tìm hiểu về các nguyên tắc code.
- Tìm hiểu về các công cụ hỗ trợ đảm bảo chất lượng phần mềm
2.3 Lịch thực tập cụ thể
STT Thời gian Công việc Người hướng dẫn
1 - Tìm hiểu về công ty, cách tổ chức của công ty. Đinh Xuân Lộc
2 - Làm quen với các công cụ làm việc trong công ty. Đinh Xuân Lộc
3 - Tìm hiểu về HTML, CSS
- Thực hành và làm các bài Test Đinh Xuân Lộc
4 - Tìm hiểu về Javascript Đinh Xuân Lộc
- Thực hành và làm các bài test Đinh Xuân Lộc
6 - Tìm hiểu về Redux Đinh Xuân Lộc
7 - Tìm hiểu về React Native Đinh Xuân Lộc
- Hiển thị thông tin channel ( list zalo, list sendo) cập nhật, xóa Đinh Xuân Lộc
NỘI DUNG THỰC TẬP
Nghiên cứu kỹ thuật
2.1 Các công cụ làm việc
Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc.
Trong thời gian này, tôi được anh Lê Tường Lâm hướng dẫn cách sử dụng các công cụ làm việc của công ty, bao gồm ứng dụng chat Slack, theo dõi dự án tại pm.Hitime.net, quản lý dự án qua git.Hitime.net, và lịch làm việc trên erp.Hitime.net.
Kết quả: Hiểu được các công cụ làm việc của công ty.
2.2 Tìm hiểu về HTML, CSS, JAVASCRIPT
Nội dung: Được anh Đinh Xuân Lộc training các kiến thức cơ bản về html, css, javascript để có thể làm ra một trang web đơn giản.
- Khái niệm cơ bản về html.
HTML là viết tắt của Hyper Text Markup Language
HTML mô tả cấu trúc của một trang Web
HTML bao gồm một loạt các yếu tố
các phần tử HTML cho trình duyệt làm thế nào để hiển thị nội dung
các phần tử HTML được đại diện bởi thẻ
thẻ HTML nhãn mẩu nội dung như "tiêu đề", "đoạn", "bảng", và vân vân
Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để làm cho nội dung của trang.
Nắm được các khái niệm cơ bản và kiến thức quan trọng để phát triển các chức năng trong dự án.
- Khái niệm cơ bản về css:
- CSS là viết tắt của Cascading Style Sheets
- CSS mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, giấy, hoặc các phương tiện khác
- CSS giúp tiết kiệm rất nhiều công việc Nó có thể kiểm soát cách bố trí của nhiều trang web cùng một lúc
- Stylesheets bên ngoài được lưu trữ trong file CSS
- Khái niệm cơ bản về javascript.
Là các phép biến đổi vertex, color để cho ra những hiệu ứng đặc biệt Việc này được thực hiện trong pipeline, từ phiên bản OpenGL 2.0 trở đi.
- Tham gia đầy đủ các buổi trainning.
- Làm các bài tập thực hành như thiết kế một trang web tin tức.
- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
- Hiểu được những khái niệm cơ bản trong lập trình web.
Nội dung: Được training về ReactJS.
Trong một component, giá trị của nó có thể được biểu thị qua các trạng thái khác nhau, chẳng hạn như một nút màu xanh đại diện cho một trạng thái và nút màu đỏ đại diện cho một trạng thái khác Tương tự, trong JSX, các component cũng có thể có trạng thái và có thể được quản lý thông qua state.
Là dữ liệu truyền cho đối tượng Thường thì là thằng cha truyền cho thằng con.
Redux JS is a JavaScript library designed to manage the state of applications effectively It consists of four main components: store, views, actions, and reducers.
Store: Là nơi quản lí trạng thái (state), có thể truy cập để lấy trạng thái của state.
Actions: Nó là 1 pure object định nghĩa 2 thuộc tính lần lượt là type: kiểu của action.
Reducers là thành phần quan trọng trong quản lý trạng thái, khác với action chỉ mô tả những gì đã xảy ra Chúng không chỉ rõ trạng thái nào của phản hồi thay đổi, mà đảm nhiệm vai trò xác định cách thức thay đổi trạng thái, sau đó trả về một trạng thái mới.
View: Hiển thị dữ liệu được cung cấp bởi Store.
Hook là một bổ sung mới trong React 16.8
Hook là những hàm cho phép bạn “kết nối” React state và lifecycle vào các component sử dụng hàm.
Với hooks thì có thể sử dụng state và lifecycle mà không cần dung ES6 class.
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
- Nâng cao kỹ năng lập trình với ReactJS.
- Có được những kiến thức quan trọng cho việc lập trình front-end sau này.
2.4 Tìm hiểu về React Native
Nội dung: Được training về react native
Khả năng tái sử dụng code và các components đã được phát triển sẵn.
Có một cộng đồng developers hùng hậu.
Tiết kiệm khi có thể code 1 mà có thể run cho cả ios và android.
Components là khái niệm cốt lõi trong React và React Native, cho phép chia nhỏ ứng dụng thành các phần nhỏ hơn Việc này không chỉ nâng cao tính tái sử dụng mà còn cải thiện khả năng mở rộng của ứng dụng.
Flex là một thuộc tính giúp mở rộng hoặc thu nhỏ linh hoạt các thành phần dựa trên không gian có sẵn Thông thường, giá trị flex: 1 được sử dụng để chỉ định rằng thành phần sẽ chiếm toàn bộ không gian có sẵn.
- Tham gia đầy đủ các buổi training của công ty
- Làm các bài thực hành, kiểm tra kiến thức đã học.
- Nâng cao kỹ năng lập trình với React native.
CHI TIẾT VỀ DỰ ÁN
Khởi tạo web
Chỉnh ở tsconfig.json ở “noImplicitAny”: true, thành “noImplicitAny”: false, Chỉnh tương tự ở noUnusedLocals.
Component transport
Cài đặt thư viện Tone.js: npm install — save tone
Code cho Component transport: Đặt 1 instrument trong 1 transport và đặt transport trong app và thử:
Tạo bộ máy âm
Vì Tone.js cung cấp cho chúng ta API và nên chỉ cần viết như sau: var AudioParam = AudioParam.exponentialRampToValueAtTime(value, endTime)Như vậy, ta sẽ có:
Vòng lặp
Sửa lại để lập lại số lần kick trong 1 bài hát:
Sau đó cập nhật lại Instrument
Các component Steps
Step để bài hát không lặp đi lặp lại 1 nhịp
- Step để gom những step lẻ:
Sửa đổi các Component
Thêm method: areEqual = (a, b) => { a.forEach((item, index) => { if(item !== b[index]) return false } return true;
Tạo nút Play/ Pause
Lấy Transport.start và đặt vào 1 method của TransportComponent:
Thêm các nhạc cụ khác
Tạo render cho các loại nhạc cụ:
Chọn nhạc cụ
IntrumentHack sẽ lựa chọn loại nhạc cụ để chơi và tuyền vào steps Các loại khác sẽ là null:
Và cuối cùng thì truyền trạng thái từ TransportComponent vào InstrumentHack:
Thực hiện
- Cao Hà Minh Quyết và sự giúp đỡ tận tình của anh Đinh Xuân Lộc.