---
# System prepended metadata

title: Interview flow

---

# Interview flow
## Ask to rate 0-10
1. JavaScript ES6
2. React
3. Vue
4. Angular
5. Typescript
6. HTML5
7. Git

## React Native code challenge
請寫一個APP顯示API回傳的資料。
API Server: http://167.99.171.123:8080
API spec: https://gitlab.com/yenchieh/device-data-receiver (README)

此網站需要有以下功能:
1. Works on Android and iOS
2. Search by ID
3. Sorting

語言條件:
1. 使用 React Native
2. 可以使用任何React Native CSS lib/framework
3. 盡量不安裝多於的Library, 只使用React Native需要的
4. 怎麼使用你的程式寫入README

以下為加分:
1. Unit testing
2. 良好的檔案和程式架構
3. Error handling

寫完後請上傳到你的Github上傳，然後傳給我們Link
謝謝

## Frontend on-sight interview
Typescript: https://playcode.io/631647/
Javascript: https://coderpad.io/PZFQ4TD2

```javascript=
<html>
  <head>
    <style>
      body {
        background-color: #1d2126;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
  
  
  
<!--
 * 1. 了解程式碼，使用sensor class顯示資料
 * 2. 寫完 removeRecordById
 * 3. Debug cleanup function
-->

<script>
  class Sensor {
    data = [];
    app = null;

    constructor() {
      this.app = document.getElementById('app');
    }
    addRecord(location, motion) {
      this.data.push({
        id: Math.floor(Math.random() * 1000 + 1),
        location: {
          lat: location.lat,
          long: location.long,
        },
        motion: {
          x: motion.x,
          y: motion.y,
          z: motion.z,
        },
      });
    }

    get record() {
      return this.data;
    }

    get element() {
      var el = document.createElement('div');
      this.data.forEach(d => {
        var inner = document.createElement('div');
        inner.innerHTML = `
          <span class="record">
            <span class="name">ID: </span><span class="data">${d.id}</span>
            <span class="name">Lat: </span><span class="data">${d.location.lat}</span>
            <span class="name">Long: </span><span class="data">${d.location.long}</span>
            <span class="name">X: </span><span class="data">${d.motion.x}</span>
            <span class="name">Y: </span><span class="data">${d.motion.y}</span>
            <span class="name">Z: </span><span class="data">${d.motion.z}</span>
          </span>
      `;
        el.append(inner);
      });
      return el;
    }

    mockData() {
      // Generate record
      for (let i = 0; i < 10; i++) {
        this.addRecord(
          {
            lat: Math.floor(Math.random() * 1000 + 1),
            long: Math.floor(Math.random() * 1000 + 1),
          },
          {
            x: Math.floor(Math.random() * 10 + 1),
            y: Math.floor(Math.random() * 10 + 1),
            z: Math.floor(Math.random() * 10 + 1),
          }
        );
      }
    }

    render() {
      this.app.innerHTML = '';
      this.app.append(this.element);
    }

    removeRecordById(id) {
      console.log(`Trying to remove record: ${id}`);
      // TODO: You code here
    }
  }
  
  var s = new Sensor;
  s.mockData();


  // Deleting data
  function cleanup() {
    // Run cleanup functions sequentially
    for (var i = 0; i <= s.record.length; i++) {
        try {
          s.removeRecordById(s.record[i].id);
        } catch (e) {
          console.error(e);
        }
    }
  }



</script>
</html>
```

