Приложение Stock Portfolio

Обобщая свой опыт создания приложения с использованием API данных об акциях

В этом блоге я расскажу о приложении, которое разработал как часть практического экзамена.

GitHub для приложения можно найти здесь: https://github.com/BennyLouie/stock-portfolio-webapp

Процесс

Целью этого проекта является создание веб-приложения для портфолио акций.

Детали были подробно описаны в инструкциях по оценке, но основная цель - позволить пользователю покупать новые акции и видеть актуальные цены на свои акции. Этот пользователь также должен иметь возможность видеть историю своих транзакций.

Конечно, больше всего меня беспокоило требование использовать API для получения информации о ценах на даты. Я не был уверен, смогу ли я реализовать это вовремя, так как у меня не было опыта с этим.

Кроме того, мне нужно было внедрить передовой опыт, поэтому мне нужно было настроить ценные бумаги для моего бэкэнда.

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

Все приложения, которые я создавал ранее, использовали Ruby on Rails, а также бэкэнд и React для внешнего интерфейса. Поскольку я буду создавать приложение, использующее данные в реальном времени, Node.js был бы лучшим вариантом для бэкэнда, но у меня не было времени изучить платформу. Я подумал, что мне лучше придерживаться того, что я знал, и работать над созданием функций своего приложения.

Честно говоря, прошло много времени с тех пор, как я создал свое последнее веб-приложение (около 2 месяцев плюс-минус?), Поэтому я по понятным причинам нервничал.

Бэкэнд

Мои навыки создания приложений определенно были немного ржавыми.

И поэтому я допустил грубую ошибку, когда начал создавать свой бэкэнд 😅.

В Rails, чтобы начать сборку нового проекта, вы используете команду rails new project-name. И вот так я начал строить свой проект. И все же каждый раз, когда я открывал свои папки и просматривал файлы, мне не хватало чего-то очень важного: rack-cors. CORS (Cross-Origin Resource Sharing) в основном сообщает вашему браузеру, к каким ресурсам вашему приложению разрешен доступ, когда оно пытается получить доступ к ресурсу, который не является его исходным доменом.

С rack-cors я могу выбрать, к каким доменам разрешить доступ к моему приложению Rails.

Однако такой файл никогда не создавался как часть стандартного шаблона rails new project-name! Мне приходилось много раз удалять и повторно инициализировать мое приложение Rails, но все равно файл просто не отображался.

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

Я создавал свои Rails в качестве бэкэнда. Поэтому мне нужно было указать, что я буду использовать его как API.

Забыл подбросить флаг --api!

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

Но это было только начало моих проблем ...

При реализации авторизации я столкнулся с проблемой, когда руководство, которому я следовал, использовало React Hooks. Хотя я собирался изучить их, я еще не ознакомился с крючками, поэтому решил придерживаться своей зоны комфорта. Я также использовал Redux, в то время как моего руководства не было, поэтому мне пришлось выяснить, как перевести инструкции в соответствии с моим кодом. Если бы у меня было время, я бы вернулся и реорганизовал свой код, чтобы использовать хуки, но пока я хотел сначала завершить свой MVP (минимально жизнеспособный продукт).

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

Внешний интерфейс

Именно здесь мне нужно было реализовать API для информации об акциях.

Я потратил некоторое время на изучение документации, но так и не смог по-настоящему понять, какую информацию мне нужно было извлечь.

В конце концов, я совершенно не понимаю, как работает стоковая версия, и документация не прояснила ситуацию 😅.

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

Я тоже решил использовать Redux. Я использовал его и раньше, но прошло какое-то время, и я подумал, что, вероятно, для моей оценки было бы лучше, если бы я мог показать, что знаю, как использовать различные технологии 😅. Кроме того, я хотел заново ознакомиться со всем, что я узнал.

Конечно, мне нужно было добавить разные маршруты для моего приложения, поэтому я также реализовал React-Router.

Для всего этого я обратился к своим старым проектам, чтобы получить правильную структуру.

Я, наверное, потратил день, просто настраивая все правильно и разбираясь в настройке. Затем я погрузился в создание компонентов и основных функций своего приложения.

В процессе создания компонентов я продолжал думать о том, как я собираюсь организовать свой код. Я несколько раз менял расположение своих компонентов, корректируя свои планы.

Чтобы визуализировать свое приложение более эффективно, я также на раннем этапе добавил немного CSS, чтобы мои компоненты отображались в правильном макете.

Поначалу здесь все шло довольно гладко.

У меня была небольшая проблема с подключением к моему бэкэнду и получением данных, которые я хотел, но в конце концов я решил это на раннем этапе.

Самое большое препятствие возникло, когда я начал внедрять стандартный API.

