Хто такий тестувальник, QC Engineer, QA Engineer? Напрямки QA Стек технологій для Manual QA інженера Англійська мова та Soft Skills (гнучкі навички) Стек технологій для Automation QA Як стати тестувальником у 2023 році? Що потрібно знати тестувальнику? Кар'єра QA спеціаліста Зарплати QA Підсумки Всім привіт! Ви знаєте, як створюються програми та інформаційні сервіси, якими всі ми користуємось? Які фахівці потрібні, щоб з'явився новий Фейсбук, Вайбер, Інстаграм, новий Windows чи якась крута гра? За розробленням програмного забезпечення (ПЗ) стоїть ціла команда професіоналів – і далеко не всі з них вміють програмувати. Типова команда буде включати наступних фахівців: бізнес-аналітик – проводить аналіз бізнес-проблеми, формує вимоги до продукту, що розробляється; PM (Project Manager) – управляє всіма, хто залучений до роботи над проєктом; тимлід (Team Leader) – управляє командою розробників; UX/UI дизайнер – створює приємний дизайн застосунку (UI) з гарним користувацьким досвідом (UX); розробники/програмісти – займаються написанням коду, становлять ядро команди; QA спеціаліст – тестує застосунок на кожному етапі його розроблення для забезпечення високої якості продукту. Якщо ПЗ не призначене для використання тільки всередині компанії, а націлене на зовнішню аудиторію, то ще додається маркетинг-команда, яка працює з цільовими споживачами: досліджує ринок, визначає клієнтуру, привертає її увагу, підігріває інтерес до продукту та багато іншого. Таким чином, в ІТ знайдеться гарна робота навіть для тих, хто не любить програмувати. І сьогодні йтиметься про такого фахівця, як QA. Трохи вище ви вже дізналися, що це фактично тестувальник, який стежить за якістю ПЗ на кожному етапі його розроблення. У чому специфіка даної професії, чим займаються ці фахівці, наскільки легко опанувати спеціальність тестувальник QA і які технології має знати потенційний претендент на цю посаду – це ми і розкриємо в нашій статті. Влаштовуйтесь зручніше, ми починаємо! Хто такий тестувальник, QC Engineer, QA Engineer Дуже часто термін "тестувальник" застосовується до всіх фахівців, які так чи інакше пов'язані з перевіркою ПЗ на якість. Тим не менш, у цій сфері існує формальний поділ професій на три гілки: Tester, QC та QA. Давайте з'ясуємо, що означає кожна з них. Тестувальник – спеціаліст, який фокусується на проведенні безпосередніх тестів над уже створеним ПЗ (складання тест-кейсів та баг-репортів, локалізація дефектів тощо). Фахівець перевіряє, чи все працює згідно із заявленими вимогами, проводить збір статистичних даних та фіксує їх у відповідних документах. Тестувальник уважно користується розробленим ПЗ, відтворює всі можливі дії користувача, працює із застосунком на різних операційних системах, у різних браузерах (якщо це веб-застосунок), на різних мобільних платформах (якщо це мобільний застосунок); крім помилок він шукає ще й вразливості. Щось на кшталт техогляду транспортного засобу. Звіти про помилки потім надсилаються розробникам, які відповідальні за подальше виправлення багів. QC (Quality Control) Engineer — фахівець, який забезпечує не тільки відповідність ПЗ, що розробляється, заявленим вимогам, але і його відповідність заздалегідь визначеним критеріям якості продукту в цілому. Також він відповідальний за визначення готовності продукту до випуску в продакшн. Мета Quality Control спеціаліста – формування об'єктивної картини стану якості ПЗ на різних етапах розроблення. Можна сказати, що спеціальність тестувальника є підмножиною спеціальності QC Engineer. QA (Quality Assurance) Engineer — спеціаліст, який забезпечує контроль якості ПЗ, що розробляється, на всіх етапах його планування, проєктування та створення. Робота на цій посаді є проактивною і носить превентивний характер, оскільки QA інженер приділяє увагу якості продукту ще до того, як той буде створений. Тут на перший план виходять комплекси заходів, процеси та засоби забезпечення якості ПЗ на кожному витку розроблення. Безпосередньо тестування системи займає вже друге місце. Головне завдання QA — вибудувати систему так, щоб вона мала якнайменше зон, де можна припуститися помилки, відповідала всім показникам якості, а також, щоб її можна було легко тестувати. Спеціальність QC Engineer є підмножиною спеціальності QA Engineer. Щоб вас не плутати, у цій статті ми прирівняємо поняття “тестувальник” та “QA інженер” на користь другого. Будемо розписувати стек технологій і шлях становлення саме QA спеціаліста. Таким чином ми зможемо торкнутися максимальної кількості інформації стосовно напряму тестування. Напрямки QA Почнемо з того, що QA має два основних напрямки — Manual та Automation. Фахівці кожного з них називаються мануальний (ручний) тестувальник та тестувальник-автоматизатор, відповідно. Їхня різниця в тому, що перший стежить за якістю продукту і проводить усі тести вручну, а другий автоматизує тестування шляхом написання скриптів. Automation QA використовує певну мову програмування та фреймворк для того, щоб створювати програми, які будуть проводити тестування продукту замість самого фахівця. Такий підхід дає змогу скоротити час на тести. До обов'язків мануального QA інженера входять: аналіз та з'ясування вимог у замовника чи бізнес-аналітиків; планування процесу тестування; написання сценаріїв тестування; безпосередньо тестування програмного продукту; визначення проблемних місць, їхнє документування; використання систем відстеження багів (баг-трекінги); обговорення виправлень із розробниками, активна взаємодія з ними; відстеження життєвого циклу помилок; повторний тест виправлених дефектів; аналіз тестування; планування ідей щодо оптимізації якості програмного забезпечення; ведення тестової документації; перевірка вимог до програмного забезпечення; оцінка ризиків; участь у стендапах та інших мітингах. Тим часом на плечі Automation QA також покладаються наступні обов'язки: написання нових автотестів на основі розроблених вручну; оновлення поламаних/застарілих автотестів; прогін автотестів; аналіз результатів тестових прогонів; налаштування тестового оточення; рев'ю коду; оформлення автотестової документації Насправді і мануальний, і автоматизований напрямки мають багато спільних вимог, оскільки їхній фундамент однаковий. Давайте почнемо з розгляду Manual QA, а потім плавно доповнимо його інструментами Automation QA. Що має знати тестувальник у 2023 році – стек технологій Manual QA Engineer Загальна теорія з IT Якщо років 15 тому в тестувальники брали мало не з вулиці, то зараз до претендентів з кожним роком висувають все більше і більше вимог. Тому потенційний претендент на посаду насамперед зобов'язаний гарно розуміти IТ-індустрію. Отже, цей пункт передбачає такі теми, як: веб-технології (HTTP, HTTPS, DOM, JSON, cookie, session), клієнт-серверна архітектура; бази даних; комп'ютерні мережі; операційні системи (звернути особливу увагу на Unix); дрібні підтеми, як, наприклад, системи числення і т. д. Теорія тестування та тестова документація Як стати тестувальником з нуля? Безумовно, будь-який QA інженер першочергово повинен знати, з чим він взагалі має справу. Якщо на зорі розроблення саме тестування було чимось інтуїтивним, то сьогодні воно набуло чітких форм, отримало свої методики, інструментарій та спеціалізоване програмне забезпечення. Вивчивши теорію тестування, ви зможете орієнтуватися в даному напрямку, розуміти принципи, типи та методи тестування, тест-дизайну, етапи життєвого циклу ПЗ; дізнаєтеся, як правильно складати тестову документацію (тест кейс, баг-репорт, чек-лист тощо) і багато іншого. Основні теми: Тестування, основні стандарти ISTQB. SDLC та STLC. Методології розроблення ПЗ. Вимоги. Аналіз та складання вимог. Тестова документація. Рівні, типи, методи та види тестування. Техніки тестування. Тест-дизайн. Баги та баг-трекінгові системи. Системи контролю тестів. Основи програмування + HTML/CSS Основи програмування мануальному QA потрібні не для того, щоб займатися безпосереднім кодингом, а щоб вміти читати код розробника і розуміти, що в ньому відбувається. Тут важлива не сама мова програмування, а банальне розуміння того, як створюються програми, що таке змінні, функції, методи, класи, які є методології програмування, як вони реалізуються і т. д. Для вивчення основ добре підійде C# або Java. Можливо, сюди варто було б включити і Python, але він, мабуть, занадто легкий для вивчення і при роботі з іншими мовами вам доведеться щось доучувати. C# з Java більш фундаментальні, і знаючи основи однієї з них, ви зможете легко розбиратися з кодом будь-яких інших популярних мов. Фактично, володіння основами програмування необхідне читання чужого коду і виявлення можливих багів прямо на місці. Окремо виділяємо мови верстання HTML та CSS. Якщо ви працюватимете з веб-застосунками (а як показує практика – проєктів багато, – черга і до тестування "вебу" рано чи пізно дійде), то вам буде корисно знати, з чого складається FrontEnd частина веб-застосунку. Також ви працюватимете з інструментами розробника в браузері і там теж треба буде взаємодіяти з HTML/CSS кодом. Правила оформлення документації. Модель CMMI Якщо згадувати три спеціальності, про які ми говорили на початку (QA, QC і тестувальник), то цей пункт для тестувальника як такого є непотрібним. А от для QA інженера він невід'ємний. У процесі проєктування ПЗ та стеження за його якістю необхідно проводити відповідне документування. Щоб робити це правильно, треба знати стандарти оформлення таких документів. Важливо приділити увагу серії ISO 9000. CMM / CMMI – це набір методологій (моделей) удосконалення процесів розроблення ПЗ. Знання CMMI дозволяє QA інженеру грамотно оцінювати проєкт та планувати необхідні процеси по забезпеченню якості. SQL SQL — це мова запитів, яка використовується для взаємодії з даними в реляційних базах даних. Тестувальнику вона стане у нагоді для того, щоб виконувати бекенд-тестування для перевірки тестових даних, вставлення, видалення, оновлення їх значень у БД. Сказати точний рівень володіння SQL нелегко, оскільки це залежить від складності проєкту. Десь знадобиться базовий рівень SQL, а десь потрібно бути дуже підкованим. А якщо тестування не пов'язане з бекендом, знання мови запитів зовсім не знадобляться. Загалом, тестувальник QA повинен мати наступні знання та вміння при роботі з БД та SQL: вміння розпізнавати різні типи БД; здатність реалізувати підключення до БД, використовуючи різні клієнти SQL-з’єднань; розуміння таблиць БД, ключів, індексів, типів відношень між таблицями; вміння створювати прості запити; розуміння та вміння розбирати по поличках складні запити. Веб-сервіси Веб-служба (або веб-сервіс) – це програмна система зі стандартизованими інтерфейсами, яка ідентифікується веб-адресою. Даний термін описує стандартизований спосіб інтеграції веб-застосунків з використанням різних протоколів, наприклад XML, TCP/IP, SOAP, WSDL та UDDI. Веб-служба являє собою спосіб зв'язку між двома електронними пристроями по мережі, такими веб-сервісами можна користуватися незалежно від комп'ютера, браузера або місця доступу до Інтернету (пошук, веб-пошта, зберігання документів, файлів, закладок тощо). До переваг веб-сервісів можна віднести: можливість створення необхідних кондицій для взаємозв'язку програмних компонентів, які не будуть залежати від платформ, що використовуються; веб-сервіси використовують відкриті стандартні протоколи; завдяки XML забезпечується легкість у формуванні та налаштуванні веб-сервісів; використання HTTP гарантує успішний взаємозв'язок систем через міжмережевий доступ. Веб-сервіси повинні знати розробники для коректної реалізації ПЗ, а тестувальникам вони потрібні, щоб розуміти, як працює та чи інша веб-система. Jira Система баг-трекінгу, яка допомагає виявляти, реєструвати і контролювати баги, знайдені в ПЗ, що розробляється, а також відстежувати процес усунення цих помилок. Є командним інструментом, що спрощує процес взаємодії розробників та тестувальників, а також різну баг-трекінгову діяльність в принципі. Окрім прямого призначення допомагає команді ефективніше працювати, розставляти пріоритети та обирати подальші кроки оптимізації програмного забезпечення. Postman Популярний і водночас потужний набір інструментів для тестування API (у середовищі розробників вимовляється як “а́пі”). API – це прикладний програмний інтерфейс; він вказує, як слід звертатися до програми та які відповіді вона зобов’язана надавати користувачам. Postman відносно простий у використанні, має багатий інтуїтивний інтерфейс. Він перевіряє запити з клієнтської сторони на серверну, а також відгук зі сторони бекенду. Таким чином можна переконатися, що на стороні сервера все працює, навіть якщо фронтенд сторона ще не готова. API можна тестувати і за допомогою безлічі інших програмних засобів (наприклад JMeter), однак на сьогоднішній день саме Postman є найбільш компромісним інструментом тестування запитів, що поєднує в собі простоту і високу ефективність. Git Git – це популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Одним із найвідоміших антагоністів Git є SVN — централізована система, на відміну від децентралізованої Git. Також у роботі вам стане в нагоді і сервіс онлайн-хостингу проєктів, що використовує систему контролю версій. У цьому випадку це GitHub. У парі з Git він дозволяє розробникам зберігати свій код онлайн, а потім взаємодіяти з іншими розробниками в різних проєктах. Git потрібен скоріше Automation QA, оскільки дозволяє у зручному вигляді зберігати код тестів із можливістю повернутися до робочої версії тестів. Також тестувальник зможе: мати доступ до коду розробників; організувати список тестів та відстежувати його виконання; тестувати код із різних пристроїв (при цьому сам код лежить на віддаленому репозиторії Git); зберігати різні налаштування для застосунку; виконувати інші взаємодії. Методологія розроблення Agile/Scrum Методології розроблення – це своєрідні путівники процесами ефективного розроблення ПЗ. Їх застосування допомагає організувати максимально продуктивну роботу всіх учасників, які безпосередньо чи опосередковано задіяні у розробленні продукту відповідно до обраної стратегії. Agile – сімейство гнучких методологій розроблення програмного забезпечення, яке дозволяє випускати продукт невеликими частинами, постійно доповнюючи його і вдосконалюючи. При такому підході технічні та бізнес-підрозділи працюють спільно, ПЗ постійно оновлюється, забезпечується швидке прийняття рішень та виявлення неправильних підходів, застосунок простіше обслуговувати, а якість коду готового продукту вища. Agile має власний маніфест, який докладно описує основні принципи, на яких будується гнучке розроблення. Scrum є однією з найпопулярніших реалізацій agile-підходу. Його використовують багато команд, тому знання особливостей роботи зі scrum-моделлю для QA інженера є не менш важливим, ніж для будь-якого розробника. Англійська мова Знання англійської — природна вимога для багатьох професій в IT, оскільки більшість нових відомостей про технології, курси, навчальні та довідкові матеріали з'являються насамперед англійською. Для роботи в команді знань мови на рівні читання технічної документації, коментування коду та складання баг-репортів зазвичай цілком достатньо, проте, якщо виникне необхідність вести переговори та/або листування з іноземним замовником, або ж ви будете в міжнародному колективі, ваш рівень має бути вище (тут вже дуже бажано мати рівень не нижче за Upper Intermediate). Soft Skills Так звані “гнучкі (м'які) навички” – це внутрішні якості спеціаліста, які допомагають йому виконувати роботу максимально якісно і без зайвої напруги. Наприклад, для слідчого-криміналіста прекрасними софт скіллами будуть об'єктивність, уважність, вміння відчувати свого співрозмовника, прекрасне дедуктивне мислення і невгамовне прагнення докопуватися до правди. Для працівника на ресепшені критично важливими м'якими навичками є комунікабельність, дисциплінованість, пунктуальність, ввічливість, тактовність та інші. Які soft skills стануть у нагоді тестувальнику? Спеціалісту, який стежить за якістю ПЗ і перевіряє його на міцність, слід володіти наступними навичками: уважність, вміння концентруватися на задачі; ініціативність; посидючість; організованість, проактивність, націленість на результат; стресостійкість; емпатія до користувача та разом із тим розуміння бізнес-процесів; адаптивність; комунікабельність; вміння працювати в команді; володіння логічним, системним, упорядкованим мисленням; вміння правильно здійснювати декомпозицію (по відношенню до систем, завдань, проблем тощо); наявність шостого чуття + трохи винахідливості; прагнення вчитися та вміння передавати свої знання іншим; Користувацький досвід (не обов'язково, але дуже зручно) Було б непогано, якби перед тестуванням програми ви вже стикалися з чимось подібним у звичайному житті. Якщо працювати належить у сфері ігробудування, то ваш величезний геймерський досвід буде дуже доречним. Робота з проєктами із веб-індустрії? Досвід серфінгу в інтернеті (соцмережі, інтернет-магазини, онлайн-сервіси) полегшить розуміння логіки користувачів, їх очікувань та точок інтересу. Automation QA Автоматизований QA технічно є надмножиною позиції Manual QA — він повинен знати все те саме, що й мануальний колега плюс декілька нових інструментів. Ці інструменти ми зараз і перерахуємо. Мова програмування Якщо в розділі Manual QA ми говорили про основи програмування, то автоматизатору знадобиться саме впевнене володіння конкретною мовою. Зазвичай вибирають серед Java та Python, але це не межа. У тестуванні можна застосовувати такі мови, як JavaScript, C#, Ruby, PHP, SmashTest тощо. За допомогою обраної мови ви писатимете автотести, які виконуватимуть тестування за людину. Програма працює – тестувальник аналізує результати. Це спрощує роботу, підвищує швидкість проведення тестів та знімає частину завдань із людини. Фреймворк для тестування Для створення автотестів найчастіше використовується спеціальне програмне забезпечення — фреймворки. Одним із найпопулярніших вважається Selenium. Він мультиплатформний, орієнтований на роботу з веб-застосунками і підтримує велику кількість популярних мов програмування. Більше того, Selenium є основною технологією для багатьох інших інструментів автоматизації браузерів, API та фреймворків. Інструменти навантажувального тестування Цей пункт є необов'язковим, але дуже бажаним. Навантажувальне тестування – це вид тестування, при якому проводиться тест продуктивності цільового ПЗ при різних навантаженнях від дій певної кількості користувачів. Найбільш відомими інструментами проведення тестування навантаження є Gatling і JMeter. Як стати тестувальником у 2023 році? Що потрібно знати тестувальнику? Перетворюємо список наведених вище технологій на туторіал. Починаємо з шляху Manual QA. Ви можете навчатися самостійно – за книгами або відео курсами, а можете записатися на курси тестування для максимально ефективного навчання. У будь-якому випадку спочатку потрібно дуже добре вивчити теорію тестування і базові теми в IT: веб-технології, API, клієнт-серверна архітектура, бази даних, комп'ютерні мережі, операційні системи (звернути особливу увагу на Unix), дрібні підтеми, як, наприклад, системи числення і т. д. Конкретні теми з тестування ми розписали в одному з перших розділів. Потім вам слід опанувати написання тестової документації (для чистого тестувальника), а для QA знадобиться ще й знання стандартів забезпечення якісного ПЗ (ISO 9000) для додаткового документування, модель CMMI. Аби безпроблемно читати код розробників і розуміти, що в ньому відбувається, слід володіти основами програмування. Для цього краще вибрати або Java, або C# — документація за даними мовами є дуже інформативною, наявне велике ком'юніті. Більше того, безліч програм навчання за цими мовами має прекрасний бекграунд (історія програмування, як працюють обчислювальні системи і як вони обробляють інформацію), який закладає міцний фундамент програмування. Також варто опанувати мови верстання HTML і CSS – вони дуже прості і використовуються в усіх веб-застосунках. Для роботи із забезпеченням, яке використовує бази даних, необхідно вивчити основи SQL. Далі приступаємо до вивчення веб-сервісів, а потім – популярної баг-трекінгової системи Jira і потужного набору інструментів для тестування API – Postman. Створення програмного продукту зазвичай ведеться у команді, тому знання методології командного розроблення є не менш важливим, ніж попередні технології. Приділіть час вивченню принципів Agile/Scrum — з їх допомогою ефективно розробляється сучасне програмне забезпечення. Методологія гнучкого розроблення є дуже важливою для тестувальника, оскільки він бере участь у виробничому циклі так само, як і розробники. Також не забудьте підтягнути вашу англійську як мінімум до рівня Intermediate. Вона потрібна для комфортного пошуку потрібної інформації в інтернеті, читання технічної документації, роботи з іноземними колегами, а також для можливої взаємодії із замовником. Все ж таки англійська в IT ще нікому не заважала, ба навіть давала нові кар'єрні можливості та вищу зарплату. Щоб ваша робота приносила вам задоволення і ви себе не змушували працювати, вам слід володіти наступними софт скілами: уважність, вміння концентруватися на задачі; ініціативність; посидючість; організованість, проактивність, націленість на результат; стресостійкість; емпатія до користувача, разом із тим – розуміння бізнес-процесів; комунікабельність; інші якості, які ми зазначили у відповідному розділі. З цими навичками та знаннями ви зможете приступати до практики. Вивчіть Git, почніть працювати над будь-яким проєктом: покрийте його тестами, напишіть тест-документацію. Опублікуйте напрацювання на GitHub – це дасть вам цінний досвід роботи з розподіленою системою керування версіями та дозволить перевірити свої навички у вирішенні реальної задачі. Декілька гарних проєктів, і повноцінне портфоліо готове, а з ним ви можете впевнено подавати резюме на вакансію мануального QA інженера.   Якщо вас цікавить автоматизоване тестування, додатково вивчіть Python або Java + фреймворк для тестування (Selenium, PyTest, Robot Framework або інший). Це дозволить вам створювати скрипти, які автоматично виконуватимуть тестування, позбавляючи вас зайвої рутини. Дуже бажано мати досвід роботи з інструментами навантаженого тестування. Це може бути JMeter, Gatling чи будь-який інший популярний аналог. Такий досвід дасть вам додаткову вагу в очах роботодавця, що зіграє вам на руку, оскільки конкуренція за місце тестувальника дуже висока. Величезною перевагою буде наявність наставника, який міг би стежити за вашим прогресом, відповідати на питання, що виникають, давати корисні поради і направляти в потрібне русло - тоді у вас буде чіткий план того, як стати тестувальником з нуля. Кар'єра QA спеціаліста Які перспективи кар'єрного розвитку у тестувальника після отримання першої роботи? Шлях QA дуже нагадує самурайський шлях розробника: Intern/Trainee, Junior, Middle, Senior, Team/Tech Lead. Найбільш коректний шлях кар'єрного зростання передбачає наступне: Робота над hard skills. Поглиблення знань та навичок у межах технологічного стеку, який ви використовуєте, а також розширення цього стеку. Дуже перспективним вважається саме автоматизоване тестування, тому на короткій дистанції найбільший успіх чекає на тих тестерів, які рухатимуться у бік програмування. Прокачування soft skills. Дуже важливо не припиняти роботу над внутрішнім стрижнем. Сюди входить безліч моментів: вміння відстоювати свої позиції, чітко аргументувати свою думку, бути приємним комунікатором, уважно та відповідально ставитися до своєї роботи, займати проактивну, ініціативну позицію в команді, працювати над підвищенням власної продуктивності тощо. Позаробочі активності. Сюди можна віднести читання технічної літератури та актуальної інформації з вашої спеціалізації, відвідування тренінгів, проходження курсів, застосування нових знань на практиці, наприклад, у створенні pet-проектів або безпосередньо на роботі. Також важливо працювати в різних компаніях, змінюючи їх приблизно раз на 1,5-3,5 роки. Це дозволяє, з одного боку, не "закостеніти" на поточній роботі, а з іншого – залишатися в тонусі, отримувати цінний досвід роботи з різними командами та проєктами, збагачувати професійний кругозір, опановувати нові та розвивати вже наявні hard та soft навички. Крім цього, зміна місця роботи раз на 2-3 роки дає відчутний приріст у зарплаті, оскільки грошова оцінка ваших знань та навичок у різних конторах може істотно відрізнятися. Говорячи про кар'єрні перспективи, ви також можете піти шляхом суттєвого розвитку hard skills і, опанувавши програмування та супутні технології, поповнити ряди розробників. Якщо ж ваша сильна сторона – це soft skills і ви плануєте зробити наголос саме на них, можете розвиватися в напрямку бізнес-аналізу або менеджменту. Зарплати QA Скористаємося літньою зарплатною аналітикою за 2023 рік від DOU – спільноти професійних українських розробників, та дізнаємось, скільки заробляють наші тестувальники. Медіанні зарплати станом на червень 2023 року: Junior QA Engineer – 800 USD Middle QA Engineer – 1800 USD Senior QA Engineer – 3300 USD QA Team Lead – 3400 USD QA Tech Lead – 4000 USD Найвищі медіанні заробітні плати у Automation QA, найнижчі – у Manual QA, причому різниця на рівнях Middle та Senior може сягати більш ніж 1000 USD на користь автоматизованих тестерів. Найбільш оплачуваними мовами програмування у QA фахівців є: TypeScript – 3350 USD. Kotlin – 3300 USD. Java – 2838 USD. C# – 2750 USD. Ruby – 2652 USD. Python – 2500 USD. JavaScript – 2220 USD. SQL – 1661 USD. Інші мови – 1955 USD. Вище наведено саме медіанні зарплати. Англійська також впливає на грошову винагороду як новачків, так і досвідчених фахівців QA. Логіка залишається незмінною – що краще знаєш англійську, то більше отримуєш. Підсумки У цій статті ми постаралися зробити максимальне охоплення теми тестування. Була розглянута не лише спеціальність тестувальник, а й дві її надмножини — QC та QA. Зараз лінії розмежування між цими трьома професіями за великим рахунком стерті і простежуються лише у серйозних компаніях. У більш дрібних тестувальник, QA можуть запросто бути синонімами. Тим не менш, у нашій статті висвітлено ті технології та галузі знань, які підійдуть як тестувальнику, так і QA інженеру. Також, ми розглянули відгалуження Manual QA та Automation QA. Як з'ясувалося, без знання мануального тестування вам не стати автоматизованим тестером. Адже як можна писати автотести, якщо ти в принципі не розумієш, що, де і як досліджувати на предмет багів? Незважаючи на високу конкуренцію за місце тестувальника, кількість вакансій залишається однією з найбільших на ринку праці в IT. Перегляньте популярні ресурси з працевлаштування в IT і ви самі в цьому переконаєтеся. Тому нами й були вказані деякі необов'язкові технології — ми хочемо озброїти наших читачів максимально промовистим стеком, щоб ви були на голову вищими за конкурентів. Якщо вас цікавить цей напрямок і ви хочете стати QA інженером, пропонуємо до вашої уваги добірку курсів та вебінарів ITVDN, які ви знайдете на сторінці спеціальності Quality Assurance. Бажаємо успіхів у вивченні IT! Залишайтеся з ITVDN!

Операционная система Android Языки программирования Java и Kotlin. Принципы ООП Среда Android Studio и набор инструментов Android SDK Формат обмена данными JSON Архитектура REST API Реактивное программирование Библиотека Retrofit 2 Фреймворк Dagger 2 Данные и СУБД SQLite UI/UX дизайн Шаблоны проектирования Алгоритмы и структуры данных Unit тестирование Архитектурные шаблоны Git & GitHub Google Play Английский язык Как стать Android разработчиком? Итоги   Всем привет! С каждым годом смартфоны, планшеты и другие гаджеты приобретают все большую популярность. Нам уже трудно представить хотя бы один день без них. Каким образом мы так сильно приявязались к ним? Все дело в программном обеспечении, которое находит ключ к каждому из нас: общение (телефонная связь, видеозвонки, социальные сети), просмотр мультимедийного контента, прослушивание музыки, фото- и видеосъемка, игры на любой вкус и цвет, обучающие приложения и т. д. За всем этим стоят девелоперы, разрабатывающие программы, от которых тяжело оторваться. Каждое мобильное устройство работает с использованием одной из мобильных операционных систем. Cамыми популярными из них являются Android и iOS. В контексте данной статьи нас интересует именно первая ОС. Мы расскажем вам, какие инструменты используют разработчики в создании таких увлекательных приложений на Android и как стать специалистом в этой сфере. Но прежде хотим познакомить вас поближе с данной операционной системой. Уверены, что практически каждый ее использовал (а может, и сейчас ею пользуется), однако сейчас вы узнаете некоторые интересные факты об Android: Изначально Android разрабатывалась как ОС для фотоаппаратов. ОС Android основана на ядре Linux. Компания Samsung имела возможность приобрести стартап-компанию Android Inc. в 2004-м году, однако корейцы поставили под сомнение выгодность этого предложения. Через год корпорация Google купила Android Inc. не менее чем за $50 миллионов и смогла направить полученный потенциал в нужное русло. Число активированных устройств, использующих Android, более 2 миллиардов. Первая версия Android, как и первый пакет разработчика (SDK 1.0), вышла осенью 2008 года. Тогда эту ОС многие критиковали и не верили в успешность проекта. Google Карты вычисляют дорожные пробки на основе концентрации и скорости перемещения Android устройств. Android используется не только в смартфонах и планшетах, но также и в электронных книгах, наручных часах, фитнес-браслетах, игровых приставках, ноутбуках, нетбуках, смартбуках, очках Google Glass, телевизорах, бытовых роботах, научных аппаратах, компонентах исследовательских систем на базе гаджетов, компонентах IoT (Internet of Things — “интернет вещей”) и других устройствах.     Теперь перейдем ближе к сути. Андроид разработчик — это IT-специалист, который создает, поддерживает и совершенствует программное обеспечение для мобильных устройств, использующих популярную ОС Android. Вместе с этим он задействован в процессах поддержки, улучшения и обновления разрабатываемых продуктов. Если посмотреть на количество устройств, которые используют данную ОС, можно прийти к выводу, что разработчик под платформу Андроид — очень востребован в IT, а также имеет высокие доходы. Какие технологии использует в своей работе этот специалист?     Какие языки программирования и технологии используют Android разработчики Android Каждый Android девелопер обязан знать операционную систему, под которую разрабатывает софт, а также понимать назначение и жизненный цикл Android-компонентов. Чтобы создавать эффективные мобильные приложения, вы должны понимать все аспекты устройства и работы данной ОС. Java + ООП Java — это объектно-ориентированный язык программирования со строгой типизацией. Безусловно, в создании приложений под Андроид можно использовать другие языки (C#, C/C++, Python и прочие), однако, именно Java считается флагманским в Android разработке. Поэтому в данной статье мы будем делать уклон в Java-стек. Что являет собою этот язык? Не будем углубляться в его устройство, а скажем лишь, что все Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными. Какими знаниями необходимо обладать? Прежде всего необходимо знать Java и владеть методологией объектно-ориентированного программирования (ООП). Если конкретизировать: Машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, списки, обработка исключений, суперкласс Object, обобщения (Generics, дженерики), работа с памятью. Понимание и применение пакетов (Packages) в Java; ООП, понятия объектов и классов; Механизмы наследования, умение работать с интерфейсами; Коллекции и работа с ними; Параллелизм. Помимо теоретических знаний, новичок должен сформировать необходимые навыки написания кода. Для этого мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также, советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания. Kotlin Молодой и перспективный язык программирования, который поддерживает как объектно-ориентированное, так и процедурное программирование. Отличается своей простотой, гибкостью, лаконичностью, и являет собой следующий этап развития Java. Kotlin-приложения компилируются в уже упомянутый JVM байт-код, что делает этот язык полностью совместимым с Java.  На конференции для разработчиков I/O 2017 компания Google расставила акценты в Android разработке, заявив, что язык программирования Kotlin отныне позиционируется как приоритетный язык для разработчиков приложений под ОС Android. Подкреплено это было тем, что теперь новые API и библиотеки будут выпускаться сперва под Котлин. Несмотря на возрастающую популярность данного языка и поддержку со стороны Google, Java не собирается уходить из мобильной разработки, удерживая там уверенные позиции и по сей день. Так что знание обоих языков будет предпочтительным для всех, кто собирается заниматься Андроид разработкой. В любом случае, зная Java, вы безпроблемно освоите и Kotlin. Все-таки классику надо знать и уважать. Среда Android Studio и набор инструментов Android SDK Android Studio — это интегрированная среда разработки (IDE) приложений под Android. В ней вы будете создавать проекты и работать над ними. В свою очередь, студия вам предоставит всевозможные удобности для облегчения разработки софта. Android Software Development Kit — кроссплатформенный комплект средств Android разработки, включающий в себя: отладчик, набор библиотек, телефонный эмулятор, набор документации по работе в данной среде и примеры приложений. Особенно интересен в этом перечне эмулятор — программа, которая создает виртуальный мобильный девайс, где можно тестировать написанные приложения и смотреть, как они будут выглядеть на том или ином Андроид-устройстве. JSON JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий Java, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. REST API REST — популярный архитектурный стиль, содержащий определенные принципы организации взаимодействия приложения либо сайта с сервером через протокол HTTP. API — это прикладной программный интерфейс. С его помощью происходит определение, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. К примеру, оплачиваете футболку в интернет-магазине или покупаете билет в кино — как только вы нажимаете соответствующую кнопку, подтверждающую ваши намерения на оплату, сайт соединяет вас с платежной системой с использованием API этой системы. Но даже если система не имеет никакой интеграции с другими, API все равно используется — для общения внутри системы.  RxJava Библиотека, которая позволяет реализовать принципы реактивного программирования для JVM. Используется для оперирования событиями и потоками данных, комбинируя лучшие идеи шаблонов проектирования Observer (Наблюдатель), Iterator (Итератор) и функционального программирования. В реальной жизни влияние реактивного подхода мы ощущаем, когда на нашем смартфоне высвечивается сообщение о новом посте человека, которого мы фолловим в социальных сетях или когда нам приходит уведомление о новом сообщении из мессенджера. То есть, вместо того, чтобы каждые 10 секунд лично перезагружать страничку объекта фолловинга или свой мессенджер, мы просто ожидаем уведомления о новом посте, занимаясь своими делами. Это очень полезная опция, позволяющая не только экономить наше время, но и упрощающая нагрузку на сервер. Куда без RxJava в мобильную разработку на Java? Retrofit 2 Популярная библиотека для сетевого взаимодействия — типобезопасный HTTP-клиент для Android и Java. Позволяет легко получить и загрузить JSON (либо иные структурированные данные) через веб-сервис на основе REST. Для работы с HTTP-запросами в Retrofit используется библиотека OkHTTP. Dagger 2 Фреймворк для работы с зависимостями в Java и Android. Позволяет уменьшить количество шаблонного кода, структурировать зависимости, упрощает работу при большом количестве зависимостей, а также позволяет делать код более читабельным. SQLite Structured Query Language (SQL) — декларативный язык структурированных запросов, разработанный для взаимодействия с базами данных. Особенностью SQL является то, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Любое ПО подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) либо внесение в БД информации о новом пользователе, который только зарегистрировался — умение работать с данными одинаково важно во всех сферах разработки. Исключением является только FrontEnd. Также, изучите одну из систем управления базами данных (СУБД). В Андроид разработке по умолчанию используется SQLite. Благодаря своей компактности, легкости и надежности, эта СУБД идеально подходит для разработки в электронных устройствах и программах, где стратегическое значение имеет оперативная память. XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать и хранить данные для удобства их дальнейшей обработки. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов. Также, в Андроид разработке XML используется для создания интерфейса посредством объявления элементов пользовательского интерфейса и задания их расположения. UI/UX дизайн UI/UX (User Interface — “интерфейс пользователя”, User eXperience — “опыт пользователя”) дизайн — это проектирование различных пользовательских интерфейсов, в которых удобство использования (UX) настолько же важно, как и внешний вид (UI). Android девелопер в ходе создания приложений также занимается и разработкой внешнего вида приложения, а потому, должен знать, как реализовывать интерфейс, который принесет юзеру максимальный комфорт во всех аспектах использования. Обычно в UI/UX разработке под Андроид используют Material Design — стиль графического дизайна интерфейсов программного обеспечения и приложений, разработанный компанией Google, делающий уклон на естественность графической составляющей. Для работы необходимо использовать инструменты Material Components for Android.  Шаблоны проектирования Паттерны (они же шаблоны) являют собой архитектурные конструкции, описывающие общепринятые способы решения задач, которые часто возникают в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако разработчику нет необходимости владеть ими всеми. Достаточно изучить самые популярные. Алгоритмы и структуры данных Понимание алгоритмов и структур данных — обязательное требование, которому должен соответствовать каждый программист. Это необходимый фундамент, который учит разработчика писать хороший исходный код через подбор оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы будете уметь управлять уровнем сложности своих программ, делая их более доступными для понимания, а также разрабатывать приложения с высокой производительностью, которые будут рациональнее взаимодействовать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java и Kotlin. Unit тестирование Вид тестирования, который берет на себя программист, а не тестировщик. Его основная идея заключена в написании тестов под каждую нетривиальную функцию либо метод. Цель Unit (модульного) тестирования — изоляция отдельных частей программы, чтобы продемонстрировать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию, а вместе с этим — соответствующее обнаружение ошибок. Архитектурные шаблоны В зависимости от предпочтений работодателя, от вас могут потребовать знание одного или нескольких архитектурных паттернов. Это шаблоны наивысшего уровня, которые определяют архитектуру всей программной системы. Самыми популярными являются MVC (Model-View-Controller), MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), Clean Architecture. Git & GitHub Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы. Google Play Магазин приложений, в котором можно размещать и скачивать приложения под Андроид. Умение его использовать — обязательно. Google Play имеет очень строгий набор политик, которым должно соответствовать ваше приложение. К слову, за аккаунт Android разработчика необходимо один раз раскошелиться на $25. Зато это дешевле, чем за аккаунт iOS девелопера — там с вас будут брать дань каждый год денежную сумму в размере $99.  Английский язык Наверное, единственный язык, которым обязаны владеть все разработчики без исключения. Его вы будете использовать во время поиска ответов как во время учебы, так и во время работы, ведь большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Как стать Android разработчиком   Как вы заметили, Android девелоперы должны знать множество различных технологий. Сейчас очень много разработчиков данного направления, но действительно хороших очень мало. Поэтому и требования к кандидатам высоки. Если вы пройдетесь по ресурсам поиска работы, то наверняка отметите, что вакансий Android Developer уровня Junior не так много, как хотелось бы, а потому за место под солнцем придется побороться. Давайте перейдем к советам касательно того, как сделать старт в Андроид разработке и начать “набирать массу”. В университетах никто не обучит вас искусству разработки на Android, поэтому вы можете: Учиться самостоятельно — по книгам или видео курсам. Записаться на соответствующие курсы для максимально эффективного обучения специальности. Второй вариант является лучшим, поскольку предусматривает более высокий уровень дисциплинированности на всем пути обучения, а также структурированную подачу необходимой информации, которой удобно пользоваться и которая отвечает современным требованиям рынка. Если вы выбираете обучение по видео курсам, то прежде всего определите подходящую для вас образовательную онлайн-платформу. Мы рекомендуем сделать выбор в пользу ITVDN. Почему именно эта платформа? Давайте мы познакомим вас с преимуществами обучения на ITVDN. ITVDN — образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям. Учебная программа каждой специальности содержит:  тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности Android Developer, в частности, с одноименного вебинара Евгения Мыцы Как стать Android разработчиком, в котором отражены все самые актуальные тренды и требования. Если вы заинтересованы в изучении специальности Android Developer на ITVDN, у нас есть отличное предложение для вас. Наш образовательный портал содержит полноценную программу обучения Android разработке. Переходите по ссылке и делайте шаг навстречу желаемой профессии!  Какой бы способ обучения вы не выбрали — вначале нужно изучить язык программирования Java и довести владение им до высокого уровня. После каждой пройденной темы нужно решать практические задачи, чтобы закрепить полученные знания. В этом вам может помочь интерактивный тренажер от ITVDN, с помощью которого вы сможете проверить ваше владение навыками написания кода на Java. Продолжайте обучение и изучайте те технологии, которые мы перечислили в данной статье. Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы. Это может быть как преподаватель на ITVDN, так и один из ваших знакомых, который занимается Андроид разработкой и готов взять под свое крыло юного протеже. Знание английского на уровне не ниже Intermediate обязательно. Оно вам понадобится для комфортного поиска информации по Java, Kotlin и другим технологиям в интернете. Если ваши знания английского недостаточны как минимум для чтения технической литературы — обязательно подтяните их при помощи различных курсов либо интернет-материалов свободного пользования. Изучите Git, начните делать свой небольшой проект и опубликуйте его на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово. Не забывайте о Google Play, ведь именно сюда Android разработчики выкладывают готовый к использованию продукт. Актуальную информацию касательно языков и технологий, которыми необходимо владеть Android разработчику, вы можете узнать из нашего вебинара “Как стать Android разработчиком”, перейдя по ссылке. Резюмируя Android разработчик — специалист, который занимается созданием ПО под различные устройства — смартфоны, планшеты, ноутбуки, нетбуки и прочие девайсы, в основе которых лежит ОС Android. Востребованность этого разработчика очень высока, а на настоящих профессионалов то и дело ведут охоту HR-ы и рекрутеры. Изучайте все необходимые языки и технологии, практикуйтесь, а также всегда подпитывайте интерес к вашей будущей профессиональной деятельности. Не забывайте следить за новостями в мире Android. Просматривайте в YouTube видео, посвященные данной сфере разработки и впитывайте новую информацию. Для дополнительных очков мотивации подпишитесь на известных Андроид девелоперов. Пробуйте посещать различные мероприятия, посвященные разработке под Андроид, находите единомышленников и поддерживайте активность в их среде. Главное — быть целеустремленным и иметь желание развиваться в IT-сфере. Не останавливайтесь ни перед чем и тогда вас обязательно настигнет успех! Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Здравствуйте, дорогие читатели. В этом уроке мы: создадим форму редактирования товара; рассмотрим понятие делегата и удобство его использования; добавим действия редактирования / удаления товара в списке товаров. Откройте проект Warehouse. В первую очередь, давайте изменим цвет View входа в систему с “Light Green” на “White”, я явно перестарался с выбором цвета в самом начале :). В будущих уроках, когда разберем, как пользоваться Assets, мы заменим фон на красивую картинку, подходящую по смыслу к этому приложению, а пока сделаем нейтральный цвет, не бросающийся в глаза. Для этого в панели навигатора откройте модуль “Main.storyboard”, выделите “View Controller”, затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Background” и установите значение “White”. Теперь найдите в библиотеке компонентов компонент “Table View Controller” и перетащите его в свободную область дизайнера рядом с “Supplies View Controller”, созданным в прошлом уроке. Выделите только что добавленный компонент. Найдите кнопку в дизайнере “Show Document Outline”, нажмите на нее, откроется панель документов. На этой панели разверните компонент “Table View Controller” и выделите компонент “Table View”. Затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Content”. По умолчанию у этого свойства установлено значение “Dynamic Prototypes”, установите значение “Static Cells”, в дизайнере вы увидите, что интерфейс контроллера изменился и отобразилось 3 строки. Разберем значения этого свойства. Значение “Dynamic Prototypes” используется, если вам необходимо иметь динамический набор данных, который будет постоянно изменяться. Установив это значение, обязательно необходимо переопределить методы протокола “UITableViewDataSource” для корректной работы контроллера. Значение “Static Cells” используется, если вам необходимо иметь статические данные, которые не будут меняться. Установив это значение, вам не нужно переопределять методы протоколы “UITableViewDataSource”. В данном примере мы устанавливаем это значение с целью удобства размещения элементов управления на нашей View. У нас будут ячейки с таким содержимым: ячейка под картинку, идентификатор товара, название товара, описание товара. Сейчас у нас 3 ячейки, надо чтобы было 4. В первой ячейке будет компонент “Image View”, в остальных 2 ячейках будут элементы управления “Label” и “Text Field”, в последней 4-й ячейке будут элементы управления “Label” и “Text View”. На панели документов для “Table View Controller”  выделите компонент “Table View Section”. В панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Rows”. Сейчас у этого свойство установлено значение “3”. Измените значение на “4”, у вас появится 4 ячейка. В панели документов раскройте компонент “Table View Sections”, вы увидите список ячеек типа “Table View Cell”. Выделите первую ячейку. В панели свойств откройте вкладку “Show the Size inspector”. На этой вкладке можно управлять размерами компонента. Найдите свойство “Custom” и отметьте его галочкой. Затем найдите свойство “Row Height”. Установите значение этого свойства “144”, высота ячейки изменится. Перетащите на эту ячейку из библиотеки компонентов  компонент “Image View” и растяните его на всю область ячейки. Выделите компонент “Image View” и нажмите кнопку “Pin”. В открывшемся диалоговом окне снимите галочку с поля “Constrain to margin” и отметьте позиционирование относительно всех стенок ячейки. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите вторую ячейку. Перетащите из библиотеки компонентов компонент “Label” на эту ячейку. Поместите его с левого края ячейки и растяните по высоте ячейки. В панели свойств откройте вкладку “Show the Size inspector”, установите свойство “Width” в значение “120”. Откройте вкладку “Show the Attributes inspector”, установите безымянное свойство с текстом “Label” на текст “Идентификатор”. Найдите свойство “Font”, нажмите на кнопку со значком “T”, откроется диалоговое окно задания свойств шрифта. Установите свойство “Style” в значение “Bold”, свойство “Size” в значение “12”. Нажмите кнопку “Done”. Представление должно выглядеть так: Из библиотеки компонентов перетащите компонент “Text Field” и расположите рядом с компонентом “Label”. Растяните компонент “Text Field” на оставшуюся ширину ячейки. Выделите элемент управления “Label”, нажмите кнопку “Pin”. Снимите галочку с поля “Constrain to margin”, отметьте позиционирование относительно верхней и левой стенок ячейки. Отметьте галочкой поле “Height”. Нажмите кнопку “Add 3 Constraints”. Выделите элемент управления “Text Field”, нажмите кнопку “Pin”. В диалоговом окне снимите галочку с поля “Constrain to margin”, установите позиционирование относительно левой, верхней, правой стенок ячейки, отметьте галочкой поле “Height”. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите 3 ячейку. Повторите для нее все операции, которые были применены ко второй ячейке. Измените текст элемента управления “Label” на “Название”. Должно получиться вот так: В панели документов выделите последнюю ячейку, на вкладе “Show the Size inspectors”  установите в поле “Row Height” значение “144”, предварительно отметив поле “Custom” галочкой. Перенесите на ячейку два компонента “Label” и “Text View”. В          Установите ограничения для элемента управления “Label”, как мы устанавливали для предыдущих элементов управления “Label”, а для элемента управления “Text View” такие же ограничения, как для “Text Field”. Для элемента управления “Label” установите текст “Описание”, для элемента управления “Text View” уберите текст по умолчанию. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductViewController.swift”. Измените код, как показано ниже: Перейдите снова в дизайнер , выделите “Table View Controller”, с которым проводили изменения, в панели свойств, откройте вкладку “Show the Identity inspector”. Установите свойство “Class” значением “ProductViewController”, свойство “Storyboard ID” значением “ProductViewController”. В панели инструментов нажмите кнопку “Show the Assistant editor”. Для элемента управления “Image View” создайте переменную с именем “imageView”.       Во второй ячейке, для элемента управления “Text Field”, создайте переменную с именем “idTxt”. В третьей ячейке, для элемента управления “Text Field”, создайте переменную с именем “nameTxt”. В четвертой ячейке, для элемента управления “Text View”, создайте переменную с именем “descriptionTxt”. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductModel.swift”. Добавьте в него следующий код: Разберем добавленный код построчно. На 9 строке мы подключили пространство имен “Foundation” для класса “NSObject”. На 11 строке мы объявили класс с именем “ProductModel”, который наследуется от класса “NSObject” для того, чтобы считаться типом данных. На 12 строке мы объявили переменную с именем “productId” типа “Int” и инициализировали ее значение по умолчанию “-1”. На 13 строке мы объявили поле с именем “productImage” типа “String” и инициализировали ее значение по умолчанию “”. На 14 строке мы объявили поле с именем “productName” типа “String” и инициализировали ее значение по умолчанию “”. На 15 строке мы объявили поле с именем “productDescription” типа “String” и инициализировали ее значение по умолчанию “”. На 17 строке мы объявили параметризированный инициализатор класса “ProductModel” (это тоже самое, что и конструктор в языке программирования C#). Инициализатор - это метод, который вызывается при создании нового экземпляра класса. Данный инициализатор принимает аргументы с такими же именами, как имена полей в классе. Для того, чтобы инициализировать внутренние поля класса значениями полей аргументов. Мы левым операндом обращаемся к самому себе, через ключевое слово “self” и обращаемся к нужному нам полю, а правым операндом задаем значение аргумента. Мы плавно подходим к созданию делегата. В панели навигатора добавьте новый модуль “Swift File” с именем “ProductProtocol.swift”. Добавьте в него следующий код: Разберем добавленный код. На 11 строке мы объявили протокол с именем “ProductProtocol”. Протокол - это тоже самое, что и интерфейс в языке программирования C#. Экземпляр протокола через инициализатор создать нельзя, поскольку это только прототип, который не содержит реализации и используется в качестве описания и задания соглашений, которые разработчик должен реализовать сам в будущем. На 12 строке мы объявили метод прототип с именем “changeProduct”,  который принимает аргумент типа “ProductModel” с именем “model”. Откройте модуль “ProductViewController.swift”, добавьте поле с именем “delegate” типа “ProductProtocol?” и поле с именем “id” типа “Int” со значением по умолчанию “-1”. Должно получиться вот так: Добавьте после метода “viewDidLoad”, новые методы с именами “initNavigationButtons”, “backToParent”, “saveData”, которые ничего не принимают и ничего не возвращают. Код: Разберем построчно добавленный код. На 21 строке мы вызываем метод “initNavigationButtons”, когда View находится в процессе загрузки, чтобы инициализировать кнопки навигации. На 24 строке мы объявили метод с именем “initNavigationButtons”. На 25 строке мы переопределяем левую кнопку навигации, задаем ей текст “Отмена” и обработчик события на нажатие, метод “backToParent”. На 26 строке мы создаем кнопку с именем “saveButton” и текстом “Сохранить”, добавляем для нее обработчик событие на нажатие, метод “saveData”. На 27 строке мы обращаемся к экземпляру панели навигации контроллера “navigationItem” и вызываем от него метод “setRightBarButton”, который принимает два аргумента. Первый аргумент - это экземпляр добавляемой на панель навигации кнопки, второй аргумент - это стиль добавления кнопки, добавить с анимацией или без. Сам метод, как видно из названия, добавляет кнопку справа на панель навигации. Это вариант, как добавить правую кнопку из кода. На 30 строке мы объявили метод с именем “saveData”. На 31 строке мы обращаемся к нашему делегату с именем “delegate” и проверяем, если он инициализирован, тогда вызываем у него метод “changeData” и передаем туда модель данных, заполненную данными собранными с элементов управления. На 32 строке мы создаем экземпляр типа “ProductModel” с именем “model”. На 33 строке мы вызываем у делегата метод “changeData” и передаем туда экземпляр “model”. Данный метод будет реализован в классе “SuppliesViewController”. На 35 строке мы возвращаемся на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. На 38 строке мы объявляем метод с именем “backToParent”. Данный метод делает переход на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. Теперь откройте модуль “SuppliesViewController.swift”. Нам необходимо обновить его реализацию: Разберем обновленный код построчно. На 12 строке в классе SuppliesViewController мы наследуемся от протокола “ProductProtocol”. На 13 строке мы заменили тип данных для поля “supplies”. Тип данных был “[String]”, стал “[ProductModel]”. И сделали это поле статическим для того, чтобы была возможность доступа к нему из контроллера “ProductViewController”. На 29 строке мы реализовываем метод “changeProduct” протокола “ProductProtocol”. Именно этот метод будет вызываться при нажатии кнопки “Сохранить” в контроллере “ProductViewController”. На 30 строке мы проверяем идентификатор продукта, если “-1” - это означает, что это новый продукт. Иначе существующий продукт, и мы его обновляем. На 32 строке мы правым операндом генерируем идентификатор продукта путем вызова метода “makeNewProductId”. Данный метод возвращает значение типа “Int”, которое мы присваем левому операнду. Левый операнд - это поле “productId” экземпляра “ProductModel”. На 33 строке мы добавляем новый продукт в коллекцию продуктов. На 36 строке мы объявляем переменную с именем “changedIndex” типа “Int” со значением по умолчанию “-1”. В эту переменную мы запишем найденную ниже в цикле позицию продукта в коллекции “supplies”. На 37 строке мы в цикле проходимся по элементам коллекции “supplies” и ищем продукт, который нужно обновить. На 38 строке описано условие поиска продукта. На 39 строке, когда продукт был найден, мы сохраняем его позицию в переменную “changedIndex”. На 40 строке выходим из цикла. На 43 строке проверяем, если продукт был найден , тогда обновляем этот продукт. С 44 по 46 строку мы обновляем свойства продукта , значениями свойств модели, переданной аргументом метода “changeProduct”. На 49 строке мы запускаем переинициализацию “DataSource” для табличного представления, чтобы данные в ячейках обновились и добавились/удались обновленные данные. На 52 строке мы объявили метод с именем “makeNewProductId”, который ничего не принимает и возвращает значение типа “Int”. На 53 строке левым операндом мы объявили переменную с именем “sortProducts” типа “[ProductModel]”. Правым операндом мы на экземпляре коллекции “supplies” вызываем метод “sorted”, который принимает лямбда метод сортировки коллекции объектов и возвращает отсортированную коллекцию. У лямбда метода есть два аргумента, в них находятся экземпляры сравниваемых объектов из коллекции “suppliers”. Данный метод возвращает значение типа “Bool”. На 54 строке мы возвращаем условие сортировки по возрастанию. Сортировка производится по свойству “productId” класса “ProductModel”. На 56 строке мы обращаемся к последнему элементу отсортированной коллекции, тем самым получаем максимальный идентификатор продукта в коллекции и увеличиваем его на единицу. Теперь надо обновить реализацию метода “cellForRowAt indexPath”: Разберем код построчно. На 69 строке мы изменили вид обращения к коллекции “supplies”. На 73 строке мы изменили для экземпляра ячейки тип стиля. Был “.plain”, стал “subtitle”. На 74 строке мы левым операндом объявили константу с именем “model” типа “ProductModel”. Правым операндом мы инициализируем константу значением из коллекции “supplies”. На 75 строке мы записываем в свойство “tag” идентификатор продукта для этой ячейки. На 76 строке в элемент управления “Label”, который находится в верхней области ячейки, мы записываем название продукта. На 77 строке в элемент управления “Label”, который находится в нижней области ячейки, мы записываем описание продукта. На 78 строке мы активируем в ячейке информационную кнопку справа. При нажатии на эту кнопку мы будем редактировать продукт. Теперь нам надо подвязаться на событие нажатия на информационную кнопку в ячейке. Для этого необходимо переопределить метод протокола “UITableViewDelegate” ,реализованного в классе “UITableViewController” с именем “accessoryButtonTappedForRowWith”. Разберем код построчно. На 83 строке мы получаем экземпляр типа “ProductModel”, привязанный к ячейке, и сохраняем его в константу с именем “model”. На 84 строке мы производим поиск контроллера с именем “ProductViewController” в модуле “Main.storyboard”. На 85 строке на найденном экземпляре контроллера обращаемся к свойству “delegate” типа “ProductProtocol” и инициализируем его ссылкой на самого себя, тем самым говоря, что в этом классе уже реализован метод этого протокола с именем “changeProduct” и вызывать метод надо именно из этого класса. На 86 строке мы на найденном экземпляре контроллера обращаемся к свойству “id” и инициализируем его идентификатором продукта, привязанного к текущей ячейке. На 87 строке мы открываем контроллер “ProductViewController”. Редактирование мы почти сделали, осталось добавить инициализацию редактируемых данных в контроллере “ProductViewController”. Давайте реализуем еще в этом контроллере удаление данных. Для этого надо переопределить два метода объявленных в протоколе “UITableViewDelegate” и реализованных в классе “UITableViewController”. Эти методы называются “canEditRowAt IndexPath” и “commit editingStyle”. Обновите свой код в соответствии с представленным ниже: Разберем код построчно. На 90 строке мы переопределили метод “canEditRowAt IndexPath”, данный метод возвращает значение , которое говорит о том, активировать удаление строк или нет. На 91 строке возвращаем значение активировать. На 94 строке мы переопределили метод “commit editingStyle”, данный метод вызывается, когда мы нажали кнопку удалить на ячейке. На 95 строке мы удаляем продукт из коллекции “supplies”. На 96 строке обновляем содержимое таблицы. Теперь добавим кнопку добавления нового товара. Для этого обновим код метода “initNavigationButtons”.   Разберем код построчно. На 100 строке мы создали экземпляр кнопки с текстом “Новый продукт” и обработчиком события на нажатие - метод “newProduct”. На 101 строке мы добавили выше созданную кнопку в панель навигации контроллера в область справа. На 104 строке мы объявили метод “newProduct”, которые ничего не принимает и ничего не возвращает. На 105 строке мы производим поиск контроллера “ProductViewController” в модуле “Main.storyboard”. На 106 строке мы на найденном экземпляре контроллера обращаемся к свойству “delegate” и инициализируем его ссылкой на самого себя. На 107 строке мы  на найденном экземпляре контроллера обращаемся к свойству “id” и говорим, устанавливая значение “-1”, что мы создаем новый продукт. Теперь откройте модуль “Main.storyboard”, в нем на контроллере “ProductViewController” выделите элемент управления с идентификатором “idTxt”. В панели свойств на вкладке “Show the Attributes inspector” найдите свойство “User Interaction Enabled” и снимите галочку. Тем мы самым мы запретили редактирование значения этого поля. Теперь перейдите в модуль “ProductViewController.swift”. Обновите в нем код, как это показано ниже: Разберем добавленный код построчно. На 19 строке мы добавили метод с именем “initData”, который ничего не возвращает и принимает аргумент с именем “id” типа “Int”. На 20 строке мы проверяем идентификатор продукта, если он больше значения “-1”, значит продукт уже существует и содержит внутри себя данные, которые можно отобразить на текущей View. На 22 строке мы ищем продукт по идентификатору продукта, переданному аргументом в методе в коллекции продуктов “supplies”. С 23 по 25 строку мы заполняем элементы управления на пользовательском интерфейсе данными найденного продукта. На 33 строке в методе “viewDidLoad” мы добавили вызов метода “initData” и передали ему аргумент поле “id”, которое мы задаем в контроллере “SuppliesViewController”. Запустите приложение. На анимации выше видно, что мы вошли в систему, открыли товар на редактирование, откредактировали товар и изменения сохранились. Затем удалили товар. Теперь давайте проверим добавление нового товара: Проверили, добавление нового товара работает хорошо. Но все равно есть один нюанс, наше приложение на русском языке. А когда выполняли на ячейки жест справа на- лево, то показывалась кнопка удалить “Delete” на английском, давайте исправим это, чтобы показывалось русское название “Удалить”. Откройте модуль “SuppliesViewController.swift”, нам необходимо переопределить метод, объявленный в делегате “UITableViewDelegate” c именем “titleForDeleteConfirmationButtonForRowAt” и реализованный в классе “UITableViewController”. Добавьте следующий код, после метода “backToParent”: Я думаю, этот метод не стоит разбирать построчно, тут и так все понятно. Запустите приложение. На этом завершим наш урок. В следующем уроке мы разберем технологию 3D Touch и применим ее к нашему приложению для предварительного просмотра товаров. Добавим поле поиска в заголовок контроллера со списком товаров, реализуем поиск товаров. Реализуем протокол “UITextFieldDelegate”, чтобы скрывать клавиатуру при нажати кнопки “Ввод” на клавиатуре мобильного устройства. Разберем, как добавить собственную панель интрументов с кнопками.

Создания простого чата Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL Проектирование Базы Данных Переходим к phpMyAdmin. Создаем новую базу данных, называем “chatdb”. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца: “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index); “nick” тип колонки VARCHAR и длина 100; “post_text” тип колонки TEXT; “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP. Создание веб-сайта. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” .  Давайте создадим этот файл и напишем что-то вроде этого:  <html> <head> head> <body> php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> div> php $mysqli->close(); ?> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     divComments.scrollTop = divComments.scrollHeight; script> body> html> 2. Дальше давайте создадим “post.php” файл и напишем такое:  php $nick = $_POST['nick']; $post_text = $_POST['text']; $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); $nick = $mysqli->real_escape_string($nick); $nick = htmlspecialchars($nick); $post_text = $mysqli->real_escape_string($post_text); $post_text = htmlspecialchars($post_text); $mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');"); $mysqli->close(); /* Redirect To Main Page */ header('Location: ' . $_SERVER['HTTP_REFERER']); ?> 3. Откроем ваш чат в любом продвинутом браузере. Вся работа:  4. Напишите ник и текст, а потом нажмите на кнопку отправки.  Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер. Когда количество комментариев больше, чем экран может вместить, то комментарии   переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию. Что тут не так? Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы. Это очень, очень серьезная проблема для любого чата. Как это исправить? Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form. Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад). При перезагрузке страницы сбрасывает “Nick” в  поле (также, как любые другие изменения, те, что сделали с пользователем) Как это исправить? Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически. Проблема номер 2.1. Видите ли что-то необычное тут? Это слишком быстро? Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае? Давайте попробуем.  Давайте немного изменим “post.php”, после $mysql->query() добавив это:  for ($i = 0; $i < 1000000000; $i++) { } Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:   Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2. Давайте уберем петлю с “post.php” и исправим эти проблемы. Реализация легкого AJAX в простой чат Автоматическое обновление комментариев Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается. Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично. Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично. Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы. Давайте сделаем первую часть, то есть блок комментариев. Для начала создадим пустой файл, назовем “getcomment.php”. Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его. 1. Вырезаем инициализированный блок MySQL с “index.php"  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> вставляем в “getcomments.php”. 2. Следующее, вырежем контент div c комментариями с “index.php”: php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> И вставим (добавим) в “getcomments.php” после инициализации MySQL. 3. Дальше, вырежем недалекий блок MySQL с “index.php”: php $mysqli->close(); ?> Вставим его в конец файла “getcomments.php”. 4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ. <script type="text/javascript"> var comments = document.getElementById('comments'); comments.scrollTop = comments.scrollHeight; script> Не переживай, это только временно. 5. Сделано. Теперь имеем что-то наподобие этого:  <html> <head> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> body> html> getcomments.php:  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> Вероятно, теперь наша страница разделена. Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера). Дальше, переходим на главную страницу, http:///index.php Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут! Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать? 1. Для начала стоит создать пустой JS-скрипт на главной странице: <script type="text/javascript"> alert('Test'); script> Добавив это после тега div, перед закрывающимся тегом . 2. Сделаем HTTP GET запрос от JS к “getcommet.php” Для этого используем XMLHtttpRequest (XHR) класс: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию. Для получения более кросс-браузерного пути переходим в и добавляем это: <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; }; script> И главный скрипт (в конце) <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.   2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?» Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML). Но действительно ли это AJAX, это асинхронно? Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”: for ($i = 0; $i < 1000000000; $i++) { } Что теперь видно на загружаемой странице? Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши): Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы: Это не AJAX! Это JAX! Как его сделать асинхронным? К счастью, ХHR также поддерживает асинхронный режим: <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */ xhr.onreadystatechange = function() {   if (xhr.readyState == 4) {     if(xhr.status == 200) {       alert(xhr.responseText);     }   } }; xhr.send(null); script> В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.  Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение. for ($i = 0; $i < 1000000000; $i++) { } И продолжаем работу. 3. Добавляем этот контент в div  вместо предупреждения. Заменить это: alert(xhr.responseText);  C этим: var divComments = document.getElementById('comments'); divComments.innerHTML = xhr.responseText; Возвращаем назад, клиент видит “glued” страницу с блоком комментариев. 4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.  <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html> Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически. Но отправка комментариев уже вызывает перезагрузку нашей страницы. Отправка комментариев без перезагрузки Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно). Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET. И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header  для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных. Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64. 1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”  <script type="text/javascript"> function postComment(nick, text) {   var xhr = getXmlHttp();   xhr.open('POST', '/post.php', true);   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   xhr.onreadystatechange = function() {     if (xhr.readyState == 4) {       if (xhr.status == 200) {         /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */       }     }   };   xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */ }; script> 3. Следующие, перезагружая страницу при отправке:  ... onsubmit="return false;"> Также добавим вызов “postComment’s”: action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 4. Наконец, необязательно, но можно убрать “action” и “method” с формы:  <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 5. Результат: <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <script type="text/javascript">     function postComment(nick, text) {         var xhr = getXmlHttp();         xhr.open('POST', '/post.php', true);         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */                 }             }         };         xhr.send('nick=' + nick + '&text=' + text);     }; script> <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html>  Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

