connect-with-soundcloud-1

Học React/Redux qua ví dụ thực tế: Kết nối với SoundCloud

Hôm nay sẽ là một sự trở lại nhẹ nhàng của Series Học React/Redux qua ví dụ thực tế. Chúng ta sẽ tìm cách kết nối application đang viết với SoundCloud API.

Cùng bắt đầu nhé!

Còn chờ gì nữa mà không đăng kí account SoundCloud!

Nói vậy thôi chứ ai có account rồi thì khỏi đăng kí nữa nhé. Hehe.

Sau khi đã có account, các bạn vào trang SoundCloud Developers, chọn SoundCloud API để đăng kí app mới. Hay click luôn vào link này https://soundcloud.com/you/apps/new để đăng kí nè.

Hiện nay đăng kí app mới trên SoundCloud Developers khá phức tạp nhưng mà các bạn hãy cố lên, mình tin tưởng ở các bạn.

Sau khi đăng kí app xong, các bạn nhớ set REDIRECT URI về local để có thể dev cho lẹ nhé.

Screen Shot 2016-11-14 at 10.57.28 PM.png

Tuỳ theo môi trường của các bạn mà setting cho đúng nhé!

Chia sẻ thêm, trong nhiều trường hợp, ở đây mình nói với những API khác, ví dụ như facebook, phần Redirect URI sẽ không chấp nhận localhost, lúc này các bạn có thể sử dụng phương pháp tunnel server của các bạn về localhost để dev, hoặc dùng một số ứng dụng như ngrok để tạo tunnel dynamic nếu như bạn không có server. Chi tiết các bạn search thêm google nhé.

Quay trở lại bài học.

Tóm lại lúc này các bạn sẽ có trong tay CLIENT ID và REDIRECT URI của SoundCloud app.

Tiếp tục code nè!

Đầu tiên tạo file config để chứa mấy thứ này đã.

Tại src folder, tạo file config.js.

Trong đó CLIENT_ID và REDIRECT_URI sẽ là environment variable.

Tại sao lại làm như vậy?

Lý do thứ nhất là vì security, chúng ta không thể khơi khơi mà ném những thông tin như vậy vào trong source code được, một lúc nào đó chúng ta open source ra, người ta thấy được thì phải làm sao, đâu phải ai cũng đạo đức như mình, thử nhìn qua thằng bạn Tôi đi code dạo của tui mà xem, nó phá nát bấy hầy bao nhiêu cái web rồi kìa, tốt nhất là đừng để những thông tin nhạy cảm leak vào trong source code.

Lý do thứ hai, đó là những thông tin này sẽ thay đổi tuỳ môi trường, các bạn không thể cứ đem lên staging/production là lao vào sửa code với thông tin tương ứng với staging/production được, phải để một chỗ nào chúng ta có thể linh động sửa được, chỗ đó là environment variable đó. Thế nhé, nhớ mà áp dụng vào thực tế nữa nhé!

Khi run app các bạn đơn giản nhập lệnh sau.

CLIENT_ID=your-client-id npm start

Vì chúng ta set default cho REDIRECT_URL là http://localhost:8080/callback nên ở môi trường local chúng ta cũng chẳng cần specify làm gì.

Tiếp theo, install SoundCloud client.

npm --save install soundcloud

Đây là library của SoundCloud đưa ra cho chúng ta xài. Có thì xài thôi, tội vạ gì phải implement mấy cái này cho vất vả đúng không nào.

Ding! Cài xong rồi chứ gì, mở file src/index.js lên code tiếp nè, chúng ta sẽ phải initialize SoundCloud client trước khi sử dụng.

Ủa rồi làm sao xử lý cái /callback trên app bây giờ?

React router

Để login thông qua SoundCloud, chúng ta phải phụ thuộc vào route /callback. Vì thế chúng ta sẽ phải setup routing cho app, mà với react thì chúng ta đã có React Router hỗ trợ việc này, nào cùng setup react-router cùng với một số route đơn giản.

