Tạo ứng dụng với Rails 5 và Angular 5

Hôm nay mình sẽ giới thiệu đến các bạn tạo ứng dụng đơn giản với sự kết hợp giữa Rails 5 và Angular 5. Đầu tiên, chúng ta sẽ tạo một Angular app với vai trò là client, sau đó sẽ tạo một Rails app với vai trò là server. Sau đó, từ client chúng ta sẽ gửi các request đến server.

Khởi tạo Angular App

Mình sẽ làm một client hỗ trợ việc gửi và nhận tin nhắn (tất nhiên là mình chưa làm real time được vì mình cũng mới nghiên cứu cái này, nếu có thời gian mình sẽ nghiên cứu và giới thiệu đến các bạn ở các bài viết sau). Việc đầu tiên cần làm chính là chúng ta cần phải cài Angular CLI với câu lệnh sau:

npm install -g @angular/cli

Hoặc nếu các bạn muốn tìm hiểu thêm về Angular CLI, các bạn có thể xem qua ở đây.

Tiếp theo, các bạn cần tạo thư mục chứa source code. Ở đây, Angular app đóng vai trò là một client và Rails app đóng vai trò là một server nên mình sẽ có một Angular app tên là client, và một Rails app với tên là server nhé. Chúng ta sẽ có cấu trúc thư mục như sau:

Tiếp đến, chúng ta sẽ khởi tạo Angular app với Angular CLI thông qua câu lệnh sau:

ng new client

Cùng đợi việc khởi tạo hoàn thành và kiểm tra kết quả bằng việc chạy các câu lệnh sau:

cd client
ng serve

và truy cập vào đường dẫn http://localhost:4200. Và kết quả sẽ như sau:

Như vậy, chúng ta đã hoàn tất việc khởi tạo Angular App. Tiếp theo chúng ta sẽ cùng tạo một Rails App nhé.

Khởi tạo Rails App

Hiện tại, ở terminal, chúng ta đang đứng ở thư mục client, do vậy, chúng ta sẽ khởi tạo một Rails App với các câu lệnh sau:

cd ..
rails new server --api
cd server
rails db:create

Đầu tiên, chúng ta cần xác định các model cần thiết, vì mình chỉ làm một app đơn giản, nên mình chỉ cần một model là message để chứa các tin nhắn. Chúng ta cần tạo model, và fake data:

rails generate scaffold message content:string
rails db:migrate

Sau đó, sửa nội dung file server/db/seeds.rb như sau:

Message.create!([
  { content: 'The first message' },
  { content: 'The second message' }
])

Chạy lệnh sau để fake data:

rails db:seed

Cuối cùng là chạy server rails với lệnh:

rails s

Đầu tiên, các bạn thử truy cập địa chỉ sau: http://localhost:3000/messages.json. Kết quả chính là danh sách các message mà các bạn đã fake ở trên.

Enable CORS (cross-origin resource sharing)

Việc này để Rails App cho phép các ứng dụng bên ngoài có thể kết nối với nó. Và để enable, chúng ta cần un-comment gem rack-cors trong Gemfile. Và chạy

bundle install

Tiếp đến, các bạn cần vào file server/config/initializers/cors.rb, và thêm nội dung như sau:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      expose:  ['access-token', 'expiry', 'token-type', 'uid', 'client'],
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Và restart server Rails.

Tạo request đến server

Chúng ta sẽ gửi request http đến server, vì vậy trước tiên, chúng ta cần import nó vào Angular App. Cùng sửa các file sau:

# client/src/app/app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  messages;

  constructor(private http: Http) {
    this.http.get('http://localhost:3000/messages.json')
      .subscribe(res => this.messages = res.json());
  }
}

# client/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sau đó chúng ta sẽ hiển thị chúng ra view bằng việc chỉnh sửa file sau:

# client/src/app/app.component.html

<ul>
  <li *ngFor="let message of messages">{{message.content}}</li>
</ul>

Để hiểu thêm về việc này, các bạn nên làm qua Tutorial: Tour of Heroes.

Và sau đó, xem lại nội dung hiển thị ở client nhé.

Do mình sử dụng bootstrap, nên phần hiển thị sẽ khác. Các bạn cũng có thể chỉnh sửa cấu trúc html ở file client/src/app/app.component.html, để có được giao diện theo ý muốn.

Như vậy các bạn đã hoàn thiện việc lấy dữ liệu từ server và hiển thị cho client rồi.

Với bài giới thiệu trên, các bạn hãy tiếp tục tạo các request như gửi tin nhắn, sửa và xóa tin nhắn nhé. Hi vọng qua bài viết trên, có thể giúp các bạn phần nào trong việc xây dựng ứng dụng với Angular và Rails. Cảm ơn các bạn đã tham khảo.