Cílem této bakalářské práce je porovnat vývoj webové a mobilní aplikace za pomocí moderní technologie React a React Native. Porovnání je provedeno na aplikaci pro zadávání poznámek. Dalším obsahem práce jsou grafické návrhy těchto aplikací, responzivní design a ukládání dat do databáze. Hlavní porovnání se zaobírá především odlišností vývoje těchto aplikací, strukturou kódu nebo časovou náročností celého vývoje. Pro další porovnání časové náročnosti bylo využito Capacitoru, díky kterému můžeme vytvořit mobilní aplikaci z původní webové aplikace.
Anotace v angličtině
The aim of this bachelor thesis is to compare the development of a web and mobile application using the modern technology React and React Native. The comparison is done on a note taking application. The graphical design of these applications, responsive design and data storage in the database are other topics of the thesis. The main comparison deals with the differences in the development of these applications, the structure of the code or the time consumption of the whole development. To further compare the time requirements, Capacitor was used, which allows us to create a mobile application from the original web application.
Klíčová slova
Vývoj webové aplikace, vývoj mobilní aplikace, React, React Native, Firebase, JavaScript, Capacitor, Android, iOS
Klíčová slova v angličtině
Web application development, mobile application development, React, React Native, Firebase, JavaScript, Capacitor, Android, iOS
Rozsah průvodní práce
57 s
Jazyk
CZ
Anotace
Cílem této bakalářské práce je porovnat vývoj webové a mobilní aplikace za pomocí moderní technologie React a React Native. Porovnání je provedeno na aplikaci pro zadávání poznámek. Dalším obsahem práce jsou grafické návrhy těchto aplikací, responzivní design a ukládání dat do databáze. Hlavní porovnání se zaobírá především odlišností vývoje těchto aplikací, strukturou kódu nebo časovou náročností celého vývoje. Pro další porovnání časové náročnosti bylo využito Capacitoru, díky kterému můžeme vytvořit mobilní aplikaci z původní webové aplikace.
Anotace v angličtině
The aim of this bachelor thesis is to compare the development of a web and mobile application using the modern technology React and React Native. The comparison is done on a note taking application. The graphical design of these applications, responsive design and data storage in the database are other topics of the thesis. The main comparison deals with the differences in the development of these applications, the structure of the code or the time consumption of the whole development. To further compare the time requirements, Capacitor was used, which allows us to create a mobile application from the original web application.
Klíčová slova
Vývoj webové aplikace, vývoj mobilní aplikace, React, React Native, Firebase, JavaScript, Capacitor, Android, iOS
Klíčová slova v angličtině
Web application development, mobile application development, React, React Native, Firebase, JavaScript, Capacitor, Android, iOS
Zásady pro vypracování
Nastudujte a stručně charakterizujte React a React Native. Dále popište jejich možné využití v praxi.
Popište hlavní rozdíly mezi React a React Native.
Implementujte aplikaci pro zadávání poznámek pomocí obou uvedených technologií.
Během praktické části pozorujte hlavní odlišnosti ve vývoji, implementaci kódu a popište je.
Porovnejte časovou náročnost vývoje těchto aplikací. Přizpůsobte webovou aplikaci tak, aby měla charakter PWA a následně za pomocí Capacitor frameworku z ní vytvořte mobilní aplikaci pro Android. Porovnejte také výhody či nevýhody těchto dvou vytvořených mobilních aplikací a popište využití těchto technologií v praxi.
Webovou i mobilní aplikaci otestujte na reálném mobilním zařízení (Android OS) a ověřte responzivitu.
Zásady pro vypracování
Nastudujte a stručně charakterizujte React a React Native. Dále popište jejich možné využití v praxi.
Popište hlavní rozdíly mezi React a React Native.
Implementujte aplikaci pro zadávání poznámek pomocí obou uvedených technologií.
Během praktické části pozorujte hlavní odlišnosti ve vývoji, implementaci kódu a popište je.
Porovnejte časovou náročnost vývoje těchto aplikací. Přizpůsobte webovou aplikaci tak, aby měla charakter PWA a následně za pomocí Capacitor frameworku z ní vytvořte mobilní aplikaci pro Android. Porovnejte také výhody či nevýhody těchto dvou vytvořených mobilních aplikací a popište využití těchto technologií v praxi.
Webovou i mobilní aplikaci otestujte na reálném mobilním zařízení (Android OS) a ověřte responzivitu.
Seznam doporučené literatury
GASSTON, Peter. Moderní web. Přeložil Ondřej BAŠE. Brno: Computer Press, 2015. ISBN 978-80-251-4345-2.
ROLDAN, Carlos. React Cookbook : create dynamic web apps with React using Redux, Webpack, Node.js, and GraphQL. Birmingham, UK: Packt Publishing, 2018. Print. ISBN 9781783980727.
Ward, Dan. React Native Cookbook : Step-By-step Recipes for Solving Common React Native Development Problems, 2nd Edition. Birmingham: Packt Publishing Ltd, 2019. Print. ISBN 9781788991926
GASSTON, Peter. Moderní web. Přeložil Ondřej BAŠE. Brno: Computer Press, 2015. ISBN 978-80-251-4345-2.
ROLDAN, Carlos. React Cookbook : create dynamic web apps with React using Redux, Webpack, Node.js, and GraphQL. Birmingham, UK: Packt Publishing, 2018. Print. ISBN 9781783980727.
Ward, Dan. React Native Cookbook : Step-By-step Recipes for Solving Common React Native Development Problems, 2nd Edition. Birmingham: Packt Publishing Ltd, 2019. Print. ISBN 9781788991926
Student odprezentoval před komisí hlavní cíle a výsledky své bakalářské práce. Prezentace jako celek byla zpracována na výborné úrovni, student dokázal vystihnout klíčové body práce. Následně byl student seznámen s posudky vedoucího a oponenta bakalářské práce. Student postupně odpověděl na otázky oponenta práce.
Komise vznesla k obhajobě následující dotazy:
1) Doc. Šilhavý: Obsahuje Vaše práce zhodnocení časové náročnosti vývoje aplikací?