Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

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

Процесс создания простого бота Телеграм для отслеживания времени

Процесс создания простого бота Телеграм для отслеживания времени

Процесс создания простого бота Телеграм для отслеживания времени

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

Сколько стоит создать приложение для криптокошелька

Сколько стоит создать приложение для криптокошелька

IoT: what is it and how to develop an application for the Internet of Things?

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

Компонент Messenger

Компонент Messenger

Компонент Messenger (Symfony)

Еще в марте 2018 года разработчиков порадовали новостью о том, что теперь семейство symfony-компонентов пополнилось полезным инструментом Messenger.

Базовое понимание Oauth 2.0

Базовое понимание Oauth 2.0

Базовое понимание Oauth 2.0

Сегодня, в мире социальных медиа, каждый из нас использует десятки приложений и вебсайтов ежедневно. Oauth 2.0 призван упростить процесс авторизации и, как следствие, сделать жизнь пользователей проще и безопаснее. Возникает вопрос — каким образом?

API для мобильных приложений простыми словами

API для мобильных приложений простыми словами

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

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

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

С технарями (подрядчиками) все понятно: они работают с технологиями и постоянно используют термины, так как это значительно ускоряет общение в команде. Для бизнесмена ( клиента) все эти «жужжащие слова» вызывают лишь дополнительные вопросы, причем следующего типа: «Зачем это нужно? Почему это стоит так дорого? Можем ли мы обойтись без этого?

Команда Stfalcon имеет большой опыт в разработке мобильных приложений, и мы часто сталкиваемся с вопросами, которые можно квалифицировать как «типичные». Один из них - «Зачем нам нужен API для мобильного приложения?»

.

Чтобы облегчить понимание этого вопроса, давайте узнаем, что такое API (Application Programming Interface) объясним простыми словами. Мы’узнаем, какие функциональные задачи он выполняет и почему мобильное приложение не может обойтись без него.

Интерфейс

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

Ответ на вопрос: Какие функциональные задачи выполняет автомобиль?

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

Подробнее

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

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

.

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

<фигура>

Интерфейсы довольно часто встречаются в нашей жизни:

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

Приняв во внимание приведенные выше примеры, давайте попробуем найти определение этого понятия.

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

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

API и RESTful API

Разобравшись с основной составляющей термина, продолжим расшифровку двух оставшихся слов — Application Programming. Само название намекает на то, что термин относится к сфере программного обеспечения. Если сравнить его с автомобилем, то можно прийти к выводу, что API обозначает 2 системы и правила. Системами, в данном случае, являются модули программирования, веб-сервисы и так далее.

На самом деле, мы могли бы закончить с API на этом пункте, но не упомянуть RESTfull API будет неправильно. Дело в том, что API описывает явление. RESTfull API (или просто REST API), в свою очередь, является одним из подходов к реализации API при разработке мобильных приложений.

Это важно понимать, так как API часто используется в общении для краткости, но предполагается, что оно должно быть реализовано с помощью RESTfull API.

Ответ на главный вопрос

Воооружившись знаниями о том, что такое интерфейс и даже немного прикоснувшись к более узкоспециализированному термину RESTfull API, мы можем легко ответить на главный вопрос «Зачем мобильному приложению API?»

.

Начнем с «анатомии». Мобильное приложение состоит не только из визуальной части — UI - пользовательского интерфейса, но и ряда вопросов, которые необходимо решить в процессе мобильной разработки. Они таковы: где хранить информацию о пользователях, сообщения, заказы и т.д.

.

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

Задач много, но какая из них (или может быть, все они) является причиной для создания API для мобильного приложения? Ответ таков: ни одна. Все это можно реализовать без API в рамках одного смартфона.

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

Как только появляется более одного пользователя, возникает проблема совместного использования данных.

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

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

Кроме обмена данными, есть и другие проблемы: что делать, если смартфон потерян или перезагружен, и как справиться с поддержкой сотен устройств’?

Все эти проблемы решаются за счет централизации бизнес-логики и доступа к API, который разработан (если быть точнее — RESTfull API, как мы уже знаем).

<фигура>

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

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

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

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

Практически это выглядит так: вы хотите сделать заказ, например, ваше приложение для iOS или Android отправит команду на сервер с помощью API для создания заказа. Сервер выполнит запрос и сохранит всю информацию в базе данных, таким образом, информация о заказе будет доступна другим пользователям.

Надеемся, что эта статья поможет вам раз и навсегда отсеять вопрос об API на дно.

Всего наилучшего :)

Postman: быстрый старт для разработки и тестирования

Postman: быстрый старт для разработки и тестирования

Postman: быстрый старт для разработки и тестирования
.

Эта статья предназначена для ускорения и упрощения процесса освоения базовой функциональности инструмента Postman.

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

Но почему все любят платформу Postman?

— Это мощный инструмент для тестирования и разработки API, который в то же время имеет простой и интуитивно понятный интерфейс. Если вы впервые открываете эту программу и знаете разницу между POST и GET, то вы легко сможете отправить свой первый запрос. Однако есть несколько нетривиальных приемов, которые значительно облегчают жизнь.

Запросы Postman

Так что давайте’начнем (get postman app).

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

После этого мы создаем рабочее пространство.

Затем мы нажимаем плюс (2) и создаем вкладку запроса.

<фигура>

Все предельно просто, используя GET-запрос:  задаем url, добавляем параметры (можно «включать» и «выключать» параметры), нажимаем send и видим ответ в нижней половине экрана (на сервере я просто возвращаю html-страницу и представляю все входящие параметры в формате json). Переключаясь между вкладками в области ответа, мы можем найти любую информацию и даже переключаться между представлениями и форматами вывода.

<фигура>

