Рассказываем и показываем картинками, как без единой строчки кода и знаний языков программирования своими руками и бесплатно сделать мобильное приложение.
Шаг 1. Делаем набросок приложения и выстраиваем путь пользователя
Представьте – вы строите дом. Вы никогда этого не делали, но научиться можете, просто надо начать с азов. И первый шаг – рисунок дома на листочке.
Создание мобильного приложения тоже начинается с наброска.
- Нарисуйте то, как вы видите приложение. Самую первую страницу. Рисуйте как получится – схематично, не думая о красоте. Набросайте шапку-хэдер, меню и рубрики, напишите название, нарисуйте логотип, расположите кнопки регистрации и входа в приложение.
- Подумайте, какие элементы и функции хотите сделать. Пока минимум. Подумайте над поведением пользователя. Просто представьте себя на месте пользователя. Какие ваши первые действия? Куда кликнете сначала? А куда потом? Что хотите видеть на первой странице? Нужен ли личный кабинет?
- Зафиксируйте то, что придумали на этом этапе. Нарисуйте экраны и стрелками между экранами проложите путь пользователя. На экранах схематично расположите места, где будет текст, фотографии, иллюстрации, кнопки. Это будущие элементы приложения.
Надо на этом не увлекаться и не придумывать много функций. Делайте проще, выделяйте только основные роли, придумывайте минимальный набор функций. Допустим, в приложении будут администратор и пользователь. Вот и придумайте, что каждому из них нужно в приложении. Всем пользователям, например, точно нужен главный экран с регистрацией и выходом в личный кабинет.
Шаг 2. Создаём базу данных приложения
Дом обрёл узнаваемые черты на наброске. Теперь надо добавить дому коммуникации – чтобы он функционировал.
В случае с приложением – это данные и база, в которой они хранятся. Без данных приложения не будет – оно не заработает. Как дом без коммуникаций — просто стены.
С ноукодом базу данных приложения делают и наполняют внутри платформы, на которой пишется приложение. Это таблицы со столбцами и строками, похоже на Excel. Чтобы сделать базу данных, сначала поймите, какие пользователи в нём соберутся и какие данные на них нужны.
Например, вы делаете приложение для записи в салон красоты. Здесь клиенты записываются к мастерам на услуги, а мастера – видят запросы и составляют себе расписание.
В таком приложении два типа пользователей – мастер и клиент. Это называется роли. Самих пользователей может быть много: допустим, 10 мастеров и сколько угодно клиентов, а роли две: клиент и мастер. Клиенты будут заказывать у мастеров услуги, и они выбирают дату и время – из этого формируются заказы.
Так в приложении выделились 4 составляющие для формирования базы данных: мастер, клиент, услуга, заказ.
Составляющие, на которых строятся данные, разработчики называют сущности. Каждая сущность записывается в отдельную таблицу. У каждой сущности есть свои «черты» – атрибуты. Они в таблице записываются столбцами. А данные сущностей и атрибуты вносятся внутрь таблицы в строки.
- У сущности №1 – мастер – атрибуты: имя и фамилия, фото-аватарка, номер телефона в салоне, опыт работы в годах, перечень услуг.
- У сущности №2 – клиент: имя и фамилия, номер телефона, почта.
- У сущности №3 – услуга: название, описание, цена.
- У сущности №4 – заказ: дата и время, услуга (или услуги), стоимость, мастер, клиент.
Внутри базы данных возникнут связи. Сущности, выделенные для приложения, будут встречаться внутри приложения, пересекаться и иногда менять друг друга. База данных, в которых одна таблица определённым образом связана с другой, в разработке называются реляционными базами данных.
Шаг 3. Собираем приложение
Несём на место строительства будущего дома стройматериалы и делаем из них фундамент и каркасы стен, полов, крыши, этажей.
C нарисованным эскизом приложения отправляйтесь за компьютер. Пора перенести туда видение приложения – нарисовать на компьютере макет мобильного приложения. На сленге разработки макет называется вайрфрейм.
Вайрфрейм помогает точно увидеть и объяснить, как будет выглядеть и работать мобильное приложение. Вайрфрейм помогает понять, как придуманные роли взаимодействуют с приложением и как реализуются функции на экранах.
Но этот этап можно миновать — в таком случае можно сразу переходить к сборке приложения на одной из программ для разработки мобильного приложения без кода.
В любой такой программе вам откроется рабочая область — интерфейс с элементами и панели настройки. Сборка самого приложения будет происходить на экране будущего мобильно приложения.
С панели с элементами перетаскивайте и устанавливайте на экранах. Чтобы эти элементы заработали, к ним в некоторых случаях нужно подтянуть данные из баз: например, чтобы на экране с каталогом услуг или товаров выводились данные об этих услугах или товаров.
Следующий этап — «навешать» на элементы события. Например, чтобы по нажатию на кнопку начиналось оформление заказа. Или при клике на логотип — возврат на главную страницу. Это — логика приложения, то, что заставляет его оживать и работать.
4 Шаг. Наводим красоту и выпускаем в сторы
Наполняем дом мебелью и устраиваем новоселье.
Последним этапом в создании приложения идёт работа над дизайном и проверка работоспособности в процессе тестирования.
В ноукоде кастомизация дизайна ограничена. Это означает, что вы не совершите ошибки с выравниванием элементов, их размерами и отступами. Но ещё это означает, что ограничено количество доступных шрифтов, цветов, иконок. И всё же навести порядок на каждом экране необходимо.
Тестирование в ноукоде — это просто запуск приложения. Вы запускаете его, проверяете сами, проходите весь путь пользователя, пробуете разные сценарии. Ещё неплохо показать его знакомым, семье, друзьям — и проделать всё то же самое с ними. Ну, и протестировать приложение должен и заказчик — если он есть.
После этого можно начинать дистрибуцию — выпускать приложение в сторы, если оно подлежит публикации.
Вот тут у нас есть подборка пяти ноукод-программ для создания мобильных приложений.
Здесь есть более подробная инструкция по разработке мобильного приложения.
Если вам хочется научиться создавать мобильные приложения, но опыта в программировании нет - записывайтесь на наш курс разработки мобильного приложения без кода! Вы освоите сразу две ноукод-программы для создания мобильных приложений и соберёте 5 проектов рабочих приложений.