Создание регистрационного приложения для Need 2 Speed ​​Go-Karts

Клиент

Ко мне обратился мой друг из Nevada IT Solutions с просьбой: могу ли я создать простое приложение для регистрации событий для их клиента с очень ограниченным бюджетом? Если вы не из мира консалтинга или фриланса, ограниченный бюджет означает, что вы не можете тратить на это много времени. Дизайнеру всегда сложно услышать эту просьбу, потому что наша естественная склонность — тратить много времени на изучение дизайнерских решений и тщательное планирование, но, поскольку просьба была довольно прямолинейной, я решил взяться за нее. .

Клиент был владельцем, вероятно, очень вожделенного домена Need2Speed.com, картинговой компании в Рино, штат Невада. У Need 2 Speed ​​возникла проблема с процессом. Они часто устраивали соревнования по картингу для больших групп, и в настоящее время им приходилось вручную регистрировать каждого отдельного гонщика на стойке регистрации, прежде чем гонка могла начаться. Они боролись с большими очередями и раздражающим процессом, который, по их мнению, можно было легко автоматизировать и сделать доступным в Интернете, и они были правы.

Я предложил разработать отдельное приложение NodeJS в поддомене events.need2speed.com для решения всех этих задач.

Дизайн

У нас не было много времени, чтобы обсудить дизайнерские решения, поэтому я сделал набор простых каркасов, чтобы наметить общий макет и выяснить, какие поля, параметры и элементы управления будут доступны в приложении.

Строим проект, быстро!

Как только каркасы были одобрены, пришло время создать приложение, и мне нужно было сделать это быстро. Без сомнения, я потянулся за своим старым верным другом Йоменом. Yeoman — это приложение для создания веб-шаблонов, которое запускается из командной строки. Вы можете выбрать один из множества генераторов, которые настроят запущенное приложение с использованием технологий по вашему выбору. Для этого проекта я выбрал Генератор Angular-Fullstack, который поможет вам начать работу с приложением, использующим AngularJS на стороне клиента с использованием ES6 через BabelJS. На стороне сервера Йоман настраивает NodeJS с помощью ExpressJS. Скаффолд также включает в себя отличный файл GulpJS, который поможет вам автоматизировать все виды задач, таких как минимизация кода, линтинг и развертывание. Вы также можете легко управлять зависимостями, используя NPM и WebPack.

Отправка данных и использование RESTful API

Для создания учетных записей и регистрации пользователей на гонки мы использовали отличный картинговый API от ClubSpeed ​​Timing. ClubSpeed ​​Timing позволил нам просто отправлять данные, отправленные пользователями, в их RESTful API, и все отображалось в системе пользователей Need 2 Speed. Все, что нам нужно было сделать сейчас, — это получить данные от наших пользователей (либо вручную войдя в систему, либо зарегистрировавшись, либо через API входа в Facebook) и отправив данные в API с помощью NodeJS.

Сбор данных с помощью AngularJS в ES6

'use strict';
const angular = require('angular');
const uiRouter = require('angular-ui-router');
import routes from './event.routes';
export class EventComponent {
  /*@ngInject*/
  constructor($http, $stateParams, $state, Util) {
    this.$http = $http;
    this.$stateParams = $stateParams;
    this.$state = $state;
    this.util = Util;
  }
  $onInit () {
    this._event = Object.create(this.util.newState);
    this._event.loading = true;
    this.loginForm = Object.create(this.util.newState);
  }
  login () {
    this._event.loading = true;
    this.$http.post('/api/login', this.loginForm.data )
    .then((response) => {
      console.log('Login response:', response);
      this.register(response.data.customerId);
    }, (error) => {
      console.log('Login error', error);
      this._event.loading = false;
      this.loginForm.data = {};
      this.util.showErrorDialog('The username and password combination did not match an existing account. ');
    });
  }
  register (customerId) {
    let requestData = {
      eventId: this._event.data.eventId,
      customerId: customerId,
      added: new Date().toISOString()
    };
    this.$http.post('/api/register', requestData )
    .then((response) => {
      this._event.loading = false;
      this._event.success = true;
    }, (error) => {
      console.error('Registration error', error);
      this._event.loading = false;
      if ( error.data.search('Cannot insert duplicate key in object') ) {
        this.util.showErrorDialog('This username is already registered to this event.', false);
        this._event.success = true;
      } else {
        this.util.showErrorDialog('An error occured while trying to register your account to the event.');          
        this.resetState();
      }
    });
  }
}

Окончательный результат

Эшафот Йомена работал отлично. Стороны клиента и сервера взаимодействовали без проблем, а данные передавались туда и обратно с помощью API ClubSpeed. Теперь пользователи могут регистрироваться для участия в гонках на своих устройствах после получения приглашения по электронной почте, что избавляет Need 2 Speed ​​и их клиентов от необходимости тратить драгоценное время на регистрацию на стойке регистрации.

Вы можете полный репозиторий кода на Github.