Home Blog Page 197

Có gì mới trong bản phát hành Laravel 5.7?

Laravel là một framework PHP phổ biến nhất, được hỗ trợ tích cực và đóng góp cho dự án mã nguồn mở, sắp đạt được bản phát hành tiếp theo 5.7 vào tháng 8 năm 2018.

Bản phát hành sẽ nhận được bản sửa lỗi cho đến tháng 2 năm 2019 và các bản sửa lỗi bảo mật cho đến tháng 8 năm 2019.

Bản phát hành này tiếp tục cải tiến cho phiên bản 5.6 trước đó và cũng bao gồm một số tính năng mới thú vị.

Trong bài đăng trên blog này, tôi liệt kê một số tính năng thú vị đã được nhóm Laravel công bố và lấy một số tài liệu tham khảo từ kho lưu trữ github.

Tôi sẽ tiếp tục cập nhật bài đăng này lên đến bản phát hành cuối cùng được công bố từ nhóm chính thức, vì yêu cầu kéo mới đến từ các cộng tác viên cộng đồng.

Tuyển dụng Laravel lương cao up to 2000 USD

1. Laravel Nova

Thư viện Laravel được chờ đợi nhiều nhất đã được Taylor công bố trong Laracon US 2018, và đây là một gói bảng quản trị đẹp cho ứng dụng Laravel. Đây là một bảng điều khiển quản trị mã cho dự án Laravel mới hoặc hiện tại của bạn. Phiên bản trước của Laravel vẫn hỗ trợ Nova, vì nó là một gói trình soạn thảo đơn giản. Để biết sâu hơn về nó theo các tài liệu chính thức, cũng đi qua bài viết giới thiệu trên Medium của Taylor.

Laravel Nova chính thức được phát hành vào ngày 22 tháng 8 năm 2018, bản phát hành đầu tiên v1.0. * (Orion) hiện có sẵn để mua từ website chính thức .

2. Xác minh email

Framework giới thiệu tính năng xác minh email tùy chọn với bản phát hành này. Để sử dụng tính năng này, bạn phải thêm cột thời gian email_verified_at vào bảng user thông qua famework migration.

Để tư vấn cho người dùng mới tham gia xác minh email của họ, mô hình Người dùng sẽ triển khai giao diện MustVerifyEmail.

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

Sau khi triển khai giao diện, các thành viên mới được đăng ký sẽ nhận được email chứa liên kết xác minh đã đăng ký. Khi người dùng nhấp vào liên kết này, ứng dụng sẽ tự động cập nhật cơ sở dữ liệu và chuyển hướng người dùng đến vị trí dự định.

Tính năng mới này cũng giới thiệu một phần mềm trung gian đã được xác minh. Nếu bạn muốn bảo vệ các route của ứng dụng của bạn từ các thành viên được xác minh, nó có thể được gắn vào các route ứng dụng.

'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,

3. Cổng / Chính sách người dùng của khách

Phiên bản trước của Laravel được sử dụng để trả về false nếu người dùng chưa được xác thực muốn truy cập vào ứng dụng. Tuy nhiên, với phiên bản mới (5.7) nó bây giờ sẽ cho phép khai báo một gợi ý kiểu “tùy chọn” hoặc cung cấp một giá trị mặc định null để cho phép người dùng khách vượt qua các kiểm tra ủy quyền.

Gate::define('update-product', function (?User $user, Product $product) {
    // ...
});

4. Symfony Dump Server

Symfony của dump-server đang tích hợp tới Laravel 5.7. Nó là một lệnh thông qua gói được xây dựng bởi một thành viên cộng đồng của Laravel, Marcel Pociot.

Tính năng này sẽ hữu ích khi gỡ lỗi trên ứng dụng của bạn mà không làm gián đoạn thời gian chạy ứng dụng.

Lệnh chạy ở chế độ nền và thu thập dữ liệu được truyền từ ứng dụng và hiển thị đầu ra thông qua chế độ console.

php artisan dump-server

// Output to the HTML file.
php artisan dump-server --format=html > report.html

Package là một mã nguồn mở, đóng góp nếu bạn có bất kỳ ý tưởng nào về nó.

5. Trình tạo URL và Cú pháp có thể gọi

Để tạo các URL cho các hành động controller, Laravel bây giờ hỗ trợ cú pháp mảng có thể gọi, thay vì chỉ các chuỗi.

Trước đây,

$url = action('BlogController@index');

$url = action('BlogController@view', ['id' => 1]);

Bây giờ,

use App\Http\Controllers\HomeController;

$url = action([BlogController::class, 'index']);

$url = action([BlogController::class, 'view'], ['id' => 1]);

6. Liên kết Paginator

Bây giờ, bạn có thể kiểm soát số lượng liên kết pagination trên mỗi bên của thiết kế URL được phân trang. Theo mặc định, sẽ có ba liên kết được tạo trên mỗi bên của liên kết paginator. Phương thức vừa được giới thiệu onEachSide () cho phép điều khiển chúng bằng Laravel 5.7.

{{ $pages->onEachSide(5)->links() }}

7. Read / Write Streams method in Filesystem

Laravel 5.7 introduces new methods for the Filesystem integration.

Storage::disk('s3')->writeStream(
        'destination-file.zip',
        Storage::disk('local')->readStream('source-file.zip')
    );

8. Thông báo Localization

Giờ đây, bạn có thể chỉ định ngôn ngữ cho các thông báo gửi khác với ngôn ngữ hiện tại.

Lớp Illuminate \ Notifications \ Notification thêm phương thức miền địa phương mới để gán ngôn ngữ mong muốn.

$user->notify((new NewUser($user))->locale('np'));

Bạn cũng có thể sử dụng mặt tiền để đặt localization cho nhiều mục nhập thông báo.

Notification::locale('np')
        ->send($subscribers, new WeeklyNewsletter($newsletter));

9. Thông báo lỗi được cải thiện

Bây giờ bạn có thể theo dõi tốt hơn các thông báo lỗi của bạn bằng ứng dụng Laravel của bạn. Như của Laravel 5.7, bạn sẽ nhận được một thông báo súc tích gọn gàng hơn rằng phương thức này không tồn tại trên mô hình cụ thể.

10. Thay đổi thư mục Resources

Một chút thay đổi đối với thư mục resources đi kèm với bản phát hành mới.

Sự thay đổi này đã được Taylor công bố với một tweet, vì tài sản trực tiếp sẽ biến mất và js, sass, lang, lượt xem sắp ra vào thư mục resources.

Laravel 5.7 resources directory changes.

Khi bạn nâng cấp ứng dụng của mình lên 5.7, bạn không cần phải tạo lại thư mục resources / asset theo cấu trúc thư mục mới hơn. Cấu trúc cũ hơn sẽ vẫn hoạt động.

11. Kiểm tra các lệnh Artisan

Nhân viên đầu tiên của Laravel (Mohamed Said) gần đây đã đóng góp một tính năng tuyệt vời trong khuôn khổ để kiểm tra các lệnh thủ công. Ông đã thông báo qua tweet của mình về tính năng này, và cũng được ghi lại trong tài liệu chính thức. Bây giờ, với phần bổ sung này, framework bây giờ cung cấp một API đơn giản để thử nghiệm các ứng dụng console yêu cầu nhập liệu vào của người dùng.

{
    public function testInstallTest()
    {
        $this->artisan('app:setup', [
            'name' => 'Setup New Project'
        ])
            ->expectsQuestion('Are you sure you want to start installation ?', 'Yes')
            ->expectsOutput('Initializing...')
            ->expectsQuestion('Please select your preferred version', 'v2.5')
            ->expectsOutput('Installing...')
            ->expectsQuestion('Do you want to run composer dump -o ?', 'Yes')
            ->expectsOutput('Generating Optimized Autoload Files...')
            ->assertExitCode(0);
    }
}

Phần kết luận

Cảm ơn bạn đã đọc bài viết này cho đến khi kết thúc, hãy làm theo bài viết này vào những ngày sau để biết thêm nhiều tính năng mới sắp được phát hành 5.7.

Bài viết gốc được đăng tải tại Sujipthapa.co

Sublime Text là gì? Hướng dẫn cài đặt Sublime Text 3 chi tiết

Sublime Text là gì? Cách cài đặt Sublime Text 3 cực đơn giản

Trình soạn thảo code là thứ không thể thiếu đối với các lập trình viên. Hiện nay có rất nhiều trình soạn thảo như VS code, VS studio, Dreamweaver hay Sublime Text. Với giao diện trực quan, tốc độ xử lý nhanh và khả năng tùy biến cao, Sublime Text đã trở thành một trong những lựa chọn hàng đầu của nhiều lập trình viên. Bài viết này sẽ giúp bạn hiểu rõ Sublime Text là gì và cách cài đặt Sublime Text 3, phiên bản mới nhất hiện nay.

Sublime Text là gì?

Sublime Text là một trình soản thảo code miễn phí dành cho lập trình viên do Jon Skinner tạo ra vào tháng 1 năm 2008. Sublime Text cho phép người dùng cài đặt nhiều plug-in miễn phí và hỗ trợ trên nhiều hệ điều hành phổ biến như Windows, Mac và Linux.

Hiệu năng của Sublime Text khá nhẹ, khởi động nhanh, tốn ít tài nguyên do base từ 2 ngôn ngữ lập trình nhanh mạnh là Python và C++ và có giao diện trực quan, dễ dàng tùy biến, rất bắt mắt. Đặc biệt nó hỗ trợ cực mạnh các plugin hay package từ cộng đồng nên giúp cho việc viết và maintain code trở nên dễ dàng hơn bao giờ hết. Tóm gọn lại:

  • Được sử dụng miễn phí nhưng thực ra là bản unregistered, thỉnh thoảng hiện sẽ ra pop-up thông báo bạn đang dùng thử và nhắc bạn mua bản chính thức nhưng bạn có thể bỏ qua và tiếp tục sử dụng.
  • Nhẹ, khởi động nhanh, tốn ít tài nguyên.
  • Nhiều tính năng hữu ích như chỉnh sửa tại nhiều vị trí một lúc, soạn thảo toàn màn hình, soạn thảo với layout nhiều cột…
  • Hỗ trợ nhiều plugin mạnh mẽ bởi cộng đồng developer đông đảo.
  • Giao diện đơn giản, tinh tế, có sẵn và hỗ trợ cài đặt nhiều theme.

Cài đặt các bạn có thể tham khảo trên trang chủ của Sublime Text. Bài này mình sẽ list các tác vụ giúp tối ưu Text editor trong quá trình làm việc, tối ưu nhiều thì bạn đỡ tốn thời gian.

  Vì sao tôi chuyển từ Visual Studio Code sang Sublime Text

Cách tải và cài đặt Sublime Text 3

Tải Sublime Text 3

Để cài đặt Sublime Text 3 trên Windows hoặc macOS bạn truy cập vào trang tải sublime text 3 và chọn phiên bản phù hợp với hệ điều hành của mình.

Khởi động nhanh 1 folder code

Do mình dùng Mac và Linux nên thường gõ lệnh trên Terminal, còn các bạn Win thì mọi người google thêm:

subl [folder_path]: Mở folder với sublime text
subl [file_path]: Mở file với sublime text

Install thêm plug-in nên có

  1. Package Control: phải cài cái này để bạn có thể search và cài trực tiếp các package cho Sublime Text. Để mở màn hình command line, bạn dùng tổ hợp phím Ctrl + Shirt + P.
  2. Emmet: hỗ trợ soạn thảo HTML siêu nhanh. Cách cài đặt Sublime Text 3 cực đơn giản
  3. Sidebar EnhancementsCách thêm plug-in trong Sublime Text 3
  4. Git Gutter: Package này giúp thông báo những thay đổi phiên bản của bạn với Git server
  5. DocBlockr: Tự động tạo comment đúng chuẩn
  6. CodeIntel: Dễ dàng tìm ra các function,class,.. đang sử dụng được viết từ đâu
  7. Bracket HighLighter: Package này giúp cho bạn có thể dễ nhìn thấy phần mở/ đóng của thẻ nằm ở chỗ nào.
  8. AutoFileName: Package này sẽ hiển thị ra tất cả các file có trong thư mục để các bạn có thể nhúng file đơn giản hơnCách thêm plug-in trong Sublime Text 3
  9. ColorHighlighter: Hiển thị màu sắc trong code css Thêm plug-in trong Sublime Text 3
  10 theme Sublime Text tốt nhất

Cài đặt cấu hình

Để cấu hình các option như cỡ chữ, độ dài blah blah…bạn vào Preferences -> Setting và chỉnh sửa các file Preferences.sublime-settings - User

Cài đặt cấu hình trong sublime text 3

Các phím tắt trong Sublime Text

Phím tắt thường dụng

  • Shift + Alt + (1/2/3/4/5/8/9): Chia thành nhiều màn hình
  • Shift + F11: Toàn màn hình
  • Ctrl + P: Mở nhanh một file
  • Ctrl + Shirt + T: Mở file vừa đóng.
  • Ctrl + Tab: Chuyển đến tab đang mở gần đây nhất.
  • Alt + number: Chuyển đến tab theo số thứ tự
  • Ctrl + PgUp/PgDown: Chuyển tab theo vòng tròn
  • Ctrl + W: Đóng tab đang xem / Thoát Sublime Text

Phím tắt ở 1 tab

  • Ctrl + F: Tìm kiếm
  • Ctrl + H: Tìm kiếm và thay thế
  • Ctrl + Shift + K: Xóa dòng hiện tại
  • Ctrl + Shift + D: nhân đôi dòng hiện tại
  • Ctrl + Shift + ↑ (↓): Di chuyển dòng/cụm, tự động đưa vào brackets (các dấu đóng mở hàm)

Phím tắt trong sublime text

  • Ctrl + /: comment
  • Ctrl + Shift + /: comment dạng block
  • Ctrl + R: List các hàm.
  • Ctrl + KU: Chuyển thành chữ hoa
  • Ctrl + KL: Chuyển thành chữ thường
  • Ctrl + X: Xóa dòng hiện tại nhưng đồng thời lưu nó vào bộ nhớ đệm.

Phím tắt điều hướng

  • Ctrl + G <số dòng> : Di chuyển tới dòng
  • Ctrl + P :<số dòng> : Di chuyển tới dòng
  • Ctrl + D: Bôi đen từ hiện tại
  • Ctrl + M: Di chuyển tới dấu đóng ngoặc gần nhất
  • Ctrl + Shirt + M: Bôi đen toàn bộ nội dung trong cặp ngoặc.
  • Ctrl + Shirt + Mũi tên trái: Bôi đen đến đầu từ về phía bên trái.
  • Ctrl + Shirt + Mũi tên phải: Bôi đen đến đầu từ về phía bên phải.
  • Ctrl + L: Bôi đen dòng hiện tại và chuyển con trỏ tới dòng tiếp theo.

Tóm lại Sublime Text là một công cụ vô cùng mạnh mẽ với những tính năng nổi bật và khả năng tùy biến cao được khá nhiều developer ưa chuộng hiện nay. Trên đây là hướng dẫn chi tiết cách cài đặt Sublime Text 3, chúc bạn thành công!

Truy cập ngay công việc IT đãi ngộ tốt trên TopDev

Đằng sau thành công của một Tập đoàn Tech: Xem trọng Software developer hơn cả tiền bạc

Kỷ nguyên công nghệ mới vẫn chưa có dấu hiệu chậm lại, nhưng nhóm các Chief vẫn đang vật lộn với những vấn đề rất cơ bản gọi là chuyển đổi digital (digital transformation). Một lý do làm cho thách thức này trở nên khó nhằn đó là ta không thể giải quyết nó theo cách mà ta xử lý các chuyển đổi khác được – bằng tiền bạc và các chuyên viên tư vấn quản lý. Mà nó đòi hỏi chuyên môn cao hơn của một dạng leader mới của doanh nghiệp: các kĩ sư phần mềm.

Systems engineer configuring servers in data center.

Nền kinh tế toàn cầu đang tăng cường lăn bánh trên lối mòn công nghệ mới, và công ty nào cũng ít nhiều trở thành công ty công nhệ mới, và nhu cầu săn tìm developer chất lượng nhất được ưu tiên hơn bao giờ hết. Tuy nhiên, theo nghiên cứu mới đây của Stripe and Harris Poll đã tìm ra đến 61% các sếp Chief tin rằng việc tiếp cận các developer xuất chúng có thể là một mối đe doạ đến công ty của họ. Sốc hơn là, tính từ khủng hoảng tài chính của 1 thập kỷ trước, nỗi lo về “mối đe doạ” này được xếp trên cả khó khăn về vốn.

Chưa hết, mặc dù được gọi là “tài nguyên quý giá” nhất của công ty, các developer thường bị “lãng phí tài năng” trong đó. Nhìn chung hằng năm, các công ty có thể mất đến 300 tỉ USD để trả nợ kĩ thuật, vì các dev phải chôn hết thời gian của họ vào bảo trì hệ thống hoặc xử lý những phần hao hụt từ phần mềm xấu.

Sự thật này như một “cục nhọt” vậy, và nó cũng đem đến không ít ảnh hưởng đến tâm lý của developer lên sự thành công của công ty. Không phải kĩ sư phần mềm có tiếng vì nhiều ý tưởng tốt, nhưng set kĩ năng của họ làm họ trở nên thật sự đặc biệt đề đầu tư cho sự đổi mới, năng suất, và các cầu nối kinh doanh mới. Nếu được khai thác đúng cách, họ có thể làm tác nhân “nhân số doanh thu” cho công ty họ – ảnh hưởng mạnh trực tiếp kết quả của team và công ty của họ.

Xem tuyển dụng software developer đãi ngộ tốt trên TopDev

Nếu các developer là resource gây cản trở nhất trong công ty bạn, thì câu hỏi cần được trả lời nhất ở hiện tại đó là: Làm thế nào để tăng năng suất của họ? Là một Chief executive, có 3 cách cho bạn để khai thác nhân tố này:

1. Hiểu rõ chi phí hiện tại và chi phí cơ hội. 

Đối với các CFO, nó đồng nghĩa bạn phải tập trung phân tích phần phân chia đầu tư cho các dev nhiều tương đương như bạn phân tích phần cho công ty vậy.

2. Outsource.

Hãy mở lòng với cloud. Không chỉ dành để lưu trữ và điện toán, mà cho nhiều tính năng khác trong kinh doanh mà không phải là thế mạnh của công ty bạn – từ messaging, thanh toán và CRM đến planning, kế toán kiểm toán, quản lý hàng tồn,… Từ đó đẩy dev của bạn lên các project chuyên sâu hơn, khó hơn. Nếu bạn còn cân nhắc giữa mua hay build, đơn giản thôi: mua.  Trừ phi bạn là những gã khổng lồ như Amazon hay Microsoft, thì đừng nên phân chia kĩ sư vào build các data center. Đồng thời, các dev cảu bạn cũng nên tập trung vào những thứ làm nên lợi thế kinh doanh của công ty bạn mà thôi.

3. Tuyển các leader có background/ kinh nghiệm về tech. Nếu không phải dàn chief, thì cũng nên các manager cấp cao.

Việc có thêm các kĩ sư phần mềm trực tiếp tham gia vào các quyết định về strategic planning sẽ đảm bảo cho bạn một lối đi product đúng đắn, một team giỏi và một hướng đi công nghệ phù hợp nhất cho các project dài hơi — và bạn cũng sẽ tránh được những hố đen như nợ technical và không lãng phí thời gian phát triển của các dev.

Trong thời đại chuyển đổi số hiện nay, quan trọng là phải truyền cảm hứng được cho dev bằng các tool, cơ sở hạ tầng và hướng đi rõ ràng để cùng nhau tiến nhanh hơn, chắc hơn. Thông qua cách đầu tư vào “hệ số nhân di động” này, bạn hoàn toàn có thể tận dụng được hết những tài nguyên mình đang có, và mở đường tiến vào những cú nhảy kinh doanh bức phá hơn.