Справа от кнопки "Отправить" находится кнопка Сохранить. При попытке сохранения, почтальон попросит вас указать/создать коллекцию. Коллекция - это группа запросов в рабочей области (отсортированная, например, по проекту). Я создал коллекцию test_collection. Мы сохраним ваш запрос в ней.

Окружение Postman

Давайте’ продолжим.

В Postman существует понятие окружения — это набор переменных, которым можно присвоить значение и использовать в процессе работы. Окружений может быть несколько (для продаж, для этапов, для разных версий — для чего угодно). Среда привязана к операционной среде: у каждой операционной среды есть своя среда postman.

Нажимаем на шестеренку в правом верхнем углу и создаем окружение.

<фигура>

Я создал среду local_test_env с 2 переменными: host и username. Для значений переменных есть 2 колонки. Единственное отличие заключается в том, что если вы поделитесь своим проектом с командой, то значение из первого столбца будет общим, а запросы, которые вы делаете на своем ПК, будут использовать второй столбец. Синхронизация учетной записи postman также происходит из первого столбца.

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

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

Давайте’отправим POST с использованием переменных. Мы должны добавить вкладку и выбрать тип POST-запроса. Мы хотим использовать переменную host из нашего окружения. Переменные записываются в двойных фигурных скобках. Если мы поставим скобки и начнем писать имя переменной, то postman предложит нам выбрать переменную из текущего окружения. Давайте’выберем. Поскольку это POST-запрос, мы переходим на вкладку body (под адресной строкой) и добавляем параметр username, значением которого будет переменная a variable. Я добавил еще несколько параметров для наглядности, сервер вернет их сумму.

<фигура>

Сервер вернул нам json-строку.

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

Несколько слов о тестах

Мы открываем консоль с помощью комбинации cmd + alt + c (ctrl + alt + c для Windows). Я сделал один запрос и вижу его логи. Кроме того, вы можете вывести что-то в консоль следующей командой:

console.log("что-то")

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

    pm.test("Код состояния 200",function(){
        pm.response.to.have.status(200);});

Это обычная анонимная функция. В данном случае мы говорим, что ответ должен иметь статус 200.

Благодаря тому, что мы получаем json-строку в ответе сервера, мы можем разобрать ее в переменную. Давайте сделаем это со следующей строкой:

    var jsonData = pm.response.json();

Тогда мы используем новую переменную:

    pm.test("контрольное число равно 9",function(){
        pm.expect(jsonData.total).to.eql(9);});

В данном примере мы ожидаем, что total в jsonData будет эквивалентен 9.

А теперь давайте попробуем сравнить полученное значение поля «name» из jsonData с переменной username, которая есть в нашем окружении.

Вы можете получить переменную из окружения следующим образом:

    pm.environment.get('username')

А теперь тест на эквивалентность:

    pm.test("check name equal variable username",function(){
        pm.expect(jsonData.name).to.eql(pm.environment.get('username'));});

В окружении можно не только читать, но и писать.

Мы пытаемся получить переменную "total" из окружения (ее там еще нет).

    var sum = pm.environment.get('total');

Поскольку мы ничего не получили из окружения, то и в «сумме» ничего не будет. Мы создадим «total» в окружении и запишем туда значение, полученное из jsonData.total.

.

    if(!sum){
        pm.environment.set('total', jsonData.total);}

А теперь давайте посмотрим, что получилось:

<фигура>

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

А теперь, когда вы немного разобрались с postman, давайте попробуем отправить запрос, или скорее несколько.

Задача: отправить определенное количество запросов, каждый раз меняя параметр.

    • Сначала мы создаем новую коллекцию циклических запросов,
    • Затем мы создаем POST-запрос,
    • После этого тела мы добавляем параметр «digit», который будет меняться в запросе (мы берем значение из окружения).
    • В закладке script предзапроса мы добавляем следующий код:

    var digits = pm.environment.get('digits');
     
    if(!digits){
        digits =["2","4","5","22","13","6"];}
     
    console.log("digits: "+ digits);
     
    var CurrentDigit = digits.shift();
     
    pm.environment.set('digit', currentDigit);
    pm.environment.set('digits', digits);

(Мы проверяем, есть ли в окружении переменная «digits», и создаем ее, если такой переменной нет. Мы выводим массив «цифр» в консоль перед запросом. Далее мы берем первый элемент из «цифр», удаляя значение из самого массива. И устанавливаем это значение в окружение для «digit» и «digits». В digits уже на один первый элемент меньше.)

На вкладке digit» в digits» вы можете установить значение.

На вкладке «Тесты» мы напишем следующее:

    var digits = pm.environment.get('digits');var digit = pm.environment.get('digit');
     
    console.log("сервер получил цифру = "+ pm.response.json().digit);
     
    if(digits && digits.length >0){
        postman.setNextRequest("запрос цикла");}else{
        postman.setNextRequest(null);
        console.log("stop");
        pm.environment.unset("digits");
        pm.environment.unset("digit");}

(Мы берем «digit» и «digits» из окружения и выводим некоторую информацию в консоль. Если «цифра» не пуста, мы задаем следующий запрос setNextRequest и передаем текущий запрос в качестве параметра. В противном случае мы говорим, что больше ничего делать не нужно, очищаем переменные окружения и выводим строку «stop» в консоль.)

После всего этого мы указываем на то, что в консоли не будет ничего сделано.

После всего этого мы открываем Runner (в левом верхнем углу), выбираем нашу новую коллекцию и наш запрос цикла, выбираем окружение и нажимаем Run loop.

<фигура>

В бегуне мы видим, что выполнено 6 запросов.

<фигура>

Затем открываем консоль и смотрим логи:

Вывод

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

Полную документацию можно найти здесь.