Я решил использовать IEX Cloud API после того, как увидел, что он рекомендован в документе с часто задаваемыми вопросами об оценке.

Однако я не осознавал ограничений, которые имел API: он разрешает только один запрос каждые 10 миллисекунд.

В конечном итоге это стало проблемой, когда я хотел сделать несколько запросов одновременно, чтобы сохранить информацию, которую я визуализирую в реальном времени.

Каждый раз, когда я пытался просмотреть массив акций, принадлежащих моему пользователю, приложение вылетало из строя, поскольку я делал слишком много запросов одновременно.

Я начал настраивать свой бэкэнд и попытался получить оттуда данные.

Хотя это и решило проблему, в моем приложении возникла очень заметная задержка.

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

Но подходил крайний срок для отправки моего приложения, и я не мог вовремя найти решение.

В конце концов я отправил свое приложение, несмотря на серьезный недостаток в нем.

Но затем я обнаружил еще одну проблему: мое развертывание не удалось!

Я не понимал, почему это не работает, до следующего дня, когда я получил электронное письмо от рекрутера, который прислал мне оценку.

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

Оказалось, что, пытаясь защитить свой код, используя .gitignore для сокрытия секретных ключей, я не позволял другим правильно разветвлять и использовать мой код.

Потом меня осенило! Возможно, это тоже проблема моего развертывания!

Я перестал скрывать свои секретные ключи и повторно развернул серверную часть.

Вуаля!

Мое развертывание начало работать!

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

Тем не менее, было хорошо иметь это решение для использования в будущем.

Я добавил новое решение в свои репозитории и разместил его на своем GitHub, а также повторно развернул свое приложение, используя новое решение.

Это не идеально. Но, на мой взгляд, однозначно чище.

Проект

Как упоминалось ранее, мое веб-приложение Stock Portfolio использует Ruby on Rails для внутреннего интерфейса и React JS для внешнего интерфейса.

Redux используется для управления состоянием.

React Router используется для навигации.

Для CSS я использовал семантический интерфейс.

В моем бэкэнде было всего две модели: User и Transaction.

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

Отношения заключались в следующем: у пользователя может быть несколько транзакций, и каждая транзакция может принадлежать только одному пользователю.

Я думал о возможном использовании сериализаторов, но я отказался от этого, поскольку в любом случае не было много информации, которая мне была нужна, и я мог контролировать, какую информацию я визуализирую в контроллерах.

Я зашифровал свои пароли с помощью Bcrypt и использовал токены JWT для управления авторизацией.

За реализацию JWT Token я должен поблагодарить моего бывшего инструктора буткемпа Рейнальда Рейносо и его блог. Это было большим подспорьем!

Ссылка на блог находится здесь: https://levelup.gitconnected.com/jwt-auth-in-a-react-rails-app-8a7e6ba1ac0

Я следовал соглашениям RESTful для своих маршрутов, но, поскольку я использовал только определенные функции, я добавил к ним ограничения.

Пользователей можно только просматривать, создавать или обновлять.

Сделки можно только создавать.

Это не полный CRUD (Create-Read-Update-Delete), но его достаточно для реализации требуемых мне пользовательских историй. Также есть возможности для расширения в будущем за счет других функций CRUD.

В моем интерфейсе я разделил свои компоненты на три разные папки: Components, Containers и pathRenderings.

Компонент - это простой компонент (например, заготовка или форма).

Контейнер содержит несколько компонентов (например, список запасов).

А pathRendering - это просто страница, на которую пользователь может перейти, используя разные адреса. Он может состоять из нескольких контейнеров и / или компонентов.

Я также создал файл для своих преобразователей (для Redux) и папку для моих редукторов (также для Redux).

Оглядываясь назад, я, вероятно, не нуждаюсь в дополнительной папке для моих редукторов, так как в любом случае я сохранил их все в одном файле.

Для получения информации об акциях я создал учетную запись в IEX Cloud и использовал их песочницу для неограниченного количества фиктивных данных.

Чтобы решить проблему с множественными запросами к API, я создал функцию асинхронной выборки. Это было самой большой проблемой для меня, и мои однокурсники помогли мне заставить это работать.

Хотя у меня не было времени для отправки, теперь у меня есть код для использования в будущем.

Чтобы иметь и бэкэнд, и интерфейс в одном репозитории, я использовал подмодули git.

Вывод

Мое приложение далеко не идеально. CSS минимален, и бывают случаи, когда в моем приложении все еще возникают ошибки.

Иногда вылетал без причины (думаю, была проблема с перегрузкой… 😅).

Это было определенно стрессом, но для меня это было весело и познавательно.

Этот проект помог мне заново освоить создание приложений.

Я развернул приложение на Heroku: https://stock-port.herokuapp.com/

Подробнее об этом приложении можно найти в README репозитория проекта GitHub.