Добрый день, уважаемые читатели блога. Продолжаю рассказывать о своих успехах по создания справочного сайта для мобильного приложения, с использования React для front-end и Laravel для back-end.
Содержание цикла статей:
- Разработка мультиязычного мобильного справочного сайта на React и Laravel. Часть №2
Ранее в статьях я спроектировал то, как будет примерно выглядеть сайт и зафиксировал важные пункты в документах. После чего начал разбираться с React и сделал первоначальные шаги. В этой статье я расскажу, как сделал главную страницу справочного сайта, а также, как начал делать сервер с данными на Laravel и API для доступа к этим данным.
Front-end на React
В предыдущие разы я начал разбираться с фреймворком, сделал AppBar и выкатывающееся меню.
Теперь я приступил к созданию основного экрана приложения. С этапа проектирования помним, как оно должно выглядеть
Как видно из макета здесь отсутствует верхний AppBar, поэтому я добавил состояние в основной компонент приложения App, которое говорит нам, в каком режиме сейчас находится приложение:
- "start" — основное окно
- "faq" — раздел с ответами и вопросами
- "instructions" — раздел с инструкциями
Состояния (инструмент фреймворка React) выглядят примерно так для компонента App:
this.state = {type: "start", languages: []};
Помимо переменной указывающий тип того, в каком разделе сейчас находится пользователь, также в состояние я добавил переменную, которая будет хранить информацию о доступных языках (сайт то у нас мультиязычный).
В макете выше видно, что на главная страница состоит из 4 элементов — заголовок, компонент с выбором языка, две ссылки на разные разделы.
Под содержание основной страницы я выделил отдельный компонент MainPage. С заголовком и ссылками на разделы всё просто, добавляем их в виде HTML и немного дописываем для них стили, чтобы они выглядели приятно. Компонент же выбора языка имеет смысл выделить в отдельный, так как этот компонент потом будет использоваться в других местах (в выкатывающемся меню).
Компонент выбора языка
По сути можно было использовать простой <select> элемент и не париться, но так как я наверняка захочу сделать внешний вид компонента более гибки для стилей и настройки внешнего вида, то от <select> я отказался, к тому же хочу, чтобы у каждого пункта списка был флаг страны языка, где он наиболее распространён, а в обычном <select>, насколько я знаю этого сделать нельзя.
Компонент и внешний вид выбора языка состоит из нескольких div'ов с анимацией появления списка для выбора. Всё это конечно же приправлено красивыми стилями. Не буду вдаваться в подробности программирования, но любой, кто знает HTML, CSS и немного JS справится с этим.
Стоит отметить, что хранить выбранный язык я буду в компоненте App в качестве одного из параметров состояния, чтобы менять выбранный язык для всего сайта, а не только внутри компонента выбора языка. В React это делается при помощи передачи функций в качестве props и их вызов при изменении языка, а уже в этой функции компонента App менять выбранный язык.
Вот как выглядит сейчас основная страница сайта:
А так выглядит компонент выбора языка, стоит отметить, что уже сейчас я сделал основное API, которое при помощи ajax-запроса обращается к серверу с данными и достает оттуда информацию о языках, на которых доступен сайт с изображениями флагов (об этом подробнее далее в статье):
По моему получилось очень даже неплохо в плане дизайна, но не исключаю в будущем каких-то изменений.
Back-end на Laravel
Стоит упомянуть и сервер данных с API для front-end'а, который я решил делать на PHP фреймворке Laravel, который предоставляет очень удобные инструменты для работы с БД и обработкой запросов. С этой технологией я опять же сталкиваюсь в первый раз и постепенно разбирался в процессе разработки (PHP конечно я знал и использовал до этого много раз, он имеет лишь некоторые отличия от других языков программирования. Как мне кажется, с пониманием как работают языки программирования изучить новый не составляет труда).
Laravel — довольно мощная штука, её я также буду использовать для административной панели сайта, чтобы иметь возможность изменять наполнение справочного сайта. Но в данной статье я рассмотрю его в качестве инструмента для работы с БД и предоставления API. Здесь также не будет подробного разбора самой библиотеки или её отдельных инструментов (если это требуется, то напишите в комментариях, дайте мне знать, какие вопросы стоит рассмотреть и я обязательно выпущу отдельные статьи).
Я установил одну из последних стабильных версий фреймворка — 6.2 и работал с ней. Скажу честно, что довольно сложно разобраться в таком обширном фреймворке, если ранее с ним не сталкивался. Но мне удалось себя заставить и шаг за шагом я изучил основные моменты. Что я сделал на данный момент:
- Создал модели данных
- Продумал и создал структуру БД при помощи Миграций
- Реализовал запрос к API, который возвращает список языков
С созданием моделей данных и миграциями не было никаких проблем, с этим помогает artisan и документация по фреймворку. К тому же, на данный момент у меня БД состоит из трех таблиц — Категории, Статьи, Языки. Стоит отметить, что мудрить с выбором СУБД (Систе́ма управле́ния ба́зами да́нных) я не стал и выбрал MySQL.
Соответственно все статьи будут иметь категории, и корневыми категориями как раз буду являться разделы сайта — Инструкции, FAQ (раздел вопросов и ответов)
Реализовать запрос к API после изучения Запросов (Request) и других особенностей фреймворка было довольно просто. Добавил пару строчек кода куда нужно и вуаля! Теперь мой front-end при помощи ajax-запроса асинхронно получает данные с сервера и отображает их в компоненте выбора языка.
Небольшими шагами, кропотливой работой я иду к своей цели и теперь сайт выглядит намного привлекательнее, кажется, что завершение работы уже недалеко, но это не совсем так. Теперь я думаю чем заняться дальше — разработать административную панель для создания и редактирования статей или продолжить работать над fron-end. Скорее всего это будет выбор в пользу административной панели, чтобы заполнить БД тестовыми данными своими руками (можно это сделать и программно, при помощи seeding в Laravel), всё равно рано или поздно административную панель сделать придется.
А вас прошу ставить лайки, писать комментарии, делиться статьей с друзьями, кого она может заинтересовать. А я буду продолжать писать эти душные статьи про процесс разработки ^_^, что ж, такова жизнь программиста.