Will Gaybrick, CFO của Stripe. Gaybrick cũng là một thành viên của Hiệp hội CFO Toàn cầu của CNBC

TopDev via CNBC

Những ngôn ngữ lập trình tốt nhất cho bạn năm 2024 – So sánh đầy đủ

Đây là hướng dẫn dứt khoát cho bất kỳ ai sẵn sàng chọn con đường sự nghiệp ngôn ngữ lập trình đúng vào năm 2024.

Và hãy để tôi hiểu rõ điều gì đó:

Đây không phải là một “ngôn ngữ nóng nhất hàng đầu” què quặt ném một loạt các tên và buzzwords theo ý kiến ​​của một ai đó.

Đây là một đánh giá khách quan và thực tế của tình trạng hiện tại, xu hướng và dự đoán an toàn trong tương lai gần của ngành công nghiệp CNTT vào đầu năm 2018.

Nó dựa trên dữ liệu thống kê từ các nguồn đáng tin cậy khác nhau và là kết quả của một nghiên cứu chuyên sâu hai tuần.

Mục tiêu của bài đăng này là giúp bạn đưa ra quyết định sáng suốt về các ngôn ngữ mà thị trường CNTT đang tìm kiếm vào năm 2024, đó là thời gian và nỗ lực để làm chủ và biến thành một nghề nghiệp thành công và có lợi nhuận với tư cách là nhà phát triển phần mềm .

Khi cố gắng quyết định ngôn ngữ lập trình nào tạo ra con đường sự nghiệp tốt nhất, các nhà phát triển thường tìm kiếm bốn đặc điểm sau:
  1. Lương cao
  2. Phổ biến – nhiều cơ hội việc làm, đa dạng
  3. Xu hướng nhận được nhu cầu cao hơn cho tương lai
  4. Tốt hơn là dễ học và dễ làm việc  Đối với mỗi ngôn ngữ được nêu trong danh sách,bạn sẽ thấy Giới thiệu ngắn gọn giúp bạn làm quen với ngôn ngữ, loại tùy chọn nghề nghiệp nào có thể cung cấp và điều thú vị về nó
  5. Biểu đồ phổ biến ngôn ngữ theo TIOBE và GitHub Octoverse
  6. So sánh mức lương dựa trên dữ liệu từ Indeed.com và khảo sát năm 2017 của StackOverflow
  7. Xu hướng nhu cầu trong năm năm qua theo Google Trends
  8. Đoạn mã ví dụ ngắn để cung cấp cho bạn ý tưởng trực quan về cú pháp ngôn ngữ
Cuối cùng, tôi đã bao gồm bốn ngôn ngữ ít được biết đến đã đạt được sự phổ biến nhanh chóng trong vài năm qua và dự kiến ​​sẽ có nhu cầu rất cao cho năm 2018.
Hãy đi sâu vào ngay với lựa chọn số một.

1. JavaScript 

JavaScript là ngôn ngữ phổ biến nhất theo khảo sát hàng năm của StackOverflow với 62,5% số người được hỏi tuyên bố sử dụng nó.

Chắc chắn ngôn ngữ thống trị của trang web và sự tăng trưởng của JavaScript trong thập kỷ qua là rất lớn. Tại sao? Chỉ cần nhìn xung quanh và đếm số lượng thiết bị hỗ trợ web mà bạn có thể xem.

Người đồng sáng lập và nhân vật lập trình nổi tiếng của Stack Overflow, Jeff Atwood, nổi tiếng nói:

“Bất kỳ ứng dụng nào có thể được viết bằng JavaScript, cuối cùng sẽ được viết bằng JavaScript.”

Có nghĩa, là an toàn để nói rằng sẽ không có thiếu cơ hội JavaScript trong năm 2018 và xa hơn nữa. Kiến thức JavaScript sinh ra nhiều khuôn khổ front-end như Angular, React, Ember, Backbone, và các framework khác, cũng như môi trường chạy Node.js, cho phép chạy JavaScript trên backend với hiệu quả cao.

Ba trong số bốn frameworks phổ biến nhất cho năm 2023 theo StackOverflow là dựa trên JavaScript.

Nếu bạn sử dụng nó và bạn sẽ thích ngay lập tức, hãy xem kết quả công việc của bạn đang hoạt động, ví dụ như tạo các thành phần web tương tác, JavaScript là một ý tưởng tốt cho bạn. Hãy nhớ rằng việc sử dụng JavaScript có nghĩa là bạn cũng nên có kiến thức với HTML và CSS, mà về cơ bản là những trang web được tạo ra. Các công cụ như Apache Cordova hoặc React Native cho phép sử dụng JavaScript cho các ứng dụng di động. Thậm chí có thể phát triển trò chơi hoặc phát triển ứng dụng dành cho máy tính để bàn với các dự án như Electron.

Xu hướng phổ biến của JavaScript trong 5 năm qua: Tăng ổn định

JavaScript code ví dụ:

document.addEventListener("DOMContentLoaded", function(event) {
  var e = document.getElementById("myForm");
  var msg = "";
 
  // Wait for user to click the button
  e.addEventListener("change", function () {
    var myColor = this.color.value;

    if (myColor == "Blue") {
      msg = "Just like the sky!";
    } else if (myColor == "Red") {
      msg = "Quite daring!";
    } else if (myColor == "Green") {
      msg = "Like... grass?";
    }   

    // Output message
    document.getElementById("msg").innerHTML = msg;
  }, false);
});

Phần kết luận

JavaScript chắc chắn là một trong những ngôn ngữ phổ biến nhất trong năm 2018 và hơn thế nữa. Thật khó cho một ngôn ngữ của tầm cỡ này để đứng cao trong bảng xếp hạng lương như hầu hết các vị trí được khảo sát có thể là cơ sở. Không giống như các ngôn ngữ ít phổ biến 

2. Swift

Swift là một ngôn ngữ lập trình tương đối mới được phát hành bởi Apple vào năm 2014. Đây là ngôn ngữ để phát triển các ứng dụng iOS hoặc macOS gốc. Nó được coi là một cải tiến về khả năng sử dụng và hiệu suất so với Objective-C – ngôn ngữ được sử dụng cho hệ điều hành iOS và OS X của Apple.

Swift thường được các nhà phát triển ưa thích, đứng ở vị trí thứ 4 trong danh sách các ngôn ngữ được yêu thích nhất trong năm 2017, sau khi đạt vị trí số 1 trong năm 2015 . Nếu bạn chọn một nghề nghiệp với Swift, rất có thể bạn sẽ thích nó. Nếu bạn muốn tham gia phát triển di động, bạn chắc chắn nên xem Swift như một con đường sự nghiệp được trả lương cao. Nói chung, các ứng dụng iOS đã được chứng minh là có lợi hơn so với các ứng dụng Android.

Xếp hạng TIOBE là chỉ báo về mức độ phổ biến của ngôn ngữ lập trình. Xếp hạng dựa trên số lượng kỹ sư có tay nghề trên toàn thế giới, khóa học, nhà cung cấp bên thứ ba và công cụ tìm kiếm.

2. GitHub Octoverse: #13

Thống kê nhanh về mức độ phổ biến và so sánh mức lương 1. TIOBE Rating: # 12 (January 2018) Xếp hạng TIOBE là một chỉ số về mức độ phổ biến của các ngôn ngữ lập trình. Xếp hạng dựa trên số lượng kỹ sư có tay nghề trên toàn thế giới, khóa học, nhà cung cấp bên thứ ba và công cụ tìm kiếm.

Thống kê từ cuối năm 2017 Các ngôn ngữ phổ biến nhất trên GitHub bằng các yêu cầu kéo mở (được hiển thị bằng hàng triệu). GitHub là nơi có các dự án nguồn mở của 24 triệu người dùng, được viết bằng 337 ngôn ngữ lập trình duy nhất trong 67 triệu kho lưu trữ.

3. Mức Lương của Mỹ tại Indeed.com: Cao

Indeed.com là một công cụ tìm kiếm liên quan làm việc trên toàn thế giới cho công việc danh sách. Execognized on 60 quốc gia and 28 language.Vào tháng 10 năm 2010, Indeed.com đã chuyển Monster.com để trở thành trang web làm việc có giá trị truy cập cao nhất tại Hoa Kỳ.

4. Mức Lương Trong StackOverflow: Trên Mức Trung bình

Thống kê từ năm 2017, hơn 64 000 nhà phát triển được khảo sát.StackOverfllow được cho là cộng đồng nhà phát triển lớn nhất với hơn 50 triệu lượt truy cập mỗi tháng. Mỗi năm kể từ năm 2011, StackOverflow đã tiến hành một cuộc khảo sát yêu cầu các nhà phát triển về các công nghệ, mã hóa và thói quen làm việc yêu thích của họ.

Xu hướng nhanh chóng phổ biến trong 5 năm qua: Tăng chậm 

Đoạn mã ví dụ Swift:

import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.navigationController!.navigationBar.barTintColor = UIColor.yellow        
        self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.black]
        
        let navBgImage:UIImage = UIImage(named: "bg_blog_navbar_reduced.jpg")!
        self.navigationController!.navigationBar.setBackgroundImage(navBgImage, for: .default)
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

Phần kết luận

Swift là ngôn ngữ mới và có vẻ tốt hơn cho các ứng dụng iOS và macOS so với ngườitiền nhiệm Objective-C của nó.

Chỉ trong vài năm, Swift đã trở nên nổi tiếng và đã đánh bại Objective-C trong hầu hết các bảng xếp hạng. Ngôn ngữ này được các nhà phát triển yêu thích và cũng trả tiền tốt – bạn có thể hỏi thêm gì từ một con đường sự nghiệp.

3. Python

Python là một ngôn ngữ mục đích chung mà bạn có thể tìm thấy gần như bất cứ nơi nào ngày hôm nay. Có thể là ứng dụng web, ứng dụng dành cho máy tính để bàn, máy chủ mạng, học máy, công cụ truyền thông và các ứng dụng khác.

Nó được sử dụng bởi những Công ty lớn như NASA hay Google, nơi mà người sáng tạo Python Guido van Rossum được tuyển dụng trong khoảng 8 năm viết chủ yếu … Python.

Code Python là gọn gàng, dễ đọc và được cấu trúc tốt. Thụt lề đúng đắn không chỉ dành cho vẻ đẹp ở đây – nó xác định việc thực thi mã.

Các khuôn khổ phát triển web dựa trên Python như Django và Flask ngày càng phổ biến hơn. Ngoài ra, ngôn ngữ này còn được trang bị đầy đủ các máy tính học tập và thư viện phân tích dữ liệu như Scikit-learn và Pandas .Trên toàn bộ, con đường sự nghiệp với Python là khác nhau và ở đây. Đó là một lựa chọn tốt cho các nhà phát triển mới bắt đầu, vì nó là ngôn ngữ cấp cao và dễ đọc và dễ hiểu.

So Sánh:

Xu hướng nhanh chóng phổ biến trong 5 năm qua: Cực mạnh 

Đoạn mã ví dụ Python:

import itertools

def iter_primes():
     # an iterator of all numbers between 2 and +infinity
     numbers = itertools.count(2)

     # generate primes forever
     while True:
         # get the first number from the iterator (always a prime)
         prime = numbers.next()
         yield prime

         # this code iteratively builds up a chain of
         # filters...slightly tricky, but ponder it a bit
         numbers = itertools.ifilter(prime.__rmod__, numbers)

for p in iter_primes():
    if p > 1000:
        break
    print p

Phần kết luận

Trở thành master của Pyhton chắc chắn sẽ là sự lựa chọn tốt nhất ở hiện tại cho bạn và trong tương lai gần. Đơn giản là nó đứng đầu ở gần như tất cả các hạn mục.

[Còn tiếp…] 

TopDev via My First IT Job

Ứng dụng mới cực hot từ Google: Android Sunflower

Ứng dụng mới cực hot từ Google: Android Sunflower

Người dịch: Dương Đình Tuấn

Đây là một ứng dụng làm vườn để trình bày các phương pháp hay nhất được phát triển bằng Android Jetback. 

(Bài viết này cũng có bằng tiếng Trung Quốc tại WeChat / 中文 参考 WeChat)

Google đã công bố Android Jetpack tại Google I/O 2018. Jetpack là một tập hợp các thành phần phần mềm Android để giúp cho bạn phát triển các ứng tuyệt vời một cách đơn giản hơn. Các thành phần này giúp bạn đi theo các phương pháp hay nhất, bạn sẽ thoải mới vì code đã được viết sẵn và đơn giản hóa các tác vụ phức tạp, do đó bạn có thể tập trung vào code mà bạn quan tâm.

Để giúp các lập trình viên tìm hiểu cách tổng hợp các thành phần Jetpack vào trong chính ứng dụng của mình, chúng tôi đã tạo ra Sunflower, đây là một ứng dụng làm vườn mô tả các phương pháp hay nhất về phát triển Android với Android Jectpack. Nếu bạn mới sử dụng Jetback, để tốt hơn bạn nên xem nội dung về Jetpack trên developer.android.comtạo ứng dụng Jetpack đơn giản đầu tiên của bạn trước khi tiếp tục.

Bài viết này về Sunflower là phần đầu trong chuyên đề. Nó sẽ đưa bạn vào một chuyến hành trình Sunflower và giải thích ngắn gọn về các thành phần Jetpack được bao hàm trong ứng dụng này. Các bài viết trong thời gian tới sẽ thảo luận về phát triển Jetpack và Android và tìm hiểu sâu hơn về các chủ đề cụ thể như Navigation và đặt  lịch trình cho các tác vụ có tính chu kỳ với WorkManager.

Tuyển lập trình android lương cao trong tháng

Làm nhanh một chuyến tham quan vườn

Khi ứng dụng được chạy lần đầu, ban đầu người dùng nhìn thấy màn hình ”My Garden” trống. 

Hãy thêm một cây trồng vào! Đến danh sách cây trồng bằng cách chạm vào menu hamburger và mở Navigate drawer lên.

Mỗi cây trồng được liên kết với Grow Zone, cái mà được xác định bởi vĩ độ và chỉ ra khu vực phù hợp nhất cho cây phát triển tốt. Bạn có thể lọc danh sách các cây trồng bằng cách nhấn vào cây trồng trong danh sách lọc để chọn ra một Grow Zone.

Nhấn vào chi tiết cây trồng, sẽ đưa đến màn hình Plant Detail.

Màn hình chi tiết  hiển thị tên, mô tả, nhu cầu tưới nước của cây và hình ảnh của cây. Người dùng có thể thêm cây vào khu vườn của họ từ màn hình này bằng cách nhấn vào nút Floating Action Button. Họ cũng có thể Share giống cây trồng này thông qua tùy chọn menu.

Sau khi một hoặc nhiều cây trồng được thêm vào, từng cây mới sẽ xuất hiện trong màn hình  “My Garden”, cùng với ngày được trồng và nhu cầu được tưới sắp tới. Hãy quay trở lại “My Garden” để xem lại màn hình lúc này, thì chúng ta đã thêm một hoặc hai loại cây vào rồi.

Màn hình “My Garden” lúc này hiển thị những cây được thêm vào, cùng với ngày chúng được trồng cũng như lần cuối được tưới là khi nào.

Sử dụng các thành phần Jetpack

Sunflower sử dụng nhiều thành phần Jetpack. Dưới đây là tổng quan ngắn gọn về vai trò của  mỗi thành phần:

  • Sunflower được viết hoàn toàn bằng Kotlin, sử dụng Android KTX. Android KTX là một tập hợp các tiện ích mở rộng dành cho Kotlin để tối ưu hóa các API nền tảng Jetpack và Android , nhờ đó có mã Kotlin ngắn gọn và độc đáo hơn.
  • Ứng dụng sử dụng một Activity với nhiều Fragment. Chuyển tiếp giữa các fragment sử dụng thành phần Navigation hiệu ứng chuyển tiếp.
  • Các màn hình sử dụng các fragment layout, được tạo bằng cách sử dụng ConstraintLayoutData Binding
  • Lưu trữ dữ liệu trên thiết bị về danh sách  và các mục nhập cây trồng được quản lý với Room ở cấp cơ sở dữ liệu và hiển thị với giao diện người dùng thông qua ViewModelsLiveData
  • AppCompat được sử dụng để duy trì chức năng chính của ứng dụng dành cho các phiên bản quá cũ của Android
  • Các tác vụ nền được xử lý bởi WorkManager
  • Các chi tiết về cây trồng có thể được chia sẻ với các ứng dụng khác trên thiết bị , hoặc được sao chép vào bộ nhớ tạm một cách đơn giản
  • Kiểm thử được thực hiện bởi các trình kiểm tra bằng bằng JUnitEspresso Android UI

Các cải tiến trong tương lai

Sunflower hiện đang đã phát hành bản alpha và đang không ngưng phát triển, với các tính năng mới và thường xuyên tích hợp các thành phần chuyên sâu hơn. Một số cải tiến sắp tới bao gồm việc lọc danh sách cây trông dựa trên vị trí của người dùng đối với AndroidX và thông báo khi một khu đất cần tưới tiêu.

Tạo tài khoản và bình chọn cho các giải pháp mà bạn muốn xem hoặc khám phá trên GitHub.

Trong các bài viết tới, chúng ta sẽ tìm hiểu cách sử dụng các thành phần Jetpack khác trong Sunflower như sự chuyển hướng qua lại và nhiệm vụ định kỳ, vì vậy hãy chú ý theo dõi. Cảm ơn vì đã đọc!

Chân thành cảm ơn những cá nhân tuyệt vời trong nhóm Android Developer Relations và đội ngũ Jetpack vì những đóng góp của họ cho Sunflower và bài viết này.
Bài viết gốc được đăng tải tại Medium

Xin đừng return mảng kết hợp!

Người dịch: Trần Thanh Dân

Tôi ghét phải xử lý mảng kết hợp khi đang viết code cho client. Vấn đề với mảng là nó không có ngữ cảnh, không có kiến thức gì đặc biệt. Mảng đơn giản là một phần data được gói gọn theo một format nhất định không được thuận tiện lắm. Tồi tệ nhất là chúng ràng buộc ta vào một cách triển khai nhất định.

Tôi không có ý nói rằng bạn không nên trả về các mảng có dữ liệu thống nhất (return arrays that have uniform data). Việc trả về mảng của một loại đối tượng là tốt, dù cho bạn không dám chắc được là nó sẽ chỉ chứa một số loại data nhất định qua API.

Mảng có thể hoạt động như phần dữ liệu đại diện cho một số lớp (class) nội bộ, và xin nhấn mạnh là nội bộ – là state hợp lí nhất mà nó nên xuất hiện. Cái tôi muốn nói tới là 

Xem xét đoạn mã sau:

class AcmeFileSender implements FileSender
{
    public function sendFiles(FileCollection $files): array
    {
        $sent = 0;
        $errors = [];
        foreach ($files as $file) {
            try {
                $this->send($file);
                $sent++;
            } catch (SenderException $exception) {
                $errors[] = $exception->getMessage();
            }
        }
        return [
            "sent" => $sent,
            "failed" => count($errors),
            "errors" => $errors
        ];
    }

