Bài viết được sự cho phép của tác giả Kien Dang Chung

Trong những website lớn, các phần tìm kiếm hay nhập liệu rất cần những tính năng thông minh như gợi ý dựa trên các từ nhập vào, nó giúp cho nâng cao trải nghiệm người dùng, giúp tìm kiếm và nhập liệu trở lên đơn giản hơn. Google là một minh chứng không cần phải bàn cãi cho vấn đề này. Những năm đầu của thế kỉ 21, Google xuất hiện với chỉ duy nhất một ô tìm kiếm và tính năng gợi ý ngay lập tức khi từ khóa được đánh vào, nó đã giúp người dùng định hướng được ngay khi chỉ gõ vào 1-2 từ trong từ khóa.

Ở thời điểm đó, gợi ý khi tìm kiếm là một tính năng phức tạp và xa xỉ, nhưng khi công nghệ phần mềm phát triển, đặc biệt với phần mềm mã nguồn mở, những tính năng như vậy thật đơn giản để thực hiện. Bài viết này sẽ hướng dẫn bạn thực hiện các tìm kiếm thông minh hay gợi ý nhập liệu sử dụng thư viện Typeahead là một gói phần mềm mã nguồn mở của Twitter trong các ứng dụng Laravel.

Trong bài viết này chúng ta sẽ thực hiện một ví dụ tìm kiếm thông minh thông tin khách hàng bằng cách tạo ra dữ liệu mẫu khoảng 10,000 khách hàng. Như bạn thấy khi tìm kiếm hệ thống sẽ gợi ý các bản ghi trong database rất nhanh giúp người dùng có thể lựa chọn luôn chính xác người dùng. Typeahead sử dụng kết hợp Bloodhound cho tốc độ rất nhanh mặc dù dữ liệu là 10k bản ghi.

1. Giới thiệu về Typeahead

• Typeahead.js là một thư viện Javascript rất linh hoạt, nó có thể làm nền tảng tốt để xây dựng các tính năng tìm kiếm gợi ý thông minh. Typeahead bao gồm hai thành phần: Typeahead: Phần chuyên xử lý giao diện người dùng
  • Hiển thị gợi ý đến người dùng ngay khi họ nhập liệu
  • Hiển thị các gợi ý ngay trên ô nhập liệu
  • Hỗ trợ các tùy chỉnh giao diện linh hoạt
  • Highlight các từ khóa trùng khớp trong phần gợi ý
  • Kích hoạt các sự kiện tùy chỉnh cho phép mở rộng các xử lý
• Bloodhound: Bộ máy gợi ý nâng cao
  • Cho phép các dữ liệu được hardcode
  • Lấy dữ liệu từ trước để giảm độ trễ khi gợi ý
  • Sử dụng Local Storage giảm số lượng các request đến máy chủ.
  • Sử dụng rate limit và bộ đệm cho các request đến máy chủ làm giảm nhẹ tải dữ liệu

Bộ máy gợi ý Bloodhound sẽ được sử dụng để tính toán kết quả với các truy vấn cho trước và Typeahead sẽ sử dụng để render ra mã HTML. Cả hai thành phần này là độc lập, trong bài viết này chúng ta sẽ sử dụng cả hai để xây dựng công cụ tìm kiếm gợi ý thông minh.

1.1 Cài đặt Typeahead

Trước khi đi vào sử dụng Typeahead chúng ta cần cài đặt gói thư viện này, có ba cách thức để cài đặt.

Sử dụng npm

npm i typeahead

Tải gói thư viện dạng file zip

Vào đường dẫn Github của Typeahead chọn Clone or download và click vào Download zip. Giải nén ra chúng ta sẽ thấy trong thư mục dist có những file như sau:

• bloodhound.js (chỉ có thành phần Bloodhound).
• typeahead.bundle.js (Bao gồm cả Typeahead và Bloodhound).
• typeahead.jquery.js (chỉ có thành phần Typeahead).

Các file có thêm min.js là các file được tối ưu hóa dung lượng.

Tích hợp thông qua CDN

Sử dụng CDN giúp file có thể được tải về nhanh hơn, tuy nhiên cũng gặp phải một vấn đề là khi cá mập cắn cáp, internet chập chờn nếu các CDN không có server ở gần Việt Nam thì các thư viện này rất khó để tải về. jQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js Typeahead: https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js

Chú ý: Typeahead yêu cầu jquery phiên bản từ 1.9 trở lên. Trong bài viết này chúng ta sẽ sử dụng cách thứ ba cho nhanh, với dự án lớn nên sử dụng cách 1 để tối ưu hóa các tài nguyên với Laravel Mix.

1.2 Khởi tạo Typeahead

• Typeahead có nhiều cách khởi tạo và sau đây là cách khởi tạo hay dùng nhất jQuery#typeahead(options, [*datasets]). Tính năng typeahead được áp dụng cho các input dạng text input[type=”text”] có hai tham số cho khởi tạo: options là các tùy chọn cấu hình, một số giá trị cần quan tâm như sau:
  • highlight: thêm thẻ <strong> vào các từ trùng khớp trong phần gợi ý. Mặc định là false.
  • hint: hiển thị cả từ gợi ý trong ô nhập liệu, mặc định true.
  • minLength: Số ký tự tối thiểu cần nhập khi tính năng gợi ý được bắt đầu, mặc định là 1.
  • classNames: Cho phép sử dụng tên class khác với mặc định.
• dataset: một typeahead có thể có nhiều dataset, ví dụ khi bạn tìm kiếm trong một trang bán hàng có thể trả về gợi ý cho cả sản phẩm và các tin tức liên quan đến sản phẩm. Các dataset có một số các tùy chọn cấu hình như sau:
  • name: tên của dataset.
  • source: nguồn dữ liệu dùng cho gợi ý, có thể là một instance của Bloodhound, như ở phần đầu chúng ta có nói Typeahead chỉ xử lý giao diện người dùng và Bloodhound với là bộ máy thực hiện các gợi ý.
  • limit: Số gợi ý tối đa sẽ được hiển thị, mặc định là 5.

$("#navbar-search-input").typeahead({
    hint: true,
    highlight: true,
    minLength: 1
});

1.3 Khởi tạo Bloodhound

Bloodhound là bộ máy gợi ý cho Typeahead.js, sử dụng thành phần này mang lại nhiều tính năng nâng cao hơn vì nó có thể lấy dữ liệu từ một nguồn remote và sử dụng bộ đệm để tăng tốc.

var engine = new Bloodhound({
    remote: {
        url: 'api/customer?q=%QUERY%',
        wildcard: '%QUERY%'
    },
    datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

Chúng ta sẽ thiết lập đường dẫn /find?q= trong phần Laravel, datumTokenizer cần một mảng JSON. Như vậy, chúng ta đã có dữ liệu và có thể sử dụng nó cho thiết lập source của typeahead như sau:

source: engine.ttAdapter()

1.4 Tạo mẫu cho các gợi ý

Typeahead cho phép sử dụng các template để thay đổi kiểu mẫu cho các gợi ý, bạn cũng có thể sử dụng bootstrap để style:

templates: {
    empty: [
        '<div class="list-group search-results-dropdown"><div class="list-group-item">Không có kết quả phù hợp.</div></div>'
    ],
    header: [
        '<div class="list-group search-results-dropdown">'
    ],
    suggestion: function (data) {
         return '<a href="' + data.id + '" class="list-group-item">' + data.name + '</a>'
    }
}

1.5 Code hoàn chỉnh cho Typeahead.js

jQuery(document).ready(function($) {
    var engine = new Bloodhound({
        remote: {
            url: 'api/customer?q=%QUERY%',
            wildcard: '%QUERY%'
        },
        datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    $(".search-input").typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        source: engine.ttAdapter(),
        name: 'usersList',
        templates: {
            empty: [
                '<div class="list-group search-results-dropdown"><div class="list-group-item">Không có kết quả phù hợp.</div></div>'
            ],
            header: [
                '<div class="list-group search-results-dropdown">'
            ],
            suggestion: function (data) {
                return '<a href="' + data.id + '" class="list-group-item">' + data.name + '</a>'
      }
        }
    });
});

2. Xây dựng backend với Laravel

Phần 2 chúng ta sẽ xây dựng ứng dụng Laravel

2.1 Cài đặt môi trường Laravel

Tham khảo công cụ Laragon cài đặt nhanh môi trường Laravel, chúng ta tạo ra một môi trường test có tên là typeahead và Laragon tự động tạo ra tên miền ảo typeahead.dev. Laragon cũng tự động tạo ra database tên typeahead cho chúng ta. Việc đầu tiên là thiết lập file .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=typeahead
DB_USERNAME=root
DB_PASSWORD=secret

2.2 Tạo bảng Customer và dữ liệu mẫu

Tạo ra Model Customer cùng với file migrate thông qua câu lệnh artisan make:model (Xem thêm Laravel Artisan là gì?)

D:\Laragon\www\typeahead
λ php artisan make:model Customer -m
Model created successfully.
Created Migration: 2017_09_04_084521_create_customers_table

Chỉnh sửa file migrate xxx_create_customers_table.php trong thư mục database\migrations:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCustomersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name', 255);
            $table->string('address', 255);
            $table->string('phone', 255);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('customers');
    }
}

Thực hiện tạo ra bảng customers trong database với câu lệnh artisan migrate. (Tìm hiểu thêm về Laravel Migration và Laravel Seeding tạo database và dữ liệu test)

D:\Laragon\www\typeahead
λ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Migrating: 2017_09_04_084521_create_customers_table
Migrated:  2017_09_04_084521_create_customers_table

Có nhiều các bảng khác được tạo ra do các bảng này được sử dụng cho xác thực người dùng (xem Laravel Authentication xác thực người dùng thật đơn giản). Tiếp theo chúng ta sẽ sử dụng Laravel Seeding để tạo ra 10000 dữ liệu customer mẫu trong database.

D:\Laragon\www\typeahead
λ php artisan make:seeder CustomersTableSeeder
Seeder created successfully.

Tạo file CustomerFactory.php trong thư mục database\factories:

<?php
use Faker\Generator as Faker;

$factory->define(App\Customer::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'address' => $faker->address,
        'phone' => $faker->phoneNumber
    ];
});

Class này sử dụng Faker để tạo ra dữ liệu test. Tiếp theo chúng ta tạo file Seeder:

D:\Laragon\www\typeahead
λ php artisan make:seeder CustomersTableSeeder
Seeder created successfully.

Và thêm đoạn mã sau vào file CustomersTableSeeder.php trong thư mục database\seeds:

<?php
use Illuminate\Database\Seeder;

class CustomersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(Customer::class, 10000)->create();
    }
}

và khai báo sử dụng Seeder này trong file database\seeds\DatabaseSeeder.php:

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $this->call(CustomersTableSeeder::class);
    }
}

Thực hiện tạo ra 10000 dữ liệu khách hàng mẫu với câu lệnh artisan db:seed

D:\Laragon\www\typeahead
λ php artisan db:seed
Seeding: CustomersTableSeeder

2.3 Route

Chúng ta đã tạo ra bảng customer với 10 nghìn dữ liệu khách hàng mẫu được đưa vào, tiếp theo chúng ta cần tạo ra một đường dẫn để thực hiện tìm kiếm khách hàng và trả về dữ liệu dạng JSON cho truy vấn Bloodhound, thêm route sau đây vào file routes\api.php:

Route::get('find', 'SearchController@find');

Tạo thêm một route trong routes\web.php để hiển thị thông tin chi tiết của khách hàng, ở đây chỉ thực hiện in ra màn hình thông tin mà không có tạo view, coi như bài tập thêm cho các bạn :).

Route::get('customer/{id}', function() {
   $customer = Customer::find($id);
   return $customer->name . '@' . $customer->phone . '-' . $customer->address;
});

2.4 Controller

Tạo controller SearchController bằng lệnh artisan:

D:\Laragon\www\typeahead
λ php artisan make:controller SearchController
Controller created successfully.

Thêm phương thức find vào SearchController.php trong app\Http\Controllers:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Customer;

class SearchController extends Controller
{
    public function find(Request $request) {
      $customer = Customer::where('name', 'like', '%' . $request->get('q') . '%')->get();
      return response()->json($customer);
    }
}

Vào đường dẫn http://typeahead.dev/customer?q=jo chúng ta sẽ có kết quả là dữ liệu dạng JSON:

2.5 View

Tiếp đến chúng ta thay đổi welcome view nằm trong thư mục resources\views:

<!DOCTYPE html>
<html lang="vi">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Tìm kiếm thông minh sử dụng Typeahead trong ứng dụng Laravel">
        <meta name="author" content="FirebirD ['www.allaravel.com']">
        <title>Tìm kiếm thông minh trong Laravel sử dụng Typeahead - Allaravel.com</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">html{position:relative;min-height:100%;}body{margin-bottom:60px;}.footer{position:absolute;bottom:0;width:100%;height:60px;background-color:#f5f5f5;}body>.container{padding:60px 15px 0;}.container.text-muted{margin: 20px 0;}.footer>.container{padding-right:15px;padding-left:15px;}code{font-size:80%;}</style>
    </head>
    <body>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="https://allaravel.com">Typeahead</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>

        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h3>Ví dụ tìm kiếm thông minh sử dụng typeahead.js trong ứng dụng Laravel - Allaravel.com</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline typeahead">
                        <div class="form-group">
                            <input type="name" class="form-control search-input" id="name" autocomplete="off" placeholder="Nhập tên khách hàng">
                        </div>
                        <button type="submit" class="btn btn-default">Tìm kiếm</button>
                    </form>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <p class="text-muted">Example in <a href="https://allaravel.com">allaravel.com</a></p>
            </div>
        </footer>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
        <script>
            jQuery(document).ready(function($) {
                var engine = new Bloodhound({
                    remote: {
                        url: 'api/customer?q=%QUERY%',
                        wildcard: '%QUERY%'
                    },
                    datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace
                });

                $(".search-input").typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                }, {
                    source: engine.ttAdapter(),
                    name: 'usersList',
                    templates: {
                        empty: [
                            '<div class="list-group search-results-dropdown"><div class="list-group-item">Không có kết quả phù hợp.</div></div>'
                        ],
                        header: [
                            '<div class="list-group search-results-dropdown">'
                        ],
                        suggestion: function (data) {
                            return '<a href="customer/' + data.id + '" class="list-group-item">' + data.name + '</a>'
                        }
                    }
                });
            });
        </script>
    </body>
</html>

Kết quả khi vào http://typeahead.dev và thực hiện tìm kiếm khách hàng chúng ta được như sau:

3. Lời kết

Với việc sử dụng Typeahead trong ứng dụng Laravel, trải nghiệm người dùng được nâng cao hơn. Typeahead không chỉ sử dụng trong các phần tìm kiếm mà chúng ta có thể sử dụng trong các form nhập liệu giúp gợi ý thông tin nhập liệu. Hi vọng bài viết sẽ giúp ích cho các bạn trong các dự án riêng sử dụng Laravel, có bất kỳ thắc mắc hoặc góp ý các bạn comment cuối bài nhé.

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

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

• Xử lý Date/Time dễ dàng với Carbon trong Laravel
• Cách sử dụng Laravel với Socket.IO
• Làm thế nào tôi trở thành một Software Developer tại Twitter?

Xem thêm việc làm lập trình viên laravel hấp dẫn tại TopDev

Thị trường IT Việt Nam ngày càng phát triển và trở nên năng động hơn. Đó là một phần lý do để thu hút một lượng lớn doanh nghiệp công nghệ nước ngoài đầu tư vào Việt Nam, tiêu biểu trong số đó là các công ty của Hàn Quốc.

Bên cạnh đó, qua “cái bắt tay” chiến lược giữa Korea IT Cooperation Center tại TP. HCM (KICC HCMC) và Nền tảng tuyển dụng chuyên về IT hàng đầu Việt Nam – TopDev, các lập trình viên Việt càng có nhiều lựa chọn hơn khi tìm kiếm nơi làm việc phù hợp, đặc biệt nhất chính là cơ hội trải nghiệm môi trường làm việc “chuẩn” quốc tế cùng nhiều công nghệ tiên tiến đến từ Hàn Quốc.

Hãy cùng khám phá Top 6 công ty công nghệ đến từ Hàn Quốc xuất hiện trong kỳ này để bắt lấy cơ hội cho chính mình bạn nhé!

1. Total Software Bank VietNam

Ra đời vào năm 1998, Total Soft Bank Ltd (TSB) là công ty chuyên cung cấp các giải pháp maritime logistics thông qua việc áp dụng công nghệ tiên tiến hàng đầu cùng đội ngũ phát triển giàu kinh nghiệm chuyên môn. Một số giải pháp tiêu biểu của công ty như: tự động hóa tàu biển, các giải pháp cảng,…

⇒ Bạn vừa ra trường và muốn trải nghiệm làm việc tại công ty thuộc lĩnh vực logistics thì Total Soft Bank Vietnam chính là “đáp án” dành cho bạn!

⇒ Hãy sẵn sàng “bùng nổ” năng lực, cùng chinh phục những thử thách giúp nâng cao tay nghề từ Total Soft Bank Vietnam với vị trí Fresher Software Developer

2. LOTTE Data Communication

Được thành lập từ năm 2009, LOTTE Data Communication Việt Nam đóng vai trò cung cấp hầu hết các giải pháp và Dịch vụ IT cho các công ty con thuộc Tập đoàn LOTTE đang kinh doanh tại Việt Nam. Kế thừa tất cả tinh hoa từ Công ty mẹ, LOTTE Data Communication Việt Nam kết nối và phát triển mạng lưới khách hàng thuộc mọi lĩnh vực từ Bán lẻ, Sản xuất đến Tài chính, Dịch vụ Công… bằng những giải pháp bắt kịp xu hướng Công nghệ của thế giới như Triển khai hệ thống ra vào cho cao ốc, An Ninh nhận diện khuôn mặt, Smart Parking, Thu phí tự động,…

LOTTE Data Communication Việt Nam đem đến nhiều cơ hội phát triển sự nghiệp cho các Lập trình viên tài năng. Cùng khám phá những vị trí hấp dẫn mà bạn không nên bỏ lỡ:

• IT System Management
• SAP Business One/SAP B1 Developer
• Product Business Analyst
• Junior Java Developer

3. Hanbisoft

Hanbisoft là công ty chuyên cung cấp các dịch vụ máy tính tùy chỉnh cho doanh nghiệp, giúp các hoạt động quản lý: nhân sự, kế toán, thuế, vận chuyển hàng hóa, mua bán,…trở nên dễ dàng hơn.

Tự hào với môi trường làm việc chuyên nghiệp, Hanbisoft sẽ là nơi các lập trình viên có thể bùng nổ năng lực qua các dự án phát triển ứng dụng di động và phần mềm chất lượng.

⇒ Bạn muốn tìm kiếm môi trường làm việc ổn định, lâu dài cùng cơ hội học hỏi các công nghệ mới nhất? Hãy thử khám phá vị trí React Native Developer tại Hanbisoft, biết đâu đây chính là “bến đỗ” phù hợp với tài năng của bạn!

4. VNIB Tech

Được thành lập từ năm 2016, VNIB Tech là công ty chuyên cung cấp các phần mềm trên nền tảng di động (iOS, Android) và web. Hoạt động với sứ mệnh mang thế giới đến gần nhau hơn bằng công nghệ, VNIB Tech không ngừng cải tiến chất lượng, đem đến cho khách hàng những sản phẩm và giải pháp tối ưu nhất. Đây cũng chính là cơ hội cho các tài năng công nghệ trải nghiệm môi trường làm việc chuyên nghiệp tại công ty đến từ Hàn Quốc và gặt hái thành công.

Bạn đã sẵn sàng chinh chiến cùng VNIB Tech trong những dự án đầy thách thức? Khám phá ngay loạt vị trí hứa hẹn cho bạn cơ hội bứt phá sự nghiệp:

• Front-end Developer (VueJS/React)
• Java Developer (Java Core, Vert.x, Spring)
• Senior Full-stack Developer (Java, Spring, VueJS)
• UI/UX Designer
• Senior/Leader QC Engineer

5. Mintpot

Mintpot Việt Nam là thành viên của Minpot, có trụ sở chính tại Hàn Quốc, và là một trong những công ty sáng tạo thông minh, chuyên cung cấp các dịch vụ video VR có phụ đề Mint VR với ước mơ tạo ra một cuộc sống tốt hơn với VR.

Đến với Mintpot, ngoài mức lương cực hấp dẫn, bạn còn có nhiều cơ hội thăng tiến và phát triển không giới hạn. Nếu bạn đang tìm kiếm “bến đỗ” cho sự nghiệp và đã sẵn sàng tạo cú hích mới cho bản thân? Vậy Mintpot chính là câu trả lời tốt nhất cho bạn..

Đừng bỏ lỡ cơ hội! Gia nhập Mintpot ngay với 1 trong 3 vị trí hấp dẫn đang chờ bạn trực tiếp trải nghiệm:

• Mobile App Developer (iOS)
• Front-end Web Developer
• Back-end Web Developer

6. Genuwin Solution

Genuwin là công ty thuộc top đầu trong ngành lập trình phần mềm quản lý nhân sự, kế toán, quản lý sản xuất, nhà hàng khách sạn, sân golf, trường học quốc tế, liên kết thanh toán với hệ thống ngân hàng Hàn Quốc Shinhan Bank với mạng lưới khách hàng trải dài khắp Việt Nam và các nước như Campuchia, Indonesia, Hàn Quốc…

Với đội ngũ nhân viên chuyên nghiệp, tận tâm và có năng lực, trách nhiệm cao, Genuwin ngày càng phát triển và từng bước trở thành một trong những nhà cung cấp và phát triển hệ thống quản lý (ERP) hàng đầu.

Và nếu bạn là ERP Developer đang tìm kiếm cơ hội phát triển sự nghiệp qua các dự án phát triển hệ thống ERP, đừng ngần ngại click apply để gia nhập Genuwin Solution ngay hôm nay. 

Đường đua công nghệ tại Việt Nam đang nóng hơn bao giờ hết! Với sự xuất hiện của Top 6 công ty công nghệ Hàn Quốc, hy vọng bạn sẽ lựa chọn được “bến đỗ” phù hợp và sẵn sàng cháy hết mình với đam mê lập trình!

⇒ Và đừng quên, KICC HCMC X TopDev sẽ còn mang đến cho cộng đồng IT Việt Nam nhiều cơ hội mới. Hãy chờ đón những bài viết tiếp theo cùng những cơ hội mới hấp dẫn bạn nhé!

________________________________

Dự án được hỗ trợ bởi Korea IT Cooperation Center tại TP. HCM (KICC HCMC) – thuộc Cơ quan Xúc tiến CNTT Hàn Quốc (NIPA), phối hợp cùng TopDev – Nền tảng tuyển dụng CNTT hàng đầu tại Việt Nam với mục đích thúc đẩy tuyển dụng việc làm CNTT cũng như quảng bá cho các công ty IT Hàn Quốc trong cộng đồng lập trình viên lớn nhất tại Việt Nam.

Liên hệ: Korea IT Cooperation Center tại TP. HCM (KICC HCMC)

☎️ Hotline: 84 28 35208135 (Vietnamese) | 84 28 35208136 (Korean)

E-mail: HCMC@nipa.kr

Address:135 Hai Bà Trưng, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh

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