Verkkokaupan teeman toteutus ReactJS:llä

Abstract

Insinöörityön tarkoituksena oli tutkia verkkokauppateeman toteutusta käyttäen React- Javascript-kirjastoa ja sen sovittamista Django-pohjaiseen verkkokauppa-alustaan. Tutkimustyötä käytettiin hyväksi uuden Shuup-sovelluksen luomisessa, jossa Reactilla rakennettu teema toimisi lisäosan tavoin. Tutkinnassa perehdyttiin ensimmäisenä kehitysympäristön pystyttämiseen ja käytettyjen teknologioiden asettamiin vaatimuksiin ympäristön suhteen. Seuraavaksi perehdyttiin Reactin ja Djangon tyypillisimpiin ominaisuuksiin, minkä jälkeen pyrittiin käyttämään molemmista teknologioista niiden parhaita ominaisuuksia erilaisissa tilanteissa. Työn edetessä selvisi, että kaikki Reactin kirjastot eivät toimineet toivotulla tavalla Djangon kanssa ja ratkaisuja jouduttiin soveltamaan. Tarkoituksena oli syventyä vielä käytettyyn verkkokauppa-alustaan, mutta ongelmien takia siihen pisteeseen ei vielä tässä projektissa ehditty. Tyylejä tulevaan teemaan luotiin suuntaa-antaviksi. Insinöörityön lopputuloksena todettiin projektin olevan haasteellinen ja liian laaja saatettavaksi loppuun asti alkuperäisessä aikataulussa. Vielä tulee tutkia, miten Shuupin alkuperäiset Jinja2-funktiot saadaan toimimaan yhdessä React-kielen kanssa. Myös tyylit tulee suunnitella ja viimeistellä loppuun. Työtä tehdessä todettiin, että Reactin liittäminen tulevaisuuden Shuup-projekteihin olisi järkevää, sillä se saattaisi nopeuttaa verkkokaupan selaamista huomattavasti ja näin parantaa käyttäjien käyttökokemusta. Todettiin, että teeman pohjan tulisi olla yksinkertainen ja laadukas, jotta sen jatkokehitysmahdollisuudet säilyisivät mahdollisimman hyvin.

The goal of this project was to study and research how to develop a theme for a Django based e-commerce platform by using React. This study was used to create a Shuup application in which the React theme would work as an expansion. The first task was to setup a development environment fulfilling the requirements that used technologies set for it. The next step was to take a look at the basic features of React and Django. The aim was to try to use each one of the best features in different situa- tions. According to this study, some of the React libraries did not work as they were suppo- sed to while using Django within a same project. The final step was to concentrate on the used e-commerce platform, but unfortunately that point has not been reached yet, because of several problems. Styles were created to give direction to the final design. To conclude, the project turned out to be challenging and too large to finish within the original schedule. Yet some more research needs to be done, such as how the Shuups original Jinja2 functions work with React. Also, the design needs to be plan- ned and finalized. The end results also indicate that implementing React into a future projects would be a smart thing to do, because it would shorten the loading times and therefore, improve user experience. It was discovered than the base for the the- me should be simple and of good quality to enable future development.