­čŤĺ Jan Mager 2B1T - Projekt Innowacji Zawodowych 2017/18
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commitÔÇŽ
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
readme-images
src
README.md

README.md

Dokumentacja techniczna

Stajnia vs. ┼ü─ůcznik vs. Automaty
Projekt innowacji zawodowych 2017/2018
Jan Mager 2B1T
www.zslmultitool.pl/shop

Spis tre┼Ťci

1. Pocz─ůtek
2. Założenia i cel projektu
3. Okre┼Ťlenie wymaga┼ä
4. Projektowanie
5. Implementacja
6. U┼╝yte technologie
7. U┼╝yte aplikacje
8. Instrukcja obsługi
9. Zaplecze administracyjne
10. Plany rozwoju
11. Literatura
12. Za┼é─ůczniki

Założenia i cel projektu

Stajnia vs. ┼ü─ůcznik vs. Automaty - g┼é├│wnym celem przed wykonaniem tego serwisu by┼éo zebranie w jednym miejscu wszystkich niezb─Ödnych informacji na temat sprzeda┼╝y przedmiot├│w spo┼╝ywczych na terenie Zespo┼éu Szk├│┼é ┼ü─ůczno┼Ťci w Poznaniu. Tworz─ůc ten projekt wiod─ůcym za┼éo┼╝eniem by┼éa przede wszystkim szybko┼Ť─ç dzia┼éania oraz czytelno┼Ťc i intuicyjno┼Ť─ç ob┼éugi strony, aby ka┼╝da osoba u┼╝ywaj─ůca aplikacji, bez znaczenia czy to na telefonie, tablecie czy komputerze, mog┼éa w bezproblemowy spos├│b znale┼║─ç szukany produkt lub por├│wna─ç go z innym.

Okre┼Ťlenie wymaga┼ä

-> Responsywno┼Ť─ç serwisu - poprawne, czytelne i pe┼éne pod wzgl─Ödem funkcjonalno┼Ťci dzia┼éanie strony na wszystkim mo┼╝liwych urz─ůdzeniach odczytuj─ůcych (telefon, tablet, laptop, pc, telewizor) oraz wszystkich przegl─ůdarkach internetowych (Google Chrome, Mozilla, Opera, IE, Safari oraz pozosta┼ée mobilne)

-> Szybko┼Ť─ç dzia┼éania - zapewnienie jak najkr├│tszego czasu oczekiwania na wyniki zapyta┼ä czy te┼╝ za┼éadowanie strony

-> Czytelno┼Ť─ç, intuicyjno┼Ť─ç obs┼éugi - stworzenie serwisu jak najbardziej czytelnego i intuicyjnego jak tylko to b─Ödzie mo┼╝liwe, aby ka┼╝da osoba, bez wzgl─Ödu na wiek wchodz─ůc na stron─Ö nie mia┼éa problem├│w oraz w─ůtplilowo┼Ťci podczas u┼╝ywania apliakcji

-> Administracja baz─ů danych produkt├│w, panel administracyjny - zaimplementowanie panelu administracyjnego w celu mo┼╝liwo┼Ťci edycji bazy danych z ka┼╝dego miejsca, przy u┼╝yciu tylko przegl─ůdarki internetowej oraz dost─Öpu do internetu

-> Udzia┼é u┼╝ytkownika - mo┼╝liwo┼Ť─ç zg┼éaszania b┼é─Öd├│w strony, aktualizacji cen, dodawania czy te┼╝ usuwania produkt├│w

-> Minimalizm - stworzenie idealistycznej strony opartej o najnowsze trendy designerskie

Projektowanie

1. Stworzenie projektu graficznego/wizualizacji w aplikacji Adobe Photoshop

Projektowanie-1

2. Stworzenie wizualizacji projektu

Projektowanie-2

3. Stworzenie struktury folder├│w i plik├│w

Projektowanie-3

Implementacja

1. Stworzenie w pliku ze stylami stałych zmiennych

Projektowanie-4

2. Podpi─Öcie u┼╝ywanych framework├│w

Projektowanie-5

3. Bie┼╝─ůce pisanie strony oraz naprawa b┼é─Öd├│w

Projektowanie-6

4. Dostosowywanie serwisu pod urz─ůdzenia mobilne

Projektowanie-7

5. Dodanie do aplikacji Favicon

Favicon

U┼╝yte technologie

  • HTML5 - strona merytoryczna
  • CSS3 - strona wizualna
  • CSS Variables - czytelno┼Ť─ç kodu
  • JavaScript - animacje oraz elementy interaktywne
  • jQuery - optymalizacja kody JS
  • JavaScript AJAX - ob┼éuga aplikacji bez konieczno┼Ťci od┼Ťwie┼╝ania witryny
  • PHP - ┼é─ůczenie z baz─ů danych oraz dzia┼éanie na rekordach
  • Github - repozytorium
  • MySQL - baza danych produkt├│w

U┼╝yte aplikacje

  • Adobe Photoshop - wykonanie projektu aplikacji oraz potrzebnych element├│w graficznych
  • Atom.io - edycja kodu
  • XAMPP - localhost na systemie Windows
  • MAMP - localhost na systemie MacOS
  • Git Bash - przesy┼éanie plik├│w do repozytorium na systemie Windows
  • Terminal - przesy┼éanie plik├│w do repozytorium na systemie MacOS
  • FileZilla - przesy┼éanie plik├│w na hosting
  • Google Analytics - analizowanie ruchu na stronie

    Google Analytics

Instrukcja obsługi

Stajnia vs. ┼ü─ůcznik vs. Automaty - aplikacja, dzi─Öki kt├│rej mo┼╝emy wyszuka─ç wszystkiego produkty spo┼╝ywcze dost─Öpne na terenie Zespo┼éu Szk├│┼é ┼ü─ůczno┼Ťci w Poznaniu. Od przek─ůsek i s┼éodkich napoj├│w znajduj─ůcych si─Ö w automatach a┼╝ po bardziej wykwintne produktu mo┼╝liwe do zakupienia w bufetach takie jak bu┼éki czy te┼╝ dania obiadowe.

U┼╝ytkownik ma mo┼╝liwo┼Ť─ç przegl─ůdania listy produkt├│w, wyszczeg├│lniaj─ůc je na znajduj─ůce si─Ö w stajni, ┼é─ůczniku, automacie oraz pokazanie wszystkich.

Po wej┼Ťciu na g┼é├│wn─ů stron─Ö u┼╝ytkonik ma mo┼╝liwo┼Ť─ç wybrania jednej z czterech opcji:

  • wyszukiwarka produkt├│w

    Wyszukiwarka produkt├│w

  • losowy produkt

    Losowy produkt

  • wszyskie produkty

    Wszystkie produkty

  • zg┼éo┼Ť zmian─Ö

    Zg┼éo┼Ť zmian─Ö

Kiedy nie może się zdecydować jaki produkt zakupić, specjalnie dla niego została przygotowana opcja 'losowy produkt'.

Kiedy znam nazw─Ö produktu lub jej cz─Ö┼Ť─ç skorzystaj z wyszukiwarki.

Kiedy chcesz przejrze─ç ca┼é─ů baz─Ö danych sprawd┼║ 'wszystkie produkty'.

Zaplecze administracyjne

Po zalogowaniu do panelu administracyjnego (login: admin, hasło: admin) masz dostępne 4 opcje.

Panel admina

  1. Pierwsz─ů z nich jest przegl─ůdanie zg┼éoszony b┼é─Ödnych cen, proponowanych nowych produkt├│w oraz nieaktualnych produkt├│w. Mo┼╝esz z tego miejsca zaakakcpetowa─ç zmian─Ö lub odrzuci─ç i usun─ů─ç propozycj─Ö.

    Lista zgłoszeń

  2. Druga opcja jest to dodanie nowego produktu do bazy danych, bez konieczno┼Ťci r─Öcznej edycji kody MySQL. Prosty oraz intuicyjny formularz wymaga podania nazwy produktu, ceny oraz miejsca, w kt├│rym mo┼╝emy go kupi─ç.

    Dodaj nowy produkt

  3. Trzecie opcja jest to edycja wpisanych ju┼╝ produkt├│w do bazy danych. Podobnie jak w fukncji wy┼╝ej, mamy mo┼╝liwo┼Ť─ç edycji nazwy, ceny i miejsca bez konieczno┼Ťci logowania si─Ö do phpmyadmin. Mo┼╝emy r├│wnie┼╝ z tego poziomu permamentnie usuwa─ç produkty z bazy danych.

    Edycja produktu

  4. Czwarta opcja s─ů to statystyki bazy danych, wy┼Ťwietlana jest obecna liczba wszystkich produkt├│w znajduj─ůcych si─Ö w bazie danych, najdro┼╝szy produkt oraz najta┼äszy.

    Statystyki bazy danych

Plany rozwoju

  • Przekodowanie strony na aplikacj─Ö mobiln─ů
  • Rozszerzenie bazy danych produkt├│w
  • Napisanie skryptu wysy┼éaj─ůcego powiadomienia na ┼╝ywo w przegl─ůdarce

Literatura

Za┼é─ůczniki

Folder wy┼╝ej (src)