一個App想留住用戶，最佳方式就是給他們展現(xiàn)個性化的內容。YouTube視頻結束后視頻建議推薦（Up Next ）就是一個很好的例子。亞馬遜也有一個類似瀏覽商品后的類似商品的建議也是備受歡迎。還有Instagram也有搜索和瀏覽圖片時的展示的圖像和視頻的方法也是考慮到了個性化的內容展示。
回來再對比天朝的各大智能推薦系統(tǒng)：
概述
這篇文章中蟲蟲將帶領你一步一步構建一個簡單應用程序，從后端到前端整個全棧開發(fā)的詳細過程和步驟。實例的應用可以根據(jù)用戶最近上傳的視頻向用戶推薦個性化的視頻。為了實現(xiàn)這個功能，我們需要利用Cloudinary視頻播放器和由Google提供的自動視頻標簽附加。
成品的應用程序將如下圖所示：
依賴
為了構建這個應用程序，我們將為后端使用Node服務器，為前端使用Vue。執(zhí)行教程腳本，請確保：
你電腦上安裝了Node
電腦上有Node包管理器（npm）。
終端中運行以下命令確保是否安裝：
Node --version
npm --version
如果執(zhí)行結果是正常的程序版本號，而不是報錯，那么恭喜你，你可以按照本教程進行操作。否則，請先安裝node和npm安裝這。當然如果只想閱讀文章，可以忽略腳本和依賴環(huán)境。
1、使用Cloudinary進行設置
Cloudinary是一個圖像和視頻管理的一站式商店，包括操作、優(yōu)化和發(fā)布。借助Cloudinary，你可以節(jié)省大量的時間，避免花費多余的功夫在開發(fā)視頻操作和發(fā)布相關的相關功能。
創(chuàng)建Cloudinary帳戶
成功注冊Cloudinary后，你將被重定向到儀表板，你可以在其中看到CLOUD_NAME，API_KEY和API_SECRET。稍后將我們會用到這些值。
打開自動視頻標簽附加組件
你需要給你的賬號添加自動視頻標簽加載項，通過頁面頭部的Add-one菜單，點擊進入組件選擇頁面，選擇Google Auto Tagging組件：
選擇，F(xiàn)ree，月度50個標簽免費套餐，并通過幾個簡單步驟設置好該組件。
編輯受限制的圖像類型
要允許Cloudinary客戶端在帳戶中查詢不同標簽的媒體，你需要確保在Cloudinary帳戶的安全選項卡下的"受限制的圖像類型"中取消選中資源列表選項。如果未被選中，你將無法查詢媒體庫中的視頻標簽。
2、構建后端服務
要處理Cloudinary的API調用，我們需要部署一個后端express服務。
安裝所需的Node模塊
我們需要以下Node模塊：
cors，實現(xiàn)應用程序的跨源資源共享
express，后端Web服務器
body-parser，解析JSON請求的內容
connect-multiparty，應用程序的多媒體格式請求，上傳文件
cloudinary-core，處理Cloudinary函數(shù)的JavaScript核心庫包
新建一個目錄并進入該目錄：
mkdir video-suggestion && cd video-suggestion
用npm安裝以上所需的模塊
npm install cors express body-parser connect-multiparty cloudinary-core
創(chuàng)建server.js文件
創(chuàng)建一個文件，其中包含我們的服務器在項目目錄中工作所需的代碼：
touch server.js
這是我們服務運行時的，引導啟動文件。在server.js文件中，加載前面安裝的Node模塊。
加載節(jié)點模塊
const cors = require('cors')
const express = require('express')
const cloudinary = require('cloudinary-core')
const bodyParser = require('body-parser')
const multipart = require('connect-multiparty')
[...]
創(chuàng)建express應用
現(xiàn)在讓我們通過添加以下內容到server.js，創(chuàng)建我們的experess應用：
[...]
const app = express()
[...]
加載中間件
通過添加以下內容到server.js，加載所需的中間件：
[...]
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
const multipartMiddleware = multipart();
[...]
通過上述語句，我們將應用程序設置為使用cors。我們還設置應用程序以JSON格式解析請求。
配置Cloudinary客戶端
現(xiàn)在你需要使用你的CLOUD_NAME，API_KEY和API_SECRET來配置Cloudinary客戶端。登錄到Cloudinary帳戶時，你可以在儀表板上找到這些值。
[...]
cloudinary.config({
cloud_name: 'CLOUDINARY_CLOUD_NAME',
api_key: 'CLOUDINARY_API_KEY',
api_secret: 'CLOUDINARY_API_SECRET'
});
[...]
創(chuàng)建App路由
pload route of our applicati
我們的應用有兩條基本路由：
/ upload，上傳用戶的視頻
/suggest， 獲取用戶感興趣的視頻類別
對于應用程序的上傳部分，我們使用Cloudinary客戶端和視頻，這些視頻將app上傳時，將上傳路徑通過調用時作為發(fā)布請求的一部分發(fā)送給給后端程序。視頻文件會發(fā)送到Cloudinary媒體庫。
在上傳命令中，我們還包含google_video_tagging作為類別。這會觸發(fā)auto_tagging功能，并將檢測到的標簽與視頻一起存儲在媒體庫中。
[...]
app.post('/upload', multipartMiddleware, function(req, res){
cloudinary.uploader.upload(req.files.video.path,
function(result) {
return res.json({
'status' : true
})
},
{ resource_type: "video", categorization: "google_video_tagging", auto_tagging: 0.4 });
[...]
auto_tagging：0.4表示用于檢測到的標簽的置信度（匹配率）。
要獲取我們用戶上傳的視頻的探測標簽，我們設置Cloudinary客戶端的resource_type：'video'。
配置應用監(jiān)聽端口
最后是設置應用程序的監(jiān)聽端口：
[...]
let port = process.env.PORT || 3000;
app.listen(port, function () {
console.log('App listening on port ' + port + '!');
});
3、構建前端應用
我們已經(jīng)構建好了應用程序的后端服務，現(xiàn)在我們需要構建應用程序用戶交互界面。這兒，我選擇使用最流行火熱的Vue.js。 Vue.js是一個快捷易用的漸進式JavaScript框架。
安裝Vue.js
如果你已安裝Vue，運行以下命令確認安裝：
vue --version
如果還沒安裝，通過npm安裝裝Vue CLI：
npm install --global vue-cli
要創(chuàng)建前端服務，請在我們在上一步中創(chuàng)建的video-suggestion項目目錄下運行：
vue init webpack frontend
安裝Node模塊
我們將使用Vue組件中的axios獲取請求，你需要預先安裝它。安裝方法：
cd frontend
npm install axios
創(chuàng)建上傳組件
接著，創(chuàng)建負責視頻上傳的上傳組件。
cd frontend/src/components
touch Upload.vue
在Upload.vue中，我們需要加載axios模塊：
import axios from 'axios'
[...]
然后我們配置組件：
[...]
export default {
name: 'Upload',
data () {
return {
video: null,
loading: ''
}
},
methods: {
upload : function(files){
this.loading = 'Video detected';
this.video = files[0];
},
onSubmit: function(){
// compile the form data
const formData = new FormData();
formData.append('video', this.video);
this.loading = "Uploading...Please wait.";
axios.post('http://localhost:3128/upload', formData)
.then( res => {
this.loading = 'Upload Complete!';
})
}
}
}
組件有兩個方法，update和onSubmit。update負責將上傳的視頻分配給this.video，onSubmit方法將視頻添加到formData，然后將發(fā)送請求發(fā)送到后端服務器的/upload路由。
該組件將有一個如下所示的模板：
Video? ?
Upload
創(chuàng)建播放列表組件
現(xiàn)在視頻已上傳，我們希望為用戶提供類似視頻的播放列表。為此，我們將使用Cloudinary視頻播放器：
[...]
[...]
這會導入稍后需要的視頻播放器樣式表和JavaScript腳本。
創(chuàng)建播放列表組件：
cd frontend/src/components
touch Playlist.vue
在Playlist.vue中，我們導入axios模塊：
import axios from 'axios'
[...]
配置該組件：
[...]
export default {
name: 'Playlist',
data () {
return {
interests : '',
loading: ''
}
},
mounted : function(){
axios.get('http://localhost:3128/suggest')
.then( result => {
this.interests = result.data.tags;
let cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
let demoplayer = cld.videoPlayer('video-player');
demoplayer.playlistByTag( result.data.tags[0] ,{ autoAdvance: 0, repeat: true, presentUpcoming: 15 })
})
}
}
[...]
當上面的組件被掛載時，我們向我們的服務器的/suggest路由發(fā)出get請求，它返回標簽列表，然后我們使用Cloudinary VideoPlayer的playlistByTag函數(shù)播放資源視頻的第一個標簽。
該組件有一個如下所示的模板：
[...]
Suggested Video Playist
results are based on video uploads...
Your interests :
id="video-player"
controls
class="cld-video-player cld-video-player-skin-dark"
>
[...]
在App.vue中導入組件
現(xiàn)在我們已經(jīng)準備好了組件，我們將它們導入到我們的App.vue中，以便在編譯視圖時捕獲它們：
import Upload from './components/Upload'
import Playlist from './components/Playlist'
export default {
name: 'app',
components: {
Upload,
Playlist
}
}
App.vue的模板如下所示：
[...]
我們在這里將會看到上傳和播放列表模板。
一旦完成，我們的前端應用就完成了，我們可以使用以下命令運行它：
npm run dev
結論
我們已經(jīng)演示了如何使用Cloudinary和一些Vue.js構建視頻建議應用程序。
當然，還有許多其他場景可以使用有關用戶上傳的內容的捕獲數(shù)據(jù)，以便為你的應用程序提供更加個性化的體驗。
這篇文章蟲蟲，只是用來展示一下整個JS全棧開發(fā)的一個實例，拋磚引玉，希望大家能對此有個了解，并能在自己的實際工作中實踐。如果覺得文章還有意義，請關注蟲蟲，并給我點贊打賞，如果有意見建議，請直接回復本文章。
