Смена профессии и мой первый опыт в IT: путешествие в мир фронтенда с Tauri, REST и Fetch API

Привет, Хабр! Меня зовут Гармаев Энхэ. В течение длительного времени я работал в сфере розничной торговли, занимая должность менеджера. Это было увлекательное и насыщенное время, но, как говорится, в жизни всегда есть место переменам и новым вызовам. Сегодня я хочу поделиться с вами своим путешествием, решением о смене профессии и первом опыте работы в IT компании.

0878bbca2fda38d5d014713c2915e218.jpga3decff29340b76d22fd30199f1d2cc6.jpeg

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

c5ec7d32a95a2a63a71fabdc08a06684.jpg

Мое погружение в захватывающий мир веб-разработки началось с изучения основных технологий, таких как HTML, CSS и JavaScript. Однако, я понял, что для того, чтобы добиться качественного прорыва в этой области, мне необходимо было найти профессиональные курсы, которые помогли бы мне углубленно изучить материал и сделать уверенный шаг в сферу IT. И так, начался мой настойчивый поиск подходящих источников обучения.

730699558351cae719994fd9e3a19162.svg

Существовали такие курсы, как Stepik, Xeкслет и Яндекс Практикум — именно они считались наивысшим стандартом обучения по программированию в то время, хотя часть из них была платной. Однако, в то время мои финансовые возможности не позволяли мне оплатить платные курсы, и я решил обратиться к бесплатным альтернативам с качественной программой. И вот тогда я наткнулся на курсы The Rolling Scopes School — это было именно то, что я искал. Это бесплатное образовательное комьюнити, где предоставляется обучение на должность Junior Frontend Developer. После того, как я изучил программу обучения, я понял, что это именно то, чего я ждал.

754697f49ede72610fc8241da515d89e.jpg

Что меня по-настоящему впечатлило, так это философия школы «Teach It Forward». Здесь ценится не только получение знаний, но и их передача. Когда ты достигаешь определенного уровня в своем обучении, тебе предлагается поделиться своими знаниями с другими. Этот подход не только мотивирует учиться еще усерднее, но и создает настоящее сообщество единомышленников. И все это происходит в условиях полностью удаленного обучения, где около 80% материала даются нам, а оставшиеся 20% мы должны освоить сами, всё как в известном принципе Парето.

Когда я обнаружил подходящие курсы, меня поразило, насколько большое сообщество единомышленников собралось здесь, где можно было обсудить свои трудности и поделиться новыми идеями. После полугода обучения я с упорством начал стремиться к коммерческому опыту, тщательно изучая вакансии на платформах типа hh.ru, habr вакансии и даже в социальных сетях. Именно, тогда в телеграм-группе фронтенд-разработчиков я встретил единомышленника, а также наставника, который уже много лет успешно работал в этой области.

2d6f5f6b91ed3f7bbce13c5f05ef3522.jpg

После близкого общения и обсуждения различных аспектов разработки, я открылся и поделился своей потребностью в коммерческом опыте. Хотя курсы были важны, я понял, что работа в реальном проекте принесет мне совершенно новый уровень понимания и увлечения. После внимательного рассмотрения моих целей и достижений на курсах, мне была предложена работа в Norcivilian Labs. Это был для меня знаковый момент, и я не мог не испытывать радости. Я знал, что это только начало, и впереди меня ждут новые вызовы и возможности, но именно в этом и заключается вся прелесть.

На курсах я освоил три столпа фронтенд-разработки это HTML, CSS, JavaScript, далее я углубился в их инструменты такие, как Sass для более удобного и эффективного написания CSS, а также изучил фреймворки, такие как React, которые предоставляют широкие возможности для создания интерактивных пользовательских интерфейсов. Также я погрузился в мир JavaScript библиотек, для упрощения работы с DOM и обработки событий. С каждым из этих инструментов я понимал, что фронтенд-разработка — это то, чем я хочу заниматься. Именно, благодаря, этому интересу и стремлению я теперь нахожусь здесь, в новой роли фронтенд-инженера в Norcivilian Labs. Давайте теперь погрузимся в мой первый опыт работы в IT-компании.

Осенью я присоединился к Norcivilian Labs в качестве фронтенд-инженера и занялся созданием мобильного приложения для Retina.AI.

305b1737c3340232a96ae954a571da1d.png

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

ccfd0bfa8ad4d2a602c5c9b6a10c5ad9.png

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

52d9d62f83498d29c1578600d04018d9.png

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

Учитывая эту перспективу, мы взялись за разработку. Ранее у клиента была альфа-версия для Android на Kotlin и прототип для iOS на Swift, и мы предложили создать одно приложение, которое управляло бы ими всеми, используя потрясающий Tauri. Платформа Tauri еще не стабильна, но мы в NL любим жить на переднем крае и в прошлом году перешли с Electron на Tauri.

0c9e1fbdb3645cf47f0a021b79f8143b.png

Разделение ответственности в Tauri довольно хорошее, поэтому я знал, что могу написать интерфейсную часть, а ребята из Rust закончат работу позже. Документы Tauri рекомендовали vite+preact, и нам понравилась документация Preact — их информация о гиперскрипте.

e9d356af886d86f626fcd5c533b4bf49.pngce1615fb4c15cef96e924bfab49843ea.png

У нас был дизайн в PenPot, который клиент предоставил нам из предыдущего прототипа Android. Поэтому я настроил маршрутизатор в соответствии с путем пользователя — мы используем preact-router, и это очень красиво и просто. В нашем дизайне были экран входа в систему и экран регистрации. Я реализовал HTML-формы для обоих экранов. Экран профиля представлял собой список меток и информации о пользователе. Я позаботился о том, чтобы на каждом экране использовались семантические элементы для соответствия стандартам HTML. Как и в других проектах NL, я хранил каждый JSX-компонент в отдельной папке с именем Snake_case. Клиент отправил использовать REST API с заголовками запросов для каждой конечной точки. Раньше я использовал REST только один раз, поэтому снова изучил, что такое REST и как он работает. В JavaScript мы используем Fetch API для взаимодействия с REST, а клиент для всего использует POST-запросы, поэтому я написал код для выборки. Запрос на выборку для экрана профиля имел дюжину полей, и мы отображали поля в переменных useState. Я создал состояние переменной для токена на уровне корневого компонента приложения (app.jsx) с помощью useState. Затем я передал функцию setToken компоненту экрана входа в систему. Экран входа получил токен и передал его значение через состояние другим компонентам (Меню, Профиль, Обнаружение, Регистрация), которые используют токен. Экран регистрации требовал списка возможных профессий и стран. Т.е. использовал JavaScript-массив со списком возможных значений согласно документации. Я использовал метод map () для генерации тегов опций для каждой страны из массива и отображения их в виде списка опций в полях ввода на экране регистрации.

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

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

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

P.S.

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

© Habrahabr.ru