Моя идея состояла в том, чтобы построить простой репликабельный проект на Angular с бэкэндом на Django. Я искал и не смог найти нужных решений, пришлось во всем разбираться самому. В итоге я разобрался и решил сам написать гайд для всех, кого может заинтересовать данная проблема.  Данная статья поможет вам построить простое приложение Angular с бэкэндом на Django, организованного с помощью Webpack. Проблема Я хочу настроить проект на Angular 1.1.x и скормить ему данные с сервера Django. Мне бы хотелось использовать Django REST Framework (DRF), чтобы пострить RESTful API. Я также хочу сбандлить JS ассеты. Сейчас я собираюсь запустить сайт на одном сервере. Предварительные требования Python 2.x Django 1.9.x npm 2.15.8+ Webpack 1.13.x (sudo npm i -g webpack) ESLint 2.13.1+ (sudo npm i -g eslint) NodeJS 4.4.7+ Содержание Скаффолдинг проекта. Создайте свои начальные директории. Скаффолдинг проекта на Django. Настрока переменных среды, нужных для запуска сервера Django. Установка Django REST Framework и настройка Django с использованием переменных среды. Создание API. Запуск Django сервера с использованием dev settings. Инициализация npm-пакета и установка front-end JS зависимостей. Создание Angular entry-point и загрузка начальных зависимостей. Настройка Webpack'а. Дайте команду Django загрузить приложение. Создайте шаблон базы приложения Angular. Напишите компонент home. Напишите Angular роуты, ведущие к вашему компоненту home и странице 404. Добавьте директивы ангуляр-маршрутизатора к шаблону входной точки приложения. Проверьте ваше REST API в приложении Angular.  Шпаргалка. Итак, начнем! 0. Настройте среду для Python. mkvirtualenv mysite 1. Скаффолдинг проекта на Django. Создайте начальные директории. Мы хотим сфокусироваться на модулярности в ходе разработки. Следовательно, существует множество директорий в конечном итоге использования. Мы хотим, чтобы наше дерево изначально выглядело так: mysite ├── backend │ ├── docs │ ├── requirements └── frontend ├── app │ ├── components │ └── shared ├── assets │ ├── css │ ├── img │ ├── js │ └── libs ├── config ├── dist └── js  Сделайте следующее: mkdir mysite && cd mysite mkdir -p backend/docs/ backend/requirements/ \ frontend/app/shared/ \ frontend/app/components/ \ frontend/config \ frontend/assets/img/ frontend/assets/css/ \ frontend/assets/js/ frontend/assets/libs/ \ frontend/dist/js/  *Примечание: Структура этого проекта была навеяна опытом с несколькими другими проектами. Я считаю эту организацию идеальной, но вам не обязательно ей следовать. Но, пока вы читаете этот гайд, вы должны придерживаться этой структуры. 2. Скаффолдинг проекта на Django. В директории backend/ создайте Django проект: python django-admin.py startproject mysite  Также создайте requirements.txt: pip freeze > requirements/requirements.txt В директории (вашего проекта) backend/mysite/ произведите скаффолдинг директории, той, где будет жить ваше API: mkdir -p applications/api/v1/ touch applications/__init__.py applications/api/__init__.py \ applications/api/v1/__init__.py applications/api/v1/routes.py \ applications/api/v1/serializers.py applications/api/v1/viewsets.py Теперь создайте структуру директории настроек: mkdir -p configlord/settings/ touch configlord/settings/__init__.py \ configlord/settings/base.py configlord/settings/dev.py configlord/settings/prod.py \ configlord/dev.env configlord/prod.en 3. Настройте переменные окружения, которые нужны для запуска сервера Django. На этом этапе я предпочитаю пользоваться django-environ для работы с переменными окружения. Существует множество способов сделать это, но пакет django-environ чрезвычайно упрощает этот процесс, поэтому я использую его во всех своих проектах. Установите django-environ: pip install django-environ  В mysite/dev.env добавьте следующее: DATABASE_URL=sqlite:///mysite.db DEBUG=True FRONTEND_ROOT=path/to/mysite/frontend/ SECRET_KEY=_some_secret_key Мы собираемся использовать эти переменные среды в наших настройках. Выгода от использования наших переменных окружения в отдельных файлах состоит в основном в том, что такая настройка позволяет облегчить переключение между средами. В нашем случае файл the dev.env является списком переменных, которые мы бы использовали в локальной среде разработки. *Примечание: SECRET_KEY можно взять из settings.py, который был сгенерирован django-admin.py startproject. 4. Установите Django REST Framework и настройте Django, используя переменные среды. Установка DRF: pip install djangorestframework Наполните settings/base.py  следующим: Укажите, где искать переменные окружения. import environ project_root = environ.Path(__file__) - 3 env = environ.Env(DEBUG=(bool, False),) CURRENT_ENV = 'dev' # 'dev' is the default environment # read the .env file associated with the settings that're loaded env.read_env('./mysite/{}.env'.format(CURRENT_ENV)) Установите базу данных. В данном случае мы собираемся использовать встроенные в django-environ настройки SQLite. DATABASES = { 'default': env.db() } Установите SECRET_KEY ,а также debug. SECRET_KEY = env('SECRET_KEY') DEBUG = env('DEBUG') Добавьте DRF в пул приложений, которые Django должен использовать. # Application definition INSTALLED_APPS = [ ... # Django Packages 'rest_framework', ] Ссылки будут «жить» в специальном URL модуле, созданном с помощью базы проекта. ROOT_URLCONF = 'mysite.urls' Укажите Django, где искать все шаблоны и другие статические ассеты. STATIC_URL = '/static/' STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ] STATICFILES_DIRS = [ env('FRONTEND_ROOT') ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [env('FRONTEND_ROOT')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] В соответствии с настройкой TEMPLATES Django должен будет искать шаблоны внутри frontend/ directory. Это то, где Angular приложение будет жить. Мы используем только Django, чтобы обслужить шаблон, внутри которого Angular приложение будет загружаться, которое будет выполнено через entry-point директиву. Если вы не знаете, о чем я, продолжайте чтение...  Наполните settings/dev.py: from mysite.settings.base import * CURRENT_ENV = 'dev' Здесь мы указываем, что этот файл настроек унаследывает настройки из base.py и переопределяет строку CURRENT_ENV, найденную в base.py. Мы говорим: «Используй это значение вместо значения, найденного в наследуемом модуле». 5. Создайте API. Нам нужно нечто, с помощью чего мы сможем протестировать службы Angular, поэтому давайте создадим небольшое API. Этот шаг можно пропустить, но я не советовал бы делать этого. Нам важно знание того, что настройки приложения Angular работают исключительно с точки зрения его потенциала, чтобы облегчить HTTP запросы. Сгенерируйте приложение. manage.py startapp games Создайте модель в games/models.py. class Game(models.model): title = models.CharField(max_length=255) description = models.CharField(max_length=750) Создайте DRF сериализатор для модели игры в  applications/api/v1/serializers.py. from rest_framework.serializers import ModelSerializer from applications.games.models import Game class GameSerializer(ModelSerializer): class Meta: model = Game Создайте  DRF viewset для модели в приложениях applications/api/v1/viewsets.py. from rest_framework import viewsets from applications.games.models import Game from applications.api.v1.serializers import GameSerializer class GameViewSet(viewsets.ModelViewSet): queryset = Game.objects.all() serializer_class = GameSerializer В applications/api/v1/routes.py зарегистрируйте роуты, используя DRF's router registration features. from rest_framework import routers from applications.api.v1.viewsets import GameViewSet api_router = routers.SimpleRouter() api_router.register('games', GameViewSet) Обозначьте ссылки для зарегистрированного DRF роута внутри mysite/urls.py: from django.contrib import admin from django.conf.urls import include, url from applications.api.v1.routes import api_router urlpatterns = [ url(r'^admin/', admin.site.urls), # API:V1 url(r'^api/v1/', include(api_router.urls)), ] 6. Запустите сервер Django, используя dev settings. manage.py runserver --DJANGO_SETTINGS_MODULE=mysite.settings.dev Впуская DJANGO_SETTINGS_MODULE в runserver, мы «говорим» - работать используя специфические параметры. Если все работает, у вас появится возможность открыть localhost:8000/api/v1/games и увидеть ответ от DRF. Если все работает – самое время заняться построением приложения Angular. Если нет – направьте автору проблему. Если вы застряли на этом этапе – оставьте комментарий автору под оригиналом публикации. 7. Инициализируйте npm-пакет и установите front-end JS зависимости. Приложение Angular не будет работать так, как мы хотим, если правильные зависимости не будут установленны. Самое время установить базовые пакеты, которые понадобятся. Инициализируйте npm-пакет. Прямо из  frontend/ запустите npm init --yes By passing the --yes flag into init, you're telling NPM to generate a package.json using NPM defaults. Otherwise, if you don't pass that in, you'll have to answer questions... Boring. Установите dev dependencies.  npm install --save-dev eslint eslint-loader Установите общие зависимости. npm install --save eslint eslint-loader angular angular-resource angular-route json-loader mustache-loader lodash Файл package.json file во frontend/ должен выглядеть приблизительно следующим образом: { "name": "my-app", "version": "0.0.1", "description": "This is my first angular app.", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^3.1.1", "eslint-loader": "^1.4.1" }, "dependencies": { "angular": "^1.5.8", "angular-resource": "^1.5.8", "angular-route": "^1.5.8", "eslint": "^3.1.1", "eslint-loader": "^1.4.1", "json-loader": "^0.5.4", "lodash": "^4.13.1", "mustache-loader": "^0.3.1" } } Здесь то, что мы только что установили: eslint – отличный линтер, благодаря которому код JavaScript будет в порядке (последователен). eslint-loader – для запуска eslint через Webpack. Чуть позже я объясню концепцию «загрузчиков». angular -  MVC фреймворк. Если  вы не знали об этом, стоит подумать о том, чтобы закрыть эту страничку прямо сейчас. angular-resource -  (Angular) HTTP библиотека выбора. Это абстракция $http. json-loader - загрузчик (снова, используемый Webpack) для распаковки JSON из .json файлов с помощью require() во время работы нашего приложения. mustache-loader – загрузчик, который мы будем использовать, чтобы парсить наши mustache шаблоны. Mustache шаблоны – это веселье. Я могу спокойно предположить, что вы не знаете, как все эти пакеты заиграют вместе.  Не переживайте, братишки. 8. Создайте entry-point в Angular, объявите начальные зависимости, объявите первоначальные глобальные переменные. В frontend/app/app.js добавьте следующее: /* Libs */ require("angular/angular"); require("angular-route/angular-route"); require("angular-resource/angular-resource"); /* Globals */ _ = require("lodash"); _urlPrefixes = { API: "api/v1/", TEMPLATES: "static/app/" }; /* Components */ /* App Dependencies */ angular.module("myApp", [ "ngResource", "ngRoute", ]); /* Config Vars */ // @TODO in Step 13. /* App Config */ angular.module("myApp").config(routesConfig); app.js это то, где Webpack будет искать модули, чтобы бандлить их вместе. Лично я ценю такую организацию и методику вызовов, но такой порядок не обязателен. Существует 6 секций: Libs – главные библиотеки, используемые на протяжении работы Angular приложения; Globals – зарезервированные глобальные переменные, которые мы можем использовать во время работы приложения; Components (Компоненты) – особенные модули проекта; App Dependencies (Зависимости приложения) – объявление входной точки приложения и его зависимостей; Config Vars – переменные, где хранятся настройки, такие как route config; App Config - вводит configs (настройки) в приложение, используя сохраненные из предыдущей секции. Для того, чтобы globals работали, вам следует указать ESLint на то, какие из переменных - глобальные. В config/eslint.json добавляем следующее: { "env": { "node": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-console": 0 }, "globals": { "_": true, "_urlPrefixes": true, "angular": true, "inject": true, "window": true }, "colors": true } Ниже несколько переменных, о которых мы предупредили ESLint: _ представить lodash. _urlPrefixes – объект, который мы будем использовать в приложении для гиперссылок. Я расскажу об этом позже. angular, чтобы представить AngularJS object driving our entire application. inject, который будет использоваться для ввода зависимостей Angular. window, которая просто представляет объекты окон в JavaScript, является представителем  DOM. 9. Настройка Webpack. Теперь, когда мы выложили большинство наших зависимостей приложения, мы можем построить config file для Webpack. Webpack будет консолидировать все зависимости, а также модули для приложений, которые мы создаем в один файл. В bundle. В frontend/webpack.config.js добавляем следующее. module.exports = { entry: "./app/app.js", output: { path: "./dist/js/", filename: "bundle.js", sourceMapFilename: "bundle.js.map", }, watch: true, // eslint config eslint: { configFile: './config/eslint.json' }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.html$/, loader: "mustache-loader" }, { test: /\.json$/, loader: "json-loader" }] }, resolve: { extensions: ['', '.js'] } }; Для того, чтобы Webpack бандлил все наши статические зависимости, нам нужно указать ему, где их брать, какие зависимости обрабатывать и как управлять ими до банлинга. Давайте посмотрим на то, что указывает Webpack с помощью webpack.config.js: Entry - это путь к тому, что Webpack'у нужно для старта бандлинга. Это можеть быть полный путь или путь, относительный тому, где webpack.config.js располагается. В данном случае мы говорим о последнем варианте. output -  это объект, содержащий в себе path, который является директорией, в которую связанные зависимости будут помещаться; filename - это название бандла; и, в данном случае, мы решили использовать sourceMapFilename, чтобы обозначить, что наша() source map будет вызван(а). watch указывает Webpack следить за изменениями в файле, пока он выполняется. Если это не настроено как true, Webpack прогонит процесс бандлинга единожды и остановится. eslint содержит в себе специфические ESLint настройки, используемые eslint-loader. module указывает Webpack'у, что делать с модулями, с которыми он работает. module.preLoaders «говорит», что делать перед бандлингом. В данном случае мы хотим запустить модули (исключив модули установленные npm) через eslint. module.loaders - это то, где указана последовательность загрузчика. В нашем случае мы просто настраиваем test и loader,  где test указывает Webpack’у, какие модули запускать в загрузчике (по соответствию с паттерном regex), и loader говорит Webpack’y, какой загрузчик использовать в модулях, которые соответствуют regex паттерну в test. Каждый загрузчик указан в строке и разделен восклицательным знаком. Ex:  loader!another_loader!yet_another_loader module.preLoaders указывает, какие preLoaders'у запускать модули. Используемые настройки такие же точно, какие мы использовали в module.loaders. Но, Грег, какая  разница между preLoaders и loaders? Я рад, что ты спросил, мой дорогой друг!! A loader указывает Webpack'у, как бандлить требуемые файлы. Loader смотрит на модуль и говорт: «Эй, так как вы упаковываете это в один файл как строку – это то, как оно должно быть преобразованно для bundle'а». A preLoader обрабатывает код перед loaders, например, чтобы слинтить JavaScript модули. A postLoader является плагином Webpack'а, который обрабатывает код после бандинга. Мы не специфицировали ни один  postLoader ради простоты. 10. Укажите Django загрузить приложение. Прямо сейчас все, что нужно сделать – указать Webpack’у что создавать, как создавать и что должно быть создано. (На данном этапе я бы очень удивился, если вы попробуете запустить его и он заработает без ошибок. Если так и есть, я чертов мужик.) Так как Django использует свой собственный URL процессор в нашем приложении, мы можем быть рады тому, как любезно Django управляет всем тем, что введено в строку браузера пользователя. Как бы то ни было, мы бандлим одностраничное приложение, используя абсолютно другой фреймворк, и хотим, чтобы у приложения был полный контроль над тем, что пользователь вводит. Все, что нам нужно  – обслуживать одну страничку, в которой работает SPA. Следовательно... В backend/mysite/mysite/urls.py добавляем в список urlpatterns следующее: # Web App Entry url(r'^$', TemplateView.as_view(template_name="app/index.html"), name='index'), Это значит, что когда пользователь открывает mysite.com/, env('FRONTEND_ROOT') + app/index.html будет находить STATICFILES_FINDERS  в порядке рендера HTML шаблона. 11. Создайте шаблон базы приложения Angular. frontend/app/components/app/index.html шаблон должен выглядеть как обычный шаблон Django. В frontend/app/index.html добавляем следующее: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}">script> head> <body> body> html> В таком случае вам удастся запустить Webpack. Если вы запустите Django сервер и откроете localhost:8000,вы увидите пустую страничку. Если нет – дайте знать автору. 12. Напишите home component. Давайте напишем наш первый компонент. Он отобразит текст на страничке, пока пользователь открывает localhost:8000. Создайте директорию для компонента и базовые файлы. В frontend/app/components/: mkdir home && touch home/home-controller.js home/home.js home/home.html В frontend/app/components/home/home.html добавляем следующее: <div ng-controller="HomeController as ctrl"> <div> <h1>Home!h1> div> div> Теперь добавим следующее в  frontend/app/components/home/home-controller.js: function HomeController() { var that = this; that.foo = "Foo!"; console.log(that); // should print out the controller object } angular.module("Home") .controller("HomeController", [ HomeController ]) Определение модуля Angular должно быть объявлено в home.js: angular.module("Home", []); require("./home-controller"); Теперь мы можем сослаться на "Home" в области зависимости определения модуля. Давайте сделаем это! В app/app.js добавьте следующее: /* Components */ require("./components/home/home"); /* App Dependencies */ angular.module("myApp", [ "Home", // this is our component "ngResource", "ngRoute" ]); 13. Пропишите пути Angular'а, ведущие к home component и страничке 404. Нам нужно настроить первый путь. Когда пользователь попадает на localhost:8000, Angular должен взять контроль над загрузкой отрендеренного шаблона. Чтобы сделать это, нам потребуется использовать angular-router. В frontend/app/routes.js пишем следующее: function routesConfig($routeProvider) { $routeProvider .when("/", { templateUrl: _urlPrefixes.TEMPLATES + "components/home/home.html", label: "Home" }) .otherwise({ templateUrl: _urlPrefixes.TEMPLATES + "404.html" }); } routesConfig.$inject = ["$routeProvider"]; module.exports = routesConfig; Если мы не добавим _urlPrefixes.TEMPLATES, angular-router предположит, что components/home/home.html является действительной ссылкой, которую узнает сервер. Так как STATIC_URL в настройках предполагает неправильную работу localhost:8000/components/home/home.html. Также, если вы еще не заметили, вы увидите otherwise({...})  в коде роутов. Это то, как будут реализованы страницы 404. В frontend/app/404.html добавляем следующее: <h1>NOT FOUNDh1> И в завершении  добавляем frontend/app/app.js: /* Config Vars */ var routesConfig = require("./routes"); 14. Добавьте директивы angular-router к шаблону точки входа приложения. А теперь нам нужно указать Angular, где будет происходить переключение отображаемого, когда пользователь пользуется навигацией. Чтобы сделать это, мы используем всю силу angular-router. В тэг    в frontend/app/index.html добавляем: <base href="/"> Теперь в тэг  добавляем: <div ng-view>div> Ваш index.html теперь должен выглядеть так: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}" >script> <base href="/"> head> <body> <div> <div ng-view>div> div> body> html> Запустите Webpack. Откройте localhost:8000. Вы должны увидеть, что произошло в home/home.html. (Если ничего, отправьте эти данные автору J ). 15. Проверьте REST API в приложении Angular. Если все сделано, у вас появится возможность написать angular службы для Django API. Давайте создадим небольшой компонент, чтобы увидеть, можем ли мы это сделать. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. Создайте скаффолд компонент в frontend/app/components/: mkdir -p game/list/ && touch game/list/game-list-controller.js game/list/game-list-controller_test.js game/game-service.js game/game.js game/game.html Этот компонент будет перечислять игры. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. В game/game-service.js: function GameService($resource) { /** * @name GameService * * @description * A service providing game data. */ var that = this; /** * A resource for retrieving game data. */ that.GameResource = $resource(_urlPrefixes.API + "games/:game_id/"); /** * A convenience method for retrieving Game objects. * Retrieval is done via a GET request to the ../games/ endpoint. * @param {object} params - the query string object used for a GET request to ../games/ endpoint * @returns {object} $promise - a promise containing game-related data */ that.getGames = function(params) { return that.GameResource.query(params).$promise; }; } angular.module("Game") .service("GameService", ["$resource", GameService]); Обратите внимание на ссылку $resource, которую мы используем для того, чтобы настроить механизмы HTTP в нашей службе. В game/list/game-list-controller.js: function GameListController(GameService) { var that = this; /* Stored game objects. */ that.games = []; /** * Initialize the game list controller. */ that.init = function() { return GameService.getGames().then(function(games) { that.games = games; }); }; } angular.module("Game") .controller("GameListController", [ "GameService", GameListController ]); В game/game.html: <div ng-controller="GameListController as ctrl" ng-init="ctrl.init()"> <div> <h1>Gamesh1> <ul> <li ng-repeat="game in ctrl.games">{{ game.title }}li> ul> div> div> В game/game.js: angular.module("Game", []); require("./list/game-list-controller"); require("./game-service"); Затем обратимся к компоненту в app.js: /* Components */ require("./components/game/game"); /* App Dependencies */ angular.module("myApp", [ "Home", "Game", "ngResource", "ngRoute" ]); В конце концов, мы собираемся настроить роуты для списка игр, поэтому в frontend/app/routes.js добавьте следующее в объект $routeProvider: .when("/game", { templateUrl: _urlPrefixes.TEMPLATES + "components/game/list/game-list.html", label: "Games" }) Запустите Webpack снова. Все должно верно скомпилироваться. Если нет – дайте знать автору. Откройте localhost:8000/#/games. Вы увидите список игр. Сделано! Это все. Сомнения/Мысли Но есть некоторые сомнения: Глобальные переменные могут конкретно подставить вас, если вы не знаете, как с ними работать. Их локальное поведение не гарантирует того же на продакшене. Насколько я помню, их можно заставить работать, если правильно описан метод. Ваше приложение на Angular тесно связанно с Django. Поэтому ваше приложение не будет просто слиянием back- и фронтенда. Если ваш Django-RIP давно устарел, значит поменялись и маршруты, следовательно сконфигурируете ваш бэкенд согласно тому, как должны вести себя статические файлы. Так же вам будет необходимо заменить index.html с точкой входа Angular. Маленькие проекты не дадут вам особо попотеть, а вот большие явно заставят понервничать. Совет: единственное место, где должны сопрягаться приложение на Angular и Django сервер - это одна точка входа. Деплоймент должен быть выполнен так же, как любой обычный деплоймент приложения. Это все. Если у вас есть какие-либо вопросы и вы испытываете трудности, пожалуйста, оставьте их в комментариях в исходной статье! Чит! Автор пообещал выложить на гитхабе репозиторий со всем кодом. Оригинальная статья на английском языке. 

Здравствуйте, друзья! Провожая очень необычный 2020 год, который для многих стал проверкой на прочность и готовность к переменам, мы подвели итоги работы ITVDN и выбрали для вас все самое лучшее. Представляем вашему вниманию ТОП-10 видео курсов ITVDN, вебинаров и статей за 2020 год.  Лучшие курсы В 2020 году мы выпустили 21 видео курс по таким направлениям как C#/.NET, Java, FrontEnd разработка, Python, C++, мобильная разработка, UX/UI дизайн и другие. ТОП-10 лучших новых видео курсов в 2020 (по количеству просмотров): C# Стартовый от Александра Шевчука ASP.NET Core Web API. Практический курс JavaScript Starter Верстка сайта на FlexBox CSS React Essential UX/UI Design Essential Django Starter Spring MVC Решение практических задач на С++ Unit тестирование в Java с JUnit Лучшие вебинары В 2020 году мы провели 61 вебинар, в которых было много практики программирования, а также особенно популярные среди новичков вебинары по выбору специальности. Топ-10 вебинаров 2020 года по количеству просмотров и “лайков”: Как стать C# разработчиком в 2021 году. .NET или .NET Core? Как стать программистом? Frontend, Java, Python или .NET - что выбрать? Что нужно знать .NET разработчику в 2020? ➤ Как стать программистом на C# c нуля? Адаптивная верстка на Flexbox и Grid Что нужно знать FrontEnd разработчику в 2020? ➤ Пошаговая инструкция для начинающих JS больше не нужен?! Blazor - революция в веб-разработке Типичные ошибки в коде на примере С++, С# и Java Как прокачать английский для собеседования в IT-компанию Создание игры “Space Invaders” на C# с нуля Пишем пошаговую боевую систему на JavaScript с нуля. На примере игры Final Fantasy в 2D. Лучшие статьи В 2020 году мы опубликовали 19 статей, вот 10 самых читаемых из них:  Как не провалить своё IT-обучение Мифы о программировании и программистах Как стать Full-Stack разработчиком Что должен знать Python разработчик в 2020 году Как стать Android разработчиком FAQ начинающего программиста Что должен знать Java разработчик в 2020 году? Как стать разработчиком игр? С чего начинается создание сайтов? Специальность верстальщик Онлайн обучение программированию: подводные камни и советы   Открывайте для себя новые возможности с ITVDN! Будьте счастливы в Новом году!

Здравствуйте,  дорогие читатели. В этом уроке мы: Установим менеджер установки пакетов “Brew”; Научимся пользоваться базой данных “Mongo DB” и изучим библиотеку “Mongoose”; Установим и сконфигурируем базу данных “Mongo DB”; Научимся запускать демон (службу) “Mongod” и подключаться к ней; Научимся просматривать документы базы данных “Mongo DB” с помощью приложения “Robomongo”; Создадим REST сервисы для товаров и пользователей с использованием “NodeJS”; Научимся тестировать REST сервисы с помощью расширения “Chrome” браузера “Postman”; Итак, вы скорее всего задались вопросом, почему же я выбрал именно такие технологии для написания REST сервисов. Почему не выбрал то, что уже давно у всех на слуху, такие технологии как Web API + Entity Framework. Ответ прост, я выбрал ровно те технологии, которые явно подходят платформе, на которой мы ведем разработку macOS. Да, можно было установить Xamarin Community Edition, в нем создать ASP.NET проект и сделать сервисы на Mono.NET. Еще был вариант сделать сервисы на виндовс платформе, развернутой на виртуальной машине в веб сервере IIS с сетевым адаптером мост. Это для того, чтобы веб сайт и сервисы были доступны на хостовой машине macOS в браузере. Возможно, в одном из моих будущих видео курсов по разработке iOS приложений я буду использовать именно платформу Windows и Visual Studio для разработки REST сервисов. Но в этом уроке  мы будем делать сервисы на NodeJS,  и вы сами убедитесь в том, насколько это просто и как мало кода надо для этого написать :) В качестве среды разработки я буду использовать WebStorm, он довольно хорошо себя оправдал как один из продуктов JetBrains. В этом уроке мы не будем работать с приложением “Warehouse” под iOS, поскольку мы должны приступить к изучению библиотеки “Alamofire”. А для нее необходимы REST сервисы, которых у нас сейчас нет. Показывать работу на всяких httpbin, parse и других сервисах тестирования я не буду, этого полно в сети интернет, вы и сами будете видеть это в поиске нужной вам информации. “Alamofire” -  это асинхронная сетевая библиотека для работы с REST сервисами. В большинстве туториалов  не рассказывается, как сделать REST сервисы и клиент к ним на разных платформах. Мне хотелось бы нарушить этот стереотип и предоставить вам учебные примеры по созданию полнофункционального REST сервиса и полнофункционального iOS клиента в составе приложения “Warehouse” к нему. Проще говоря, дать готовое решение  для быстрого понимания, что и как делается. Это то, чего обычно не хватает новичкам и то, чего обычно нигде не выкладывают. Приходится самостоятельно разбираться и искать нужную информацию. Откройте “WebStorm”. Выберите в меню “File -> New Project”. Выделите тип проекта “Node.js Express App”. В поле “Location”  укажите название проекта “Warehouse” и путь, по которому вы будете сохранять данный проект. В поле “Template”  выберите “EJS”. Нажмите кнопку “Create”. Вы увидите диалоговое окно с предложением, откуда взять библиотеку “NodeJS”. Оставьте пункт по умолчанию “Download from the Internet” и нажмите кнопку “Configure”. Будет загружен из сети интернет “NodeJS”, “Express” и другие библиотеки. Панель навигации будет выглядеть у вас так: Рассмотрим, что создал нам данный шаблон. В папке “bin”  хранится файл “www”, в нем находится настройка сервера “NodeJS”, с этого файла происходит запуск нашего сервера. В папке “node_modules”  находятся библиотеки, которые были автоматически загружены  шаблоном проекта NodeJS. В папке “public”  находятся ресурсы, используемые нашим сервером (картинки, CSS стили, скрипты). В папке “routes”  находятся скрипты, которые должны содержать маршрутизацию относительно текущего URL,  введенного пользователем. Например,  файл с именем “users.js”  вызывется, когда пользователь введет в браузере URL: “http://localhost:{port}/users”. Файл “index.js”  вызывется, когда пользователь введет URL: “http://localhost:{port}”. Если сравнивать с паттерном MVC (Model View Controller), то в папке “routes”  находятся “контроллеры”. В папке “views”  находятся представления. Расширение “*.ejs”  говорит о том, что содержимое данного файла будет транслироваться через библиотеку “Express JS”. Данная библиотека создана в помощь, чтобы можно было проще создавать маршрутизацию в NodeJS  и проще создавать пользовательский интерфейс. Внутри этих файлов “*.ejs”  содержится обычная “HTML” разметка. Файл маршрутизации и файл представления должны называться одинаково, если они будут связаны. В текущем проекте связаны только “index.js” и “index.ejs”. Маршрут “users.js”  не имеет явного представления, для него преставление  генерируется средствами “NodeJS”. Наша задача создать только REST сервисы, поэтому работу с “EJS”  мы не будем рассматривать в данном уроке. Рассмотрим содержимое файла “www” в папке “bin”. На 7 строке  через библиотеку “Require JS”  мы подключаем содержимое модуля “app.js”  в текущий исполняемый модуль “www” и запускаем это содержимое на исполнение. В файле “app.js”  содержатся настройки для работы нашего сервера. На 8 строке  мы задаем режим отладки для нашего сервера. На 9 строке  мы подключаем модуль “http”  для работы с HTTP запросами. На 15 строке  задается порт “3000”, на этом порту сервер будет принимать входящие запросы к нему. На 16 строке  устанавливает этот порт для свойства “port” сервера. На 22 строке  создается сервер на основе настроек экземпляра “app”. На 28 строке  сервер запускается и начинает прослушивание на порту “3000”. На 29 строке  привязывается функция “onError”, вызываемый при возникновении ошибок. На 30 строке  привязывается функция “onListening”, вызываемая  при начале прослушивания запросов сервером. Остальной код в данном модуле не представляет для нас интереса. Чтобы запустить приложение, выполните в меню “Run -> Run bin/www”, сервер запустится. Затем откройте браузер и введите URL: “http://localhost:3000”, вы увидите приветствие. Чтобы остановить сервер, выполните в меню “Run -> Stop”. Теперь необходимо установить базу данных “Mongo DB”. Подробнее об установке  вы можете прочитать тут. Проще всего устанавливать базу данных  через менеджер пакетов “Brew”. Давайте установим его. Перейдите в браузере по адресу, на сайте будет предложено скопировать строку “/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” в терминал. Откройте терминал и скопируйте в него строку установки “Brew”. После установки  вы увидите следующее: Теперь необходимо установить базу данных “Mongo DB”. Установка базы данных через “Brew”  проще тем, что “Brew”  сам заполняет нужные переменные среды окружения и вам не надо этого делать вручную  в случае с установкой базы данных вручную. Перейдите в “WebStorm”, откройте внутри него терминал. И введите команду “brew install mongodb && mongod”, данная команда скачает и установит “Mongo DB”, а также выполнит настройки по умолчанию для демона “mongod”. Выполните в терминале команду “sudo mkdir -p /data/db”. Введите свой пароль и нажмите кнопку “Enter”. Данная команда создаст папку “data” и в ней папку “db”, эта папка используется по умолчанию для добавления базы данных “Mongo DB”. Команда “sudo”  используется, чтобы выполнить остальную часть команды от имени администратора.       Теперь необходимо установить в наш проект библиотеку “Mongoose”  для осуществления возможности работы с базой данных их кода приложения сервера . Выполните в терминале команду “npm install mongoose”. Документацию по этой библиотеке можно почитать тут:  Данную команду мы выполняли через  встроенный в NodeJS  менеджер пакетов, так как устанавливаем данную библиотеку исключительно для нашего проекта, а не глобально. Откройте терминал, введите команду “mongod”. Данная команда запускает сервер базы данных “Mongo DB”, который принимает входящие подключения на порту “27017”. На картинке выше  вы можете в этом убедиться “waiting for connections on port 27017”. Демон запустили, теперь перейдите в “WebStorm”, в терминале внутри введите команду “mongod –version”, вы увидите версию базы данных “Mongo DB”, которая была установлена на ваш компьютер. Теперь необходим клиент с GUI  для работы с базой данных. Откройте браузер, перейдите по адресу, нажмите кнопку “Download”, скачайте и установите приложение. После установки приложения  откройте его. Нажмите на иконку: Откроется приложение “Robomongo”. Нажмите кнопку “Connect to local or remote Mongo DB instance”. Откроется диалоговое окно подключения к базе данных. Нажмите кнопку “Create”. Откройте диалоговое окно настройки подключения к базе данных. Заполните настройки, как показано на картинке выше и только на вкладке “Connection”, нажмите кнопку “Save”. После этого в окне “Mongo DB connections”  у вас появится добавленное подключение. Выделите его и нажмите кнопку “Connect”. Нажмите правой кнопкой в панели навигации по “Warehouse” и в контекстном меню выберите пункт “Create Database”. В поле “Database Name”  введите “warehouse”, нажмите кнопку “Create”. На картинке выше  видно, что база данных “warehouse”  была успешно добавлена. Супер :) Теперь надо добавить в проект модель и схему базы данных, они создаются с помощью библиотеки “Mongoose”. Перейдите в “WebStorm”. В панели навигации, нажмите правой кнопкой по “Warehouse”, в контекстном меню выберите “New -> Directory”. Создайте папку с именем “models”. Создайте в папке “models”  модули “Product.js” и “User.js”. А в папке “routes” создайте модули “auth.js”, “products.js”. Откройте модуль “Product.js”, заполните его, как показано на картинке ниже: На 1 строке  мы подключаем библиотеку “mongoose” и создаем ее экземпляр с именем “mongoose”. На 2 строке  мы правым операндом создаем схему таблицы товаров и присваиваем ее левому операнду с именем “ProductSchema”. Таблица товаров содержит поля: скрытое поле “_id”, типа “String”, в этом поле содержится уникальный идентификатор строки. скрытое поле “__v”, типа “Number”, в этом поле содержится версия API  по умолчанию 0. Версия API  нужна для того, чтобы можно было менять реализацию сервисов и иметь несколько версий  для обратной совместимости. поле “productImage”, типа “String”, тут будет храниться название картинок из нашего проекта под iOS, названия от “tool001” до “tool012”. поле “productName”, типа “String”, тут будет храниться название товара. поле “productDescription”, типа “String”, тут будет храниться описание товара. На 7 строке  мы правым операндом создаем экземпляр модели с именем “Product” и указываем создать экземпляр на основе схемы, описанной в экземпляре “ProductSchema”.      Библиотека “mongoose”  создает данный экземпляр и присваивает его левому операнду. Свойство “exports”  содержит экземпляры объектов, которые  будут доступны из модуля  при подключении его через библиотеку “Require JS”. Откройте модуль “User.js”, заполните его, как показано на картинке ниже: На 1 строке  мы подключаем библиотеку “mongoose” и создаем ее экземпляр с именем “mongoose”. На 2 строке  мы правым операндом создаем схему таблицы товаров и присваиваем ее левому операнду с именем “UserSchema”. Таблица пользователей содержит поля: скрытое поле “_id”, типа “String”, в этом поле содержится уникальный идентификатор строки. скрытое поле “__v”, типа “Number”, в этом поле содержится версия API  по умолчанию 0. Версия API  нужна для того, чтобы можно было менять реализацию сервисов и иметь несколько версий для обратной совместимости. поле “userName”, типа “String”, тут будет храниться логин пользователя. поле “userPwd”, типа “String”, тут будет храниться пароль пользователя. поле “userDesc”, типа “String”, тут будет храниться описание пользователя. На 7 строке  мы правым операндом создаем экземпляр модели с именем “User” и указываем создать экземпляр на основе схемы, описанной в экземпляре “UserSchema”. Затем присваем созданный экземпляр свойству “exports” данного модуля. Откройте модуль “auth.js”, заполните его в соответствии с содержимым ниже: На 1 строке  подключаем модуль “express” и создаем его экземпляр с именем “express”. На 2 строке  создаем экземпляр маршрутизатора запросов с именем “router”. На 3 строке  подключаем модуль “User.js” и создаем его экземпляр с именем “User”. На 4 строке  строим маршрут типа “http://localhost:3000/auth/”. На экземпляре “router”  вызываем функцию “post”. Вызов данной функции говорит, что созданный с помощью него маршрут будет доступен только через HTTP глагол POST.       Первым аргументом задаем маршрут, вторым аргументом задаем функцию обработчик, который будет вызван при переходе по данному маршруту с учетом заданного HTTP глагола. Т.е. когда пользователь отправит POST запрос по адресу. Функция обработчик принимает три аргумента. Первый аргумент “request”  содержит экземпляр запроса по данному маршруту.     Второй аргумент “response”  содержит экземпляр ответа по запросу по данному маршруту. В этот экземпляр можно добавлять любой ответ, который вы хотите, чтобы пользователь получил. Третий аргумент “next”  содержит текущий итератор в стеке запросов по маршрутизации. Данный экземпляр необходим, чтобы была возможность перейти на следующую итерацию в стеке маршрутизации. Сам по себе сервер NodeJS  работает асинхронно и никогда никого и ничего не ждет, это нужно учитывать при работе с ним. На 5 строке мы выводим сообщение на консоль. На 6 строке мы на экземпляре “User” вызываем функцию “find”, в которую единственным аргументом передаем специальную функцию обработчик, в которой будет содержаться результат данной операции. Функция “find”  получает все записи из таблицы “User” и присваивает их в JSON формате  второму аргументу функции обработчика с именем “data”. Для  примера, в “data” может содержаться такой JSON: “[{_id:'789787sdfsd78sdfsd7', __v:0, userName: “Test1”,...},{_id:'4444447sdfsd78sdfsd7', __v:0, userName: “Test2”,...}]”. Где квадратные скобки - это массив, а в фигурных скобках - это экземпляр JSON. В аргументе “err”  содержится экземпляр ошибки, если произошла ошибка при выполнении данной функции “find”. На 7 строке мы создаем экземпляр объекта с именем “res”, данный объект содержит свойство “Error”, которое инициализировано значением по умолчанию “Authorization Error”. Как вы уже поняли, это текст ошибки, который вернется на клиент в случае ошибки авторизации клиента. На 8 строке мы проверяем, если при получении данных через функцию “find” произошла ошибка и аргумент “err” не содержит значение “undefined”, мы обращаемся к экземпляру “next” и говорим серверу выполнить следующую итерацию маршрутизации и вернуть ошибку на клиент. На клиент средствами NodeJS  будет возвращена “Stack Trace” ошибки. На 9 строке, если ошибки не было, мы выполняем цикл foreach по массиву JSON объектов “data”. В функцию “forEach”  передается специальная функция, которая содержит три аргумента. Первый аргумент “item”  содержит текущий итерируемый экземпляр JSON. Второй аргумент “i” содержит позицию итератора и имеет тип Number. Третий аргумент “data”  содержит исходный массив объектов JSON, по которым проводится итерация. На 10 строке  мы задаем условие поиска пользователя по его имени и паролю в списке всех пользователей полученной функцией “find”. В условии сравниваются имя и пароль, которые пришли в POST запросе на сервер, с именем и паролем, полученным от функции “find”. На 12 строке, если пользователь был найден, мы присваиваем экземляру “res”  JSON объект найденного пользователя. На 15 строке  мы обращаемся к экземпляру ответа “response”, вызываем на нем функцию “json”, которая принимает данные и возвращает ответ на клиент в JSON формате. В аргумент данного метода мы передаем или экземпляр найденного пользователя, или экземпляр ошибки, что пользователь не найден и авторизация не удалась. На 18 строке  мы экспортируем из модуля экземпляр маршрутизации “router”. Откройте модуль “index.js”. Заполните его в соответствии с содержимым ниже: На 1 строке  подключаем модуль “express” и создаем его экземпляр с именем “express”. На 2 строке  создаем экземпляр маршрутизатора запросов с именем “router”. На 3 строке  строим маршрут типа “http://localhost:3000/index/”, доступный через HTTP глагол GET. На 4 строке, на экземпляр ответа вызываем функцию “render”. Данная функция возьмет представление, указанное в первом аргументе функции и вернет его на сторону клиента. Вторым аргументом задается словарь, в который можно добавить свойства со значениями, к которым можно будет обращаться со стороны представления. На 6 строке  мы экспортируем из модуля экземпляр маршрутизации “router”. Откройте модуль “index.ejs”. Заполните его в соответствии с содержимым ниже: Библиотека Express JS позволяет нам обращаться к свойствам, которые мы указали во втором аргументе метода “render”  путем добавления следующей конструкции “<%= Название_Свойства %>”. На этапе отрисовки страницы данные конструкции будут заменены на значение указанного свойства. Откройте модуль “products.js”, заполните его в соответствии с содержимым ниже: На 1 строке  подключаем модуль “express” и создаем его экземпляр с именем “express”. На 2 строке  создаем экземпляр маршрутизатора запросов с именем “router”. На 3 строке  подключаем модуль “Product.js” и создаем его экземпляр с именем “Product”. На 4 строке  строим маршрут типа “http://localhost:3000/products/”. Данный маршрут будет доступен по HTTP глаголу GET. На 5 строке  мы вызываем на экземпляре “Product”  функцию “find”. Внутри функции мы проверяем, были ли ошибки, и возвращаем в ответе JSON массив со списком всех товаров. На 10 строке  строим маршрут типа “http://localhost:3000/products/”. Данный маршрут будет доступен по HTTP глаголу POST. На 11 строке  мы вызываем на экземпляре “Product”  функцию “create”. Внутри функции мы проверяем, были ли ошибки, и возвращаем в ответе JSON объект успешно созданного товара. На 16 строке  строим маршрут типа “http://localhost:3000/products/{_id}” (например, “http://localhost:3000/products/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу GET. На 17 строке  мы вызываем на экземпляре “Product”  функцию “findById”. Из названия функции ясно, что функция выполняет поиск по идентификатору товара. Для поиска используется скрытое поле “_id” в модели “Product”, объявленной в модуле “Product.js”. Внутри функции мы проверяем, были ли ошибки, и возвращаем в ответе JSON объект успешно найденного товара. На 23 строке  строим маршрут типа “http://localhost:3000/products/{_id}” (например, “http://localhost:3000/products/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу PUT. На 24 строке  мы вызываем на экземпляре “Product”  функцию “findByIdAndUpdate”. Из названия функции ясно, что выполняется поиск товара по его идентификатору “_id”, затем, в случае если найден, обновляются все его поля, кроме скрытых полей. В ответе возвращается JSON объект успешно обновленного товара. На 30 строке  строим маршрут типа “http://localhost:3000/products/{_id}” (например, “http://localhost:3000/products/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу DELETE. На 31 строке  мы вызываем на экземпляре “Product”  функцию “findByIdAndRemove”. Из названия функции ясно, что выполняется поиск товара по его идентификатору “_id”, затем, в случае если найден, товар удаляется. В ответе возвращается удаленный JSON объект. Откройте модуль “users.js”, заполните его в соответствии с содержимым ниже: В модуле “users.js”  я не вижу смысла расписывать подробно, что происходит, поскольку тут все то же самое, что и происходило в модуле “products.js”, рассмотренном выше. Разница только в том, что мы используем другую модель данных “User”. Опишу только доступные маршруты. На 4 строке  строим маршрут типа “http://localhost:3000/users/”. Данный маршрут будет доступен по HTTP глаголу GET. На 10 строке  строим маршрут типа “http://localhost:3000/users/”. Данный маршрут будет доступен по HTTP глаголу POST. На 16 строке  строим маршрут типа “http://localhost:3000/users/{_id}” (например, “http://localhost:3000/users/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу GET. На 23 строке  строим маршрут типа “http://localhost:3000/users/{_id}” (например, “http://localhost:3000/users/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу PUT. На 30 строке  строим маршрут типа “http://localhost:3000/users/{_id}” (например, “http://localhost:3000/users/789w66s2322kks4676s” ). Данный маршрут будет доступен по HTTP глаголу DELETE. Откройте модуль “app.js”, обновите его в соответствии с содержимым ниже: Конкретно в модуль “app.js”  были внесены следующие изменения. С 8 по 11 строку  были подключены модули “index.js”, “users.js”, “products.js”, “auth.js”. На 13 строке  был подключен модуль “mongoose”. На 14 строке  мы задаем свойство “Promise” в значение “global.Promise”, чтобы начать обмениваться сообщениями с базой данной “Mongo DB”. На 15 строке  мы подключаемся к базе данных “Mongo DB” c названием “warehouse”, мы ее ранее создавали в приложении “Robomongo”. Источник данных “mongodb://localhost/warehouse” можно разбить так: “mongodb://” протокол взаимодействия (аналоги “http://”, “tcp://”, “file://”). “localhost” - это адрес машины, на которой хостится база данных. “warehouse” - имя базы данных. На 16 строке  метод “then”  вызывается в случае успешного подключения к базе данных. На 17 строке  метод “catch”  вызывается в случае сбоя подключения к базе данных. С 33 по 36 строку мы задаем доступные глобальные маршруты, которые будет обрабатывать сервер. Надеюсь, все помнят разницу между сервером и сервисами, это не одно и то же. Сервер - это просто приложение, которое внутри себя способно содержать различные ресурсы. Сервер может запускать внутри себя различные потоки для обработки данных. Сервис - это функционал, который как раз запускается в отдельном потоке внутри сервера. Сам по себе сервис без наличия приложения ,в котором его можно разместить, работать не будет. В случае с WebAPI сервером является Microsoft IIS или отдельно стоящее исполняемое приложение с функцией self  хостинга. Мы закончили написание сервера. Запустите демон “mongod” в терминале. Запустите сервер. Вы увидите обновленное приветствие. Я бы рекомендовал вам прослушать курс “Angular JS”, автор Дмитрий Охрименко. Это один из лучших курсов, которые я когда-либо слушал. После данного курса вы без особых проблем сможете сделать клиентскую часть для сервера на “Angular JS”. Теперь давайте научимся тестировать наши REST сервисы. Тестировать сервисы можно и через Fiddler, но на macOS  у него есть проблемы с отрисовкой и работой. Поэтому откройте браузер и перейдите по адресу. “Postman” - это аналог “Fiddler”, доступный в качестве расширения для браузера “Google Chrome”. После установки расширения “Postman” откройте его. Выполним первый запрос к сервису “users” по HTTP глаголу GET. Заполните поле адрес, выберите глагол “GET”, нажмите кнопку “Send”. Результат придет - пусто. Обратите внимание, что в терминале “WebStorm” тоже пишется логирование вызовов при обращения к сервисам. Откройте приложение “Robomongo”, подключитесь к базе данных. Разверните папку “Collections” базы данных “warehouse”, выполните щелчок правой кнопкой мыши по таблице “users”, в контекстном меню выберите “View Documents”. В “Mongo DB” нет колонок, там есть всего одна колонка, в которой хранится JSON объект. Строки называются документами. Причем, в каждую строку одной таблицы можно класть абсолютно разный по структуре JSON объект. База данных позволяет такую операцию. Видим, что данных нет, это не удивительно, ведь мы еще ничего не добавляли. Давайте добавим. Перейдите в “Postman”, выберите глагол “POST”. Выберите “Content-Type” - “x-www-form-urlencoded”. Внимание, через другие типы “form-data”  “raw” работать не будет. Заданные свойства “userName”, “userPwd”, “userDesc” будут отправлены в запросе как JSON объект “{ userName: 'admin', userPwd: 'abc123!', userDesc: 'Administrator' }”. Нажмите кнопку “Send”. Придет ответ: В ответе мы видим JSON объект модели “User”, созданной на сервере. Перейдите в приложение “Robomongo”, выполните пункт контекстного меню “View Documents” на таблице “users”. Отлично, у нас появился первый пользователь :) Перейдите в “Postman”, выберите HTTP глагол “GET”. Нажмите кнопку “Send”. Вы увидите такой результат. Обратите внимание на квадратные скобки, в ответе пришел массив JSON объектов, а не один объект. Теперь давайте изменим пароль пользователю “admin”, на “12345678”. Нам понадобится идентификатор пользователя, выделите и скопируйте значение свойства “_id”. Выберите HTTP глагол “PUT”. Обновите данные так, как показано ниже. Обратите внимание на добавление идентификатора пользователя после основного маршрута “../users/”. Нажмите кнопку “Send”. В ответе получим старый JSON объект до внесения изменений. Теперь для того, чтобы посмотреть измененный объект, воспользуемся сервисом , который возвращает пользователя по его идентификатору “_id”. Выберите HTTP глагол “GET”, обновите адрес, добавьте в конец адреса идентификатор пользователя. Нажмите кнопку “Send”. Получим такой результат. Видим, что пароль пользователя был успешно обновлен и мы получили в ответе один JSON объект, а не массив пользователей. Теперь попробуем удалить пользователя. Адрес оставьте тот же. Выберите HTTP глагол “DELETE”  и нажмите кнопку “Send”. Видим, что в ответе содержится JSON объект удаленного пользователя.             Теперь проверим, доступен ли пользователь после удаления. Адрес оставьте тот же. Выберите HTTP глагол “GET”, нажмите кнопку “Send”. Видим, что пользователь действительно был удален. Также можете проверить это в приложении “Robomongo”.             Теперь приступим к тестированию сервиса “products”.             Получим список товаров. Товаров нет. Добавим первый товар. Обновим описание товара. Получим обновленный товар по его идентификатору. Удалим товар. На этом мы завершаем урок. К данной статье прикреплен архив с готовым сервером на NodeJS , в помощь  учащимся :) На следующем уроке мы: выполним рефакторинг проекта “Warehouse” под “iOS”; научимся пользоваться CollectionViewController; научимся пользоваться библиотекой “Alamofire”, в конце урока будут доступны исходники полноценного рабочего приложения; научимся сохранять объекты в настройки телефона и извлекать их; реализуем функциональность для работы со всеми сервисами, созданными в данном уроке; добавим представление регистрации; добавим представление редактирования пользователей. Материалы к статье тут.

Введение В прошлой статье мы начали знакомиться с особенностями планирования задач и встреч, используя раздел «Календарь». В этой статье мы определим основные 5 правил, которые позволят более эффективно управлять собственным временем.  Правило 1. Разделяйте задачи на несколько категорий:  «Жесткие» задачи – выполнение которых назначено на заранее известное время и дату, и у вас нет возможности их перенести во времени и пространстве. Зачастую, такие встречи подразумевают вашу договоренность о точном времени с кем-либо, будь то ваш руководитель, клиент, партнер и т.д. «Динамические» задачи – не имеющие четких временных ограничений, к примеру, «Забрать костюм из химчистки: сегодня». У вас есть возможность сделать это по пути на работу, во время обеденного перерыва, возвращаясь в офис после встречи с партнером, вовсе после работы по пути домой или даже воспользовавшись курьерской службой. Главное, что это нужно сделать сегодня. «Плавающие» задачи – не имеющие четкого срока выполнения, т.е. то что нужно сделать с некоторыми затратами по времени. К примеру: «Заказать новую книгу на Amazon» - вам нужно 30 минут чтобы выбрать книгу и оформить заказ, вы можете сделать это в любое свободное время, и у вас нет четких дедлайнов. Правило 2. Поскольку встречи бывают разовые (как, скажем, собеседование с кандидатом), а могут быть регулярными, для управления повторяющимися событиями можно пользоваться автоматическими повторами: Встречи, в которых настроено повторение, будут отображаться в календаре с круговыми стрелками в правом нижнем углу. Правило 3. Оставляйте не менее 30-40% времени в вашем резерве. У вас всегда будет потребность корректировать планы в зависимости от обстоятельств. Всегда помните, что «мы планируем что-то одно, а жизнь вносит свои коррективы». Правило 4. Для работы вне офиса стоит синхронизировать свой календарь со своим смартфоном, если у вас на работе не приветствуется концепция BYOD, распечатайте свой план на неделю и поместите в ежедневник. Так у вас будет шпаргалка, по которой вы сможете вести свои дела без промедлений и опозданий. Правило 5. Используйте четко сформулированные ключевые категории и определения для каждого проекта или направления. Правильный вариант. Неправильный вариант. Соблюдая эти простые правила, вы сможете упростить процесс планирования и сделать его более прозрачным для себя и своих коллег. В следующей статье мы детально рассмотрим процесс создания задачи или события в календаре и приглашения других участников.

