Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • AlexKud AlexKud 26 постов
  • StariiZoldatt StariiZoldatt 3 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Front-end

669 постов сначала свежее
90
jaxel87
1 год назад
IT-юмор

Ответ на пост «Фронтендер Гриша»⁠⁠6

Эм. Это собеседование! В голове у соискателя появляется простой вопрос: "А зачем на собесе это спрашивать?" Нет ни одной причины такое спрашивать даже у джуна. Да даже блин у школьника.

В этом как бы и суть технических собесов. Задаём простой вопрос и даём человеку раскрыть тему в меру своих знаний.

Устанавливает nvm, через него ставит node.js, потом через yarn ставит vite, создаёт новый проект на React + TypeScript...

Показал что знает ноду, nvm, реакт. Пишет не на js, а на TypeScript - значит понимает что это и зачем. Кучу инфы дал на простом вопросе.

И что ему в ответ? Надо <button>Кнопка</button>? Если собеседующий задаёт такой вопрос и хочет получить на него ответ html <button>Кнопка</button> - он идиот. Надо заканчивать собеседование и делать оттуда ноги.

PS: Идея поста понятна, а вот ситуация с собесом - в корне не верный для неё контекст)

I`m CTO bitch IT юмор IT Разработка Скриншот Frontend Собеседование Программист Программирование Кнопка Задача Веб-разработка Ответ на пост Текст
56
129
astrobeglec
1 год назад

Ответ на пост «Фронтендер Гриша»⁠⁠6

Сделал пост с этой же картинкой, т.к. не знал что ТС есть и на Пикабу.

@imctobitch, прошу прощения больше не повториться.

К картинке я добавил текст "И не только Гриша, И не только фронтэнд... И даже не только программисты..." потому что выдалось 5 минут на одну очень важную тему.

Причины, почему в 99,9 % случаев всё происходит через жопу.

Для почти всех разработчиков будет открытием, что помимо классической классификации софта есть ещё и производственно-эксплуатационная. Есть 4 крайне важные градации:

Штат специалистов

  1. Крупная команда (> 7 человек)

  2. Обычная команда ( 2 - 7 человек)

  3. Один исполнитель

Масштабная:

  1. Крупный проект

  2. Мелкий проект

  3. Разовая задача

Нагрузочная:

  1. Очень много пользователей одновременно (> 10 тысяч)

  2. Нормальная нагрузка (100 - 10к)

  3. Незначительная нагрузка. (< 100)

Периодичность:

  1. Постоянная работа

  2. Работа периодами (например, в рабочее время)

  3. Разовая задача

Так вот - все "как надо" в ИТ сфере обычно подразумевают крупную команду, крупный проект, нормальную нагрузку и постоянную работу.

При этих вводных все эти "чистые коды" работают и иногда даже хорошо...

!!! НО ТОЛЬКО В ЭТИХ УСЛОВИЯХ !!! Во всех остальных условиях следование этим принципам является идиотизмом. Правда этот идиотизм настолько врос в профессию, что многими он воспринимается как должное и естественное.

Пятница, писать лень, так что 3 примера:

Разовая задача. Эта задача которая по тем или иным причинам либо не возникнет снова, или ТЗ будет изменено настолько, что проще написать снова. Тут нужно говнокодить по страшному.

Пример - бывает, что госорганы для своих каких-то целей запрашивают данные. Эти данные могут быть довольно сложно структурированы в БД т.е. руками и простым запросом не решить. Такие запросы НИКОГДА не повторяются. Написали код, выполнили и забыли. Все проектирования классов, тесты и прочая шняга - это время потраченное абсолютно впустую.

Крупный хайлоад. Вы должны писать код так, чтобы он работал быстро. В коде 100 if подряд? если это конкретно здесь работает быстрее - делайте именно так. Потому что от качества работы приложения напрямую зависит количество серверов на котором это всё будет работать. Серверов стоимость которых зачастую примерно равна квартире в каком-нибудь региональном центре.

Менеджеры "от бизнеса" эти нюансы очень остро чувствуют. И 90 % неприязни к ИТ как раз и заключается в том, что у них есть понимание, что эта задача должна стоить Х и делаться за У времени, а по факту бюджеты и сроки перекрываются в разы. И в качестве ответа на вопрос "какого хера?" им рассказывают про SOLID, Agile и далее по списку.

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

Просто потому что конкретно этот джун понимает что не все задачи нужно делать "по канону".

Разработчики часто не видят ситуацию "в целом". У бизнеса совершенно другие ценности. Бизнесу нужно прежде всего решать свои задачи. И решать их экономически целесообразно.

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

Могу проиллюстрировать простым примером. Есть "джуновская" булка хлеба, которая "здесь и сейчас" стоит 20 рублей. Купил-съел. Есть "мидловская" хлебопечка, которая делает хлеб получше, но дороже и 4 часа. А есть хлебзавод "сеньора", который хер знает когда построят, стоит дохера и может давать продукт только тоннами.

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

Если компания хочет разок выебнуться, то хлебопечка рулит.

Если нужно просто пожрать, то просто покупается булка хлеба.

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

И менеджер понимает, что ему продают булку хлеба по цене хлебзавода. И самая главная проблема для него в том, что ВСЕ ДОСТУПНЫЕ КАНДИДАТЫ продают именно это. За специалистов, которые могут сопоставлять задачи и способы их решения грамотные HR войны ведут. Потому что найти 50 сеньоров проще, чем 1 такого.

И самое главное - это не уникальная для ИТ ситуация. В других отраслях всё абсолютно то же самое.

Показать полностью
[моё] I`m CTO bitch IT юмор IT Разработка Скриншот Frontend Собеседование Программист Программирование Кнопка Задача Веб-разработка Мат Ответ на пост Текст
44
5
shaltier
shaltier
1 год назад
Web-технологии
Серия [DFL] Disgusting Frontend Layer