Введение В наше время распознавание отпечатков пальцев является активным направлением исследований. Важным компонентом в системе распознавания отпечатков является алгоритм. В связи с проблемой данной сферы алгоритмы распознавания отпечатков пальцев делятся на две категории: алгоритмы проверки и идентификации. Цель алгоритмов проверки отпечатков пальцев является – определить, какой из двух отпечатков сделан одним пальцем, а какой нет. С другой стороны, алгоритмы идентификации делают поиск запроса отпечатка пальца в базе данных, ища отпечаток, сделанный одним и тем же пальцем. Насколько мы знаем, существуют сотни документов, касающихся проверки отпечатков пальцев, но нет ни одного фреймворка, позволяющего проверять отпечатки в сети. Поэтому вы должны осуществлять ваши личные настройки, тестировать выполнения алгоритмов распознавания ваших отпечатков. Более того, вы должны потратить много времени, выполняя алгоритмы других авторов, для сравнения с собственными. FVC-onGoing – наиболее связанный с работой нашего фреймворка в веб-системе. Данная система имеет такие ограничения: У вас нет доступа к другим алгоритмам, кроме своих. Это не фреймворк, поэтому вы не можете использовать другие компоненты программного обеспечения. Система не может быть использована с целью обучения, так как ученик не может посмотреть, как работают алгоритмы. После выполнения опыта используется база данных (стандартная или жесткая), вам необходимо ждать 30 дней для, того чтобы сделать следующий эксперимент, используя ту же базу данных. Вы не можете управлять базой данных. Таким образом, вы не можете использовать собственную базу данных либо редактировать существующую. Отсутствует доступ к тем отпечаткам, для которых ваш алгоритм не выполнился. Следовательно, вы не сможете проанализировать, почему ваш алгоритм не выполнился для того, чтобы исправить код. Вы не сможете создать эксперимент с помощью обычного протокола, для оценки выполнения Если в любом из указанных выше ограничениях для вас возникли проблемы, тогда используйте наш фреймворк. Наш фреймворк реализован на С# с использованием .Net Framework по двум главным причинам. Во-первых, С# стал одним из самых популярных языков программирования. Вторая причина в том, что инструменты, библиотеки и классы, доступные в .Net Framework, экономят много времени написания кода. Наш фреймворк позволяет экспериментировать в базах данных типа B от FVC2000, FVC2002 и FVC2004, и в базах данных типа А от FVC2002 и FVC2004. В этих экспериментах мы выполняем индикаторы the Fingerprint Verification Competitions (EER(%), FMR100(%), FMR1000(%), ZeroFMR(%), Time(ms) и ROC curves).  Кроме того, вы можете делать опыты даже с обычным протоколом и разными базами данных. Мы реализовали алгоритмы распознавания отпечатков пальцев, предложенный Tico и Kuosmanen, Jiang и Yau, Medina-Pérez и Qi. Важно обратить внимание на то, что вопреки алгоритму Qi - это набор шаблонов отпечатков пальцев, основывающийся на алгоритмах, мы реализовали только алгоритмы, сопоставимые протоколами ввода отпечатка пальца. Мы также сделали алгоритмы выделения признаков, предложенный Ratha, и ориентацию на получение изображения предложенную Sherlock. Данный фреймворк позволяет вам добавлять, как новые алгоритмы распознавания отпечатков, так и новые алгоритмы выделения признаков с минимальными усилиями и без перекомпиляции фреймворка. Одна из целей, которую мы преследовали, когда разрабатывали данный фреймворк, была сделать классы интерфейсов простыми и доступными. Таким образом, процесс добавления новых алгоритмов очень прост. В этой статье мы вкратце объясняем, как: экспериментировать над распознаванием отпечатков пальцев; увидеть шаблон отпечатка пальца после выполнения алгоритма; высчитать и вывести на дисплей отпечаток пальца; интегрировать ваши алгоритмы в фреймворк. Расширения данного фреймворка с целью исследований появились в https://sites.google.com/site/miguelmedinaperez/software/fprframework В данной статьей мы вкладываем следующие файлы: FingerprintRecognition_v2.2.zip: исходные файлы нашего фреймворка. Help.zip: Исходный код документации. Запуск исследования для распознавания отпечатков пальцев Извлеките файл “FingerprintRecognition.zip” и постройте решение. Далее вы можете отлаживать проект “FR.FVCExperimenter” или можете запустить “FR.FVCExperimenter.exe” в директорию, которая содержит сгенерированный узел. Данное окно откроет: В строке “Resources” записан путь к базе данных, которую вы собираетесь использовать, к примеру: “D:\PR Databases\Fingerprints\FVC2004\DB1_B”. Выберите подходящий вам тип опыта в всплывающем меню с названием “Experiment”. Используйте меню с названиями “Minutia Extractor”, “Orientation Image Extractor” и “Skeleton Image Extractor“ для выбора алгоритма, который будет использоваться для нахождения основных особенностей (отпечаток, ориентированное изображение и его образ). Используйте поле “Matcher” для выбора алгоритма распознавания отпечатков пальцев и поле “Feature Provider” для выбора алгоритма, который будет хранить и извлекать черты выбранных совпадений. Несмотря на то, что мы реализовали только одну черту распознавания для каждого совпадения, существуют сценарии, где вы используете несколько признаков для одного совпадения. Поле с названием “Properties” позволяет изменять параметры выбранного алгоритма. Кликните на кнопку “Execute Experiment” для запуска исследования. Данный опыт использует протокол оценки от the Fingerprint Verification Competitions. В этом опыте мы высчитали такие индикаторы: EER(%), FMR100(%), FMR1000(%), ZeroFMR(%), Время(мс) и  ROC-кривая. Эти индикаторы сохранены в файле с именем, сформированным в зависимости от выбранного вами алгоритма и окончанием ".Summary.csv". Этот файл сохраняется в папке с названием "Results" в той же папке, где хранятся отпечатки пальцев. Также сохранены еще два файла, один хранит в себе ложные соответствия отпечатков пальцев, другой – ложные несоответствия отпечатков. Если вы хотите сравнить 2 отпечатка и проверить их совпадение, кликните на кнопку “Visual Match”, после которой откроется форма “Visual Fingerprint Matching”. Загрузите отпечатки, которые вы хотите сравнить и нажмите кнопку “Match”. Экстрактор признаков и выбранный в “FVC Experimenter” режим также здесь используются для того, чтобы выполнить сравнение отпечатков пальцев. Ниже пример сравнения двух отпечатков. Визуализация очертаний отпечатка пальца Если вы хотите вывести картинку очертания отпечатка, тогда вам нужно использовать проект “FR.FeatureDisplay”. В поле “Fingerprint Feature Display” вы можете изменять экстрактор признаков и их изображение. В фреймворке мы используем классы для визуализации отпечатка, ориентированное изображение и скелет картинки. В следующем примере вы можете увидеть визуализацию приблизительного изображения отпечатка: Соответствие отпечатков вне фреймворка В данном разделе представлен пример использования фреймворка для сравнения двух изображений отпечатков в обычном пользовательском приложении. Он складывается из 3 шагов для сравнения 2 изображений отпечатков: загрузить картинку, извлечение признаков и их сравнение. В этом случае пользователям нужно добавить ссылки из их приложения к сборке FR.Core и FR.Medina2012. Сборки SHullDelaunayTriangulation и ImageProcessingTools должны быть добавлены в папку вывода, где появится бинарный файл. // Loading fingerprints var fingerprintImg1 = ImageLoader.LoadImage(fileName1); var fingerprintImg2 = ImageLoader.LoadImage(fileName2); // Building feature extractor and extracting features var featExtractor = new MTripletsExtractor() { MtiaExtractor = new Ratha1995MinutiaeExtractor() }; var features1 = featExtractor.ExtractFeatures(fingerprintImg1); var features2 = featExtractor.ExtractFeatures(fingerprintImg2); // Building matcher and matching var matcher = new M3gl(); double similarity = matcher.Match(features1, features2); Пример использования M3gl  показывает, как легко использовать фреймворк, и как хорошо сложен и не требует пояснений код. Правила хорошего дизайна применены в фреймворке и дают возможность пользователю легко заменить или изменить любой компонент. Добавление новых алгоритмов в фреймворк Первое, что вы должны знать - это то, что вам не нужно модифицировать приложение фреймворка для распознавания собственных алгоритмов, потому что мы используем Рефлекцию, для того чтобы загрузить все динамические алгоритмы во время выполнения. Вы можете создать столько приложений, сколько хотите в директории, которая содержит фреймворк. Для каждого нового приложения зайдите в настройки и укажите путь вывода со значением “..\bin\Release\”. Для добавления новой функции определения вам нужно наследовать с базового класса FeatureExtractor и реализовать метод ExtractFeatures(Bitmap image). Например, предположим, что вы хотите создать функцию определения типа MyFeature, дальше вы можете реализовать класс по примеру:  public class MyFeatureExtractor : FeatureExtractor {     public override MyFeature ExtractFeatures(Bitmap image)     {         // Place here your code to extract features     } } В случае, если новая функция была построена на некоторых существующих, вы можете поступить следующим образом: public class MyFeatureExtractor : FeatureExtractor {     public FeatureExtractor<List> MtiaExtractor { set; get; }     public FeatureExtractor OrImgExtractor { set; get; }     public override MyFeature ExtractFeatures(Bitmap image)     {         try         {             var mtiae = MtiaExtractor.ExtractFeatures(image);             var orImg = OrImgExtractor.ExtractFeatures(image);             return ExtractFeatures(mtiae, orImg);         }         catch (Exception e)         {             if (MtiaExtractor == null)                 throw new InvalidOperationException("Cannot extract MyFeature: Unassigned minutia list extractor!", e);             if (OrImgExtractor == null)                 throw new InvalidOperationException("Cannot extract MyFeature: Unassigned orientation image extractor!", e);             throw;         }     }     public MyFeature ExtractFeatures(List mtiae, OrientationImage orImg)     {         // Place here your code to extract features     } } Для каждой функции определения вы должны создать поставщик ресурса. Поставщик ресурса позволяет сохранять (полученный) в (выходной) файл ресурс, связанный с отпечатком. Фреймворк включает в себя поставщик ресурса для извлекания отпечатков (MinutiaListProvider), ориентированное изображение (OrientationImageProvider) и скелет картинки (SkeletonImageProvider). В следующем примере поставщика ресурсов для функции извлекания определены ниже. public class MyFeatureProvider : ResourceProvider {     public MinutiaListProvider MtiaListProvider { get; set; }     public OrientationImageProvider OrImgProvider { get; set; }     public override string GetSignature()     {         return "myf";     }     public override bool IsResourcePersistent()     {         return true;     }     protected override MyFeature Extract(string fingerprint, ResourceRepository repository)     {         try         {             var mtiae = MtiaListProvider.GetResource(fingerprint, repository);             var orImg = OrImgProvider.GetResource(fingerprint, repository);             return featureExtractor.ExtractFeatures(mtiae, orImg);         }         catch (Exception e)         {             if (MtiaListProvider == null)                 throw new InvalidOperationException("Unable to extract MyFeature: Unassigned minutia list provider!", e);             if (OrImgProvider == null)                 throw new InvalidOperationException("Unable to extract MyFeature: Unassigned orientation image provider!", e);             throw;         }     }     private MyFeatureExtractor featureExtractor = new MyFeatureExtractor(); } Пришло время создать новый алгоритм совпадения отпечатков пальцев. Предположим, вы хотите сравнить функции типа MyFeature, для этого вам необходимо создать «сравнитель» такой как: public class MyMatcher : Matcher {     public override double Match(MyFeature query, MyFeature template)     {         // Place here your code to match fingerprints     } } В случае, если вы реализовали алгоритм сравнения отпечатков, дальше вам необходимо изменить в коде ниже следующее: public class MyMatcher : Matcher, IMinutiaMatcher {     public override double Match(MyFeature query, MyFeature template)     {         List matchingMtiae;         return Match(query, template, out matchingMtiae);     }     public double Match(object query, object template, out List matchingMtiae)     {         // Place here your code to match fingerprints     } } Интегрированные встроенные алгоритмы в фреймворке Пользователям не нужно изменять фреймворк для интеграции обычных алгоритмов, так как Рефлекция загружает динамически, во время выполнения программы. В этом случае пользователи должны добавить новые алгоритмы к их собственным обычным сборкам. Для того, чтобы использовать существующие алгоритмы сравнения в фреймворке, первое, что необходимо сделать, создать поставщик ресурсов. Поставщик ресурсов позволяет сохранять (полученный) в (выходной) файл ресурсы, связанные с отпечатками пальцев. К примеру, предположим, что пользователи хотят интегрировать SourceAFIS SDK (http://www.sourceafis.org/) в фреймворк, следующая функция обеспечения может использоваться как: public class SourceAFISFeatureProvider : ResourceProvider {     protected override Person Extract(string fingerprint, ResourceRepository repository)     {         Fingerprint fp = new Fingerprint();         fp.AsBitmap = imageProvider.GetResource(fingerprint, repository);         Person person = new Person();         person.Fingerprints.Add(fp);         Afis.Extract(person);         return person;     }     public override string GetSignature()     {         return string.Format("sAFIS");     }     public override bool IsResourcePersistent()     {         return true;     }     private static AfisEngine Afis = new AfisEngine(); } А сейчас алгоритм сравнения отпечатков может быть записан в следующие классы: public class SourceAFISMatcher : Matcher {     public override double Match(Person query, Person template)     {         return Afis.Verify(query, template);     }     private static AfisEngine Afis = new AfisEngine(); } Результаты эксперимента Мы выполнили обширный эксперимент с алгоритмами сравнения отпечатков пальцев, пользуясь фреймворком. Выводы В данной статье продемонстрировали фреймворк в C# для распознавания отпечатков пальцев. Мы коротко объяснили, как выполнить опыты по распознаванию отпечатков и как интегрировать собственные алгоритмы в фреймворк. Мы предоставили несколько алгоритмов сравнения отпечатков пальцев и алгоритмов извлечения признаков, с помощью которых вы можете не только делать эксперименты, но и создать собственные приложения. Мы показали исходные коды всех алгоритмов, поэтому пользователь может использовать любую часть кода так же, как и любой компонент программного обеспечения. Источник: http://www.codeproject.com/Articles/97590/A-Framework-in-C-for-Fingerprint-Verification

Величезна база знань. Гнучкий та зручний формат навчання. Якісний контент. Низька ціна. Висновки. ITVDN – це освітня онлайн платформа, яка дозволяє опановувати затребувані на ІТ-ринку мови програмування, бібліотеки, фреймворки, інші супутні технології, а також цілі ІТ-спеціальності. Український навчальний простір багатий на проєкти освітнього характеру, але на їхньому фоні ITVDN вирізняється своєю унікальністю та має декілька ключових переваг. І сьогодні ми пропонуємо вам ознайомитися з ними. 1. Величезна база знань Перша головна особливість ITVDN – це доступ до величезної бази знань, котра є аналогом сучасної бібліотеки. Тут зібрано понад 250 відео курсів з найпопулярніших напрямків вивчення інформаційних технологій, які ми накопичили за останні 10 років: FrontEnd; BackEnd мовами Python, Java, C#, PHP, Ruby та іншими; мобільна розробка; вебдизайн; тестування; розробка ігор; технології для роботи з базами даних тощо. Звісно, ІТ – дуже динамічна галузь: постійно оновлюються мови програмування, бібліотеки й фреймворки, з’являються нові інструменти. Ми уважно стежимо за трендами та релізами й підтримуємо актуальність наших матеріалів за рахунок регулярного випуску нового навчального контенту. Сюди входять не тільки відео курси, а й навчальні програми за спеціальностями, онлайн тренінги та вебінари зі спеціалістами з Meta, Google, EPAM, GlobalLogic тощо.  Ви можете заглибитися у вивчення однієї конкретної сфери, наприклад у FrontEnd розробку, де є десятки курсів від різних авторів. Або ж можете вивчати різні напрямки одночасно і стати універсальним FullStack спеціалістом. Даний підхід дозволяє отримати всебічні знання і розширити професійний кругозір, що виділить вас серед інших кандидатів на перегрітому ринку ІТ. Такі спеціалісти привертають значно більше уваги зі сторони рекрутерів, і мають вищі шанси на успішне працевлаштування. 2. Гнучкий та зручний формат навчання На ITVDN ви можете вивчати програмування і технології в зручному для вас темпі: Можливість навчатися 24/7. Відео курси дозволяють опановувати матеріал у будь-який час і з будь-якої точки світу, оскільки уроки вже записані. Це вигідно відрізняє їх від онлайн курсів, де необхідно бути присутнім на уроці в зазначений час. Зручне поєднання з іншими активностями. У вас є робота, ви навчаєтесь у школі/університеті, активно займаєтеся сім’єю, але прагнете розвиватися в ІТ? Формат відео курсів дозволить вам з легкістю поєднувати різні види діяльності і проводити час ефективно. Регулювання інтенсивності. Ви самі визначаєте, коли і скільки часу виділити на навчання з огляду на вашу зайнятість, продуктивні години, самопочуття тощо. Займайтеся в тому темпі, який для вас найбільш зручний та ефективний. Повторення тем. Ви можете переглядати складні теми стільки разів, скільки вам потрібно для належного розуміння матеріалу, а прості – пропускати або переглядати в прискореному режимі. Додаткові матеріали для збагачення знань та навичок. В ході навчання вам будуть доступні: конспекти з кожного уроку; д/з, які можна відправити на перевірку (з отриманням фідбеку); консультації із сертифікованим розробником; Інтерактивний практикум, де ви зможете відточити свої навички написання програмного коду; тестування для перевірки засвоєного матеріалу з подальшим отриманням сертифікату. Навчання під час блекаутів. На ITVDN доступний пакет підписки «Преміум Plus», котрий дозволяє завантажувати відео уроки на ваші девайси і переглядати їх навіть за умов повного зникнення світла та інтернету. 3. Якісний контент Авторами відео курсів є сертифіковані розробники з профільною освітою та комерційним досвідом роботи. Кожен відео урок ґрунтується на унікальному авторському досвіді, який він заробив, пройшовши складний шлях проб і помилок. В результаті це дозволило йому успішно здійнятися кар’єрною драбиною в ІТ. А ще це дозволяє впевнитися, що ви отримуєте не «воду», а саме прикладні знання, котрі використовуються на реальних проєктах. Також ми регулярно оновлюємо курси, враховуючи останні тенденції та новинки у світі технологій, завдяки чому ви отримуєте актуальну інформацію і вивчаєте саме те, що користується попитом на нинішньому ринку ІТ. 4. Низька ціна Навчання на ITVDN за відео курсами є значно дешевшим, ніж інші формати отримання знань на інших ресурсах. На це впливає одразу декілька факторів: один курс може бути проданий тисячам студентів без додаткових витрат на викладачів чи інфраструктуру. Це дозволяє окупити загальні витрати на створення навчального контенту; процеси реєстрації, перевірки знань та сертифікації студентів автоматизовані, що знижує потребу в персоналі для адміністративної підтримки; ви навчаєтесь у власному темпі з можливістю повторного перегляду складних тем без потреби у додаткових заняттях або постійних консультаціях з викладачами в реальному часі. Це зменшує навантаження на викладацький персонал; наша головна аудиторія – українці. Ми прагнемо бачити нашу країну серед передових технологічних держав, а для цього ІТ-освіта має бути доступною для кожного нашого співвітчизника. Зазначимо, що ми не надаємо послуги громадянам росії та білорусі. Крім того, на ITVDN існує можливість оплати частинами через monobank та ПриватБанк – коли ви розбиваєте платіж на більш дрібні та сплачуєте невеликі суми щомісяця без комісії. Це робить навчання ще більш доступним для широкого кола людей. Ви можете інвестувати у своє навчання без відчутного фінансового навантаження, отримуючи при цьому якісні знання та навички. Висновки Навчання на ITVDN у форматі відео курсів – це унікальна можливість отримати якісну ІТ-освіту, яку може дозволити собі кожен. Проєкт, створений в Україні українськими розробниками, що пропонує величезну базу знань, яка дозволяє заглибитися в обраний напрямок або вивчати різні аспекти інформаційних технологій: від FrontEnd та BackEnd розробки до тестування, вебдизайну, створення ігор на Unity тощо. Крім того, наш проєкт не має аналогів і є дійсно унікальним для українського ринку. Гнучкий та зручний формат навчання за відео курсами забезпечує комфортний процес засвоєння матеріалу, а якісний контент, створений сертифікованими ІТ-спеціалістами з досвідом, гарантує актуальність матеріалів, відсутність зайвого та високу віддачу від навчання. Крім того, доступна ціна та можливість оплати частинами роблять платформу ITVDN найкращим вибором для тих, хто прагне професійного розвитку в ІТ-сфері за максимально дружньою ціною. Навчайтеся з ITVDN та досягайте намічених висот в ІТ!

Двадцать первый век знаменует “бум” информационных технологий. Научно-технические достижения за последние двадцать лет достигли значительных высот и позволили человечеству выйти на новый уровень жизни. Прогресс не обошел стороной и сферу образования - с развитием персональных компьютеров, сети Интернет и других приспособлений обработки информации практически у каждого человека появилась возможность обучаться не выходя из дома. Возможность получения знаний в онлайн-режиме - одно из главных достижений нашего века. На сегодняшний день особый спрос на онлайн-обучение прослеживается в связи со сложившимися карантинными условиями. Зачем зря терять время и сидеть сложа руки, если можно извлечь из ситуации максимум выгоды, прокачав свои знания? Образовательная платформа ITVDN предлагает вам использовать свой потенциал и технологию онлайн-обучения, чтобы сделать первый шаг навстречу одной из наиболее востребованных профессий нашего времени - профессии программиста.    Возможно ли стать программистом, обучаясь онлайн? Конечно! Просторы интернета полны различных образовательных ресурсов. Если рассматривать англоязычные платформы с доступом к IT-курсам, стоит отметить: MIT OpenCourseWare - онлайн-курсы от Массачусетского института технологий - одного из самых престижных технических учебных заведений мира;  edX - платформа, которая содержит курсы от более чем 140 ведущих ВУЗов мира; Coursera - проект для публикации образовательных материалов, основанный профессорами математики Стэнфордского университета; Pluralsight -  онлайн-платформа с большим количеством всевозможных видео курсов. Если говорить о русскоязычных онлайн-ресурсах: Hexlet - проект, содержащий программы по обучению 6 IT-специальностям; JavaRush - онлайн-курс по программированию на Java; ITVDN - образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям; другие онлайн-ресурсы. Наиболее качественными являются англоязычные курсы, так как английский - интернациональный язык и преимущественное количество форумов с полезной информацией ведется именно на нем. Если ваше владение языком Туманного Альбиона не является столь продвинутым и вы предпочитаете русскоязычные платформы, мы советуем вам ITVDN. Это один из лидирующих образовательных IT-ресурсов в СНГ, который начал свою работу в 2014-м году и на данный момент имеет в своем распоряжении огромную базу видео уроков, которая помогает всем, кто изучает программирование и информационные технологии, обучаться и становиться профессионалами выбранной IT-специальности.    Какой язык программирования учить? Зависит от IT-сферы, в которой вы хотите себя реализовать. Если это FrontEnd разработка (создание внешнего вида веб-сайта), то не обойтись без JavaScript + языки верстки HTML и CSS. Если BackEnd (создание всего, что находится “под капотом” сайта), то здесь выбор шире -  PHP, Java, C#, Python, Ruby, Go, JavaScript (Node.js). В мире машинного обучения очень важен Python и его библиотеки. Компьютерные игры крупных масштабов и с высокой производительностью создают на С++, рангом поменьше - на движке Unity. Это очень поверхностные описания того, какие языки надо учить для овладения определенной IT-специальностью, поскольку каждая профессия в IT имеет целый перечень требуемых к изучению технологий. С полным списком требований к некоторым профессиям вы можете ознакомиться в наших статьях, перейдя по ссылке. Как учиться онлайн самостоятельно? Как правильно спланировать свое обучение? Планировка - очень важный и ответственный момент в онлайн-обучении. Вы находитесь дома под воздействием множества отвлекающих факторов - будь то ваши сожители, домашний питомец, сосед с перфоратором, вкусно пахнущая еда из кухни, открытый ютуб или интересная компьютерная игра. Важно не только избавиться от всех помех, но и следовать составленному под себя учебному плану. После определения желаемой IT-профессии и выбора образовательной онлайн-платформы необходимо запастись мотивацией. Но одной только мотивации будет мало, причем она быстро иссякает. Следует составить расписание, в котором будет органично сочетаться теория, практика, выполнение домашнего задания и тестирование (проверка знаний). Мы предлагаем следующее:   Прежде всего выделите время на онлайн-учебу и организуйте регулярные занятия. К примеру, с 19:00 до 21:00 каждый день вы занимаетесь онлайн-обучением и ничем иным (небольшие перерывы допускаются, естественно). Работа короткими интенсивными интервалами улучшит общую продуктивность урока. Учебный процесс не должен прерываться готовкой пищи, выгулом собаки, разговорами по мессенджеру и прочими делами, для которых также находится место в вашей жизни. Все образовательные интернет-ресурсы используют схожую тактику: вначале вам дается теория, затем предлагается решить несколько практических задач, а для закрепления знаний - домашнее задания по теме. Придерживайтесь ее. Распределите ваше учебное время на ознакомление и изучение материала, а также для последующей практики (включая прохождение тестов). Домашнее задание лучше оставить на следующий день либо сделать длительный перерыв перед ним, чтобы дать вашему мозгу спокойно обработать новую информацию.   Проходите тесты, предусмотренные выбранной образовательной платформой. Помимо проверки усвоения материала тестирование способствует развитию навыков эффективного написания кода. На ITVDN для усовершенствования навыков создания кода был разработан специальный интерактивный тренажер, а для подтверждения знаний и получения соответствующего сертификата мы предлагаем testprovider.com.    Разрабатывайте собственный интересный проект в специально отведенные дни: придумайте себе задачу (либо поищите в интернете) и занимайтесь  ее постепенной реализацией, используя изученные темы - так вы и освежите знания, и попрактикуетесь в написании кода. Если выйдет неплохой проект, добавите его в свое портфолио. Используйте гугл и форумы для программистов. Профессия программиста предусматривает широкое использование сети Интернет в процессе поиска решения возникающих проблем. Вам очень пригодятся такие сайты как stackoverflow.ru, quora.com и прочие, где вы найдете ответы на программистские “как?” и “почему?”. Какие подводные камни у онлайн-обучения?   Потеря мотивации. Изучение программирования - это длительный и кропотливый процесс. Именно на мотивацию делают ставку большинство новичков и именно поэтому большинство очень быстро “выгорают” и прекращают обучение. Регулярные занятия, выполнение домашних заданий, закрепление новых тем через тестирование, разработка собственного проекта, участие в различных событиях, касающихся выбранной IT-профессии (хакатоны, тренинги и прочие активности) создадут благоприятные условия для подпитывания ваших сил и будут давать вам уверенность для продвижения вперед. Отсутствие ментора и контроля. В среде онлайн-обучения отсутствует жесткий контроль, поскольку вы сам себе хозяин. Вы можете поддаваться лени, ничего не учить, не практиковаться и вовсе “забросить” учебу. Это главный камень преткновения в интернет-обучении. Над вами нет никого, перед кем вы бы несли ответственность за свои результаты и кто вами курировал бы.  Сколько стоит онлайн-обучение? Есть три варианта онлайн-обучения: С использованием сервиса YouTube и документаций, которые свободно распространяются в интернете. Выбрав эту опцию, вы будете обучаться бесплатно. Но эффективность данного варианта оставляет желать лучшего. Приобретение видео курсов. Здесь вам придется потратить небольшую сумму денег. Взамен вы получите доступ к видео базе, над которой трудились профессионалы, домашним заданиям, дополнительным обучающим материалам, конспектам по рассмотренным темам, онлайн-тестам. Онлайн-обучение в мини группе с тренером. Данный вариант самый дорогостоящий, но и эффективность его максимально высока, так как вы получаете возможность дистанционно общаться с ментором и небольшой группой учащихся через специальные программы (Skype, Zoom и т. д.), задавать вопросы и получать развернутые ответы, просматривать видеозаписи уроков. Проблема с мотивацией также решена - вы вложили свои деньги и над вами есть куратор, который следит за вашими успехами и выполнением домашних заданий. Таким образом, если вы не хотите тратить много денег либо и вовсе желаете освоить программирование бесплатно, подумайте над выбором одного из первых двух вариантов. Если же вам нужно больше общения с ментором, обратите внимание на третью опцию. На ITVDN она представлена новым форматом обучения -  Live Online. Занятия проходят в небольшой группе в форме регулярных онлайн встреч, на которых объясняется новый материал, обсуждаются нюансы выполнения практических заданий, есть проверка ДЗ и чат для общения с одногруппниками, а также доступ ко всем видео курсам ITVDN по выбранной специальности. Опция онлайн-обучения с тренером доступна на ITVDN по 3-м специальностям: .NET Developer, FrontEnd Developer и Java Developer. Параллельно процессу обучения вы также создаете собственный курсовой проект, который украсит ваше портфолио и станет неплохим подспорьем во время дальнейшего трудоустройства. Надеемся, что наши советы помогли вам составить целостную картину онлайн-обучения.   Желаем вам здоровья и успехов в прокачке знаний! Оставайтесь на ITVDN!

Введение Факторизация целых чисел позволяет раскладывать на множители (факторинг) большие числа (Int64) и проверять простоту целых чисел [1,2]. Приведем пример больших (14 ... 18-ти значных) простых чисел, которые можно использовать для тестирования или оценки. biggest 18-digit primes 999999999999999989 999999999999999967 999999999999999877 biggest 17-digit primes  99999999999999997 99999999999999977 99999999999999961 biggest 16-digit primes 9999999999999937 9999999999999917 9999999999999887 biggest 15-digit primes 999999999999989 999999999999947 999999999999883 biggest 14-digit primes 99999999999973 99999999999971 99999999999959 Кодовый модуль демонстрирует практическое использование алгоритма, написанного в C# (4.0). using System; using System.Collections.Generic; namespace Infosoft.MathShared {        /// Integers: Properties and Operations        public  static partial class Integers        { #region Prime Numbers <100              private static readonly int[] Primes =              new int[] { 2, 3, 5, 7, 11, 13, 17, 19, 23,              29, 31, 37, 41, 43, 47, 53, 59,              61, 67, 71, 73, 79, 83, 89, 97 }; #endregion              // starting number for iterative factorization              private const int _startNum = 101; #region IsPrime : primality Check              ///              /// Check if the number is Prime              ///              /// Int64              /// bool              public static bool IsPrime(Int64 Num){                     int j;                     bool ret;                     Int64 _upMargin = (Int64)Math.Sqrt(Num) + 1;;                     // Check if number is in Prime Array                     for (int i = 0; i < Primes.Length; i++){                            if (Num == Primes[i]) { return true; }                     }                     // Check divisibility w/Prime Array                     for (int i = 0; i < Primes.Length; i++) {                            if (Num % Primes[i] == 0) return false;                     }                     // Main iteration for Primality check                     _upMargin = (Int64)Math.Sqrt(Num) + 1;                     j = _startNum;                     ret = true;                     while (j <= _upMargin)                     {                            if (Num % j == 0) { ret = false; break; }                            else { j = j + 2; }                     }                     return ret;              }              ///              /// Check if number-string is Prime              ///              /// string              /// bool              public static bool IsPrime(string StringNum) {                     return IsPrime(Int64.Parse(StringNum));              } #endregion #region Fast Factorization              ///              /// Factorize string converted to long integers              ///              /// string              /// Int64[]              public static Int64[] FactorizeFast(string StringNum) {                     return FactorizeFast(Int64.Parse(StringNum));              }              ///              /// Factorize long integers: speed optimized              ///              /// Int64              /// Int64[]              public static Int64[] FactorizeFast(Int64 Num)              { #region vars                     // list of Factors                     List _arrFactors = new List();                     // temp variable                     Int64 _num = Num; #endregion #region Check if the number is Prime(<100)                     for (int k = 0; k < Primes.Length; k++)                     {                            if (_num == Primes[k])                            {                                   _arrFactors.Add(Primes[k]);                                   return _arrFactors.ToArray();                            }                     } #endregion #region Try to factorize using Primes Array                     for (int k = 0; k < Primes.Length; k++)                     {                            int m = Primes[k];                            if (_num < m) break;                            while (_num % m == 0)                            {                                   _arrFactors.Add(m);                                   _num = (Int64)_num / m;                            }                     }                     if (_num < _startNum)                     {                            _arrFactors.Sort();                            return _arrFactors.ToArray();                     } #endregion #region Main Factorization Algorithm                     Int64 _upMargin = (Int64)Math.Sqrt(_num) + 1;                     Int64 i = _startNum;                     while (i <= _upMargin)                     {                            if (_num % i == 0)                            {                                   _arrFactors.Add(i);                                   _num = _num / i;                                   _upMargin = (Int64)Math.Sqrt(_num) + 1;                                   i = _startNum;                            }                            else { i = i + 2; }                     }                     _arrFactors.Add(_num);                     _arrFactors.Sort();                     return _arrFactors.ToArray(); #endregion              } #endregion        } } Точки обзора Тест на проверку простоты 18-ти значного числа (999999999999999989), т.е. процедура, которая определяет, являются ли целые числа простыми, это лучший способ проверки факторинга программного обеспечения. Если вычисления занимают слишком много времени (например, когда используется мобильная платформа с низким уровнем обработки большого количества численных данных), возьмите меньшее число, но тоже 18-ти значное: 324632623645234523. Чтобы получить не такую тривиальную запись, как i = i + 2, или i + = 2, необходимо исходный код увеличить в два раза. i ++; i ++; Даный фрагмент кода был использован для сравнения производительности трех методов возрастания целых чисел:  using System; using System.Diagnostics; namespace IncrementEfficiencyTest {        class Program        {              private const Int64 _max = 1000000000; // 1 billion              private const int _cycles = 5;              static void Main(string[] args)              {                     Stopwatch sw = new Stopwatch();                     Console.Write("{0} on {1}", "i++;i++:", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max) { i++; i++; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.Write("{0} on {1}", "i=i+2", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max) { i = i + 2; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.Write("{0} on {1}", "i+=2", String.Concat(_cycles, " cycles with ", _max, " max: "));                     sw.Restart();                     for (int count = 0; count < _cycles; count++)                     {                            Int64 i = 0;                            while (i < _max)  { i += 2; }                     }                     sw.Stop();                     Console.WriteLine("{0} elapsed.", sw.Elapsed);                     Console.ReadKey();              }        } Чтобы минимизировать потенциальные побочные эффекты теста, следует работать в нескольких циклах (5 циклов) с последующей апроксимацией нескольких результатов тестирования и не нужно реализовывать вызовы функций , потому что оценка синхронизации может искажаться. Основываясь на статистических данных, самый быстрый способ увеличения числа Int64 в 2 раза можно достичь через составленное уравнение: i = i + 2 (5,589 сек для всей процедуры тестирования), вместе с i + = 2 (5,625 сек) и удвоением и ++; i ++;  "leading from behind" с оценкой производительности в 11,907 сек. Соответствующая поправка была сделана в факторизации первичных чисел (теперь выводится i = i + 2). Параллельный алгоритм для факторинг-теста При использовании параллельных алгоритмов факторизации можно значительно увеличить производительность теста. Параллельне алгоритмы факторизации region GetFirstFactorParallel(Int64 Num) algorithm internal static Int64 GetFirstFactorParallel(Int64 Num) {        // use concurrent stack to store non-trivial factor if found        ConcurrentStack _stack = new ConcurrentStack();        // object to specify degrees of parallelism        ParallelOptions _po = new ParallelOptions();        try        {              // return value initially set to 1              Int64 _ret = 1;              // step 1: try to factor on base 2, return if OK              if (Num % 2 == 0) return 2;              // step 2: try to factor on base 3, return if OK              if (Num % 3 == 0) return 3; #region parallel algo to find first non - trivial factor if exists              // set upper limit              Int64 _upMargin = (Int64)Math.Sqrt(Num) + 1;              // number of CPU cores              int _countCPU = System.Environment.ProcessorCount;              // max degree of parallelism set equal to _cpuCount              _po.MaxDegreeOfParallelism = _countCPU;              Parallel.For(0, 2, _po, (i, _plState) = >              {                     // starting number for inner loops (5 and 7)                     int _seed = 5 + 2 * i;                     // inner loops running in parallel;                     // notice that because input Num was already tested for factors 2 and 3,                     // then increment of 6 is used to speed up the processing,                     // thus in dual core CPU it looks like:                     // 5, 11, 17, 23, 29, etc. in first thread                     // 7, 13, 19, 25, 31, etc, in second thread                     for (Int64 j = _seed; j < _upMargin; j += 6)                     {                            // exit loop if stack contains value                            if (_stack.Count != 0) { break; }                            // check divisibility                            if (Num % j == 0)                            {                                   // push non-trivial factor to ConcurrentStack and exit loop                                   if (_stack.Count == 0) { _stack.Push(j); }                                   break;                            }                     }              }); #endregion              // return the value in ConcurrentStack if exists, or 1              return (_stack.TryPop(out _ret)) ? _ret : 1;        }        catch { throw; }        finally { _po = null; _stack = null; } } #endregion Источник: http://www.codeproject.com/Tips/155308/Fast-Prime-Factoring-Algorithm

Введение 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!

Введение Приходилось ли Вам, работая в интернет-агенстве или веб-студии, сталкиваться с ситуациями, когда у Вас возникали разногласия с S’ales-менеджерами (менеджерами по продажам услуг компании)? Лично у меня они возникают чуть ли не ежедневно. Вроде бы и цели у нас общие – выстраивать мощный бизнес и зарабатывать хорошие деньги. Но технари и менеджеры по продажам , оказывается, настолько разные по своему мышлению, и идем мы к этим глобальным целям разными дорогами. В данной статье я хочу  разобрать психотип технического специалиста и продажника. Исходя из этого мы сможем понять: Почему возникают спорные ситуации между отделом продаж и отделами по производству; Какие стандартные “косяки” допускают менеджеры по продажам, которые в дальнейшем существенно вредят производственникам; Как попытаться избавиться от этих ошибок раз и навсегда. Основные особенности психотипа технаря Техническими специалистами в такой структуре, как веб-студия, являются SEO-специалисты, PPC-специалисты, программисты, маркетологи, аккаунт-менеджеры, менеджеры проектов, руководители отделов и другие позиции, которые в этом перечне я случайно мог пропустить. Основная цель технаря – максимально качественно закрывать вопросы разработки стратегии и реализации работ для достижения максимального результата, будь то контекстная реклама, поисковое продвижение или разработка сайтов. Мышление и построение работы данных категорий сотрудников построено преимущественно на: Систематичности; Педантичности; Четкой последовательности действий, которые формируются на составлении четких дедлайнов (сроков) по каждой задаче и процессу; Тайм-менеджменте (детальном планировании всего рабочего времени); Отсутствии какого-либо хаоса и утверждение всех нюансов с заказчиком. По моему мнению, это идеальная схема построения рабочего процесса технического специалиста, который сможет четко и слаженно, как часовой механизм, решать свои задачи в рамках той компании, в которой работаю сейчас я. С большой вероятностью, у других компаний и фирм данный секрет успеха отличается от того, что приведен выше. Рассмотрим теперь особенность настроев S’ales-менеджеров. Настрои сейлзов Как бы гениально это не прозвучало, но основная задача продажника – много продавать. Продавец должен быть стрессоустойчивым, уметь подать продукты компании в такой упаковке, чтобы покупатель, не раздумывая, хотел стать клиентом компании. Исходя из этого, менеджеры по продажам пользуются следующими векторами в своей работе: Нагенерировать как можно больше лидов (людей, которые проявили хотя бы минимальный интерес к продукту) путем обработки, например, входящих обращений или холодных звонков; Постоянно контактировать с лидами до момента, пока клиент все-таки не подпишет договор и не заплатит деньги; Назначить как можно больше встреч, где убедить клиента в целесообразности и необходимости услуг проще, чем по телефону; Выполнить план продаж путем заключения как можно большего количества договоров. Такие настроения оправданы, потому что зачастую мотивация S’ales-менеджера состоит из небольшой ставки + хорошего процента от суммы бюджетов подписанных договоров. Поэтому основной кусок пирога заложен именно в этой процентной части. А теперь про типичные «косяки» продажников Настоящий менеджер по продажам – это охотник за процентами. На этом я уже поставил акцент в предыдущем пункте. Когда я наблюдаю за своими коллегами-сейлзами, порой у меня возникает ощущение, что они готовы на все ради продажи. Извините, я без критики и осуждения. Просто такое рвение доставляет нам неприятности и проблемы следующего характера: Продажа ради продажи. Иногда к нам на стол попадает такой проект, с которым ты просто не знаешь, что делать, либо который со старта обречен на провал. Проходит месяц-два, и клиент отказывается от услуги, потому что, к примеру, SEO на первых порах не тот тип рекламы, который нужен проекту. Несогласованный или весьма заниженный бюджет на проект. Бывают такие ситуации, что ко мне подходят и говорят что-то типа: “Клиент очень «горячий». Можем подписать прямо сейчас, если ты дашь добро. У него бюджет 3500 грн., из которых на ссылки 1000 грн.”. И это при среднем чеке компании, например, в 6000 грн. и очень конкурентной тематике проекта типа котлов или окон. Увы, с таким бюджетом нет смысла заходить на рынок. Да и коммерческий интерес компании-исполнителя невелик. Не доходит  ключевая информация. Для лучшего понимания проблематики смоделирую ситуацию. Например, у нового клиента компании есть два сайта A и B одной тематики. Сайт A клиент хочет продвигать, а сайт B – старый, который он трогать не хочет. Сайт B имеет уже какую-то видимость и позиции, но является аффилиатом по отношению к A, поэтому отдел SEO предлагает клиенту склеить 301 редиректом непродвигаемый сайт с продвигаемым. Когда поступает такое предложение, клиент возмущенно говорит, что сайт B уже продвигался ранее другой компанией и попал под текстовый фильтр Panda, и основная идея появления нового сайта A и его дальнейшей раскрутки связана именно с этим. И немаловажно то, что заказчик утверждает, что вся эта информация была донесена до менеджера, который подписывал договор. Чья недоработка и в чем она заключается, я думаю, понятно… Обещание золотых гор. Ради подписанного договора сейлз на эмоциях может пообещать клиенту четкие сроки и даже гарантии на вывод в ТОП. Это большая ошибка, которую потом придется разгребать аккаунт-менеджерам. Клиента нужно обязательно ориентировать на какие-то примерные сроки, но давать 100% гарантии на вывод в ТОП никак нельзя. Гарантировать можно только максимально внимательный и профессиональный подход и перечень работ, прописанных  в договоре. Включение в общий бюджет дополнительных доработок. Иногда те лиды, которые являются «горячими» или «теплыми» манипулируют до безумия заинтересованным в продаже менеджером. Это может заключаться в том, что заказчик обещает долгосрочное сотрудничество по SEO-оптимизации или продвижению, если в общий бюджет будут включены некоторые доработки по сайту. И очень часто заказчики почему-то считают, что все они весьма простые типа CTRL+C и CTRL+V и все готово. То ли от незнания специфики правок, то ли от желания докрутить клиента до продажи как можно быстрее, менеджеры часто обещают: ”Все просто. Все будет. Все сделаем!” И в 80% случаев эти доработки оказываются такого масштаба, что в рамках лояльности их не сделаешь и нужно оценивать отдельными сроками и бюджетами. На эти грабли менеджеры наступают регулярно и до тех пор, пока их не заставляют самостоятельно выруливать такие ситуации. Такое нужно мгновенно искоренять! Это далеко не весь список казусов, которые происходят с менеджерам по продажам. Это золотая классика, которая, я уверен, повторяется у многих компаний и фирм данного сегмента бизнеса. Как искоренить весь этот бардак? Это намного проще, чем может показаться на первый взгляд. Для этого всего лишь нужно:  Ввести обязательную систему брифования со стандартным списком вопросов, которые еще на этапе переговоров помогут получить важную информацию для составления более-менее прозрачой картины о проекте будь-то SEO, контекст или веб; Внедрить многоуровневое утверждение проектов через руководителей отдела продаж,  отдела по производстенной части и аккаунтинга. Пока каждый руководитель детально не изучит условия договора и особенности заказа, ничего подписано быть не должно! Использовать систему передачи проекта в письменном виде руководителям отделов со стоимостями по проектам. (Как, сколько, за что клиент заплатил и что должен в итоге получить); Проведение периодических ликбезов и занятий, на которых менеджеры по продажам могут задавать вопросы техническим специалистам, тем самым повышать свой уровень до уверенной компетенции в продукции. Ну, и как резюме… Подытожить данный материал, над которым я работал не один вечер, хочется следующим обращением: Уважаемые менеджеры по продажам. Мы Вас очень ценим и уважаем. Вы - локомотив нашего бизнеса и от Вас зависит многое. Но, пожалуйста, согласовывайте с нами каждый нюанс и мелочи и прислушивайтесь к производственникам Вашей компании. Давайте жить дружно ;)