ПРОГРАММИРОВАНИЕ НА ANDOIRD STUDIO (ВЫПАДАЮЩИЙ СПИСОК SPINNER)

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

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

Создадим новое приложение в Android Studio, выбрав Start a new Android Studio project. Назовём проект SpinnerLesson (поле Application name). Домен компании назовём lessons.ru (поле Company domain). Выберем каталог расположения нашего проекта в поле Project location. И нажмём кнопку Next

В следующем окне можно выбрать настройки в соответствии и изображением и нажать Next. Выберем Empty Activity (пустой активити) и нажмём Next. Имя главного Activity, можно оставить так, как есть, то есть MainActivity и нажать Finish. После создания проекта в открывшемся окне есть один Activity, это MainActivity.  Теперь перейдём к представлению главного Activity, то есть к activity_main.xml. Activity_main.xml представляет собой xml файл и хранится в папке ресурсов res в подпапке layout.

Заменим всё содержимое activity_main.xml на следующее:

Где Spinner и есть тот самый выпадающий список.

Теперь перейдём к MainActivity и отредактируем его таким образом, чтобы его содержимое соответствовало следующему коду:

ЧЕТВЕРТАЯ ТЕХНИЧЕСКАЯ РЕВОЛЮЦИЯ

Вы чувствуете эту тихую пока еще просто жужжащую дрожь под землей? Что-то движется грандиозное и могучее. Это нечто сделает миллионы людей несчастными или счастливыми в зависимости от того как встретить чудовище. Этот монстр ничто иное как «четвертая техническая революция». В последнее время я много размышлял на эту тему когда начал читать про нейронные сети. Нет, сами нейронные сети не вызвали у меня удивления я до сих пор думаю, что технология не совсем перспективная, а перспективнее на мой взгляд deep machine learning из которой и вышли нейронные сети. Т.е. мы получили новый «хайп» в мире ИИ – нейронную сеть к этому хайпу подключаются миллионы специалистов и серьезных it игроков. Еще недавно изучения ИИ было занятием «закрытым» этим занимались институты и редкие специалисты. Если в мире IT о чем-то стали громко говорить значит это приносить результат. В 2006 году казалось просто невозможным определить нарисованное на картинке, если бы вы сказали, что через 10 лет это станет абсолютно реально, то скорее всего вам бы не поверили, звучит слишком романтично. А сегодня сервис https://www.captionbot.ai легко определяет изображения на картинке. Кстати авто ру для распознания моделей по изображению тоже использует нейросеть. В любом случае хайм связан с реальными результатами и возможностью заменить сотни тысяч специалистов на рынке.

Самое интересное, что это можно сделать уже сегодня. Например, заменить армию низкоквалифицированных чиновников системой электронного правительства можно уже сегодня. Как известно в России больше 1 миллиона чиновников. Просто невероятная цифра с учетом того, что чиновники как известно еще вредят обществу. О замене чиновников говорит также политолог, доцент кафедры государственного управления Института общественных наук РАНХиГС Екатерина Шульман. Екатерина высказала данную идею 21 апреля, на международной конференции Skolkovo Robotics (https://www.youtube.com/watch?v=NqrVYBVFR_Q).  Этот вариант замены звучит как-то даже благородно т.к. не секрет, что мы, люди, не любим чиновников. Однако, одновременно с «паразитами» пропадут такие профессии, как бухгалтеры о чем официально даже высказался минфин предупредив о скором исчезновении профессии. К опасному списку принадлежит профессия оператор колл-центра. А дальше, казалось бы, еще более невероятная профессия, которая реально уже под угрозой – водитель. Даже текущий ИИ может заменить водителя. Множество компаний уже вступили в эту гонку. Примеры искусственного управления автомобилей Тесла, на мой взгляд, самые интересные. На видео не самая хорошая погода, но система справилась.

А тут тесла помогает предотвратить аварии

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

https://www.youtube.com/watch?v=04—IOjQu8

Есть абстрагироваться от несчастья и сфокусироваться на положительный результат, то сам факт поражает.  Еще пройдет пару лет когда система будет полностью протестирована и где-то в 2019 году мы увидим первые автопилоты на фурах. Транспортные компании будут первые кто воспользуется системой автопилота ведь предприниматели очень практичные. Всё это удешевит перевозки еще на несколько пунктов т.к. водителю ненадо платить и работать он может 365/24/7.

Что же касается заводов. Интересны разработки DARPA отцы интернета, которые уже произвели когда-то информационную революцию.

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

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

В общем смысле, когда вы впервые сядете в такси с надежным автопилотом, то можно считать, что 4-ая революция пришла.

ИИ да не совсем

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

Так или иначе, но квантовые компьютеры тоже часть 4-ой революции.

В других областях тоже различные интересные открытия, например, в  биотехнологии, в качестве редактирования генома с CRISPR/Cas9 и многие другие открытия, но это немного другая история.

Итог

Большинство профессий умрет. Что же делать?

В нормальных, западных странах этот вопрос уже широко обсуждается. Может кто помнит нашумевшую новость о том, что власти Швейцарии намеривались платить всем 2250 евро в месяц за просто так. Для нас это звучит странно, очередное баловство зажравшейся буржуа. Но на самом деле ситуация более глубокая. Такая инициатива — это часть грядущей 4-ой революции. Что будут делать миллионы Швейцарских «бездельников», а вот получить деньги за просто так. Вообще всё это называется “citizen income” (http://citizensincome.org/). Идея простая мы построим роботов, которые заберут наши рабочие места, а мы будем заниматься высоким, более важными делами – наука, творчество, воспитание детей и т.п.

ПРОГРАММИРОВАНИЕ НА ANDROID STUDIO — FLOATING ACTION BUTTON (АНИМАЦИЯ ЛЕТАЮЩЕЙ КНОПКИ) Ч. 2

В этом уроке мы продолжим рассматривать возможности анимации летающей кнопки Floating Action Button.

Для этого используем проект созданный в предыдущем уроке, где мы делали эффект плавного скрытия и появления кнопки, и создадим для этой кнопки дополнительный эффект вращения. Если вы ещё не успели ознакомиться с предыдущим уроком, то рекомендую начать с него. Он находиться здесь. Давайте теперь перейдём к каталогу ресурсов проекта. Здесь зайдём в каталог anim, в котором хранятся файлы с настройкой анимации. И первым делом откроем файл, отвечающий за скрытие кнопки, т.е. fab_hide.xml. К двум существующим в нём элементам scale и alpha добавим элемент rotate. Именно этот элемент отвечает за вращение кнопки.  После добавления содержимое файла fab_hide.xml должно быть следующим:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="1000"
     android:shareInterpolator="true">

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%" />

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <rotate
        android:fromDegrees="0"
        android:toDegrees="-360"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

Атрибут элемента rotate fromDegrees отвечает за угол наклона кнопки Floating Action Button вправо, или влево на момент начало анимации. А атрибут toDegrees определяет угол, на который будет повёрнута кнопка за установленный период анимации. Значения углов определяется в градусах, т.е. 360 будет означать полный оборот кнопки за период анимации, продолжительность которой определяет duration=»1000″. Знак «-» (минус) означает, что вращение будет происходить против часовой стрелки. Если необходимо, чтобы кнопка за период анимации делала два полных оборота, то нужно указать 360 * 2, т.е. 720 градусов. Атрибуты pivotX и pivotY определяют координату центра по осям X и Y, относительно которой будет происходить вращение кнопки. Т.е. в данном случаи центром вращения кнопки будет геометрический центр самой кнопки.

Теперь перейдём к файлу, который отвечает за появление кнопки, т.е. к fab_show.xml. Туда также добавим элемент rotate, только значение атрибута toDegrees изменим с отрицательного на положительное. Его содержимое должно стать следующим:

ПРОГРАММИРОВАНИЕ НА ANDROID STUDIO — FLOATING ACTION BUTTON (АНИМАЦИЯ ЛЕТАЮЩЕЙ КНОПКИ) Ч. 1

Итак, в данном уроке я расскажу о том, как делать простейшую анимацию летающей кнопки Floating Action Button.

Первым делом создайте новое приложение в Android Studio с пустым активити (Empty Activity).

Для работы с Floating Action Button в Android Studio необходимо подключить библиотеку Design. Чтобы это сделать нужно перейти в Gradle Scripts -> build.gradle (Modul: app). В build.gradle (Modul: app) в раздел dependencies добавьте такую строчку:

Должно всё выглядеть примерно так:

После чего нужно синхронизировать проект, нажав на ссылку Sync Now в верхнем правом углу. Теперь можно приступать к созданию летающей кнопки. Первым делом перейдите к представлению MainActivity, т.е. к файлу activity_main.xml, который расположен в app -> res -> layuot, и отредактируйте его содержимое следующим образом:

Далее нам нужно будет создать каталог для хранения файлов с настройками анимации. Для этого перейдём к каталогу ресурсов проекта app -> res и, нажав на нём правой кнопкой мыши, в появившемся меню выберем New -> Android resource directory. В открывшемся окне зададим наименование нового каталога. Назовём его anim.  После создания каталога anim создадим в нём файл, отвечающий за скрытие кнопки Floating Action Button. Для этого нажмите правой кнопкой мыши на каталоге anim и в появившемся меню выберите New -> Animation resource file. Назовите его fab_hide.

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="1000"
     android:shareInterpolator="true">

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%" />

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

Теперь аналогичным образом нужно создать ещё один файл, который будет отвечать за появление кнопки Floating Action Button. Назовите этот файл fab_show и отредактируйте его содержимое так:

Теперь перейдите к MainActivity и отредактируйте его код следующим образом:

package ru.lessons.fabanimation;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
 private FloatingActionButton fabHideFab;
 private Button btnShowFab;
 private Animation animShowFab, animHideFab;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  //анимация
  animShowFab = AnimationUtils.loadAnimation(this, R.anim.fab_show);
  animHideFab = AnimationUtils.loadAnimation(this, R.anim.fab_hide);

  //летающая кнопка Floating Action Button
  fabHideFab = (FloatingActionButton) findViewById(R.id.fabHideFab);
  //вспомогательная кнопка
  btnShowFab = (Button) findViewById(R.id.btnShowFab);

  fabHideFab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    //анимация скрытия Floating Action Button
    fabHideFab.startAnimation(animHideFab);
   }
  });

  btnShowFab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    //анимация появления Floating Action Button
    fabHideFab.startAnimation(animShowFab);
   }
  });
 }
}

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

В нашем сегодняшнем уроке мы продолжим рассматривать возможности настраиваемого выпадающего списка (Custom Spinner) в Android Studio.

Давайте предположим, что нам необходимо сделать выпадающий список таким образом, чтобы в случаи, когда список развёрнут, то каждый пункт списка отображал бы полную информацию, а в случаи, когда какой-то пункт выбран, то отображалась бы краткая информация. Создайте новое приложение в Android Studio с пустым активити (Empty Activity), и начнём делать наш список. Список будет содержать автомобильные бренды, логотипы этих брендов и информацию о сайте производителя. Пусть в развёрнутом виде нам нужно отображать логотип, наименование бренда и ссылку на сайт, а когда пункт выбран, только логотип и наименование бренда. Создадим шаблон пункта выпадающего списка. Для этого перейдите к каталогу layout ресурсов проекта: 

Нажмите на этом каталоге правой кнопкой мыши и в появившемся меню выберите New -> Layout resource file: Назовите его spinner_item: Отредактируйте содержимое spinner_item.xml в соответствии со следующим текстом:

В той же папке layout, где был создан spinner_item.xml аналогичным образом создайте шаблон для выбранного пункта списка и назовите его selected_item.xml. Отредактируйте содержимое selected_item.xml в соответствии со следующим текстом:

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

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

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

Теперь перейдите к MainActivity и отредактируйте его в соответствии со следующим кодом:

Пример использования redux ngrx

В этом уроке я расскажу Вам как можно начать работу с redux в angular (2+).

Установите Angular CLI как написано в инструкции т.е. наберите в консоли

Npm install –g @angular/cli (если у вас нет Npm установите его https://nodejs.org/en/)

Добавим файл helloReducer.ts и поместим следующий код

В данном случае у нас одно состояние (helloState) на один редьсер как добавить больше состояний покажу позже. В данном случае всё что делает редьюсер это просто добавляет слова hello world. Давайте протестируем как это будет выглядеть на деле.

Еще немного настроек. Перейдите в файл app.module.ts – наш стартовый модуль где начинается наше angular 2+ приложение. Добавьте в imports модуль StoreModule из библиотеки @ngrx/store и наш с вам единственный на данный момент редьюсер helloReducer.

Файл app.module.ts

Еще рекомендую добавить модуль, для тестирования который позволит нам запустить мощный инструмент для отслеживания работы Redux devtools chrome extention

Для этого добавим еще

StoreDevtoolsModule.instrumentOnlyWithExtension()

В итоге весь наш модуль теперь выглядит так

Файл app.module.ts

Теперь мы спокойно можем вызвать наш Store в любом компоненте.

Добавим store через механизм внедрения зависимостей. Обратите внимание что мы не задумываемся как всё это работает модули ngrx уже настроены под всё необходимое за нас.

Поэтому добавим три метода в компонент

Файл app.component.ts

А также реализуем их в представление

Файла app.component.html

Теперь просто запустим наше прилежание. Наберите команду

Давайте сразу откроем расширение для мониторинга работы redux devtools (Redux devtools chrome extention) в google chrome.

how start redux devtools chrome extention

Переключитесь на вкладку “state”

switch to state in redux devtools chrome extention

И мы увидим наше сообщения по умолчанию «Сорри тут пусто :(»

Нажмите последовательно на кнопки addHello, addworld, removeHelloWorld мы увидим в DevTools как меняется состояние.

how start redux devtools chrome extention 2

Здорово значит всё работает!

Но как отобразить данные изменения в представление. Подписываемся на изменения состояния в angular redux ngrx. Всё что нужно сделать это подписаться на изменения к нашему хранилищу или store. В конструкторе класса AppComponent добавьте инструкцию.

store.subscribe(result => this.title = result.msg)

В итоге файл app.component.ts

Запустим приложение. Как совместить работу redux ngrx и запросы к базе мы посмотрим в след. Статье.

Исходники тут  (https://github.com/rusrc/redux_with_ngrx_super_simple)

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 можно задать дополнительные сигменты.