Spring has begun, this year’s spring from the previous sit and instead of video link. Some recruitment platforms have also introduced “video interview” functions. In fact, video interviews for most positions are not much different from video calls, based on our official tutorial, it is easy to achieve.
But engineers who conduct video interviews also need to go through technical interviews. There have been online answering systems in the past, so we can definitely combine the two.
At last year’s RTC 2019 Coding Challenge held by Sonnet, the participating team “CoderLane” implemented a video interview app that supports online programming. The following are practical lessons written and shared by the CoderLane team. (At the end of the source ~)
Project introduction
CoderLane is an online real-time programming environment designed to solve the problem of online multiplayer real-time programming environment. We hope to improve the online programming experience through a variety of techniques.
Project beginner’s mind
It started with an online interview with a friend. The interviewer sent him a link to a simple question: the number of characters to be repeated after a character in a string. The given time was 30 minutes, but it took my friend 15 minutes to figure out how to use their tool.
Finally, although he finished the interview questions, the algorithm was not optimized due to the tight time. Eventually led to no chance to get a second interview. If we think about the current interview scenario, we can easily find the following aspects of the problem:
- A candidate’s resume is not a true reflection of actual skills
- The lack of executable links in traditional offline interviews troubles candidates (often due to differences in understanding of some questions, accurate judgment of candidates cannot be effectively obtained in the interview, or candidates’ performance is lower than expected).
- The phone was not an effective way to assess a candidate’s actual skills, so I started thinking about creating a more useful online programming tool that was accessible and simple enough to use
- An in-person interview can add time, expense, etc. (If it’s not an in-person test, give you a piece of A4 paper and soon all you get is what looks like cursive writing. It doesn’t work and it’s hard to see what it says.
Based on my personal interests, I began to think of making a better online programming tool, which is easy and accessible to use. As luck would have it, I learned about Agora SDK, and thought that audio and video functions could be added on the basis of previous ideas, so that interviewees could have more real-time experience in CodeLane. So I took the opportunity of the competition to polish my work.
The main function
Currently, CoderLane has the following main functions:
- Supports 20+ languages
- Powerful code editor
- Efficient real-time audio and video communication
- Now let’s take a look at some of the main features in detail and see how they work:
A modern IDE that integrates the Monaco editor for a complete editing experience.
// editor import React from'react';
import VSCode from './VSCode';
class CodeEditor extends React.Component {
render() {
const { width, height, style, onInit } = this.props;
return (
<div
style={{
width: width || '100%',
height: height || '100%',
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, ... style }} > <VSCode {... this.props} onInit={onInit} /> </div> ) } }export default CodeEditor;
Copy the codeCustom editor, which allows you to customize the base editor Settings. Create dozens of online programming locales in just 5 seconds:
// Editor sets class Setting extends react.ponent {static contextType = ContextbindVaue = key => {
const { setting, dispatch } = this.context;
return {
value: setting[key],
setValue: value => dispatch(settingUpdate({ key, value })),
}
}
render() {
const { isOpen } = this.props;
return (
<Modal
isOpen={isOpen}
onRequestClose={this.props.closeModal}
style={modalStyle}
>
<div className="setting">
<h3>Settings</h3>
<SettingItem
title="Line numbers"
type="boolean"{... this.bindVaue('lineNumbers')} /> <SubDescription> Controls whether to show line numbers. Defaults to true. </SubDescription> <Split /> <SettingItem title="Auto Indent"
type="boolean"{... this.bindVaue('autoIndent')}
/>
<SubDescription>
Enable auto indentation adjustment. Defaults to false.
</SubDescription>
<Split />
<SettingItem
title="Tab Size"
type="number"{... this.bindVaue('tabSize')}
/>
<SubDescription>
Number of spaces per indentation level. Inherited by all formatters.
</SubDescription>
<Split />
<SettingItem
title="Font Size"
type="number"{... this.bindVaue('fontSize')}
/>
<SubDescription>
Controls the font size in pixels
</SubDescription>
</div>
</Modal>
)
}
}
Copy the codeThe high fidelity console (REPL), which connects to the language’s REPL, can be used for advanced operations such as debugging:
// REPL
function dockerExec(lang, isPty) {
const containerId = get('containerId');
let execParams = [];
execParams.push('exec');
if (isPty) {
execParams.push('-it');
} else {
execParams.push('-t');
}
execParams.push('-w', ws, containerId);
if (isDynamic(lang) && isPty) {
execParams.push(... replParams(lang)); // dynamic language run}else {
execParams.push(... replParams(lang,true)); // dynamic language run}if(isDynamic(lang) &&ispTY) {// Dynamic languages require PTYreturn nodePty.spawn('docker'.execParams);
} else{// Execute directly without pTYreturn spawn('docker'.execParams); }}Copy the codeReal-time audio and video are realized by Agora SDK of Sonnet:
// Audio and video real-time communicationinitVideo() {
const { sandbox: { _id }, app: { token } } = this.props;
if(! AgoraRTC.checkSystemRequirements()) { alert("Your browser does not support WebRTC!");
}
AgoraRTC.getDevices(devices => {
var defaultAudio, defaultVideo;
let localStream;
defaultAudio = _.head(_.filter(devices, function(v) {
return v.kind === 'audioinput';
}));
defaultVideo = _.head(_.filter(devices, function(v) {
return v.kind === 'videoinput'; })); This.client.init (appId, () => {// Add channel console.log()'token > ', token, _id, this.uid)
this.client.join(token, _id/* channel id */, this.uid, uid => {
const localStream = AgoraRTC.createStream({
streamID: uid,
audio: true,
cameraId: defaultVideo.deviceId,
microphoneId: defaultAudio.deviceId,
video: true, // Whether to enable video screen:false
});
this.stream = localStream;
localStream.setVideoProfile('480p');
localStream.init(() => {
localStream.play("preview"); // Publish the video stream to sd-rtn this.client.publish(localStream, (err) => {
console.error("Error publishing video stream:"+ err); }); }); })})}); }Copy the codeThe follow-up plan
Currently, the completion function provides shortcut keys in the Settings. Currently, only a few languages are supported (browser, Chai, jquery, ECma, jquery, React, underscore), so more languages will be added in the future.
CoderLane is intended to be a more convenient experience as an online programming tool, and is intended to be free forever until it becomes unaffordable.
The open source project
- Online experience: coderlane.net/
- Author: Jiang, the main work is to do front-end, know a little back-end, and occasionally do products.
- Author’s homepage: github.com/monsterooo
- Open source: github.com/AgoraIO-Com…
Compilation Guide:
Run dependencies docker, mongodb, Nodejs to make sure you have installed the above software normally • Rename. Env. example to. Env and fillin the values according to the configuration in• NPM I installer dependencies • Start a console and run NPM run build • Start another console and run NPM run server Visit the browser http: // localhost: 3000 andlog in using github to create it.
Copy the codeRTC 2020 Programming Challenge registration begins!
RTC 2020 Programming Challenge Spring is open for registration! This competition from March 10 to April 21 for registration, team and development, April 22 to April 24 to submit works, April 25 award evaluation, the whole online. This competition is ready to rich awards, quickly pull your friends to sign up!