Angular – технология с полным набором инструментов и к тому же с лучшими вариантами подхода к решению. Кому-то он подходит, а кому-то – нет. С другой стороны, React – небольшая технология, которая необходима вам только при создании какого-то приложения.  Обе технологии имеют свои достоинства и недостатки. Какая из них подойдёт вам больше? Попытаемся выяснить в этой статье. Технологии Вот основные технологии, о которых я буду говорить: Angular React Vue Кривая обучения Допустим, вы знаете JavaScript + ES2015 достаточно хорошо. Какую следующую технологию будет проще выучить? Vue – наилучший выбор, если вы ищите легкости в процессе изучения технологии. React – менее абстрактный, тем не менее, вам понадобится больше времени, чтобы изучить best practices, так как есть много вариантов написать одно и то же или ошибиться. А вот после изучения Angular вы также будете знать всё, что связанно с ним (typescript, MVC…). Angular - большая технология и учить придётся долго.   Масштабируемость Angular - легко масштабируемый благодаря своему дизайну, который так же хорош, как и мощная командная строка. React требует больше проверок и поэтому более масштабируемый, чем Vue и, я думаю, что частично это правда. Vue идёт сразу после React. Он хорош, однако ему не хватает лучших практик масштабируемости, из-за чего вы получаете очень запутанный код. Совместимость с другими технологиями React. Несмотря на то, что он не работает с DOM-деревом, он основан на чистой JavaScript логикe и популярeн настолько, что содeржит в сeбe альтeрнативы библиотeкам, работающим с DOM. Vue прекрасно работает как с ДОМ-деревом, так и с JavaScript. Второе место занимает лишь потому, что у него меньше библиотек, которые могли бы быть действительно полезны для обоих (как для ДОМ, так и для JavaScript). Angular мог бы быть лучше, если бы не typescript, который требует строгой типизации.   Инструменты React, Angular and Vue. Все перечисленные технологии имеют отличные CLI и работают с любым инструментом по типу webpack. Пользователи и популярность React точно стал наиболее популярным в 2016, когда его стали использовать англоговорящие frontend и full stack разработчики. React – хороший выбор для мобильных и даже десктопных приложений на JavaScript. Vue и Angular. Vue – потому что он очень быстро развивается. Angular – потому что он создан Google, а его предшественник Angular 1 был когда-то очень популярен. Востребованность React и Angular. В зависимости от того, где вы находитесь, зависит, какая технология будет доминировать. Angular больше используют в Азии, особенно в Индии, а React – в англоязычных странах, таких как US и UK. Vue менее популярен и не поддерживается большими компаниями, поэтому остальные отдают предпочтение Angular и React. Производительность По этому параметру не ставлю ранги, так как все они сопоставимы. Возможно, React станет немного быстрее, когда полностью будет поддерживать Fiber, но сейчас существует только бета-версия. Перспективы для компаний Angular имеет open source лицензию. Он поддерживается Google, что, возможно, делает его лучшим выбором для компании, и разница между проектами Angular невелика.    React был бы очень хорошим выбором, если бы не лицензия с патентом. Однако, существуют бесплатные альтернативы, которые работают также, как и React. Например, Infernojs или мой любимый rax. Vue – не дитя большой компании, это очень успешный сторонний проект одного человека. Компании часто игнорируют его, хотя, возможно, и не стоило бы. Вне сети Рендеринг –  как раз то, о чем можно много говорить. Все технологии способны осуществлять его, но некоторые справляются лучше, чем другие. React – лучший выбор благодаря react native, alibaba rax, reactWindows и next.js. Vue подойдёт vue-разработчикам, которые предпочитают разработку под мобильные устройства. Спасибо за это alibaba weex. У Angular есть ionic 2 и nativescript, но эти технологии не позволяют достичь производительности react native. Простота и длина кода Vue имеет предварительно встроенные привязки данных и MVC модель, его легче настроить, нежели Angular и React. React пугающе прост для понимания, но нужно реально много времени, чтобы настроить react project. Angular совсем непростой. Эта сложность вызывает много путаницы 3rd party libraries и синтаксиса. Время разработки Vue, безусловно, лёгок в установке и не требует много изменений или синтаксиса, за что его и любят. Он был создан для борьбы с утомительной работой. React настраивается дольше, но после начала работы над приложением будет легко добавлять новые фичи. Angular хоть и является весьма конкурентоспособным, но количество ненужного синтаксиса, который он требует для работы простых вещей, отбрасывает его на последнее место. Размер Vue - наименьший и много в себе содержит. Вы можете подумать, что это не имеет значения, но если речь пойдёт о дешёвом Android 3G смартфоне, то вы уже не будете так уверены. React - больше чем Vue, но все же меньше, чем Angular. Angular - больше всех предыдущих, что вызывает увеличение времени загрузки и проблемы производительности на мобильных устройствах. Будущее Вот лично мои прогнозы для этих технологий на 2017 год: Vue будет приобретать популярность и всё большее количество разработчиков переключится на него. Вполне вероятно, что это может заставить крупные компании продвигать и поощрять Vue. Команда React представит Fiber  и сделает React быстрее, чем Vue и Angular. Создатели Angular попытаются привлечь больше людей, но, скорее всего, им это не удастся. Так что же лучше для вас? Подводя итог, можно сказать, что нет идеального решения, и никогда не будет. Тем не менее, вот полезные советы, которые помогут вам сделать выбор: Если вы разработчик «до мозга костей», тогда попробуйте все и выбирайте между Vue или React, доверяйте своему чувству. Если вы новичок в разработке, выбирайте или Vue, или React. Angular подойдёт компаниям с большими командами. Google -> Angular. Если любите простоту, тогда выбирайте Vue. Если нравится использовать шаблоны, тогда выбор стоит между Vue или Angular. Если предпочитаете JavaScript и JSX, попробуйте поработать с каждой технологией. Если вы работаете с Typescript, используйте Angular или Vue. Выбирайте подходящую технологию поскорее, не стоит пребывать в неопределённости. Я сомневался несколько месяцев, и это было невесело. Я решил пожертвовать популярностью и выбрал то, что считал для себя наилучшим вариантом – Vue. Ютубер funfunfunction сказал лучшее, что я когда-либо слышал про JS framework fatigue: «Существует точка в вашей карьере программиста, когда вы понимаете, что это не лучший инструмент». Здесь нет правильного или неправильного выбора, его просто необходимо сделать. Так что, продолжайте учиться и исследовать. Все будет учить Вас чему-то новому. Оригинал статьи на английском языке. 

Язык программирования Java и ООП Алгоритмы и структуры данных Шаблоны проектирования Язык запросов SQL Технологии JDBC & Hibernate Java Enterprise Edition и фреймворк Spring MVC SOLID Модульное тестирование Git & GitHub Scrum Английский язык Выводы   Мы вновь приветствуем вас, друзья! На этот раз в нашей рубрике “Что должен знать разработчик...” под прицелом оказался такой многофункциональный язык программирования, как Java. В современном IT-рынке область веб-разработки является очень популярной, поэтому сегодня вы узнаете, каким стеком технологий должен обладать потенциальный соискатель вакансии Java веб-разработчика. Не будем медлить - начинаем!   Язык программирования Java (“Джава”) Опираясь на данные Stack Overflow Developer Survey (около 90 000 опрошенных респондентов), можно сказать, что язык Java входит в пятерку самых популярных. Это универсальный объектно-ориентированный язык программирования, который используется в создании различного информационного продукта: веб-приложений (серверной части); мобильных приложений под Android; облачных хранилищ данных; настольных приложений; компьютерных игр; программного обеспечения для банковских систем и т. д. Java был создан компанией Sun Microsystems в 1995 году. Он достаточно быстро завоевал популярность среди программистов и стал использоваться в создании клиентских приложений и серверного программного обеспечения. Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными.    Что конкретно необходимо знать? Языком Java следует владеть на достаточно хорошем уровне, поэтому и список необходимых для освоения тем будет немаленьким.  Среди обязательных базовых разделов: машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, объекты и классы, списки, обработка исключений, суперкласс Object, обобщения (Generics), работа с памятью. Далее идут более продвинутые темы: коллекции, карты (Map), основы вывода (IO, NIO), методы работы со строками (String, StringBuilder, StringBuffer), регулярные выражения, Date API, рефлексия, ClassLoader, аннотации, Javadoc, VarArgs, сериализация, клонирование, потоки и интерфейс Runnable, лямбда выражения, Stream API. Стоит знать, что совокупность вышеперечисленных разделов Java + ООП парадигмы в среде джавистов именуется Java Core (от англ. “core” - ядро). Дабы закрепить знания и не лишиться полученных навыков написания кода мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания.   Объектно-ориентированное программирование (ООП) Объектно-ориентированное программирование - это методология разработки программного обеспечения, в основе которой лежат четыре главных принципа: абстракция, инкапсуляция, наследование и полиморфизм. Поскольку Java является объектно-ориентированным языком, необходимость изучения и полного понимания ООП парадигм обязательно. Однако, есть и приятная новость: все принципы быстро и легко усваиваются во время изучения Java.   Алгоритмы и структуры данных Понимание алгоритмов и структур данных  - обязательное требование для любого программиста. Это необходимый фундамент, благодаря которому разработчик обучается написанию хорошего исходного кода путем подбора оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы сможете управлять сложностью своих программ, делая их более доступными для понимания, а также разрабатывать высокопроизводительные приложения, которые будут рациональнее работать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java.   Шаблоны проектирования Паттерны (они же шаблоны) представляют собой архитектурные конструкции, которые описывают типичные способы решения распространенных задач, возникающих в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако виртуозно ими владеть должен архитектор ПО, а не рядовой разработчик. Обычно в одном проекте используется небольшое количество паттернов, поэтому вам достаточно знать лишь самые популярные из них.   SQL Structured Query Language - декларативный язык структурированных запросов, который создан для взаимодействия с базами данных. Особенность SQL состоит в том, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Каждый программный продукт подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) или внесение в БД информации о новом зарегистрированном пользователе - умение работать с данными одинаково важно во всех сферах разработки, разве что за исключением FrontEnd. Также изучите одну из систем управления базами данных (СУБД). Это может быть  MySQL либо PostgreSQL. Их главное отличие от SQL в том, что SQL - это язык запросов, а MySQL/PostgreSQL - реализации СУБД, имеющие свой диалект языка SQL.   XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать данные для удобства их дальнейшей обработки. Прежде всего нацелен на использование в интернет среде и являет собой формат хранения и передачи данных на сервер. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов.   JDBC & Hibernate Java Database Connectivity - это стандарт взаимодействия Java-приложений с различными СУБД. Простыми словами, JDBC имеет единый интерфейс, позволяющий любой Java-программе работать с любой базой данных одинаковыми методами. Для реализации этого универсального взаимодействия применяются специальные драйвера (не те, которые мы привыкли устанавливать на наши компьютеры). Как результат - программа никак не меняется от переключения с одной базы данных на другую, что дает JDBC весомую значимость в Java разработке. Hibernate - это ORM (от англ. “Object-Relational Mapping” - объектно-реляционное отображение) фреймворк, главная задача которого отображение объектно-ориентированной модели данных в традиционные реляционные базы данных, то есть, связывание ООП с реляционной БД. Представляет собой программное обеспечение с открытым исходным кодом.   Java EE / Spring Java Enterprise Edition - это платформа для создания корпоративных решений с помощью языка Java. Чаще всего на ней разрабатывают различные веб-приложения и веб-сервисы. Java EE включает в себя множество спецификаций (JSP, EJB, CDI, JPA, Servlet и прочие), главная задача которых состоит в обеспечении масштабируемости приложений и целостности данных во время работы системы. Spring - популярный фреймворк с открытым исходным кодом, который используют для создания веб-приложений на Java. Он дает Java-разработчикам большую свободу в проектировании приложений, предоставляя средства решения проблем корпоративного масштаба. Является альтернативой Java EE в создании веб-сервисов. Spring имеет обширную документацию и достаточно прост в использовании. Максимальной популярностью на данный момент пользуется именно Spring. Его лучше всего выбирать при создании небольших приложений или программ с микросервисной архитектурой. Java EE больше подходит для разработки легко масштабируемых монолитных приложений.   MVC (Model-View-Controller) Архитектурный шаблон, который предусматривает разделение приложения на три компонента: Модель, Представление, Контроллер, что способствует реализации концепции распределения и закрепления ответственности за каждым компонентом. Данный подход позволяет упростить и ускорить разработку проектов, благодаря чему паттерн MVC широко применяется множеством разработчиков. Java EE и Spring имеют специальные MVC-надстройки, которые обеспечивают удобное использование данного шаблона.   Scala (опционально) Строго типизированный мультипарадигмальный язык программирования. Одной из его особенностей является комбинирование стандартного ООП подхода с функциональным программированием. Scala, как правило, применяется в мощных системах с большим объемом данных и внушительным количеством пользователей. Данный язык программирования подходит для машинного обучения и анализа данных. Scala не является обязательной к изучению для Java программистов. Однако, ее знание будет огромным плюсом на собеседовании. В дальнейшем вы сможете переквалифицироваться в полноценного Scala разработчика, имея необходимый бэкграунд, полученный во время Java разработки.   SOLID Акроним, который обозначает пять основных принципов объектно-ориентированного программирования. Следование стандарту SOLID позволяет создавать легко поддерживаемые и масштабируемые проекты с удобной архитектурой и минимальным количеством “запахов кода”. Также знание данных принципов показывает грамотность разработчика, уровень его профессионализма. Это безусловно сыграет вам на руку на собеседовании.    Unit тестирование Тот самый тип тестирования, который берет на себя не тестировщик, а сам программист. Идея - в написании тестов под каждую нетривиальную функцию либо метод. Цель модульного тестирования — изолировать отдельные части программы и показать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию и соответствующее обнаружение ошибок.   Git & GitHub Git - наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. В роли главного конкурента Git выступает SVN (централизованная система, в отличие от Git). Помимо этого, стоит уметь работать с сервисом онлайн-хостинга проектов, использующих систему контроля версий. В данном случае это GitHub. В тандеме с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы.   Scrum Методология ведения разработки программного обеспечения, которая относится к семейству гибких (Agile). Исповедует командный подход к созданию ПО, короткие итерации, частые выпуски новых версий продукта, учет изменений и непрерывное улучшение в процессе работы. Scrum применяется не только в IT, но и в производстве, маркетинге, консалтинге и прочих сферах. Множество команд разработки ПО успешно применяют данную методологию, поэтому ее важность сложно переоценить.   Английский язык Знание английского языка - естественное требование для каждого разработчика в IT, поскольку большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете самостоятельно вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Выводы Таким образом мы с вами рассмотрели основные технологии, которыми должен владеть кандидат, стремящийся занять должность Java разработчика. Сам Java уже много лет прочно удерживает высокие позиции во всевозможных рейтингах языков программирования и покидать свой пьедестал не собирается, о чем свидетельствуют следующие статистики: dou.ua (Украина), tiobe.com (Tiobe - нидерландская компания, которая занимается оценкой качества программного обеспечения),  вышеупомянутый Stack Overflow Developer Survey и другие информационные ресурсы. Несмотря на то, что в статье мы была затронута именно путь веб-разработчика на Java, данный язык успешно применяется в разработке Android-приложений (Kotlin и Objective-C), разработке объемных программных систем; также на нем можно писать настольные игры (хотя он не имеет таких инструментов создания игр, как у платформы .NET). Java достаточно универсален и способен на практически все что угодно в руках умелого программиста. А таковым вы можете стать с помощью наших курсов, направленных на интенсивное изучение языка Java. Программа обучения предлагает 23 видео курса общей продолжительностью более 160 часов. Также ITVDN предоставляет интерактивный тренажер, с помощью которого можно отточить навыки написания кода на различных языках, в том числе и на Java.   Если вам понравилась эта статья, поделитесь информацией с теми, кому она может быть интересна. Пишите в комментариях, на какие еще вопросы, связанные с выбором специальности и планированием обучения вы хотите получить ответы. Мы постараемся ответить на них в наших новых обзорах.

Введение В августе 2014 года были обновлены продукты, работающие на .NET, а именно: ASP.NET vNext, .NET Native и RyuJIT. ASP.NET vNext ASP.NET vNext - обновленная версия ASP.NET, используемая для создания клиент-серверных приложений. Разработчики продолжают добавлять новые функции и улучшают разработку ASP.NET vNext приложений, написанных в Visual Studio 14. Список преимуществ, почему ASP.NET vNext лучше выбирать в качестве веб-платформы: Единое и улучшенное API для MVC и Web API. Значительно улучшена производительность при запуске и пропускная способность. Полная поддержка .NET Framework. Компоненты ASP.NET vNext не надо регистрировать, потому что конфигурационные сведения уже встроены. Поддерживает работу с Mono на Mac и Linux Новые функции Минимальный Формат Проекта «Minimal Project Format» Формат проекта ASP.NET (kjproj) также был обновлен. Новый функционал теперь будет влиять на работу внутри проекта Visual Studio: Легкий контроль всех исходников, так как kproj не будет изменятся при добавлении, перемещении или переименовании файла. Улучшенный опыт использования командной строки Visual Studio и ASP.NET, поскольку среда разработки не нуждается в списке файлов. Это хорошо работает, когда над проектом работают один-два человека. Поддержка Модульного Тестирования «Unit Testing Support» Была добавлена базовая поддержка для модульного тестирования, теперь можно использовать любой фреймворк для тестирования. Разработчиками создана первоначальная поддержка xUnit, работающая в рамках текущего Visual Studio Test Explorer. Скаффолдинг «Scaffolding» ASP.NET Scaffolding – это фреймворк для генерации кода, используемый в ASP.NET веб приложениях. Его использование позволяет сократить время разработки конфигурационных файлов для приложений. Новая версия позволяет добавить первоначальную поддержку фреймворка в ASP.NET vNext, а также создавать собственный скаффолдинг для генерации контента. Обновленный домашний репозиторий «Update Home Repo» “Home Repo” – Ваш репозиторий на Github для командной строки ASP.NET vNext. В новой версии были добавлены: новая документация, примеры и скрипты. Теперь имеются простые ASP.NET vNext примеры “Home Repo” для проверки работоспособности вашей программной среды. .NET Native Обновление .NET Native включает в себя лимитированную поддержку “Windows Communication Foundation” (WCF). Так же были добавлены новые свойства для WCF: CustomBinding BasicHttpBinding HttpTransportBindingElement TextMessageEncodingBindingElement ChannelFactory ClientBase DataContractSerializer RyuJIT – Новое поколение JIT компиляторов В JIT компиляторе RyuJIT обновилась исполняющая библиотека CoreCLR. Библиотека SIMD на данный момент не поддерживается, но разработчики обещают ее добавить в следующих релизах. Подробнее про компилятор RyuJIT Вы можете узнать на ресурсе: blogs.msdn.com/b/dotnet/archive/2013/09/30/ryujit-the-next-generation-jit-compiler.aspx Ознакомиться со всеми обновленными продуктами можно в Visual Studio 2014 или Visual Studio 2015 Preview. Источник: blog.msdn.com

Введение AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона. Будем осваивать данную технологию на практике. Создадим HTML страничку со стандартной структурой. Далее нам нужно преобразовать ее в одностраничное приложение. Для этого подключим AngularJS к своей странице, добавив в тег с данным кодом: <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> script> Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :  <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body> body> html> Проверим,  все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым: <p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p> Запустим в браузере:  Теперь у нас есть готовый шаблон приложения, который мы будем использовать во всех последующих примерах. AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице. Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind. Код странички: <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body>     <p>Ввведте свое имя:p>     <input type="text" ng-model="yourName">     <p>Здравствуй, <span ng-bind="yourName">span>p> body> html> Откроем в браузере: Теперь попробуйте ввести свое имя в поле для ввода. Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения. В строку  добавим директиву ng-init. <input type="text" ng-model="yourName" ng-init="yourName='Aнна'"> Посмотрим изменения в браузере: Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его: Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}. <p>Здравствуй, {{ yourName }}p> Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива. Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller. Рассмотрим пример с использованием контроллера страницы. Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения. К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения: <html ng-app="firstApp" ng-controller="firstController"> Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим с полем для вывода списка и чекбоксом с типом checkbox для того, чтобы можно было удалять тех, кто не придет на ваш праздник. В данный добавим директиву ng-repeat, отвечающую за повторение данных в обозначенном контейнере. <!DOCTYPE html> <html> <head>     <title>title>     <meta type="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script> head> <body ng-app="firsApp" ng-controller="firstController">     <h2>Мои гости:h2>     <form ng-submit="addGuest()">         <input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">         <input type="submit" value="Добавить гостя">     form>     br>     <div ng-repeat="guest in listOfGests">         <input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>     div>     <p><button ng-click="remove()">Удалить гостя button>p> body> html> Осталось добавить скрипт, который будет содержать функции для работы с элементами нашего приложения. Замечу, что все функции будут расположены в контроллере приложения. Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой <p><button ng-click="remove()">Удалить гостя button>p> следующий код: <script>         var app = angular.module('firsApp', []);         app.controller('firstController', function($scope) {             $scope.listOfGests = [{guestName:'Я любимый', come:false}];             var countOfGuests = 1;             $scope.addGuest = function() {                 $scope.listOfGests.push({guestName:$scope.guestsInput, come:false});                 $scope.guestsInput = "";                 countOfGuests++;                 checkNumberOfGuests();             };             $scope.remove = function() {                 var oldGuests = $scope.listOfGests;                 $scope.listOfGests = [];                 angular.forEach(oldGuests, function(guest) {                     if (!guest.come) $scope.listOfGests.push(guest);                     countOfGuests--;                 });                 checkNumberOfGuests()             };             function checkNumberOfGuests(){                 if(countOfGuests <= 2){                     alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");                 }else if(countOfGuests >= 9){                     alert("Праздник?! ВЕЧЕРИНИЩЕ!");                 }else{                     alert("Узкий круг самых близких, это всегда хорошо!");                 }             } script> В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей. В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества. В функции удаления мы берем список гостей listOfGests и проверяем значение чекбокса каждого гостя, определяя, кто придет, а кто нет. Удаляем тех, кто отмечен галочкой (не пойдет) и уменьшаем счетчик элементов. Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем. Давайте откроем пример в браузере и поработаем с ним: Добавим несколько гостей: С изменением количества гостей содержимое оповещений будет меняться. Когда вы добавите больше 9 друзей, тогда увидите такое оповещение: Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

C# занимает лидирующие позиции во всех рейтингах языков программирования. Так как рынок труда активно развивается, программисты, которые хорошо знают C# и технологии .NET, являются очень востребованными. На ITVDN вы найдете все необходимое, чтобы выучить C# с нуля до профессионального уровня. Курсы записаны сертифицированными разработчикам и тренерами Microsoft. Мы рекомендуем проходить обучение в такой последовательности:    C# Starter, автор Александр Шевчук Выполнение домашних заданий по C# Starter, автор Константин Черный How to C# Starter, автор Богдан Бондарчук Тренажер по C# Starter Visual Studio Tips & Tricks, автор Дмитрий Охрименко  C# Essential, автор Александр Шевчук Выполнение домашних заданий по C# Essential, автор Константин Черный How to C# Essential, автор Богдан Бондарчук Тренажер по C# Essential C# Универсальные шаблоны, автор Николай Мельничук  Unit Тестирование в C#, автор Дмитрий Охрименко  Асинхронное программирование в C# 5, автор Олег Кулыгин C# для профессионалов, автор Александр Шевчук  How to C# Professional, автор Константин Черный Что нового в C# 6.0-7.0, автор Александр Ткаленко Также вас могут заинтересовать записи вебинаров ITVDN: С# - с чего начать и как идти дальше? Работа с Microsoft Word на C# Если вы планируете свое обучение C# с нуля, тогда наилучшим решением будет приобретение подписки ITVDN сроком на 3 или 6 месяцев.

Введение Замыкание, как правило, используется функциональными языками программирования, где они связывают функцию с определенным типом параметров, это позволяет дать доступ к переменным, находящимся за пределами границы функции. С использованием делегатов замыкание доступно в С#.   Что такое Замыкание? Чаще всего, лексика замыкания используется в функциональных языках программирования. Замыкание – это специальный тип функции, с помощью которого она ссылается на свободные переменные. Это позволяет замкнутым функциям использовать переменные из внешнего окружения, несмотря на то что они не входят в границы. Когда функция создана, внешние переменные, которыми мы пользуемся, «захватываются», иными словами, они связаны с замкнутой функцией, так что они становятся доступными. Часто это обозначает то, что делаются копии значений переменных, когда инициализируется замыкание. Использование замыкания в С# В С#  замыкание может быть создано с помощью анонимного метода или лямбда-выражения, все зависит от версии .NET framework, на которой вы разрабатываете. Когда вы создаете функцию, переменные, что используются в ней и находятся за областью видимости, скопированы и хранятся в коде с замыканием. Они могут использоваться везде, где вы вызовете оператор delegate. Это дает огромную гибкость при использовании делегатов, но также создает возможность неожиданных багов. К этому мы вернемся позже. А пока, давайте рассмотрим простой пример замыкания. В коде, который ниже, мы создаем переменную «nonLocal» типа integer. Во второй строчке создаем экземпляр делегата «Action», что выводит в сообщение значение переменной типа integer. В конце мы запускаем функцию-делегат, чтобы увидеть сообщения.  int nonLocal = 1; Action closure = delegate { Console.WriteLine("{0} + 1 = {1}", nonLocal, nonLocal + 1); }; closure();  // 1 + 1 = 2 Мы можем сделать то же самое с лямбда-выражением. В следующем коде мы используем «lambda» для вывода информации, при этом лямбда-выражение имеет одинаковую силу. int nonLocal = 1; Action closure = () => {     Console.WriteLine("{0} + 1 = {1}", nonLocal, nonLocal + 1); }; closure();  // 1 + 1 = 2 Замыкания и переменные за пределами С помощью анонимных методов или лямбда-выражения примеры выше,при этом получаем те результаты, что вы могли ожидать, так как захват переменных замыканием не очевиден сразу же. Мы можем сделать его более явным, изменяя пределы делегатов. Рассмотрим следующий код. Здесь замыкание находится в классе «program» с переменной «action». В главном методе вызываем метод «SetUpClosure» для инициализации замыкания перед его использованием. Метод «SetUpClosure» очень важен. Вы можете увидеть, что переменная типа integer создана и инициализирована, и только тогда используется замыкание. В конце метода «SetUpClosure» эта переменная типа integer выходит за пределы. Однако, мы все еще вызываем делегат после этого. Скомпилируется и запустится ли этот код правильно? Произошло ли исключение при получении доступа к переменной за пределами? Попробуйте выполнить код. class Program {     static Action _closure;     static void Main(string[] args)     {         SetUpClosure();         _closure();     // 1 + 1 = 2     }     private static void SetUpClosure()     {         int nonLocal = 1;         _closure = () =>         {             Console.WriteLine("{0} + 1 = {1}", nonLocal, nonLocal + 1);         };     } } Вы могли заметить, что мы получили одинаковый результат как и в оригинальном примере. Это и есть замыкание в действии. Переменная «nonLocal» была охвачена или «замкнута» кодом delegate, в результате чего она остается в нормальных пределах. По сути, переменная будет доступна, пока никаких дальнейших ссылок на делегат не останется. Несмотря на то, что мы увидели замыкание в действии, они не поддерживаются С# и .NET framework. То, что действительно происходит - это работа на заднем фоне компилятора. Когда вы создаете собственные проекты, компилятор генерирует новые, скрытые классы, инкапсулируют нелокальную переменную и описанный код в анонимный метод или лямбда-выражение. Код, описанный в методе, и нелокальная переменная представлены в виде полей. Этот новый метод класса вызовется, когда делегат выполняется. Автоматически сгенерированный класс для нашего простого замыкания - аналогичный приведенному ниже: [CompilerGenerated] private sealed class <>c__DisplayClass1 {     public int nonLocal;     public void b__0()     {         Console.WriteLine("{0} + 1 = {1}", this.nonLocal, this.nonLocal + 1);     } } Замыкание захватывает переменную, а не его значение В некоторых языках программирования определяют значение переменной, которая используется в замыкании. В С# захватываются сами переменные. Это важное отличие, так как мы можем изменять значение переменной за пределами функции. Для иллюстрации рассмотрим следующий код. Здесь мы создаем замыкание, которое выводит наше начальное математическое значение переменной. При создании делегатов значение переменной типа integer равно 1. Но после того замыкания, как мы объявили замыкание, и перед тем, как его вызвали, значение переменной поменялось на 10. int nonLocal = 1; Action closure = delegate {     Console.WriteLine("{0} + 1 = {1}", nonLocal, nonLocal + 1); }; nonLocal = 10; closure(); Так как нелокальная переменная имела значение 1 перед созданием замыкания, вы могли бы ожидать, что результатом вывода будет «1+1=2». На самом деле, на других языках программирования так бы и было. Однако, так как мы изменили значение переменной до вызова функции замыкания, это значение влияет на выполнение функции замыкание. В действительности, вы увидите на дисплее: 10 + 1 = 11 Изменения в нелокальную переменную внутри функции замыкания также передаются в другом направлении. В следующем коде внутри делегата изменяем значение переменной перед тем, как объявленный код выведет ее. Изменения видны во внешней части кода несмотря на то, что происходят они внутри замыкания.  int nonLocal = 1; Action closure = delegate {     nonLocal++; }; closure(); Console.WriteLine(nonLocal);    // 2 Переменная, которую мы изменяем, может привести нас к неожиданным багам в нашем коде. Мы можем продемонстрировать эту проблему в другом примере. На этот раз мы используем замыкание в простом алгоритме: многопоточное или параллельное программирование. Код ниже показывает цикл for, который имеет 5 новых потоков. Каждая пауза короткая, перед выводом значения переменной внутри цикла. Если значение переменной в цикле были захвачены, мы увидим цифры от 1 до 5 показаны в консоли, хотя, возможно, не в правильном порядке. Однако, так как эта переменная находится внутри замыкания и цикл закончится до того, как переменные будут выведены в сообщение, в конечном итоге мы увидим значение 6 для каждого потока.  for(int i = 1; i <= 5; i++) {     new Thread(delegate()     {         Thread.Sleep(100);         Console.Write(i);     }).Start(); } // Outputs "66666" К счастью, такая проблема легко устраняется, когда вы понимаете, что переменные, а не их значения захватываются. Все, что нам нужно сделать, это создать новую переменную для каждого прохождения(итерации) цикла. Это объявление можно записать в теле цикла и давать значение в управляющую переменную. При нормальных обстоятельствах временная переменная будет находится за переделами, когда цикл закончится, но замыкание будет связывать и поддерживать ее. В коде ниже вы можете увидеть 5 примеров «значений», переменные, созданные и им назначенные 5 различных значений, каждая из них привязана к разному потоку. for(int i = 1; i <= 5; i++) {     int value = i;     new Thread(delegate()     {         Thread.Sleep(100);         Console.Write(value);     }).Start(); } // Outputs "12345" Обратите внимание: вывод может меняться в зависимости от порядка, в котором потоки выполняются. Источник: http://www.blackwasp.co.uk/CSharpClosures.aspx