```typescript=

interface SensorData {
  id: number;
  locale: Locale;
  motion: Motion;
}

interface Locale {
  lat: number;
  long: number;
}

interface Motion {
  x: number;
  y: number;
  z: number;
}

class Sensor {
  data: SensorData[] = [];
  $appEl: HTMLElement = null;

  constructor() {
    this.$appEl = document.getElementById('app');
  }
  addRecord(locale: Locale, motion: Motion): void {
    const sensor: SensorData = {
      id: new Date().getTime(),
      locale,
      motion,
    }
    this.data.push(sensor);
  }

  removeRecord(id: number): void {
    console.log(`Trying to remove record: ${id}`);
    var index = this.data.findIndex(d => d.id === id);
    if (index !== -1) {
      this.data.splice(index, 1);
    }
  }

  get record(): SensorData[] {
    return this.data;
  }

  get element(): HTMLElement {
    const el = document.createElement('div');
    this.data.forEach(d => {
      const inner = document.createElement('div');
      inner.innerHTML = `
        <span class="record">
          <span class="name">Lat: </span><span class="data">${d.locale.lat}</span>
          <span class="name">Long: </span><span class="data">${d.locale.long}</span>
          <span class="name">X: </span><span class="data">${d.motion.x}</span>
          <span class="name">Y: </span><span class="data">${d.motion.y}</span>
          <span class="name">Z: </span><span class="data">${d.motion.z}</span>
        </span>
    `;
      el.append(inner);
    });
    return el;
  }

  mockData(): void {
    // Generate record
    for (let i = 0; i < 10; i++) {
      this.addRecord(
        {
          lat: Math.floor(Math.random() * 1000 + 1),
          long: Math.floor(Math.random() * 1000 + 1),
        },
        {
          x: Math.floor(Math.random() * 10 + 1),
          y: Math.floor(Math.random() * 10 + 1),
          z: Math.floor(Math.random() * 10 + 1),
        }
      );
    }
  }

  render(): void {
    this.$appEl.innerHTML = '';
    this.$appEl.append(this.element);
  }
}

// Deleting data
function cleanup(): void {
  // Run cleanup functions sequentially
  for (var i = 0; i <= sensor.record.length; i++) {
    setTimeout(() => {
      try {
        sensor.removeRecord(sensor.record[i].id);
        sensor.render();
      } catch (e) {
        console.error(e);
      }
    }, 1000);
  }
}
```

問題:
1. 上一分工作的工作內容
2. 使用的語言，lib, framework
3. 是怎麼學習Typescript, React


1. How to print out the results
2. Fix var -> let
3. Fix deleting undefined problem
4. Use Promise or async

# Backend interview flow
## Golang code Challenge
請寫出一個API server.
此server能存取以下data:
```
type Data struct {
 ID string
 Location struct{
  Lat  float32
  Long float32
 }
 DateAdded time.Time
}
```

以下條件
1. 使用Go開發，不使用Framework (但可使用library, 像是database lib: sqlx)
2. 使用MySQL Database
3. 有二個endpoint
  - GET /data → 回傳所有database裡面的data
  - POST /data → 把上傳的data存入database
4. 怎麼使用你的程式寫入README

以下為加分:
1. 使用 Docker and/or Docker Compose
2. Unit testing
3. 良好的檔案和程式架構

面試考題:
https://coderpad.io/4FQZW4RG

Another test:
```go
// To execute Go code, please declare a func main() in a package "main"

package main

import "fmt"

func main() {
  fmt.Println(isBalanced("{{[[(())]]}}"))
  fmt.Println(isBalanced("{()()}"))
  fmt.Println(isBalanced("{[(])}"))
  fmt.Println(isBalanced("{{}("))
}

func isBalanced(s string) bool {
  m := make(map[byte]byte)
  m['{'] = '}'
  m['('] = ')'
  m['['] = ']'
  
  if len(s) % 2 != 0 {
    return false
  }
  
  var a []byte
  for i := 0; i < len(s); i++ {
    if v, ok := m[s[i]]; ok {
      a = append(a, v)
    } else if len(a) > 0 {
      pop := a[len(a)-1]
      if pop != s[i] {
        return false
      }
      a = a[:len(a)-1]
    } else {
      return false
    }
  }
  return len(a) == 0
}
```
Long test:
```go
/**
 * 1. 了解程式碼，創一個Device的變數，然後PrettyPrint
 * 2. 寫完 RemoveSensorDataByID
 * 3. 寫完 RemoveSensorDataByRange
 * 4. 加上Children, 把以上的FUNCTION寫完
*/


package main
import (
  "fmt"
  "math/rand"
)

type Device struct {
  MacID      string
  SensorData []*SensorData
  Children   []*Device
}

type SensorData struct {
  ID uint32
  X  int
  Y  int
  Z  int
}

func (d *Device) PrettyPrint() {
  fmt.Printf("\n↓↓Mac: %s↓↓\n", d.MacID)
  for _, s := range d.SensorData {
    fmt.Printf("ID: %d \n\tMotion: [%d|%d|%d]\n", s.ID, s.X, s.Y, s.Z)
  }
}

func (d *Device) RemoveSensorDataByID(id uint32) {
  // Implement remove data by id

}

func (d *Device) RemoveSensorDataByRange(start, end int) {
  // Implement remove sensor data by range
}

func main() {
  // Your code here
}

// Create 10 records
func generateMocks() []*SensorData {
  var s []*SensorData
  for i := 0; i < 10; i++ {
    s = append(s, &SensorData{
      ID: uint32(i),
      X:  rand.Intn(100),
      Y:  rand.Intn(100),
      Z:  rand.Intn(100),
    })
  }

  return s
}


```