SPA ПРОЕКТ БАЗА ДАННЫХ (ASP.NET CORE WEB API)

Мы продолжаем разработку нашего SPA приложение (или single page application).

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

Наша база будет реализована на основе ORM системы, которая обеспецивает невернятно гибкую и очень быструю работу с данными

Для начала нам нужно установить два удобных для рабты фрэймворка. entity framework core и ASP.NET Core Identity.

ASP.NET Core Identity – мощная система авторизации от Microsoft, которая уже включает в себя всё необходимое для регистрации пользователей и их авторизации. Однако для храненния данных о пользователях, их пароли и т.п. нам необоходима база данных. Поэтому Identity Framework устроет на основе Entity framework-а. Самое крутое в этой системе что она использует атрибуты C#. Т.е. нам не надо писать код на подобие

Реальный пример врйэмфорка Yii2 php. Это не значит, что Yii2 или php хуже просто инфраструктура языка c# значительно более мощная и гибкая. Собственно, эта гибкость позволяет нам реализовать простую задачу проще.

В Identity framework core Всё что нам нужно сделать это атрибутировать класс, метод или свойство атрибутом [Authorize]. Но и конечно нам ничто не мешает сделать проверку авторизованного пользователя через конструкцию if.

entity framework core в свою очередь это мощнейший механизм взаимодействия с базой на уровне объектов. Entity переводится как сущность. Сущность — это просто одна запись в таблице базы данных. Например, таблица «пользовать» содержит множество сущностей пользователей. Такую систему взаимодействие объектов-сущностей в коде называют ORM (Object-Relational Mapping, рус. объектно-реляционное отображение) (показать вики).  Entity framework core – это готовая ORM От Microsoft.

Преимущество ORM

Например, без ORM, чтобы сделать обычный запрос к базе и перебрать данные в цикле. Нужно использовать сложную конструкцию.

С entity framework это значительно проще и изящнее.

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

Итак, давайте установим базу в наш проект. Важно отметить что так как авторизация пользователей требует также наличие базы, то сам Identity framework по умолчанию запускается на основе Entity framework. Давайте установим ASP.NET Core Identity.

Запустим NuGet и добавим несколько пакетов 

Моя текущая структура зависимостей

Nuget pakages

Необходимо установить следующие зависимости:

Microsoft.Aspnetcore.Identity

Microsoft.Aspnetcore.Identity.entityframeworkcore

Microsoft.EntityFrameworkCore.SqlServer

Microsoft.EntityFrameworkCore.Design

Microsoft.EntityFrameworkCore.Tools

Нажмитие правой кнопкой по проекту и выбирите пункт “Manage NuGet packages” перейдите во кладку brows и наберите соответсвующие звисимости.

Теперь в корень проекта добавим папку Models и внутри папки добавим наш класс контекста. WebApiDbContext. Необходимо раширить наш класс классом фреймворка IdentityDbContext. Всё что вам необходимо сделать это добавить данную констукцию. К тому же нам необходимо добавить конструктор, который принимает параметры с типом DbContextOptions<WebapiDbContext> это просто стандартная настройка фрэймворка её можно запомнить или просто взять из документации.

В классе startup.cs нам нужно реализовать строку подключения и настроить зависимости. Поэтому для начала добавим строку подключения. Как вы догадались у меня уже установленна база данных MS SQL server, поэтому мне просто нужно набрать строку подключения.

В методе ConfigureServices класса Startup.cs добавим настройку entity и identity фрэймворков.

Еще раз обратите внимание на строку подключения в сегменте initial catalog название нашей будущей базы. Сейчас её нет.

Дело в том, что фрэймворт создаст её автоматически.

После всех настроек теперь можно запустить миграцию. Если вкратце миграции — это мощный способ создавать таблицы на основе нашего кода без необходимости редактировать саму базу через, например Management studio или создавать таблицы через sql запросы. Система сама сравнивает наш контекст и создает на основе этого контекста таблицы или сущности.

Т.к. мы унаследовались от класса IdentityDbCOntext то данный контекст уже содержит сущность. В этом можно убедиться если посмотреть базового потомка класса IdentityDbContext нажав клавишу F12 или правой кнопкой мыши –> “перейти к определению”.

Давайте перейдем к определению к самому первому потомку. И уже внутри него мы наконец увидим наши будущие таблицы

На основе вот эти данных система сформирует таблицы в базе. Чтобы убедится в этом добавим миграцию.

Откройте «Вид» -> «Другие окна» -> «Консоль диспетчера пакетов» наберите слово Add- и нажмите «Tab» появится подсказка. Если подсказки нет, то скорее всего вы не установили пакет Microsoft.EntityFrameworkCore.Tools. Если всё хорошо выберем Add-Migration и добавим какое-нибудь своё название, например, InitialDb и нажмем Enter.

У нас появится сконфигурированный для создания базы и таблиц файл миграции. На этом этапе базы еще нет. Потому что мы не запустили миграцию. Чтобы это сделать наберите команду Update-Database и нажмите Enter.

Identity framework core migration

Проверим базу данных, создалась ли она

Подключимся к базе через VisualStudio на вкладке «вид» –> «обозреватель серверов».

Вы выпадающем списке как раз и будет наша новая база «WebApiDbContext»

 

Подключение к базе после миграции

Раскройте список и посмотрите какие таблицы добавила система.

Подключение к MS SQL Server через VisualStudio 2017

Спасибо!)

ТИПЫ ДАННЫХ В JAVASCRIPT (ПРАВИЛЬНЫЙ ПОДХОД)

Вступление

В официальной документации написано, что в javascrtipt-е 6 типов. Но js в силу историчности и в силу отсутствия типизации имеет не очевидные типы, поэтому лучше воспринимать количество типов как 7 типов.  Сейчас всё расскажу. Не пугайтесь это легко проверить.

Скажу сразу, что я использую редактор кода Visual Studio Code крайне рекомендую его вам в том числе. Многие серьезные фронтенд разработчики используют его. Фронтенд специалисты — это разработчики кто как раз-таки работает с JavaScript-ом css и html.

Только браузер и ничего больше

Запустив файл в хроме, мы ничего не увидим потому что ничего еще не написали. Поэтому пока запустите консоль нажав сочетание клавиш ctrl+shift+J. Эта консоль встроена в каждый браузер. Самая попсовой считается в хроме.

Чтобы начать работать с JavaScript вам нужен только браузер. В моем случае это google chrome. Откройте браузер я открою стартовую страницу google.ru, но вы можете открыть любую др. Пока просто запустите консоль нажав сочетание клавиш ctrl+shift+J. Подобная консоль встроена в каждый браузер. Самая попсовая считается в хроме. Собственно, в браузере установлена среда, которая понимает js и умеет работать с ним. Удалим лишнее в консоли если что-то есть (Clear console Ctrl+L). В открытой консоли мы можем написать любую цифру, например, 1 и нажать enter.

Всё что выводится после нажатия «enter» проверит специальная программа-переводчик, которая называется компилятор. Он встроен в нашем случае в хром. Это как бы и есть та самая среда, о которой я говорил выше. По сути компилятор — это тот самый переводчик, который читает написанное нами на javascrip-е и переводит всё прочитанное компьютеру в его нолики и единицы. Но пока не стоит заморачиваться.

Главное обратите внимание, что, когда мы написали цифру 1 и после нажатия нам тупо вернулась эта единичка обратно в консоль. Вот этот процесс так и называется возврат. Запомните этот процесс чуть позже мы используем этот возврат уже в выражениях в Javascritp коде. (Вообще всё что возвращает и присваивает значение называется выражением, всё остальное инструкции) Мы также можем очень просто использовать арифметические операции типа плюс, минус, умножение и деление. Можем тут же умножать делить цифры и тут же в консоли к нам возвращается результат.

Основные типы данных

Число

В нашем первом примере мы использовали первый тип данных — число. Число также может быть целым или дробным. (Показать)

Строка

Следующий типа данных это строка. Строку в js получают через двойные или одинарные кавычки. Напишите любые символы в этих кавычках, и вы получите еще один тип данных — строку. Вы даже можете написать цифры в кавычках и таким образом этот литерал всё равно останется строкой (литералы — это всё что мы пишем сейчас голые цифры, строки, обрамленные в кавычки, и они, литералы представляют из себя тупо значения). Тут всё крайне просто и понятно с числами и строками в обычной бытовой жизни мы часто сталкиваемся поэтому такой тип данных интуитивно понятый нам.

Булевой тип

Далее непривычный для многих людей булевой тип данных.

Булевой тип это два набора символом false и true которые так и переводятся с анг. Истина и ложь или фальшь, если хотите.

Их суть невероятно простая, например, тут же в консоли мы можем спросить компилятор, а правда ли 1 == 1 (когда мы сравниваем два литерала на языке js, то это два символа «равно» т.к. один символ используется для другой цели, но об этом чуть позже. Такая пара двух символов мощный инструмент в языке js и называется оператором сравнения. Таких операторов сравнения несколько к ним мы еще вернемся). В итоге нажав enter мы получим значение true. Получается, что компилятор генерирует и возвращает в консоль результат литерального значения true, который указывает на тип данных Boolean отображая слово true или false. Фактически он прав, ведь действительно 1 Равно 1 и это истина полная правда. Тогда как написав 1 == 2 мы получим false. Кажется, всё хорошо и наш с вами компилятор не сломан и работает верно. Вы даже можете сравнить true с true. Как вы думаете, что вернется в консоль? По-моему, логично две истины равны истине.

Все три типа относят к основным типам данных.

Специальные типы данных

Undefined

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

Давайте наконец используем символ равно, который в js называется оператором присваивания. В принципе он тоже довольно знаком из жизни. Например, в физике или математике мы использовали его чтобы как бы умственно присвоить значение переменным. Например, из физики 5-го класса m масса могла быть равна чему-либо. Например, наберите m = 100 и нажмите «Enter». Нам вернулась цифра 100. Но к тому же тут же в консоли нам стала доступна переменная m. Вызовем её, которая тоже содержит цифру 100. Такой процесс передачи цифры в переменную т.е. любой символ или слово называется присваивание. Это присваивание всегда работает с права на лево, но никак наоборот. Вот оно тоже как бы возвращается с правой стороны в левую и присваивается переменной m. Любопытно, что в процессе присваивания с права на лево само значение, в нашем случае это цифра 100 продолжает возвращается в консоль. Т. о. мы можем присваивать это значение бесконечному числу переменных и значение будем возвращается. Например, a = b = 100. Где 100 присвоится сначала b т.к. присваивание идет с права на лево. Потом значение внутри b присвоится переменной а. В итоге независимые переменные a и b имеют одинаковые значения 100. Попробуйте присвоить с лева на право и получим ошибку компилятора. Вообще, чтобы процесс присваивания был полностью верный нужно перед любыми переменной ставить указатель «var», который так и переводится variable – переменная. Фактически мы говорим компилятору переменная «x» равна 10. Var (Variable) = 10. Вот так будет правильнее.

Вернёмся к «Undefined». Для этого напишите, например, var test, но ничего не присваивайте и нажмите enter. В итоге получим undefined т.е. что-то должно было вернутся, но вернулось неопределенное или «Undefined» Значение.

Объяснение типа своими словами.

Т.е. тип — это некая комбинация символов, которую мы можем использовать определенным способом, и которая имеет свое особое поведение. В типы вкладываются человеческие смыслы. Никакой технической составляющей тут нет. На уровне железа всё что мы пишем компилятор переводит в сухие нолики и единицы. Но для нас людей эти типы имеют смысл. Сам написанный литерал говорит нам какой это по смыслу тип. Давайте еще раз для закрепления.

Тупо цифры — это числовой тип, литерал это тоже тупо цифра.

Слова в кавычках это – строковый тип, литерал — это символы в кавычках.

Особые слова false и true – булевой тип, литерал – это два слова без кавычек true и false.

Составные типы данных (array, object)

Иногда просто передавать число или строку скучно, как-то не информативно, согласитесь. Хочется объединить всё в одну группу. Можно очень просто объединить все простые или как говорят примитивные типа в некоторые конструкции.

Массивы

Самый простой способ объединить их, объединить в квадратные скобки.

[1, “test”, true]

Вернется конструкция где все наши данные определенного типа будут построены по очереди.  От нуля и почти до бесконечности. Т.е. конструкция представлять из себя список значений где есть числовой ключ и значение любого типа.

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

Таким образом переменную с типом данных массив объявляют так

В итоге к одному значению можно достучаться через индекс массива т.е.

Объекты

Еще одна конструкция. А внутри скобок прописывается синтаксис в виде ключ : “значение”. Где значение — это примитивный тип данных опять-таки число, строка, булевой тип данных. Я уже писал пример поэтому встроенный выпадающий список, который называют intellisense удобно подсказывает нам. Обычно пишут на английском во избежание проблем с кодировками. Такая конструкция называется объектом.

{ключ : «значение»}

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

По описанной конструкции мы уже можем сказать, что она несет в себе какую-то смысловую нагрузку из реально мира. Т.е. в данном случае описание человека в данном случае некая Kate 18 лет на замужем. Поэтому такие конструкции и называют объектами.

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

typeof (оператор)

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

Дальше идет что-то странное.

typeof {} //вернется "object"
typeof [] //вернется "object"
typeof null //вернется "object"
typeof function(){} //вернется "function

Как быть с 3 object. Собственно, главная проблема — это определить эти 3 типа. Но об этом поговорим потом. Главное теперь вы понимаете, что по факту типов 9, то из-за того, что 3 типа объединены в один можно сказать что типов 7. Вообще вот этот ужас с типами решается типизированными препроцессорами такими как, например, typesctip о котором я также рассказывают на канале.

ПРОГРАММИРОВАНИЕ НА ANDOIRD STUDIO — CUSTOM SPINNER (НАСТРАИВАЕМЫЙ ВЫПАДАЮЩИЙ СПИСОК) Ч. 2.1

В этом уроке мы разберём создание настраиваемого выпадающего списка (Custom Spinner) в Android Studio.

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

Создайте новое приложение в Android Studio с пустым активити (Empty Activity), и начнём делать наш список.

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

Создадим шаблон пункта выпадающего списка. Для этого перейдите к каталогу layout ресурсов проекта:

Нажмите на этом каталоге правой кнопкой мыши и в появившемся меню выберите New -> Layout resource file:

 

Назовите его spinner_item:

Отредактируйте созданный spinner_item.xml в соответствии со следующим текстом:

Теперь перейдите к файлу activity_main.xml, который расположен в том же каталоге layout, что и только что созданный spinner_item.xml и добавьте туда элемент Spinner. Должно получиться следующее:

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

Для этого перейдём к каталогу, в котором у нас расположен MainActivity и создадим в нём подкаталог, к котором разместим наш класс:

Нажмём на нём правой кнопкой мыши. В появившемся меню выберем New -> Package:

Назовите новый каталог AdditionalClasses.

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

Нажмите на вновь созданный каталог AdditionalClasses правой кнопкой мыши и выберите New -> Java Class:

Назовите новый класс AutoBrandClass:

Отредактируйте его код в соответствии со следующим текстом:

В том же каталоге, где был создан каталог AdditionalClasses создайте ещё один каталог и назовите его Adapters. Должно получиться так:

Теперь создадим адаптер для выпадающего списка. Нажмите на каталоге Adapters правой кнопкой мыши и выберите New -> Java Class (Все действия аналогичны тем, которые мы делали при создании класса AutoBrandClass). Назовите этот класс AutoBrandsSpinnerAdapter. Отредактируйте его код в соответствии со следующим текстом:

Теперь нам понадобятся три графических png файла, который будут содержать логотипы брендов — toyota.png, nissan.png и bmw.png. Их нужно просто скопировать в каталог drawable проекта:

Взять архив с логотипами можно здесь: LogoImg

Последним шагом необходимо перейти к MainActivity и отредактировать его в соответствии со следующим кодом:

SPA ПРОЕКТ СОЗДАНИЕ СЕРВЕРА (ASP.NET CORE WEB API)

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

Если Вы просто хотите получить готовый каркас проекта, то просто скачайте его с гита.

https://github.com/rusrc/WebApiApplication

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

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

синхронность

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

асинхронный ajax

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

А сегодня передают совсем крохотный объем данных при мощных интернет соединениях.

Кто-то скажет, что пк пользователей были слабые, но не надо. Потому что уже в 2000 компы были очень мощные мы с друзьями играли во Operation Flashpoint и меня удивляла масштабность игры уже тогда, поэтому можно было сделать концепцию сильного клиента еще раньше. Но это всё лирика.

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

Давайте запустим проект. Dotnet core (https://www.microsoft.com/net/core#windowsvs2017) позволяет нам сделать это невероятно просто. Это абсолютно бесплатный и внимательно, кроссплатформенная система от Microsoft, работает на nginx, на сайте проекта можно увидить какие ОС поддерживает платформа. Наличие потрясающего языка программирования C#. Также можно писать на F# и на момент записи урока еще ожидается поддержка VB. В принципе любая технология на сегодня поддерживает простую развертку web api серверов, например, такие технологии как Node.js, PHP, Ruby, Java, Python. Я умею работать и Node.js, и php, это хорошие технологии особенно node.js, но эти языки не типизированные (хотя Node.js можно писать на TypeScript или др. препроцессорах), в общем я обожаю типизацию, поэтому в своих проектах использую в основном платформу на c#.

Итак, т.к. dotnet core кроссплатформенный вы можете использовать любой редактор кода или IDE, но я крайне рекомендую вам использовать Visual Studio 2017 Community если вы используете Windows. На мой взгляд она проще для новичка или ленивого программиста. Это тоже абсолютно бесплатная среда разработки от Microsoft, которая поддерживается большое комьюнити.

Запустите Visual Studio 2017 выберите добавить новый проект, далее выберите шаблон .NET Core и ASP.NET Core Web Application (.NET Core). Назовем наш проект “WebApiApplication”.

Из списка шаблонов выберите Web API

Добавить web api в Visualstudio 2017

Проверим что в “Change Authentication” у нас ничего не указанно.

No authontication in Visualstudio 2017

Нажмите ОК. У нас запустится проект в этом шаблоне уже всё по минимуму скомпоновано для начала работы, поэтому мы можем спокойно запустить проект.

Есть два способа запуска.

  1. Запустить проект в режиме отладки в этом режиме мы сможем просмотреть работу приложения в режиме трассировке, что крайне удобно понять работу приложения в целом. Но в этом режиме нельзя в полной мере редактировать код. Такой запуск осуществляется через нажатие клавиши
  2. Второй способ — это запустить проект в режиме IIS Express без возможности отладки, но в этом режиме мы сможем легко редактировать код. Т.е. Visual Studio сама поднимет мини сервер для нас. Такой запуск осуществляется через нажатие клавиш Ctrl + F5.

И так нажмем сочетание клавиш Ctrl + F5. Наше приложение запуститься в браузере по умолчанию. В моем случае это Google Chrome. И мы сразу видим пример запуска наших API сервисов по адресу api/values (данный адрес запуска прописан в файле launchSettings.json).

В данном случае это тестовый список Value1, Value2. Мы можем обратиться к каждой записи по id. Указав данный id в url (http://localhost:61474/api/values/1) получим value. В этом нет никакого смысла, но главное, что система работает.

Давайте разберемся почему система возвращает именно то что мы видим.

Перейдем в проект. Структура проекта очень простая. Фактически всё что нас интересует это папка Controllers там мы и реализуем наши веб-сервисы.

Стуктура проекта web API asp.net core

Давайте откроем контроллер ValuesController.cs. Как мы видимо адрес, который мы вводили в браузере очень похож на структуру в котроллере. Очень мощный атрибут Route позволяет редактировать сегменты адреса по нашему желанию. В данном примере “api” – это корневой сегмент.  Мы можем, например, написать слово «привет» и наш сервис будет доступен по адресу привет/values давайте попробуем запустить, каждый раз как вы меняете что-то в коде необходимо пересобрать приложение Build -> BuildSolition. Второй сегмент адреса это [controller] в квадратных скобках. Таким образом мы говорим системе, что тут должно быть название нашего котроллера Values без приставки Controller.

Маршрутизация web API asp.net core

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

Обратите внимания что над некоторыми методами есть специальный атрибуты указывающие на различие способы вызвать метод класса. Такие способы приятно называть глаголами запросов (потому что они призывают что-то сделать get – получить, post – отправить, put — положить) их еще называют «методами запросов» не путайте с методами класса.

Пример GET запроса в браузере google chrome

Чтобы понять, что это такое получше откроем браузер, в моем случае хром, наберем адрес google.ru, откроем консоль и перейдем на вкладку «Network» тут мы увидим все обращения нашего браузера к серверу. Удалите всё что есть в данном окне и обновите страницу, чтобы увидеть обращения браузера к серверу. Также проставьте галочку “Disable cache”.

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

запросы к серверу в панели разработчика google chrome

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

общая информаци по запросам в панели разработчика google chrome

Как видите простая с виду страничка совершает множество запросов.

В панели внизу видна общая информация о запросах и статусе.

25 request – 25 запросов на данный момент

432 kb – 432 килобита данных переданных в 25 запросах.

Finish: 874 ms – время прошедшее с момента первого запроса.

DOMContentLoaded: 325 ms – время в миллисекундах указывающее за сколько грузится только DOM структура или html без css, картинок и др. попутных запросов. Чтобы четко увидеть DOM нажмите «Посмотреть код страницы» или Ctrl + U. Всё что вы увидите это и есть структура DOM она может содержать не только HTML. Собственно, это содержимое без пробелов и переносов загрузилась в моем случае за 325 ms.

Load: 320 ms – это уже время всего остального загрузившегося за раз.

Но нас интересует самый первый запрос к серверу в списке это тот самый запрос, который мы руками вбиваем в адресную строку браузера. Она идентична с запросов в консоли. Если щелкнуть по этому запросу в консоли, то мы увидим всю информацию по этому запросу.

информация по запросу в панели разработчика google chrome

Как видно в окне справа у нас есть общая информация, которую отправляет браузер на сервер в секции “General”. А также попутное содержание запроса в секции Request Headers – заголовки запроса. Но не пугайтесь в моей работе, например, за последние 2 года я использовал только два заголовка Content-Type и иногда Cookie, поэтому знать все заголовки не надо.

Но нас интересует общая информация. В этой секции возможно вы уже заметили и расположен наш метода запроса. По умолчанию, в адресной строке браузеров все запросы отправляются по методу “GET”.

Повторим тоже самое, но с нашим временным IIS сервером. Перейдем по адресу http://localhost:51827/api/values.

запросы к серверу в панели разработчика google chrome 2

В моем случае несколько запросов, но все остальные запросы кроме первого это локальные, закодированные запросы они почти не имеют нагрузки (1, 2 мс.). Это запросы плагина «jsonview». В целом картина получше. Количество информации — это байты, время в три раза быстрее.

Но мы конечно сравнивали простую страну мирового супергиганта в IT индустрии. Для примера я зашел еще на сайт auto.ru картина колоcсальной разницы. Загрузка данных 4.4 мегабайт. Время загрузки за раз 3.03 секунды.

Воспроизведение запросов через программу PostMan.

Конечно всю палитру запросов сложно имитировать в браузере. Поэтому для таких целей существуют специальные программы. Самая продвинутая и популярная на сегодняшний день https://www.getpostman.com/ программу можно установить в качестве расширения в браузер так локально.

программа postman

 

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

Удалите все методы в котроллере.

1. Единственный метод с любым названием в контроллере запускается по умолчанию. Добавьте совсем простой метод

FrameWork увидит его первый делом т.к. у нас ничего больше нет в контроллере система по умолчанию запустить его если глагол запроса GET.

Запустим в ПОСТМЕН-е.

программа postman

2. Два метода класса, но одно имеет атрибут HttpGet. Framework приоритетно сначала запустит тот у которого есть атрибут глагола.

3. Можно поменять глагол запроса, например, на HttpPost

Запустим в ПОСТМАН-е

программа postman POST запрос

4. Именованные сервисы. Через атрибут Route можно задать дополнительные сигменты.

TYPESCRIPT ЧАТЬ 2 (ПЕРЕМЕННЫЕ, ДЕСТРУКТУРИРОВАННИЕ, ИНТЕРПОЛЯЦИЯ, ФУНКЦИИ, КОРТЕЖИ)

Запуск таска (Task)

Запустите watcher, который мы настроили в вводном видео. Нажмите shift+ctrl+p -> Run Build Task или нажмите Ctrl+Shift+B.

Отключить отображение JavaScript файлов

Перед тем как начать давайте отключим отображение js файлов. Конечно хорошо, что мы видим js одновременно с ts, можно посмотреть, что формируется после компиляции ts. Но давайте уберём отображение js файлов в обозревателе решения. Для это нажмите shift+ctrl+p и наберите “settings” выберите “Open User Settings”. И добавьте files.exlude, чтобы убрать JavaScript файл.

Запуск таска в Visual Studio Code
Запуск таска в Visual Studio Code
1
2
3
4
5
6
7
8
«files.exclude»: {
        «**/.git»: true,
        «**/.svn»: true,
        «**/.hg»: true,
        «**/CVS»: true,
        «**/.DS_Store»: true,
        «**/*.js»: true
    }

 

Все основные фишки, о которых я буду говорить в этом видео в основном касаются ES7, но они уже давно доступны в TypeScript.

Базовые типы и переменные

Переменные в TYPESCRIPT определяться точно также, как и в JS, но их можно декорировать типами, указывая компилятору какой тип ожидается у переменной. Например, number, string или Boolean.

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

Переменные можно определять также через оператора let и const (данные фичи доступны в ES2015/ES6).

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

Также в TYPESCRIPT мы можем задать тип массивам. Для этого существует два способа, через квадратные скобки и обобщения. Про обобщения поговорим позже.

Если мы укажем тип «any», который так и переводится «любой».

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

Деструктурированные массивов (доступны в ES2015/ES6)

Деструктурированные массивов – еще один способ получить переменные в области видимости.

Указав несколько переменных в квадратных скобках после оператора let, var, const мы можем присвоить массив той же длины. В результате переменные внутри скобок будут доступны в области видимости.

Пример ниже показывает полезность деструктурированного присваивания более очевидно. Чтобы поменять местами переменные a и b без деструктурированного присваивания нам придется создать дополнительные переменные _a и _b. Присвоить им значения первых переменных a и b, а потом поменять местами.  Давайте запустим пример и посмотрим, что переменные a и b поменяли значения

С деструктурированнием это происходит более изящно

Интерполяция строк (доступна в ES2015/ES6)

Интерполяция строк — это удобный способ интегрировать переменные в строковые значения. Фактичекски мы оборачиваем выражение обратными кавычками (клавиша ё на русской раскладке или символ тильда), а внутри строки оборачиваем нужную переменную фигурными скобками со знаком доллара перед ними. Например, если мы хотим задать число после слова price в нашем примере, то нам придется использовать оператор конкатенации строк в данном случае символ плюс.

При интерполяции тот же процесс выглядит значительно изящнее и читабельнее.

Более очевидный пример преимущества интерполяции строк.

Повторю еще раз интерполяция работает только с обратными кавычками. Двойные и одинарные не работают.

Оператор Let (доступен в ES2015/ES6)

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

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

1 и 5.

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

Запустите программу.

Поэтому безопаснее в TYPESCRIPT объявлять переменные через let.

В итоге

Const” — это самый строгий признак переменной, которую нельзя переприсваивать и переопределять.

Let” — можно переприсвоить и она имеет ограниченную область видимости, что безопасно.

Var” – Слабый признак переменой. В целом var — это самая слабая и сильная сторона JavaScript.

Функции

Функция typeNumber декорируется указателем на тип number. Но можно убрать указатель на тип так как компилятор TypeScript умеет автоматически определять тип.

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

В функции optionalParams параметр “v” имеет значение по умолчанию «hello»

Поэтому если мы запустим функцию optionalParams, то функция по умолчанию вернет “Hello!”, но если подставить другое значение, то значение по умолчанию про игнорируется.

В функции nullableParam параметр “v” декорируется вопросом. Данная сигнатура говорит о том что параметр может быть неопределённым “undefined”.

В теле функции происходит проверка на определенное значение в переменной. Кто знает javascipt понимает, что неопределенная переменная вернет false. Поэтому отработает блок else и функция вернет нам 100.

Запустим файл и посмотри результат. Тело функции можно сократить эквивалентным выражением через тернарный оператор.

или через оператор null-объединения. В некоторых языках это два вопроса в TYPESCRIPT – это две вертикальные линии. Т.е. если значение слева неопределенно (Undefined), то вернется значение справа.

Можете запустить пример ничего не изменится.

Кортежи

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

В TYPESCRIPT мы можем задать тип переменной, функции и методу по схеме картежей.

В официальной документации используется синтаксис через квадратные скобки, куда мы указываем типы. В моем примере переменная “tuple” далее получает массив с данными.

Далее в консоли мы можем получить данные того типа которые указали. Где данные по индексу 0 это срока и по индексу 1 число. Можно использовать и комплексные типы.

Далее я добавил функцию «TupleFun», которая возвращает тот же тип. Т.o. нем не надо заранее определять комплексный тип, например, в виде интерфейса о которых мы еще поговорим, а динамически указать те типы, которые вернет наша функция.

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

В данном примере мы можем получить именованное свойств

Через именованное свойство получать тип объекта или значения удобнее чем через индексы.

 

Плагины WordPress PHP (хуки, фильтры, действия)

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

Хуки (от анг. слова hook — крючок, зацепка) — это созданные пользователями функции (то есть нами), которые привязываются к функциям WordPress (заложены в самом коде движка WordPress). То есть при каждом выполнении функции движка будет проверяться — не привязана ли к этой функции какая-нибудь пользовательская функция и если таковая есть, то одновременно с функцией движка будет выполнена пользовательская функция.

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

Хуками в WordPress называются фильтры (filter) и события (action). В программной части это абсолютно одно и тоже, т.е. обрабатывается и то и другое одинаково, можно например заменять функции add_filter() и add_action() — все будет работать! Разделение нужно, потому что по смыслу это разные вещи

Фильтры (filters) предназначены для “фильтрования” (изменения) любых данных перед тем как они будут выведены на странице или добавлены для хранения в базу данных. Это фильтрация спама, ошибок или просто ошибочного ввода в формах, откуда собственно и произошло английское название.

Действия (actions) предназначены для замены различных действий ядра вашими действиями (например изменения строки запроса к базе данных), в программировании такое изменение действий базового функционала ещё называют перегрузкой.

Как работают фильтры в WordPress

Для работы фильтра используются две функции:

  1. apply_filters() — вызывается там, где применяется фильтр. Запускает добавленные к фильтру PHP функции.
  2. add_filter() — добавляет/прикрепляет PHP функции к указанному фильтру. Используется до того, как фильтр будет применен/вызван/запущен с помощью apply_filters(). Нужно это для того, чтобы, во время срабатывания фильтра, PHP функция уже была подключена к фильтру и обработала переданное значение (отфильтровала его).

apply_filters()

Применяет прикрепленную к указанному фильтру PHP функцию. Прикрепляется функция с помощью add_filter().
Используется там, где нужно изменить значение переменной (например текст).
Используется в плагинах и темах, для создания хуков-фильтров (зацепок пользовательских функций).
Новые фильтры должны иметь уникальные названия и не должны совпадать с уже имеющимися в WP названиями фильтров.

Возвращает

Отфильтрованное значение $value, которое передается функции-обработчику хука.

Прикрепляет указанную PHP функцию к указанному хукe-фильтру. Так, во время срабатывания фильтра значение будет обработано указанной PHP функцией.

Фильтры это, своего рода, зацепки внутри кода, через которые можно «отфильтровать» какие-либо данные. Например, в период получения и вывода текста на экран из базы данных, можно «на лету» изменить (отфильтровать) этот текст и вывести на экран уже измененный вариант текста. И благодаря фильтру для этого нам не придется редактировать функцию вывода в файлах движка, а можно подключиться к функции вывода через файл шаблона, использовав заранее предусмотренный разработчиками фильтр.

add_filter() не делает никаких проверок: существует ли прикрепляемая функция или передается ли название функции в виде строки и т.д.. Сделано это, чтобы add_filter() работала максимально быстро.

Базовый список фильтров смотрите на: https://codex.wordpress.org/Plugin_API/Filter_Reference

true или false, в зависимости от того удалось или нет добавить новый фильтр.

$tag(строка) (обязательный)
Название фильтра, для которого будет срабатывать функция определенная в параметре $function_to_add.
По умолчанию: нет
$function_to_add(строка) (обязательный)
Название функции, которая будет срабатывать для указанного в предыдущем параметре фильтра. Название функции нужно указывать в виде строки: ‘название_функции’. Для функций внутри классов указываем массив: array(‘название_класса’, ‘название_функции’)
По умолчанию: нет
$priority(число)
Приоритет выполнения функций для одного и того же фильтра. Чем больше число, тем позднее будет выполнятся функция: например, сначала 10 потом 20. Функции с одинаковым приоритетом, будут выполнятся в порядке их добавления к массиву фильтров.
По умолчанию: 10
$accepted_args(число)
Количество аргументов передаваемых фильтром функции. Некоторые фильтры могут передавать больше чем 1 аргумент, допустим — 2, для таких случаев нужно указывать 2 в этом параметре.
По умолчанию: 1

Пример использования фильтров

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

Фильтров в WordPress много и вы наверняка с ними встречались в темах и плагинах. Одни из самых популярных это: the_content, body_class, sanitize_user, comment_form и т.д.

События

Как работают события в WordPress

События или действия (actions) в WordPress очень похожи на события в JavaScript. Событие выполняется вызовом функции do_action(), а добавить функцию к любому событию можно с помощью функции add_action().

 

Для работы события используются две функции:

  1. do_action() — это и есть событие. Запускает/вызывает добавленные к событию функции. Вызывается там, где должно сработать событие.
  2. add_action() — добавляет/прикрепляет функции к событию, которое вызывается с помощью do_action(). Функция должна прикрепляться к событию до того, как событие произойдет. Нужно это, чтобы во время срабатывания события PHP функции уже были прикреплены к событию.

do_action()

Создает событие (зацепку для произвольной функции). Чтобы функция сработала в момент события её нужно подключить к этому событию с помощью функции add_action().

Функции можно передавать бесконечное множество аргументов:
do_action( $tag, $arg_a, $arg_b, … );

 

$tag(строка) (обязательный)
Название создаваемого хука.
По умолчанию: нет
$arg(строка/массив/число/объект/логический) Значение аргумента(ов), который будет передаваться через хук. Действия отличаются от фильтров, тем что передаваемые действием данные, не возвращаются обратно в функцию и не используются там в дальнейшем, а всего-лишь передаются для использования в функции хука.

add_action()

Регистрирует хук-событие. При регистрации указывается PHP функция, которая сработает в момент события, которое вызывается с помощью do_action().

Хук на который цепляется функция добавляется с помощью функции do_action().

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

false или true, в зависимости от того удалось ли зарегистрировать хук.

$tag(строка) (обязательный)
Название действия, к которому будем цеплять функцию.
По умолчанию: нет
$function_to_add(строка/колбэк) (обязательный)
Название функции, которая должна быть вызвана во время срабатывания действия, т.е. функция которую цепляем к хуку. Формат передачи функции — обычно строк.
По умолчанию: нет
$priority(число)
Приоритет выполнения функции. Если на этот же хук «прицеплены» еще функции, то приоритет будет решать последовательность их выполнения. Меньше число — раньше выполняется, т.е. 10 будет выполняться раньше чем 20.
По умолчанию: 10
$accepted_args(число)
Число аргументов, которые принимает функция. Разумеется действие должно передавать это число аргументов.
По умолчанию: 1

Будем отправлять письмо друзьям, при публикации нового поста:

Точно так же можно зарегистрировать этот хук через add_filter():

add_filter(‘publish_post’, ’email_friends’);

При выполнении события или действия, выполняются все функции, добавленные к событию в определенном порядке. Это легче всего понять с помощью простого примера. Определяем три функции, которые будут выводить 1, 2 и 3 соответственно:

Добавляем функции к событию foo с помощью функции add_action():

И выполняем наше событие с помощью функции do_action():

 

do_action( ‘foo’ ); // выведет 123

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

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

Итак, наш пример вызовет функции one(), two() и three() по порядку, что выведет на экран 123. Конечно мы могли самостоятельно вызвать эти функции в этом же порядке на месте do_action(), что дало бы тот же самый результат. Так зачем использовать события?

Зачем использовать события

Любой другой плагин или тема смогут легко добавить или удалить функции из вашего события без необходимости изменять код вашего плагина. Такой подход делает ваш плагин более гибким. Например:

Таким образом, когда дело дойдет до вызова события foo в вашем плагине, на экран выведется уже не 123, а 124, поскольку другой плагин удалил функцию three() из вашего события с помощью функции remove_action(), и добавил на ее место новую функцию four().

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

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

Ваша тема может выполнить событие в подвале, и с помощью плагина можно будет вставить в подвал любой текст

Ваш плагин выводит блок «поделиться» в конце каждой статьи, другой плагин сможет добавить новую социальную сеть в этот же блок

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

VBA Excel: РАБОТА С БАЗОЙ ДАННЫХ, МИНИ ORM НА VBA

ORM переводится, как object relational mapping (объектно-реляционное отображение). Это означает, что мы работаем с базой не на уровне SQL запросов, а на уровне объектов.

Давайте я покажу пример и как это будет работать в итоге.

Для начала скажу, что у меня есть база «SQL Server 2016» серьезная база для промышленной реализации, но не пугайтесь она так же доступна простым смертным. Где её скачать расскажу позже.

Каждый раз для использования нашей ORM необходимо объявить и инициализировать несколько переменных c типом DataBase, RecordSet, UnitOfWork. И соединить их с помощью метода Init.

Давайте объявим эти переменные.

Dim db As New DataBase
Dim Rs As New ADODB.Recordset
Dim uow As New unitOfWork

uow.Init db, Rs

Давайте посмотрим, как получить данные.

Для этого объявим переменную с типом User. И реализуем цикл с помощью метода GetAll . Посмотрите, как удобно получать данные о пользователях. Всё что нам надо это просто вызвать метод GetAll в свойстве UserRepository. Точно такие же репозитории будут добавляться и для других типов данных, например, некие документы или накладные InvoiceRepository. После чего в самом цикле мы переберем всех пользователи из базы и выведем их в консоль.

В цикле можно перебрать любые данные. Использовать такие методы, как GetAll очень удобно. Мы не заморачиваемся с SQL запросами и получаем объект определенного типа, свойства и методы которого можно получить и увидеть через IntelliSence. Свойства полученного объекта в нашем примере это Id, Email, UserName объект пока не содержит методов только свойства.

Теперь давайте посмотрим, как добавить запись в базу

Фактически всё что нам нужно это создать объект и задать этому объекту новые значения.

Потом добавить объект через метод “Add”, который есть у любых коллекций и зафиксировать изменения в базе через метод “uow.Commit”.

Если мы запустим наш цикл, который выводил данные мы увидим нашу новую запись.

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

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

Итак, теперь подробнее про саму реализацию ORM.

Для работы с этим примером нам потребуется несколько программ. Первая программа — это SQL Server 2016. Вы сможете найти её по адресу (https://www.microsoft.com/en-us/sql-server/application-development). Также для работы нам потребуется Management studio (https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms). Выберите и нажмите ссылку в зависимости от вашего языка.

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

В данном случае у нас есть шаблон проектирования – репозиторий его суть — это удобное переключение баз данных, получение данных в объектном стиле. В моем примере мы работаем с SQL Server 2016, но с шаблоном проектирования репозиторий мы можем поменять базу, например, на MySql или MS Access довольно просто. При этом наша основная логика не пострадает.

Теперь, давайте посмотрим пример поподробнее. Для того, чтобы реализовать шаблон нам надо несколько классов сам репозиторий. В моем примере это – UserRepository. Класс, который объединяет репозитории это класс UnitOfWork. И классы, которые соответствуют таблицам в базе данных такие классы называют модели данных. Они же в идеале должны содержать большую часть логики (которые обычно реализуются через методы), так называемая, богатая модель. Если модель не содержит логики т.е. методов, то её принято называть ананимичная модель т.е. бедная. В моем простом примере нет пока логики, поэтому модель «User» пока можно отнести к ананимичной модели данных.

И так давайте посмотрим на модель User. В классе добавлено три псевдосвойства Id, Email, UserName. У меня есть отдельное видео рассказывающее про эти свойства. Те же самые поля у меня определенны в базе данных. В Management Studio я создал простую базу TestDb и добавил таблицу User. В исходниках у Вас будет SQL файл с запросом на создание этой таблицы. Просто запустите его в своей Management Studio.

Либо в Management Studio добавьте таблицу, нажав правую кнопку -> New -> Table. И добавьте поля Id, Email, UserName. Для Id добавьте тип данных bigint, для Email nvarchar(50), для UserName nvarchar(50).

Потом нажмите правую кнопку мышки по полю Id и выберите “Set primarity key” (добавить). Это тот самый первичный ключ, который автоматически увеличивается при каждом добавлении данных в базу.

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

UnitOfWork

Давайте теперь посмотрим класс UnitOfWork

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

В моем примере я добавил метод Init, чтобы через этот метод можно было внедрить объекты типа DataBase и Recordset. Т.к. в стандартном конструкторе на VBA нет возможности передать параметры. Такой механизм передачи объектов извне класса называется внедрение зависимостей.

Друзья я еще не рассказывал, как работать с базами через библиотеку ADODB. Если вы хотите более подробный урок по этой теме просто напишите мне или пролайкайет видео.

Репозиторий (UserRepository)

Сам репозиторий довольно простой для начала я добавил три публичных свойства, чтобы был доступ к самой базе SQL Server через объект типа DataBase. Добавил свойство RecordSet для работы с ним внутри метода GetAll. В принципе сам класс UserRepositroy можно запускать независимо, но для реализации шаблона я инициализирую репозиторий в классе UnitOfWork.

И далее два основных метода. Метод GetAll и метод Add. Метод GetAll просто получает все записи из базы данных и переводит их в объект коллекцию типа User c помощью встроенного объекта RecordSet. Внутри метода я запускаю SQL запрос на выборку нужных мне полей. А далее через объект RecorSet получаю их.

РАЗРАБОТКА WORDPRESS ПЛАГИНОВ (ВВЕДЕНИЕ)

Открытие среды и все такое

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

Далее розданим PHP файл с таким же названием как и имя самого плагина. Имя файла плагина должно быть уникальным, поскольку все плагины WordPress находятся в одной и той же папке wp-content/plugins/. Если имя плагина будет слишком типичным, вы рискуете обнаружить еще один файл с таким именем, что, очевидно, станет проблемой.

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

Если вы хотите разместить ваш плагин на http://wordpress.org/extend/plugins/, вам необходимо создать файл readme.txt в стандартном формате и включить его в свой плагин. Смотрите http://wordpress.org/extend/plugins/about/readme.txt для получения разъяснений по формату.

Стандартная информация о плагине

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

Минимальная информация, которая нужна WordPress, чтобы обнаружить ваш плагин — его название (Plugin Name). Остальная информация (если она есть) используется для создания таблицы плагинов на странице управления плагинами. Порядок строк неважен.

Пройдемся по каждому пунку немного подробнее.

Plugin Name: Название плагина

Плагин для WordPress

Plugin URI: ссылка на информацию о плагине

Плагин для WordPress

Description: Описание плагина.

 Плагин для WordPress

Version: версия

Author: Автор

Author URI: Ссылка на автора

Плагин для WordPress

Лицензия

За стандартным заголовком обычно следует информация о лицензии на плагин. Большинство плагинов используют лицензию GPL или лицензию, совместимую с GPL. Для указания лицензии GPL добавьте следующие строки в файл вашего плагина:

<?php
/*  Copyright ГОД  ИМЯ_АВТОРА_ПЛАГИНА  (email: E-MAIL_АВТОРА)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
?>

Программирование плагина

Теперь пришло время заставить ваш плагин что-то делать.

 

Зацепки (Hook) плагина

Итак, как же взаимодействуют компоненты системы плагин + ядро WordPress? Для того, чтобы плагины имели возможность влиять на работу ядра WordPress или на конечный результат его действий, была придумана система так называемых зацепок (часто их без перевода так и называют «хуками» от англ. hook — крючок, зацепка). Принцип ее действия состоит в том, что каждая более или менее важная элементарная функция в ядре WordPress перед тем как вернуть какой-то результат своей работы или совершить какое-то важное действие (например вывести содержимое записи на странице, или произвести запрос к базе данных) «пытается» исполнить дополнительные инструкции (строки кода), предназначенные именно для нее в файлах плагина. Такую попытку она делает с помощью зацепок, которые прописаны в теле этой функции. Вот пример вызова зацепок плагинов из ядра WordPress:

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

Например, перед тем как WordPress добавляет заголовок к записи, он сначала проверяет, имеет ли какой-либо плагин зарегистрированные функции для зацепки под названием «the_title».

<?php
//…
add_filter( 'the_title', 'my_own_function_for_title' ); //Так выглядит регистрация в файле плагина новой функции my_own_function_for_title(); с дополнительным инструкциями для зацепки 'the_title'.
//…
?>

Текст заголовка «пропускается» через каждую такую зарегистрированную функцию, и выводится конечный результат.

Таким образом, если ваш плагин должен добавлять некую информацию к заголовку записи или изменять ее, в нем должна быть зарегистрирована зацепка-фильтр для «the_title» и в нем должна быть фукнция, которая делает все нужные изменения с заголовками.

Полный код плагина выглядит так

УСТАНОВКА TYPESCRIPT В VISUAL STUDIO CODE

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

JavaScript
JavaScript

 

TypeScript
TypeScript

Настройка среды

Есть несколько способов как работать с TypeScript. Сам TS (сокращенно от TypeScript) это препроцессор поэтому мы должны поставить какую-нибудь среду для работы с ним.

  1. Самый простой способ «поиграться с typescript» — это перейти на сайтwww.typescriptlang.org/play/

 

2. Способ второй можно скачать абсолютно беспутную и мощную IDE (intelligent developmentenvironment) от Microsoft по ссылке https://www.visualstudio.com/ru/ название IDE — Visual StudioCommunity 2017 при этом TS плагин уже встроен в неё. Если вы уже пользуетесь напримерVS2015 и плагина для работы с TS еще нет, то скачать его можно по ссылке под видеоhttps://www.microsoft.com/ru-ru/download/details.aspx?id=48593 или наберите в поисковой строкеgoogle-а «typescript for visual studio»

3. Способ третий можно использовать любой редактор кода. Обычно редакторы проще IDE и весят меньше, да и почти не нагружают вашу систему, поэтому редакторы иногда использовать удобнее. Я рекомендую использовать еще один мощный и бесплатный продукт опять же от Microsoft, который называется visual studio code. Данный редактор кроссплатформенный и доступен как для мак так и для линукс. Хорошо, что Бил Гейтс ушел на пенсию, друзья. Это побудило MS изменить политику в опенсорсную сторону. Ссылка для скачивания:https://code.visualstudio.com/ также найдете под видео. Установите visual studio code как обычно.

После установки откройте редактор visual studio code и перейдите во вкладку File-> open folder. В открывшемся диалоговом окне выберите расположение будущей папки и создайте её. Например, с именем “Test”, после чего нажмите ок.

В обозревателе решения наведите на папку Test и нажмите на иконку добавить файл.

Добавьте два файла index.html и App.ts (app это сокращение от слова application)

 

Давайте сделаем красивую тему для файлов. (Внимание — это пункт вы можете пропустить.)

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

Для этого нажмите сочетание клавиш shift + ctrl + p и напечатайте “icon

Обратите внимание из списка настроек мы видим надпись «PreferencesFile Icon Theme»

Выберите этот пункт и нажмите “enter”. Появится еще один список где вы можете видеть доступные темы для файлов. Я люблю тему “Seti (Visual Studio Code)” – минимально и симпатично. Выберите её и нажмите “enter”.

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

Другой способ установить тему, более консервативный. Нажмите на File-> References -> settings

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

РАБОТА С ИНТЕРНЕТОМ ЧЕРЕЗ EXCEL VBA

Сегодня расскажу Вам как работать с интернетом через VBA Excel.

Давайте перейдем в редактор кода Excel, для этого нажмите сочетание горячих клавиш Alt + F11 или через вкладку «просмотр кода». В открывшемся окне редактора через вкладку insert -> procedure добавим простую процедуру “Test” и нажмем ок.

Теперь нужно подключить специальный внешний компонент т.к. excel по умолчанию не умеет работать с удаленными серверами. Сам компонент представляет из себя файл библиотеку с расширением .dll (dynamic link library).

Чтобы добавить библиотеку нажмите на вкладку Tools -> References

В открывшемся окне найдите библиотеку с названием (Microsoft XML, v6.0). При установке windows данная библиотека устанавливается на Ваш компьютер автоматически. Проставьте галочку и нажмите ок.

Теперь внутри любой процедуры нам будет доступен класс XMLHTTP60. Внутри нашей процедуры напишем следующее выражение.

Public Sub Test()

    Dim xhr As New XMLHTTP60

End Sub

Вообще данный класс XMLHTTP60 в большинстве случаев известен как XmlHttpRequest, используется сегодня в разработке современных веб приложений, которые модно называют web 2.0 или Ajax. Однако сам класс довольно древний, впервые был разработан как не странно компанией Microsoft и работал уже в Internet Explorer 5. В те времена основным форматом обмена дынными был XML, поэтому в название класса присутствует xml хотя ничего общего c xml на сегодняшний день не имеет.

Давайте просто получим разметку странички google. Пока не очень полезно, но для примера сойдет.

В коде напишем следующий текст.

Public Sub Test()

    Dim xhr As New XMLHTTP60
    xhr.Open "GET", "https://google.com", False
    xhr.send
    
    Debug.Print xhr.responseText

End Sub

 

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

Запустим нажав на иконку run или клавишу F5

Как мы видим в окне immediate мы получили сырую разметку гугла.

Давайте откроем браузер. В области открытой страницы браузера нажмите правую кнопку мышки и выберете «Посмотреть код страницы»

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

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

Сначала мы объявляем переменную xhr и стразу инициализируем её через ключевое слово new. Если не совсем понятно, как работает данная строчка, то посмотрите уроки по объектам в Excel ссылка в описание.

Далее мы обязательно должны указать основные параметры через метод Open

Первый параметр — это глагол запросов протокола http. Официально их не много около 8 штук, могут быть и пользовательские. Но сейчас достаточно запомнить два часто употребляемых глагола GET и POST (более подробно сюда)

Второй параметр – это адрес веб ресурса, тут всё ясно.

Третий параметр – это указатель на… хотя просто запомните, что сюда ставится false))

Потом мы просто вызываем удаленный сервер методом send

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

Свойство responseText содержит все данные которые вернул сервер, обычно это текстовый формат.

Необходимо добавить, что если всё хорошо и удаленный сервер работает верно, то сервер вместе с текстом или телом ответа, возвращает код ответа.

Если всё хорошо, то код ответа начинается с цифры 200 (201, 202, 203, 204, 205, 206) (код ответов можно посмотреть тут (http://lib.ru/WEBMASTER/rfc2068/))

Однако бывает такое, что удаленный ресурс отработал неверно. Скорее всего сервер в таком случае вернет ошибку с кодом ответа начинающуюся с цифры 400, например, знаменитую ошибку 404 (страница не найдена) или 500 (ошибка сервера).

Чтобы проверить, что сервер отработал верно и вернул нам то, что надо проверим код ошибки.

Изменим на следующий блок кода.

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

Очистите окно Immediate

Нажмите F5 или иконку старт.

Мы видим, что всё тоже самое ответ пришел верный.

Чтобы проверить блок else давайте в адрес добавим что-то неправильное, например, восклицательные знаки https://google.com/!!

Нажмите F5 или иконку старт.

В окне Immediate уже пришла страничка с ошибкой.

Таким образом можно обращается к серверу через VBA Excel

Я рекомендую нажать клавишу F8 чтобы по шагам прогрессировать программу и посмотреть каждый шаг.