    public function send(File $file): void {//...}
}

Vấn đề trong trường hợp này là, Chúng ta không thể biết được cấu trúc chính xác của mảng này. Điều này có nghĩa là khi chúng ta viết code ở phía client chúng ta sẽ phụ thuộc vào việc thực hiện phương thức sendFiles(). Chúng ta phải biết được chính xác khóa (key) là gì và loại dữ liệu (sort of data) của khóa đó.

Trong hướng đối tượng (OOP) chúng ta không nên quan tâm đến chi tiết thực hiện của các lớp khác, chúng ta chỉ cần quan tâm đến các phương thức hiện tại (interfaces method).

Gần đây tôi có bị vấp phải một điều gì đó có thể là một vi phạm nguyên trọng hơn:

public function processStuff($stuff): array
{
    //...
    return [$someArray, $someObject];
}

//... in client code
list($someArray, $someObject) = $this->processor->processStuff($stuff);

Bây giờ, nó là một cách để trả tồi tệ (this kind of abominations) từ phương thức riêng tư (private methods). Nhưng khi bạn đang bắt đầu thiết kế API công bố (API public) của bạn thì tất cả các hy vọng sẽ bị mất đi. Điều này có nghĩa là bạn đang xử lý với mã thủ tục (procedural code base). Trong mã thủ tục mọi thứ đều là dữ liệu và có thể sẽ bị chi phối.

Trong trường hợp trên vấn đề là thiếu định nghĩa văn bản (context). Điều này có nghĩa là khi nào bạn nhận một someArray và một someObject cùng thời điểm? Tại sao nó trả về cùng thời điểm? Rõ rang việc thực hiện phương thức processStuff() sẽ biết được về cách mà nó được sử dụng. Vì vậy nó không được thiết kế để dán cùng với một vài mã ở client. Mã client được kết hợp chặt chẽ với việc thực hiện của phương thức processStuff().

Trong nhiều trường hợp, có một số nhầm lẫn là cách xác định nhiệm vụ. Mã làm gì đó và trả về dấu hiệu thành công đến client. Không có nhiều sự tương tác giữa server và client.

Chúng ta cần làm gì để cho ví dụ ban đầu tốt hơn? Giá trị các đối tượng. sendFile() sẽ có nhiều ý nghĩa hơn bằng cách sử dụng giá trị của đối tượng.

interface SenderReport
{
    public function sent(): int;
    public function failures(): int;
    public function errors(): Iterator;
    public function print(): string;
}

Chúng ta sẽ cập nhật FileSender và implementations nó.

class AcmeFileSender implements FileSender
{
    //...
    public function sendFiles(FileCollection $files): SenderReport
    {
        //...
        return new FileSenderReport($sent, count($errors), $errors);
    }
}

Bây giờ chúng ta có thể dựa vào interface của SenderReport thay vì triển khai FileSender::sendFiles(). Bây giờ chúng ta đã có định nghĩa văn bản (context). Ngoài ra, chúng ta có thể thực hiện thay đổi việc triển khai (implementations) FileSender một cách tự do.

Tóm lại, làm ơn, đừng return mảng kết hợp từ public API. Hãy đánh giá lại kể cả khi phải return value. Và nếu bắt buộc thì cũng return cái khác có interface mà bạn và user có thể tin tưởng dùng.  

TopDev via dev.to

  JavaScript Arrays và Objects thật ra không khác gì sách và báo

iOS – Tạo chứng chỉ phân phối và tệp .p12 trên MacOS

iOS-MacOS

Chứng chỉ phân phối xác định nhóm / tổ chức của bạn trong hồ sơ cấp phép phân phối và cho phép bạn gửi ứng dụng của mình tới Apple App Store.

Tệp .p12 chứa các chứng chỉ mà Apple dùng để tạo và xuất bản ứng dụng.

Các bước dưới đây sẽ hướng dẫn bạn qua quá trình tạo Chứng chỉ phân phối iOS và tệp .p12. Để đọc thêm về chứng chỉ và cách chúng hoạt động trong App Store của Apple, vui lòng truy cập Trung tâm phát triển iOS và tham khảo tài liệu chính thức của Apple.

Lưu ý: Các bước này phải được thực hiện trên máy Mac mà bạn sẽ sử dụng để gửi và xuất bản ứng dụng của mình lên Apple App Store. Mặc dù bạn có thể chuyển quyền truy cập vào máy tính Mac khác, chúng tôi khuyên bạn nên làm theo các bước sau trên máy thực tế mà bạn sẽ sử dụng để gửi ứng dụng.

Trước khi bắt đầu 

Tìm việc làm ios lương cao cho bạn

Cách tạo chứng chỉ phân phối

1. Trên máy Mac, hãy vào thư mục Ứng dụng > Tiện ích và mở Keychain Access.

Trên máy Mac, vào thư mục Applications> Utilities và mở Keychain Access.

2. Truy cập Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

Truy cập Keychain Access> Trợ lý chứng chỉ> Yêu cầu chứng chỉ từ Tổ chức phát hành chứng chỉ.

3. Điền thông tin vào cửa sổ Thông tin chứng chỉ như được chỉ định bên dưới và nhấp vào “Tiếp tục”.

  • Trong trường Địa chỉ email người dùng , nhập địa chỉ email để xác định bằng chứng chỉ này
  • Trong trường Tên thường dùng , nhập tên của bạn
  • Trong nhóm Yêu cầu , hãy nhấp vào tùy chọn “Đã lưu vào đĩa”
Điền thông tin vào cửa sổ Thông tin chứng chỉ như được chỉ định bên dưới và nhấp vào "Tiếp tục".

4. Lưu tệp vào ổ cứng của bạn.

Trợ lý tạo tệp Yêu cầu ký chứng chỉ (CSR) chứa cặp khóa công khai / riêng tư.

Lưu tệp vào ổ cứng của bạn.

5. Để đăng nhập vào Bảng điều khiển dành cho nhà phát triển iOS và nhấp vào Tài khoản ở trên cùng

Để đăng nhập vào Bảng điều khiển dành cho nhà phát triển iOS goto <https://developer.apple.com> và nhấp vào Tài khoản ở trên cùng

6. Nhấp vào “Chứng chỉ, số nhận dạng & hồ sơ”.

Nhấp vào "Chứng chỉ, số nhận dạng & hồ sơ".

8. Chuyển đến Chứng chỉ> Sản xuất và nhấp vào nút “+” để thêm chứng chỉ mới.

Đi tới Chứng chỉ> Sản xuất và nhấp vào nút "+" để thêm chứng chỉ mới.

9. Chọn “App Store và Ad Hoc” từ tùy chọn Sản xuất và nhấp vào “Tiếp tục”.

Lưu ý: Để sử dụng chứng chỉ của bạn, bạn phải có chứng chỉ ký trung gian trong keychain hệ thống OS X. Điều này được cài đặt tự động bởi Xcode. Tuy nhiên, nếu bạn cần cài đặt lại chứng chỉ ký trung gian, hãy nhấp vào liên kết ở cuối trang.

Chọn "App Store và Ad Hoc" từ tùy chọn Sản xuất và nhấp vào "Tiếp tục".

10. Nhấp vào “Tiếp tục” một lần nữa.

Bạn đã tạo tệp CSR của mình trong các bước trước, do đó không cần phải tạo một tệp khác.
Nhấp vào "Tiếp tục" một lần nữa.

11. Nhấp vào “Chọn tệp” và chọn tệp CSR bạn đã tạo trước đó và sau đó nhấp vào “Tạo”.

Nhấp vào "Chọn tệp" và chọn tệp CSR bạn đã tạo trước đó và sau đó nhấp vào "Tạo".

12. Nhấp vào nút “Tải xuống” để tải xuống tệp .cer về máy của bạn và sau đó nhấp vào “Xong”.

Nhấp vào nút "Tải xuống" để tải tệp .cer xuống máy của bạn và sau đó nhấp vào "Xong".

13. Nhấp đúp vào tệp .cer để cài đặt nó trong Keychain Access.

Nó sẽ có tên “iPhone Distribution <firstname> <lastname>” và sẽ hết hạn một năm kể từ ngày hôm nay.

Bấm đúp vào tệp .cer để cài đặt nó trong Keychain Access.

Cách xuất Chứng chỉ phân phối dưới dạng tệp .p12

Tệp .p12 là tệp được mã hóa và định dạng đặc biệt chứa chứng chỉ phân phối của bạn. Nó được nhúng bởi mag + Cổng thông tin xuất bản khi xây dựng ứng dụng của bạn. iTunes Connect kiểm tra tệp này khi bạn gửi một ứng dụng và sẽ chỉ chấp nhận ứng dụng nếu nó chứa tệp .p12 khớp với những gì bạn đã định cấu hình trong tài khoản iTunes Connect của mình.

1. Trên máy Mac của bạn, khởi chạy Keychain Access, chọn mục nhập chứng chỉ và nhấp chuột phải vào nó để chọn “Xuất”.

Tất cả chứng chỉ bạn đã cài đặt sẽ nằm trong “đăng nhập” keychain (Nhãn 1) trong danh mục “Chứng chỉ của tôi” (Nhãn 2).

Trên máy Mac của bạn, khởi chạy Keychain Access, chọn mục nhập chứng chỉ và nhấp chuột phải vào mục đó để chọn "Xuất".

2. Trong cửa sổ xuất hiện, đảm bảo Định dạng tệp được đặt thành “Trao đổi thông tin cá nhân (.p12)” và nhấp vào “Lưu” để lưu nó vào máy của bạn.

Trong cửa sổ xuất hiện, đảm bảo Định dạng tệp được đặt thành "Trao đổi thông tin cá nhân (.p12)" và nhấp vào "Lưu" để lưu nó vào máy của bạn.

3. Khi được yêu cầu nhập mật khẩu, hãy để trống và nhấp vào “Ok”.

Khi được yêu cầu nhập mật khẩu, hãy để trống và nhấp vào "Ok".

4. Khi được yêu cầu nhập mật khẩu máy tính, hãy nhập mật khẩu đó và nhấp vào “Cho phép”.

Khi được yêu cầu nhập mật khẩu máy tính, hãy nhập mật khẩu đó và nhấp vào "Cho phép".

5. Tệp .p12 của bạn sẽ được lưu ở vị trí bạn đã chỉ định.

Tệp .p12 của bạn sẽ được lưu ở vị trí bạn đã chỉ định.

6. Đăng nhập vào cổng + Xuất bản cổng thông tin và đi tới Ứng dụng> iOS> Chứng chỉ và Cung cấp tệp.

7. Nhấp vào “Chọn tệp” bên dưới tiêu đề Giấy chứng nhận phân phối, chọn chứng chỉ phân phối của bạn và nhấp vào “Lưu”.

Nhấp vào "Chọn tệp" bên dưới tiêu đề Giấy chứng nhận phân phối, chọn chứng chỉ phân phối của bạn và nhấp vào "Lưu".

Tạo ứng dụng: Các bước tiếp theo

Tạo chứng chỉ phân phối và tệp .p12 chỉ là một bước trong việc tạo ứng dụng iOS để phân phối. Vui lòng tham khảo các bài viết bổ sung trong phần này để biết thông tin về cách thiết lập hồ sơ cấp phép và định cấu hình mua hàng trong ứng dụng. Các mục này tương ứng với các thiết lập trong cổng thông tin mag + Publish. Cổng thông tin sẽ thực sự xây dựng ứng dụng iOS tùy chỉnh của bạn. Sau đó, bạn sẽ tải ứng dụng này lên Apple App Store hoặc tới các máy chủ phân phối nội bộ của riêng bạn (chỉ dành cho khách hàng doanh nghiệp).

Tác giả: Khánh Lê

Tại sao bây giờ là thời điểm thích hợp để học GraphQL?

Chào anh em đồng nghiệp trong năm 2018, ở Balan hiện giờ đã vào đông, tuy kì nghĩ mùa đông của chúng tôi rất ngắn, nhưng tại Treehouse chúng tôi vẫn đang theo sát tôc độ phát triển của các web development, chúng tôi sẽ cố gắng hết sức để phân loại và sắp xếp các xu hướng đã qua từ những công nghệ mà về cơ bản sẽ thay đổi những gì chúng tôi đã dạy cho sinh viên của mình. Gần đây tôi đã tìm thấy một đầu mối cho tương lai dưới dạng một câu trích dẫn tư Sacha Greif, một trong những nhà đồng xuất bản 2017 State Of JavaScript Survey:

“…Tôi muốn nói nên hãy chú ý đến GraphQL. Đó là công nghệ đem lại lãi suất rất lớn nhưng thực tế ngược lại thì số lượng người dùng hiện tại lại rất thấp, điều này có thể cho thấy một phần đáng kể của hệ thống tiếp cận GraphQL trong năm 2018…”

Nếu phải đoán (chúng tôi phải làm điều này tại Treehouse) tôi phải nói rằng anh ta đúng. Năm 2018, GraphQL đã sẵn sàng cho một sự hưởng ứng to lớn từ cộng đồng web development, các junior developers sẽ học cách làm việc với nó và nó sẽ trở thành một yêu cầu mới trong nghành công nghệ. Nhưng điều gì khiến cho GraphQL bị đặt qua một bên trong ngày hôm nay, dù thế nào đi nữa mọi thứ cuối cùng vẫn sẽ là GraphQL:

Điều dễ nhất để nhận ra rằng loại API duy nhất đã từng là REST API. Nếu bạn đã học về development web trong 5 năm, REST API có lẽ là loại API duy nhất bạn đã sử dụng. Một số công nghệ và framework có hướng dẫn và quy tắc chung khá nhiều, lần đâu tiên một ý tưởng về REST API được đề xuất bởi Roy Fielding trong năm 2000 như một cách để giúp việc truy cập  và sử dụng API dễ hơn so với các định dạng tiêu chuẩn khác trong cùng thời điểm. Những hướng dẫn và nguyên tắc đơn giản này có thể dễ dàng tích hợp với các tài nguyên bên ngoài vào các ứng dụng web khác và REST API đã sớm được chấp nhận như là Amazon Web Services, Flickr và EBay, đã trở thành một phần không thể thiếu của Internet.

Nhưng REST API luôn tồn tại một số vấn đề. Trong REST API, một URL được dành riêng cho một tài nguyên cụ thể, dữ liệu được trả về từ tài nguyên sau khi được sửa lỗi. Nó hoạt động tốt trong một số vấn đề được dự đoán trước, nhưng khi vấn đề chúng tôi yêu cầu API sử lý trở nên lớn hơn và khó dự đoán hơn, số lượng yêu cầu chúng tôi phải thực hiện cho một số kết thúc khác nhau trong REST API để có thể tăng tốc độ của các ứng dụng web.

Bắt đầu với GraphQL như một giải pháp, GraphQL là một ngôn ngữ truy vấn có cấu trúc, được nhập vào đầu trang của một API cho phép các nhà phát triển truyền đạt thêm thông tin về dữ liệu họ gửi và nhận. Điều đó nghĩa là gì? Xem sét ví dụ API về nhân khẩu của một thành phố. Giả sử chúng ta muốn tạo một ứng dụng với API này cung cấp tổng số người sở hữu thú cưng trong một khu phố nhất định.

“ GraphQL là một ngôn ngữ truy vấn có cấu trúc, được nhập vào đầu trang của một API cho phép các nhà phát triển truyền đạt thêm thông tin và dữ liệu của họ ’’

Trong REST API, chúng ta có thể bắt đầu tạo lập những câu hỏi từ điểm kết thúc của thành phố cho một danh sách của khối thành phố. Chúng ta sẽ chờ thông tin trả lại, và sau đó lọc các thông tin theo khu vực phù hợp để đạt được kết quả gần như mong muốn của chúng ta. Khi chúng ta đã có được thông tin khối nhà mong đợi, chúng ta có thể thiết lập yêu cầu đến điểm kết thúc của các khối nhà đó, một yêu cầu cho môt khối nhà, để nhận được thông tin của các ngôi nhà trong khối thành phố đó. Có thể điểm kết thúc của các khối thành phố được thiết kế để giới hạn lại thông tin trên con người ở trong những ngôi nhà ấy, tuy nhiên để tìm ra liệu là mỗi người trog số đó có nuôi thú cưng, chúng ta lạ phải đặt ra hàng tá cá câu hỏi khác đến những người khác để biết thêm chi tiết. Điều này khiến các câu hỏi cứ chất chồng lên nhau, ngay cả khi nếu chúng ta đẩy nhanh tốc độ của quy trình bằng việc chạy các câu hỏi song song.

Nhưng với GraphQL, chúng tôi đang tiến hành tạo ra những câu hỏi đến các điểm kết thúc của thành phố và với những yêu cầu này, chúng tôi cũng sẽ gửi một câu hỏi để điểm kết thúc biết chúng tôi chỉ muốn các khối trong các vùng cụ thể. Chúng tôi chỉ cần biết 1 danh sách của các nhà cho mỗi khối, vì vậy chúng tôi cũng sẽ đặt câu hỏi cụ thể. Sau đó chúng tôi sẽ tạo một yêu cầu đến điểm cuối các ngôi nhà với yêu cầu khác nhằm yêu cầu danh sách dân cư trong mỗi nhà, và cụ thể là chúng tôi muốn biết liệu là mỗi người có đang sở hữa một con thú cưng hay không?

Nếu như may mắn, API có thể được thiết kế để có điểm kết thúc thành phố và thêm vào đó là các thông tin của các ngôi nhà, con người và thú cưng có thể được bao gồm trong câu hỏi. Bằng việc sử dụng ngôn ngữ truy vấn của GraphQL, chúng ta giảm thiểu được hàng chục các câu hỏi xuống còn 2 đến 7 câu. Đó là một hiệu xuất lớn trong hệ thống của chúng tôi !

Khi làm việc với GraphQL bạn sẽ thấy được các lợi ích từ hệ thống này, như khả năng phát hiện hình dạng của dữ liệu chúng ta nhận và nhận được nhiều thông tin chi tiết về dữ liệu cũng như các lỗi được gửi từ API thong qua 1 loại hệ thống đơn giản của GraphQL.

GraphQL thậm chí còn có khả năng cung cấp cho chúng tôi một vài mã code cơ bản trong khi chúng tôi viết request.

Để càng ngày càng nhiều công ty như Github, Facebook, Amazon, và Twitter triển khai các điểm cuối GraphQL vào các API công cộng của họ và ngày càng nhiều nhà phát triển trở nên quan tâm đến việc học loại công nghệ này, GraphQL sẵn sàng trở nên cần thiết cho nhà phát triển cơ sở để học như các yêu cầu của REST API đã được triển khai trong thập kỷ qua.

Issac Lee

Tác giả: Đặng Thanh Hiền

Lộ trình để trở thành Frontend Developer cho người mới 2024

Tác giả: Kamran Ahmed

Tại sao tôi lại làm ra cái roadmap này ư? Tôi đã là một Fullstack Developer được 5 năm và hiện là kĩ sư lead cho tajawal. Nó không chỉ là sở thích mà cũng là một phần trọng trách của tôi phải nắm bắt các xu hướng và hướng dẫn các dev thật khác vững vàng. Tôi có thể thấy rất nhiều bạn mới vào nghề bối rối về việc bắt kịp tiến độ. Cũng rất nhiều bạn đã email hỏi xin lời khuyên về việc họ nên học cái gì từ năm 2017 đến nay. Vì thế cũng để tôi không bị “trùm bao bố” và giúp các bạn thì tôi đã quyết định làm các chart này 1 lần và mãi mãi.

Thật ra ban đầu chúng chỉ là một số đề xuất nhỏ về tool nhưng sau đó tôi muốn nó theo cấu trúc một tí, thêm một số chi tiết và thiết kế lại theo bước để bạn dễ hiểu hơn mà chọn và sắp xếp.  

Tôi còn làm cho Backend nữa, các bạn có thể xem thêm tại đây.

Trước khi đi giải thích từng điểm, tôi phải nói vài dòng trước:

Mục đích của roadmap này là giúp bạn hình dung được bức tranh tổng quát và sẽ dẫn lối cho bạn nếu như đang không biết phải học gì tiếp theo, chứ không ủng hộ bạn chạy theo trào lưu đang hot làm gì. Bạn cần phải hiểu rõ tại có 1 tool này lại thích hợp trong một số trường hợp nhất định, và việc trở thành trào lưu không đồng nghĩa là nó sẽ phù hợp cho công việc.

Bắt đầu thôi – từ ảnh dưới đây, và tôi sẽ giải thích từng cái cho bạn.

Xem tuyển dụng frontend developer đãi ngộ tốt trên TopDev

Học một số cái căn bản của HTML

HTML đem đến cho page một cấu trúc rõ rệt. Nó giống như bộ xương sống giúp bạn đứng thẳng vậy. Cái đầu tiên cần biết đó là syntax và tất cả những thứ liên quan trong đó. Bạn nên tập trung vào học những thứ sau:

  • Học những cái cơ bản và học viết semantic HTML
  • Hiểu cách chia page thành các section và cách sắp xesp DOM hợp lý

Task —  Sau khi đã nắm những điều cơ bản về HTML, hãy tạo ít nhất 5 page HTML. Tôi khuyên bạn chọn bất kì website nào ví dụ, một profile page github bất kì hoặc login page của twitter. Sau đó tập trung vào nội dung. Có thể nó hơi xấu ban đầu nhưng đưunfg lo lắng quá và cứ tập trung vào structure chính.

Học CSS

Sau khi đã tạo được phần xương sườn của page, chúng ta sẽ cho nó một vài lớp áo và tô điểm cho nó đẹp một chút. Dùng CSS — Cascading stylesheets để làm đẹp cho các page HTML.

  • Đầu tiên phải biết về syntax và phải quen với các CSS property.
  • Học về box model và học cách chuẩn bị các layout bằng Grid và Flexbox
  • Sau khi đã xong, học cách làm responsive web bằng các media query.

Task –– Một khi đã xong phần cơ bản, tiếp theo bạn cần phải chọn style cho các trang HTML bạn làm ở bước cuối. Ví dụ, nếu bạn viết trang HTML cho Github profile, bạn nên áp dụng CSS và làm cho nó trông giống như một Github profile page. Cứ làm thế với cả 5 page đã viết trước đó.

Học cái căn bản của JavaScript

JavaScript sẽ giúp bạn làm cho các trang HTML tương tác hơn. Ví dụ, với mọi slider, popup và noti bạn thấy trên website và khi nó reload một phần nhỏ của trang mà không phải reload nguyên trang, đó là do nó đã được xử lý bởi JavaScript. Trong bước này, bạn sẽ phải học JavaScript căn bản để chuẩn bị thật tốt

  • Học syntax và các cấu trúc căn bản.
  • Học cách thông thạo DOM bằng JavaScript ví dụ cách remove một số element khỏi page, cách add thêm element, add hoặc remove các class, apply các style của CSS,… bằng JavaScript.
  • Sau đó, hãy học thêm và hiểu các topic như scopes, closures, hoisting và event bubbling, v.v.
  • Học cách tạo các HTTP call bằng XHR hoặc Ajax. Ajax sẽ giúp bạn thao tác mà không phải reload page.
  • Tiếp đến hãy học về feature mới ES6+. ES6 là một phiên bản JavaScript gồm nhiều update mới như classes, nhiều cách để declare các variable, add thêm các method mới vào array, string concatenation v.v. Hầu hết các bài viết bạn đọc online họ sẽ dùng Babel để giải thích về ES6 – một transpiler mà convert JavaScript bản mới thành bản cũ vì nó không được các browser cũ support. Nhưng khoan hẵn lo về Babel, chỉ cần hiểu trước ý tưởng và dùng nó cho cac browser mới hơn có support ES6. CHúng ta sẽ quay lại ES6 sau.

Bây giờ mọi thứ đã bắt đầu thật hơn, nếu đã đến được đây thì chúc mừng bạn nhé. Đây đều là những thứ quan trọng nhất bạn cần phải hiểu để làm tiếp

Có nên học jQuery không?

Có một thời mà ai cũng phát cuồng về jQuery, và thực sự thì nó là một library rất quyền lực cung cấp vỏ bọc cho JavaScript và để bạn thao tác mọi thứ trên browser một cách thuận tiện nhất. Nhưng ngày đó đã qua đi, bây giờ người ta đã không còn dùng nó quá nhiều trong các project mới nữa nhưng đương nhiên vẫn còn người dùng nó. Không nhất thiết phải học nhưng nó khá dễ và cũng có ích nếu bạn có tìm hiểu.

Thực hành

Đừng học nếu không thực hành, chứ không thực hành thì tôi không hiểu bạn nhớ được cái gì nữa. Lúc mới học xong thì có thể bạn sẽ nhớ và hiểu sâu hiểu xa, nhưng đó chỉ là nhất thời và sẽ bay đi đâu mất ngay. Hãy thực hành càng nhiều càng tốt trong suốt quá trình này.

Hãy tiếp tục là một số các responsive web và add thêm tính tương tác bằng JavaScript. Bạn cũng có thể copy một webpage bất kì mà bạn thấy hay ho nhưng hãy nhớ sử dụng hết những thứ mình đã học đến thời điểm hiện tại.

Sau khi đã tạo được vài website thì bây giờ sẽ bắt đầu công việc thực sự. Vào github.com và search thêm project và mở một số pull request trên các project nguồn mở. Một số gợi ý cho pull request như sau:

  • Đầu tư thêm vào UI, tạo thêm các trang demo hoặc cải thiện phần design
  • Xem các vấn đề mở mà bạn có thể giải quyết
  • Refactor code bất kì mà bạn nghĩ là cần cải thiện

Xem thêm this repository này, nói rằng bạn đang học và xin feedback cho phần PR cũng như bạn có thể cải thiện phần nào.

Ở phần này bạn cũng cần có một số kiến thức về git. Bạn có thể không làm nhưng nếu có thì tôi cam đoan là bạn sẽ không hối hận, bạn sẽ bị sốc khi thấy có bao nhiêu người sẵn lòng giúp đỡ.  Bạn có thể tìm thấy rất nhiều resources git miễn phí, ví dụ như cái này.

Tự tạo động lực cho bản thân

Nếu học mọi thứ đàng hoàng, bạn hoàn toàn có thể tìm một số job freelance hoặc thậm chí cả fulltime. Tuy nhiên, đừng dừng lại ở đó, chặng đường vẫn còn dài nếu như bạn muốn một công việc thật ổn định và mỹ mãn.

Package Managers

Để chuẩn bị cho bước này, nếu trước đây bạn dùng các thư viện ngoài ví dụ một plugin hoặc một widget ngoài bất kì, bạn phải down các file JavaScript và CSS thủ công và để vào trong project. Các thư viện hoặc plugin nếu ra version mới cũng phải update ngay và chèn vào project, một khâu hết sức phức tạp. Thì package manager sẽ giúp bạn dỡ bớt sự phức tạp này khỏi workflow. Nó sẽ tự mang các library và plugin ngoài vào project của mình, và bạn sẽ không phải lo về việc copy các library thủ công nữa hay phải update phiên bản mới. Có sẵn yarnnpm. Cả hai khá giống nhau, nên bạn có thể chọn cái nào cũng được, học một cái thì cũng sẽ biết dùng cái còn lại.

Sử dụng hết những cái đã học

Sau khi đã hiểu căn bản về package manager thì bạn có thể install một số library ngoài trên webpage ví dụ như cài đặt một số toast plugin và khi user click vào một nút, sẽ hiển thị một tin nhắn popup hoặc tạo một login form và tiến hành xác thực bằng các thư viện cho xác thực hoặc thao tác với nhiều option và xem xem cách cài đặt các version khác của nó.

CSS Preprocessors

Preprocessors đã trau dồi thêm cho CSS với rất nhiều tính năng mà không có mặc định. Có rất nhiều option như Sass, Less, Stylus v.v. Nếu tôi phải chọn một, thì Sass là câu trả lời. Tuy nhiên, PostCSS gần đây thu hút khá nhiều sự chú ý, nó như một dạng “Babel” của CSS. Bạn có thể chỉ dùng nó hoặc cùng Sass. Tôi khuyên bạn nên học Sass trước và tìm đến PostCSS sau nếu có thời gian.

Các framework CSS

Bạn không cần phải học framework nữa, tuy nhiên nếu vẫn muốn thì có rất nhiều lựa chọn cho bạn. Qua những cái đã thử tôi thích nhất là Bootstrap, Materialize và Bulma. Nhưng nếu nhìn vào thị trường hiện tại, tôi sẽ chọn Bootstrap để bắt đầu.

Sắp xếp CSS

Khi app càng ngày càng lớn, thì CSS cũng trở nên bừa bộn hơn và khó quản lý. Có rất nhiều cách để kiến thiết lại CSS, ví dụ, OOCSS, SMACSS, SUITCSS, Atomic và BEM. Bạn nên tìm hiểu sự khác nhau giữa chúng, nhưng cá nhân tôi thích BEM hơn.

Build tools

Các tool giúp bạn build/bundle và làm app JavaScript. Loại này bao gồm các linter, task runner và các bundler.

Đối với các task runner, trước đây có rất nhiều lựa chọn như npm scripts, gulp, grunt v.v. Nhưng hiện tại thì webpack đã giúp bạn xử lý gần như mọi thứ mà bạn làm với gulp, Chỉ cần duy nhất một npm script trong task runner dùng để tự động hoá các task mà  webpack có thể làm. Không nhất thiết phải học Gulp, tuy nhiên sau này nếu bạn có thời gian, cứ tìm hiểu thêm và xem xem liệu nó có giúp được gì cho app của bạn không.

Về các linter, cũng đã từng có rất nhiều option như ESLint, JSLint, JSHint và JSCS. Nhưng hiện tại ESLint làm gần như mọi thứ.

Đối với module bundler, ngày xưa thì có Parcel, Webpack, Rollup, Browserify v.v. Bây giờ nếu phải chọn thì hãy chọn Webpack. Rollup cũng khá phổ biến nhưng nó nên dùng cho các thư viện; còn khi nhắc đến app, đã có webpack. Thế nên hãy tự học webpack và thăm lại section này bằng Rollup nếu muốn.

(tiếp tục) Thực hành — Tạo ra cái mới

Chúc mừng bạn! Giờ đây bạn đã ở mức 75% của một JavaScript developer rồi. Bây giờ hãy cùng tạo ra cái mới với tất cả những gì đã học đến giờ. Bạn có thể tạo một dạng library có dùng Sass và JavaScript. Rồi dùng Webpack để convert Sass thành CSS và dùng babel trong đó để transpile ES6 code. Khi đã xong thì bạn có thể, release nó lên Github và npm.

Chọn một Framework

Trong roadmap cũ thì section này thường ngay sau phần kiến thức căn bản nhưng tôi đã dời nó lại sau Sass, buils tool và các package managers vì bạn sẽ dùng hết chúng trong framework và nếu không học trước thì vô dụng cả thôi.

Lựa chọn thì vô vàn. Dạo này thì có React, VueAngular là phổ biến nhất. Nhu cầu về React.js thì càng ngày càng nhiều. Bạn có thể chọn bất kì cái nào bạn muốn, cá nhân tôi thiên về React hoặc Angular. Có một lưu ý nhỏ ở đây, nếu là newbie, có thể bạn sẽ thấy Angular tương đối đơn giản, căn bản là vì nó support gần như mọi thứ ví dụ powerful router có support tình trạng lazy loading, HTTP client có support các interceptor, dependency injection, component CSS encapsulation v.v mà không phải lo về các thư viện ngoài. Tuy nhiên React chắc chắn cao tay hơn trong việc tìm kiếm cộng đồng quanh nó và đội ngũ tại Facebook đang làm việc để cải thiện nó. Hãy đảm bảo rằng bạn không chọn nó vì độ hot, mà chọn cái nào phù hợp nhất với mình.

Đường học trong graph dưới đây đã mặc định là bạn đã biết về TypeScript và Rx.JS. Có một số tiêu chuẩn và feature mà angular cho nhiều hơn thông thường, nhưng nó không đồng nghĩa rằng React không tốt, cái nào cũng có ưu thế riêng của nó cả.

Sau khi đã chọn được framework phù hợp, vẫn còn một số thứ bạn cần phải học. Ví dụ, nếu bạn chọn React; bạn cần học thêm Redux hoặc Mobx để quản lý state, phụ thuộc vào size của app mà bạn đang làm. Mobx thì thích họp cho app cỡ vừa và nhỏ, còn các app lớn nặng đô thì nên dùng Redux.

Nếu bạn chọn chọn Angular thì bạn cần thực hiện TypeScript (thực ra bạn không cần đến nó khi là app Angular nhưng có nó thì tốt hơn) và Rx.js cũng sẽ giúp ích cho app của bạn nhiều. Đây là một thư viện khá mạnh và phù hợp với functional programming.

Và nếu bạn chọn Vue.js, bạn sẽ cần học Vuex tương tự như Redux dùng riêng cho Vue.

Lưu ý một điều là Redux, Mobx và Rx.js không ràng buộc với các framework này, bạn hoàn toàn có thể dùng nó cho app JavaScript nữa. Đồng thời, nếu bạn chọn Angular, nhớ là dùng Angular 2+ chứ không phải Angular 1+

Thực hành-time

Giờ đây bạn đã biết *mọi thứ* cần để build được một app JavaScript. Hãy tạo thêm app từ framework bạn đã chọn. Bạn có thể lấy ý tưởng từ ideas directory trên repository rồi bắt đầu ngay.

Khi đã xong, nhớ đọc thêm về đo lường và keep track để cải thiện hiệu suất. Bạn có thể xem Interactivity Time, Page Speed Index, và Lighthouse Score v.v

Progressive WebApps

Khi đã done bạn có thể tìm hiểu về các service worker cũng như cách tạo nên progress web app.

Testing

Tuỳ vào mục đích mà có rất nhiều tool để bạn chọn. Tôi thuường dùng tổ hợp Jest, Mocha, Karma và Enzyme. Tuy nhiên, phải tìm hiểu và biết điểm khác nhau giữa chúng là gì để chọn được cái thích hợp nhất.

Static Type Checker

Static type checker giúp bạn add thêm type checking vào JavaScript. Bạn không cần đến chúng nhưng chúng thật sự rất hữu ích và chỉ cần vài tiếng tập trung là bạn có thể hiểu nó. CHủ yếu nó là TypeScript Flow. Tôi rất thích TypeScript và sẽ chọn nó trước, nhưng bạn có thể check hết cả 2 để xem thử.

Server Side Render

Đừng chỉ dừng ở Checker vì đây là một phần cần thiết trong lộ trình làm Frontend của bạn.

Hãy tìm hiểu thêm về server side rendering trên framework bạn đã chọn. Ví dụ, nếu bạn chọn React, thì có Next.jsAfter.js rất phổ biến. Đối với angular thì có Universal. Và với Vue.js đã có Nuxt.js.

Chắc chắn vẫn còn một số điểm chưa được nhắc đến trên roadmap nhưng căn bản đây là những gì bạn cần để trở thành một “Frontend Engineer”. Và đừng quên, điểm quan trọng nhất đó là, thực hành nhiều nhất có thể. Ban đầu sẽ còn bỡ ngỡi và nhiều vấn đề, nhưng theo thời gian và luyện tậo bạn sẽ quen dần và lên tay rất nhanh thôi.

Bài viết nguồn tham khảo được đăng tải tại Medium

Tìm việc làm ngành IT mới nhất TopDev

Cách làm một ứng dụng Chat cho Android & iOS bằng Contus Fly như thế nào?

“Thành công của mỗi ứng dụng chat khác nhau về những chức năng riêng biệt mà nó có” – Do đó, Đâu là những tính năng  đáng chú ý, thứ mà bạn mang vào trong chính ứng dụng chat của mình?

Cuộc chiến giữa các nhà cung cấp ứng dụng chat luôn ở mức cao trào!

Khi chúng ta hầu như đều nhận ra rằng các ứng dụng nhắn tin tự động đã thay đổi cách giao tiếp, thông qua việc sử dụng các  smartphone. Thói quen sử dụng smartphone đang tăng dần trong tất cả lĩnh vực và nó cũng cho thấy rằng số lượng người dùng nhắn tin qua ứng dụng chat đang phát triển mạnh, lên đến 2,48 tỷ người dùng  trong năm 2021. Những thống kê này hoàn toàn là một dấu hiệu tốt cho các doanh nghiệp có khát khao và chuyên gia kinh doanh đối với việc đem ứng dụng chat ngay sau đây của bạn vào thị trường này.

Nhưng chờ đã!, Làm sao để làm ra ứng dụng chat iOS/Android lung linh của bạn với khả năng đánh bại những gã khổng đã làm ứng dụng này trước đây?

Contus Fly, một giải pháp chat thời gian thực (real-time) hiện có mặt tại các doanh nghiệp có quy mô lớn và các công việc liên quan đến công nghiệp khác, để làm ra ứng dụng chat riêng cho họ, cách làm này phù hợp với bất kỳ giải pháp trò chuyện nào.Giải phép chat hiện đại này được trang bị các tính năng và công nghệ có một không hai để  làm tăng trải nghiệm.

Tuyển android lương cao hoặc tìm việc làm ios hấp dẫn

Điều gì làm cho một ứng dụng nhắn tin đúng chuẩn?

  1. Làm theo yêu cầu của khách hàng đã và đang là yêu cầu chính  bên cạnh việc xây dựng thành công của mọi ứng dụng chat , vì thế mà cách này có tiềm năng  tùy biến đối với bất cứ mứ độ nào.
  2. Công cụ Contus Fly chủ động hỗ trợ thêm nhiều tính năng để mang lại hiệu quả tố nhất cho ứng dụng chat của chính bạn.
  3. Nhờ vào giải pháp thanh toán một lần co hiệu lực ngay mà  các yêu cầu của bạn sẽ được phục vụ do một gói đầy đủ các tính năng  hoàn chỉnh và bao gồm cả công cụ bổ sung bên thứ ba.
  4. Ứng nhắn tin tự động này cung cấp toàn bộ nguồn code, Chat SDK và Messenger API’s để tùy chỉnh và WebRTC với các tính năng gọi điện thoại và gọi video.

Công nghệ Core Technology Stacks được sử dụng để tạo ra giao diện Front-end cho người dùng ứng dụng chat Android:

Build Android chat application using Android Studio

Ngôn ngữ lập trình:  Contus Fly sử dụng ngôn ngữ lập trình Java để nâng cao tiềm năng so với các công nghệ tiên tiến khác, cung cấp tốc độ phản hồi tốt hơn và hiệu năng cao. Ngoài ra còn để thực hiện nhiều thao tác đồng thời một cách nhanh chóng.

Lưu trữ dữ liệu: Với một greenDAO Object Relation Mapping có tính năng tương đối và MySQL, đây là các công cụ dùng trong cơ sở dữ liệu , để xử lý một cách tương đối chức năng của ứng dụng chat dành cho hệ điều hành Android.  

Cơ chế lưu trữ  : nó sử dụng API SharedPreference để lưu trữ chung và truy xuất dữ liệu liên tục trong lúc ứng dụng Android bị ngừng hoạt động đột ngột.

Chức năng chat: Trong trường hợp này, cả ứng dụng chat chạy hệ điều hành Android và iOS đều được xây dựng trên trên giao thức XMPP để trao đổi dữ liệu trong thời gian thực giữa server và client.

Chức năng chat bằng video hoặc giọng nói: Khi nói đến ứng dụng Chat trên cả hai nền tảng Android và iOS đều được trang bị WebRTC, đây là tính năng cung cấp liên lạc thời gian thực liên tục bằng việc sử dụng trình duyệt web và các ứng dụng di động.

Sử dụng Key Technology Stack trong việc xây dựng giao diện Front-end cho ứng dụng Chat trên hệ điều hành iOS:

Create iOS messaging application

Ngôn ngữ lập trình: Objective- C và Swift là 2 ngôn ngữ chính sử dụng trong viết các script để xây dựng ứng dụng chat có cấu trúc code về UI đơn giản và không quá phức tạp.

Lưu trữ DataBase: nó sử dụng cơ sở dữ liệu đáng tin cậy, đó là Realm để lưu trữ và đồng bộ hai chiều theo nền tảng tương tác thời gian thực.

Cơ chế lưu trữ  : UserDefaults, đây là  giao thức sử dụng cho việc tương tác với người dùng mặc định  và cũng có thể tùy chỉnh để phù hợp với cách chọn lựa của người dùng.

Phát triển Back-end với Primary Technology Stacks:

Build android chat application

Ngôn ngữ lập trình: Chính xác thì ứng dụng chat này sử dụng Erlang và PHP để làm phần backend cho cả Android và iOS, mặc dù hiện nay ngôn ngữ Server-side có khả năng cao trong phát triển, đáng tin cậy,  xử lý nhanh và có khả năng chạy trên Unix cả Unix và Windows.

Framework: Sử dụng nhiều framworks đơn giản và hiệu năng mạnh mẽ trong việc kết nối người dùng ở các máy chủ khác nhau như Ejabberd và Laravel.

Cơ chế tự động hóa: ứng dụng sử dụng ba phần mềm tự động hóa mạnh mẽ (Selenium, Tsung và Appium ) để tăng khả năng test các ứng dụng sử dụng giao thức Webdriver.

Cơ sở dữ liệu: Tập hợp lưu trữ toàn bộ dữ liệu thống nhất được thực hiện trên hai cơ sở dữ liệu có liên quan là MySQL   và PostgreSQL nhằm tăng hiệu năng, tính tin cậy và bảo mật của backend.

WebServer: Tính chất bắt buộc trong việc truyền tải tin nhắn là phải càng nhanh, ứng dụng này làm được điều này với việc sử dụng một số máy chủ dựa trên nền tảng web như Apache2/nginx, Ejabberd và PHP.

Web Hosting: IM được trang bị Amazon Web Services(AWS) để cho phép lưu trữ dữ liệu không giới hạn dưới một nền tảng lưu trữ an toàn.

Web Frontend: Để cung cấp chất  lượng trải nghiệm người dùng trực quan hơn, phần backend được xây dựng bằng các ngôn ngữ kịch bản(scripting language) như HTML5, JavaScript và CSS.

Cloud Storage: Hầu hết các nền tảng  nhắn tin tự động đều hợp tác với Amazon S3 Bucket để  bảo mật ba lớp trong việc truyền tải các luồng thông tin.

Xây dựng ứng dụng chat trên web với Significant Technology Stacks:

Giải pháp này sử dụng Nodejs (đây là hệ sinh thái mã nguồn mở sẵn có lớn nhất) vừa gọn nhẹ và vừa mang lại hiệu suất cao. Cũng như sử dụng các tính năng của strophe.js để phát triển ứng dụng chat tự động trên web với giao thức  XMPP chạy trên bất kỳ trình duyệt nào.

Các tính năng bổ sung của ứng dụng nhắn tin tự động IM (Instant Messaging):

Phương thức thanh toán: IM được trang bị các tùy chọn để thanh toán cho các yêu cầu của người dùng. Dù có thay đổi trong cách hình thức thanh toán nào đi nữa, IM cũng cung cấp ra code QR, đây là tính năng trả tiền nhanh dựa vào tính năng bảo mật 3 lớp cho ứng dụng trên web hay ngay trên ứng dụng.

Thông báo ngoại tuyến: Bất kỳ khi nào người dùng đang  trực tuyến hay ngoại tuyến đều đã được kích hoạt hệ thống thông báo ngoại tuyến,hệ thống sẽ truyền thông báo (push) tới người dùng thông qua thông tin mà người dùng đã dùng cung cấp trước đó.

Ngôn ngữ chat: Ứng dụng nhắn tin được trang bị trình biên dịch với tính năng chat cho phép người dùng biên dịch tin nhắn văn bản sang hơn 1000 ngôn ngữ ngay trên màn hình chat trong ứng dụng.

Kết luận:

Mọi nhà cung cấp ứng dụng chat trên Android và iOS đều cung cấp các tính năng độc đáo riêng, nhưng chỉ có một số ít nhà cung cấp có tiềm năng làm ra ứng dụng chat hoàn thiện trên cả hai nền tảng này,  với các tính năng vượt trội và mới mẻ để đáp ứng được nhu cầu trong tương lai. Có nhiều cách để tập trung phát triển phía lưu trữ dưới máy chủ để cung cấp khả năng mở rộng vô hạn. Vì vậy, Contus Fly cũng cung cấp dịch vụ lưu trữ giống xu hướng này và cách làm ra cả ứng dụng chat, từ đó có thể đem lại thu nhập cho chính bạn.   

Tác giả: Dương Đình Tuấn

Hướng dẫn sử dụng filebeat để đọc và quản lý logs hệ thống nginx trên ubuntu

Hướng dẫn sử dụng filebeat để đọc và quản lý logs hệ thống nginx trên ubuntu

Cài đặt elasticsearch, kibana, filebeat (Phiên bản 6.4 bản mới nhất)

Vì tìm hiểu đến filebeat thì chắc hẳn mọi người đã cài đặt rồi nên mình sẽ không hướng dẫn cài đặt nữa. Còn với những bạn chưa cài đặt thì có thể dễ dàng cái đặt theo hướng dẫn trên trang chủ elastic theo đường dẫn dưới đây:

https://www.elastic.co/downloads

– elasticsearch trong phần hướng dẫn này để indeces dữ liệu mà filebeat đọc được từ hệ thống logs của nginx

– kibana để quản lý và xem tổng quan logs của nginx.

Cài đặt plugins elasticsearch geoip và user agent

Module nginx của filebeat yêu cầu phải cài đặt plugin elasticsearch geoip và plugin elasticsearch user agent, có thể dễ dàng cài đặt thông qua command line:

sudo /usr/share/elasticsearch/bin/elasticsearch-plugin install ingest-user-agent

sudo /usr/share/elasticsearch/bin/elasticsearch-plugin install ingest-geoip

Cấu hình filebeat

Để cấu hình filebeat trên ubuntu, chúng ta cần tìm đến file cấu hình theo đường dẫn /etc/filebeat/filebeat.yml, mở file này (sudo vim /etc/filebeat/filebeat.yml) và chỉ cần để ý các dòng sau :

filebeat.inputs:

– type: log

enabled: false

paths:

– /var/log/*.log

Giải thích:

Trong hướng dẫn này chúng ta chỉ cần để ý đến hai tham số “enabled” và “paths”

– enabled: theo mặc định là false, điều này có nghĩa là filebeat sẽ không indeces dữ liệu đọc được từ logs đến elasticsearch và khi truy cập vào kibana để xem và quản lý logs chúng ta sẽ nhận được thông báo lỗi như sau:

Đổi tham số này thành true để xem logs trên kibana.

– paths: Đường dẫn đến file log, chúng ta nên để mặc định để đọc được tất cả các file logs (sử dụng cho modules redis,mysql,…)

Enabled và cấu hình modules nginx

sudo filebeat modules enable nginx

Chúng ta sẽ mở file cấu hình của modules nginx theo đường dẫn /etc/filebeat/modules.d/nginx.yml, nội dung trong file như sau:

Hướng dẫn sử dụng filebeat để đọc và quản lý logs hệ thống nginx trên ubuntu

# Access logs chỉ quan tâm đến dòng #var.paths

var.paths:   [“/var/log/nginx/access.log*”]

# Error logs tương tự như ở access logs

var.paths:   [“/var/log/nginx/error.log*”]

Cài đặt kibana dashboards

sudo filebeat setup

Khởi động elasticsearch, kibana, filebeat.

Chúng ta cần khởi động lại các service này sau khi cấu hình.

sudo service elasticsearch restart

sudo service kibana restart

sudo service filebeat restart

Đến đây thì chúng ta có thể truy cập vào kibana dashboard để xem logs của hệ thống nginx

Hướng dẫn sử dụng filebeat để đọc và quản lý logs hệ thống nginx trên ubuntu

Nếu nhìn thấy dữ liệu trong kibana dashboard thì các cài đặt cơ bản của filebeat để sử dụng modules nginx đã thành công.

Chúng ta có thể tìm hiểu thêm và filebeat và các modules khác của filebeat tại địa chỉ dưới đây của elastic:

https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-overview.html

Tác giả: Trần Thanh Dân

Xem thêm các vị trí tuyển dụng it manager tại Topdev

IOS Hướng dẫn Lottie cho người mới bắt đầu: Tạo hoạt ảnh tuyệt vời trong ứng dụng iOS

Hoạt ảnh giao diện người dùng tốt có thể cải thiện đáng kể trải nghiệm người dùng của ứng dụng dành cho thiết bị di động nếu nó được thực hiện đúng. Nó thường là một trong những yếu tố phân biệt một ứng dụng tốt và chưa tốt . Thiết kế một hình ảnh động có ý nghĩa và hơi rất khó. Đặc biệt, để chuyển đổi hoạt ảnh hoặc chế độ xem thì hơi phức tạp, và khó khăn cho các nhà phát triển iOS thêm nó vào ứng dụng.

Tuyển dụng ios không yêu cầu cao, đi làm ngay

Giả sử bạn không phải là nhà phát triển độc lập, có thể bạn đang làm việc trong một nhóm các nhà phát triển và nhà thiết kế UI / UX. Đã bao nhiêu lần bạn gặp tình huống này? Nhà thiết kế của bạn cho bạn thấy một hoạt hình đẹp và thú vị và yêu cầu bạn kết hợp nó trong ứng dụng. Bạn nghĩ rằng hình ảnh động trông rất tuyệt, nhưng nó hoàn toàn khó và một quá trình dài để thực hiện nó.

Bây giờ với Lottie, được tạo ra bởi Airbnb, các nhà phát triển có thể dễ dàng render hình động mà không cần phải viết dòng và dòng mã. Bạn có thể chụp ảnh động từ Adobe After Effects và sử dụng chúng trực tiếp trong dự án Xcode của bạn. Nó thực sự tuyệt vời và giúp bạn tiết kiệm rất nhiều thời gian từ việc triển khai hoạt ảnh.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn một vài điều:

  • Lottie là gì?
  • Bạn có thể tải các tập tin hoạt hình Lottie ở đâu?
  • Làm thế nào để bạn sử dụng nó trong các dự án iOS của bạn?

Lottie là gì?

Trước tiên, Lottie là gì? Được phát triển bởi Airbnb, Lottie là thư viện iOS, macOS, Android và React Native, kết xuất hoạt ảnh After Effects trong bất kỳ ứng dụng gốc nào. Ảnh động được xuất dưới dạng tệp JSON thông qua phần mở rộng After Effects nguồn mở được gọi là Bodymovin . Lottie tải dữ liệu hoạt ảnh ở định dạng JSON và hiển thị hoạt ảnh theo thời gian thực.

Nói cách khác, bạn có thể thả các tệp JSON, do nhà thiết kế của bạn truyền, ngay vào dự án Xcode của bạn và để Lottie tải hoạt ảnh cho bạn. Đừng hiểu lầm tôi. Bạn vẫn cần phải viết một số mã để tạo ra các hình ảnh động, nhưng như bạn sẽ thấy sau này, Lottie tiết kiệm cho bạn một số lượng lớn thời gian từ mã hóa các hình ảnh động.

Lottie bây giờ là mã nguồn mở và có sẵn trên GitHub. Nó cũng đi kèm với một dự án mẫu và một tập hợp các hình động mẫu. Hãy xem bên dưới để biết một số hình động mẫu mà bạn có thể tạo trong ứng dụng iOS với Lottie.

 

 

 

 

 

 

Tập tin hoạt hình Lottie

Trước khi sử dụng Lottie, điều đầu tiên bạn cần là dữ liệu hoạt ảnh được xuất dưới dạng tệp JSON. Nếu bạn đã có hoạt ảnh After Effects, hãy sử dụng phần mở rộng có tên Bodymovin để tạo tệp JSON.

Nếu bạn không sử dụng After Effects thì sao? Làm thế nào bạn có thể chuẩn bị các hình ảnh động?

Bạn có thể thuê một nhà thiết kế để tạo hoạt ảnh cho bạn hoặc bạn học cách sử dụng After Effects.

May mắn thay, có một tùy chọn khác: Lottie Files

Lottie Files là một trang web có bộ sưu tập các hình động chất lượng cao có sẵn ở định dạng tệp của Lottie. Nó cũng cho phép các nhà thiết kế chia sẻ và giới thiệu hoạt ảnh của họ. Tất cả các tệp hoạt ảnh đều miễn phí để tải xuống. Giống như tôi, nếu bạn không có bất kỳ kinh nghiệm với After Effects, bạn chắc chắn sẽ tìm thấy thư viện tuyệt vời.

Sử dụng Lottie trong Xcode

Giả sử bạn có một tệp hoạt ảnh, điều tiếp theo là chuẩn bị dự án Xcode của bạn. Tương tự như các thư viện iOS khác, cách dễ nhất để kết hợp Lottie trong dự án Xcode của bạn là sử dụng CocoaPods.

Hãy xây dựng một bản demo nhanh để xem cách bạn làm việc với Lottie.

Đầu tiên, hãy kích hoạt Xcode và tạo một dự án mới bằng cách sử dụng mẫu Single View Application. Đặt tên cho dự án LottieDemo (hoặc bất kỳ tên nào bạn thích) và lưu nó.

Cài đặt thư viện Lottie bằng CocoaPods

Khi bạn tạo dự án, hãy thoát Xcode và sau đó mở Terminal. Chúng ta sẽ tạo một Podfile để cài đặt thư viện Lottie. Tôi giả sử bạn có một số kinh nghiệm với CocoaPods, và có nó được cài đặt trên máy Mac của bạn.

Trong terminal, hãy chạy lệnh sau để tạo một Podfile :

pod init

Sau đó mở và chỉnh sửa Podfile như sau:

target 'LottieDemo' do

  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks

  use_frameworks!

  # Pods for LottieDemo

  pod 'lottie-ios'

end

Chúng tôi chỉ cần thêm một dòng pod 'lottie-ios'để cho biết nhóm chúng tôi cần cho dự án này. Bây giờ quay trở lại Terminal và chạy lệnh dưới đây:

pod install

CocoaPods sau đó sẽ tải xuống thư viện Lottie và gói nó trong dự án Xcode của bạn. Khi quá trình hoàn tất, bạn sẽ tìm thấy một tệp dự án mới có tên LottieDemo.xcworkspace. Mở tệp này bằng Xcode và bắt đầu viết mã.

Thêm tệp JSON hoạt hình

Nó sẽ là tuyệt vời nếu bạn có tập tin hoạt hình của riêng bạn để thử nghiệm Lottie. Nhưng nếu bạn không có, hãy tải xuống hoạt ảnh miễn phí này dưới dạng tệp JSON từ lottiefiles.com. Chúng tôi sẽ sử dụng nó cho bản demo nhanh.

Bây giờ hãy kéo tệp JSON ( servishero_loading.json) vào trình điều hướng dự án của dự án Xcode của bạn. Đặt nó vào LottieDemonhóm.

Tạo LOTAnimationView

Nó bây giờ đến phần thú vị. Trong ít hơn 10 dòng mã, bạn sẽ có thể triển khai hoạt ảnh mẫu.

Mở ViewController.swiftvà thêm một dòng mã để nhập Lottiethư viện:

import Lottie

Tiếp theo, cập nhật viewDidLoad()phương thức như sau:

override func viewDidLoad() {

    super.viewDidLoad()

    if let animationView = LOTAnimationView(name: "servishero_loading") {

        animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)

        animationView.center = self.view.center

        animationView.contentMode = .scaleAspectFil 

        view.addSubview(animationView)

        animationView.play()

    }


}

Đó là đoạn mã bạn cần để hiển thị hoạt ảnh. Lottie có một lớp có tên LOTAnimationViewtải dữ liệu hoạt hình từ tệp JSON. Để hiển thị hình ảnh động, bạn phải tạo một LOTAnimationViewđối tượng có tệp JSON mà bạn đã tải xuống trước đó.

LOTAnimationViewlà một lớp con UIView, vì vậy bạn chỉ cần triển khai nó giống như bất kỳ chế độ xem nào khác. Chúng tôi xác định kích thước khung hình, căn giữa nó và đặt chế độ nội dung của nó thành Aspect Fill . Sau đó, chúng tôi gọi addSubviewđể thêm chế độ xem hoạt ảnh vào chế độ xem chính. Cuối cùng, chúng tôi gọi play()phương thức của chế độ xem hoạt ảnh để bắt đầu hoạt ảnh.

Bây giờ hãy chạy dự án và xem giao diện của ứng dụng. Ngay sau khi ứng dụng khởi chạy, nó sẽ hiển thị hoạt ảnh theo thời gian thực.

Lặp lại hoạt ảnh

Theo mặc định, hoạt ảnh chỉ phát một lần. Nếu bạn muốn lặp lại hoạt ảnh, bạn có thể đặt thuộc loopAnimationtính truenhư sau:

animationView.loopAnimation = true

Các LOTAnimationViewlớp học này cũng cung cấp một số tài sản để tùy chỉnh các hình ảnh động. Giả sử, nếu bạn muốn làm chậm hoạt ảnh, bạn có thể chỉ cần thay đổi thuộc animationSpeedtính như sau:

animationView.animationSpeed = 0.5

Tải tệp JSON hoạt hình từ máy chủ từ xa

Không chỉ bạn có thể lưu trữ tệp JSON cục bộ, bạn có thể đặt dữ liệu hoạt ảnh của mình trên máy chủ từ xa. Lottie đã đi kèm với API cho các nhà phát triển để tải tệp JSON từ một URL từ xa. Hãy thử thay thế việc khởi tạo animationViewbằng mã bên dưới và xem bạn sẽ nhận được hoạt ảnh nào.

let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)

Áp dụng Chuyển đổi cho Chế độ xem Hoạt ảnh

Giống như UIViewLOTAnimationViewhỗ trợ các loại biến đổi khác nhau. Bạn có thể xoay, thay đổi kích thước và định vị lại hoạt ảnh bằng cách đặt biến đổi thích hợp cho thuộc transformtính. Dưới đây là biến đổi mẫu, xoay hình ảnh động 45 độ theo chiều kim đồng hồ:

lete  rotateTransform = CGAffineTransform(rotationAngle: 45.0)

animationView.transform = rotateTransform

Tương tự, bạn có thể áp dụng hoạt ảnh UIView trên hoạt ảnh giống như UIViewđối tượng chuẩn khác . Hãy tạo một hình động thay đổi kích thước trên đầu trang của hình ảnh động hiện tại. Thay thế viewDidLoad()phương thức bằng đoạn mã này:

override func viewDidLoad() {


    super.viewDidLoad()


    if let animationView = LOTAnimationView(name: "servishero_loading") {

        animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)

        animationView.center = self.view.center

        animationView.loopAnimation = true

        animationView.contentMode = .scaleAspectFill

        animationView.animationSpeed = 0.5



        // Applying UIView animation

        let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)

        animationView.transform = minimizeTransform

        UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {

            animationView.transform = CGAffineTransform.identity

        }, completion: nil)

        view.addSubview(animationView)

        animationView.play()

    }

}

Chạy ứng dụng và bạn sẽ nhận được một cái gì đó như thế này. Thú vị đúng không?

Tiếp theo là gì?

Hoạt ảnh giao diện người dùng tuyệt vời có thể đưa ứng dụng iOS của bạn lên cấp độ tiếp theo và cung cấp cho người dùng trải nghiệm hấp dẫn. Trước khi giới thiệu Lottie, nó thực sự khó khăn và tốn thời gian để chuyển đổi một hình ảnh động được xây dựng với After Effects để thực hiện thực tế. Bây giờ thư viện hoạt hình mạnh mẽ này chỉ làm cho việc triển khai dễ dàng.

Trong hướng dẫn này, bạn nên học cách sử dụng Lottie cho các dự án iOS. Ở đây tôi chỉ trình bày những điều cơ bản về Lotties. Bạn có thể xem thêm tài liệu của Lottie trên GitHub . Hơn nữa, chúng ta sẽ xem xét điều gì đó tiên tiến hơn trong hướng dẫn tiếp theo bằng cách xây dựng một hình ảnh động tích hợp tuyệt vời.

Hãy theo dõi. Nếu bạn yêu thích hướng dẫn này, xin vui lòng để lại cho tôi một bình luận và chia sẻ nó với bạn bè của bạn.

Để tham khảo, bạn có thể tải xuống dự án Xcode mẫu trên GitHub.

Tác giả: Lê Minh Nhựt

Tham khảo thêm các vị trí việc làm ios tại Topdev.vn

Hướng dẫn tạo quyền truy cập quản lý website mà không phải chia sẻ thông tin đăng nhập tại Hostinger

Hướng dẫn tạo quyền truy cập quản lý website mà không phải chia sẻ thông tin đăng nhập tại Hostinger

Nếu bạn là chủ nhiều dự án website hoặc chủ nhiều tên miền, sẽ có lúc bạn cần chuyển quyền quản lý tới cho cấp dưới, đồng nghiệp, lập trình viên, đối tác hoặc khách hàng của bạn phải không? Bài hướng dẫn này sẽ giúp bạn thực hiện việc này thông qua tính năng Quản Lý Truy Cập cho các dịch vụ như là hosting hoặc tên miền mua tại Hostinger Việt Nam, mà không phải chia sẻ thông tin nhạy cảm như là tên đăng nhập và mật khẩu. Bạn sẽ giữ lại quyền sở hữu dịch vụ, và chỉ cần chuyển quyền quản lý là được.

Hướng dẫn chuyển quyền quản lý dịch vụ hosting hoặc tên miền

Bạn có thể dễ dàng trao quyền cho một người khác để họ có thể truy cập vào tài khoản của bạn (chẳng hạn như nhà phát triển) bằng các bước sau:

Đăng nhập vào khu vực thành viên chọn Quản lý truy cập

Sau khi bạn bạn mua thành công một trong các dịch vụ của Hostinger, bạn sẽ có thể truy cập vào khu vực quản lý thành viên. Tại đây, hãy click vào vào phần Quản lý truy cập khi di chuột vào avatar như hình bên dưới:

Hướng dẫn tạo quyền truy cập quản lý website mà không phải chia sẻ thông tin đăng nhập tại Hostinger

Ở trang Quản lý truy cập, bạn sẽ thấy 2 mục là Cấp Phép Truy Cập, và Yêu Cầu Truy Cập. Vì mục đích của bạn là chuyển quyền quản lý nên bạn chỉ cần chú ý phần Cấp Phép Truy Cập.

Thiết lập quản lý truy cập

Hướng dẫn tạo quyền truy cập quản lý website mà không phải chia sẻ thông tin đăng nhập tại Hostinger
Figure 1 Cấp phép truy cập Hostinger

Bước 1: Điền email được cấp quyền truy cập

Ở phần email, bạn hãy điền email bạn muốn mời truy cập vào quản lý tên miền hoặc hosting của bạn. Địa chỉ email này sẽ nhận được một lời mời và cần click vào link trong lời mời đó.

Lưu ý: nếu email người nhận đã có tài khoản của Hostinger, họ cần đăng nhập vào https://www.hostinger.vn/dang-nhap-cpanel trước rồi hãy click vào link trong lời mời để vào thẳng trang quản trị.

Nếu email người nhận chưa có tài khoản của Hostinger, việc click vào link trong lời mời sẽ tạo tài khoản cho người nhận, để họ có thể truy cập giao diện quản lý của Hostinger.

Bước 2: Chọn lớp truy cập

Tại phần lớp truy cập (mức độ), bạn sẽ có thể chọn 2 mức khác nhau để trao quyền.

Mức 1: Quản lý dịch vụ

Mức này người được mời chỉ có thể truy cập vào trang quản lý các dịch vụ hosting, tên miền, VPS được chỉ định. Họ có thể thực hiện thay đổi trên tài khoản như truy cập Trình quản lý File, thêm website, tạo subdomain, thêm parked domain, chỉnh sửa thông tin DNS cho tên miền, …

Mức 2: Quản lý các dịch vụ và có thể mua hàng dùng phương thức thanh toán được lưu trữ

Mức này sẽ trao thêm quyền thanh toán cho người được mời, và người này cũng có toàn quyền như mức 1. Nếu bạn có lưu sẵn phương thức thanh toán trong tài khoản để tiện thanh toán thì người được mời này sẽ có thể tự động gia hạn dịch vụ cho bạn, mua thêm dịch vụ mới, vâng vâng.

Bước 3: Chọn dịch vụ

Ở phần chọn dịch vụ, tùy vào bạn đang có dịch vụ nào tại Hostinger thì bạn có thể chọn loại dịch vụ đó. Có thể là tên miền hoặc là dịch vụ hosting.

Sau khi hoàn tất thiết lập, hãy nhấn đồng ý quy định sử dụng tính năng và nhấn vào nút Cấp Phép Truy Cập

Bước 4: Yêu cầu người được mời click vào link xác nhận

Nếu bạn thấy khóa màu vàng hiện lên như hình sau:

Hướng dẫn tạo quyền truy cập quản lý website mà không phải chia sẻ thông tin đăng nhập tại Hostinger

Tức là bạn đã trao quyền thành công.

Người được mời quản lý dịch vụ của bạn sẽ không thực hiện được:

  1. Thêm phương thức thanh toán mới
  2. Thực hiện trao quyền truy cập cho một người khác nữa.
  3. Xem hoặc đổi thông tin về tài khoản (ví như tên, email, số điện thoại, địa chỉ)
  4. Đối với tên miền, người được mời sẽ không thể chuyển tên miền, mở khóa tên miền, đổi thông tin whois, bán tên miền, vâng vâng

Việc này nhằm để đảm bảo an toàn cho tài khoản của bạn, tránh người quản lý thực hiện các thay đổi lớn làm ảnh hưởng đến tài khoản thành viên của bạn.

Lời kết

Vậy là xong, bạn đã thành công trong việc gán quyền truy cập cho một tài khoản email khác mà không phải tiết lộ thông tin đăng nhập của bạn. Cách làm này rất tốt cho các web developer muốn tạo nhiều website bán cho khách hàng mà không cho khách hàng truy cập vào các website khác trong cùng tài khoản. Hoặc phù hợp cho một chủ website chỉ muốn chuyển quyền quản lý cho lập trình viên hoặc đối tác mà vẫn giữ lại quyền sở hữu của website.

Xem thêm việc làm it manager lương cao cho bạn

RabbitMQ là gì? Hướng dẫn sử dụng RabbitMQ chi tiết

rabbitmq-la-gi

RabbitMG là gì? Để hiểu được khái niệm về RabbitMG, trước hết bạn cần nắm rõ về Message Broker và các thuật ngữ liên quan. Hãy theo dõi bài viết dưới đây của đội ngũ TopDev để tìm hiểu chi tiết về RabbitMG và cách sử dụng nó hiệu quả.

RabbitMQ là gì?

RabbitMQ là một AMQP message broker hay còn gọi là phần mềm quản lý hàng đợi message. Nói đơn giản, đây là phần mềm định nghĩa hàng đợi một ứng dụng khác có thể kết nối đến để bỏ message vào và gửi message dựa trên nó.

Bạn có thể coi nó như một hộp thư nơi bạn xếp chồng các bức thư của mình. RabbitMQ sau đó lấy từng bức thư và đưa nó đến đích của nó.

Message broker là gì?

Message broker là một chương trình trung gian được thiết kế để validating, transforming và routing messages. Chúng phục vụ các nhu cầu giao tiếp giữa các ứng dụng với nhau.

Với Message broker, ứng dụng nguồn (producer) gửi một message đến một server process mà nó có thể cung cấp việc sắp xếp dữ liệu, routing (Định tuyến), message translation, persistence và delivery tất cả các điểm đến thích hợp (consumer).

Có 2 hình thức giao tiếp cơ bản với một Message Broker:

  • Publish và Subscribe (Topics)
  • Point-to-Point (Queues)

Khi nào và tại sao dùng RabbitMQ

RabbitMQ giúp các web server gửi các reponse cho các request rất nhanh thay vì bị ép buộc chạy một procedure ngốn tài nguyên trên một hệ thống. Việc đưa message vào hàng đợi là một giải pháp hay khi ta muốn phân tán message cho nhiều người nhận giúp giảm tải cho các worker xử lý.

VD như user được phép tạo file PDF cho mẫu cv it từ phần mềm tạo CV Online của TopDev, bài toán là khi hàng nghìn user cùng nhấp vào nút tạo PDF, lúc này server nhận rất nhiều request sẽ gây ra vài vấn đề như chậm, quá tải, thậm chí không tạo được file PDF do nghẽn…lúc này chúng ta cần dùng RabbitMQ để đẩy các request này vào hàng chờ. Cơ chế như sau:

Một consumer lấy message từ hàng đợi và bắt đầu xử lý PDF trong lúc với một producer đang bỏ thêm những message mới vào trong hàng đợi. Một request có thể được tạo bằng ngôn ngữ này và xử lý bằng một ngôn ngữ khác. Hai ứng dụng trao đổi với nhau qua các message. Do đó, hai ứng dụng gửi và nhận sẽ có độ ràng buộc thấp.

  1. User gửi yêu cầu tạo PDF lên ứng dụng web
  2. Ứng dụng web (producer) gửi message đến RabbitMQ, có chứa thông tin dữ liệu mà user yêu cầu, như tên, email, số điện thoại…
  3. Một exchange được đồng ý từ ứng dụng producer và dẫn chúng đến đúng hàng đợi tạo PDF
  4. Một worker xử lý PDF (consumer) nhận một task và bắt đầu xử lý tạo PDF.

rabbitmq

Cài đặt RabbitMQ

Trong Ubuntu và hệ điều hành debian khác, bạn có thể cài đặt RabbitMQ bằng cách thực hiện các lệnh sau trên terminal của bạn:

echo "deb http://www.rabbitmq.com/debian/ testing main"  | sudo tee  /etc/apt/sources.list.d/rabbitmq.list > /dev/null
sudo wget http://www.rabbitmq.com/rabbitmq-signing-key-public.asc
sudo apt-key add rabbitmq-signing-key-public.asc
sudo apt-get update
sudo apt-get install rabbitmq-server -y
sudo service rabbitmq-server start
sudo rabbitmq-plugins enable rabbitmq_management
sudo service rabbitmq-server restart

Lệnh đầu tiên là nối thêm nguồn rabbitmq vào danh sách nguồn phần mềm. Tiếp theo, chúng ta tải về khóa đăng ký rabbitmq bằng wget .

Sau đó thêm khóa vào Ubuntu. Tiếp theo chúng ta gọi apt-get update để cập nhật danh sách các nguồn phần mềm. Tiếp theo, chúng ta cài đặt máy chủ RabbitMQ, khởi động nó sau đó kích hoạt plugin quản lý RabbitMQ.

Điều này cung cấp quản lý API dựa trên HTTP để theo dõi máy chủ RabbitMQ của bạn. Cuối cùng, chúng ta khởi động lại máy chủ RabbitMQ để thay đổi sẽ có hiệu lực. Tên người dùng và mật khẩu mặc định là guest . Và cổng mặc định trong đó nó chạy là 5672 .

Nếu bạn đang sử dụng hệ điều hành khác, bạn có thể tìm cách cài đặt RabbitMQ cho hệ điều hành cụ thể của bạn tại đây: http://www.rabbitmq.com/download.html .

Làm việc với RabbitMQ

Khi bạn đã cài đặt xong RabbitMQ, chúng ta có thể cài đặt thư viện AMQP cho PHP. Điều này thực hiện giao thức AMQP (Giao thức hàng đợi thông điệp nâng cao). Như tên cho thấy nó là một giao thức được sử dụng để gửi thông điệp.

Bắt đầu bằng cách tạo một danh mục mới, đây là nơi chúng tôi sẽ đặt tất cả các tệp để thử nghiệm RabbitMQ. Tiếp theo, tạo một tệp composer.json (đọc thêm composer là gì?) và thêm các phần sau:

{
  "require": {
      "videlalvaro/php-amqplib": "2.2.*"
  }
}

Tiếp theo, mở terminal và cd của bạn vào thư mục bạn đã tạo trước đó, sau đó thực hiện composer install để cài đặt thư viện AMQP.

Trước khi chúng ta tiếp tục, hãy cài đặt Swiftmailer . Bạn có thể làm điều đó bằng cách thực hiện lệnh sau từ terminal của bạn. Thao tác này cũng thêm mục nhập vào Swiftmailer vào composer.json của bạn:

composer require swiftmailer/swiftmailer @stable

Gửi message

Đầu tiên cho phép tạo biểu mẫu được sử dụng để gửi email. Điều này sẽ chấp nhận tên và địa chỉ email của người gửi, địa chỉ email của người nhận và sau đó là chủ đề và thông điệp. Đặt tên cho tệp form.php :

<?php
if(!empty($_GET['sent'])){
?>
<div>
    Your message was sent!
</div>
<?php
}
?>
<form action="mailer.php" method="POST">
    <div>
        <label for="from">From</label>
        <input type="text" name="from" id="from">
    </div>
    <div>
        <label for="from_email">From Email</label>
        <input type="text" name="from_email" id="from_email">
    </div>
    <div>
        <label for="to_email">To Email</label>
        <input type="text" name="to_email" id="to_email">
    </div>
    <div>
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject">
    </div>
    <div>
        <label for="message">Message</label>
        <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </div>
    <div>
        <button type="submit">Send</button>
    </div>
</form>

Tiếp theo, tạo tệp sẽ đẩy thư vào hàng đợi. Đặt tên cho tệp tin sender.php . Yêu cầu tệp autoload.php để các phụ thuộc của chúng sẽ được tự động tải bởi PHP. Sau đó sử dụng AMQPConnection và AMQPMessage từ thư viện AMQP.

AMQPConnection cho phép chúng ta tạo một kết nối mới đến máy chủ RabbitMQ và AMQPMessage cho phép chúng ta tạo các thông điệp mà chúng ta có thể đẩy vào hàng đợi.

<?php
require_once __DIR__ . '/vendor/autoload.php';
use PhpAmqpLib\Connection\AMQPConnection;
use PhpAmqpLib\Message\AMQPMessage;

$connection = new AMQPConnection('localhost', 5672, 'guest', 'guest');
$channel = $connection->channel();

$channel->queue_declare('email_queue', false, false, false, false);

$data = json_encode($_POST);

$msg = new AMQPMessage($data, array('delivery_mode' => 2));
$channel->basic_publish($msg, '', 'email_queue');

header('Location: form.php?sent=true');
?>

Chia nhỏ nó, trước tiên chúng ta tạo một kết nối mới bằng cách tạo một thể hiện mới của lớp AMQPConnection . Điều này đòi hỏi các đối số sau đây:

  • host – máy chủ mà máy chủ RabbitMQ đang chạy. Trong trường hợp này, chúng ta đã cài đặt RabbitMQ trên cùng một máy tính, chúng ta đang chạy tập lệnh. Vì vậy, nó phải là localhost .

Lưu ý rằng trong thế giới thực, chúng ta cài đặt RabbitMQ trên một máy chủ khác, khác với máy chủ đang sử dụng để phục vụ trang web của chúng ta. Vì vậy, thay vì localhost chúng ta sử dụng địa chỉ IP công cộng của máy chủ đó.

  • port – cổng mà máy chủ RabbitMQ đang chạy.
  • user – tên người dùng để sử dụng để đăng nhập vào máy chủ. Theo mặc định, tên người dùng được đặt thành guest .
  • password – mật khẩu của người dùng. Theo mặc định, mật khẩu được đặt thành guest .

Tiếp theo chúng ta tạo một kênh. Chúng ta có thể làm điều đó bằng cách gọi phương thức channel() từ kết nối mà chúng ta vừa khai báo.

<?php
$channel = $connection->channel();
?>

Tiếp theo, chúng ta khai báo hàng đợi sẽ được sử dụng bằng cách gọi phương thức queue_declare.

<?php
$channel->queue_declare('email_queue', false, false, false, false);
?>

Phương thức queue_declare chiếm các đối số sau:

  • queue name – tên mà bạn muốn sử dụng cho hàng đợi, bạn có thể cung cấp bất kỳ thứ gì cho điều này.
  • passive – một giá trị boolean để xác định xem có nên kiểm tra một trao đổi hiện có hay không.
  • durable – một giá trị boolean để xác định xem RabbitMQ giữ trên một hàng đợi khi máy chủ bị treo.
  • exclusive – một giá trị boolean để xác định xem hàng đợi có được sử dụng bởi chỉ một kết nối hay không.
  • auto-delete – giá trị boolean để xác định xem hàng đợi có bị xóa khi người đăng ký hủy đăng ký cuối cùng hay không.

Tiếp theo, chúng ta chuyển đổi dữ liệu POST mà chúng tôi nhận được từ biểu mẫu thành chuỗi JSON. Chúng ta chỉ có thể truyền các chuỗi như một thông báo, vì vậy chúng ta sẽ phải chuyển đổi chuỗi này sau này thành một mảng trên đầu của người nhận.

<?php
$data = json_encode($_POST);
?>

Tiếp theo chúng ta tạo một tin nhắn mới. Điều này chấp nhận 2 đối số: dữ liệu và một loạt các tùy chọn. Đối với mảng các tùy chọn, chúng tôi chỉ định delivery_mode là 2 có nghĩa là thông báo vẫn tồn tại. Điều này có nghĩa là nó không bị mất khi máy chủ bị lỗi hoặc xảy ra lỗi.

<?php
$msg = new AMQPMessage($data, array('delivery_mode' => 2));
?>

Tiếp theo, chúng ta xuất bản thông điệp bằng cách gọi phương thức basic_publish() trên kênh. Điều này chấp nhận 3 đối số: thông điệp, trao đổi và tên của hàng đợi.

Nếu bạn đang tự hỏi tại sao chúng ta đặt giá trị trao đổi thành một chuỗi rỗng, đó là bởi vì chúng ta không thực sự cần nó. Việc trao đổi thường được sử dụng cho các mẫu pub-sub. Những gì đang sử dụng ở đây chỉ là xuất bản cơ bản.

<?php
$channel->basic_publish($msg, '', 'email_queue');
?>

Cuối cùng, chúng tôi chỉ chuyển hướng người dùng đến biểu mẫu.

<?php
header('Location: form.php?sent=true');
?>

Nhận thông điệp

Bây giờ đã sẵn sàng để viết lệnh sẽ nhận được các thông điệp được gửi bởi người dùng. Đặt tên cho tệp tin là file receiver.php. Đây là nội dung đầy đủ của tệp:

<?php
require_once __DIR__ . '/vendor/autoload.php';
use PhpAmqpLib\Connection\AMQPConnection;

$connection = new AMQPConnection('localhost', 5672, 'guest', 'guest');
$channel = $connection->channel();

$channel->queue_declare('email_queue', false, false, false, false);

echo ' * Waiting for messages. To exit press CTRL+C', "\n";

$callback = function($msg){

    echo " * Message received", "\n";
    $data = json_decode($msg->body, true);

    $from = $data['from'];
    $from_email = $data['from_email'];
    $to_email = $data['to_email'];
    $subject = $data['subject'];
    $message = $data['message'];

    $transporter = Swift_SmtpTransport::newInstance('smtp.gmail.com', 465, 'ssl')
      ->setUsername('YOUR_GMAIL_EMAIL')
      ->setPassword('YOUR_GMAIL_PASSWORD');

    $mailer = Swift_Mailer::newInstance($transporter);

    $message = Swift_Message::newInstance($transporter)
        ->setSubject($subject)
        ->setFrom(array($from_email => $from))
        ->setTo(array($to_email))
        ->setBody($message);

    $mailer->send($message);

    echo " * Message was sent", "\n";
    $msg->delivery_info['channel']->basic_ack($msg->delivery_info['delivery_tag']);
};

$channel->basic_qos(null, 1, null);
$channel->basic_consume('email_queue', '', false, false, false, false, $callback);

while(count($channel->callbacks)) {
    $channel->wait();
}
?>

Chia nhỏ nó, 5 dòng mã đầu tiên về cơ bản giống với dòng chúng ta có trong tệp sender.php. Sau đó, chúng ta chỉ xuất một thông báo cho biết cách chúng ta có thể ngừng chạy tệp. Chúng ta cần chạy file này từ terminal để dừng nó, chúng ta chỉ cần nhấn CTRL + C

Tiếp theo, chúng ta khai báo một hàm được đặt tên. Điều này sẽ được sử dụng để xử lý thông điệp mà chúng ta đã chuyển từ người gửi. Điều đầu tiên nó làm là đầu ra tin nhắn đã được nhận. Sau đó, chúng ta sử dụng json_decode() để chuyển đổi chuỗi JSON trở lại một mảng.

<?php
$callback = function($msg){
    echo " * Message received", "\n";
    $data = json_decode($msg->body, true);
};
?>

Tiếp theo, chúng ta trích xuất dữ liệu và gán chúng cho từng biến của riêng chúng:

<?php
$from = $data['from'];
$from_email = $data['from_email'];
$to_email = $data['to_email'];
$subject = $data['subject'];
$message = $data['message'];
?>

Tiếp theo chúng ta khai báo một Transporter mới sẽ được sử dụng bởi Swiftmailer. Điều này cho phép chúng ta sử dụng tài khoản gmail để gửi email. Khai báo một cá thể mới chấp nhận 3 đối số: máy chủ, cổng và mã hóa. Sau đó, chúng ta đặt tên người dùng và mật khẩu.

<?php
$transporter = Swift_SmtpTransport::newInstance('smtp.gmail.com', 465, 'ssl')
      ->setUsername('YOUR_GMAIL_EMAIL')
      ->setPassword('YOUR_GMAIL_PASSWORD');
?>

Tiếp theo chúng ta khai báo một cá thể mailer mới và cung cấp transporter làm đối số.

<?php
$mailer = Swift_Mailer::newInstance($transporter);
?>

Tiếp theo tạo một tin nhắn mới, điều này cũng chiếm transporter như đối số của nó. Sau đó chúng tôi đặt chủ đề, từ đâu, đến đâu và nội dung của thông báo.

<?php
$message = Swift_Message::newInstance($transporter)
        ->setSubject($subject)
        ->setFrom(array($from_email => $from))
        ->setTo(array($to_email))
        ->setBody($message);
?>

Cuối cùng chúng ta sẽ gửi thông điệp và xuất thống điệp đã gửi. Dòng cuối hiển thị cho RabbitMQ thấy rằng việc gửi đã thành công.

<?php
$mailer->send($message);
echo " * Message was sent", "\n";

$msg->delivery_info['channel']->basic_ack($msg->delivery_info['delivery_tag']);
?>

Chạy chương trình

Bây giờ bạn có thể chạy bộ nhận thông điệp bằng cách vào terminal và thực hiện lệnh sau:

php receiver.php

Khi chạy, hãy truy cập trình duyệt của bạn và truy cập tệp sender.php . Nhập chi tiết tin nhắn của bạn và nhấp vào gửi. Bạn ngay lập tức được chào đón bởi một ‘Tin nhắn của bạn đã được gửi!’ văn bản nhưng nếu bạn ngay lập tức kiểm tra tài khoản email của mình thì chưa có.

Nếu nó không có thì hàng đợi vẫn đang xử lý nó. Kiểm tra đầu ra được hiển thị trên cửa sổ đầu cuối nơi bạn đã thực thi bộ thu. Bạn sẽ thấy thông báo ‘Đã gửi thư’ nếu email đã được gửi.

Kết luận RabbitMQ

RabbitMQ là một cách hay để triển khai các ứng dụng nhắn tin như ứng dụng chúng ta đã tạo trong hướng dẫn này. Chúng ta chỉ vừa mới làm đơn giản với hướng dẫn này. Tôi khuyên bạn nên kiểm tra http://www.rabbitmq.com/getstarted.html  để tìm hiểu thêm.

Nguồn: Wern Ancheta Blog

Có thể bạn muốn xem thêm:

Xem thêm tuyển dụng ngành công nghệ thông tin hàng đầu tại TopDev

10 mẹo nhỏ cho bạn để coding hiệu quả hơn!

  1. Cố gắng có một giấc ngủ đàng hoàng. Dù cho nó có obvious cỡ nào đi nữa, thì cũng phải ngủ được 1 giấc đàng hoàng, vì coding cực kì – cực kì tốn sức.
  2. Vận động tẹo nào. Ngồi ghế 8 tiếng dai dẳng là một cực hình đối với cơ thể bạn;
  3. Đừng cố code quá sức. Code kiểu chạy đua thì chỉ cho ra shit code mà thôi, và nó sẽ ám bạn suốt đời.  
  4. Hãy cảnh giác với The Zone – một trạng thái mà trong đầu bạn chẳng có gì ngoài code. Tức là bạn tập trung cực kì cao độ và cảm thấy như đang chạy đua với chính mình. Đừng như thế! Cũng giống như một con ngựa đua, bạn đang bị tấm vải da che mắt, ngăn bạn nhìn thấy mọi thứ đang diễn ra xung quanh mình đấy. Điều này dẫn đến ý tiếp theo.
  5. Hãy thường xuyên rời khỏi ghế và đi đi lại lại (theo kinh nghiệm cá nhân của tôi). Tôi thích mổ xẻ vấn đề cho đến khi nó được giải quyết mới thôi. Nếu bỏ giữa chừng thì cảm thấy hụt hẫng như mình vừa bỏ cuộc vậy. Chẳng khác nào một kẻ thất bại. Điều đáng nói là khi tôi đi lại trong phòng, phần não đang im của tôi có cơ hội để pop-up một vài ý tưởng thực sự tốt – những ý tưởng mà có thể giải quyết ngon lành vấn đề mà không cần đập code đi xây lại. Điều này thường xảy ra sau khi tôi rơi vào trạng thái ‘The Zone’ và bước ra;
  6. Hãy giữ cân bằng và sống hoà thuận với vợ/chồng và con cái của bạn. Không gì giết chết sự sáng tạo nhanh hơn việc lo lắng liệu người ấy có bao giờ rời bỏ bạn hay không, hay những đứa trẻ của mình lớn lên có ghét mình hay không. Code đòi hỏi rất khắt khe, và cũng có thể gây nghiện nữa. Bạn sẽ bị ám ảnh đến mức dành hàng tiếng đồng hồ sau khi thức dậy để nghĩ về nó hoặc lãng phí thời gian với những ý tưởng “trên mây”. Yên tâm đi, sẽ có thời gian và địa điểm riêng cho code, nhưng ắt nó phải được xếp SAU gia đình – nền móng để xây dựng mọi thứ cho bạn;
  7. Ngoài giờ làm việc, hãy dành chút thời gian cho tinh thần của bạn, cho “lập trình” của riêng bạn. Làm cái gì đó vui vẻ. Làm cái gì đó nhảm shit. Thoải mái làm những gì bạn thích. Không có áp lực phải hoàn thành bất cứ việc gì ngoài áp lực bạn tự tạo ra cho chính mình;
  8. Bạn không bao giờ biết được tất cả mọi thứ, vì vậy đừng cố quá để rồi quá cố. Bắt kịp tốc độ phát triển của công nghệ là điều gần như ko thể. Vì thế, chỉ biết những gì bạn cần biết và biết thật rõ chúng trước. Sau đó, dần dần đào sâu hơn;
  9. Tìm một nơi làm việc yên tĩnh. Đeo tai nghe vào nếu văn phòng của bạn quá ồn. Cá nhân tôi không bao giờ nghe nhạc vì tôi thấy nó khiến tôi mất tập trung hơn;
  10. Đừng phụ thuộc vào cà phê hay những thức uống bổ sung năng lượng để duy trì cảm giác năng động kích thích. Rõ ràng đó là một dấu hiệu cho thấy bạn quá mệt mỏi để tiếp tục làm tốt công việc rồi.

Bạn thấy đấy, top 10 tips của tôi chả liên quan gì đến việc code hay luyện tập code cả. Bởi vì cảm xúc tích cực mới là điều kiện tiên quyết để bạn code hiệu quả.

Happy coding!

Bài viết gốc được đăng tải tại Quora

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

[Recap] ReactJS & ReactNative thực chiến

Tối ngày 23/08 tại Workyos Co-working Space sự kiện ReactJS & ReactNative: Optimizing Application in Real World do TopDev phối hợp cùng ShopBack đã diễn ra thành công tốt đẹp với sự tham gia của hơn 200 lượt người tham dự.

React là một thư viện UI được phát triển bởi Facebook nhằm mục đích hỗ trợ việc xây dựng những components UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.

React được sử dụng trong rất nhiều dự án lớn như Facebook Ads cũng như nhiều dự án khác Instagram, Netflix hay Airbnb…. Theo số liệu từ Github repo của React hiện có: 67k stars, duy trì bởi Facebook và Instagram, hơn 1,200 contributors là các lập trình viên giỏi. Không còn nghi ngờ gì về mức độ phổ biến của thư viện này.

Điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.

Tuy nhiên, làm thế nào để có thể tận dụng được những ưu điểm của React thì không phải ai cũng biết. Làm thế nào để tối ưu hóa tốc độ của React Application? React Native sinh ra là dành cho Mobile, liệu bạn đã từng có suy nghĩ sẽ mang platform-agnostic và APIs của nó và sử dụng với Web?

Tất cả những thắc mắc đã được được giải đáp bởi các diễn giả nhiều năm kinh nghiệm đến từ ShopBack ngay tại sự kiện ReactJS & ReactNative: Optimizing Application in Real World
Trong suốt 3 tiếng diễn ra sự kiện 200 khán giả tham dự đã đồng hành cùng 2 diễn giả đến từ ShopBack là anh Hoàng Nguyễn và anh Hiếu Văn đi qua rất nhiều vấn đề xoay quanh 2 Topic chính:

  • Topic 1: Optimizing React Application in Real World
  • Topic 2: React Native for Web

Cùng điểm lại những khoảnh khắc đáng nhớ từ sự kiện ReactJS & ReactNative Optimizing React Application in Real World

Tối ngày 23/08 tại Workyos Co-working Space sự kiện ReactJS & ReactNative: Optimizing Application in Real World đã diễn ra
Sự kiện thu hút hơn 200 lượt người tham dự
Diễn giả Hoàng Nguyễn mang đến sự kiện Topic: Optimizing React Application in Real World
Diễn giả HIếu Văn mang đến sự kiện Topic: React Native for Web
Rất nhiều câu hỏi xoay quanh chủ đề React được người tham dự đặt ra trao đổi thẳng thắng cùng 2 diễn giả

TopDev

Tham khảo thêm việc làm React Native hấp dẫn, việc làm ReactJS tại đây

Thời cơ tuyển dụng ngành CNTT đã đến cơ hội hoàn thành KPI

Tháng 10 đã đến, cuộc chạy đua tìm kiếm ứng viên ngành CNTT đang vào giai đoạn nước rút, nhằm chuẩn bị cho những tháng cuối năm, khi mà thị trường nhân sự bước vào chu kỳ ảm đạm ít có biến động. Đây cũng chính là cơ hội cuối cùng trong năm nay để nhà tuyển dụng thu hút được những ứng viên tài năng.

Từ trước đến nay, nhân lực ngành CNTT chưa bao giờ hết hot. Theo nhận định từ chuyên gia, với tốc độ tăng trưởng như hiện nay dự báo đến cuối năm 2022 cần khoảng 300,000 – 350,000 nhân lực, Nhưng cho đến hiện tại, chỉ có khoảng 200,000 nhân lực đủ sức đáp ứng yêu cầu công việc.

Điều này vô tình chung dẫn tới cuộc chiến thu hút nhân tài giữa các doanh nghiệp ngày càng trở nên căng thẳng. Các yếu tố được kỳ vọng sẽ thu hút ứng viên: mức lương cạnh tranh, đãi ngộ tốt, môi trường làm việc,… dường như không còn đủ sức hấp dẫn đối với các ứng viên trong lĩnh vực CNTT hiện nay. Nên chăng đã đến lúc nhà tuyển dụng nên cân nhắc và tận dụng yếu tố “thời điểm“. Đặc biệt khi mà vì “nhảy việc” đang trở thành văn hóa được ưa chuộng trong giới CNTT.

Tuyển dụng đúng người, đúng thời điểm

Càng về những tháng cuối năm kéo dài cho đến tận đầu năm sau sẽ là thời điểm rất khó khăn cho nhà tuyển dụng. Khi mà tâm lý chung người đi làm sẽ là đợi thưởng tết nên sẽ không muốn nhảy việc. Bước sang đầu năm sau, thị trường tuyển dụng sẽ bắt đầu sôi động trở lại, thế nhưng đây cũng là mùa mà “Nhà nhà đều tuyển, người người cũng tuyển”, cuộc chiến giành người này thêm phần khó khăn và quyết liệt hơn rất nhiều. Vây khi nào mới là thời điểm “vàng” để tuyển dụng?

 

Theo Báo cáo tình hình, những dự báo và xu hướng của ngành CNTT do TopDev thực hiện với hơn 10,000 ứng viên CNTT, Có đến 14.1% các ứng viên đang muốn nhảy việc vào thời điểm nhạy cảm này. Nhiều chuyên gia trong ngành tuyển dụng chỉ ra rằng, đây là thời điểm tốt tuyển những ứng viên tốt, đến tháng 11 và tháng 12 thì mọi thứ sẽ dần ổn định, cơ hội tuyển thành công sẽ giảm đi nhiều.

Đối với doanh nghiệp, đây là cũng là mùa nhu cầu tuyển dụng tăng cao, khi mà có rất nhiều việc phải làm cộng thêm nhiều chỉ tiêu áp lực. Còn đối với người lao động, thì đây là thời điểm không quá sớm, cũng không quá muộn để nhảy việc trong năm, nhảy việc vào thời điểm này thì sẽ có ít đối thủ cạnh tranh cho các vị trí hấp dẫn mà mình đang nhắm tới. Nếu nắm bắt cơ hội tốt, họ hoàn toàn có thể lấy được vị trí mình mong muốn.

Bên cạnh đó, đây cũng sẽ là 2 tháng sôi động cuối cùng của nhân sự ngành IT, vì thị trường tuyển dụng này sang đến tháng 10 sẽ giảm nhiệt hẳn so với các tháng còn lại. Với tâm lý ngại nhảy việc vẫn còn phổ biến vào đúng cuối năm, điều này sẽ giữ chân LTV ở vị trí hiện tại và sẽ là một rào cản rất lớn cho các nhà tuyển dụng.

Nếu bỏ lỡ đợt tuyển dụng hiếm có gần cuối năm này, các nhà quản lý nhân sự sẽ phải đợi đến đầu năm và sau Tết, một cuộc chiến giành người không thể tránh khỏi nhưng sẽ tiêu hao nhiều thời gian và công sức hơn cho cả doanh nghiệp. Chính vì thế, nếu muốn săn người tài về cho mình thì đây chính là thời điểm lý tưởng mà các nhà tuyển dụng cần nắm bắt.

Lời kết

Để giải quyết nỗi đau trong việc kiếm tìm nhân lực cho những dự án dài hơi của công ty, các nhà tuyển dụng phải nắm được các cơ hội vàng chính là vào thời điểm tháng 8 và tháng 9 trước khi các nhân sự nghĩ đến việc “ổn định” cho đến khi qua kì nghỉ Tết nguyên Đán. Và vì vậy, việc tuyển dụng tổng lực kết hợp nhiều kênh tuyển dụng trong ngành, đặc biệt là các chuyên trang về tuyển dụng CNTT sẽ góp phần giúp doanh nghiệp có thể chốt sớm được những nhân tài trong thời điểm này.

Cách sử dụng Laravel với Socket.IO

Cách sử dụng Laravel với Socket.IO

Tác giả: Adnan Sabanovic

Websockets thật sự rất hữu ích nếu bạn muốn xem các hoạt động tại realtime của user (hoặc có một số queue job).

Đừng nên ngại từ “Websockets”. Tôi sẽ đưa ra một số hướng dẫn về cách sử dụng nó và sẽ giải đáp thắc mắc của bạn khi cần.

“Tại sao không dùng Pusher?”

Có một vấn đề, đó là trong Laravel đã có cả Pusher. Mặc dù Pusher là một giải pháp “Plug and Play” khá nhanh nhạy, bản thân nó cũng có khá nhiều giới hạn. Check https://pusher.com/pricing.

Và hầu hết các tutorial đều lừa bạn bằng thumbnail “Ứng dụng Websockets” nhưng thật ra cũng chỉ quăng cho bạn Pusher mà thôi. (Và phần mà tôi thấy buồn cười nhất là khi họ nói bạn có thể chuyển sang socket.io một cách dễ dàng).

“Chúng ta cần có lượng connection vô giới hạn.”

Đúng vậy, chúng ta hoàn toàn không muốn lo lắng về giới hạn.

Bắt đầu từ việc dùng vagrant / homestead.

Để có cái này bạn cần phải đọc về Event Broadcasting.

Có những thứ cần lưu ý ở đây (để tôi không phải nhắc lại phía sau nữa):

  1. Giao diện ShouldBroadcast cho các Event
  2. Kích hoạt các Broadcast routes và sử dụng routes/channels.php cho những user xác thực.
  3. Public Channel  — Ai cũng có thể nghe
  4. Private Channel  — User phải được xét duyệt nếu muốn join vào group
  5. Presence  — Tương tự như Private nhưng bạn có thể xem khá nhiều meta data ngoài trên đó và có một list những người đã tham gia bằng channel.broadcastOn() Event method.

Tạo Event

php artisan make:event MessagePushed

Bạn có thể xem các ví dụ cụ thể trong tài liệu về Event Broadcasting.

Cài Redis

Trước đó tôi đã setup các queue bằng Supervisor/Redis/Horizon. Horizon là một tool tuyệt vời và bạn có thể xem thêm info của nó tại đây https://laravel.com/docs/5.6/horizon

Sau khi các queue đã hoạt động, MessagePushed event sẽ dùng đến chúng.

Note: Nhớ edit .env file để đảm bảo mọi thứ hoạt động trơn tru nhé:

BROADCAST_DRIVER=redis
QUEUE_DRIVER=redis
(this is from the horizon setup actually, but we will need that for later)
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

Cài Laravel Echo Server

Đây là phần chúng ta cài install socket.io server được bundle trong laravel-echo-server. Xem thêm tại đây: https://github.com/tlaverdure/laravel-echo-server

Note: Check các yêu cầu trên đầu trước!

Chạy như bên dưới đây (như trong document)

npm install -g laravel-echo-server

Rồi chạy init để tạo file laravel-echo-server.json file vào trong app root (cái này chúng ta sẽ phải configure).

laravel-echo-server init

Sau khi đã tạo được file laravel-echo-server.json thì nó sẽ trông như sau:

{
"authHost": "http://local-website.app",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "my-app-id",
"key": "my-key-generated-with-init-command"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
},
"port": "6379",
"host": "127.0.0.1"
},
"devMode": false,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": ""
}

Note: Nếu bạn muốn push phần này vào public server, hãy đảm bảo có add laravel-echo-server.json vào .gitignore và tạo file này trên server nhé, nếu không bạn sẽ phải đổi authHost liên tục.

Run Laravel Echo Server

Bạn phải chạy phần này để khởi động websockets.

laravel-echo-server start

(nằm trong root — chỗ đặt laravel-echo-server.json)

Sau đó nó sẽ khởi động thành công. (Sau đó chúng ta sẽ muốn add nó vào server để nó tự khởi động và restart nếu bị bể).

Để phần này trong /etc/supervisor/conf.d/laravel-echo.conf của bạn (tạo file này trong folder conf.d):

[program:laravel-echo]
directory=/var/www/my-website-folder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=your-linux-user
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/my-website-folder/storage/logs/echo.log

Một khi bạn đã sắp xếp trong laravel root, bạn có thể chạy

pwd

để lấy path của ‘directory’ ở trên và của prefix ‘stdout_logfile’.

User sẽ trở thành các linux user (vagrant hoặc ubuntu hoặc cái khác)

Lưu file và thoát ra.

(nếu bạn cần dùng vim laravel-echo.conf thì khi làm trong quá trình, nhấn I (như Istanbul) trên bàn phím để edit file bằng VIM rồi type ESC như sau :wq! để đóng và lưu file.

Sau đó chúng ta sẽ chạy các command:

sudo supervisorctl stop all
sudo supervisorctl reread
sudo supervisorctl reload

Rồi check xem laravel echo có đang chạy không

sudo supervisorctl status

Cài Laravel Echo và Socket IO client

npm install --save laravel-echo
npm install --save socket.io-client

Sau đó register Echo trong bootstrap.js (Bạn đang dùng Vue js)

import Echo from "laravel-echo"
window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') {
  window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
  });
}

Hãy check lại lần nữa cách nghe event của bạn trên một số channel nhất định.

Theo Laravel Broadcasting mà tôi đã đề cập trước đó, nếu bạn dùng broadcastOn() method để return một PresenceChannel mới (Tôi sẽ giải thích kĩ hơn các casr tôi đã làm. Tôi thấy rằng phần này phức tạp hơn việc dùng public channel, vì thế chúng ta có thể giảm xuống không thành vấn đề) rồi chúng ta sẽ nghe lại channel trên diện Javascript (frontend).

Dưới đây là một số ví dụ điển hình:

  1. Tôi đã push một event vào presence channel (phần này đang làm với các khảo sát)
public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}
  1. Sau khi được push thì nó sẽ đi dọc channels.php và trong đó chúng ta sẽ tạo nên phần uỷ quyền cho user này (nhớ return array cho phần uỷ quyền presence channel chứ không phải một Boolean)
Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {
return [
'id' => $user->id,
'image' => $user->image(),
'full_name' => $user->full_name
];
});

3. Trong component VueJs của tôi có load trên page, tôi define một method bắt nguồn từ created() method đang load:

listenForBroadcast(survey_id) {
Echo.join('survey.' + survey_id)
.here((users) => {
this.users_viewing = users;
this.$forceUpdate();
})
.joining((user) => {
if (this.checkIfUserAlreadyViewingSurvey(user)) {
this.users_viewing.push(user);
this.$forceUpdate();
}
})
.leaving((user) => {
this.removeViewingUser(user);
this.$forceUpdate();
});
},

Tôi đã lấy một vài đoạn code ra khỏi ví dụ nhưng vẫn còn array ‘users_viewing’ để các user vẫn tham gia vào các channel được.  

Tham khảo thêm các vị trí tuyển dụng Laravel lương cao cho bạn

Bài viết gốc được đăng tải tại Medium

Các thư viện web animation tốt nhất cho JavaScript

exploration

Biểu đồ miêu tả tình trạng web animation hiện nay với các thư viện, frameworks và plugins hay nhất dựa trên tính linh hoạt và hiệu suất hoạt động.

Infographic 1: Biểu đồ Web Animation

Infographic này được chia thành 3 phần.

Phần đầu tiên gồm 1 vài thư viện animation cung cấp tất cả công cụ từ các hàm easing và callbacks đến timing control, có cả animation functions chung. Chúng tôi đã tách riêng các thư viện sử dụng CSS3 transition để các elements sinh động hơn, thay vì dùng các thư viện sử dụng Javascript. Chúng tôi cũng tách các thư viện hướng tới các animations dành cho SVG, WebGL hoặc HTML5 Canvas.

Infographic 2: Danh sách các tools

Phần thứ 2 tập trung vào nhiều methods khác nhau để các yếu tố UI và các đối tượng khác trong DOM sinh động hơn như animation cuộn, parallax, sprites, 3D transformations, physics engines và transitions.

Infographic 3: Các mẹo hiệu suất

Infographic cuối chỉ ra vài mẹo cơ bản giúp bạn lựa chọn giữa animation dựa trên CSS hoặc dựa trên Javascript tùy theo yêu cầu của mỗi dự án như các phiên bản của mỗi hệ điều hành, thiết bị…

Bài viết tham khảo

Giới thiệu bạn 1 số bài viết và ý kiến thú vị có thể giúp bạn đưa ra quyết định chính xác.

Các tools nổi bật

Scrollreveal.js

Scrollreveal.js

Declarative on-scroll reveal animations – dự án nguồn mở của @JulianLloyd.

SVG.js

SVG.jsSVG.js là 1 thư viện JavaScript hoạt động (điều khiển và animate) với SVG.

Jquery Plugins

Jquery Plugins

Three.js là 1 thư viện/ API JavaScript gọn nhẹ dùng để tạo và hiển thị các computer graphics 3D diễn hoạt. Scripts của Three.js có thể được dùng song song với canvas element HTML5, SVG hoặc WebGL.

Agile CSS3 Engine

Agile CSS3 Engine

Agile sử dụng javascript để generate CSS3 thuần. Không canvas, không webGL, không svg. Trong các thiết bị mobile thì khả năng hoạt động của Agile gần như hoàn hảo và nó có thể cross platform được.

Jaguarjs (Collie)

Jaguarjs (Collie)

Collie là 1 thư viện Javascript hỗ trợ tạo các animations và games sử dụng HTML 5 được tối ưu hóa cao. Collie chạy trên cả desktop và mobile sử dụng HTML 5 canvas và DOM. Collie có method render được tối ưu hóa cho mỗi nền tảng.

Effeckt.js

Effeckt.js

Một thư viện animations và transitions hay. Các transitions dựa trên CSS sử dụng các properties tăng tốc phần cứng.

Skroll

SkrollrThư viện scrolling stand-alone parallax của JavaScript dành cho mobile (Android, iOS…) và desktop trong khoảng 12k minified.

Clickstream.js

Clickstream.js

Plugin jquery giúp bạn thêm 1 hiệu ứng vào chuyển đổi trang

Parallax.js

Parallax.js

Parallax Engine phản hồi với điều hướng của 1 thiết bị thông minh. Vào thời điểm chưa xuất hiện 1 phần cứng phát hiện motion hay gyroscope nào, bạn có thể sử dụng cursor thay thế.

Stellar.js

Stellar.js

Để thêm vài data attributes đơn giản vào markup, hãy chạy $.stellar(). Cuộn qua phải để xem Stellar.js hoạt động.

Physics.js

Physics.js

PhysicsJS là physics engine modular, dễ xài, extend được dành cho javascript

Tham khảo tuyển dụng javascript lương cao trên TopDev

Animate.css

Animate.css

Animations CSS3 trên nhiều trình duyệt khác nhau

Matter.js

Matter.js

Physics engine Javascript HTML5 với khả năng implement physical properties, rigid bodies, collisions, canvas renderer, WebGL renderer, tương thích mobile và Original JavaScript physics.

Box2dweb

Box2D là 1 physics engine hoàn thiện được phát triển bởi Erin Catto

Box2dweb

Morf.js

Công cụ Javascript dành cho các chuyển động CSS3 tăng tốc phần cứng với easing functions tùy chỉnh.

Morf.js

Tham khảo thêm: Tuyển dụng 2d animation, tuyển dụng 3d animation lương cao

Snap.svg

Snap.svg là công cụ cực hay để tạo các vector graphics tương tác, độ phân giải độc lập, chạy tốt trên các kích thước màn hình bất kì.

Snap.svg

Impress.js

Một framework presentation dựa trên khả năng transforms và transitions của CSS3 trong các hệ điều hành hiện tại. Framework này lấy cảm hứng từ ý tưởng của prezi.com.

Impress.js

Transit

Transitions & transformations CSS cực mượt mà dành cho jQuery

Transit

Morpheus

Morpheus

Morpheus cho phép bạn “biến hình mọi yếu tố”: từ màu sắc đến integers của unit bất kì, các easing transitions và bezier curves, gồm cả các transforms CSS3 (xoay, scale, nghiêng & dịch thuật). Tất cả gói gọn trong 1 loop đơn sử dụng chuẩn requestAnimationFrame thân thiện với CPU.

Sly

Sly

Thư viên JavaScript hỗ trợ cuộn 1 hướng, hỗ trợ navigation dựa theo item

Superscrollorama

Plugin jQuery với animation cuộn siêu ngầu

SuperscrolloramaTopDev via awwwards

Tham khảo thêm các vị trí tuyển dụng ngành cntt hấp dẫn tại đây

7 Tip tăng tương tác hiệu quả trên mobile

7 Tip tăng tương tác hiệu quả trên mobile

Tác giả: Tubik Studio

Chất lượng thiết kế mobile app được đánh giá rất đơn giản. Nếu quá trình sử dụng mượt mà và người dùng không phải tốn quá nhiều não để sử dụng, thì đây là dấu hiệu của một app được design chuyên nghiệp. Mặt khác, nếu có trục trặc trong hệ thống tương tác, thì chắc chắn sẽ bị user phát hiện ra và không hài lòng chút nào.

Mobile app cần phải rõ ràng và vận hành đơn giản để user có thể sử dụng nó mọi lúc – mọi nơi. Nhiệm vụ của designer là phải tạo ra được một giao diện thật linh hoạt để dẫn dắt user sử dụng app mà không gặp phải bất cứ trục trặc tính năng nào. Bài viết này sẽ đưa ra những khía cạnh mới cần thiết về một hệ thống tương tác mobile lý tưởng cùng với nhiều mẹo hữu ích giúp designer tạo nên một mẫu design linh hoạt.

7 Tip tăng tương tác hiệu quả trên mobile

Tăng khả năng tiếp thu 

Bất cứ designer nào cũng muốn tạo ra những sản phẩm thật độc lạ bằng những tương tác gốc và hệ thống định vị. Cách này sẽ giúp bạn nổi bật trong số đông và có tiếng trên thị trường nói chung. Tuy nhiên, khi tạo nên một môi trường hoàn toàn mới thì designer phải nghĩ cách làm sao để có thể thích nghi được với nó ngay.

Nếu hệ thống tương tác của mobile app không có logic hoặc nó đáp ứng nhu cầu của người dùng, thì sẽ không dễ chịu chút nào. Điều này đặc biệt quan trọng với UX, vì ngay khi thấy nó khó dùng thì người ta sẽ ngừng dùng ngay và bỏ đi.

Để hạn chế tối đa chuyện này, designer cần phải quan tâm nhiều hơn về khả năng tiếp thu các yếu tố tương tác của người dùng. Khả năng tiếp thu tức là khả năng người dùng có thể hiểu và thao tác đơn giản ngay từ lần đầu sử dụng và khả năng rút kinh nghiệm từ lần thử đầu tiên. Để tăng khả năng học hỏi này, designer nên giữ mọi thứ đơn giản và rõ ràng. Đồng thời, hệ thống phải thống nhất và có logic để user có thể nhận diện các pattern lặp lại và sử dụng mobile app trực quan hơn.

Tham khảo thêm các vị trí tuyển dụng thiết kế lương cao tại Topdev

Cân nhắc về nhiều cách giữ điện thoại 

Chúng ta khác nhau và đa dạng ở nhiều cách, kể cả cách cầm điện thoại. Nó phụ thuộc vào rất nhiều yếu tố khác nhau tuỳ trường hợp và điều kiện mà app được app cũng như task mà chúng ta cần hoàn thành.

Có 3 cách cầm điện thoại chính: Cách 1 là 1 tay giữ và tay còn lại lướt bằng ngón cái. Cách thứ 2 là 1 tay giữ và tay còn lại tương tác bằng ngón trỏ. Và cách cuối cùng là dùng cả 2 ngón trỏ để lướt tương tác. Dĩ nhiên là còn nhiều cách khác nữa, nhưng đây là 3 cách được cho là phổ biến nhất.

Các designer cần phải đặt các nhân tố trên layout ở những vị trí hiệu quả phù hợp vớ mỗi cách giữ. Cách giữ bằng 1 tay là khó nhất vì nó không cho quá nhiều không gian để tương tác. Để làm cho quá trình tương tác trong app dễ dàng thì bạn có thể để các  component chính ở dưới cùng màn hình để user có thể chạm nó dễ dàng. Ngoài ra, riêng các element tương tác cao thì phải đủ to để không gặp trường hợp tap hụt.

7 Tip tăng tương tác hiệu quả trên mobile

Apply các pattern nhận diện cao

Nếu một app mới được sử dụng trực quan ngay, tức là designer đã hoàn thành xuất sắc nhiệm vụ của mình. Để mang đến những tương tác trực quan nhất, UI design phải có các pattern nhận diện. Chúng là các element mà user đều biết và cho họ một ít hint về cách thức hoạt động của app. Quan trọng là khi sử dụng app thì bạn sẽ kì vọng thấy được một số thứ liên quan đến sản phẩm nhất định. Ví dụ, nếu sử dụng các app mua bán online thì bạn sẽ thấy quen thuộc với icon Cart (Giỏ hàng) đi kèm với nút CTA “Mua ngay”.  Các element phổ biến trong app mới toanh sẽ làm cho user tự tin hơn khi sử dụng/ thao tác.

User thích nghi với mọi thứ nhanh chóng và thay đổi/ thiếu nó sẽ làm họ cảm thấy bất an khó chịu.  Đó là lí do tại sao khi bạn lên plan custom các element tương tác, thì chớ đừng bỏ qua các component cơ bản. Điều này giúp cho user không bị choáng ngợp với 1 app hoàn toàn mới và giúp họ học nó nhanh hơn.

Tạo nên một UI gọn gàng

Một khó khăn quá lớn cho thiết kế UI cho mobile đó là độ nhỏ của màn hình thiết bị. Designer cần phải tìm ra cách thể hiện được hết content trong một không gian quá nhỏ mà không biến giao diện thành một bãi chứa. Một bản UI design gọn gàng sẽ tăng tương tác một cách hiệu quả vì khi đó các element chính dễ thấy hơn và dễ dùng hơn nhiều.

Để tạo nên một mobile UI, bạn nên dùng nhiều icon như các component tương tác. Các element chữ thường sẽ hơi nhiều so với màn hình, vì thế icon là một option thay thế hợp lí. Nó có thể giải thích function bằng cách thể hiện visual bằng các shape đơn giản để tiết kiệm space trên màn hình. Tuy nhiên, trong quá trình test khả năng sử dụng, nó có thể được check kĩ xem liệu các icon có truyền tải được nội dung đúng không.

Giảm số lượng thao tác

Có lẽ đa số chúng ta đều đã có kinh nghiệm với ít nhất một app phiền phức, bắt ta phải thao tác quá nhiều để hoàn thành được task. Thường là do hệ thống tương tác không hiệu quả gồm quá nhiều action và những tính năng không cần thiết.

Các mobile app thường sẽ hoạt động như một trợ lý giải quyết sự cố, vì thế việc thiết kế làm sao cho nó kĩ lưỡng. Đồng nghĩa là designer chỉ áp dụng các element tính năng chính đáp ứng ngay các nhu cầu của người dùng. Việc tối thiểu hoá các thao tác sẽ không làm cho sản phẩm của bạn trở nên sơ sài đi tí nào đâu. Nó làm cho mobile app hiệu quả và dễ sử dụng hơn mà thôi. Hãy nhớ rằng mọi người đều rate chất lượng app dựa trên mức độ hữu ích của nó chứ không phải dựa trên các feature siêu phàm nào đó đâu.

7 Tip tăng tương tác hiệu quả trên mobile

Add các cơ chế game

Từ những gì đã nói trên, ta có thể kết luận là một hệ thống tương tác trên mobile hiệu quả khi nó đơn gian và rõ ràng.

Tuy nhiên, việc đơn giản hoá giao diện app quan trọng ở chỗ là không làm nó trở nên nhàm chán. App sẽ “thường” đi nếu không thu hút được nhiều sự chú ý của user. Vì thế bên cạnh những component cơ bản thì cũng cần phải thêm một số tác nhân đánh động đến cảm xúc của người dùng từ cái nhìn đầu tiên nữa.

Để add thêm phần thú vị cho app, gamification là một gợi ý khá hấp dẫn cho bạn. Đây là một technique add thêm cơ chế game vào 1 app mobile không liên quan đến game. Sẽ có nhiều challenge và phần thưởng đi kèm để khuyến khích người chơi tương tác với sản phẩm nhiều hơn và quay lại app nhiều lần.

Hơn thế nữa, việc ứng dụng một cơ chế mang tên hành trình của người dùng, là một cách khá hiệu quả trong việc tạo nên được một layout rõ ràng và rành mạch. Nó là các giai đoạn tại những thời điểm sử dụng app của user. Designer nên tạo nên một UX như vậy để người dùng có thể từng bước thành thạo app thông qua các feature có thể linh hoạt thay đổi theo nhu cầu của đối tượng người dùng. Phương pháp này giúp tránh được nhiều trục trặc về tương tác và tính năng.

Cuối cùng, gamification sẽ thêm vào app nhiều Last but not least, gamification adds the element of fun. Users enjoy entertainment, challenges, and competitive spirit similar to video games, so they are encouraged to go back. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual application, you help to reduce some stress and relax for a moment.

Một cái không kém phần quan trọng, đó là gamification sẽ thêm vào app của bạn yếu tố thú vị. Người dùng bị thu hút hơn với giải trí, thử thách và có tính cạnh tranh giống như các trò chơi điện tử, từ đó khuyến khích họ quay lại app nhiều hơn. Mọi người luôn muốn có một số hoạt động giải trí tinh thần để họ có thể phần nào thoát ly các hoạt động sinh hoạt hàng ngày một chút. Bằng cách thêm yếu tố thú vị vào một ứng dụng thông thường mà user của bạn sẽ được giảm bớt căng thẳng và cảm thấy thư giãn hơn.

Chớ quên việc thử nghiệm

Tương tac trên mobile nhằm mục đích tạo nên một sản phẩm thân thiện với người dùng và khiến họ hài lòng trong nhiều trường hợp khác nhau. Nhưng làm thế nào một designer có thể xác định được một app có đủ tốt và linh hoạt được trong nhiều trường hợp hay không? Đây là lúc mà bạn cần đến thử nghiệm.

Thử nghiệm khả năng sử dụng là một giai đoạn hết sức quan trọng trong quá trình tạo nên mobile app bằng cách test nó đối với các đối tượng tiềm năng. Thường gian đoạn thử nghiệm sẽ nằm trong giai đoạn build UX trước khi project được chuyển đến team development, để những giải pháp nào không hiệu quả sẽ được thay đổi.

Có rất nhiều phương pháp thử nghiệm cho phép bạn tìm ra vấn đề và bug và nhanh chóng xử lý nó. Từ đó designer mới cải thiện được nhiều khía cạnh của UX để đem lại sự hài lòng tối đa cho user.

Vì thế, trước khi chuyển project đến team development để thử nghiệm, hãy tự mình test nó trước, hoặc nhờ đồng nghiệp, lên đối tượng hướng đến và bạn sẽ đạt được kết quả mà mình mong muốn.

7 Tip tăng tương tác hiệu quả trên mobile

A simple mobile interaction system is not that easy to create. It requires hard work, concentration and lots of practice before you receive sufficient results. Stay tuned!

Tạo nên một hệ thống tương tác đơn giản trên mobile không hề dễ dàng. Nó đòi hỏi rất nhiều sự tập trung, chăm chỉ và thực hành nhiều để có được kết quả mà bạn kì vọng. Kiên nhẫn nhé!

Bài viết gốc được đăng tải tại UX Planet