Вся неделя в разговорах и в собеседованиях

#Технологии — Опубликовано 2 месяца назад


Наверное то, что хожу пешком, ем здоровую пищу и занимаюсь собой — даёт плоды. Добавьте к этому то, что не курю и не трачу время на болтовню/социальные сети/не трачу время на дорогу/не трачу их на другие мелочи и вуаля: работоспособность возросла. Если не тратить драгоценное время и "сосредоточиться как самоубийца" на разработке, то любое время проведенное вне программирования — становится напрасно потраченным временем.

Увы, вся неделя проходит в выполнении различных тестовых задании и собеседованиях. Сегодня не успел толком поработать, да и как пришел домой, быстро побежал работать, поэтому выполнил небольшое тестовое задание за 15 минут (больше всего ждал установки npm зависимостей и laravel), которое заключалось в том, чтобы написать один контроллер, который берет данные и один vue компонент, который подставляет их в таблицу. Первоначально прикрутил "Centrifuge" и анимацию под это дело, но потом подумал, что жирно будет и решил приберечь его для другого интересного тестового задания.

Для публикации этих задании купил домен "ginkida.ru", где буду хранить демонстрации работ. А в последующем запилю на нём какой-нибудь сервис.

Описание задания: 

  • Разработать Главный экран (веб-страница) - представляет собой таблицу - список валют. Список валют нужно получать по ссылке: http://phisix-api3.appspot.com/stocks.json. 
  • Ячейка валюты - название валюты, цена и количество. Название валюты - поле "name", цена - поле "volume", количество - поле "amount". Volume отображается как целое число. Amount - 2 знака после запятой. Высота ячейки - 50. 
  • Данные в таблице должны обновляться каждые 15 секунд. 
  • Также должна быть кнопка в ручного обновления данных в навигационном меню справа. 
  • Ответ: на выходе предоставить исходный код на PHP (laravel) в git репозитории. 

Для решения задачи понадобились два файла, контроллер с двумя методами (один отдает вьюшку с компонентом, другой обращается к данным):

namespace App\Http\Controllers\Currency;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class CurrencyController extends Controller
{
    public function __construct()
    {

    }

    public function currencies()
    {
        return view('pages.currencies');
    }

    public function get()
    {
        $currencies = json_decode(file_get_contents('http://phisix-api3.appspot.com/stocks.json'), true);

        $array = [];

        foreach ($currencies['stock'] as $cur) {
            $array[] = [
                'name' => $cur['name'],
                'amount' => round($cur['price']['amount'], 2),
                'volume' => $cur['volume']
            ];
        }

        return response()->json($array);
    }

     
}

И компонент, который получает json только с нужными полями и с округлением, а потом выводит его в компоненте для таблиц:

export default {
        data:  function () {
          return {
            currencies: [],
            columns: ['name', 'amount', 'volume'],
            options: {
              headings: {
                name: 'Название валюты',
                amount: 'Количество',
                volume: 'Цена'
              },
              sortable: ['name', 'amount', 'volume'],
              filterable: ['name', 'amount', 'volume']
            }
          }
        },
        mounted() {
            this.getData();
            setInterval(() => this.getData(), 15000)
        },
        methods: {
            getData: function(data) {
                var self = this;
                axios.get('/currencies/get').then(function (response) {
                    self.currencies = response.data;
                }).catch(error => {
                    if (error.response) {
                        $.each(error.response.data, function(index, value ){
                            alert(value);
                        });
                    }
                });
                console.log('Data Updated');
            }
        }
    }

Код app.js, где мы инициируем во vue нужный нам компонент для таблиц и с дизайном для bootstrap4:

require('./bootstrap');

window.Vue = require('vue');

import {ClientTable} from 'vue-tables-2';

Vue.use(ClientTable, {}, false, 'bootstrap4');

Vue.component('currencies-table-component', require('./components/CurrenciesTableComponent.vue'));

const app = new Vue({
    el: '#app'
});

В общем, код открытого репозитория на "bitbucket" находится здесь:  https://bitbucket.org/Ginkida/ginkida

Сами пощупать выполненное тестовое задание можете здесь.

В последующем опубликую более интересное задание, которое намного сложнее и со своими фишками, включая вышеупомянутый "Centrifuge".

P.S. Обновил блог до последней версии Laravel 5.7, а также вернулся обратно с "bulma" на "bootstrap".

Чтобы видеть и оставлять комменты зайдите через:
Вконтакте Facebook Twitter Google+