[Vue Dev] REST in peace Shaltier NullFallen⁠⁠

На кого рассчитана статья?

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

Стэк: vue3, nuxt3

P.S. АХТУНГ! Много букаф, смысла null, потому я есть Shaltier Nullfallen! Статья написана ВЕЛИКИМ в "кавычках" грамотеем, если вы любите высококачественный контент, скорее всего вам не стоит читать эту статью. Все названия и имена были заменены, любое совпадение является чистой случайностью.

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

Хромые клячи

Конец месяца, собеседование в компанию "Стрекозлы в АйТи" прошло весьма неплохо, я напортачил в предыдущей компании, создав образ посредственного падавана. Фронтендер из предыдущей фирмы "BODUNOV" видимо недавно открыл для себя vue и nuxt. Структура проекта была специфичной (это пример):

[Vue Dev] REST in peace Shaltier NullFallen Frontend, Веб-разработка, Боль, Печаль, Pikaweb, Видео, YouTube, Длиннопост

Я покажу тебе, как глубока кроличья нора

Примечание: Мне нравится структура из angular и это не мешает использовать похожий стиль в компонентах. Используйте основную структуру из доков nuxt. Старайтесь не допускать больше трех уровней.

[Vue Dev] REST in peace Shaltier NullFallen Frontend, Веб-разработка, Боль, Печаль, Pikaweb, Видео, YouTube, Длиннопост

Папка partials с огромной вложенностью передавала привет от мистера webpack, а точнее плагина по импорту html.

Разработчик сделал 40% проекта и метался от одного UI kit к другому, а я слушал и крутил барабан револьвера. Сделав одну страницу, меня попросили удалиться, попытка разбить вёрстку на компоненты и избавился от ненужных дубликатов html кода смутила разраба фирмы BODUNOV. И тут меня ждала новая не менее амбициозная компания, с 10-ти летним стажем на рынке.

На собеседование в "Стрекозлы в АйТи" я убедился у интервьюера, в отсутствие глуповатого маркетингового приёма, сверстать статический сайт и показать клиенту, сказав: 'Всё готово шеф, дело осталось за малым'. Люди серьёзные, работают с продукцией 1с и считаются в ней экспертами.

[Vue Dev] REST in peace Shaltier NullFallen Frontend, Веб-разработка, Боль, Печаль, Pikaweb, Видео, YouTube, Длиннопост

Битрикс есть, а отчеты пиши в excell. И не забывай щелкать таймер и писать отчёт в конце дня. Джира? Какая Джира? Продукты 1С топ! Мы пробовали только Яндекс и это был отстой.

Ну хоть хорошо что excell не используется как база данных для бэка. А вместо word не используют markdown. Вот тупые, кто `markdown` придумал.

После ознакомительного диалога ПМ-а по работе со Шмитрикс, я не понял как они ведут разработку. На канбан доске вместо привычных столбцов было несколько столбиков связанных со временем:

// Без срока // Запланированные // Сделаю сегодня // Сделаю на недели //

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

А нееее... кроме менеджера, разработчиков и дизайнера больше никого нету. То есть нет тестировщиков, контент-менеджеров, seo, devops и т.д.

Менеджер сказал (не дословно, почти): "Всех кого-ты перечислил сомнительные личности и результат их работы не ясен. У нас было много SEO специалистов, целых 3, ой, 2 человека. Ну руководство не поняло их трудов и уволило."

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

Three Days Later...

Прошло 3 дня, а я ничего не сделал. Нет, вина не в моём титуле Капитан Улитка, просто задач нет! Как объяснил менеджер, он болеет, неделя очень тяжелая, задачу выдать не могу. (На самом деле было ещё 2 менеджера которые могли его подменить, но заставлять работать больного сотрудника веселее)

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

Первое задание. Разместить статический сайт выполненный начинающим верстальщиком Рыжий. Видимо только вчера прошел курс ХалалАкадемии и решил проверить новоиспеченный скил. Где-то пагинация была сделана картинкой, где-то отсутствовали блоки, где-то хромал адаптив.

[Vue Dev] REST in peace Shaltier NullFallen Frontend, Веб-разработка, Боль, Печаль, Pikaweb, Видео, YouTube, Длиннопост

Пишите а вам попадались сайты где не было верстки, только backgroundImage?

Мне дали доступ по ssh и попросили поставить сайт с сертификатом на nginx. В принципе окей, но в вакансии про эти скилы не слова.

One Day Later...

Разговор с дизом и ПМ. Дизайн находится под слоём черновик, каждый макет не имеет статуса готового к разработке.

Примечание: кнопка фигмы Ready For Dev, некоторые дизайнеры делают свой компонент для статусов макета или используют цветовые зоны, т.к. макет может иметь много статусов (прототип / в процессе доработки / на утверждение / готов)

Даже без матёрого глаза можно приметить множество огрехов в дизайне. Отсутствие модалок, элементы не интерактивные, нет статусов элементов форм. В некоторых местах много воздуха, неравномерные отступы... В общем полный комплект ошибок ждуна. Дизайнер пытается скрыть смущение, намекая на сроки, мол времени на UX и полировку UI не было. Удивительный факт, разработчикам всегда представляют диза так: "А это наш UI/UX дизайнер". Вот только времени на UX исследования у него нет.

И теперь работа? Нет. Доступа к гитлабу нет, задач в шмитриксе нет.

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

А инфы по проекту не было / LOL / Редизайн предполагалось делать на основе нового диза и поглядывая на старый сайт. Только новый дизайн сильно отличался. Не было к примеру локализации (был выбор региона) и ПМ сказал твёрдо её НЕ БУДЕТ! Вот тут и была первая подстава.

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

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

Благо старый сайт не имел минификации и обфускации.

Примечание: После компиляции кода, файл со скриптом крайне тяжело прочитать. Начинающие разработчики умеют кидать скрипты в конец документа, чтобы не мешать прорисовке странице, на этом их знания исчерпываются. Раньше мы прописывали чанки в webpack ручками, теперь с vite многие разрабы не знают про это.

Ладно с дизайном всё ясно, ну мне нужно делать динамический сайт похожий по типу на интернет магазин, где взять бэкенд? Старый сайт был выполнен в php шаблонизаторе и имел мобильное приложение (отличается по функционалу от сайта), теперь предстояло сделать его на nuxt, а значит старое api не подходило.

Угадайте кто должен был придумать дизайн API? Бэкенд! Не угадали. Конечно же фронтенд (по факту vue SSR это уже fullstack)

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

Мне позвонил специалист по отделу кадров, спрашивает как дела и мол я буду звонить тебе каждый месяц (это был последний звонок). А я такой: "not bad, но знаешь, тут ..."

- А покажи что ты сделал.

Я отправляю ему ссылку на сайт.

- Скажи, то что сделал Рыжий, тебе как-то помогло?

- Как я говорил на собесе, всю эту вёрстку все равно нужно переделывать, к тому же там было много косяков, вёрстка была абсолютная не валидна по w3c. Я начал с начала.

- Ну ты же понимаешь я не могу показать это?

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

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

Менеджер посмотрел на меня как на шарлатана. Почему кадровик ведет переговоры по проекту с клиентом? А может он, вовсе и не кадровик?

[Vue Dev] REST in peace Shaltier NullFallen Frontend, Веб-разработка, Боль, Печаль, Pikaweb, Видео, YouTube, Длиннопост

Если это была свежая компания из 5 человек, я бы понял. Но персонала было не менее 20 чел. А компании уже 10 лет. Наверное за это время можно было собрать базовую комплектацию.

Два месяца спустя или 44 раб дня

Бэкендер выходит из долгожданного отпуска...

4-5 остальных видимо были очень заняты. Я лично работал с двумя, но официально в штате их должно быть больше. Да и как-то на созвоне созвали толпу, которой объяснили как сделать 1 эндпойнт с получением данных из firebase. Результат: я поднял nuxt и сделал сам. Ну что сказать команда профессионалов, умеют убеждать.

Ах, да... Бэкенд выходит из отпуска и заходит в шмитрикс. Бэкендер плачет ПМ: "Там слишком много! Апи уже почти готово, там всё есть"

Конечно же там много чего не было, апи первой версии сделано не по REST, которому далеко до стандартов JSON:API.

Swagger-а нету, есть postman, апи которое написано ручками (тока шайтаны пишут доки в аннотациях и используют модуль автодокументации)

Примечание: Незнаю как в Yii, но в Symfony генерировать коллекции с готовыми Rest Api эндпоинтами милое дело. По идее мы один раз заморачиваемся пишем ядро, а далее используем от проекта к проекту. Документацию легко можно импортировать в postman. Если у вас будет фронтенд SPA/SSR в виде отдельного приложения, задумайтесь, а нужно ли его писать на php? Бэкенд на nodejs может сэкономить время. Низкой порог вхождения !== выгода. Nodejs может быть serverless, а php это танцы с бубном в плане деплоя. А там типизация от бэка почти готовая

Меня попросили переделать для бэка документ с api запросами и как вы думаете он приступил к правкам сразу? Конечно же нет. Рабочий день начинался в 9 часов, точнее так было у удалёнщиков, офисные планктоны почти всегда приезжали на работу после обеда. Оказывается часть сотрудников работают во вторую смену, а бэкендер на протяжения дня занимается бумажками от шефа, сам шеф со спокойной душой уезжал в командировку. По более сложному проекту с картами, мне приходилось ждать фидбека от шефа компании каждый вечер, а днём по указаниям из аудиосообщения я пилил приложение.

Конечно для написания ТЗ необходимо время, а наболтать по телефону сообщение это дело не сложное. Ну и тупые эти разработчики, носятся со своими ТЗ.

Хороший мальчик Бобби

Не курит, не пьёт. Деньги в копилку кладёт. Большая часть рынка разработки это ждуняшки ожидающие маны небесной. В один прекрасный день армию ждунов без тимлида, мидлов или сеньоров, только ждуны, только харкор. Банда маркетологов оказывается чаще всего во главе малого бизнеса (будем честны в крупных компаниях, тоже не всегда руководители инженеры), это приводит к печальным последствиям для IT рынка. Сначала нанимают партию разработчиков, через год или два, шеф проходит специальные курсы по бизнесу и открывает новые слова: "B2B" и "B2C". Он смотрит в собственное отражение и видит гениального человека, способного открыть свой телеграм канал и продовать свои собственные курсы. Увольняем 90% разрабов, получаем чистый профит с курсов. \ STONKS /

Судная ночь

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

-- Эту кнопку убрать! Батюшки, я ведь всё ни так! Клиент? Какой клиент! Я так вижу! Сделать по моему! Клиент потом посмотрит и скажет. В смысле, конечно макет утвержден! Видишь дизайнер тока что стрелочки в дизайне дорисовал, а у тебя их нет! А ну быстро отсеките голову этому халопу! Стража! Стража!

Титры

Нет повести печальней, чем история о Shaltier и потерянном времени. Почему никто не плачет? Не забываем купить мои курсы "Как открыть IT стартап для ...". Продолжение пишем в комменты.

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

Показать полностью 5 1
[моё] Frontend Веб-разработка Боль Печаль Pikaweb Видео YouTube Длиннопост
2
3606
imctobitch
imctobitch
1 год назад
IT-юмор
Серия I'm CTO, bitch

Фронтендер Гриша⁠⁠6

Фронтендер Гриша I`m CTO bitch, IT юмор, IT, Разработка, Скриншот, Frontend, Собеседование, Программист, Программирование, Кнопка, Задача, Веб-разработка
Показать полностью 1
[моё] I`m CTO bitch IT юмор IT Разработка Скриншот Frontend Собеседование Программист Программирование Кнопка Задача Веб-разработка
647
15
MarkParker.5
MarkParker.5
1 год назад
Лига программистов
Серия Программирование и Туториалы

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал)⁠⁠

Предыдущие статьи:

  • Как мы построили ИИ-стартап на хакатоне выходного дня в Германии

  • House, MD - AI Diagnostician in Your Phone: Passing the Startup Torch

В этой статье мы рассмотрим все тонкости создания Proof of Concept (PoC) мобильного приложения, построенного с помощью фреймворка SwiftUI и бэкенда с использованием FastAPI. Дополнительно я продемонстрирую эффективные архитектурные паттерны для SwiftUI-приложений, в частности MVVMP в сочетании с принципами SOLID и Dependency Injection (DI). Для android код можно легко перевести на Kotlin с Jetpack Compose.

Зачем нам нужен бэкенд

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

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

  1. Безопасность: Бэкэнд помогает защитить конфиденциальные данные и токены аутентификации пользователей от атак типа MITM (Man-in-the-Middle). Он выступает в качестве защищенного шлюза между пользовательским устройством и базой данных или внешними службами, обеспечивая шифрование и аутентификацию всех данных.

  2. Контроль над использованием сервисов: Управляя API и взаимодействием с пользователями через бэкэнд, вы можете отслеживать и контролировать использование приложения. Это включает в себя дросселирование для управления нагрузкой, предотвращение злоупотреблений и обеспечение эффективного использования ресурсов.

  3. Интеграция с базой данных: Бэкэнд обеспечивает бесшовную интеграцию с базами данных, позволяя динамически хранить, извлекать и обновлять данные в режиме реального времени. Это важно для приложений, которые требуют учетных записей пользователей, хранят их предпочтения или нуждаются в быстром и безопасном получении больших объемов данных.

  4. Модели подписки и Freemium: Реализация услуг по подписке или модели freemium требует наличия бэкенда для выставления счетов, отслеживания использования и управления уровнями пользователей. Бэкэнд может безопасно обрабатывать платежи и подписки, обеспечивая бесперебойную работу пользователей и соблюдая требования по защите данных.

  5. Масштабируемость и обслуживание: Бэкэнд позволяет более эффективно масштабировать приложение. Логику на стороне сервера можно обновлять без необходимости передавать обновления клиенту, что упрощает обслуживание и ускоряет внедрение новых функций.

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

Объяснение технического стека

  • SwiftUI: Лучший вариант для нативных приложений для iOS после выхода UIKit. Он декларативен и упорядочен, а XCode является незаменимым редактором благодаря эпл. Для android код можно легко перевести на Kotlin с помощью Jetpack Compose.

  • FastAPI: Выбран для бэкенда за его скорость, минимальное количество шаблонов и декларативность, редактируется с помощью превосходного Zed.dev.

  • ChatGPT API: Используется в качестве большой языковой модели (LLM); выбор может меняться в зависимости от необходимости кастомизации.

  • Ngrok: Реализует туннелирование с помощью простой команды CLI для выхода локального сервера в интернет.

Создание приложения для iOS

Теория: Архитектурные паттерны

  1. MVVMP (Model View ViewModel Presenter):

  • Model: Представляет собой структуры данных, используемые в приложении, такие как Question, Answer, Questionary и FilledQuestionary. Эти модели просты и содержат только данные, следуя принципу KISS.

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

  • ViewModel: В SwiftUI ViewModel представлена объектом ObservableObject, который служит моделью наблюдения за изменяемыми данными. Здесь нет методов и логики.

  • Presenter: Presenter управляет всей логикой, связанной с модулем (экраном или представлением), но не бизнес-логикой. Он взаимодействует с доменным слоем для выполнения операций бизнес-логики, таких как взаимодействие с API или управление сохранением данных.

  • Domain Layer: Этот слой содержит бизнес-логику приложения и взаимодействует с внешними ресурсами, такими как базы данных, API или другие сервисы. Он состоит из нескольких компонентов, таких как сервисы, провайдеры, менеджеры, репозитории, мапперы, фабрики и т. д.

  • На самом деле, MP в MVVMP является инициалами Марка Паркера, а полная форма — «Model View ViewModel by Mark Parker».

  1. Принципы СОЛИД:

    • Принцип единой ответственности: У каждого класса должна быть только одна причина для изменений.

    • Принцип открытость-закрытость: Компоненты должны быть открыты для расширения, но закрыты для модификации.

    • Принцип замещения Лискова: Объекты суперкласса должны быть заменяемы объектами подклассов.

    • Принцип разделения интерфейсов: Ни один клиент не должен быть вынужден зависеть от интерфейсов, которые он не использует.

    • Принцип инверсии зависимостей: Зависимость от абстракций, а не от конкретики, чему способствует DI.

  2. Инъекция зависимостей (DI): Реализация с использованием DI-контейнера для соблюдения принципа инверсии зависимостей.

Разработка бэкенда

Код бэкенда довольно прост. Эндпоинты (main.py):

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

"onboarding" предоставляет список вопросов анамнеза, которые необходимо заполнить при первом запуске приложения. Ответы будут сохранены на устройстве и использованы для персонализированной диагностики в будущем. "doctor" — основной эндпоинт: он генерирует вопросы на основе предыдущих ответов и карты пользователя, либо возвращает результат диагностики.

Модели:

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Промпты:

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Модуль промптов использует GPT-3.5 от OpenAI для генерации ответов на основе пользовательского ввода, анамнеза и заполненных анкет. Он возвращает пользователю соответствующие вопросы и советы по диагностике здоровья. Как видите, ничего сложного здесь нет. Код элементарен, а промпты - просто набор четких инструкций для LLM.

Настройте окружение и запустите сервер с помощью fastapi dev main.py.

Подробности:

  • fastapi.tiangolo.com/tutorial/first-steps

  • pypi.org/project/openai/

Открытие доступа к локальному хосту через Интернет

  1. Зарегистрируйтесь на сайте ngrok.com и получите токен доступа.

  2. Установите ngrok с сайта ngrok.com/download.

  3. Выполните команду ngrok config add-authtoken <TOKEN>.

  4. Запустите с помощью команды ngrok http http://localhost:8080 (при необходимости измените порт).

Подробные инструкции по настройке можно найти в документации ngrok.

Кодим приложение

Я не буду показывать здесь весь исходный код, для этого есть GitHub. Найти его можно по адресу: HouseMDAI iOS App. Вместо этого я остановлюсь только на важных (IMO) моментах.

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

Первым делом нам нужны модели, и они довольно просты (принцип KISS).

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Теперь давайте сделаем онбординг. Продолжаем следовать KISS и SRP (Single Responsibility Principle), никакой бизнес-логики в представлениях, только UI. В данном случае - только список вопросов с прокруткой. Все данные и логика делегированы презентеру. Единственное, что здесь интересно, это небольшой вспомогательный метод bindingForQuestion, который, вероятно, должен быть в презентере, но сейчас это не имеет значения.

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Вы будете удивлены, но в презентере также нет никакой бизнес-логики!

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Все по-прежнему simple, stupid и имеет только одну ответственность. Presenter должен содержать только логику своего представления. Бизнес-логика уровня приложения находится вне его юрисдикции, поэтому презентер просто делегирует ее наверх по стэку вызова.

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

При использовании паттерна Dependency Injection зависимости предоставляются извне класса, а не инстанцируются внутри него. Это способствует развязке и позволяет упростить поддержку и тестирование кода.

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

Если вы рассматриваете возможность использования протоколов в представлениях SwiftUI, необходимо помнить об одном важном моменте. Поскольку View в SwiftUI - это структура, она требует явного указания типов своих свойств. Это означает, что вам придется сделать её дженериком и пробрасывать тип через весь стек вызовов, что приведет к появлению большого количества шаблонного кода.


Однако существует альтернативный подход, предлагаемый MarkParker5/AnyObservableObject.
Эта библиотека работает аналогично родным оберткам свойств SwiftUI, но убирает проверку типа во время компиляции в пользу проверки во время рантайма. Хотя такой подход может внести некоторые риски, их легко снизить, написав элементарные xcode тесты, которые просто инициализируют представления так же, как вы делаете это во время рантайма.

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

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

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

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

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

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Это приложение SwiftUI устанавливает свое начальное состояние с помощью оберток полей StateObject. Оно инициализирует OnboardingProvider, OnboardingPresenter и HomePresenter в своем методе init. Провайдер OnboardingProvider отвечает за управление данными, связанными с онбордингом, а OnboardingPresenter управляет логикой представления онбординга. HomePresenter управляет главным домашним представлением.

В теле сцены приложения проверяется, нужна ли регистрация на сайте. Если да, то она представляет OnboardingView с OnboardingPresenter. В противном случае она представляет TabView, содержащий HomeView с HomePresenter и, если доступно, ProfileView.

Теперь настало время для домашнего экрана. Логика проста:

  1. Получаем сообщение от пользователя

  2. Используя сообщение, запрашиваем список вопросов из бэкенда

  3. Показываем вопросы по одному, используя встроенную push-навигацию.

  4. Добавляем ответы к запросу и повторяем 2-4, пока бэкенд-доктор не вернет окончательный результат

  5. Показываем финальный результат

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Похоже, я пропустил 4-й пункт... или нет? Поскольку представление не может содержать никакой логики, эту часть выполняет его презентер.

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Он управляет вводом сообщения пользователем и обновляет путь навигации на основе ответов от бэкенда.

При отправке сообщения метод onSend() отправляет его на бэкенд с помощью DoctorProvider и ожидает ответа. В зависимости от типа ответа он обновляет навигационный путь, отображая либо набор вопросов, либо окончательный ответ.

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

Здесь есть небольшое дублирование кода между методами onSend() и onQuestionaryFilled(), которое можно было бы отрефакторизовать в один метод для обработки обоих случаев. Однако оставим это как упражнение для дальнейшей доработки.

Модуль Questionary (View+Presenter) почти является копией Onboarding и просто делегирует логику до HomePresenter, поэтому я не вижу необходимости показывать код. Опять же, для этого есть github.

Последнее, что я хочу показать, это две реализации DoctorProvider, единственной обязанностью которых является вызов API и возврат DoctorResponse.

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Первая использует наш бэкенд:

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Вторая вызывает openai api напрямую (подход backendless) и является практически копией модуля подсказок из бэкенда:

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Обе реализации легко взаимозаменяются благодаря инъекции зависимостей:

Делаем нативное мобильное приложение с ИИ и бэкендом (Туториал) Программирование, Разработка, iOS, Искусственный интеллект, Туториал, Открытый код, Чистый код, Архитектура по, Frontend, Backend, Open Source, Длиннопост

Другой пример

Посмотреть пример этой архитектуры в реальном приложении можно в моем проекте TwiTreads на github.com/MarkParker5/TwiTreads

Что делать дальше

  • Интегрируйте аутентификацию и базу данных пользователей в бэкенд. Можете использовать официальный шаблон FastAPI из FastAPI Project Generation.

  • Реализуйте логику аутентификации в приложении.

  • Сосредоточьтесь на улучшении дизайна приложения, чтобы повысить удобство работы с ним. Давайте создавать красивые приложения!

Заключение

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

О других интересных проектах периодически пишу в телеграм.

Показать полностью 14
[моё] Программирование Разработка iOS Искусственный интеллект Туториал Открытый код Чистый код Архитектура по Frontend Backend Open Source Длиннопост
0
10
PiedPiperInc
1 год назад

Вкат в ИТ глазами фронта⁠⁠

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

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

Я начал свой путь в ИТ в 2018 году, когда сидел эникеем (это я за ИТ не считаю, этим может заниматься практически любой школьник) в своей конторке и наткнулся на видос, где делают сайты с нуля на всяких конструкторах и меня это дико завлекло. Через неделю я уже вовсю фрилансил и клепал за копейки лендинги и прочую муть, но денег было очень мало и тут на помощь пришли какие-то бомже курсы по JavaScript. Я его очень боялся и оттягивал изучение, думал может получиться и так зарабатывать, по итогу - йух. Я их закончил через 2.5 месяца и как-никак овладел заветным JSом. По итогу я сутки напролет верстал макетики и писал свой говно-код, радовался жизни и думал так будет всегда )

Работа 1, она же Галера.

2019 год. Как сейчас помню, шел дождь...Небо затянуто черными тучами, я сидел на балконе и докуривал последнюю сигарету. Я спросил себя, PiedPiper, сколько еще ты будешь это терпеть ? Эти неблагодарные заказчики выпотрошили твою душу и кинули взамен пару копеек, а ты всё сидишь и делаешь для них эти всратые сайты! И тогда я решил пойти на первое собеседование в дружный, мать его, молодой коллектив, где есть газировка, печеньки и кофе...Дойдя до двери офиса я весь промок, гремел гром и дул сильный ветер, я зашел внутрь с ОЧЕНЬ недовольным лицом. Меня сразу же завели в какую-то комнатушку, больше походящую на кладовку для старых бабушкиных вещей. Меня спрашивали про всякую дичь, типа семантических тегов или как отцентровать элемент внутри блока, на этом собеседование закончилось и мне предложили пахать в роли фронта. Очень просто, очень легко и без конкуренции.

ЗП с 25к - 40к

Работа 2, продуктовая разработка.

2020г. Как сейчас помню, шел дождь...Я сидел за покрытым пылью компом и понимал, что галера длинною в год высосала из меня всю душу и всю газировку с печеньками, и кофе. Пора закидывать катану на плечо и продолжать свой путь. Придя уставший домой, я выложил своё резюме на сайте с двумя буквами хэ. Неделя тянулась очень медленно, я ждал помощи от всевышнего или от всенижнего, мне было все равно кто меня вытащит и концу этой проклятой недели мне пришло приглашение на собес. Всё было онлайн, вопросы по React, CSS, HTML довольно простые, уже не вспомню что конкретно было. Очень просто, очень легко и без конкуренции.

ЗП 80к

Работа 3, аутсорс (и галера и нет).

2021г. Как сейчас помню, шел дождь...Нет, я не из Питера. Просидев год за разработкой и поддержкой внутренних продуктов компании, начинает надоедать...Медленные процессы разработки помутняют твой разум словно Грима Червеуст. Отодвинув шторку этого патибаса без колес, я видел как за черной горой онлайн-курсы создают новых фронтендеров и я понимал, что если я останусь тут, то уже никогда не смогу конкурировать с ними. Я закинул свою катану на плечо, попращался со всем составом и пошел искать новый путь. В этот раз удача была не на моей стороне, посмотрев вакансии на сайте с двумя буквами хэ, я ужаснулся. Отклики росли и на тот момент это казалось невероятным, по 150-300 откликов на позицию, но делать было нечего, я принял правила и вступил в игру. Примерно через месяц долгих скитаний с фонариком на лбу, я всё таки попал на собеседование и успешно его прошел, не могу сказать что было просто, было нормально. По итогу, очень непросто, не очень легко и была конкуренция.

ЗП 80к

Работа 4, аутстафф.

Конец 2023г. Как сейчас помню, шел дождь...Было много за это время проделано, все проекты были созданы с нуля и выпущены в продакшн. Работы становилось всё меньше, а работодатель пытался увести меня в другой стек, чего я сильно не хотел...Ну и дальше вы понимаете сами, катана на плечо и вперед. Вот тут ни о какой удаче речи уже не шло, онлайн-курсы за черной-горой создали тысячи воинов, которые готовы биться до последней капли крови со своими фейковыми резюме. Я видел это, я там был, по 1000+ или даже 2000+ откликов на каждую вакансию. Это настоящий колизей. Я искал работу порядка 3х месяцев по итогу нашел конечно, но в голову лезло куча разных мыслей вплоть до свапа в 1С. Постоянные отказы и отписки, хотя по вакансии подходил на 100% и т.п. Собеседование было не из простых, углубленное знание JS, что-то вроде алгоритмической части (но не совсем алгоритмы), лайвкод по JS и React. По итогу, очень сложно, вообще не легко и пиздец какая конкуренция.

ЗП 180к

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

Показать полностью
Поиск работы Увольнение Трудовые отношения IT Frontend Курсы программирования Вакансии Собеседование Карьера Профессия Мат Текст
9
263
JavaSrcipt
JavaSrcipt
1 год назад

Адаптивный дизайн это круто!⁠⁠

Адаптивный дизайн это круто! IT юмор, Reddit, Картинка с текстом, Верстка, Frontend
Показать полностью 1
IT юмор Reddit Картинка с текстом Верстка Frontend
31
2
Heksen
Heksen
1 год назад

Ребята и девчата, ит-шники фронтендеры, а расскажите как вы вкатывались и куда удалось докатиться⁠⁠

Интересует как долго учились, как долго потом искали работу (и это был офис или удаленка), как вообще в целом сейчас на рынке с этой профессией, насколько критичен английский.

Также интересно как там у тестировщиков, вопросы в принципе те же.

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

[моё] Профессия Опыт Карьера IT Удаленная работа Frontend Тестировщики Текст
30
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии