Sẽ không lạ gì khi chúng ta đi gặp các engineer, rất ít người quan tâm tới kiến trúc, software design. Đa số họ đều không quan tâm rằng mình đang làm việc trên một code base như thế nào. Với họ công việc engineer chỉ là done các tasks nhàm chán mỗi ngày, fix bug của nhau.
Việc này theo quan điểm cá nhân mình thấy có hai nguyên nhân:
Thứ nhất: chúng ta thường chỉ có xu hướng dùng lib và quan tâm nó chạy nhanh hay chậm, có đáp ứng được nhu cầu không. Còn việc contribute cho lib thì sao ?! Hay thậm chí hiểu lib đó chạy thế nào ?! Gần như là không. Việc này lâu ngày sẽ hình thành một thói quen không tốt, cứ xài và chỉ xài thôi, tới khi gặp vấn đề thì … đi tìm lib khác.
Có một điều rất thú vị là những lib tốt, có nhiều star trên Github hầu hết là những lib có thiết kế tốt. Hoặc nếu nó chưa tốt, họ sẽ làm nó tốt lên, không chỉ là fix bugs mà còn thiết kế lại và ngày càng hoàn thiện hơn. Thậm chí họ, những người contribute cho lib còn viết rất kỹ phần documentation, làm cả hướng dẫn contribute. Nên nhớ rằng họ đang làm tất cả những việc đó không lương, không thưởng, không KPI.
Thứ hai là nguyên nhân từ các công ty không phải “engineer first”. Với các công ty này, các engineer và coder hay thậm chí editor cũng không có gì khác biệt. Bạn được tuyển vào để đứng vào một vị trí có sẵn, vận hành guồng máy có sẵn, thao tác y chang như quy trình đề ra, thế là xong. Từ thế hệ này tới thế hệ khác, nhiều người ra vào công ty chỉ để “trả nợ kỹ thuật”, cho tới khi các nhà lãnh đạo nhận ra vòng lặp này không giúp họ tạo ra giá trị công ty nữa… họ sẽ bắt đầu nghĩ tới việc tạo ra vòng lặp khác.
Một điều thật kỳ lạ rằng ở các công ty này luôn rất chú trọng tốc độ phát triển sản phẩm, nhưng lại không nhận ra rằng tốc độ ấy đang chậm hơn từng ngày. Việc tuyển thêm nhiều người vào làm thêm tính năng cũng giống như việc chúng ta cố xây thêm nhiều tầng cho căn nhà lá lụp xụp, rào chỗ này chống chỗ kia, miễn nó không sập là tốt.
Rất nhiều vòng lặp như vậy đã đang và vẫn tồn tại.
NodeJS thường được sử dụng với Express framework. Ngoài ra NodeJS còn được sử dụng một loạt các thư viện bên ngoài khác.
Lý do frameworks và libraries được sử dụng cùng với NodeJS là làm cho việc phát triển dễ dàng hơn và nhanh hơn nhiều.
Trong khi làm việc trên bất kỳ dự án thực tế nào, tốt nhất là sử dụng Frameworks và libraries khi cần thiết để cho phép phát triển nhanh hơn.
Điều đó nói rằng, trong bài này tôi sẽ chỉ cho bạn cách xây dựng Simple API với NodeJS mà không cần sử dụng frameworks hoặc bất kỳ libraries nào khác. Bài viết này sẽ chỉ sử dụng những chức năng được cung cấp bởi NodeJS.
Lý do cho điều này là để cho thấy NodeJS có thể được sử dụng như thế nào nếu không có frameworks và libraries. Ngoài ra điều này sẽ giúp hiểu tốt hơn cách hoạt động của NodeJS
Tạo một thư mục có tên là simple-rest-apis-nodejs-without-frameworks. Đây sẽ là thư mục project NodeJS của chúng ta.
Vào thư mục simple-rest-apis-nodejs-without-frameworks và sử dụng npm init để làm cho thư mục này trở thành project NodeJS. Các lệnh để thực hiện điều này là
cd simple-rest-apis-nodejs-without-frameworks
npm init
package.json
Sau khi chạy npm init, tệp package.json được tạo trong thư mục simple-rest-apis-nodejs-without-frameworks.
package.json chứa thông tin về project như tên project, phiên bản, mô tả, v.v. Ngoài ra package.json là nơi chúng ta sẽ thêm các dependencies của node. Trong bài viết này, chúng ta sẽ không có bất kỳ dependencies nào vì chúng ta chỉ sử dụng các chức năng được cung cấp bởi chính NodeJS.
server.js
tạo một tệp có tên là server.js bên trong thư mục dự án. Sau đó, sao chép mã sau đây vào server.js
const hostname = '127.0.0.1';
const port = 3000;
const server = require('./controller.js');
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
Mã này thực sự dựa vào một tệp được gọi là controller.js mà chúng ta sẽ sớm bổ sung. Mã này cho biết máy chủ cần listen trên cổng 3000 và localhost.
Việc tạo máy chủ được thực hiện trong controller.js
controller.js
Đây là tập tin mà chúng ta sẽ tạo máy chủ và xác định các rest endpoints. Tạo một tập tin là controller.js
Hãy tạo một GET endpoint đầu tiên trong controller.js
Module http và url được khai báo đầu tiên. Các mô-đun này được cung cấp bởi chính NodeJS.
http module cho phép tạo các ứng dụng web. Nó hỗ trợ hoạt động của client và server.
module url giúp parse url
http.createServer ((req, res) => {chỉ ra rằng máy chủ http cần được tạo với yêu cầu (request) là req và kết quả trả về (response) như res
module.exports được sử dụng để xuất tệp này dưới dạng module. Đây là lý do tại sao chúng ta có thể import controller.js trong server.js bằng cách sử dụng const server = require (‘./ controller.js’);
Có thể thấy rằng tệp này require service.js mà chúng ta sẽ tạo sau.
const reqUrl = url.parse (req.url, true); nhận được url yêu cầu và phân tích cú pháp nó để chúng tôi có thể chạy một số hàm url trên đó.
chúng ta sẽ tạo một routes GET với url là /sample
Để thực hiện định tuyến url (In order to do url routing), chúng ta sẽ sử dụng if else conditions
Dòng if (reqUrl.pathname == ‘/sample’ && req.method === ‘GET’) {kiểm tra nếu url request là /sample và cũng kiểm tra xem phải là phương thức GET hay không
service.sampleRequest (req, res); là hàm được định nghĩa trong service.js
service.js
Tạo file service.js.
Sao chép mã sau vào service.js.
const url = require('url');
exports.sampleRequest = function (req, res) {
const reqUrl = url.parse(req.url, true);
var name = 'World';
if (reqUrl.query.name) {
name = reqUrl.query.name
}
var response = {
"text": "Hello " + name
};
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(response));
};
Mã này kiểm tra xem request URL có tham số truy vấn là name hay không, nếu có thì lưu trữ nó trong biến name. Nếu không có tham số truy vấn thì biến name mặc định có giá trị là World.
Trạng thái trả về được đặt là 200, Dữ liệu trả về là JSON và cuối cùng dữ liệu được trả về bằng cách sử dụng res.end (JSON.stringify (response));
Vì biến response là một đối tượng JSON, nên đã sử dụng JSON.stringify để chuyển đổi nó thành chuỗi trước khi trả về dữ liệu
Đem theo luồng khí và hơi thở “lành nghề” về công nghệ từ xứ sở kim chi, Tripath Việt Nam (công ty con của TRIPATH INC, một tập đoàn công nghệ thông tin, thương mại và giáo dục) trở thành môi trường phát triển tiềm năng của nhiều lập trình viên. Tại đây, con người và công nghệ hòa làm một, Tripath luôn mong muốn tạo ra các giá trị mới dựa trên sự hiểu biết về công nghệ, con người và thị trường.
Với khẩu hiệu đắt giá “Tưởng tượng và thách thức” – “Imagine and Challenge”, đại gia đình Tripath luôn làm việc hăng say và liên tục thách thức các lĩnh vực mới để tạo ra những sản phẩm với nhiều tính năng cao cấp, tiện lợi và đem đến cho khách hàng những trải nghiệm chăm sóc tốt nhất.
Không chỉ dừng ở đó, yếu tố mà Tripath xem là tài sản duy nhất và quý giá nhất chính là con người, Tripath luôn tạo mọi điều kiện để nhân viên của mình có thể kiến tạo nên một sự nghiệp vững chắc.
Nếu bạn muốn trở thành “người một nhà” cùng Tripath, bạn sẽ phải lòng ngay từ đầu vì độ tuyệt vời mà môi trường Tripath mang lại:
Ở đây bạn được là chính bạn, được tha hồ vùng vẫy thỏa sức khám phá không giới hạn, sáng tạo vô biên;
Làm việc với những đồng nghiệp trẻ trung yêu đời, luôn làm việc hết mình và ăn chơi hết cỡ, hỗ trợ nhau những lúc khó khăn;
Tripath không quan tâm bạn xuất phát từ đâu vì chính Tripath sẽ vạch ra lộ trình sự nghiệp cho bạn. Có một điều ít ai biết rằng Tổng Giám Đốc của Tripath cũng khởi điểm từ nhân viên IT nên sẽ có chung chí hướng với bạn;
Mỗi người đều có phần thưởng xứng đáng cho những thành tựu và đóng góp;
Cơ hội được giao lưu làm việc tại Hàn Quốc, được chứng tỏ bản thân trong môi trường làm việc trong nước cũng như quốc tế;
Quá trình không quan trọng bằng kết quả, nhưng không có quá trình liệu bạn có đạt được kết quả cao? Vì thế Tripath luôn sẵn sàng dành những đãi ngộ tốt nhất cho những nhân tố sáng giá, không ngại xông pha và bứt phá hết mình.
Đặc biệt hiện nay, Tripath đang mở ra cơ hội cho các Back-end Developer (HTML5, Ruby on Rails, Ruby) có mong muốn tìm nơi phát triển sự nghiệp bền vững. Trở thành Back-end Developer tại Tripath, bạn sẽ được nhận chuỗi phúc lợi tương xứng với đúng năng lực:
Offer hấp dẫn lên đến $2,000;
Bonus nóng: lương tháng 13 và những khoản thưởng khác;
Cơ hội giao lưu làm việc tại Hàn Quốc;
Chăm lo trọn gói các chế độ bảo hiểm lao động và chế độ chăm sóc sức khỏe ;
Đồ ăn nhẹ với thức uống miễn phí ngay tại nơi làm việc, đặc biệt còn có trái cây tươi hằng ngày;
Môi trường làm việc trẻ trung, năng động và thân thiện;
Không có đạo lý gì cao siêu cả, chỉ đúc kết lại trải nghiệm của bản thân sau khi đi xin việc nhiều, phỏng vấn tuyển dev cũng nhiều, làm việc trong nhiều môi trường (outsource, product, remote), mỗi môi trường, mỗi công ty lại yêu cầu skill set khác nhau. Và đúc kết từ trải nghiệm của đồng nghiệp là các giám đốc nhân sự, headhunt, recruiter cho các công ty, tổ chức.
Gồm 2 điểm chính:
Kinh nghiệm
Tiềm năng
Cùng làm rõ khái niệm kinh nghiệm:
Thực tập có tính là kinh nghiệm?
Bài tập lớn, đồ án tốt nghiệp có tính là kinh nghiệm?
Sản phẩm cá nhân, tự học code có tính là kinh nghiệm? (Ví dụ, tạo blog cá nhân bằng wordpress, tạo chatbot tự động trả lời inbox bằng Node.js)
Độ lớn project bao nhiêu thì được tính là kinh nghiệm?
Học code PHP 6 tháng có nghĩa là đã có 6 tháng kinh nghiệm với PHP?
Phần lớn các bạn sinh viên khi mình phỏng vấn đều hiểu sai định nghĩa về kinh nghiệm và tự nâng cao kinh nghiệm của bản thân lên cao hơn với thực tế.
Kinh nghiệm là thứ dùng được luôn hoặc trong thời gian ngắn 1,2 tháng.
Quy chiếu sang tiềm năng:
Tiềm năng là thứ dùng được trong tương lai, có thể 6 tháng, 1 năm, 2 năm…
Như thế nào là dùng được? Tự trả lời các câu hỏi dưới đây nhé:
Bạn vừa làm bài tập tạo chatbot bằng Node.js xong, công ty cần dev Node.js
Bạn vừa làm bài tập tạo chatbot bằng Node.js xong, công ty cần dev Node.js cho sản phẩm chatbot
Bạn code outsource PHP, database mysql dự án site blog, tin tức 1 năm. Công ty cần dev xây dựng hệ thống lớn bằng PHP, database Spark??
Bạn thực tập code Java 1 năm, đóng góp 5% code production của hệ thống?
Bạn thực tập code Java 1 năm, đóng góp 40% code production của hệ thống?
Bạn thực tập code Java 6 tháng, đóng góp 60% code development của hệ thống?
Yếu tố production và development, sản phẩm nội bộ, sản phẩm tỉ người dùng cũng là 1 yếu tố quan trọng. Nó thể hiện bạn là thanh niên vừa qua nghĩa vụ hay bộ đội trên chiến trường, độ khốc liệt của chiến trường như nào…
Những điều này sẽ được recruiter đào sâu khi phỏng vấn, sau vài câu hỏi bạn được xác định là dev kinh nghiệm hay dev tiềm năng. Tiếp đó, mỗi nhánh lại có bộ câu hỏi riêng để định giá bạn.
Đây cũng là mẹo để dev tự định giá bản thân. Với mỗi công ty, dev sẽ có giá trị khác nhau, Nhớ: đừng bao giờ fix cứng giá bản thân 🙂
Cùng chào hàng bản thân để được giá nhất nào. Chúng ta lại tiếp tục với các câu hỏi:
Dev kinh nghiệm như nhau thì đâu để bạn có giá nhỉnh hơn?
Cùng dev tiềm năng, ai sẽ được chọn, mức lương ai cao hơn?
Không kinh nghiệm, không tiềm năng, lấy gì để được chọn?
Thước đo cho tiềm năng là thời gian, vậy sau bao lâu thì từ một dev tiềm năng trở thành một dev thực thụ?
Bạn tự tin sau 6 tháng bạn cân cả team dev của công ty, nhưng công ty cần launch sản phẩm trong 3 tháng tới?
Cho dù dev kinh nghiệm cũng cần thể hiện tiềm năng rằng mình sẽ nâng trình độ lên nữa trong thời gian ngắn hơn những dev khác (trả lời câu hỏi thứ nhất)
Khả năng học hỏi, đào sâu kiến thức
Khả năng teamwork, phối hợp
Khả năng kiểm soát cảm xúc
Khả năng kiểm soát cảm xúc giúp nhà tuyển dụng cảm thấy yên tâm hơn về tiềm năng của ứng viên
Trả lời cho câu hỏi cuối cùng, tại sao hàng trung quốc không ngon bằng hàng việt, không bền bằng hàng tây nhưng vẫn được chọn?
Kết luận:
Vẫn như các bài trước, mình vẫn hỏi: Bạn muốn gì?
Muốn lương cao, chọn công ty phù hợp skill set
Muốn phát triển bản thân, chọn công ty cao hơn skill set, dĩ nhiên tỉ lệ với lương. Đây là thứ công ty cho bạn ngoài tiền, chính là kiến thức
Muốn việc nhẹ, lương cao, phát triển được bản thân? Không có đâu bạn, cuộc sống này công bằng lắm 🙂
Ghi chú:
Skill set không phải thuần tech nhé, phù thuộc vào công ty. Ví dụ như bọn mình ưu tiên dev biết marketing và business.
Thường thì người ta không biết mình muốn gì cho đến khi: 1, mất đi cái đó và 2, dùng thử cái đó
Như thường lệ, cuộc sống này rất công bằng, đừng tham lam quá 🙂
Tác giả: Đức Duy – Bài viết gốc được đăng tải tạiMedium
Cách mạng công nghiệp 4.0 bùng nổ, việc phát triển robot và trí tuệ nhân tạo (AI) có khả năng trong tương lai sẽ thay thế con người ở nhiều công việc. Điều này vừa là cơ hội vừa là thách thức với những công ty thuộc lĩnh vực công nghệ. Thế nhưng với Tek Experts, con người luôn là yếu tố quan trọng mà máy móc không bao giờ thay thế được. Chính sự kết hợp hoàn hảo giữa con người và công nghệ mới tạo ra những giá tri cốt lõi, giúp Tek Experts ghi dấu ấn vững chắc trong hành trình chinh phục các khách hàng lớn trên toàn thế giới.
Con người là giá trị hàng đầu tại TEK EXPERTS
Là công ty hàng đầu thế giới cung cấp các gói dịch vụ hỗ trợ kinh doanh và IT, Tek Experts đồng thời cũng là một nhà phát triển các công nghệ hỗ trợ khách hàng đội ngũ nhân viên làm việc chuyên nghiệp, hiệu quả. Các dịch vụ tại Tek Experts luôn được triển khai bởi đội ngũ nhân sự tài năng, có chuyên môn cao, đầy đam mê và nhiệt huyết. Tek Experts hiểu rõ vai trò của công nghệ cũng như tầm quan trọng của đội ngũ, cả 2 yếu tố luôn có thể kết hợp với nhau để phát triển. Công nghệ sẽ hỗ trợ, cung cấp dữ liệu kịp thời, giúp nhân viên phục vụ khách hàng tốt hơn. Đội ngũ chuyên gia kỹ thuật dựa vào công nghệ để đưa ra giải pháp, dễ dàng giao tiếp với khách hàng để có thể hỗ trợ họ một cách hiệu quả nhất.
Dự kiến đến cuối năm 2018, đội ngũ nhân viên ở Việt Nam của Tek Experts sẽ đạt tới con số 1000, và văn phòng tại Việt Nam sẽ trở thành văn phòng lớn thứ 2 trên thế giới của Tek Experts. Để thu hút được nhân lực ngành CNTT ở Việt Nam, Tek Experts mong muốn mang lại những giá trị tốt nhất cho nhân viên của mình, giúp họ tạo dựng được một sự nghiệp chứ không đơn thuần chỉ là công việc. Dưới đây là 3 lợi ích mà bạn sẽ nhận được khi gia nhập đại gia đình Tek Experts:
Lộ trình phát triển sự nghiệp: không ngừng nuôi dưỡng các tài năng trẻ, đào tạo chuyên sâu từ chuyên môn đến các kiến thức thương mại và những kỹ năng bổ ích khác. Những sinh viên mới ra trường luôn được chào đón và tạo cơ hội, sau vài năm làm việc sẽ được phát triển ở tầm cao hơn, chính thức bước lên một nấc thang mới trong sự nghiệp.
Môi trường làm việc quốc tế: các nhân viên luôn có cơ hội trau dồi kỹ năng giao tiếp tiếng Anh và các ngôn ngữ khác. Vì các đối tác đa phần là các khách hàng doanh nghiệp trên toàn cầu, thành viên của Tek Experts sẽ có cơ hội đi công tác đến nhiều nơi trên thế giới, mở mang học hỏi và khám phá thêm nhiều kiến thức.
Văn hóa doanh nghiệp: khi làm việc tại Tek Experts, bạn sẽ được gắn kết với rất nhiều đồng nghiệp vui vẻ, cởi mở và thân thiện. Các nhân viên sẽ luôn hỗ trợ nhau, tạo thành khối thống nhất phát triển để cùng đi xa hơn. Môi trường hợp tác và chia sẻ chính là nét văn hóa của Tek Experts.
Đãi ngộ đặc biệt, phúc lợi cho nhân viên chưa bao giờ thua thiệt!
Tek Experts được biết đến là một môi trường luôn tạo cơ hội phát triển cho đội ngũ nhân viên, đặc biệt là đầu tư phát triển nhân lực để phát triển doanh nghiệp bền vững. Để có thể nâng cấp các trải nghiệm của khách hàng, đội ngũ tại Tek Experts phải luôn không ngừng nâng cao năng lực chuyên môn, chính vì lẽ đó mà nhân viên của Tek Experts sẽ không chỉ được tham gia các khóa đào tạo nội bộ, mà còn có cơ hội phát triển các kỹ năng mới và nhận chứng chỉ thông qua các khóa học bên ngoài công ty.
Vì yếu tố con người luôn được đặt lên hàng đầu, Tek Experts không ngừng mang lại cho nhân viên các chính sách đãi ngộ hấp dẫn nhất, đặc biệt là mức lương cạnh tranh cao hơn so với những công ty trong nước:
Thu nhập hấp dẫn dựa theo năng lực của cá nhân;
Làm việc hiệu suất cao, nhận thưởng càng hấp dẫn;
Cơ hội thăng tiến không ngừng cho những tài năng thực sự;
Cơ hội làm việc và học hỏi từ các đối tác CNTT hàng đầu thế giới;
Luôn được cập nhật nhiều kiến thức bổ ích, được tạo điều kiện khai phá năng lực bản thân;
Ăn chơi hết mình, quẩy thả ga trong nhiều dịp đặc biệt vào hằng năm (summer trip, year-end party, team building).
Với những chính sách hấp dẫn đó, Tek Experts tin rằng sẽ mang lại cho nhân viên động lực phát triển tốt nhất, tạo ra năng suất làm việc thật cao và có thể bứt phá vươn xa. Bằng chứng là có 17,5% số lượng nhân viên được thăng chức lên vị trí quản lý/ chuyên gia cao cấp sau thời gian làm việc trên 3 năm tại Tek Experts đi cùng chế độ lương thưởng ấn tượng, song hành với nhiều hoạt động ngoại khóa thú vị.
Bạn có muốn là mảnh ghép tiếp theo của Tek Experts Việt Nam?
Hiện Tek Experts sở hữu văn phòng tại 7 quốc gia gồm Costa Rica, Nigeria, Mỹ, Bulgaria, Malta, Trung Quốc và Việt Nam. Riêng tại Tek Experts Việt Nam, từ con số vài chục nhân viên ban đầu thì giờ đội ngũ đã lên tới gần 700 nhân viên và sẽ còn tăng mạnh vào cuối năm nay, trở thành một trong 3 văn phòng lớn nhất trên thế giới của Tek Experts.
Đặc biệt Tek Experts Việt Nam còn gây thu hút giới trẻ bởi văn phòng làm việc đáng mơ ước tại Hà Nội, với tổng diện tích 2 văn phòng lên tới 4.000 m2 cùng khu sky garden thiết kế độc đáo. Tại đây còn có các khu không gian mang lại trải nghiệm tuyệt vời như khu chơi game trên máy Xbox 360, không gian test các thiết bị phần mềm để cung cấp các trải nghiệm chuyên sâu về sản phẩm và hỗ trợ các kỹ năng mềm phục vụ khách hàng. Điều này lại càng giúp cho môi trường làm việc tại Tek Experts trở nên thú vị, hiện đại và mang đến những phút giây giải trí hiệu quả cho nhân viên.
Bạn có muốn khám phá năng lực bản thân và tạo cho mình nhiều cơ hội thăng tiến?
Bạn có muốn cùng Tek Experts vừa làm việc tại văn phòng mơ ước, vừa cùng nhau dành thời gian thư giãn giải trí tại Sky Garden hay chơi game xả stress với vài ván Xbox?
Đừng ngại ngần điều gì cả, hãy đến với văn phòng của Tek Experts Việt Nam để quan sát và cảm nhận môi trường làm việc. Nhanh tay gõ cửa – gửi CV ngay để ứng tuyển cho vị trí bạn yêu thích nhất.
TOP các vị trí hấp dẫn tại Tek Experts không thể bỏ lỡ
Solution Architect (.NET, SQL Server, Business Intelligence)
Senior Database Administrator (MS SQL, SQL Server, Business Intelligence)
Software Support Engineer (Technical Support)
Cùng Tek Experts viết tiếp hành trình mới – BẠN ĐÃ SẴN SÀNG?
Có những tình huống khi Symfony cần định tuyến dựa trên subdomain. Ví dụ, khi chúng ta phân phối các cụm chức năng khác nhau trong một dự án hoặc một kho lưu trữ. Giả sử, ngoài API, có một phần quản trị được viết trong các gói Symfony hoặc một số chức năng cho các url truy cập công khai từ phía máy khách.
Dưới đây là một số tùy chọn:
api.project-name.work: một máy chủ API cho các ứng dụng khách (web và các máy khách di động).
hub.project-name.work: một máy chủ được sử dụng để kết nối ngược với một máy khách di động khi một số tính năng cần có sẵn URL từ trình duyệt. Ví dụ: trong trường hợp tính năng đặt lại mật khẩu, tính năng xác nhận email, tính năng hủy đăng ký email, xử lý móc nối web từ hệ thống thanh toán, xử lý chuyển hướng hệ thống thanh toán và các trang như điều khoản thỏa thuận người dùng sẽ mở từ trình duyệt hoặc từ chế độ xem web trong ứng dụng dành cho thiết bị di động. Bạn có thể chia tất cả chức năng này thành các subdomain nếu bạn cần. Nhưng nó là không hợp lý để lưu trữ tất cả các công cụ này trên subdomain API vì nó không liên quan đến các truy vấn của khách hàng và trong hầu hết các trường hợp có một phương thức xác thực khác với API. Các tên miền con với tên ‘hub’ rất phổ biến trên các dịch vụ khác nhau cho các tính năng cùng loại.
admin.project-name.work: một máy chủ nơi phần quản trị được lưu trữ. Thật thuận tiện khi bảng quản trị viên được thực hiện bằng văn bản trong Symfony trong cùng một kho lưu trữ với mã API. Các thực thể phổ biến được sử dụng, và cả Symfony thuần hoặc một số gói quản trị có sẵn (như SonataAdminBundle, EasyAdminBundle, vv) đều có thể thực hiện được. Nó rất tiện lợi khi bạn phân phối với các công ty khởi nghiệp nhỏ hoặc trung bình với ngân sách hạn chế.
Tùy thuộc vào lĩnh vực của dự án, có thể sử dụng các subdomain khác, như ‘my’, ‘stats’, ‘legacy’,…
Khi bạn cần các subdomain riêng biệt:
Có subdomain riêng biệt cho các chức năng khác nhau, việc định tuyến và cân bằng lưu lượng truy cập dễ dàng hơn khi bạn cần tăng băng thông của dịch vụ. Nó cũng cho phép bạn triển khai thực hiện front-end với sự trợ giúp của bất kỳ công nghệ hoặc framework nào khác và đặt nó trên miền gốc project-name.work. Ví dụ: khi khách hàng muốn đặt đích cho ứng dụng dành cho thiết bị di động trên miền gốc. Việc kết thúc có thể được phát triển bởi một nhóm khác mà không có sự tham gia của bạn. Và sau đó dự án Symfony của bạn chỉ sẽ được tách ra từ việc định tuyến tên miền gốc và sẽ chỉ chia sẻ với các subdomain có liên quan.
Cách tùy chỉnh Project bằng các Subdomain cho Docker:
Để tùy chỉnh dự án trong Symfony cho Docker, bạn cần một số cấu hình bổ sung. Trong Docker, bạn có thể tạo định tuyến dựa trên các cổng khác nhau, nhưng bạn không thể áp dụng định tuyến từ gói cho các subdomain vì theo mặc định, Docker hoạt động trong phạm vi của một máy chủ.
Với Symfony, có một vấn đề khác: nó không hỗ trợ định tuyến bằng port, nhưng nó hỗ trợ định tuyến phụ. Đó là, cho đến nay, bạn không thể thiết lập Symfony để nó gọi điều này hoặc bộ điều khiển phụ thuộc vào cổng. Và triển khai tùy chọn hỗ trợ này không được mong đợi trong tương lai gần (bạn có thể đăng ký về vấn đề này để theo dõi tất cả các sửa đổi: có thể, họ sẽ quay lại một số điểm của tính năng này).
Từ hai tùy chọn: tùy chỉnh Symfony Router component hoặc thêm hỗ trợ cho các subdomain trong Docker, sau này dễ dàng hơn và nó đã có sẵn một cài đặt sẵn sàng.
Lưu ý: Nó có thể được áp dụng chỉ trong môi trường phát triển cục bộ cho Docker và nó không phải là một giải pháp phổ quát có thể được sử dụng trong thực tế.
Để thêm sự hỗ trợ subdomain trong Docker, bạn cần phải thêm một container dựa trên image jwilder/nginx-proxy và cấu hình cho nó trong file docker-compose.yml. Hãy xem ví dụ về một phần của cấu hình docker-compose.yml cho hai container: nginx và nginx-proxy. Rõ ràng, sẽ có các container khác ngoài những thứ này trong dự án của bạn. Trong ví dụ này, jekakm/nginx-core:201802261 là image của chúng tôi mà chúng tôi sử dụng để phát triển.
nginx_proxy sẽ nghe port 80 và đi qua nó vào Docker. Ngoài ra, biến môi trường VIRTUAL_HOST được thêm vào nginx container. Trong đó, phân cách bằng dấu phẩy, bạn cần phải đề cập đến tất cả các máy chủ (có tên miền phụ và không có) nên được proxy vào nginx container. Thông qua proxy này, Symfony sẽ nhận được các yêu cầu từ các host đã được đề cập mà không sửa đổi, và nó sẽ có thể, theo các quy tắc định tuyến, để xác định bộ điều khiển nào sẽ xử lý yêu cầu dựa trên các tên miền phụ.
Ví dụ nhanh về định tuyến Symfony dựa trên miền phụ:
easy_admin_bundle:
resource: "@EasyAdminBundle/Controller/AdminController.php"
type: annotation
host: "%admin_host%" # <-- admin panel host
api_fos_oauth_server_token:
resource: "@FOSOAuthServerBundle/Resources/config/routing/token.xml"
host: "%api_host%" <-- API host
methods: POST #
api:
resource: ../src/Controller/API
type: annotation
host: "%api_host%" <-- API host
prefix: /v1.0
hub:
resource: ../src/Controller/Hub
type: annotation
host: "%hub_host%" <-- host for all "frontend features"
admin:
resource: ../src/Controller/Admin
type: annotation
host: "%admin_host%" <-- host for admin panel, the processing of all custom actions which were implemented from the admin panel
admin_logout:
path: /logout
host: "%admin_host%"
Trong cấu hình cho nginx container, có cấu hình máy chủ ./docker-configs/nginx.conf được thay thế vào container. Trong cấu hình này, tham số SERVER_NAME có giá trị project-name-docker. Nó quan trọng là vì giá trị này sau này sẽ được sử dụng để thiết lập XDebug trong PhpStorm (chúng tôi sẽ trình bày vấn đề này sau). Tôi cũng đưa ra ví dụ về một cấu hình đầy đủ cho máy chủ nginx để có thể kiểm tra sự khác biệt nếu cần thiết.
Chú ý! Cấu hình được trình bày dành cho Symfony 4 và các phiên bản mới hơn vì nó sử dụng đường dẫn public/index.php đến frontend controller:
Sau khi bạn đã thêm một container nginx-proxy vào tệp docker-compose.yml, đừng quên build các container mới và khởi động lại các container đang chạy.
$ docker-compose build
$ docker-compose down && docker-compose up -d
Thêm điều hướng:
Điều cuối cùng bạn cần làm là thêm điều hướng cho máy chủ cục bộ của mình để các máy chủ bạn sử dụng (hoặc máy chủ có tên miền phụ) chuyển hướng đến máy chủ cục bộ. Bạn có thể làm điều đó bằng cách chỉnh sửa tệp /etc/hosts và thêm các dòng sau vào nó:
Hoặc bạn có thể sử dụng tiện ích dnsmasq và cấu hình một quy tắc chung trong nó. Ví dụ: nếu bạn sử dụng tên miền .work cho máy chủ cục bộ, nó được định cấu hình theo quy tắc sau:
address=/.work/127.0.0.1
Việc thêm các điều hướng cho các máy chủ ảo cục bộ là xa từ những gì được coi là thực hành tốt nhất Docker (cụ thể là khi bạn triển khai môi trường làm việc mà không có bất kỳ lệnh bổ sung nào cho máy cục bộ). Nhưng thật không may, không có giải pháp nào khác cho vấn đề này đối với các miền phụ Symfony trong Docker. Và đây là một giải pháp thỏa hiệp. Nó vẫn còn tốt hơn để sử dụng tiện ích dnsmasq để thiết lập một quy tắc chung cho máy cục bộ.
Để PhpStorm thiết lập kết nối XDebug, bạn cần thêm máy chủ cục bộ vào PHP -> Servers configuration:
Tên của máy chủ phải giống với giá trị của tùy chọn SERVER_NAME từ nginx. Trong trường hợp của chúng ta, nó là project-name-docker.
Vậy thì,
Chúng tôi đã thực hành cách thiết lập dự án trong Symfony để làm việc với các tên miền phụ Docker. Hy vọng bài viết sẽ hữu ích cho bạn.
Framework là các đoạn code đã được viết sẵn, cấu thành nên một bộ khung và các thư viện lập trình được đóng gói. Chúng cung cấp các tính năng có sẵn như mô hình, API và các yếu tố khác để tối giản cho việc phát triển các ứng dụng web phong phú, năng động. Các framework giống như là chúng ta có khung nhà được làm sẵn nền móng cơ bản, bạn chỉ cần vào xây dựng và nội thất theo ý mình.
Các loại Framework
Hiện nay chưa có quy ước về cách phân loại các framework, tuy nhiên để dễ hiểu có thể chia như sau:
Theo ngôn ngữ: JavaScript frameworks, HTML & CSS frameworks, NET Framework,…
Theo hệ điều hành hỗ trợ: Windows framework, Android framework, iOS framework,…
Theo ứng dụng: Web framework, Mobile framework, Front-end framework, Back-end framework,…
Các framework ứng dụng web là các framework phần mềm được sử dụng để sắp xếp hợp lý các ứng dụng web và phát triển trang web, các dịch vụ web và các tài nguyên web. Một loại framework ứng dụng web phổ biến là kiến trúc Model-View-Controller (MVC). Như chúng ta đã biết để lập trình một website chúng ta sử dụng tới 3 ngôn ngữ thành phần là HTML, CSS và Javascript sau đó kết hợp với một ngôn ngữ kịch bản máy chủ như PHP, ASP.NET, JAVA… với mỗi thành phần này chúng ta có các framework khác nhau.
Framework cho ứng dụng di động giúp bạn có thể viết code một lần và có thể chạy trên iOS và Android. Đó chính là điểm mạnh của nó để giảm thời gian phát triển sản phẩm so với native code. Hiện tại các framework này đa số dùng Javascript làm ngôn ngữ phát triển nổi bật như là React Native của Facebook, ngoài ra còn có Xamarin của Microsoft dùng C#, Flutter dùng ngôn ngữ Dart của Google.
Framework giúp tăng hiệu suất, mở rộng các chức năng và cung cấp các thư viện sẵn có để các nhà phát triển không phải làm lại từ đầu.
Có rất nhiều framework khác nhau từ nhỏ đến lên, từ ngôn ngữ này đến ngôn ngữ khác — nhà phát triển có thể lựa chọn dựa trên nhu cầu dự án hoặc phong cách làm việc của riêng họ. Mỗi ngôn ngữ lập trình có ít nhất một framework. Các thư viện trong mỗi framework cung cấp các gói có thể sử dụng lại của ngôn ngữ đó.
Một framework cho web bao gồm:
Libraries: Thư viện là các đoạn mã xây dựng sẵn cho một chức năng nào đó (Design pattern), bạn có thể tái sử dụng chức năng đó mà ko phải code lại. Có nhiều tools quản lý thư viện như NPM, Composer…
API: là phương thức trao đổi dữ liệu giữa các ứng dụng chính và ứng dụng khác. Đọc thêm RESTful API là gì nhé.
Scaffolding: Một bộ khung các quy tắc mà một framework MVC sử dụng quy hoạch cơ sở dữ liệu có thể được truy cập như thế nào.
AJAX: update thông tin lên database mà không cần load lại trang.
Caching: giúp giảm request đến máy chủ, tăng tốc độ load trang.
Security: framework xác thực và ủy quyền user.
Compilers : trình biên dịch từ code của bạn qua ngôn ngữ cho máy.
“Viết một nơi, chạy muôn nơi” là code được viết một lần duy nhất trên một platform, nhưng có thể chạy trên nhiều platform khác nhau. Với sự đa dạng ngày càng gia tăng của thiết bị di động, lập trình viên hiện đang gặp thêm nhiều khó khăn để cho ra được ứng dụng vì user hiện phân bố ở nhiều platform khác nhau.
Mục tiêu của bài viết là cách viết multi-platform apps (ứng dụng đa nền tảng) với code reuse. Để hỗ trợ các bạn trong quá trình phát triển ứng dụng di động đa nền tảng, chúng tôi xin giới thiệu các framework đa nền tảng tốt nhất hiện nay, có thể làm việt trên nhiều nền tảng thông dụng bao gồm Android, iOS…
React Native là một framework cho phép các lập trình viên phát triển ứng dụng di động thiết kế các ứng dụng di động đa nền tảng với sự trợ giúp của javascript. Với React – Native, lập trình viên có thể sử dụng một bộ mã duy nhất cho cả nền tảng iOS và Android.
Flutter là mobile UI framework của Google để tạo ra các giao diện native chất lượng cao trên iOS và Android trong khoảng thời gian ngắn sử dụng ngôn ngữ Dart. Flutter hoạt động với source code có sẵn, được sử dụng bởi các nhà phát triển và các tổ chức trên khắp thế giới, đồng thời nó open-source và miễn phí.
3. Xamarin
Là 1 nền tảng lập trình ứng dụng di động cross-platform (có nghĩa là code một lúc có thể chạy trên được cả iOS lẫn Android). Xamarin có những đặc điểm riêng biệt, hiếm có so với các frameworks hiện tại trên thị trường khi mà khả năng native access và trải nghiệm người dùng native vẫn đang bị đặt nghi vấn.
Ứng dụng mẫu của Xamarin giúp công việc khởi đầu suôn sẻ hơn; ứng dụng được viết rất rõ ràng và còn có thể được dùng là mẫu tham khảo.
Xamarin có thể chia sẻ đến 75% code được viết ra đến các nền tảng di động lớn, từ đó tiếp kiệm rất nhiều thời gian và chi phí.
Cung cấp functionality testing và quality assurance (kiểm tra tính năng và đảm bảo chất lượng) cho vô số thiết bị để đảm bảo tích hợp chuẩn xác (Xamarin thậm chí còn có giả lập Android riêng)
Khuyết điểm: Với Xamarin, vì sự cố tương thích, bạn sẽ vẫn không thể sử dụng được vô số thư viện nguồn mở cho iOS và Android. Phiên bản miễn phí vô cùng hạn chế, rất khó dùng trong các project lớn.
PhoneGap cũng là một framwork ứng dụng di động đa nền tảng nguồn mở cho phép các lập trình viên xây dựng các ứng dụng di động bằng HTML, CSS và Javascript. Nó tập trung một kiến trúc có khả năng bổ trợ để giúp các lập trình viên bằng cách tạo các ứng dụng nổi bật với việc sử dụng các khả năng của thiết bị qua các API.
Ưu điểm:
Cho phép tạo ứng dụng lai bằng những công nghệ web phổ biến (HTML5, CSS3 và JavaScript),
Cho phép bạn deploy một code base duy nhất lên nhiều nền tảng khác nhau, trong đó có iOS, Android, Windows Phone, BlackBerry, Firefox OS,…
Cấu trúc cho phép áp dụng plugin, mở rộng (theo module) APIs thiết bị và nhiều lợi ích khác.
Cho phép áp dụng thanh toán tích hợp/in-app thông qua App Store cho iOS, Google Play Store cho Android,…
Khuyết điểm: Khả năng hỗ trợ đồ họa hạn chế cho ứng dụng. Bạn hiển nhiên vẫn có thể tìm một số plugin cho từng yêu cầu cụ thể, nhưng plugin cho một số platform cần thiết có thể bị lỗi thời, hoặc bị bỏ ngang.
Tôi đã phát hiện ra rằng, các ứng dụng Android của tôi không thể sử dụng các icon tương thích, điều này làm cho các icon của ứng dụng xấu xí và có hình dạng kì lạ trên các launcher khác nhau, vì thế mà, cái cần giải quyết chắc chắn phải là tạo ra các icon tương thích và hoạt động một cách hoàn hảo.
Với các API > 26, hệ điều hành android sẽ tự động dùng icon tương thích, có thể từ đó mà dẫn đến vấn đề về app icon trên các app có sẵn, giống như ví dụ sau đây.
Ví dụ: Các app icon cũ
Để tránh nó thì cần phải tại ra adaptive icon, để làm được thì bạn cần các dữ liệu asset như sau:
Icon không có background, như mẫu bên dưới (gọi là foreground)
Màu background
Ảnh icon Foreground
Với các yếu tố này, hãy làm theo các bước sau để tạo biểu tượng bằng Image Asset Studio.
Mở project trong Android Studio
Chọn tệp app
Trỏ đến File → New → Image Asset
Trong thẻ “Foreground Layer”, chọn hình ảnh đã được cấp và thay đổi kích thước để có được hình dáng phù hợp cho icon
Trong thẻ “Background Layer”, sử dụng background đã có sẵn
Click nút Next và sau đó là Finish
Sau đó, các icon được tạo trong thư mục “mipmap- * * * *”
Cấu hình của Foreground layer
Cấu hình Background layer
Màn hình cuối cùng và các asset đã được tạo
Bạn cần thêm các biểu tượng tròn mới này vào roundIcon tương ứng trên AndroidManifest.xml
Babel là trình chuyển đổi cho JavaScript phổ biến giữa các nhà phát triển vì khả năng biến ES6 hoặc ES7 thành code có thể chạy trên trình duyệt và thiết bị của bạn.
Điều này rất quan trọng vì hầu hết các thiết bị và trình duyệt vẫn hỗ trợ các chuẩn cũ hơn được thiết lập tốt như ES5. Vì vậy, các nhà phát triển có thể viết code của họ trong các công ước mới nhất và không phải lo lắng về các lỗi do không tương thích.
var numbers = [ 5, 10, 15];
console.log(numbers.map(function (number) {
return number + 5;
})); //
Đây là một điểm cộng khác về việc sử dụng Babel. Bạn là nhà phát triển có thể viết code của bạn trong ES6 hoặc ES7, như chúng ta có thể thấy ở trên, đoạn code ngắn gọn, đơn giản hơn. Babel sẽ biên dịch code của chúng tôi sang mã JavaScript của chúng tôi để code tương thích với trình duyệt.
Để thêm lời khen ngợi cho Babel, nó là tương thích nhất của tất cả các transpilers ES6, vượt xa các transpilers khác như Traceur của Google.
Giờ đến Babel 7!
Babel 6 được phát hành vào năm 2015. Kể từ đó, nó đã trải qua hơn 4000 cam kết và 50 lần phát hành trước. Giờ đây, những người ở Babel đã mang đến cho chúng tôi bản cập nhật lớn tiếp theo: Babel 7.
Babel giờ đây nhanh hơn và đi kèm với công cụ nâng cấp, cấu hình JavaScript, ghi đè cấu hình, tùy chọn giảm kích thước, hỗ trợ cho Phân đoạn JSX của React và quan trọng hơn là … hỗ trợ cho TypeScript! Trong bài này, tôi sẽ giới thiệu một số bản cập nhật và tính năng chính của Babel 7.
babel-upgrade
Như đã đề cập trước đây, Babel 7 đi kèm với một công cụ nâng cấp mới được gọi là babel-upgrade. Công cụ này sẽ tự động thực hiện bất kỳ thay đổi nâng cấp nào trong tệp package.json và tệp .babelrc.
Để sử dụng công cụ này, bạn có thể chạy nó trực tiếp trên kho lưu trữ GitHub:
$ npx babel-upgrade
Hoặc bạn có thể cài đặt nó bằng NPM / Yarn:
$ npm i babel-upgrade -g
JavaScript Configuration Files
Babel 7 giới thiệu một tập tin mới: babel.config.js. Xin lưu ý rằng tệp này không phải là thay thế cho .babelrc. Nó chỉ đơn giản là một bổ sung tuyệt vời có thể hữu ích cho một số trường hợp sử dụng nhất định.
Bạn có muốn lập trình cấu hình cho dự án của mình không? Hay bạn muốn biên dịch dự án node_modules của bạn? Khi đó, file babel.config.js là tệp hoàn hảo cho bạn!
Dưới đây là ví dụ về tệp babel.config.js và loại mã bạn có thể thêm vào bên trong:
File .babelrc mặt khác, là nhiều hơn một tập tin JSON thay vì một tập tin JS:
{
"presets": [...],
"plugins": [...]
}
Bằng cách thêm một file babel.config.js, Babel sẽ dễ dàng giải quyết việc cấu hình thay vì tra cứu từ mỗi tệp cho đến khi tìm thấy mã cấu hình. Điều này cũng cho phép chúng ta dễ dàng thực hiện ghi đè.
Overrides
Ghi đè trong Babel sẽ cho phép bạn chỉ định các cấu hình khác nhau trên mỗi glob. Vì vậy, nếu dự án JavaScript của bạn yêu cầu các cấu hình biên dịch khác nhau cho các tệp thử nghiệm, mã máy khách và mã máy chủ, chúng tôi sẽ không phải tạo một file .babelrc riêng biệt cho mỗi tệp. Thay vào đó, chúng ta có thể làm như thế này:
Babel 7 đã thực hiện một vài thay đổi đối với các tùy chọn như loose plugin và thêm một vài tùy chọn mới cho các plugin khác.
“Pure” Annotation
Bây giờ, khi Babel transpiles một lớp ES6, nó chú thích lớp transpiled với một /*#_PURE_*/ chú thích. Điều này nói với các bộ phận khai thác như Uglify về một cái gì đó được gọi là Dead Code Elimination.
var C =
/*#_PURE_*/
function () {
// code
}();
Support for TypeScript! 🙌
Với sự giúp đỡ từ những người ở TypeScript, Babel giờ đây có thể phân tích cú pháp TypeScript bằng cách sử dụng một gói mới có tên @babel/preset-typescript.
Vì vậy, nếu bạn sử dụng TypeScript để viết một ứng dụng như thế này:
interface Hero {
name: string;
}
function Heroes(hero: Hero) {
return "I am " + hero.name;
}
Babel sẽ chuyển nó thành:
function Heroes(hero) {
return "I am " + hero.name;
}
JSX Pragment
React 16 đã cung cấp cùng với Fragment, giúp chúng ta trả về nhiều con từ phương thức render của component mà không cần phải sử dụng một div làm parent.
Các polyfills rất quan trọng trong JavaScript vì chúng cho phép chúng ta sử dụng các tính năng khác như Promises và Symbols trong các môi trường thậm chí không hỗ trợ chúng. Bằng cách này, Babel có thể làm nhiều hơn là chỉ thay đổi cú pháp của mã của chúng tôi. Nó có thể thực hiện các hàm và đối tượng dựng sẵn.
Macros
Babel lúc đầu chỉ là một trình chuyển đổi mã ES6 thành ES5. Nhưng hiện nay, nó còn hơn thế nữa. Có hàng trăm plugin có thể được sử dụng cho các thư viện cụ thể và các trường hợp sử dụng để cải thiện hiệu suất tổng thể của ứng dụng của chúng ta.
Nhưng việc thêm các plugin này vào ứng dụng của chúng ta là một nhiệm vụ không đơn giản. Ví dụ: nếu bạn đã tạo Ứng dụng React bằng công cụ create-react-app thì bạn sẽ không thể sử dụng các plugin này. Ngoài ra, bạn là nhà phát triển sẽ phải biết mọi thứ về plugin và cách nó sẽ thay đổi mã ứng dụng của bạn khi bạn build ứng dụng.
Một giải pháp nhanh cho việc này là cài đặt gói babel-plugin-macros trong ứng dụng của bạn. Gói này không chỉ giúp việc cấu hình mã của bạn thành plugin tương thích, nó còn giúp dễ dàng viết các biến đổi tùy chỉnh cho các tình huống cụ thể cho ứng dụng của bạn.
Caller Metadata
Các gói phần mềm @babel/core cũng có một tùy chọn mới được gọi là caller sẽ cho phép chuyển bất kỳ siêu dữ liệu đến các giá trị đặt trước và plugin của chúng tôi .
Bằng cách này, Babel đã tạo ra một phương pháp mới cho công cụ để cung cấp cho chúng tôi nhiều cấu hình mặc định hơn cho ít cấu hình hơn.
Phần kết luận
Nếu bạn đang băn khoăn tại sao bản cập nhật mới của Babel lại là một bản phân phối lớn, hãy nghĩ rằng ngày nay có hơn 1 triệu kho lưu trữ trên GitHub tùy thuộc vào babel-core. Framework và thư viện như React và Vue và các công ty khổng lồ như Netflix và Facebook sử dụng Babel trong các dự án của họ.
Tôi hy vọng sẽ thấy nhiều cập nhật tuyệt vời hơn từ nhóm tại Babel. Đó là các tính năng mới như hỗ trợ sử dụng TypeScript. Hãy gửi cho họ bất kỳ phản hồi nào có thể giúp họ phát triển Babel lên các cấp độ mới.
Docker đã làm thay đổi đáng kể cách chúng ta phát triển các ứng dụng. Docker thực sự dễ dàng cho bắt kỳ lập trình viên nào có thể chạy các ứng dụng phức tạp chỉ với 1 dòng lệnh mà không cần phải lo lắng về các thông tin chi tiết khác. Những lợi ích này rất tiện lợi khi sử dụng làm việc cùng team hoặc enterprise context.
Tôi vẫn nhớ phải mất đến 3 ngày đầu tiên khi tham gia vào công ty hiện tại để cấu hình project và tất cả các thư viện,công cụ liên quan khác. Docker có thể giúp việc này dễ hơn, nhanh hơn và có tính nhất quán.
Việc duy trì các công cụ của Docker khá phức tạp, ngoài ra một số thứ có thể sẽ dễ dàng hơn khi chạy ứng dụng trong môi trường phát triển ứng dụng bình thường như là debugging ứng dụng của bạn từ trình soạn thảo (IDE). Khi sử dụng docker thì cần một số cấu hình bổ sung. Và trong trường hợp này là Xdebug, đây không phải là một nhiệm vụ dễ dàng.
Tôi không tìm thấy bất kỳ hướng dẫn nào từ lúc bắt đầu cho đến khi kết thúc. Đó là lý do tại sao tôi viết bài này. Nó sẽ hướng dẫn bạn từng bước thông qua quá trình cài đặt và cấu hình Xdebug bằng PHPStorm với một ứng dụng Dockerized Symfony 4.
Chuẩn bị
Chúng ta sẽ thực hiện nó trên một máy tính Ubuntu 18.04, PHPStorm 2018.1.4 và các phiên bản mới nhất của Docker, Docker Compose (Hướng dẫn này có thể không đúng khi thực hiện trên các hệ điều hành khác).
Bạn cần có kiến thức cơ bản về Docker, PHP và XDebug.
Bạn có thể sao chép kho lưu trữ (repository) này làm cơ sở để theo dõi hướng dẫn vì nó chứa một ứng dụng Symfony Flex cơ bản với tất cả các công cụ Docker được giải thích trong bài viết này.
Cấu hình ứng dụng Dockerize
Tất nhiên, để có thể sử dụng Xdebug, bạn phải cài đặt nó trên Docker container của bạn.
Cách để làm điều này, sẽ phụ thuộc vào basic image của bạn. Tôi luôn sử dụng alpine based images. Tôi sẽ không nói chi tiết về cách Dockerize một ứng dụng Symfony. Bạn có thể làm theo cùng với Dockerfile đã có trong kho lưu trữ demo.
Đây là đoạn trích có liên quan của Dockerfile cài đặt Xdebug:
Tôi không muốn có một Dockerfile riêng biệt cho development and production, vì vậy tôi đã xác định một đối số xây dựng sẽ cho biết liệu chúng tôi có muốn cài đặt Xdebug hay không.
Sau đó, trên tệp Docker-compose của tôi, tôi có định nghĩa sau cho ứng dụng của mình:
Quan trọng là lệnh “env_file”, thông báo cho Compose tải các biến môi trường từ một tệp “.env”, là cách tiêu chuẩn cho các ứng dụng Symfony 4.
Chúng tôi sẽ sử dụng tập tin đó để thêm một số biến môi trường cần thiết cho Xdebug. Nếu thích bạn cũng có thể thêm trực tiếp vào tập tin docker-compose bằng cách sử dụng phần “environment”.
PHP_IDE_CONFIG – Biến này định nghĩa cấu hình máy chủ được liên kết với ứng dụng. Chi tiết sẽ được giải thích sau.
XDEBUG_CONFIG – Biến này cho phép xác định một số cấu hình Xdebug. Các “remote host” là ip riêng máy chủ của bạn (một trong những PHPStorm của bạn đang chạy). “Remote_port” là cổng PHPStorm sẽ lắng nghe các kết nối Xdebug đến. Hai cài đặt này cho phép PHPStorm và Xdebug giao tiếp. Nó sẽ không làm việc mà không có điều này.
Chúng ta sẽ thêm chúng vào tệp “.env” của chúng ta như sau:
Điều đầu tiên bạn nên làm là kiểm tra cài đặt Debug của bạn. Trong PHPStorm, vào File -> Settings -> Languages and Frameworks -> PHP> Debug.
Đảm bảo rằng bạn có một số cổng mà bạn đã định cấu hình trước đó trong “XDEBUG_CONFIG” environment variable:
Tiếp theo, chúng ta cần cấu hình một máy chủ. Đây là cách PHPStorm sẽ ánh xạ (map) đường dẫn tệp trong hệ thống cục bộ của bạn tới đường dẫn tệp trong vùng chứa (container) của bạn.
Đi tới File -> Settings ->Languages and Frameworks -> PHP -> Servers
Đặt tên cho máy chủ của bạn. Nó phải khớp với giá trị bạn đã xác định trong biến “PHP_IDE_CONFIG” của bạn. Chúng tôi sẽ gọi nó là “symfony-demo”.
“Host” và “port” là cách truy cập ứng dụng của bạn. Trong trường hợp của tôi là localhost: 8888.
Và sau đó là “Path mappings”.
Trong phần “Project files”, bạn phải ánh xạ đường dẫn gốc của ứng dụng của bạn tới đường dẫn bên trong container. Trong trường hợp của tôi là “/var /www /app”.
Nhấp vào “Apply” để lưu cấu hình của bạn.
Phần cuối cùng là cấu hình remote debugger của dự án của bạn.
Ở trên cùng bên phải, nhấp vào “edit configurations”:
Nhấp vào ký hiệu “dấu cộng” màu xanh ở trên cùng bên trái và chọn “PHP Remote Debug” từ danh sách.
Bây giờ cấu hình nó như thế này:
Đảm bảo bạn liên kết nó với “server” đã tạo trước đó. Sử dụng “PHPSTORM” làm idekey.
IDE của bạn bây giờ sẽ được cấu hình đúng.
Kiểm tra
Mở “src/Controllers/ HelloController.php” và đặt breakpoint trong phương thức “hello”.
Bắt đầu Docker container của bạn với:
docker-compose up
Sau đó nhấp vào biểu tượng “Start Listening for PHP Debug connections” ở góc trên cùng bên phải của PHPStorm.
Mở http://localhost:8888?XDEBUG_SESSION_START=PHPSTORMNếu thực hiện đúng, bạn sẽ thấy điểm dừng thực hiện tại breakpoint của bạn.
Bây giờ bạn đã có một môi trường phát triển được cấu hình đầy đủ với Docker và Xdebug được tích hợp với IDE PHPStorm.
Chọn framework và thư viện mới rất thú vị nhưng cũng rất căng thẳng. Ngay cả khi đã phân tích kĩ lưỡng thì bạn cũng không biết được mình sẽ tìm thấy cái gì.
Sau khoảng 2 năm sử dụng Vue, hầu như ngày nào cũng xài, tôi cuối cùng có một vài quan điểm để viết về nó.
Điểm tốt
Khả năng phản ứng
Ràng buộc về dữ liệu là một vấn đề lớn trong thế giới giao diện người dùng. Thay vì quản lý DOM như chúng ta đã làm với jQuery, bây giờ chúng ta tập trung vào dữ liệu. Vue xử lý rất gọn gàng bằng hệ thống ràng buộc dữ liệu phản ứng hai chiều.
Để đạt được nó Vue thêm một số getters và setters cho mọi biến trong state của bạn để nó có thể theo dõi các thay đổi và cập nhật DOM tự động (cough this.setState() cough). Cách tiếp cận này không hoàn hảo, chúng ta sẽ hiểu rõ hơn về nó sau.
Bao gồm cả pin
Với Vue, bạn không cần phải sử dụng các gói không official như MobX hoặc React Router cho những phần quan trọng trong app của mình. Vue cung cấp Vue Router và Vuex , một trình quản lý trạng thái trung tâm phản ứng lấy cảm hứng từ Redux. Đây là những thư viện tuyệt vời, nhưng thực tế là chúng được thiết kế riêng cho Vue khiến chúng trở nên tốt hơn.
Tốc độ
Vue thực sự rất nhanh. Có lẽ không phải là nhanh nhất, nhưng hiệu quả của nó là quá mức cần thiết cho phần lớn các dự án web. Lần cuối bạn cần render và cập nhật hàng ngàn phần tử DOM mỗi giây là khi nào?
Mẫu HTML
Đây là một chủ đề gây chia rẽ sâu sắc giữa các JavaScript developer. Bất kể sở thích của bạn, các mẫu HTML đã được thử nghiệm trong nhiều thập kỷ bằng nhiều ngôn ngữ và là lựa chọn chính để viết đánh dấu động trong Vue.
Nhưng Vue cũng hỗ trợ JSX.
Các sản phẩm khác
Các thành phần tệp đơn với HTML, CSS và JavaScript.
Tài liệu tuyệt vời (với một số ngoại lệ được ghi chú bên dưới).
Có thể được áp dụng dần dần, thậm chí được sử dụng như một sự thay thế jQuery.
Dễ dàng để bắt đầu.
Điểm chấp nhận được
Thành phần soạn thảo
Chuyển từ React sang Vue có vẻ rất nhẹ nhàng. Không còn bind(this hoặc setState() khắp nơi nữa. Nhưng sau một thời gian, bạn bắt đầu đặt câu hỏi về tính hợp lệ của cú pháp thành phần của Vue.
Các thành phần Vue được tạo ra với các đối tượng và đây là một ví dụ về việc định nghĩa một hàm thành phần:
Bạn sẽ thêm bản mẫu tương tự cho các thuộc tính được tính toán, trạng thái thành phần, trình theo dõi, v.v. Khá nhiều thứ trong Vue có cú pháp đặc biệt của riêng nó với nhiều bản mẫu.
Ngược lại, đây là điều tương tự đối với Marko, đó là cách dọn dẹp:
class {
increment() {
this.state.count++;
}
}
Quan điểm của tôi ở đây không phải là về việc sử dụng các lớp hay không, nhưng Vue đó đang sử dụng các cấu trúc đối tượng tùy ý thay vì các tính năng ngôn ngữ.
Tôi sẽ không đổ lỗi cho bạn nếu bạn khó chịu khi phải tạo các object gây phiền nhiễu này. Vue cũng cung cấp một cú pháp dựa trên lớp, nhưng nó thực sự là một plan B thôi.
Cộng đồng chat
Cộng đồng Vue giao lưu trên Discord, một cuộc hội thoại được thiết kế cho cộng đồng game thủ. Nếu bạn gặp cản trở, đoạn chat này có lẽ là option tốt nhất của bạn vì các diễn đàn chính thức đều riêng biệt và đừng có liều mạng đi hỏi trên Github.
Chat này hơi lộn xộn, nhưng vấn đề chính là nội dung trò chuyện không thể thông kê được bằng công cụ tìm kiếm. Các câu hỏi tương tự (và các cuộc thảo luận liên quan) sẽ bị xử lý lặp đi lặp lại nhiều lần.
Xu hướng của việc sử dụng các đoạn chat để giải đáp thắc mắc đang làm lu mờ các dự án mã nguồn mở và tôi nghĩ rằng nó cần phải kết thúc. Chả còn ai học tập thể nữa.
Không tuyệt vời quá như người ta nói
Sau một thời gian sử dụng Vue thì bạn sẽ phải nhiều lần thốt lên “nhưng” và nếu” lắm…
Ví dụ:
Hệ thống phản ứng sẽ chỉ theo dõi thay đổi trong những điều kiện nhất định. Đừng kì vọng vào những gì bạn muốn làm. Bạn có thể cần phải thường xuyên san bằng dữ liệu càng nhiều càng tốt để tránh đau đầu. Tất nhiên, tất cả đều được giải thích trong bản tài liệu này.
Hệ thống chuyển đổi <vue-transition> không hoạt động đối với các dạng danh sách. Bạn phải dùng đến <transition-group> hoạt động hơi khác và giới thiệu các element mới vào DOM của mình. Ngoài ra, người ta sẽ kỳ vọng là một điều được giải quyết, nhưng bạn phải tự mình thực hiện nó.
Nếu bạn cần trạng thái không phản ứng trong một cá thể thành phần, bạn có thể sẽ thích uncharted territory.
Đừng hiểu sai, tui không phải đang tài trợ quảng cáo gì đâu, nhưng có vẻ như mỗi khi bạn bắt đầu dùng nó thì lại pop up một cái gì khác khó chịu.
Điểm xấu
Mẫu kiến trúc không rõ ràng
Đây là một ví dụ: tốt hơn là xử lý các yêu cầu API trong các thành phần của bạn hay trong Vuex?
Tài liệu này cung cấp các ví dụ về cách xử lý logic API trong Vuex. Thậm chí còn có một sơ đồ đẹp và đầy màu sắc như đây:
Vậy liệu điều này có đồng nghĩa là logic xác thực cũng có trong Vuex không? Liệu một nhà quản lý có bắt đầu dàn xếp tất cả các logic ứng dụng ngay bây giờ không?
Đây không phải là vấn đề rõ ràng. Hầu hết mọi người sẽ bắt đầu gắn non-state logic vào hoạt động Vuex hoặc tệ hơn, trực tiếp trong các thành phần bởi vì có một video trên trang chủ của Vue cho biết:
Để trả lời cho câu hỏi ban đầu của tôi: logic API không nên được viết trong Vuex cũng như trong các thành phần. Thậm chí còn có một ví dụ tốt về cách làm điều đó trong một số ví dụ code chính thức.
Phần kết luận
Vue đã không ngừng phát triển và tôi nghi ngờ xu hướng này sẽ sớm ngừng lại. Nó vẫn còn xa React (ít nhất là bên ngoài Trung Quốc) và liên tục cạnh tranh cho một vị trí thứ hai xa với Angular.
Trong quá khứ tôi đã lập luận rằng Vue là một thư viện thực dụng, không giống như React, nó có vẻ lý tưởng hơn. Tôi vẫn nghĩ đó là một phép ẩn dụ tốt.Mặt khác, bây giờ tôi cảm thấy chủ nghĩa thực dụng của Vue cần nhiều hơn nữa việc đánh bóng, tập trung, sang trọng và đơn giản ở cấp độ người dùng.
Sau 2 năm kinh nghiệm của tôi với Vue đã tích cực. Tôi vẫn tin rằng đó là một quyết định tốt để chuyển đội của tôi từ React sang Vue. Không phải vì Vue tốt hơn, mà bởi vì nó phù hợp hơn với chúng ta.Vue chắc chắn thực hiện công việc mà nó dự định làm, và thành công trong những lĩnh vực mà những người khác thất bại, nhưng hôm nay tôi không nghĩ rằng Vue là khách quan tốt hơn hoặc tệ hơn các tùy chọn khác có khả năng trong radar của bạn.
Phụ lục: Vue CLI
Tôi đã không bao gồm Vue CLI trong bài viết này về mục đích và tôi muốn giải thích tại sao.
Vue CLI là một công cụ rất tiện lợi làm giá đỡ cho các dự án Vue .Trong phiên bản 3 mới sắp ra của nó sẽ còn tốt hơn, vì nó là một giải pháp quản lý dự án hoàn chỉnh.
Nhưng, tiện lợi luôn có chi phí và theo tôi, chi phí đó không được hợp lý ở đây.Webpack không phải là khó khăn như rất nhiều người cho rằng đó là việc tạo bộ khởi động của riêng bạn sẽ giảm bớt hầu hết thời gian cấu hình.
Làm cho điều tùy chỉnh của riêng bạn làm cho ý nghĩa hơn rất nhiều khi chi phí làm như vậy là rất thấp.
Việc chuyển đổi từ web 2.0 sang phiên bản 3.0 sẽ có khả năng không được chú ý bởi hầu hết mọi người. Các ứng dụng sẽ không có sự thay đổi nhiều so với trước đây, nhưng sẽ có sự thay đổi đối với phần back-end. Nếu bạn là một người thích sự dự đoán, bạn sẽ muốn xem sét ứng dụng Siacoin cho Cloud. Steemit như một nền tảng cho phương tiện truyền thông và thậm chí Augur là cách để kiểm tra các sự kiện được dự đoán trong tương lai.
Khi bạn bắt đầu thấy bản phát hành của mục blockchain đầu tiên hoạt động đúng, bạn có thể thấy mọi người chuyển từ 2.0 sang 3.0. Đó là bởi vì các developers cho biết sự chuyển của công nghệ 3.0 sẽ dễ dàng và thân thiện với người dùng hơn so với web 2.0.
Trong giai đoạn này, chúng ta sẽ xem xét các công ty và các giai đoạn khác nhau của web 2.0 và cho bạn biết dự án nào từ blockchain sẽ có cơ hội này và dẫn đến sự nâng cấp đến web 3.0.
Các phương thức thanh toán mà mọi người đang sử dụng hiện thường đi qua thẻ tín dụng của các công ty, ngân hàng hoặc thậm chí là PayPal. đây sẽ là những nơi có trách nhiệm nhận tiền và đảm bảo rằng nó được chuyển đúng cách, và tránh các hành vi trộm cắp khi giao dich.
Với các công việc như trên, các công ty thường thu phí rất cao. Bạn sẽ phải trả một chi phí khá lớn cho các công ty để được bảo mật.
Theo David Sessford của Ready Steady Sell với sự xuất hiện của tiền điện tử, bạn sẽ nhận thấy rằng rất nhiều mối quan tâm về an ninh sẽ biến mất và chi phí thực hiện giao dịch sẽ thấp hơn một chút. Một số loại tiền tệ hiện đang được sử dụng trên toàn thế giới bao gồm Zcash, Monero, Bitcoin và Litecoin. Chúng ta sẽ có một tài khoản để truy cập Internet và quản lý tài sản trên mạng. Nếu bạn là người bán hàng, bạn sẽ cần phải liên kết với một công ty như Bitpay để tích hợp tiền điện tử vào hệ thống thanh toán của bạn.
Và đây sẽ là một sự chuyển đổi thuận lợi, tuy nhiên, bạn sẽ nhận thấy rằng nó sẽ xảy ra mà không cần sử dụng loaị tiền điện tử. Điều này có nghĩa là bạn vẫn sẽ có thể sử dụng các cách thức giao dịch thông thường, thay vì giao dịch dựa trên giá trị các đồng tiền ảo ở các sàn chứng khoán ở mọi nơi hiện nay.
Bạn sẽ thấy rằng công ty Stellar Lumens phân chia lại cách thức thanh toán bằng cách kết nối tất cả các hệ thống với nhau từ ngân hàng, người dùng và thậm chí cả hệ thống thanh toán. Điều này sẽ cho phép các giao dịch nhanh hơn trên toàn cầu. Điều này không cần phải được thực hiện bằng các loại tiền ảo, nhưng có thể được thực hiện bằng bất kỳ loại tiền tệ nào. Khi bạn sử dụng Stellar Lumens, bạn thậm chí sẽ không nhận ra rằng bạn đang sử dụng một loại tiền ảo để hoàn thành công việc vì các giao dịch được chạy trên phần phụ trợ của tiền tệ.
The Request Network là một đối thủ cạnh tranh trực tiếp với PayPal. Đây là một nền tảng giúp bạn thực hiện thanh toán với bất kỳ ai và bất kỳ lúc nào. Khi bạn đang thực hiện thanh toán ở đây chúng được thực hiện bằng cách sử dụng blockchain, bên thứ ba sẽ được loại bỏ, nhưng thanh toán sẽ vẫn diễn ra một cách thuận lợi an toàn.
Thậm chí còn tốt hơn những gì có ở Request Network, và nên biết rằng mọi người đều không muốn giao dịch với tiền điện tử, và đây là một trong những trường hợp họ đã triển khai các chương trình khác nhau để làm cho yêu cầu của mọi ngừoidễ dàng hơn đối với bât kì loại tiền tệ nào. Vì họ đang sử dụng công nghệ blockchain, tuy nhiên, trong thực tế mạng lưới của họ có một lợi thế lớn khi thực hiện các giao dịch với mức chi phí thấp hơn đáng kể.
Hầu hết mọi người sẽ tiếp tục sử dụng phương tiện truyền thông, nhưng thậm chí sau đó tất cả chúng ta đều thấy nó có một số sai sót nghiêm trọng trong cách nó hoạt động. Một trong số đó bao gồm các vụ bê bối Facebook, các cơ chế được sử dụng để làm cho bạn thấy những gì Instagram hoặc Twitter muốn bạn xem, nhưng cũng là cách quảng cáo được cho là thiếu sót.
Vấn đề chính mà bạn phải giải quyết ở đây là trên trang web này là thông tin, quyền riêng tư của bạn có bị kiểm soát và dễ dàng xâm nhập,điều khiển hay không. Ví dụ như bạn không muốn để bạn bè xem lịch sử trình duyệt của mình, nhưng các trang mạng xã hội thực hiện điều này bằng cách quét cookie của bạn và sau đó sẽ tạo ra hồ sơ dựa trên lịch sử của bạn và bán nó.
Và trong như những chú mèo dễ thương, chúng tôi muốn sử dụng điện thoại để giải trí và giữ liên lạc với những người bạn ở xa. Vì vậy, điều này khiến chúng tôi không thể nào rời xa các phương tiện truyền thông.
Trong sự phát triển truyền thông và mạng xã hội Steemit sẽ là giải pháp dẫn đầu với công nghệ blockchain cho web 3.0. Nền tảng này là một nền tảng có mô hình riêng của mình mà những người sáng tạo nội dung được sắp xếp bởi một nhóm các cộng sự. Khi nội dung được upvoted sẽ có chất lượng tốt, nó sẽ gây ra một sự thay đổi của Steem, nó sẽ là đồng tiền được sử dụng ở đây.
Đây là một nền tảng không có quảng cáo và thậm chí không lưu trữ thông tin về người dùng, nếu bạn đang hoạt động thì bài đăng sẽ không cần phải kiểm duyệt, bạn thậm chí còn được chi trả bằng tiền điện tử. Steemit là quản lý công nghệ này, nhưng bạn thậm chí còn tìm thấy DTube, đó là sự thay thế YouTube dựa trên blockchain.
Nhược điểm là Steemit đã rất thành công,nên nó đang bắt đầu thu hút rất nhiều sự cạnh tranh. Một trong những đối thủ cạnh tranh là Narrative là một trang web được thiết kế đẹp mắt. Nó tương tự như Steemit, và chủ đề được tạo ra bởi người dùng cũng là người quản trị. Narrative cũng đã quyết định dùng một phần trang web của mình để quảng bá thương hiệu, những nội dung chất lượng sẽ được truyền bá rộng rãi trên diễn đàng để đến với mọi người.
Bạn cũng có thể tìm thấy Sapaien, một diễn đàng tin tức; Indorse sẽ là một sự thay thế cho LinkedIn , và thậm chí là ONG. Social là một chương trình tuyệt vời mang tính xã hội và tập trung khá nhiều vào sự riêng tư của mọi người.
Thông thường,chúng ta sẽ tìm các công ty giải trí khác nhau, một giải pháp thay thế tuyệt vời cho giải trí thông thường và chúng ta thường tìm đến Netflix và YouTube. Phần tồi tệ nhất của các công ty này là sự kiểm soát thị trường và điều này không để lại nhiều chỗ cho sự cạnh tranh. Nó cho phép mọi người tạo ra nhiều nội dung, sau đó các công ty thu thập và bán dữ liệu.
Thông thường, người dùng sẽ xuất bản nội dung trên các nền tảng này và hy vọng họ có thể tạo ra nội dung lớn, nhưng thường những điều họ tạo ra không đáp ứng được như thế. Bạn cũng sẽ thấy mọi người bắt đầu đặt câu hỏi về các kiểm duyệt khác nhau mà YouTube đang thực hiện, cách nó thay đổi kế hoạch thanh toán của mình và thậm chí cả Spotify trả cho các nhạc sĩ đăng bài hát trên mạng như thế nào.
Bạn sẽ thấy rằng có rất nhiều chương trình trong blockchain đã sẵn sàng để phá vỡ điều này . Ngành công nghiệp âm nhạc đã thực sự nhìn thấy rất nhiều giao dịch xấu làm tổn thương mọi người và thực sự đang tìm cách dẫn đầu để thay đổi vấn đề này. Imogen Heap, một nhạc sĩ, đã bắt đầu dự án của riêng mình dựa trên blockchain được gọi là Mycelia, có nghĩa là để cung cấp cho các nhạc sĩ và những người sáng tạo âm nhạc một mức giá hợp lý cho âm nhạc mà họ đã thực hiện. Bạn cũng sẽ nhận thấy rằng bạn có Voise là một nền tảng tuyệt vời được phân cấp và rất dễ dàng để các nghệ sĩ tiếp cận người hâm mộ của họ.
Flixxo là một công ty đang sử dụng Ethereum để cố gắng soán ngôi YouTube, nhưng bạn có Dtube cũng từ Steem. Bạn cũng sẽ thấy rằng có một ứng cử viên khác để loại bỏ YouTube là Videocoin, một công ty khởi nghiệp đã đạt được rất nhiều sự lôi kéo với 35 triệu đô la trong khoảng thời gian ICO.
Nếu bạn đang tìm kiếm các giải pháp để lưu trữ, bạn sẽ nhận thấy rằng Cloud là một giải pháp tuyệt vời.Bạn sẽ thấy được đây là nơi bạn có thể lưu trữ mọi tập tin và phần cứng một cách dễ dàng với chi phí rẻ, nhưng cũng có thể truy cập chúng từ bất kì đâu trên thế giới.
Vấn đề với cloud là tất cả thông tin sẽ được lưu trữ ở một vị trí tập trung mà mọi người có thể truy cập. Đây là điểm duy nhất của vấn đề, bởi vì làm thế nào để đảm bảo an toàn cloud chỉ với một công ty. Điều này có thể dễ dàng dẫn đến một sự thỏa hiệp trong công ty và khi điều này xảy ra, bạn có thể dễ dàng để tất cả các dữ liệu của bạn tiếp xúc với tất cả mọi người.
Vì đó là một trường hợp, nó sẽ là thời gian tốt để phân quyền lưu trữ . Đây là nơi bạn sẽ thấy Siacoin bước lên như là công ty lớn nhất ở đây. Đây là một công ty cho phép mọi người sẽ có thể thuê thêm bộ nhớ và thanh toán dưới dạng tiền điện tử. Đây là một công ty có thể dễ dàng có một số tăng trưởng mạnh trong tương lai bởi vì nó đã rẻ hơn so với Google hay Amazon.
Bạn sẽ thấy một startup khác cũng được gọi là Filecoin. Đây là một công ty có một ICO lớn và là một trong những công ty lớn nhất trong lịch sử với 257 triệu. Đây là một công ty có mạng phân quyền giữa các tệp được lưu trữ, nhưng với giá cạnh tranh. Bạn sẽ thấy rằng Storj cũng đã ném chiếc mũ của họ vào chiếc nhẫn cũng như với một kế hoạch tuyệt vời mà lại thấp về giá cả, nhưng cao về an ninh chỉ với người dùng nhận được vào dữ liệu.
Mô hình quảng cáo trực tuyến hiện đang được sử dụng một cách không đúng. Thông thường bạn có thể thấy điều này chỉ bằng cách truy cập một số công ty quảng cáo trên trang web như YouTube và Facebook. Khi bạn đang chạy một trang web bạn biết đó là một doanh nghiệp lớn và thường khi bạn yêu cầu mọi người đăng ký, bạn sẽ mất người nhanh chóng. Thường thì cách tốt nhất để kiếm tiền là cho phép quảng cáo được hiển thị trên trang web của bạn và lưu lượng truy cập càng nhiều thì bạn càng nhận được nhiều thu nhập hơn từ quảng cáo.
Nhược điểm là phần lớn thời gian mọi người bỏ qua quảng cáo. Khi mọi người không xem quảng cáo thì điều đó sẽ không tốt đối với bạn, nhưng một số người thậm chí còn có các trình chặn quảng cáo không cho quảng cáo hiển thị. Ngay cả Google, kiếm được nhiều tiền nhất từ quảng cáo đều có tiện ích mở rộng trên trình duyệt Chrome để chặn quảng cáo.
Những thay đổi có thể xảy ra khi đóng góp không phải là của những người nhấp vào quảng cáo được hiển thị, nhưng lợi nhuận sẽ nhận được dựa trên lượng khách truy cập. Bạn sẽ thấy rằng một số công ty blockchain đang làm việc về điều này. Một trong những điều lớn nhất đang diễn ra là Basic Attention Token. Đây là một công ty đã tạo ra điểm kết nối những người sáng tạo nội dung, với các nhà quảng cáo, và sau đó là người dùng mà không có bất kỳ công ty lớn nào hoạt động ở giữa.
Bạn sẽ nhận thấy rằng công ty thậm chí còn có trình duyệt riêng được gọi là Brave. Với Browers này trong đó người dùng có thể trả tiền giao dịch nhỏ cho những người sáng tạo với nội dung mà họ thích và các nhà quảng cáo sau đó sẽ trả tiền cho người tiêu dùng cho sự chú ý. Điều này là tất cả được thực hiện mà không ai biết về nó.
Bạn cũng sẽ nhận thấy rằng Oyster Pearls cũng là một mô hình quảng cáo trực tuyến khác. Đây là một công ty có động cơ trong các công trình cho phép người dùng đóng góp nội dung cho các trang web họ yêu thích cho GPU và CPU nó giúpcho các trang web ít phụ thuộc vào quảng cáo hơn. Điều này cũng sẽ cho phép các trang web và người tạo nội dung được lưu trữ trên nền tảng phi tập trung, rẻ hơn và thậm chí còn an toàn hơn.
Bạn sẽ tìm thấy một dự án lớn được gọi là Substratum đang được thực hiện để chạy trên Internet. Nền tảng này sẽ cho phép mọi người đóng góp tài nguyên máy tính vào một trang web phi tập trung, mà sẽ không có bất kỳ loại kiểm duyệt hoặc kiểm soát nào được thực hiện bởi một tổ chức.
Bạn sẽ thấy rằng người dùng sẽ được thanh toán bằng tiền điện tử để giúp giữ cho Substratum hoạt động. Bạn sẽ nhận thấy rằng bạn có thể tìm thấy nội dung được lưu trữ trong trình duyệt thông thường mà không có bất kỳ điều gì can thiệp vào nội dung mọi người sẽ thấy. Hãy nghĩ điều này có thể giúp cho những người đang bị chính phủ chèn ép.
Trong bài viết này, tôi sẽ chỉ cho bạn cách dễ nhất có thể để xây dựng một ứng dụng trò chuyện bằng React.js. Nó sẽ được xây dựng hoàn toàn mà không có code phía máy chủ, vì chúng tôi sẽ cho phép API Chatkit xử lý phía back-end.
Tôi giả sử rằng bạn biết JavaScript cơ bản và bạn có tìm hiểu một chút React.js trước đây. Ngoài ra, không có điều kiện tiên quyết.
Nếu bạn làm theo hướng dẫn này, bạn sẽ hoàn thành được ứng dụng trò chuyện của riêng bạn, và sau đó bạn có thể xây dựng thêm nếu bạn muốn.
Let’s get started!
Bước 1: Cắt giao diện người dùng thành các components( thành phần nhỏ)
React được xây dựng xung quanh các components, vì vậy điều đầu tiên bạn muốn làm khi tạo ứng dụng là cắt giao diện người dùng thành các components.
Hãy bắt đầu bằng cách vẽ một hình chữ nhật xung quanh toàn bộ ứng dụng.Đây là thành phần gốc của bạn và tổ tiên chung cho tất cả các thành phần khác. Hãy gọi nó App:
Khi bạn đã xác định thành phần gốc của mình, bạn cần tự hỏi mình câu hỏi sau:
Đường dẫn con có thể có thành phần nào?
Trong trường hợp của chúng tôi, nó có ý nghĩa để cung cấp cho nó ba thành phần con, mà chúng tôi sẽ gọi như sau:
Title
MessagesList
SendMessageForm
Hãy vẽ một hình chữ nhật cho mỗi cái:
Điều này cho chúng ta một cái nhìn tổng quan tốt đẹp về các component khác nhau và kiến trúc đằng sau ứng dụng của chúng tôi.
Chúng ta có thể tiếp tục tự hỏi bản thân còn những component con nào nữa?Vì vậy, chúng tôi có thể đã chia giao diện người dùng thành nhiều component hơn, ví dụ như chuyển từng thông điệp thành các thành phần của riêng chúng.Tuy nhiên, chúng tôi sẽ dừng lại ở đây vì mục đích đơn giản.
Bước 2: Thiết lập codebase
Bây giờ chúng tôi sẽ cần phải thiết lập kho lưu trữ của chúng tôi. Chúng tôi sẽ sử dụng cấu trúc đơn giản nhất có thể: tệp * index.html * có liên kết đến tệp JavaScript và file. Chúng tôi cũng import Chatkit SDK và Babel, được sử dụng để chuyển đổi JSX của chúng tôi:
Đây là một ví dụ trên Scrimba khi hoàn thành bài hướng dẫn. Tôi khuyên bạn nên mở nó trong một tab mới và thử nó bất cứ khi nào bạn cảm thấy rối.
Với kho lưu trữ tại chỗ, chúng ta có thể bắt đầu viết một số code React, mà chúng ta sẽ làm bên trong tệp * index.js *.
Hãy bắt đầu với thành phần chính App,. Đây sẽ là thành phần “thông minh” duy nhất của chúng tôi, vì nó sẽ xử lý dữ liệu và kết nối với API. Đây là thiết lập cơ bản cho nó (trước khi chúng tôi thêm bất kỳ logic):
Như bạn có thể thấy, nó chỉ đơn giản là làm cho ra ba người con: các <Title>, <MessageList> và các <SendMessageForm> component.
Tuy nhiên, chúng ta sẽ làm cho nó phức tạp hơn một chút, vì các tin nhắn trò chuyện sẽ cần được lưu trữ bên trong trạng thái của component App. Điều này sẽ cho phép chúng tôi truy cập các tin nhắn thông qua this.state.messages, và do đó thông qua chúng đến xung quanh các thành phần khác.
Chúng ta sẽ bắt đầu với việc sử dụng dữ liệu giả để chúng ta có thể hiểu được luồng dữ liệu của ứng dụng. Sau đó, chúng tôi sẽ đổi dữ liệu này với dữ liệu thực từ Chatkit API sau này.
Đây là cái gọi là stupid component. Phải mất một prop, messages trong đó có một mảng các đối tượng. Và sau đó chúng tôi chỉ đơn giản là hiển thị ra text và senderId các thuộc tính từ các đối tượng.
Với dữ liệu giả của chúng tôi chảy vào thành phần này, nó sẽ hiển thị như sau:
Vì vậy, bây giờ chúng tôi có cấu trúc cơ bản cho ứng dụng của mình và chúng tôi cũng có thể hiển thị thông báo.
Bây giờ hãy thay thế dữ liệu giả của chúng tôi bằng các tin nhắn thực tế từ một phòng chat!
Bước 5: Tìm nạp các khóa API từ Chatkit
Để nhận tin nhắn tìm nạp, chúng tôi cần kết nối với API Chatkit. Và để làm như vậy, chúng ta cần lấy các khóa API.
Tại thời điểm này, tôi muốn khuyến khích bạn làm theo các bước của tôi để bạn có thể cài đặt và chạy ứng dụng trò chuyện của riêng mình. Bạn có thể sử dụng Scrimba Playground của tôi để kiểm tra các khóa API của riêng bạn.
Bắt đầu bằng cách tạo một tài khoản miễn phí tại đây . Khi bạn đã hoàn tất, bạn sẽ thấy trang tổng quan của mình. Đây là nơi bạn tạo các mẫu Chatkit mới. Tạo một tên và đặt cho nó bất kỳ tên nào bạn muốn:
Sau đó, bạn sẽ được điều hướng đến mẫu mới được tạo của bạn. Ở đây bạn sẽ cần sao chép bốn giá trị:
Instance Locator
Test Token Provider
Room id
Username
Chúng ta sẽ bắt đầu với Instance Locator :
Và nếu bạn cuộn xuống một chút, bạn sẽ tìm thấy Test Token Provider:
Bước tiếp theo là tạo User * và ** Room , nó được thực hiện trên cùng một trang. Lưu ý rằng trước tiên bạn sẽ phải tạo User * và sau đó bạn có thể tạo một phòng, điều này lại cho phép bạn truy cập vào giá trị phòng.
Vì vậy, bây giờ bạn đã tìm thấy bốn giá trị của bạn. Làm tốt!
Tuy nhiên, trước khi chúng tôi quay trở lại với codebase, tôi cũng muốn bạn gửi một thư từ bảng điều khiển Chatkit theo cách thủ công, vì điều này sẽ giúp chúng tôi trong chương tiếp theo.
Dưới đây là cách thực hiện:
Điều này là để chúng tôi thực sự có một thông báo để hiển thị trong bước tiếp theo.
Bước 6: Hiển thị tin nhắn trò chuyện thực
Bây giờ chúng ta hãy quay trở lại tệp index.js của chúng tôi và lưu trữ bốn giá trị này dưới dạng các biến ở đầu tệp của chúng tôi.
Đây là của tôi, nhưng tôi khuyến khích bạn tạo của riêng bạn:
Và với điều đó tại chỗ, cuối cùng chúng tôi đã sẵn sàng kết nối với Chatkit. Điều này sẽ xảy ra trong component App, và cụ thể hơn trong phương thức componentDidMount. Đó là phương thức bạn nên sử dụng khi kết nối các thành phần React.js với API.
Trước tiên, chúng ta sẽ tạo chatManager:
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: instanceLocator,
userId: userId,
tokenProvider: new Chatkit.TokenProvider({
url: testToken
})
})
Và sau đó chúng tôi sẽ thực hiện chatManager.connect() để kết nối với API:
Điều này cho phép chúng ta truy cập vào đối tượng currentUser, đó là giao diện để tương tác với API.
Lưu ý: Vì chúng ta sẽ cần sử dụng currentUser sau này, lưu trữ nó trên cá thể bằng cách thực hiện this.currentUser =currentUser.
Sau đó, chúng tôi đang gọi currentUser.subscribeToRoom() và truyền vào roomId và một hook onNewMessage.
Hook onNewMessage được kích hoạt mỗi khi một thông điệp mới được truyền vào phòng chat. Vì vậy, mỗi khi điều đó xảy ra, chúng tôi sẽ chỉ thêm thông báo mới vào cuối this.state.messages.
Điều này dẫn đến ứng dụng tìm nạp dữ liệu từ API và sau đó hiển thị dữ liệu đó trên trang.
Điều này thật tuyệt vời, vì bây giờ chúng ta có bộ khung cho kết nối máy khách-máy chủ của chúng ta.
Bước 7: Xử lý dữ liệu nhập của người dùng
Điều tiếp theo chúng ta cần tạo là component SendMessageForm. Đây sẽ là một controlled component, có nghĩa là thành phần điều khiển những gì đang được hiển thị trong trường nhập thông qua trạng thái của nó.
Hãy xem phương thức render()và chú ý đặc biệt đến các dòng tôi đã đánh dấu:
class SendMessageForm extends React.Component {
render() {
return (
<form
className="send-message-form">
<input
onChange={this.handleChange}
value={this.state.message}
placeholder="Type your message and hit ENTER"
type="text" />
</form>
)
}
}
Chúng tôi đang làm hai việc:
Lắng nghe đầu vào của người dùng với trình xử lý sự kiện onChangeđể chúng tôi có thể kích hoạt phương thức handleChange
Đặt value trường nhập liệu một cách rõ ràng bằng cách sử dụng this.state.message
Kết nối giữa hai bước này được tìm thấy bên trong phương thức handleChange. Nó chỉ cập nhật trạng thái cho bất kỳ điều gì người dùng nhập vào trường nhập:
Điều này dẫn đến tái xuất hiện và khi trường nhập được đặt rõ ràng từ trạng thái sử dụng value={this.state.message}, trường nhập sẽ được cập nhật.
Vì vậy, ngay cả khi ứng dụng cảm thấy tức thì đối với người dùng khi họ nhập nội dung nào đó vào trường nhập, dữ liệu thực sự đi qua trạng thái trước khi React cập nhật giao diện người dùng.
Để kết thúc tính năng này, chúng tôi cần cung cấp cho component một constructor. Trong đó, chúng ta sẽ khởi tạo cả trạng thái và liên kết this trong phương thức handleChange:
Chúng ta cần phải ràng buộc phương thức handleChange để chúng ta có quyền truy cập vào từ khóa this bên trong nó. Đó là cách JavaScript hoạt động: từ khóa this theo mặc định không được xác định bên trong phần thân của hàm.
Bước 8: Gửi tin nhắn
Component SendMessageForm của chúng tôi gần như đã hoàn tất, nhưng chúng tôi cũng cần phải chăm sóc việc gửi biểu mẫu. Chúng ta cần lấy các tin nhắn và gửi chúng đi!
Để làm điều này, chúng tôi sẽ gắn một trình xử lý handleSubmit với cả sự kiện onSubmit trong <form>.
render() {
return (
<form
onSubmit={this.handleSubmit}
className="send-message-form">
<input
onChange={this.handleChange}
value={this.state.message}
placeholder="Type your message and hit ENTER"
type="text" />
</form>
)
}
Vì chúng ta có giá trị của trường nhập được lưu trữ trong this.state.message, nó thực sự khá dễ dàng để truyền dữ liệu chính xác cùng với việc gửi. Chúng tôi sẽ làm một cách đơn giản :
Ở đây, chúng ta đang gọi sendMessage prop và truyền vào this.state.message như một tham số. Bạn có thể hơi bối rối vì điều này, vì chúng tôi chưa tạo phương thức sendMessage. Tuy nhiên, chúng ta sẽ làm điều đó trong phần tiếp theo, vì phương thức đó tồn tại bên trong component App. Vì vậy, đừng lo lắng!
Thứ hai, chúng tôi đang xóa trường nhập bằng cách đặt this.state.messagethành một chuỗi trống.
Đây là toàn bộ component SendMessageForm. Lưu ý rằng chúng tôi cũng đã ràng buộc thisvới component handleSubmit:
Chúng tôi đã sẵn sàng để gửi tin nhắn tới Chatkit. Điều đó được thực hiện trong component App, nơi chúng ta sẽ tạo ra một phương thức được gọi là this.sendMessage:
Không quan trọng ứng dụng bạn xây dựng là gì, để nó có thể đến được tay người dùng thì nó phải đến được mắt người dùng trong các kết quả tìm kiếm trước cái đã. Đấy là lý do vì sao Search Engine Optimization (SEO) là một thứ rất quan trọng mà mỗi một lập trình viên khi xây dựng ứng dụng của mình phải chú ý đến.
Trở lại năm 2017, các cuộc khảo sát đã cho thấy rằng, khoảng 27% người dùng điện thoại bỏ qua cửa hàng ứng dụng trên điện thoại của mình, mà tìm đến những công cụ tìm kiếm khác như Google hay Bing.
Chỉ mở cửa hàng ứng dụng trên thiết bị của bạn lên và tìm kiếm một thứ gì đó đơn giản như máy tính bỏ túi chẳng hạn. Thứ bạn nhận được chính là một hằng hà sa số các ứng dụng có thể làm điều tương tự – tính toán.
Điều này chứng tỏ ứng dụng có vị trí top trong các công cụ tìm kiếm là một điều cực kì quan trọng cho mọi lập trình viên. Bởi người dùng tìm kiếm ứng dụng thường không bao giờ xem quá trang đầu hoặc trang hai của kết quả tìm kiếm.
Để hiểu được cách làm việc của công cụ tìm kiếm, hãy xem qua một bài viết khác của Rajat S, “How To Write Better Code in React”.
Nếu bạn vào Google và gõ “React” trên thanh tìm kiếm, thì tại thời điểm Rajat S viết bài này bạn chỉ có thể tìm ra nó ở trang thứ 5!
Nhưng nếu bạn tìm với một từ khóa khác như “better code react”, thì bài của Rajat S sẽ nhảy ngay lên trang nhất!
Vậy là tạm thời đủ về SEO rồi. Giờ hãy cùng xem qua một PWA (Progressive Web App) là gì nhé!
Dựa theo khái niệm của Google, PWAs có một chút khác biệt với ứng dụng mobile truyền thống. Nó giống như là một trang Web được điều chỉnh để có thể chạy trên mobile vậy. Từ khóa ở đây là “Progressive”, nghĩa là đây là những những ứng dụng/websites mà có thể dần được điều chỉnh phù hợp với cài đặt của thiết bị đầu cuối.
Ở bài này, chúng ta sẽ xây dựng một PWA hoàn toàn mới sử dụng Angular. Bạn sẽ tự tay trải nghiệm làm việc với những thứ như “service workes” và “Angular Resolvers”.
BẮT ĐẦU
Xây dựng một Project Angular
Hãy bắt đầu bằng việc tạo mới một Project Angular trên hệ thống của bạn. Nếu bạn chưa cài đặt Angular CLI thì hãy gõ câu lệnh sau vào cửa sổ câu lệnh của bạn:
$ npm install -g @angular/cli
Sau đó, tạo mới một thư mục trên project vừa tạo tên là comicstore. Để có thể routing trong ứng dụng của chúng ta và sử dụng SASS thay vì CSS truyền thống, thì chúng ta cần phải thêm một số flags sau câu lệnh ng new như sau:
$ ng new comicstore --routing --style scss
// wait for installation to complete
$ cd comicstore
Chạy câu lệnh ng serve để khởi động Angular Development Server. Server sẽ chạy một ứng dụng angular căn bản trên trình duyệt của bạn với địa chỉ mặc định là localhost:4200.
Nhưng chúng ta không cần những cái mà Angular đã cung cấp sẵn ở đây. Nên hãy loại bỏ nó bằng cách mở file src/app/app.component.html và thay thế toàn bộ code có sẵn với dòng code sau:
<h1>DC Comics Rebirth</h1>
Bootsrap
Chúng ta sẽ sử dụng Bootstrap khá nhiều ở ứng dụng này, đơn giản bởi vì nó sẽ tiết kiệm thời gian viết HTML và CSS của chúng ta.
Truy cập trang web BootstrapCDN và sao chép đường dẫn cho gói CSS hoàn chỉnh. Sau đó trong thư mục project, mở file style.scss và dán đường dẫn vừa sao chép trong import.
Khi mà tôi bắt đầu làm việc với Angular, tôi nhận thấy rằng mỗi component trong Angluar có 4 file:
File Component Class
File Component’s HTML mẫu
File Component’s StyleSheet
File Component’s Test
Tôi nhận ra rằng mọi thứ sẽ trở nên dễ dàng hơn nếu tôi có thể di chuyển file HTML và file StyleSheet từ các file riêng biệt vào trong file Component Class. Điều này sẽ giảm bớt số lượng file có trong mỗi Component và cũng không phải mở từng file để chỉnh sửa khi muốn sửa code.
Để bắt đầu, xóa file app.component.html và app.component.scss từ thư mục src/app. Sau đó vào file app.component.ts và đổi tên thuộc tính templateUrl thành template. Và cũng đổi nội dung của thuộc tính này như sau:
Tương tự, đổi tên thuộc tính styleUrls thành styles và thay đổi nội dung như sau:
styles: [`
h1{
color: #0476F2;
}
`]
Chúng ta cũng ần phải cài đặt cho Angular biết rằng chúng ta sẽ viết HTML và Style CSS trong component. Để làm được thế thì chúng ta sử dụng câu lệnh ng config như sau:
$ ng config schematics.@schematics/angular.component.inlineStyle true
$ ng config schematics.@schematics/angular.component.inlineTemplate true
Sau đó chúng ta sẽ thấy vài thay đổi với object schematics trong file angular.json.
Xây dựng Application Layout
Thay vì tốn thời giờ xây dựng layout từ đầu, chúng ta có thể sử dụng câu lệnh module ui để tạo một ứng dụng đơn giản. Layout này sẽ bao gồm một component cho header, footer và body của layout.
Câu lệnh module ui được sử dụng với câu lệnh ng generate như sau:
$ ng generate module ui --module App
Câu lệnh này sẽ tạo ra một thư mục mới tên là ui bên trong thư mục src/app. Angular sẽ tạo một dòng code import cho thư mục này trong file app.module.ts.
Tiếp theo, chúng ta cần tạo component cho Header, Footer, và Layout của ứng dụng.
$ ng generate component ui/containers/layout
$ ng generate component ui/containers/header
$ ng generate component ui/containers/footer
Những dòng lệnh này sẽ tạo một file component chính và một file test cho mỗi component.
Tiếp theo, mở file app-routing.module.ts và thêm vào route mặc định cho LayoutComponent như bên dưới:
Bằng cách này, ứng dụng của chúng ta sẽ cài đặt render nội dung của LayoutComponent. Bạn cũng sẽ thấy rằng ứng dụng của chúng ta vẫn hiển thị tag h1 mà chúng ta đã viết bên trong file app.component.ts. Để cho đơn giản hơn, hãy di chuyển nó vào trong file layout.component.ts.
Đầu tiên, vào file app.component.ts, và xóa mảng styles. Và cũng xóa tag h1 trong thuộc tính template.
Bây giờ vào file layout.component.ts được đặt ở trong thư mục app/ui/containers/layout, và viết lại thuộc tính template như bên dưới:
Như là tên của của ứng dụng này, thì nó sẽ dùng để lưu truyện tranh. Mà tôi lại là fan của DC Comics, nên tôi sẽ lưu loại này. Vậy nên tôi sẽ vào google và kiếm logo của DC và lưu nó vào thư mục src/assets với tên là logo.svg.
Bây giờ ta sẽ thêm logo vào component header. Mở file header.component.ts và thêm vào những thuộc tính sau cho class HeaderComponent.
public logo = 'assets/logo.svg';
public title = 'DC Comics Rebirth';
public links = [{
label: 'Comics',
url: '/Comics',
}]
Xóa nội dung của thuộc tính template. Thay vào đó, chúng ta sẽ thêm vào tag nav như sau:
Bạn sẽ để ý rằng ở đây sẽ xuất hiện một dòng màu đen dày ở đầu của trình duyệt. Tiếp theo, hãy thêm vào logo và tiêu đề cho header này. Phía sau tag nav, thêm vào như sau:
Cuối cùng, header của chúng ta sẽ trông như thế này:
Hãy xử lý luôn component footer. Vào file footer.component.ts và xóa mọi thứ trong thuộc tính template. Vào thêm vào thẻ nav trong thuộc tính template với cùng class như cái ở trong header.
Route đầu tiên sẽ dẫn người dùng từ route chưa định nghĩa sang route comics. Route thứ 2 chính là route comics thật.
Bây giờ khi tải lại trang, nó sẽ tự động dẫn vào route comics.
Tiếp theo, Hãy thêm module mới tên là comic:
$ ng g cl comic/models/comic
Bây giờ ta sẽ có một thư mục mới tên là models bên trong thư mục comic. Nó sẽ chứa một file tên comic.ts. Thêm những thuộc tính sau bên trong file này:
export class Comic {
public id: string;
public name: string;
public description: string;
public image: string;
public price: number;
}
Tiếp theo, tạo một cặp container để giúp lấy dữ liệu và truyền dữ liệu đó vào những component khác.
$ ng g c comic/containers/comic-list
$ ng g c comic/containers/comic-detail
Những câu lệnh này sẽ tạo ra 2 container components comic-list và comic-detail.
Mở file comic-routing.module.ts và thêm một route vào ComicListComponent. Đường dẫn của route này sẽ trở thành một chuỗi rỗng. Tương tự, thêm một route vào ComicDetailComponent với đường dẫn đổi thành :id.
Mở file comic-list.component.ts và đặt thuộc tính template thành comics.
template: `
{{comics | json}}
`,
Làm điều tương tự cho thuộc tính template của file comic-detail.component.ts.
Trong class component của comic-list.component.ts và comic-detail.component.ts, thêm một thuộc tính comics mà có kiểu Comic[] và khởi tạo nó như một mảng rỗng.
public comic: Comic[] = new Comic();
Sau đó mở file comic-detail.component.ts và inject ActivatedRoute trong constructor. Việc này sẽ cho phép truyền thuộc tính id từ đường dẫn. Và cũng gán this.comic.id vào this.route.snapshot.paraMap.get('id') trong ngOnInit.
Chúng tôi vui mừng thông báo rằng Pusher Beams đã kết thúc giai đoạn beta và có thể dùng cho các ứng dụng sản phẩm của bạn!
Chúng tôi tự hào có hơn 10.000 nhà phát triển đang sử dụng Beams để gửi những thông báo giao dịch quan trọng.
Dưới đây là những gì có trong Beams:
API đã được hợp nhất để gửi các push notification tới thiết bị iOS, Android và MacOS
Có dịch vụ từ máy chủ để quản lý vòng đời của token thiết bị cho các ứng dụng iOS và Android
SDK của Android và iOS được tạo thủ công bao hàm các bản cập nhật FCM và APN mới nhất
Interests để gửi thông báo, bằng cách sử dụng mô hình đăng ký/ đưa tin linh hoạt
Insights đểbáo cáo thông tin phản hồi và các sự kiện mở rộng một cách trực tiếp từ phía khách hàng
Debug Console mô tả một log sự kiện thông báo thời gian thực theo chu kỳ
Bạn có thể dùng thử ngay hôm nay, tham khảo tài liệu docs hoặc bắt đầu với một hướng dẫn iOS hoặc Android.
Hiển thị khi thông báo được gửi
Khi chúng tôi phát hành một API push notification phiên bản beta, chúng tôi biết rằng các nhà phát triển thiếu khả năng hiển thị thông báo sau khi gửi. Ngay cả gateway thông báo của cả Apple (APN) và Google (FCM) cũng không đảm bảo cung cấp điều này.
Thông báo là dịch vụ sống của các ứng dụng để cảnh báo người dùng khi việc giao dịch đang diễn ra, khi tin tức bị hỏng, đôi lúc là một dấu hiệu cho sự thích thú của người dùng hoặc cuộc gọi hội thảo bắt đầu – nhưng các lập trình viên thường tự hỏi liệu thông báo đã được gửi hay mở chưa.
Khi một thông báo được gửi đến một thiết bị bằng Beams, SDK từ phía khách hàng sẽ báo phản hồi lại bằng một sự kiện xác nhận khi nhận được thông báo. Nếu người dùng nhấn vào thông báo để mở ứng dụng, SDK này sẽ báo cáo lại sang sự kiện mở.
Một nửa trong số tất cả các thông báo mở của Beams được mở trong vòng một phút rưỡi,cho thấy đây là tiện ích vô cùng mạnh mẽ để tiếp cận người dùng, dù họ đang ở bất cứ đâu.
Bạn có thể xem báo cáo được tổng hợp từ ứng dụng của mình và các sự kiện mở qua Insights hoặc cũng như log sự kiện thời gian thực trong Debug Console.
Dừng việc lãng phí thời gian bằng việc xây dựng gateway
APN và FCM được sử dụng miễn phí, nhưng các lập trình viên xây dựng cơ sở hạ tầng xung quanh các gateway này gây đau đầu. Trên thực tế, hơn 80% lập trình viên Beams đã cố gắng trực tiếp tích hợp thông báo thông qua APN / FCM trước khi bắt đầu sử dụng Beams.
Đây là lý do tại sao bạn sẽ tiết kiệm thời gian với Beams:
3 trong số 4 lập trình viên đã có thể nhận được dịch vụ thông báo dạng thử nghiệm được thiết lập với Beams trong 30 phút hoặc ít hơn.
Mùa hè này, APNs / FCM đã làm mới 1 trong 10 token của thiết bị được Beams quản lý.Các nhà phát triển không cần phải lo lắng vì SDK của Beams giữ token thiết bị được cập nhật phía dưới giao diện.
API đã sẵn sàng mở rộng quy mô. Bạn có thể gửi thông báo tới 1 triệu thiết bị iOS mỗi phút và 1 triệu thiết bị Android mỗi 17 giây.
Tại Pusher, Beams tự hào cung cấp cơ sở để các lập trình viên dựa vào xây dựng các ứng dụng tốt nhất.
Bước tiến tiếp theo cho Beams là gì?
Dự định cung cấp cho các lập trình viên tính linh hoạt nhiều hơn nữa đối với mục tiêu thông báo tới người dùng, tăng tính minh bạch cho sự ổn định dịch vụ và cải thiện khả năng phân phối trên tất cả các thiết bị của bạn.
Beams có một cộng đồng các nhà phát triển năng động – đặc biệt gửi lời cảm ơn đến cộng đồng đã hỗ trợ React Native SDK – và họ rất vui khi nghe ý tưởng của bạn về những điều cần nên làm tiếp theo!
Tham gia cộng đồng Pusher trên Slack hoặc liên hệ bằng cách sử dụng Intercom chat trên docs hoặc dashboard.
Nếu bạn hứng thú với nội dung trên, bạn có thể tương tác thông qua tweet hoặc gắn sao cho SDK trên iOS và trên các Android SDK trên Github.
Phát triển phần mềm là một nhiệm vụ đòi hỏi sự tập chung rất lớn về trí tuệ. Nó liên quan đến nhiều vấn đề phức tạp, do đó các nhà phát triển phần mềm luôn phải đi đầu trong việc tạo ra phần mềm tốt nhất trong cuộc chơi của mình.
Là một nhà phát triển phần mềm, để duy trì vị thế dẫn đầu của cuộc chơi, người ta cần phải thay thế sự phức tạp bằng cách đơn giản nhất có thể trong nhiều trường hợp .
Các lập trình viên giỏi đang ở đó, xây dựng các công cụ để giúp cho công việc và cuộc sống của các lập trình viên khác được dễ dàng và thuận tiện hơn.
Nếu không nói về việc quảng cáo, tôi muốn chia sẻ mười công cụ hàng đầu để cải thiện quy trình làm việc của mình và tôi tin rằng họ cũng sẽ tạo nên điều kỳ diệu với bạn.
Firebase vẫn là giải pháp cho các công cụ truy cập vào database trên phần mềm của mình. Công cụ tuyệt vời này cung cấp database với thời gian thực và chương trình hỗ trợ phía sau.
Firebase tích hợp tốt với các ứng dụng di động và nó cũng tích hợp với các ứng dụng web.
Với Firebase tôi có thể xây dựng các ứng dụng trong thời gian nhanh chóng mà không phải tự quản lý cơ sở hạ tầng database.
Firebase cung cấp phân tích giá trị di động, cải thiện các quy trình ,quyết định khác nhau có liên quan đến phát triển phần mềm.
Firebase tự động cân đối cho tất cả các ứng dụng. Điều này khiến tôi có thời gian để xây dựng những thứ tốt hơn.
CircleCI:
Không ngừng hội nhập là điều quan trọng trong quá trình phát triển phần mềm ngày nay vì nó đóng một vai trò rất lớn trong các dự án trung bình đến các dự án khủng.
Circle CI giúp tôi đánh dấu các việc cần phải làm của mình để không ngừng hội nhập
Đầu tiên, Circle CI có các kế hoạch miễn phí cho các dự án mã nguồn mở vì vậy khi xây dựng các dự án mã nguồn mở quan trọng tôi không cần phải tốn kinh phí.
Công cụ này cũng làm việc với Docker – như một người yêu các ứng dụng được đóng gói – không phức tạp. Nói về không phức tạp; Circle CI cũng dễ thiết lập và tích hợp tốt với các dịch vụ cloud hiện có, vì vậy tôi có thể bắt đầu và chạy trong thời gian nhanh nhất.
Code Climate:
Để đánh giá code tự động, code climate là công cụ ưa thích nhất của tôi.
Sau mỗi lần bàn giao Git, nó sẽ tự động phân tích đoạn code của tôi và cung cấp một phân tích vững chắc về các tình huống không tốt khi đưa ra thực tiễn. Điều này đảm bảo rằng code của tôi luôn ở bên trên trạng thái tốt nhất và sau đó tôi có thể cấu trúc lại code của mình ngay lập tức.
CodeClimate cũng phát hiện ra các code bị trùng lặp, cộng với việc nó có một giao diện người dùng đáng yêu và nên biết rằng công cụ tuyệt vời này là hoàn toàn miễn phí cho các dự án mã nguồn mở.
CodeClimate không chỉ giúp tôi viết code một cách tốt nhất mà còn giúp tôi trở thành một lập trình viên giỏi hơn.
RollBar:
Là nhà phát triển phần mềm, chúng tôi luôn phải nhấn mạnh sự cần thiết phải xây dựng một hệ thống mạnh mẽ nhất.
Để cải thiện chất lượng phần mềm, chúng ta cần nắm bắt mọi phát sinh trước khi việc sử dụng nó trở thành một trải nghiệm khủng khiếp cho người dùng.
Với Rollbar, tôi có thể nắm được những lỗi phát sinh bị bỏ sót do sự không hoàn hảo của con người. Tất cả những gì tôi cần làm là cài đặt SDK và thực hiện phần còn lại của công việc. Rollbar sẽ xử lý tất cả các lỗi phát sinh.
Bên cạnh việc thiết lập dễ dàng , Rollbar cũng cung cấp việc báo cáo các lỗi một cách đáng kinh ngạc và tôi có thể xem qua lịch sử lỗi cho các ứng dụng của mình.
Docker Cloud:
Sau khi cố gắng làm việc chăm chỉ để xây dựng các ứng dụng hoặc dịch vụ của mình, chúng tôi sẽ triển khai nó. Đáng buồn thay, hóa ra từ trải nghiệm cá nhân và triển khai không phải là quá trình dễ dàng nhất. Phải mất rất nhiều năng lượng của tôi.
Docker Cloud đã thay đổi cuộc chơi cho tôi. Nó cung cấp một bộ công cụ duy nhất để quản lý tất cả các vùng chứa của tôi trên nhiều clouds; nó cũng cung cấp một mức trừu tượng tuyệt vời vì vậy tôi không phải lo lắng về nhiều thứ khi triển khai các ứng dụng của mình.
BrowserStack:
Nếu bạn viết phần mềm đủ lâu, bạn sẽ găp phải việc này một vài lần – phần mềm của bạn mặc dù hoạt động tốt trên máy của bạn nhưng sẽ gặp lỗi ở một máy khác.
Vâng, tôi cũng đã trải qua điều này trong một số dự án – bây giờ tôi có thể nói rằng điều đó chỉ còn là quá khứ. Nhờ các browser farms như BrowserStack, tôi có thể thực hiện các thử nghiệm ứng dụng đa nền tảng của mình trước khi giao hàng cho người dùng.
Tôi có thể sử dụng BrowserStack để kiểm tra cả web và ứng dụng dành cho thiết bị di động. Một điểm cộng lớn là nó cũng tự động kiểm tra. Nó chạy thử nghiệm tự động trên lưới Selenium của nó cho các trang web, và Appium, Espresso cho các ứng dụng di động.
Amazon Web Services:
Đối với cơ sở hạ tầng đám mây, chỉ có một vài đối thủ có thể cạnh tranh với Amazon Web Services. Nhưng không chỉ là về cái tên đi kèm , Amazon Web Services nó đã chứng minh mình vô cùng hữu ích .
Nó rẻ, vì tôi chỉ trả tiền cho những gì tôi sử dụng. Bên cạnh đó, nó là một dịch vụ lưu trữ đám mây đáng tin cậy. Trong sự nghiệp của tôi với tư cách là một nhà phát triển phần mềm, tôi đã lắng nghe mọi người kể cho tôi nghe những câu chuyện về những cơn ác mộng của họ với những dịch vụ lưu trữ đám mây không đáng tin cậy – thật may mắn cho tôi; Tôi không phải đối mặt với những rắc rối như vậy kể từ khi sử dụng AWS.
AWS cũng cung cấp rất nhiều tính năng dịch vụ đám mây, các chương trình và API của bên thứ ba để làm cho quy trình phát triển phần mềm tốt hơn.
Slack:
Trong việc sử dụng các phương pháp nhanh , giữ liên lạc giữa mọi người với nhau nó là một phần rất quan trọng trong việc phát triển phần mềm.
Giữ liên lạc là khẩu hiệu – và Slack giúp tôi điều đó.
Slack đi kèm với một bộ công cụ khổng lồ và các tính năng để làm cho công việc phát triển phần mềm dễ dàng hơn. Điều khiến Slack nổi bật so với các tùy chọn tin nhắn khác là nó tích hợp với rất nhiều công cụ văn phòng.
Slack không chỉ cung cấp bộ công cụ và tùy chọn phong phú với chi phí trải nghiệm hợp lý với người dùng, và nó rất dễ sử dụng.
Redash:
Nếu chúng ta nhìn vào biểu đồ hình tròn của tất cả các quy trình liên quan đến xây dựng phần mềm, thì việc mã hóa sẽ chiếm tỷ lệ lớn nhất. Tuy nhiên, các khía cạnh khác của phát triển phần mềm như sự khôn ngoan trong kinh doanh không nên đi với các khoản tiền phạt.
Trang tổng quan có thể giúp bạn tập trung vào các nhiệm vụ khác nhau có liên quan đến quá trình phát triển phần mềm và Redash sẽ là công cụ hoàn hảo. Redash rất dễ sử dụng và có rất nhiều cách để trực quan hóa dữ liệu.
Trello:
Cộng tác là yếu tố quan trọng đối với mọi dự án phát triển phần mềm và Trello giúp tạo sự cộng tác suôn sẻ giữa các nhà phát triển.
Nó là một công cụ cộng tác trực quan để lập kế hoạch các nhiệm vụ và dự án.
Với Trello, tôi có thể tạo, tổ chức và ưu tiên các hành động và xác định luồng công việc, giao nhiệm vụ cho các thành viên khác của nhóm phát triển phần mềm.
Thông qua việc sử dụng thẻ để tạo và quản lý các tác vụ, việc xác định luồng công việc thú vị hơn rất nhiều.
Conclusion
Hiện nay có rất nhiều công cụ để cải thiện quy trình làm việc trong quá trình phát triển phần mềm. Do đó, danh sách các công cụ tuyệt vời để làm cho cuộc sống dễ dàng hơn cho các nhà phát triển không dừng lại ở đây.
Ví dụ, một công cụ như SauceLabs có thể là một sự thay thế tuyệt vời cho BrowserStack, Airbrake có thể là một sự thay thế tốt cho Rollbar và tất cả phụ thuộc vào sở thích cá nhân.
Bạn sử dụng công cụ nào để cải thiện quy trình phát triển phần mềm của mình? Hãy Cho chúng tôi biết.
Lưu ý: Hướng dẫn này đã được cập nhật lên Xcode 8.3 và Swift 3.1 bởi József Vesza.
Thật thú vị, Push Notifications cho phép nhà phát triển tiếp cận người dùng và thực hiện các tác vụ nhỏ ngay cả khi người dùng không chủ động sử dụng ứng dụng!
Push Notifications đã trở nên ngày càng mạnh mẽ hơn kể từ khi nó được ra mắt lần đầu tiên. Trong iOS 10, Push Notifications có thể :
Hiển thị tin nhắn văn bản ngắn
Phát âm thanh thông báo
Đặt số huy hiệu trên biểu tượng của ứng dụng
Cung cấp các hành động mà người dùng có thể thực hiện mà không cần mở ứng dụng
Hiển thị tệp đính kèm phương tiện
Im lặng, cho phép ứng dụng chạy ngầm và thực hiện tác vụ
Hướng dẫn push notifications này sẽ xem xét cách push notifications hoạt động và cho phép bạn thử các tính năng của chúng.
Trước khi bắt đầu, bạn sẽ cần những điều sau đây để kiểm tra push notifications :
Thiết bị iOS : Thông báo đẩy không hoạt động trong máy ảo, vì vậy bạn sẽ cần một thiết bị thực tế.
Thành viên của Chương trình dành cho nhà phát triển Apple : Kể từ Xcode 7, bạn có thể thử nghiệm các ứng dụng trên thiết bị của mình mà không cần phải là thành viên của chương trình. Tuy nhiên, để cấu hình các thông báo đẩy bạn cần một chứng chỉ thông báo đẩy cho ID ứng dụng của bạn, yêu cầu phải có tư cách thành viên chương trình.
Pusher : bạn sẽ sử dụng ứng dụng này để gửi thông báo tới thiết bị. Để cài đặt, hãy làm theo hướng dẫn tại đây .
Bắt đầu
Có 3 nhiệm vụ chính phải được thực hiện để gửi và nhận push notification :
Ứng dụng phải được định cấu hình đúng và được đăng ký với Dịch vụ push notification của Apple (APNS) để nhận push notification khi khởi động.
Máy chủ phải gửi push notification tới APNS hướng đến một hoặc nhiều thiết bị cụ thể.
Ứng dụng phải nhận được push notification ; sau đó nó có thể thực hiện các tác vụ hoặc xử lý các hành động của người dùng bằng cách sử dụng callbacks trong application delegate .
Nhiệm vụ 1 và 3 sẽ là trọng tâm chính của hướng dẫn này vì chúng là trách nhiệm của nhà phát triển iOS.
Nhiệm vụ 2 cũng sẽ được trình bày ngắn gọn, chủ yếu cho mục đích thử nghiệm. Gửi push notification là trách nhiệm của máy chủ ( server ) của ứng dụng và thường được triển khai khác nhau từ ứng dụng này sang ứng dụng khác. Nhiều ứng dụng sử dụng các bên thứ ba (bạn có thể tìm thấy một số ví dụ tốt ở đây ) để gửi push notification, trong khi các ứng dụng khác sử dụng các giải pháp tùy chỉnh và / hoặc các thư viện phổ biến (ví dụ: Houston ).
Để bắt đầu, hãy tải xuống dự án khởi động của WenderCast . WenderCast là nguồn truy cập của mọi người cho các podcast trên mạng và tin tức mới nhất.
Mở WenderCast.xcodeproj trong Xcode và xem nhanh xung quanh. Xây dựng và chạy trong trình mô phỏng iPhone để xem các podcast mới nhất (bạn sẽ sớm sử dụng thiết bị thực!):
Vấn đề với ứng dụng là nó không cho phép người dùng biết khi nào một podcast mới có sẵn. Nó cũng không thực sự có bất kỳ tin tức nào để hiển thị. Bạn sẽ sớm khắc phục tất cả những điều đó với sức mạnh của push notifications !
Định cấu hình ứng dụng hướng dẫn push notification
Thông báo đẩy yêu cầu nhiều bảo mật. Điều này khá quan trọng vì bạn không muốn bất kỳ ai khác gửi thông báo đẩy tới người dùng của mình. Thật không may, điều này có nghĩa là có một số nhiệm vụ cần thiết để định cấu hình ứng dụng cho push notification.
Bật dịch vụ thông báo đẩy
Bước đầu tiên là thay đổi ID ứng dụng. Chuyển đến App Settings -> General và thay đổi Bundle Identifier thành một thứ duy nhất:
Trong Signing ngay bên dưới mục này, hãy chọn Nhóm phát triển của bạn . Một lần nữa, đây phải là tài khoản nhà phát triển có trả phí. Nếu bạn không thấy bất kỳ nhóm nào, trước tiên bạn cần phải thêm nhóm phát triển của mình qua Xcode -> Preferences -> Accounts -> + .
Tiếp theo, bạn cần tạo ID ứng dụng trong tài khoản nhà phát triển của mình đã bật quyền push notification . Mai mắn là , Xcode có một cách đơn giản để làm điều này. Chuyển đến App Settings -> Capabilities và lật nút gạt để bật Push Notifications thành On .
Sau khi tải một số, nó sẽ giống như thế này:
Nếu có bất kỳ sự cố nào xảy ra, hãy truy cập Trung tâm nhà phát triển Apple . Bạn có thể chỉ cần đồng ý với giấy phép nhà phát triển mới, mà Apple muốn cập nhật và thử lại. Trường hợp xấu, bạn có thể cần phải thêm các push notification theo cách thủ công bằng cách sử dụng các nút + và Edit .
Điều này tạo ra ID ứng dụng và sau đó cho phép nó thêm các push notification . Bạn có thể đăng nhập vào Trung tâm nhà phát triển Apple và xác minh điều này:
Đó là tất cả những gì bạn cần phải cấu hình ngay bây giờ.
Đăng ký thông báo đẩy
Có hai bước để đăng ký thông báo đẩy. Trước tiên, bạn phải có được sự cho phép của người dùng để hiển thị bất kỳ loại thông báo nào, sau đó bạn có thể đăng ký các thông báo từ xa. Nếu mọi việc suôn sẻ, sau đó hệ thống sẽ cung cấp cho bạn device token mà bạn có thể coi là “địa chỉ” cho thiết bị này.
Trong WenderCast, bạn sẽ đăng ký thông báo đẩy ngay sau khi ứng dụng khởi chạy.
Mở AppDelegate.swift và thêm mục nhập sau vào đầu tệp:
Hãy đi qua phần trên: UNUserNotificationCenterđã được giới thiệu trong iOS 10 trong khung UserNotifications. Nó chịu trách nhiệm quản lý tất cả các hoạt động liên quan đến thông báo trong ứng dụng.
Bạn gọi requestAuthorization(options:completionHandler:)đến (bạn đoán nó) yêu cầu ủy quyền cho các thông báo đẩy. Tại đây, bạn phải chỉ định các loại thông báo mà ứng dụng của bạn sẽ sử dụng. Các loại (được đại diện bởi UNAuthorizationOptions) có thể là bất kỳ sự kết hợp nào sau đây:
.badge cho phép ứng dụng hiển thị số ở góc của biểu tượng ứng dụng.
.sound cho phép ứng dụng phát âm thanh.
.alert cho phép ứng dụng hiển thị văn bản.
.carPlay cho phép ứng dụng hiển thị thông báo trong môi trường CarPlay.
Bạn gọi registerForPushNotificationsbên trong application(_:didFinishLaunchingWithOptions:)để đảm bảo ứng dụng demo sẽ cố gắng đăng ký thông báo đẩy bất kỳ khi nào ứng dụng được khởi chạy.
Xây dựng và chạy. Khi ứng dụng khởi chạy, bạn sẽ nhận được lời nhắc yêu cầu quyền gửi thông báo cho bạn.
Nhấn OK và poof! Ứng dụng hiện có thể hiển thị thông báo. Tuyệt quá! Nhưng giờ thì sao? Điều gì xảy ra nếu người dùng từ chối quyền? Thêm phương thức này vào bên trong AppDelegate:
Phương pháp này rất khác với phương pháp trước. Trong phương pháp trước, bạn đã chỉ định cài đặt bạn muốn , nhưng phương thức này trả về cài đặt mà người dùng đã cấp .
Điều quan trọng là phải gọi getNotificationSettings(completionHandler:)trong trình xử lý hoàn tất requestAuthorization, điều này xảy ra bất cứ khi nào ứng dụng kết thúc khởi chạy. Điều này là do người dùng có thể, bất cứ lúc nào, đi vào ứng dụng Cài đặt và thay đổi quyền thông báo.
Cập nhật requestAuthorizationđể gọi getNotificationSettings()trong vòng kết thúc hoàn thành như sau:
Ở đây bạn xác minh authorizationStatuslà .authorized, nghĩa là người dùng đã cấp quyền thông báo và nếu có, bạn gọi UIApplication.shared.registerForRemoteNotifications().
Thêm hai phương pháp sau đây để kết thúc AppDelegate; chúng sẽ được gọi để thông báo cho bạn về kết quả của registerForRemoteNotifications:
func application(_ application: UIApplication,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
let tokenParts = deviceToken.map { data -> String in
return String(format: "%02.2hhx", data)
}
let token = tokenParts.joined()
print("Device Token: \(token)")
}
func application(_ application: UIApplication,
didFailToRegisterForRemoteNotificationsWithError error: Error) {
print("Failed to register: \(error)")
}
Như tên được đề xuất, hệ thống sẽ gọi application(_:didRegisterForRemoteNotificationsWithDeviceToken:)nếu đăng ký thành công, nếu không nó sẽ gọi application(_:didFailToRegisterForRemoteNotificationsWithError:).
Việc thực hiện hiện tại có application(_:didRegisterForRemoteNotificationsWithDeviceToken:)vẻ khó hiểu, nhưng nó chỉ đơn giản là lấy deviceTokenvà chuyển đổi nó thành một chuỗi. Mã thông báo thiết bị là thành quả của quá trình này. Nó là một mã thông báo được cung cấp bởi APNS xác định duy nhất ứng dụng này trên thiết bị cụ thể này. Khi gửi thông báo đẩy, ứng dụng sẽ sử dụng mã thông báo thiết bị làm “địa chỉ” để gửi thông báo tới thiết bị chính xác.
Lưu ý: Có một số lý do khiến đăng ký có thể không thành công. Hầu hết thời gian là do ứng dụng đang chạy trên trình mô phỏng hoặc vì cấu hình ID ứng dụng không được thực hiện đúng cách. Thông báo lỗi thường cung cấp một gợi ý tốt cho những gì sai.
Đó là nó! Xây dựng và chạy. Đảm bảo bạn đang chạy trên thiết bị và bạn sẽ nhận được mã thông báo thiết bị trong đầu ra của bảng điều khiển. Đây là những gì tôi trông giống như:
Sao chép mã thông báo này ở nơi nào đó tiện dụng.
Bạn có nhiều cấu hình hơn để thực hiện trước khi bạn có thể gửi thông báo đẩy, vì vậy hãy truy cập Trung tâm thành viên của nhà phát triển Apple và đăng nhập.
Tạo chứng chỉ SSL và tệp PEM
Trong trung tâm thành viên của bạn, chuyển đến Certificates, IDs & Profiles -> Identifiers -> App IDs và chọn ID ứng dụng cho ứng dụng của bạn. Trong Application Services , Thông báo đẩy sẽ hiển thị dưới dạng Có thể Configurable :
Nhấp vào Edit và cuộn xuống Push Notifications :
Trong Development SSL Certificate , hãy nhấp vào Create Certificate … và làm theo các bước để tạo CSR . Khi bạn có CSR của mình, hãy nhấp vào continue và làm theo các bước để Generate chứng chỉ của bạn bằng CSR. Cuối cùng, tải xuống chứng chỉ và nhấp đúp vào chứng chỉ, nó sẽ thêm nó vào Keychain của bạn, được ghép nối với khóa riêng:
Quay lại trung tâm thành viên, ID ứng dụng của bạn hiện đã bật thông báo đẩy để phát triển:
Đó là rất nhiều thứ để vượt qua, nhưng tất cả đều đáng giá – với tệp chứng chỉ mới của bạn, bạn đã sẵn sàng gửi Push Notification đầu tiên của mình!
Gửi thông báo đẩy
Gửi thông báo đẩy yêu cầu kết nối SSL tới APNS, được bảo mật bằng chứng chỉ đẩy bạn vừa tạo. Đó là nơi Pusher bước vào.
Khởi chạy Pusher . Ứng dụng sẽ tự động kiểm tra các chứng chỉ đẩy trong Keychain và liệt kê chúng trong danh sách thả xuống. Hoàn thành các bước sau:
Chọn chứng chỉ đẩy của bạn từ menu thả xuống.
Dán mã thông báo thiết bị của bạn vào trường “Mã thông báo đẩy thiết bị”.
Trên thiết bị bạn đã chạy WenderCast trước đó, bật ứng dụng hoặc khóa thiết bị, nếu không thiết bị sẽ không hoạt động *
Nhấp vào nút Push trong Pusher.
Bạn sẽ nhận được thông báo đẩy đầu tiên của mình:
Lưu ý: Bạn sẽ không thấy bất cứ điều gì nếu ứng dụng đang mở và chạy ở nền trước. Thông báo được gửi nhưng chưa có ứng dụng nào xử lý được. Chỉ cần đóng ứng dụng và gửi lại thông báo.
Các vấn đề chung
Có một vài vấn đề có thể phát sinh:
Một số thông báo nhận được nhưng không phải tất cả: Nếu bạn đang gửi nhiều thông báo đẩy đồng thời và chỉ một vài thông báo được nhận, đừng sợ! Đó là hành vi dự định. APNS duy trì một hàng đợi QoS (Chất lượng dịch vụ) cho mỗi thiết bị với một ứng dụng push. Kích thước của hàng đợi này là 1, vì vậy nếu bạn gửi nhiều thông báo, thông báo cuối cùng sẽ bị ghi đè.
Sự cố khi kết nối với Dịch vụ thông báo đẩy: Một khả năng có thể là có tường lửa chặn các cổng được APNS sử dụng. Đảm bảo bạn bỏ chặn các cổng này. Một khả năng khác có thể là khóa riêng và tệp CSR là sai. Hãy nhớ rằng mỗi ID ứng dụng có một kết hợp khóa riêng và CSR riêng.
Giải phẫu thông báo đẩy cơ bản
Trước khi bạn chuyển sang Nhiệm vụ 3, xử lý thông báo đẩy, hãy xem phần thân của thông báo bạn vừa gửi:
Đối với JSON-uninitiated, một khối được giới hạn bởi dấu ngoặc nhọn {} chứa một từ điển bao gồm các cặp khóa / giá trị (giống như một Swift Dictionary).
Tải trọng là một từ điển có chứa ít nhất một mục, aps , mà chính nó cũng là một từ điển. Trong ví dụ này, “aps” chứa các lĩnh vực alert, soundvà link_url. Khi nhận được thông báo đẩy này, nó sẽ hiển thị một giao diện cảnh báo với văn bản “Breaking News!” Và phát hiệu ứng âm thanh chuẩn.
link_url thực sự là một trường tùy chỉnh. Bạn có thể thêm các trường tùy chỉnh vào tải trọng như thế này và chúng sẽ được gửi đến ứng dụng của bạn. Vì bạn chưa xử lý nó bên trong ứng dụng, cặp khóa / giá trị này hiện không có gì.
Có sáu phím bạn có thể thêm vào apstừ điển:
alert. Đây có thể là một chuỗi, như trong ví dụ trước hoặc từ điển. Là một từ điển, nó có thể bản địa hóa văn bản hoặc thay đổi các khía cạnh khác của thông báo.
badge. Đây là một số sẽ hiển thị ở góc của biểu tượng ứng dụng. Bạn có thể xóa huy hiệu bằng cách đặt biểu tượng này thành 0.
thread-id. Bạn có thể sử dụng phím này để nhóm thông báo.
sound. Bằng cách đặt khóa này, bạn có thể phát âm thanh thông báo tùy chỉnh trong ứng dụng thay cho âm thanh thông báo mặc định. Âm thanh thông báo tùy chỉnh phải ngắn hơn 30 giây và có một số hạn chế.
content-available. Bằng cách đặt khóa này thành 1, thông báo đẩy sẽ trở thành thông báo im lặng. Điều này sẽ được khám phá sau trong hướng dẫn thông báo đẩy này.
category. Điều này xác định danh mục của thông báo, được sử dụng để hiển thị các hành động tùy chỉnh trên thông báo. Bạn cũng sẽ sớm khám phá điều này.
Ngoài những điều này, bạn có thể thêm bao nhiêu dữ liệu tùy chỉnh tùy ý, miễn là tải trọng không vượt quá kích thước tối đa 4096 byte.
Khi bạn đã có đủ niềm vui khi gửi thông báo đẩy tới thiết bị của mình, hãy chuyển sang phần tiếp theo. :]
Xử lý thông báo đẩy
Trong phần này, bạn sẽ tìm hiểu cách thực hiện các hành động trong ứng dụng của mình khi nhận được thông báo đẩy và / hoặc khi người dùng chạm vào chúng.
Điều gì sẽ xảy ra khi bạn nhận được thông báo đẩy?
Khi ứng dụng của bạn nhận được thông báo đẩy, phương thức UIApplicationDelegateđược gọi.
Thông báo cần được xử lý khác nhau tùy thuộc vào trạng thái ứng dụng của bạn khi nhận được:
Nếu ứng dụng của bạn không chạy và người dùng khởi chạy ứng dụng bằng cách nhấn vào thông báo đẩy, thông báo đẩy sẽ được chuyển đến ứng dụng của bạn trong launchOptionssố application(_:didFinishLaunchingWithOptions:).
Nếu ứng dụng của bạn đang chạy ở nền trước hoặc nền, application(_:didReceiveRemoteNotification:fetchCompletionHandler:)sẽ được gọi. Nếu người dùng mở ứng dụng bằng cách nhấn vào thông báo đẩy, phương pháp này có thể được gọi lại, vì vậy bạn có thể cập nhật giao diện người dùng và hiển thị thông tin có liên quan.
Trong trường hợp đầu tiên, WenderCast sẽ tạo mục tin tức và mở trực tiếp lên phần tin tức. Thêm mã sau vào cuối application(_:didFinishLaunchingWithOptions:), trước câu lệnh return:
// Check if launched from notification
// 1
if let notification = launchOptions?[.remoteNotification] as? [String: AnyObject] {
// 2
let aps = notification["aps"] as! [String: AnyObject]
_ = NewsItem.makeNewsItem(aps)
// 3
(window?.rootViewController as? UITabBarController)?.selectedIndex = 1
}
Mã này thực hiện ba điều:
Nó kiểm tra xem giá trị UIApplicationLaunchOptionsKey.remoteNotificationcó tồn tại không launchOptions. Nếu có, đây sẽ là tải trọng thông báo đẩy bạn đã gửi.
Nếu nó tồn tại, bạn lấy apstừ điển và chuyển nó vào createNewNewsItem(_:), đó là một phương thức trợ giúp được cung cấp để tạo một NewsItemtừ điển và làm mới bảng tin tức.
Cuối cùng, nó thay đổi tab đã chọn của bộ điều khiển tab đến 1, phần tin tức.
Để kiểm tra điều này, bạn cần chỉnh sửa lược đồ của WenderCast:
Trong Chạy -> Thông tin , chọn Chờ để thực thi được khởi chạy :
Tùy chọn này sẽ làm cho trình gỡ rối chờ ứng dụng được khởi chạy lần đầu tiên sau khi cài đặt để đính kèm vào nó.
Xây dựng và chạy. Sau khi cài đặt xong, hãy gửi lại một số tin tức mới. Chạm vào thông báo và ứng dụng sẽ mở ra một số tin tức:
Lưu ý: Nếu bạn ngừng nhận thông báo đẩy, có thể mã thông báo thiết bị của bạn đã thay đổi. Điều này có thể xảy ra nếu bạn gỡ cài đặt và cài đặt lại ứng dụng. Kiểm tra kỹ mã thông báo thiết bị để đảm bảo.
Để xử lý trường hợp khác, hãy thêm phương thức sau vào AppDelegate:
Phương thức này trực tiếp sử dụng hàm trợ giúp để tạo một hàm mới NewsItem. Bây giờ bạn có thể thay đổi lược đồ trở lại để khởi động ứng dụng tự động nếu bạn muốn.
Xây dựng và chạy. Giữ ứng dụng chạy ở nền trước và trên phần Tin tức. Gửi một thông báo đẩy tin tức khác và xem khi nó xuất hiện một cách kỳ diệu trong nguồn cấp dữ liệu:
Đó là nó! Ứng dụng của bạn hiện có thể xử lý tin tức vi phạm theo cách cơ bản này.
Một cái gì đó quan trọng xem xét: nhiều lần, thông báo đẩy có thể bị bỏ qua. Điều này là ổn cho WenderCast, vì có danh sách đầy đủ các tin tức không phải là quá quan trọng cho ứng dụng này, nhưng nói chung bạn không nên sử dụng các thông báo đẩy như cách duy nhất để cung cấp nội dung.
Thay vào đó, các thông báo đẩy sẽ báo hiệu rằng có sẵn nội dung mới và cho phép ứng dụng tải xuống nội dung từ nguồn (ví dụ: từ API REST). WenderCast là một chút hạn chế trong ý nghĩa này, vì nó không có một thành phần phía máy chủ thực sự.
Thông báo hành động
Thông báo có thể thực hiện cho phép bạn thêm các nút tùy chỉnh vào chính thông báo. Bạn có thể đã nhận thấy điều này trên thông báo qua email hoặc Tweets cho phép bạn “trả lời” hoặc “yêu thích” ngay tại chỗ.
Thông báo có thể thao tác được xác định bởi ứng dụng của bạn khi bạn đăng ký thông báo bằng cách sử dụng danh mục . Mỗi loại thông báo có thể có một vài hành động tùy chỉnh đặt trước.
Sau khi đăng ký, máy chủ của bạn có thể đặt danh mục thông báo đẩy; các hành động tương ứng sẽ có sẵn cho người dùng khi nhận được.
Đối với WenderCast, bạn sẽ xác định danh mục “Tin tức” với hành động tùy chỉnh có tên “Chế độ xem” cho phép người dùng xem trực tiếp tin bài trong ứng dụng nếu họ chọn.
Thay thế registerForPushNotifications()trong AppDelegatenhững điều sau:
Ở đây bạn tạo một hành động thông báo mới, với tiêu đề Xem trên nút, mở ứng dụng ở nền trước khi được kích hoạt. Hành động có một số nhận dạng riêng biệt, được sử dụng để phân biệt giữa các hành động khác trên cùng một thông báo.
Tiếp theo, bạn xác định danh mục tin tức, sẽ chứa hành động xem. Nó cũng có một định danh riêng biệt, mà tải trọng của bạn sẽ cần phải chứa để xác định, rằng thông báo đẩy thuộc về thể loại này.
Cuối cùng, bằng cách gọi setNotificationCategories(_:), bạn đăng ký thông báo hành động mới.
Đó là nó! Xây dựng và chạy ứng dụng để đăng ký cài đặt thông báo mới.
Nền ứng dụng và sau đó gửi tải trọng sau thông qua Pusher :
Nếu mọi việc suôn sẻ, bạn sẽ có thể kéo xuống thông báo để hiển thị hành động Xem:
Tốt đẹp! Khai thác trên nó sẽ khởi động WenderCast, nhưng nó sẽ không làm bất cứ điều gì. Để hiển thị mục tin tức, bạn cần thực hiện một số thao tác xử lý sự kiện khác trong ủy nhiệm.
Xử lý các hành động thông báo
Bất cứ khi nào một hành động thông báo được kích hoạt, UNUserNotificationCenterthông báo cho đại biểu của nó. Quay lại trong AppDelegate.swift , thêm phần mở rộng lớp sau vào cuối tệp:
Đây là cuộc gọi lại mà bạn nhận được khi ứng dụng được mở bởi một hành động tùy chỉnh. Có vẻ như có rất nhiều thứ đang diễn ra, nhưng thực sự không có gì mới ở đây:
Lấy apstừ điển.
Tạo NewsItemtừ từ điển và điều hướng đến phần Tin tức.
Kiểm tra mã định danh hành động, được chuyển thành dạng identifier. Nếu đó là hành động “Xem” và liên kết là một URL hợp lệ, nó sẽ hiển thị liên kết trong a SFSafariViewController.
Gọi bộ xử lý hoàn thành được hệ thống truyền cho bạn sau khi xử lý hành động.
Có một bit cuối cùng: bạn phải thiết lập ủy nhiệm UNUserNotificationCenter. Thêm dòng này vào đầu application(_:didFinishLaunchingWithOptions:):
Chạm vào hành động, và bạn sẽ thấy WenderCast trình bày một trình điều khiển Safari View ngay sau khi nó khởi chạy:
Xin chúc mừng, bạn vừa triển khai một thông báo có thể hành động! Gửi thêm một số thông tin khác và thử mở thông báo theo các cách khác nhau để xem cách hoạt động của thông báo.
Thông báo đẩy im lặng
Thông báo đẩy im lặng có thể đánh thức ứng dụng của bạn một cách im lặng để thực hiện một số tác vụ trong nền. WenderCast có thể sử dụng tính năng này để lặng lẽ làm mới danh sách podcast.
Như bạn có thể tưởng tượng, với một thành phần máy chủ thích hợp, điều này có thể rất hiệu quả. Ứng dụng của bạn sẽ không cần phải thăm dò liên tục dữ liệu – bạn có thể gửi thông báo đẩy im lặng bất cứ khi nào có dữ liệu mới.
Để bắt đầu, hãy đi tới Cài đặt ứng dụng -> Capabilites và bật Chế độ nền cho WenderCast. Kiểm tra tùy chọn cuối cùng, Thông báo từ xa :
Bây giờ ứng dụng của bạn sẽ thức dậy dưới nền khi ứng dụng nhận được một trong các thông báo đẩy này.
Bên trong AppDelegate, thay thế application(_:didReceiveRemoteNotification:)bằng phiên bản mạnh mẽ hơn này:
Kiểm tra xem liệu content-availablecó được đặt thành 1 hay không, để xem liệu đó có phải là thông báo im lặng hay không.
Làm mới danh sách podcast, cuộc gọi mạng và do đó không đồng bộ.
Khi danh sách được làm mới, hãy gọi trình xử lý hoàn thành và cho phép hệ thống biết liệu có bất kỳ dữ liệu mới nào được tải hay không.
Nếu nó không phải là một thông báo im lặng, giả sử nó là tin tức một lần nữa và tạo ra một mục tin tức.
Hãy chắc chắn để gọi xử lý hoàn thành với kết quả trung thực. Hệ thống đo mức tiêu thụ pin và thời gian mà ứng dụng của bạn sử dụng trong nền và có thể điều chỉnh ứng dụng của bạn nếu cần.
Thats tất cả để có nó; để kiểm tra nó, đẩy tải trọng sau đây thông qua Pusher :
{
"aps" : {
"content-available" : 1 }
}
Nếu mọi việc suôn sẻ, không có gì xảy ra! Để xem mã đang chạy, hãy thay đổi lược đồ thành “Chờ cho thực thi được khởi chạy” một lần nữa và đặt một điểm ngắt trong application(_:didReceiveRemoteNotification:fetchCompletionHandler:)để đảm bảo nó chạy.
Nếu bạn đã tham gia vào phát triển front-end trong vài năm qua, bạn biết rằng có quá đủ để cung cấp cho ai đó ‘analysis paralysis’. Các framework và thư viện mới xuất hiện thường xuyên. Các công ty trên toàn thế giới đang phải đối mặt với nhiệm vụ khó khăn trong việc lựa chọn đúng công nghệ cho việc xây dựng dự án của họ. Đó là một thách thức lớn, ngoài việc làm việc chăm chỉ, cần theo kịp các xu hướng mới nhất cùng lúc.
Ngay cả đối với một số nhà phát triển front-end tận tâm, có một thời điểm khi công nghệ trở thành lựa chọn cá nhân. Điều có thể được ưu tiên hơn lựa chọn công nghệ là phương pháp đúng hoặc sai để giải quyết các vấn đề.
Khi cuộc đua đang trở nên quyết liệt với tốc độ nhanh nhất, hiệu năng cao nhất, các framework và plugin dễ sử dụng nhất, người ta chỉ thắc mắc: khi nào thế giới JavaScript sẽ hợp nhất thành một công nghệ chính thống? Tương lai của JavaScript trông như thế nào? AI sẽ góp phần vào công nghệ này như thế nào?
Kể từ khi thành lập vào năm 1995, JavaScript đã phát triển thành ngôn ngữ phổ biến, phổ biến nhất trong lĩnh vực phát triển web. Trong thập kỷ qua, việc sử dụng JS không ngừng tăng lên, chưa cho thấy có dấu hiệu chậm lại.
Theo khảo sát hàng năm của StackOverflow , 69,8% số người được hỏi và 71,5% các nhà phát triển chuyên nghiệp đang sử dụng JavaScript hiện nay. Với sự phổ biến của nhiều thiết bị hỗ trợ web hơn, cuộc đua để tìm ra ‘kích thước phù hợp nhất với mọi giải pháp’ tốt nhất sẽ lớn hơn. Đây là một tin tuyệt vời cho các nhà phát triển, những người biết JS hoặc đang có kế hoạch để tìm hiểu nó. Đối với những người không ở mảng front-end, đề xuất dành cho họ để thử và có được (thậm chí cơ bản) trải nghiệm với nó. Trích dẫn này tóm tắt hoàn toàn:
“Nó [JavaScript] có lẽ là skill đang có nhất mà mọi developer cần phải có và chuyên sâu trong tương lai”
Các Frameworks & Web Component – Tương lai có thể đoán trước
Sau các cuộc chiến giữa các framework trong thập kỷ qua, ‘The Big Three’, giống như một số người muốn gọi về chúng, đang dẫn đầu với một tương lai ổn định và được xác định rõ ràng hơn. React, Vue và Angular là những framework và thư viện JavaScript nổi bật nhất hiện nay. Trong bài viết này, tôi sẽ phân loại chúng theo thứ tự phổ biến và hứa hẹn rằng chúng tiếp tục dẫn đầu trong tương lai.
React
Được xây dựng và hỗ trợ bởi Facebook, React là một nhà phát triển được yêu thích trong việc xây dựng và duy trì sản phẩm, cho dù là một quick POC hay hệ thống phần mềm doanh nghiệp lớn. Nó hiện đang được sử dụng bởi nhiều công ty hàng đầu như Instagram, Netflix, Walmart, Whatsapp và hơn thế nữa. Các lợi ích của React bao gồm kiến trúc dựa trên kiến trúc component-based, Virtual DOM cho hiệu suất tuyệt vời, học siêu nhanh và sự phổ biến giữa các nhà phát triển với một cộng đồng hỗ trợ rất lớn.
Vue
Tạo bởi Evan Youvà được duyệt bởi Alibaba, Vue đang trở thành một framework nhanh chóng được yêu thích với những người bắt đầu tìm hiểu nó. Lý do là, Vue ban đầu được thiết kế để giúp các nhà thiết kế có ít kinh nghiệm lập trình. Mục đích là để giúp họ tập trung vào việc tạo ra các giao diện chức năng hơn là lo lắng về việc tự viết code. Điều này làm cho nó rất dễ dàng để tìm hiểu với một ngưỡng lối vào tối thiểu. Hơn nữa, Evan, một cựu nhân viên của Google, đã quan sát những thứ cồng kềnh hoặc có thể được cải thiện trong Angular và áp dụng chúng cho Vue. Ông đã làm như vậy khi React được phát hành và đã có thể đưa ra một phương tiện mà bây giờ đã trở thành một trong những khuôn khổ hứa hẹn nhất để tìm hiểu và áp dụng. Ngoài ra, Vue.js hỗ trợ hiển thị khai báo, cập nhật DOM không đồng bộ, ràng buộc dữ liệu hai chiều, tuân thủ chặt chẽ các đặc tả thành phần web và tích hợp đơn giản với các mẫu HTML.
Được xây dựng và hỗ trợ bởi Google và được sử dụng bởi Youtube, Paypal, Google Maps, vv Angular đã là một lựa chọn hàng đầu cho việc triển khai doanh nghiệp cho đến nay. Phiên bản mới nhất của nó, Angular 6, đưa ra hai điểm nổi bật chính. Một lời hứa với Ivy, người đề xuất để tăng tốc độ render trong ứng dụng và các Agular element cho phép sử dụng các Angular component ngoài Angular, chẳng hạn như trong Vue hoặc React. Sử dụng Elements Package, bạn có thể tạo các Angular component và xuất chúng thành các thành phần Web, sau đó có thể được sử dụng trong bất kỳ trang HTML nào. Đối với những người đến từ nền OOP hoặc nền Java, Angular dễ dàng hơn để phát triển và học hỏi.
Cùng với các framework, gần đây chúng ta đã thấy sự gia tăng của các web component, nhưng chúng là gì và tại sao chúng lại quan trọng?
Từ một cộng đồng chán nản trong các khuôn khổ mệt mỏi, Web Components là thứ lớn nhất tiếp theo nhận được lực kéo từ HTML5. Nhưng chúng là gì? ‘Các web component là một tiêu chuẩn W3C mạnh mẽ mới đã được tất cả các trình duyệt chính chấp thuận và có thể được sử dụng hiện nay trong các ứng dụng của chúng ta (với một polyfill) . Đó là một bổ sung cho DOM có khả năng biến trang web thành các thành phần nhỏ, có thể tái sử dụng và mô-đun, được gắn với bất kỳ khung công tác nào, nhưng được xây dựng hoàn toàn bằng HTML, CSS và JS ‘.
Web components có kích thước gói nhỏ loại bỏ nhu cầu gửi thành phần tùy chỉnh được triển khai. Họ được ca ngợi vì khả năng sử dụng lại của họ. Bởi vì các thành phần web được xây dựng và hỗ trợ nguyên bản trong trình duyệt, chúng có thể được sử dụng ở mọi nơi, trong bất kỳ khung công tác nào hoặc không có khung công tác nào cả. Cuối cùng, họ được yêu thích vì sự đơn giản của họ. Không cần phải học một khuôn khổ nhất định nếu bạn không muốn. Nếu bạn đã biết JS cơ bản và các API DOM cơ bản, thì bạn có thể tương tác với một web component.
Ionic / Stencil
Ionic là một framework- library mạnh mẽ, bất khả tri để xây dựng các ứng dụng di động và web apps mới, có quyền truy cập trực tiếp vào các tính năng của thiết bị gốc. Và với bản phát hành Ionic 4 mới nhất, sự ra đời của Stencil sẽ không chỉ làm cho nó mạnh hơn và hiệu quả hơn bằng cách cho phép các nhà phát triển sử dụng nó bên ngoài Angular. Là sao? Stencil là một trình biên dịch thành phần web xây dựng các thành phần web hiện đại nhanh và nhỏ. Bằng cách tạo các thành phần giao diện người dùng của chúng tôi với các Web compennts thay vì các components cụ thể như React hoặc Angular, chúng tôi có thể tái sử dụng các component này trong bất kỳ framework nào hỗ trợ chúng hoặc tất cả.
Polymer
Polymer là thư viện JS do Google phát triển và được Google Earth và Youtube sử dụng. Nó sử dụng các thành phần web để xây dựng các ứng dụng web và cung cấp khả năng soạn JS, CSS và HTML kèm theo như các phần tử tùy chỉnh trong khi tận dụng các công nghệ gốc của trình duyệt thay vì dựa vào các thư viện JS.
Tuy nhiên, Polymer vẫn chưa đạt đến mức trưởng thành và gặp một vài thách thức. Đầu tiên, vì nó tạo ra DOM, sau đó bất kỳ tương tác hay thao tác DOM nào sẽ ở dạng JavaScript cơ bản, bổ sung thêm mã soạn sẵn, giúp việc tổ chức và quản lý ứng dụng lớn hơn khó khăn hơn. Một lý do tại sao React và các thư viện khác xuất hiện. Thứ hai, Polymer tạo chỗ dành sẵn cho các biến trong chuỗi để cải thiện hiệu suất và giải quyết vấn đề chuyển đổi dữ liệu thành chuỗi chỉ để chuyển đổi nó trở lại thành một đối tượng. Nhưng bằng cách sử dụng các trình giữ chỗ này, bạn đã gắn ứng dụng của mình một cách rõ ràng với Polymer bởi vì trình giữ chỗ không có trong thông số Web Components. Hai thử thách cuối cùng là: phải tải xuống toàn bộ thư viện và các tệp Polyfills và thiếu sự hỗ trợ phía máy chủ.
AI sẽ thay đổi thế nào đến việc develop Front End (hoặc có thể không) trong tương lai?
Ngoài các thư viện và fraemwork , AI và machine learning sẽ định hình tương lai của phát triển giao diện người dùng như thế nào? Đó là một câu hỏi được nhiều người hỏi, nhưng một số ít công ty đã dẫn đầu trong cuộc tấn công. Họ đang sử dụng các kỹ thuật khác nhau với hy vọng phá vỡ một lĩnh vực đã trải qua các chu kỳ khác nhau của các framework và thư viện. Các phương pháp được chia thành hai.
Một bên nhằm mục đích hỗ trợ các nhà phát triển bằng cách tạo mã khởi đầu từ wireframes và các tệp phác thảo hoặc tạo ra toàn bộ đầu ra đầu cuối. Điều này giúp các nhà phát triển tập trung vào các phần phát triển quan trọng hơn, chẳng hạn như logic ứng dụng và các tính năng xây dựng. Nó tăng tốc độ lặp lại của các giai đoạn thiết kế và sửa đổi. Những công ty từ Airbnb gần đây đã xây dựng AI để biến các tệp phác thảo thành mã thô, Uizard sử dụng một mạng học tập / ML (neurual network) mà họ đã đào tạo để chụp ảnh màn hình giao diện đồ họa và dịch thành các dòng thô mã. Điều ấn tượng với Uizard là: một văn bản đơn giản để GUI renderer sẽ làm việc trên nhiều nền tảng như iOS, Android và giao diện dựa trên Web và thuật toán, do đó đến nay hoạt động với độ chính xác 77%.
Sau đó , ứng dụng Ink to Code của Microsoft , người cũng đã đâm vào phần mềm này và làm cho phần mềm của họ có sẵn để tải xuống miễn phí từ Windows Store. Và cuối cùng, Supernova , một công ty khởi nghiệp với nhiệm vụ đẩy nhanh tiến trình phát triển ứng dụng của các nhà thiết kế di động và các nhà phát triển đã xây dựng một công cụ, ứng dụng MacOS Supernova Studio hứa hẹn sẽ tự động chuyển đổi các thiết kế ứng dụng di động được tạo ra trong Sketch. nhằm thu hẹp khoảng cách giữa tạo mẫu và thiết kế , phát triển giao diện người dùng.
Phía bên kia đã đưa AI tiến thêm một bước nữa và nhận được máy móc để làm toàn bộ mã hóa giao diện người dùng. BAYOU , một dự án được tài trợ bởi quân đội và Google ra khỏi Rice University, sử dụng một công cụ học tập sâu về cơ bản hoạt động như một công cụ tìm kiếm để viết mã. Thông qua việc đọc mã nguồn của 1500 ứng dụng Android (~ 100 triệu dòng Java), “neurual network” của BAYOU giờ đây là một AI có thể lập trình phần mềm khác.
Web-Assembly ở đâu trong tất cả những điều này?
Web-assembly là một định dạng nhị phân có thể được giải mã nguyên bản, trong tất cả các trình duyệt, nhanh hơn nhiều so với JS có thể được phân tích cú pháp. Đây là một thuật ngữ đã được xung quanh trong cộng đồng nhà phát triển. Nó thực sự có thể trở thành ngôn ngữ được sử dụng nhiều nhất trong tương lai gần như là bổ sung cho JavaScript.
Tại sao? Bởi vì nó cho phép thực hiện bằng cách giảm TTI (thời gian để tương tác) làm cho ứng dụng web nhanh, cũng như đa dạng hóa các ngôn ngữ có thể phát triển giao diện người dùng. Điều này cho phép các nhà phát triển sử dụng ngôn ngữ yêu thích của họ hoặc khả năng xây dựng một vài phần của ứng dụng web với web-assembly trong khi tăng tốc và rời khỏi phần còn lại của ứng dụng trong JS.
Kết luận
Thế giới của giao diện người dùng mà chúng ta hiểu ngày nay đang bị chi phối bởi ba framework lớn: React, Vue và Agular. Tuy nhiên, khi biết các vòng đời trước đây của các Framework, sẽ không có gì ngạc nhiên nếu một framework mới đi kèm nhanh hơn, hiệu quả hơn và giải quyết các vấn đề mà các framework hiện đang gặp phải.
Tương lai tôi hình dung tuy nhiên sẽ là một của tất cả mọi thứ có sẵn ngày hôm nay. Trong đó một framework được định nghĩa là dễ nhất để các nhà phát triển chấp nhận và đưa ra giải pháp hoàn chỉnh, sử dụng các kỹ thuật bổ sung như các web component, web-assembly và AI, để tạo ra giải pháp cuối cùng cho phát triển ứng dụng.
Các phần cốt lõi của ứng dụng sẽ được xây dựng bằng cách sử dụng các web component để chúng được sử dụng và chia sẻ dễ dàng.
Web assembly sẽ phục vụ như là tăng tốc độ trong các phần của ứng dụng để làm cho ứng dụng nhanh hơn và có hiệu suất tốt hơn.
AI sẽ phục vụ để đẩy nhanh quá trình phát triển, cho dù việc cung cấp mã bắt đầu giảm bản mẫu, hoặc được sử dụng để xác nhận chất lượng của mã được viết.
Hôm nay, chúng tôi sẽ chia sẻ với các bạn trong bài viết này về cách triển khai mã reCaptcha của google trong Laravel với việc xác thực. Nói chung sử dụng captcha trong đăng ký, đăng nhập là hình thức và bạn có thể thấy trong nhiều trang web gần như trang web sử dụng google reCaptcha. Nhưng bạn cũng có thể làm điều này với nhiều. nhưng google captcha là tốt nhất và nhiều gói laravel cũng có sẵn bằng cách sử dụng gói đó bạn có thể dễ dàng thực hiện chức năng này trong ứng dụng của bạn. Gói anhkohbo / no-captcha là tốt nhất cho nó và chúng tôi đang triển khai google reCaptcha bằng gói này.
Trong hướng dẫn này, chúng tôi đang triển khai google reCaptha dưới dạng contactus. nhưng bạn có thể sử dụng nó dưới mọi hình thức.
Sau khi thực hiện hướng dẫn này, kết quả của bạn sẽ trông giống như sau:
Trong captcha đơn giản được sử dụng để ngăn chặn dữ liệu spam. ví dụ bạn có một hình thức đơn giản mà không cần thêm Captcha thì một số tin tặc có thể thêm dữ liệu giả bằng cách lặp lại nhiều lần. vì vậy, tránh hoạt động spam kiểu này ở bên cạnh bạn nên Captcha là tùy chọn tốt nhất.
Install Package
Đầu tiên, chúng ta cần cài đặt gói anhskohbo / no-captcha trong ứng dụng Laravel của bạn. Chạy lệnh đơn giản sau và cài đặt.
composer require anhskohbo/no-captcha
Cấu hình
Sau khi cài đặt gói thành công, chúng ta nên cấu hình nhà cung cấp dịch vụ trọn gói này trong file config / app.php.
Tiếp theo, Truy cập vào khóa trang và khóa bí mật của Google reCaptcha . bạn có thể lấy khóa biểu mẫu bấm vào liên kết này Google reCaptcha Amin và lấy chìa khóa của bạn.
Sau khi nhấp vào liên kết dưới đây bạn có thể xem trang sau.
Nếu bạn muốn thử nghiệm bản demo này trong localhost. chỉ cần đặt localhost làm tên miền trong phần tên miền. Sau khi gửi biểu mẫu này thì google chuyển hướng một trang khác và trong trang này, bạn có thể hiển thị khóa Site và khóa Secret của mình Bây giờ, mở tập tin .env của bạn và đặt cả hai khóa ở đây.
Tiếp theo, chúng ta đã tạo ra bộ điều khiển ContactUsController.php trong thư mục App / Http / Controllers . và cũng tạo phương thức getContactus () và postContactus () trong đó.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use Validator;
use Redirect;
class ContactUsController extends Controller
{
public function getContactus()
{
return view('contactus');
}
public function postContactus(Request $request)
{
$this->validate($request, [
'fullname' => 'required',
'email' => 'required',
'description' => 'required',
'g-recaptcha-response' => 'required|captcha',
]);
// Write here your database logic
\Session::put('success', 'Youe Request Submited Successfully..!!');
return redirect()->back();
}
}
Mã xác thực PHP chính
Nếu bạn tích hợp trong php cốt lõi thì bạn có thể sử dụng mã sau để xác thực xác thực lại bằng google recaptcha.
<script src='https://www.google.com/recaptcha/api.js'></script>
Dùng bootstrap để khỏi tốn thời gian tạo form
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Hoặc bạn có thể thêm thẻ <div> Capcha trực tiếp vào blade nếu bị lỗi
Khi nhắc đến lập trình di động Cross-Platform, chúng ta không thể không nhắc đến 2 nền tảng lớn nhất hiện nay là React Native và Flutter. Dù ra đời sau nhưng Flutter đang vượt lên và trở thành Framework lập trình di động được yêu thích nhất hiện nay. Trong bài viết này, mình sẽ cùng các bạn tìm hiểu về Flutter là gì, các kiến thức cơ bản về Flutter và cách tiếp cận làm quen với Flutter và lộ trình học để trở thành 1 lập trình viên Flutter. Cùng bắt đầu nhé!
Flutter là gì?
Flutter là 1 framework dành cho việc lập trình di động Cross-Platform, nó giúp các lập trình viên có thể tạo ra các ứng dụng chạy trên nhiều nền tảng như Web, Android, iOS (hiện tại và dự định tương lai Flutter còn có thể build được ứng dụng chạy trên cả Window, MacOS và Linux nữa).
Flutter được tạo ra bởi ông lớn Google và được cho ra mắt vào năm 2017, đến nay Flutter được cho phát hành phiên bản mới nhất 3.1.0 vào cuối tháng 5 vừa qua. Chính Google cũng sử dụng Flutter là phương thức chính để tạo ra các ứng dụng cho hệ điều hành Google Fuchsia – 1 hệ điều hành thời gian thực dựa trên năng lực vi hạt nhân.
Flutter sử dụng ngôn ngữ lập trình Dart – một ngôn ngữ hướng đối tượng và tất nhiên cũng được phát triển bởi Google.
Flutter có đầy đủ các tính năng hot nhất hiện nay dành cho lập trình di động: hỗ trợ Hot Reload, Debug Devtool, nhiều IDE support: Android Studio, Visual Code. Các bạn cũng có thể hoàn toàn thử code và tạo ra ứng dụng Flutter mà không cần cài đặt bất cứ thứ gì bằng cách sử dụng Web Editor: https://dartpad.dev/flutter. Tuy nhiên trong series bài viết này mình sẽ hướng dẫn các bạn sử dụng IDE Android Studio, đơn giản vì nó cũng là 1 sản phẩm thuộc về Google khác.
Thành Phần Của Flutter
Flutter là một framework phát triển ứng dụng di động mã nguồn mở được phát triển bởi Google. Nó cho phép các nhà phát triển xây dựng các ứng dụng di động cho cả hệ điều hành iOS và Android chỉ với một codebase duy nhất. Các thành phần chính của Flutter bao gồm:
Flutter SDK
SDK (Software Development Kit) là bộ công cụ phát triển phần mềm cung cấp các thư viện và công cụ cần thiết để xây dựng các ứng dụng Flutter. SDK bao gồm:
Dart SDK: Dart là ngôn ngữ lập trình được sử dụng để viết các ứng dụng Flutter. Dart SDK cung cấp trình biên dịch và các công cụ cần thiết để làm việc với Dart.
Flutter Engine: Flutter Engine là lõi của Flutter, được viết bằng C++, cung cấp các công cụ cần thiết để render giao diện người dùng và thực hiện các tác vụ như xử lý sự kiện, vẽ đồ họa và quản lý các thành phần UI.
Framework: Framework của Flutter được viết bằng Dart, bao gồm các thư viện và widget để xây dựng giao diện người dùng, quản lý trạng thái, điều hướng và nhiều chức năng khác.
Widgets
Widgets là thành phần cơ bản của giao diện người dùng trong Flutter. Mọi thứ trong Flutter đều là widget, từ các thành phần UI cơ bản như nút bấm và văn bản đến các cấu trúc phức tạp như bố cục và hoạt ảnh. Flutter cung cấp hai loại widget chính:
Stateless Widgets: Widgets không thay đổi trạng thái trong suốt vòng đời của chúng. Chúng chỉ phụ thuộc vào dữ liệu đầu vào và hiển thị giao diện người dùng dựa trên đó.
Stateful Widgets: Widgets có thể thay đổi trạng thái trong suốt vòng đời của chúng. Chúng có thể phản ứng với các sự kiện và cập nhật giao diện người dùng dựa trên trạng thái hiện tại.
Dart
Dart là ngôn ngữ lập trình chính được sử dụng trong lập trình Flutter. Nó được thiết kế để xây dựng các ứng dụng front-end nhanh chóng và hiệu quả. Dart hỗ trợ cả biên dịch JIT (Just-In-Time) cho việc phát triển và biên dịch AOT (Ahead-Of-Time) cho hiệu suất tốt hơn khi triển khai ứng dụng.
Flutter DevTools
Flutter DevTools là bộ công cụ phát triển tích hợp được cung cấp để giúp các nhà phát triển gỡ lỗi, phân tích và tối ưu hóa các ứng dụng Flutter. DevTools bao gồm:
Inspector: Công cụ để kiểm tra và chỉnh sửa cấu trúc widget của ứng dụng.
Logging: Công cụ để xem và phân tích log từ ứng dụng.
Performance: Công cụ để phân tích hiệu suất của ứng dụng, bao gồm theo dõi khung hình và phân tích CPU.
Packages and Plugins
Flutter hỗ trợ việc sử dụng các package và plugin để mở rộng chức năng của ứng dụng. Các package là các thư viện Dart có thể được chia sẻ và sử dụng lại, trong khi các plugin cung cấp giao diện để tương tác với mã gốc (native code) trên các nền tảng iOS và Android.
Chắc hẳn không ít người đang thắc mắc, chẳng phải Google đã có bộ SDK cho di động, có tên gọi Android rồi hay sao. Nhưng với Google, thế giới mobile là quá rộng chỉ với một giải pháp duy nhất là Android. Với việc ra mắt phiên bản beta 1 này, giờ đây họ có trong tay hai bộ SDK cho ứng dụng di động: Android và Flutter. Và điểm khác biệt cơ bản giữa Flutter và Android: tạo ra các ứng dụng chạy trên cả iOS và Android.
Là một bộ SDK đa nền tảng, các ứng dụng Flutter có thể hoạt động trên cả iOS và Android. Nó như một thủ thuật khôn khéo để tương thích được với framework UI trên cả hai hệ điều hành này. Các ứng dụng này không biên dịch trực tiếp với các ứng dụng native của Android và iOS.
Thay vào đó, chúng chạy trên engine render Flutter (được viết bằng C++) và Flutter Framework (được viết bằng Dart, cũng như các ứng dụng Flutter), cả hai bộ này đều được đóng gói cùng với mọi ứng dụng. Sau đó bộ SDK sẽ đóng gói lại vào trong một ứng dụng để sẵn sàng chạy trên mỗi nền tảng. Bạn tạo ra ứng dụng của mình, một engine mới sẽ chạy các đoạn code, và các đoạn code native vừa đủ để nền tảng Flutter chạy trên cả Android và iOS.
Đóng gói cả một engine đi kèm cùng ứng dụng sẽ làm cho kích thước bộ cài đặt lớn hơn hẳn. Trang Hỏi đáp của Flutter cho biết, một ứng dụng “trống” thông thường sẽ chỉ khoảng 6-7MB trên Android, vì vậy dù là ứng dụng nào, phần kích thước tăng lên cũng là rất nhiều. Nhưng lợi ích của việc này là các ứng dụng này sẽ rất nhanh.
Flutter được thiết kế từ đầu để đạt tới tốc độ khung hình 60fps. Trong khi đây không phải là một con số hiếm gặp trên iOS, nhưng với Android, bạn có thể cảm thấy sự khác biệt rõ rệt ngay lập tức. Cũng nhờ việc xuất xưởng cùng với cả một nền tảng cho ứng dụng của mình, các nhà phát triển sẽ tránh được nhiều vấn đề về sự phân mảnh của Android.
Tại sao Flutter lại được yêu thích bởi các lập trình viên?
Theo thống kê từ Stack Overflow, Flutter đạt số điểm 68,8% về mức độ danh mục công nghệ được yêu thích (từ việc bắt đầu và tiếp tục sử dung nó), trong khi đó số điểm của React Native hiện tại chỉ là 57,9%.
Còn theo Google Trends, mức độ phổ biến của Flutter gần gấp đôi so với React Native.
Câu hỏi đặt ra ở đây là tại sao Flutter lại được yêu thích và quan tâm đến vậy? Để trả lời cho câu hỏi đó, chúng ta cùng đi vào điểm mạnh của Flutter dưới đây:
Đầu tiên phải nhắc đến đó là Flutter chính là con đẻ của Google, 1 ông lớn thực sự với gia tài hệ sinh thái đồ sộ liên quan đến lập trình di động. Đó là hệ điều hành Android, là IDE Android Studio, ngôn ngữ Kotlin, Dart, các thư viện mà gần như ai làm mobile cũng sẽ dùng như Firebase, Google Map, … Và quả thực thì Flutter được lợi rất nhiều từ việc Google cung cấp cho nó rất nhiều các package có sẵn, chỉ cần import vào để sử dụng.
Khác với cách tiếp cận của React Native, Flutter được team Google viết mới hoàn toàn bộ render UI. Điều đó có nghĩa là bạn sẽ có 1 bộ UI chung dành cho các nền tảng khác nhau (Flutter đặt tên cho chúng là các widgets), điều này tạo ra sự thống nhất trên các thiết bị giúp có được sự trải nghiệm tốt hơn cho người dùng.
Phát triển 1 ứng dụng bằng Flutter thực sự rất nhanh. Dart là 1 ngôn ngữ khá dễ hiểu, trong khi Flutter cũng đã cung cấp bộ Widgets và tài liệu thực sự chi tiết dành cho bạn.
Tối ưu về performance: mặc dù là 1 cross-platform, tuy nhiên Flutter lại mang lại được trải nghiệm về hiệu năng ứng dụng rất tốt. Để so sánh với React Native, chúng ta có thể đi sâu 1 chút vào kiến trúc và quy trình làm việc của 2 framework này.
Framework hiện đại và reactive: Dễ dàng tạo giao diện người dùng của bạn với framework hiện đại, reactive của Flutter và tập hợp các platform, layout và widget phong phú. Giải quyết các thách thức giao diện người dùng khó khăn của bạn với các API mạnh mẽ và linh hoạt cho 2D, animation, gesture, hiệu ứng và hơn thế nữa.
Truy cập các tính năng và SDK native: Làm cho ứng dụng của bạn trở nên sống động với API của platform, SDK của bên thứ ba và native code. Nó cho phép bạn sử dụng lại mã Java, Swift và ObjC hiện tại của mình và truy cập các tính năng và SDK native trên iOS và Android.
Phát triển ứng dụng thống nhất: Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android. Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp. Nếu bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.
React Native sử dụng JS Bridge để giao tiếp với các native module, đây chính là vị trí thường xuyên gây nghẽn cổ chai trong ứng dụng được viết bằng ngôn ngữ JS này. Flutter thì khác, kiến trúc ngôn ngữ Dart được tạo ra giúp chúng có thể giao tiếp thông qua chính các native interface, tất nhiên nó cũng là 1 dạng bridge, nhưng nó nhanh hơn rất nhiều vì “cầu rộng hơn và lại có nhiều cầu”, yên tâm gần như không bị nghẽn cổ chai được.
Tất nhiên, Framework hay ngôn ngữ nào cũng có nhược điểm của nó. Flutter dù được Google chống lưng rất nhiều, tốc độ phát triển hiện nay rất tốt tuy nhiên nó cũng không tránh được các vấn đề của nó:
Điều đầu tiên đương nhiên là về cộng đồng sử dụng và hỗ trợ. Ra mắt sau nên Flutter hiện nay cũng chưa phải là sự lựa chọn của các công ty hay tập đoàn lớn. Việc làm liên quan đến Flutter còn hạn chế, sẽ phải mất 1 thời gian nữa cùng với sự đầu tư của ông lớn Google thì điều này mới có thể cải thiện tốt lên được.
Flutter chưa đủ hoàn thiện để xử lý các dự án phức tạp. Đây là điểm mấu chốt mà các công ty chưa chọn Flutter làm nền tảng để phát triển 1 ứng dụng lớn của mình. Lý do cơ bản là việc Google sinh ra Flutter là dành cho sự tiện lợi, nhanh chóng, rút ngắn thời gian thử nghiệm và tạo ra 1 ứng dụng. Nếu bạn cần thử nghiệm 1 ứng dụng với chi phí và thời gian eo hẹp, hãy chọn Flutter vì nó rất nhanh; sau đó nếu thành công, hãy cân nhắc việc viết lại ứng dụng bằng native code. Những pattern như Flux, Redux nổi tiếng trên React Native chưa cho thấy sự tiện lợi trên Flutter để có thể giải quyết logic phức tạp; trong khi đó BloC – thứ được Google giới thiệu thì lại cho thấy sự khó hiểu, khó học của nó đối với các lập trình viên.
Flutter cho Mobile App – Quá tốt so với phần còn lại
Mấy nay thấy nhiều người quan tâm Flutter nên mình cũng đi tìm hiểu xem sao. Dù chỉ mới tìm hiểu thôi nhưng mình thật sự ấn tượng với Flutter với những điểm sau, tóm tắt ngắn gọn lại cho mọi người tham khảo:
1. Sử dụng DART. Một ngôn ngữ lập trình hướng đối tượng do Google phát triển. DART là một static type language nên nó là AOT (Ahead of Time), compile xong hết rồi mới chạy. Trong khi đó nó cũng là JIT (Just in Time) giống như các dynamic type language. Khi dev thì nó sử dụng JIT để hỗ trợ Hot Load và build release thì dùng AOT để tối ưu hiệu năng như một native code bình thường. Lại magic nữa !!
2. Ngoài ra DART cũng hướng tới việc trở thành một ngôn ngữ có thể chạy trên nhiều platform khác nhau, nó cũng có máy ảo (VM) làm nhiệm vụ dịch source code sang bytecode như Java. Hiện tại DART có thể transpile ra các ngôn ngữ khác như JS để chạy trên trình duyệt. Cái này không liên quan mobile lắm tuy nhiên đây cũng là 1 ưu điểm lớn của ngôn ngữ này nên không thể bỏ qua.
3. Vậy còn native module ? Khác với JS Bridge, Flutter “nói chuyện” với các native module bằng chính các native interface. Mặc dù vẫn được gọi là “bridge”, tuy nhiên nó nhanh hơn rất nhiều và gân như không bị “thắc cổ chai” như React Native. Ngoài ra các module này được kiến trúc theo “plugin”, các module viết cho Flutter phải tuân thủ các rule trong này. Cá nhân mình thấy viết native module cho Flutter rất tự nhiên, không cần phải học các syntax macro C/C++ như RN.
4. Theo doc của Flutter Engine, có tới 4 threads (runners) được sử dụng trong app: Platform Task Runner, UI Task Runner, GPU Task Runner và IO Task Runner. Các threads này độc lập và không share memory với nhau, chúng giao tiếp với nhau thông qua channels… tới đây ai fan golang sẽ hiểu và rất thích pattern này.
5. Về document: sở hữu bộ doc phải nói là không bỏ sót thứ gì. Đi từ cài đặt, hướng dẫn viết app cơ bản cho tới CI/CD, debug, test và profiling. Bộ profiling của Flutter cũng cực kì hay dùng để đo đạc các chỉ số về performance khá chi tiết.
6. Các ví dụ và kiến trúc ứng dụng: Có hẳn 1 repository trên Github đủ hết các example cho Redux, mvc, mvu… tha hồ quẹo lựa.
Với các đặc tính trên và tốc độ phát triển rất nhanh như hiện tại, đây sẽ là lựa chọn hàng đầu cho mobile development. Có lẽ điểm yếu rõ ràng nhất của Flutter hiện nay là… học cái này rồi ở đâu tuyển ?!?
Một Số Ứng Dụng Được Xây Dựng Từ Flutter
Lập trình Flutter đã được sử dụng để phát triển nhiều ứng dụng di động nổi tiếng trên toàn thế giới. Dưới đây là một số ví dụ điển hình:
Google Ads
Google Ads là một ứng dụng quản lý quảng cáo dành cho các nhà quảng cáo Google. Ứng dụng này cho phép người dùng xem hiệu suất quảng cáo, cập nhật ngân sách và chiến dịch, và nhận thông báo quan trọng.
Alibaba
Alibaba, nền tảng thương mại điện tử lớn nhất Trung Quốc, đã sử dụng Flutter để phát triển một số ứng dụng di động của mình. Flutter giúp Alibaba tạo ra trải nghiệm người dùng mượt mà và nhất quán trên cả iOS và Android.
Reflectly
Reflectly là một ứng dụng nhật ký và quản lý căng thẳng cá nhân, sử dụng AI để cung cấp các phân tích và phản hồi cho người dùng. Ứng dụng này được xây dựng hoàn toàn bằng Flutter, mang lại giao diện người dùng đẹp mắt và tương tác mượt mà.
Tencent
Tencent, một trong những công ty công nghệ lớn nhất Trung Quốc, đã sử dụng Flutter để phát triển một số ứng dụng và dịch vụ của mình. Flutter giúp Tencent tiết kiệm thời gian và chi phí phát triển bằng cách duy trì một codebase duy nhất cho cả hai nền tảng.
BMW
BMW đã sử dụng Flutter để phát triển ứng dụng My BMW. Ứng dụng này cung cấp các tính năng như theo dõi xe, điều khiển từ xa, và quản lý bảo dưỡng. Flutter giúp BMW đảm bảo trải nghiệm người dùng nhất quán trên các thiết bị khác nhau.
Cơ hội việc làm lập trình viên Flutter tại Việt Nam
Với sự phát triển mạnh mẽ của công nghệ di động và nhu cầu tạo ra các ứng dụng nhanh chóng và hiệu quả, các công ty ngày càng tìm kiếm những Flutter Developer tài năng. Nhiều công ty, từ các startup đến các tập đoàn lớn, đều ưu tiên sử dụng Flutter để giảm thời gian và chi phí phát triển.
Flutter Developer có lợi thế cạnh tranh lớn trong thị trường việc làm nhờ khả năng tạo ra ứng dụng cho nhiều nền tảng từ một codebase duy nhất. Điều này giúp các công ty tiết kiệm tài nguyên và tăng tốc độ đưa sản phẩm ra thị trường, làm cho các Flutter Developer trở thành ứng viên hấp dẫn trong mắt nhà tuyển dụng.
Trong bài viết đầu tiên của Series này, mình đã giới thiệu cho các bạn về Flutter cơ bản, những đặc trưng thế mạnh của Framework này so với các đối thủ khác hiện nay. Trong các bài viết tiếp theo mình sẽ đi sâu hơn vào cách tiếp cận và học để trở thành 1 lập trình viên Flutter. Cảm ơn sự theo dõi của các bạn.
PhoneGap cũng là một framwork ứng dụng di động đa nền tảng nguồn mở cho phép các lập trình viên xây dựng các ứng dụng di động bằng HTML, CSS và Javascript. Nó tập trung một kiến trúc có khả năng bổ trợ để giúp các lập trình viên bằng cách tạo các ứng dụng nổi bật với việc sử dụng các khả năng của thiết bị qua các API.
Và nếu bạn cuộn xuống một chút, bạn sẽ tìm thấy Test Token Provider:
