Автор: Чирюкин Богдан

Создатель и администратор проекта

Опыт разработки мини-приложения для Telegram: создание NeVerRLandPoker

Привет, друзья! 🙌

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

О приложении NeVerRLandPoker

Идея моего мини-приложения зародилась довольно давно. Как пет-проект я решил создать сервер для покера на Node.js (хотя сам я больше PHP-шник, но в этот раз Node.js оказался предпочтительнее) и клиентскую часть на Vue.js (мой любимый фреймворк). Так и появилась NeVerRLandPoker — рейтинговая игра в Техасский Холдем, в которой каждый ход может стать решающим.

Почему я выбрал разработку мини-приложения для Telegram?

Мини-приложения Telegram — это удобная платформа для создания небольших интерактивных приложений, и вот почему:

  1. Простота доступа. Пользователю не нужно ничего скачивать — достаточно открыть бота, и сервис или игра уже на экране.
  2. Широкая аудитория. Telegram обладает огромной пользовательской базой, что делает его отличной площадкой для запуска игровых и развлекательных приложений.

Чему я научился в процессе разработки мини-приложения?

  1. Интуитивный интерфейс. Одной из главных задач стало упрощение интерфейса для игры через Telegram. Поскольку экранные элементы в Telegram мини-приложениях ограничены, я убрал лишние функции, оставив только то, что важно для геймплея в покерной игре с рейтингами, такой как NeVerRLandPoker.
  2. API Telegram. Важной частью разработки стало понимание возможностей Telegram API, особенно аутентификации пользователей. Раньше я использовал стандартное окно регистрации для получения логина и пароля. Теперь же Telegram сам передает информацию о пользователе, и я использую её для создания токена аутентификации в сокетах.
  3. Обратная связь пользователей. Telegram позволяет мгновенно получать фидбек от пользователей. Это очень помогло в улучшении приложения: игроки могут прямо через бота оставить свои комментарии, и я могу оперативно вносить изменения.

Как адаптировать веб-приложение для Telegram?

Процесс адаптации моего покерного приложения для Telegram оказался проще, чем я думал:

  1. Зарегистрировать бота через BotFather — это стандартный шаг для создания любого Telegram-бота.
  2. В Bot Settings > Menu Button указать ссылку на веб-страницу мини-приложения.
  3. Подкорректировать код для интеграции с Telegram API.

Изменения в коде

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

Кроме того, для удобства я использую флаг isClosingConfirmationEnabled, чтобы убедиться, что пользователь не случайно вышел из приложения. А метод expand() позволяет разворачивать окно на весь экран.

Что получилось в итоге?

Адаптация моей игры к Telegram оказалась не только простой, но и интересной. Моё мини-приложение — NeVerRLandPoker — это рейтинговая игра в Техасский Холдем с использованием анте, что делает игру динамичной и захватывающей. Важной частью игры стала рейтинговая система, которая мотивирует игроков соревноваться за место в топе.

Само приложение доступно в Telegram через бота. Всё, что вам нужно, — это просто открыть бота и начать играть. Присоединяйтесь и попробуйте свои силы в покере!

Совет разработчикам мини-приложений для Telegram

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

Часть 2: Плагины для SEO в WordPress — Оптимизация Загрузки Страницы

1. Подготовка изображений: Компрессия и оптимизация

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

Плагины для оптимизации изображений:

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

2. Оптимизация стилей и скриптов: Минификация и объединение

Минификация CSS и JavaScript файлов уменьшает их размер за счет удаления пробелов, комментариев и других ненужных символов. Объединение файлов позволяет сократить количество HTTP-запросов, что также ускоряет загрузку страницы.

Плагины для минификации и объединения файлов:

  • Autoptimize: Плагин, который автоматически минифицирует и объединяет CSS, JavaScript и HTML файлы. Также поддерживает отложенную загрузку скриптов, что может значительно ускорить загрузку страниц.
  • Fast Velocity Minify: Плагин, специализирующийся на минификации и объединении CSS и JavaScript файлов. Он также предоставляет возможность кэширования объединенных файлов для еще большего ускорения работы сайта.

3. Кэширование: Ускорение работы сайта

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

Плагины для кэширования:

  • WP Super Cache: Один из самых популярных плагинов для кэширования, который создает статические HTML-файлы из динамических страниц WordPress и отдает их пользователям, уменьшая нагрузку на сервер.
  • W3 Total Cache: Мощный плагин для кэширования, который предлагает широкий набор функций, включая кэширование страниц, объектов, баз данных и браузеров. Также поддерживает интеграцию с сетями доставки контента (CDN).

Заключение

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

Часть 1: Плагины для SEO в WordPress — Метатеги, Структурированные Данные и Карта Сайта

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

Лучшие плагины для работы с метатегами:

  • Yoast SEO: Один из самых популярных SEO-плагинов для WordPress. Он позволяет легко настраивать метатеги, такие как title и description, для каждой страницы и записи. Yoast также предоставляет рекомендации по оптимизации контента, что делает его идеальным выбором для начинающих и опытных пользователей.
  • All in One SEO Pack: Альтернатива Yoast SEO, которая также поддерживает настройку метатегов и автоматическое создание мета-описаний на основе содержимого страниц. Плагин имеет интуитивно понятный интерфейс и множество настроек для опытных пользователей.

2. Структурированные данные: Как их настроить с помощью плагинов

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

Плагины для работы со структурированными данными:

  • Schema Pro: Премиум-плагин, который позволяет легко добавлять микроразметку (Schema.org) на сайт без необходимости писать код. Поддерживает множество типов схем, включая отзывы, рецепты, продукты и многое другое.
  • WP Review Pro: Плагин, специально предназначенный для сайтов с обзорами. Он автоматически добавляет структурированные данные в ваши обзоры, что может улучшить отображение ваших записей в поисковой выдаче.

3. Карта сайта: Зачем она нужна и как создать с помощью плагинов

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

Плагины для создания карты сайта:

  • Google XML Sitemaps: Один из старейших и самых надежных плагинов для создания карты сайта. Он автоматически генерирует XML-карту сайта и обновляет ее каждый раз при добавлении нового контента.
  • Rank Math: Плагин, который совмещает функции SEO-оптимизации с созданием карты сайта. Rank Math позволяет гибко настроить, какие страницы и записи должны быть включены в карту сайта.
  • Yoast SEO: автоматически генерирует XML-карту сайта и обновляет ее каждый раз при добавлении нового контента.

Продолжение следует

Далее обсудим работу с картинками, оптимизацию загрузки страницы и кеширование6

Как создать интернет-магазин на WordPress: Полное руководство

Создание интернет-магазина на платформе WordPress — это популярное и доступное решение для предпринимателей, стремящихся быстро запустить свой бизнес в интернете. WordPress предоставляет мощные инструменты и гибкость, а с плагинами, такими как WooCommerce, можно настроить полноценный интернет-магазин с минимальными затратами.

Шаг 1: Установка WordPress

  1. Выбор хостинга и домена: Для начала выберите надежного хостинг-провайдера и зарегистрируйте доменное имя. Популярные хостинги предлагают установку WordPress в один клик.
  2. Установка WordPress: После регистрации домена и выбора хостинга, используйте панель управления хостинга для установки WordPress. Большинство хостинг-провайдеров предлагают автоматическую установку.

Шаг 2: Установка и настройка темы

  1. Выбор темы: Для интернет-магазина подойдет тема, которая поддерживает WooCommerce. Вы можете выбрать бесплатные темы из репозитория WordPress или приобрести премиум-темы на таких платформах, как ThemeForest.
  2. Настройка внешнего вида: После установки темы настройте её внешний вид, используя кастомайзер WordPress. Это позволит адаптировать дизайн под нужды вашего бренда. С целью построить шаблоны страниц можно использовать пэйджбилдеры, Elemento к примеру.

Шаг 3: Установка WooCommerce

  1. Установка плагина: Перейдите в раздел «Плагины» и добавьте новый плагин. В поиске введите «WooCommerce» и установите его. После активации плагина следуйте инструкциям мастера настройки.
  2. Базовая настройка WooCommerce: Настройте валюту, налоги, способы доставки и оплаты. WooCommerce поддерживает множество платежных шлюзов, включая PayPal, Stripe и другие.

Шаг 4: Добавление товаров

  1. Создание продуктов: В меню WooCommerce выберите «Товары» и добавьте новый продукт. Введите название, описание, цену и загрузите изображения. Можно настроить вариативные продукты, если у вас есть товары с разными характеристиками, такими как цвет или размер.
  2. Категории и метки: Организуйте товары по категориям и меткам, чтобы клиентам было проще их находить.

Шаг 5: Настройка страниц и навигации

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

Шаг 6: SEO-оптимизация

Один из наиболее важных шагов для любого сайта:

  1. Установка плагина для SEO: Используйте плагин, такой как Yoast SEO или Rank Math, чтобы оптимизировать страницы и продукты для поисковых систем. Это поможет повысить видимость магазина в поисковых системах.
  2. Оптимизация продуктов: Заполняйте мета-заголовки, описания и ключевые слова для каждого продукта. Используйте качественные изображения с оптимизированными названиями файлов.

Шаг 7: Тестирование и запуск

  1. Тестирование: Проверьте работу всех страниц, оформление заказа и интеграцию платежных систем. Убедитесь, что процесс покупки работает без сбоев.
  2. Запуск сайта: После успешного тестирования сайт готов к запуску. Начните продвижение вашего магазина через социальные сети, контекстную рекламу и другие маркетинговые каналы.

Заключение

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

Laravel: готовим новый проект. ч1 Docker 

В одной из предыдущих статей мы готовили сам фреймворк к разработке проекта здесь же будет речь о полной подготовке – докер, бэк-энд и фронт-энд(поскольку Laravel это уже full-stack фреймворк).

Докер

Docker – это программная платформа для быстрой разработки, тестирования и развертывания приложений. Docker упаковывает ПО в стандартизованные блоки, которые называются контейнерами.

Зачем он нам вообще нужен?

Как и многие, я начинал веб-разработку на локальном сервере. Однако потом появился Docker. Скажу что долго к нему присматривался и не понимал как к нему подойти. Так было до того пока я не попал на проект где его использовали. И скажу – это удобно!

Так да – зачем? Как минимум – удобная замена локальному веб-серверу – получил/собрал конфиг и пользуешься. Конфиг – композиция докера содержит описание всего окружения в котором работает приложение. К примеру, описывает версию php, его модулей, начальные команды. И так применительно ко всему- от сервера до composer`а. Таким образом, достаточно построить образ из композиции и запустить его в виде контейнера. Еще преимущество – работа над несколькими проектами с разным требованиями к проекту – просто остановил один контейнер и запустил другой.

docker-compose.yaml

Этот файл и есть нашей композицией(конфигом), описывающей несколько образов для проекта. Начнем проект с того что создадим его и заполним. Для разработки нам нужны сам php, сервер (NginX) и база данных(MySQL). Вот начальный код такого файла:

version: "3.8"

services:

секция services как раз и описывает наши образы. Начнем с NginX(должен предупредить – отступы здесь значимые символы)

  nginx:
    image: "nginx:stable-alpine"
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./src:/var/www/laravel

мы взяли стандартный образ сервера, потом сказали на каком порту хотим получать доступ к какому порту в контейнере(конкретно здесь – открытие в браузере). В последней секции(volumes) первая строка указывает на конфиг в путь на компе: формате путь в контейнере. Пример nginx.conf

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    root /var/www/laravel/public;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

Вторая строка указывает на директорию приложения в том же формате.

Затем построим php

  php:
    build:
      context: dockerFiles
      dockerfile: php.Dockerfile
    volumes:
      - ./src:/var/www/laravel

Здесь мы строим не только контейнер но и сам php; инструкции для него лежат в dockerFiles/php.Dockerfile. Вот его содержимое

FROM php:8.2-fpm-alpine

WORKDIR var/www/laravel

RUN docker-php-ext-install pdo pdo_mysql

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

Ну и секция с MySQL

  database:
    image: mysql:8.0
    env_file:
      - env/mysql.env
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"

Все уже знакомо кроме env_file – это файл с переменными для построения БД в контейнере, вот его содержимое

MYSQL_DATABASE=laravel_db
MYSQL_USERNAME=db_user
MYSQL_PASSWORD=root
MYSQL_ROOT_PASSWORD=root2

значения можно изменить, но поля нет.

Конфиг есть, что дальше?

А дальше, по конфигу строим образы 

docker-compose build

и запускаем контейнеры

docker-compose up

Только прежде нужно установить докер. Для Windows и MacOS есть графические интерфейсы.

Заключение

Вступительно-ознакомительная часть с докером окончена. Далее немного углубим знакомство с докером и соберем приложение Ларавел.

Vue каратэ: основные приемчики

Привет, поговорим о vue-приемчиках… Под приемами я подразумеваю способы передачи данных между компонентами. Сразу скажу, что это не все приемы, а лишь те которые я использую и о которых помню на момент написания статьи. Погнали!

Events

Наверное самая простая вещь в фреймворке которая полностью идентична js-концепции событий. К примеру событие клика по кнопке

<!-- HTML -->
<button onclick="func"></button>
<!-- Vue -->
<button v-on:click="func"></button>
<!-- работает идеентично -->
<button @click="func"></button>

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

<!-- child-component -->
<button @click="$emit('custom-event',{})"></button>
<!-- parent-compponent -->
<child-component @custom-event="func"/>

Однако это работает только от ребенка к родителю

Управление ребенком

Здесь ивенты уже как-бы “не алё”, на помощь приходят либо ссылки либо пропсы

Начнем из менее лаконичного способа – ссылок. Выглядит это так(родитель)

<template>
  <div>
    <button @click="toggle">Click me!</button>
    <child-component ref="child"/>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent'

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods:{
    toggle(){
      this.$refs.child.collapse = !this.$refs.child.collapse
    }
  }
}
</script>

ребёнок

<template>
  <template v-if="collapse">
    Collapse
  </template>
  <template v-else>
    Expand
  </template>
</template>

<script>
export default {
  name: 'ChildComponent',
  data:function () {
    return {collapse:true}
  }
}
</script>

<style scoped>

</style>

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

Более правильно(как по мне) будет использование пропсов:

<template>
  <div>
    <button @click="toggle">Click me!</button>
    <child-component :collapse="collapse"/>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent'

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data:function () {
    return {collapse:true}
  },
  methods:{
    toggle(){
      this.collapse = !this.collapse
    }
  }
}
</script>
<template>
  <template v-if="collapse">
    Collapse
  </template>
  <template v-else>
    Expand
  </template>
</template>

<script>
export default {
  name: 'ChildComponent',
  props:{
    collapse:Boolean
  }
}
</script>

<style scoped>

</style>

тут свойство collapse попадает в дату родителя, а в дочернем копроненте переносится в пропс.

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

<template>
  <div>
    <button @click="toggle">Close!</button>
    <child-component :close="close" @open="open"/>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent'

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data:function () {
    return {close:false}
  },
  methods:{
    toggle(){
      this.close = true
    },
    open(){
      this.close = false
    }
  }
}
</script>
<template>
  <div>
    <button @click="toggle">Toggle</button>
  </div>
  <template v-if="collapse">
    Collapse
  </template>
  <template v-else>
    Expand
  </template>
</template>

<script>
export default {
  name: 'ChildComponent',
  data:function () {
    return {collapse:true}
  },
  props:{
    close:Boolean
  },
  methods:{
    toggle(){
      this.collapse = !this.collapse
      this.$emit('open')
    }
  },
  watch:{
    close:function (old) {
      if (old)
        this.collapse = true
    }
  }
}
</script>

Суть его в том, чтоб создать пропс и поставить его под наблюдение в watch. В таком варианте, как я навел, проще было б не лезть в дитя, а просто управлять по ссылке; но дело было сложнее и с ссылками не вариант. И еще – при тогле в вложенном компоненте , я емичу событие для обнуления в родитель.

Интересный случай с таблицей. Обработка форм

Задача была построить таблицу с чекбоксами разных настроек. Моя первая итерация данного компонента

<template>
  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Enabled</th>
    </tr>
    </thead>
    <template v-for="(setting,i) in settings" :key="i">
      <tr>
        <td>{{setting.title}}</td>
        <td>
          <input type="checkbox" :checked="setting.enabled" @change="change(i)">
        </td>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  name: 'App',
  data:function () {
    return {
      settings:[
        {title:'setting 1',enabled:true},
        {title:'setting 2',enabled:false},
        {title:'setting 3',enabled:true},
      ],
      i:0
    }
  },
  methods:{
    change(i){
      this.settings[i].enabled = !this.settings[i].enabled
    }
  }
}
</script>

и это работает, но у меня возникла мысль – а как получить содержимое если это textarea? Кароч, правильный путь – забыть о change и тп, использовать директиву v-model

<template>
  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Enabled</th>
    </tr>
    </thead>
    <template v-for="(setting,i) in settings" :key="i">
      <tr>
        <td>{{setting.title}}</td>
        <td>
          <input type="checkbox" :checked="setting.enabled" v-model="setting.enabled">
        </td>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  name: 'App',
  data:function () {
    return {
      settings:[
        {title:'setting 1',enabled:true},
        {title:'setting 2',enabled:false},
        {title:'setting 3',enabled:true},
      ]
    }
  },
}
</script>

но все же

<template>
  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Enabled</th>
    </tr>
    </thead>
    <template v-for="(setting,i) in settings" :key="i">
      <tr>
        <td>{{setting.title}}</td>
        <td>
          <input type="checkbox" :checked="setting.enabled" @change="setting.enabled = $event.target.checked">
        </td>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  name: 'App',

  data:function () {
    return {
      settings:[
        {title:'setting 1',enabled:true},
        {title:'setting 2',enabled:false},
        {title:'setting 3',enabled:true},
      ]
    }
  },
}
</script>

для тех, кому v-model не угодил(в комментах пишите причину – может я чего-то не знаю)…

Моя сборка для разработки Laravel проектов

Приветствую! Хочу рассказать о моих “подготовительных работах” перед реализацией Laravel проектов. Здесь я изложу и кратко опишу почему использую некоторые пакеты. Некоторые я использую во всех проектах, другие – когда сочту нужным. Эта статья – мой личный опыт, может кто-нибудь знает лучшие альтернативы или что еще нужно для более удобной разработки – пишите в комментах – будем благодарны(я и читатели блога). В любом случаи эта статья будет полезна новичкам в данном фреймворке. Погнали!11

Debugbar for Laravel

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

APP_DEBUG=true

внизу страницы будет панель

Debugbar for Laravel
debug-bar

с информацией об ошибках, шаблонах, роуте и тд… Также, при помощи фасада Log можно писать собственную инфу в панель. И что не мало важно – она отображает и ajax(к API) запросы.

IDE Helper Generator for Laravel

Еще один пакет, того же автора, предназначенный для удобства и скорости разработки. Он генерирует phpDocs, которые анализируются IDE и видны в виде подсказок, что позволяет избежать опечаток и постоянной инспекции других классов. Работает для моделей и фасадов. Прежде чем генерировать доки для моделей, нужно настроить связь с БД и иметь соответствующие таблицы.

Associate users with permissions and roles

Ни одного проекта без разделения но ролям я еще не делал и этот пакет делает это – позволяет пользователю дать роль.

Associate users with permissions and roles
permissions and roles

Эта зависимость содержит возможности создавать роли, давать права а также содержит мидлвары(что это – расскажу позже, но очень важная и крутая вещь). Даже если рядовому пользователю не нужно регистрироваться на сайте, все равно а сайте всегда есть админка с супер-админами, менеджерами и тд.

Laravel-Modules

Пакет, который я не везде использую, но в проектах он помогает организовать модульную архитектуру. Он содержит команды создающие набор папок и файлов(по структуре подобных к структeре каталога app). Как по мне базовая архитектура лучше всех, однако если над проектом работает команда – проекты с базовой превращаются в адок. Обьяснение почему я недолюбливаю модульность: допустим ,есть модуль Account на лице сайта, который имеет модель User; есть модуль Admin, где также есть модель User. Вопрос: как поступить – дублировать код(тк поля почти идентичны), делать общие трейты и фасады или вне модулей делать абстрактную модель User, и наследоваться от нее(нарушая идею модульности в моем понимании)? Возможно , я еще не достаточно опытен и чего то не понимаю, но в базовом исполнении, прибегая к использованию лара-фасадов таких дилемм не возникает.

Easy AdminLTE integration with Laravel

Небольшой пакет для построения админ-панели, содержащий набор шаблонов и стилей, основанных на Bootstrap css. Код самых виджетов можно глянуть в AdminLTE Demo.

Заключение

Это все рекомендации, однако они, я уверен, сделают разработку, и что важнее, развитие проекта проще , быстрее и понятнее…

PHP и его фреймворки

Фреймворк(дословный перевод – рабочая рамка) – это набор функционала, который используется с проекта в проект. В современном мире знания языка недостаточно для звания “программист”, еще нужно уметь хотя б в один популярный фреймворк. В этой статье я кратко опишу самые популярные для php фреймворки.

Symfony

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

Достоинства:
  • Конфигурация и настройка фреймворка легко производится с помощью встроенного инструмента – Symfony Console.
  • Имеет готовый набор библиотек для работы с БД, тестирования и других операций.
  • Шаблонизатор Twig позволяет создавать качественный HTML-код с меньшими усилиями.
  • Внутренняя команда Symfony использует реактивный подход к программированию, что позволяет улучшить производительность приложения.
Недостатки:
  • Для начала работы с Symfony требуется изучение дополнительных инструментов и концепций.
  • Фреймворк имеет большой размер, что может замедлять работу приложения в случае недостаточных ресурсов сервера.

Laravel

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

Достоинства:
  • Фреймворк имеет интуитивно понятный синтаксис, что делает его простым для использования.
  • Инструмент artisan позволяет быстро генерировать различные компоненты и структуры приложения.
  • Огромное сообщество разработчиков Laravel, которые поддерживают и развивают этот фреймворк.
  • Шаблонизатор Blade удобен для создания HTML-кода.

Статьи:

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

CodeIgniter

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

Достоинства:
  • Легкий и быстрый фреймворк, который позволяет создавать веб-приложения любой сложности.
  • Множество полезных функций и компонентов, включая систему маршрутизации и библиотеку для работы с базами данных.
  • Интуитивно понятный синтаксис, который делает его простым для использования.
  • Поддержка различных модулей, которые расширяют функциональность фреймворка.
Недостатки:
  • Отсутствие стандартной ORM библиотеки может усложнить работу с базами данных.
  • Не имеет встроенной поддержки для многопоточности и асинхронности, что может быть неудобно для создания приложений с большой нагрузкой.

Yii2

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

Достоинства:
  • Простота и интуитивно понятный синтаксис.
  • Мощные инструменты для создания сложных приложений.
  • Высокая производительность и оптимизированная работа с базами данных.
  • Активное сообщество пользователей и разработчиков.
  • Поддержка RESTful API.
Недостатки:
  • Относительно небольшое сообщество по сравнению с Symfony и Laravel.
  • Некоторые функции могут быть сложными для понимания для начинающих разработчиков.

Сравнение с Yii1: Yii2 был выпущен в 2014 году и представляет собой обновленную версию Yii1. Он имеет множество новых функций, более быструю производительность и оптимизированную работу с базами данных. Однако, многие основные принципы остались прежними, такие как использование MVC-архитектуры и гибкость в настройке.

Заключение

“На вкус и цвет…” – каждый сам в праве выбирать фреймворк для проекта и работы. Но я, как хлебнувший нескольких, скажу что Laravel наиболее удобный – может это действительно так, а может я не распробовал прочие… Скажу, что Laravel был третьим по порядку в моей дегустации.

Структуры во Vue

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

Инициализация проекта

Первое, что нужно – это установить node js, затем – непосредственно стартовую сборку вью. Перейдем в директорию, где хотим писать проект, и с нее запустим

npm init vue@latest

Лично я этим путем ни разу не шел… я всегда использовал IDE, в ней ввесь проект собирается без командной строки. Моя среда разработки почему-то(еще не вьехал почему) собирает проект на Vue2, но мы договорились о 3-ей версии. Потому в pacage.json сменил версию и запустил

npm i

после обновления фреймворка, запустим сервер для разработки

npm run serve

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

Если у вас тоже были проблемы с 2 и 3 версиями, скорее всего вы увидите пустой экран и ошибки в консоле браузера. Перейдите в файл src/main.js и разместите там этот код

import {createApp} from "vue";
import App from './App.vue'

createApp(App).mount('#app')

Он импортирует нужную функцию с вью 3 и монтирует приложение на нужный элемент.

Короче, после всех действий я получил вот-такую структуру проекта

структура проекта vue

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

Структура компонента

Как и все(известные мне доселе) js-фронтенд-фреймворки, данный экземпляр состоит из компонентов. Откроем src/App.vue(первый компонент) и увидим следующее

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

В нем, как видно, есть 3 секции. Секция template обычная html-разметка, может содержать теги других компонентов и особые vue-атрибуты; единственное правило – все содержимое этого тега должно иметь один родительский узел(те обёрнуто общим div-ом, к примеру). Секция script – обычный js-обьект(о нем ниже), а также, импорты нужных компонентов и библиотек. Секция style, как понятно, это стили.

Структура javascript объекта

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

Здесь: 

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  props:{
    property:Number
  },
  methods:{},
  computed:{},
  watch:{},
  data:function () {
    return {}
  },
  setup() {
  },
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeUnmount() {
  },
  unmounted() {
  }
}
  1. components это другие компоненты вью, использующиеся в этом;
  2. props – свойства с типом их данных, которые будут получены из вне(источник – родительский компонент);
  3. methods – функции, которыми будет управляться компонент;
  4. computed – обьект, содержащий вычисляемые значения;
  5. watch – отслеживание изменений в значениях;
  6. data – функция, возвращающая объект со свойствами;
  7. setup – начиная с этой функции и ниже это хуки жизненного цикла приложения, те будут вызваны при определенных событиях в приложении(не спровоцированных пользователем напрямую); конкретно это срабатывает при инициализации компонента(в котором находится); в отличии от остальных мест, здесь нет доступа к this и все, что здесь создастся не будет реактивным;
  8. beforeCreate – ровно то же, что и в 7; для чего надо – фиг знает;
  9. created – это уже после разрешения всех данных, тут доступен this и реактивность;
  10. beforeMount – срабатывает перед началом рендеринга компонента;
  11. mounted – когда компонент целиком отрендерился;
  12. beforeUpdate – срабатывает перед каждым перерисовыванием любого элемента компонента;
  13. updated – после этого действия(в пункте 12);
  14. beforeUnmount – перед тем, как компонент будет удален из DOM-дерева страницы;
  15. unmounted – после удаления.

Резюмируя

Во-первых, разрабатывать с этим фреймворком легко(как по – легче чем с прочим, знакомыми мне), почти все готово со старта(собственно, для того и делаются фреймворки). Достаточно богатая экосистема, на все случаи жизни(еще не было случаю когда он говорил “нет”, если язык позволяет, конечно…). И еще, малость не забыл сказать, это далеко не все плюшки, которые тут есть – с ними мы познакомимся в процессе написания приложения.

Пролог

Здравствуйте всем, это пролог к серии статей сериала “ООП здорового человека(Сезон 1)”. Данная серия статеек об объектно-ориентированном программировании “здорового человека”(в предыдущей записи я привел пример ООП курящего). Современное ООП это не только работа из сущностями как с объектами, но и следование некоторым механизмам, принципам и шаблонам проектирования кода.

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

Сериальчик стоит глянуть как новичкам, так и прожжённым программистам. Первым – для того чтоб легко “въехать в тему”(рассказываю максимально доступно); вторые больше мне нужны – для исправления моих ошибок(если будут). В целом, не стесняйтесь – комментируйте(только прошу – коль критикуете – объясняйте за что и где)!

Содержание: