Мне дали хорошие инструкции, простой дизайн и 48 часов.
На что стоит потратить время?
да.
Этот раз.
Добро
Если вы когда-либо увольняли работу из-за проблем с программированием, я рекомендую вам в следующий раз подумать над этим.
Когда мне бросили вызов, я решил, что, по крайней мере, получу хороший опыт.
Я думал, что могу даже получить что-то, о чем смогу похвастаться или написать.
Оказалось, что для меня это хороший способ лучше узнать нанимающую компанию; это дало мне понимание того, что они могут ожидать от своей роли и от своих разработчиков в целом.
Вызов также дал мне возможность попробовать новый фреймворк - CodeIgniter.
По большей части я работаю с Laravel и WordPress.
Мне понравилось изменение.
Не очень хорошо
На выполнение задания у меня ушло почти два дня, а это большие вложения, когда вам нужна работа через определенное время.
Я бы посоветовал подумать о том, чтобы бросить вызов, только если вы знаете, что действительно хотите получить эту работу.
К счастью, перед испытанием я смог поговорить с разработчиком в компании и получить реальное представление о том, как им нравится что-то делать. Мне понравилось то, что я услышал, поэтому я решил попробовать.
Я бы посоветовал сделать то же самое, прежде чем тратить время на длительный процесс собеседования. Пройдите через все эти проблемы только для того, чтобы понять, что вам не понравится, что компания сильно подведет.
Если потенциальная компания собирается попросить вас выполнить задание по кодированию, я не думаю, что было бы слишком необычно попросить сначала поговорить с одним из их разработчиков в течение нескольких минут.
Вызов начинается
Задача заключалась в создании приложения для управления клиентами.
- отобразить список магазинов для выбранной страны / города
- отображать список покупателей в выбранном магазине
- создавать / редактировать / удалять клиентов
Хотя это выглядело не так уж и много, я вспомнил, как легко увязнуть в деталях и несущественном.
Я решил не тратить время на настройку идеальной системы сборки или разработку самой надежной архитектуры.
Я собирался сосредоточиться на написании чистого и легко читаемого кода.
Оставшееся время: 48 часов
Настройка и инструменты
Мне дали новую установку CodeIgniter и базу данных для настройки.
Мои инструкции состояли в том, чтобы использовать только jQuery, подчеркивание / lodash и Bootstrap.
Это означало, что я не имел модной JS-структуры, и это было , вероятно, самой неприятной частью всей проблемы; объем кода, который мне приходилось писать, чтобы делать то, что я хотел с пользовательским интерфейсом, был утомительным. Мне очень не хватало удобств красивого фреймворка (мой любимый - Vue.js).
Шаг 1. Рабочий процесс переднего плана
Модули и ES6 необходимы, поэтому я собрал очень простую настройку Webpack. Ничего фантастического. Все, что он сделал, это транспилировал и скомпилировал JS.
Затем я загрузил Bootstrap и jQuery и поместил уменьшенные версии в свой проект. Если бы у меня было время, я бы посмотрел, как правильно управлять этими зависимостями, но мое внимание было сосредоточено на большом неизвестном - CodeIgniter.
Оставшееся время: 47 часов
Шаг 2: Попасть в неизведанные воды
Начать работу с CodeIgniter было неплохо.
Сначала у меня были те бабочки, которые всегда появляются, когда я собираюсь начать что-то новое. Но CI очень доступен, и я довольно быстро начал работать.
Мне удалось найти несколько плейлистов на YouTube, которые помогли мне привыкнуть к тому, как CI любит делать что-то. Примерно за 20 минут я настроил несколько основных маршрутов и получил рабочее представление о конфигурации, моделях и контроллерах.
Оставшееся время: 46 часов
Шаг 3. Как загрузить мои JS-модули?
Не обладая удобством внешнего маршрутизатора, я решил попробовать другой подход к загрузке модулей на соответствующие страницы.
Вот что я придумал:
import main from './assets/main'
import stores from './assets/stores'
import customers from './assets/customers'
$( document ).ready(function() {
const page_id = document
.getElementById('page_id')
.getAttribute('data-module')
const modules = {
home : main,
about : main,
stores_index : stores,
store_customers : customers
}
modules[page_id] ? modules[page_id].run() : false
});
Я попросил CI-контроллер вводить уникальный идентификатор в каждый загруженный файл представления.
Когда я «готов», я беру идентификатор со страницы и загружаю соответствующий модуль.
Это сработало довольно хорошо.
У меня был модуль stores для обработки главной страницы со списком магазинов, а затем модуль customers для обработки страницы управления клиентами.
Оставшееся время: 45 часов
Шаг 4: проверка требований
Теперь, когда у меня был заложен приличный фундамент, мне нужно было сосредоточиться на понимании приложения и того, как я собирался его собрать.
Престижность компании за довольно четкие инструкции. Мне даже была предоставлена некоторая свобода творчества при соблюдении всех минимальных требований к функциональности.
- отобразить список магазинов для выбранной страны / города
- отображать список покупателей в выбранном магазине
- создавать / редактировать / удалять клиентов
Я взял лист бумаги и начал набрасывать идеи.
Я давно понял, что нужно потратить много времени на обдумывание функции, прежде чем писать какой-либо код. Правильное планирование сэкономит вам много часов ненужного рефакторинга.
Оставшееся время: 44 часа
Шаг 5: REST API с CodeIgniter
Это легко то, на что ушла большая часть моего времени.
Я запутался в следующем:
- CI Query Builder (мне очень не хватало Eloquent - ORM Laravel)
- Возвращение правильного ответа со статусом, данными и сообщением.
- Доступ к полезной нагрузке по запросу PUT / PATCH.
Как и некоторые, я виноват в том, что освоился с некоторыми инструментами, но сам никогда не катал что-то, чтобы понять, что происходит под капотом. Я с нетерпением жду времени, чтобы правильно понять, почему у меня были такие трудности с выполнением этого с помощью CI.
В конце концов, я понял, как сделать все вышеперечисленное с помощью предоставленных мне инструментов.
Может быть, некоторые разработчики, более знакомые с CI, могли бы взглянуть на то, что я придумал в качестве модели для составления списка клиентов:
public function list($store_id) {
$results = $this->db
->from('customer')
->where('customer.store_id', $store_id)
->join('rental', 'rental.customer_id = customer.customer_id', 'left')
->join('inventory', 'inventory.inventory_id = rental.inventory_id', 'left')
->join('film_text', 'film_text.film_id = inventory.film_id', 'left')
->select('customer.customer_id, customer.first_name, customer.last_name, inventory.inventory_id, inventory.film_id, customer.create_date, customer.last_update, customer.active, rental.return_date, rental.rental_date, customer.email, customer.address_id, film_text.title, film_text.description')
->get()
->result_array();
// rental details grouped by customer_id
$customers = group_by($results, 'customer_id');
$customer_list = array_map(function ($customerData) {
$rentals = array_filter($customerData, function ($data) {
return !empty($data['film_id']);
});
// alpha sort
usort($rentals, function ($a, $b) {
return strcmp($a["title"], $b["title"]);
});
$rental_count = count($rentals);
$customer = [
'active' => $customerData[0]['active'],
'create_date' => $customerData[0]['create_date'],
'last_update' => $customerData[0]['last_update'],
'rental_date' => $customerData[0]['rental_date'],
'return_date' => $customerData[0]['return_date'],
'address_id' => $customerData[0]['address_id'],
'email' => $customerData[0]['email'],
'customer_id' => $customerData[0]['customer_id'],
'first_name' => $customerData[0]['first_name'],
'last_name' => $customerData[0]['last_name'],
'rentals' => $rentals,
'rental_count' => $rental_count,
];
return $customer;
}, $customers);
$customer_list = array_values($customer_list);
usort($customer_list, function ($a, $b) {
return strcmp($a["last_name"], $b["last_name"]);
});
return !empty($results)
? [
'status' => 200,
'message' => 'Success',
'data' => $customer_list
]
: [
'status' => 204,
'message' => "There aren't any customers at this location.",
'data' => []
];
}
и я нашел этот маленький помощник для форматирования моего ответа json:
function json_output($response) {
$ci =& get_instance();
$ci->output->set_content_type('application/json');
$ci->output->set_status_header($response['status']);
$ci->output->set_output(json_encode($response));
}
Оставшееся время: 40 часов
Жизнь, отдых и сон
Шаг 6. Создание гладкого UI без фреймворка
Оставшееся время: 24 часа
После того, как я стал лучше разбираться в настройке конечных точек API, я, наконец, был готов больше сосредоточиться на пользовательском интерфейсе.
Это была удобная и знакомая территория, и я был взволнован, чтобы создать что-нибудь красивое.
Я старался не зацикливаться на именах и организации классов css и просто принялся за работу.
Вот несколько снимков кода:
Вся эта работа по обновлению пользовательского интерфейса на лету заставила меня оценить, насколько хорошо у нас он работает с такими фреймворками, как Vue, React и даже Angular.
Некоторые ключевые особенности:
- имя и фамилия были необходимы для добавления / редактирования клиента. Спецификации требовали предупреждения при отправке, если какой-либо из них отсутствовал, но вместо этого я решил просто отключить кнопку сохранения, пока не будут заполнены оба поля.
- Я добавил сообщения об ошибках и успешном выполнении после большинства операций.
- Я использовал модальные окна Bootstrap для добавления, редактирования и удаления данных о клиентах.
Я не дизайнер, поэтому был счастлив получить Bootstrap.
Посмотри:
После долгой работы и небольшого сна…
Оставшееся время: 0 часов
Сделал бы я это снова?
да.
Хотя это простое приложение CRUD едва ли касается того, что делает компетентный разработчик, оно дало мне четкий путь к демонстрации некоторых из того, что я могу делать.
Я не хотел бы делать это на каждой вакансии, на которую подаю заявку, но я думаю, что это было хорошее использование моего времени.
Нашли это интересным / полезным?
Если этот короткий пост вам чем-то помог, пожалуйста, не забудьте дать ему рекомендацию ниже и оставить короткий комментарий, чтобы поддержать меня.
Комментарии, вопросы и конструктивные отзывы всегда приветствуются.
Меня зовут Патрик О’Дакр, и я разработчик программного обеспечения, в настоящее время открывающий новые возможности.
Мне было приятно создавать новаторские системы заказов электронной коммерции, красивые информационные панели продаж и сложные таблицы данных с невероятно талантливыми людьми, которые заботились о том, чтобы работа никогда не была похожа на работу.
Среди моих любимых инструментов - Vue.js, React.js и Laravel, и я всегда рад узнавать что-то новое.
Мне нравится создавать великие дела с замечательными людьми. Давайте вместе создадим что-нибудь великое
