Поетапна інструкція по правильній розробці інтернет-магазину

1. Етап 1. Аналіз запиту від замовника
2. Етап 2. Розробка технічного завдання
3. Етап 2.5 Розробка структурних макетів сторінок
4. Етап 3. Створення дизайн-макетів сторінок ресурсу
5. Етап 4. Верстка сторінок ресурсу
6. Етап 5. Розробка програмної частини
7. Етап 6. Тестування веб-сайту
8. Етап 7. Розміщення веб-сайту на сервері
9. В результаті…

Етап 1. Аналіз запиту від замовника

Отже, замовник задоволений умовами співпраці, наданими нами в попередньому комерційній пропозиції, ми починаємо роботу. Перше, що опрацьовується аналітиками студії - загальна архітектура і функціонал, які повинні бути реалізовані в подальшому магазині.

Ми оцінюємо необхідний функціонал - які функції будуть корисними в інтернет-магазині шин? Почнемо з базового функціоналу клієнтської частини магазину:

• Каталог продукції з розбивкою на категорії
• Можливість оформити покупку через магазин
• Інформація про умови купівлі, доставки, оплати продукції
• Допоміжна інформація по темі (не забуваємо про подальше просування ресурсу)
• Історія покупок для зареєстрованих користувачів

Далі, обговорюємо додаткові функції, які можуть бути корисними з урахуванням тематики: 2

• Можливість занесення товарів в закладки, з метою додаткового ознайомлення надалі. При цьому важливо, щоб закладки працювали легко і будь-який користувач зрозумів, як з ними поводитися. В результаті вирішуємо - повинні працювати як для зареєстрованих, так і незареєстрованих користувачів
• Швидка покупка - без реєстрації, просто вказавши номер телефону - для тих, хто не особливо знайомий з інтернетом і хоче надалі обговорити всі умови з менеджером магазину
• Реєстрація та авторизація через соц. мережі.
• Підказки в вигляді подібних товарів, засновані на поведінку відвідувачів магазину.

Погоджуємо даний функціонал з замовником, після чого приступаємо до обговорення панелі адміністрування. Необхідно передбачити:

• Можливість з легкістю управляти замовленнями;
• Просту роботу з каталогом;
• Можливість проведення акцій на сайті;
• Систему ведення статистики по продажах;
• Можливість створювати «набори» позицій - ручна прив'язка товарів один до одного в панелі адміністрування.

Визначивши основну концепцію магазину, малюємо приблизну структуру сайту:

Окремо визначаємо структуру каталогу:

Етап 2. Розробка технічного завдання

Визначивши весь функціонал ресурсу, ми приступаємо до робіт з розробки технічного завдання на розробку інтернет-магазину. В даному документі детально прописується кожна з функцій і сторінок ресурсу. Грамотно створене технічне завдання дозволяє уникнути безлічі проблем і економить багато часу і нервів як замовнику, так і фахівцям, що працюють над проектом. Фактично, тех. Завдання - документ, який регламентує все подальшу взаємодію між клієнтом і розробниками, зокрема - визначає критерії, за якими робота вважається зданим, організовує взаємодію співробітників всередині студії в рамках роботи над проектом.

Етап 2.5 Розробка структурних макетів сторінок

Одночасно з розробкою технічного завдання створюються структурні макети всіх сторінок ресурсу, які в подальшому будуть перетворені дизайнером в безпосереднє відображення сторінок. Даний етап є дуже важливим з точки зору зручності користування ресурсом - обговорюється, продумується розміщення кожної з кнопок, формат повідомлень, реакцій на ресурси і т.д.

Етап 3. Створення дизайн-макетів сторінок ресурсу

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

Етап 4. Верстка сторінок ресурсу

Наступним кроком є ​​перетворення всіх створених макетів з графічного формат в HTML-код. На даному етапі враховуються умови подальшого просування веб-ресурсу - на сторінках необхідно коректно розмістити заголовки, текст, посилання. Так, назва категорій товарів на сторінці з переліком товарів даної категорії, варто зробити заголовком.

Етап 5. Розробка програмної частини

Далі, поточний результат розробки, а саме - зверстані макети, передаються команді програмістів, які, використовуючи розроблені раніше модулі, а так само створюючи нові, формують продукт, готовий до тестування. У магазині було використано кілька цікавих рішень, наприклад, для поліпшення позицій ресурсу в пошукових системах, SEO-текст подгружается на початку сторінки, після чого переміщається на потрібну позицію за допомогою javascript. Так само реалізований зручний модуль поновлення кошика - зробити покупку можна в три кліка - досить просто вказати свій номер телефону.

Етап 6. Тестування веб-сайту

Наступний, дуже важливий етап - тестування реалізованого функціоналу веб-сайту. Коректне тестування дозволяє уникнути значних проблем з роботою веб-сайту в подальшому. Більш детально дізнатися про тестування веб-сайтів ви можете в нашій статті «Процес тестування веб-сайту».

Етап 7. Розміщення веб-сайту на сервері

Отримавши відмашку від команди тестування, програмісти можуть приступати до розміщення готового веб-сайту на сервері, на якому він і почне своє функціонування в мережі. Проводиться остаточна налагодження ресурсу, а так само повторне тестування, за допомогою якого усуваються залишкові помилки, які могли бути допущені при перенесенні інтернет магазину.

В результаті…

Таким чином, завдяки дотримання коректному порядку створення веб-сайту, в кінцевому підсумку замовник отримує якісний проект, який впевнено працює і виконує покладені на нього завдання, а ми - ще один цікавий проект в нашому портфоліо. Саме завдяки дотриманню правильної методології розробки, ми можемо зі свого боку гарантувати обвинувачений заздалегідь результат роботи проекту, а так само трошки більше. До речі, на останніх етапах роботи над даним проектом, ми з замовником вирішили, що корисним наступним кроком буде створення розширення для браузера, який повідомить адміністратора про нові запитах, але про це ми напишемо вже в наступній статті.