npm --save install react-router react-router-redux

Sau khi cài đặt xong, các bạn mở file webpack.config.js thêm historyApiFallback: true vào config của devServer.

Config này nhằm cho phép application của chúng ta xử lý HTML5 router dễ dàng hơn, mà không cần care browser có support hay không.

Nào cùng tiếp tục phân tích. Bây giờ application của chúng ta sẽ có hai route, một để hiển thị app, chúng ta sẽ sử dụng root path /, và một để làm callback handle việc authentication thông qua SoundCloud API, chúng ta sẽ sử dụng /callback. Ngoài ra, chúng ta sẽ sử dụng react-router-redux để sync browser history và store. Điều này sẽ có ích khi route thay đổi. Có ích vì sao, hồi sau sẽ rõ.

Đầu tiên tạo file src/routes.js

Trong file này chúng ta sẽ implement function createRoutes để khởi tạo routes cho app. Với component App sẽ là wrapper, và component tương ứng với route như mình đã nói ở trên.

Lại mở file src/index.js lên.

Lúc này chúng ta không cần render component TrackList nữa, bây giờ chúng ta cần render Router để init các route tương ứng mà chúng ta đã tạo với createRoutes. Đối với Router chúng ta còn cần thêm props history

Sẵn tiện tôi remove luôn mấy đoạn code thừa, chúng ta không cần stuff data nữa, sắp có data thật mà xài rồi, ah hihi.

Các bạn đã thấy có hai components mà chúng ta chưa implement, bây giờ sẽ bắt đầu implement từng cái một.

Tạo các folders và files trước, làm sao ra như thế này là ổn. Đừng hỏi mình tạo như thế nào nữa nhé, mình khóc thật đấy!

screen-shot-2016-11-15-at-12-15-18-am

Đầu tiên là component App. Mở file App.js.

Đơn giản quá phải không, App chỉ có nhiệm vụ render tất cả các children của nó, hiện giờ chúng ta chỉ cần thế này là đủ, nhưng trong tương lai, chúng ta có thể ném nhiều thứ hơn vào đây, ví dụ như Header, Footer, hay Player, etc..

Tiếp theo là Callback, mở file Callback.js.

Các bạn có câu hỏi gì không? Nếu có thì comment nhé, component này chỉ làm nhiệm vụ callback thôi, vì thế khi load xong chúng ta sẽ gọi hàm của SoundCloud client để execute callback, chúng ta sẽ chẳng phải đụng vào nó sau này nữa đâu.

Cuối cùng, để hoàn tất flow với react-router chúng ta sẽ phải cung cấp cho store cái state về routing để nó có thể chuyển page.

Mở src/reducers/index.js.

Mở src/store.js.

Chúng ta apply thêm middleware router vào store. Khi sync store với browser history, chúng ta có thể listen trên những event của current route. Trong series này có thể sẽ không đề cập đến những trường hợp đó, tuy nhiên các bạn có thể tưởng tượng như việc fetch data khi route thay đổi. Ngoài ra những thuộc tính như browser path hay query params trên URL cũng có thể access được từ store sau khi chúng ta làm chuyện này.

Thử start app nào, đừng quên environment variable CLIENT_ID nhé!

Lúc này trang trắng bóc, đừng vội hoảng sợ, mở console lên, nếu các bạn thấy action của react-router được dispatch thì các bạn đã thành công rồi đấy.

Screen Shot 2016-11-15 at 1.04.03 AM.png

Trở lại với các bạn nhẹ nhàng thế này thôi, hôm sau chúng ta sẽ tiếp tục implement việc login vào SoundCloud để lấy data của user mà hiển thị nhé!

Source code trong bài các bạn vẫn có thể xem ở https://github.com/codeaholicguy/react-redux-tutorial/tree/master/connect-with-soundcloud

Bye bye!

Advertisements

9 thoughts on “Học React/Redux qua ví dụ thực tế: Kết nối với SoundCloud

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s