Web Developing with Block Bins

Block Bins is a compost collection company based in Chicago that creates food scrap drop off points using shared bins, providing an inexpensive solution to people who want to compost their food scrap. This service is enabled with a website, automation, and data collection & analysis, which were developed and improved over the course of this internship. The goal of this project was to improve the current website with an updated front-end that uses modern web frameworks and a revised back-end that is better tailored to the Block Binsuse-case. These improvements would reduce reliance on third-party software and developers, and automate more of Block Bins’ workflows. Working on the front-end of the website gave me the opportunity to learn Vue.js, a front-end JavaScript framework, and to utilize the Leaflet API in order to render maps.Developing with Vue.js was a significant aspect of this internship as the framework is increasing quickly in popularity due to all the functionality it provides. Back-end work entailed using Node.js to write scripts that compile collection statistics for each bin, and then analyze the statistics to determine optimal service intervals, and detect overuse, theft, and service issues. Through this process we created a JSON data model for Block Bins to structure its back-end and front-end development around, which will provide guidance for future web development.https://digitalcommons.imsa.edu/intern_reports_2020/1004/thumbnail.jp

USPOREDBA FRONT END FRAMEWORKA ZA IZRADU WEB-APLIKACIJA

Modern web applications, due to the functionalities they provide in their user interfaces, have a complex program structure. Manually writing a program code, due to the complexity of the entire application, can result in uneven quality and content of individual application parts. Maintaining such developed applications is more difficult. Because of this, web applications are often developed by using different frameworks. A framework allows structuring, simpler and more uniform program script writing, and thus easier web application maintenance. There are various frameworks that can be used in the development of web applications, for different parts of the application. Those analyzed in this paper are used in the development of front end parts of web applications. According to their design, a web application can be developed as the Multi Page (MPA) or the Single Page (SPA). This paper explains the difference between MPA and SPA web applications. The advantages and disadvantages of MPA are demonstrated in relation to SPA web applications. Required characteristics that the framework should have in order to be optimized for creating MPA and SPA web applications are set. The hypothesis has been tested: There is a framework that is optimized for the development of both MPA and SPA applications. Possibilities, architecture and development techniques of a web application using front end frameworks, as well as the suitability of such frameworks for the development of MPA and SPA web applications have been analysed. Choosing a framework for the hypothesis testing has been performed based on the popularity of available frameworks. The required characteristics have been analyzed on the three most popular frameworks: Angular, Vue.js and React-js. It has been shown that the Vue.js framework is the most optimized framework for the development of both MPA and SPA applications.Moderne web-aplikacije, zbog funkcionalnosti koje omogućuju u korisničkom sučelju, imaju složenu programsku strukturu. Ručno pisanje programskog koda zbog složenosti cijele aplikacije može rezultirati neujednačenom kvalitetom i sadržajem pojedinih aplikacijskih djelova. Održavanje tako razvijanih aplikacija otežano je. Zbog toga se web-aplikacije često razvijaju korištenjem različitih frameworka. Framework omogućuje strukturiranje, jednostavnije i ujednačenije pisanje programskog koda, te time olakšava održavanje web-aplikacije. Postoji puno frameworka koji se mogu koristiti u razvoju web-aplikacija, i to za različite dijelove aplikacije, a oni analizirani u ovom radu koriste se u razvoju front end dijela web-aplikacije. Prema načinu izvođenja webaplikacije mogu biti Multi Page (MPA) ili Single Page (SPA). U radu je objašnjena različitost između MPA i SPA web-aplikacija. Pokazane su prednosti i nedostatci MPA u odnosu na SPA web-aplikacije. Postavljene su zahtijevane karakteristike frameworka koji je optimiziran za izradu MPA i SPA web-aplikacija. Testirana je hipoteza: Postoji framework koji je prilagođen za izradu i MPA i SPA aplikacija. Analizirane su mogućnosti, arhitektura i načini razvoja web-aplikacija pomoću front end frameworka te prilagođenost takvih frameworka za razvoj MPA i SPA web-aplikacija. Izvršen je odabir frameworka za testiranje hipoteze prema popularnosti na tržištu. Zahtijevane karakteristike analizirane su na 3 najpopularnija frameworka: Angular, Vue.js i React-js. Pokazano je da je Vue.js framework najoptimiziraniji framework za izradu i MPA i SPA aplikacija

Individual Professional Practice in the Company

Bakalářská práce popisuje absolvování odborné praxe ve společnosti Poski.com s.r.o. na pozici front-end developer. Praxe byla zaměřena na vývoj prvku pro CMS systém firmy. V této bakalářské práci jsou uvedeny základní informace o firmě, popis použitých prostředků, řešení a problematika zadaných úkolů, které byly řešeny v rámci odborné praxe. Dále jsou popsány získané dovednosti a zkušenosti nabyté při odborné praxi.The Bachelor’s thesis describes a professional practice at the Poski.com s.r.o. on position frontend developer. Practise was mainly focused on development items for CMS system of the company. Document said basic infomation about company, describe used technology, solve and problematics in task which was solved on my professional practice and experience and skills which I reached.460 - Katedra informatikyvýborn

The process of building an admin dashboard user interface

MariaDB Corporation Ab is a global software vendor that develops and contributes to the well-known open source MySQL database which was forked and managed by the MariaDB Foundation. The company is specializing in developing solutions arounds MariaDB server. MaxScale, a database proxy open source project which is one of the core components of MariaDB Platform helping to extend the availability, scalability and security of MariaDB Server. MaxScale provides a command line administrative client tool called maxctrl that internally uses REST API to configure MaxScale at runtime. This thesis is established due to the need of developing an alternative solution to maxctrl which is a web browser application that operates as an admin dashboard user interface. The application should allow to configure MaxScale in a visually appealing, intuitive and user-friendly way. It will be built by using Vue.js framework along with its support plugins and libraries such as Vue Router, Vuex, Vuetify and so on. Though this is a graphical user interface product-oriented thesis, it will not include all development processes in terms of user interface such as prototype designs, user experience designs and user story due to confidential information of the company. Therefore, the primary objectives of this thesis can be divided into three categories comprise of setting up developer’s working environment, improving MaxScale REST API for using in web application in terms of MaxScale user authentication, implementing the authentication user interface page

Low code approach for business analytics

Low-code is an approach to programming that seeks to enable the creation of artefacts by both programmers and non-programmers. It enables the rapid creation and delivery of applications with minimal effort to write in a programming language as well as for installation and configuration of environments, training and deployment. This allows the development to follow the needs of a company in a faster and more efficient way. Thus, a web platform was created that allows the user to customize a dashboard composed mainly of graphs and widgets, in order to make the most of the data. However, beyond this specific application, the platform can be applied to any other area with minimal effort from the developers. The platform was developed using the technologies that are most suitable for the development of web applications. Thus we have the back-end that was developed using the Node.js platform, which uses one of the fastest growing languages in web development, JavaScript. For the interface was used the framework also in JavaScript, Vue.js. As for data storage, the non-relational data model was used and for its management and observation, the MongoDB software was used.This research was funded by Fundação para a Ciência e Tecnologia, within the Project Scope: UIDB/00319/2020

Redesign of the Quizzito administration console

In the context of the competitive online educational landscape, we sought to deliver a platform that would not only meet but surpass the evolving expectations of users, providing them with a seamless and rewarding learning experience. Our project showcases how innovative design, effective user testing, and the deployment of modern development technologies can transform an educational platform to better serve the needs of its users and facilitate their growth and learning journeys. Our project aimed to address the challenges faced by the existing educational platform, Quizzito, which seeks to make learning an engaging and rewarding experience. By redesigning the user interface and enhancing the overall user experience, we aspired to not only retain current users but also attract new ones. The development process was carefully guided by the feedback collected during the mock-up phase, ensuring that user expectations were met and exceeded. Using modern technologies like Vue.js for the front end and Laravel for the back end, we streamlined the platform’s functionality while also optimizing performance and responsiveness. Data storage, a critical component of any educational platform, was handled efficiently through SQL.No contexto do competitivo cenário educacional on-line, procuramos fornecer uma plataforma que não apenas atendesse, mas superasse as expectativas em evolução dos usuários, proporcionando-lhes uma experiência de aprendizagem contínua e gratificante. Nosso projeto mostra como o design inovador, os testes de usuário eficazes e a implantação de tecnologias modernas de desenvolvimento podem transformar uma plataforma educacional para melhor atender às necessidades de seus usuários e facilitar seu crescimento e jornadas de aprendizagem. Nosso projeto teve como objetivo enfrentar os desafios enfrentados pela plataforma educacional existente, Quizzito, que busca tornar o aprendizado uma experiência envolvente e gratificante. Ao redesenhar a interface do usuário e melhorar a experiência geral do usuário, aspiramos não apenas reter os usuários atuais, mas também atrair novos. O processo de desenvolvimento foi cuidadosamente orientado pelo feedback recolhido durante a fase de maquete, garantindo que as expectativas dos utilizadores fossem satisfeitas e superadas. Usando tecnologias modernas como Vue.js para front-end e Laravel para back-end, simplificamos a funcionalidade da plataforma e ao mesmo tempo otimizamos o desempenho e a capacidade de resposta. O armazenamento de dados, um componente crítico de qualquer plataforma educacional, foi gerenciado de forma eficiente por meio de SQL

Towards the integration of user interface prototyping and model-based development

The main objective of this paper is to make a contribution in the automation of web applications’ development, starting from prototypes of their graphical user interfaces. Due to the exponential increase in the use of internet-based services and applications, there is an also increasing demand for Web designers and developers. At the same time, the proliferation of languages, frameworks and libraries illustrates the current state of immaturity of web development technologies. This state of affairs creates difficulties in the development and maintenance of Web applications. In this paper, we argue that integrating concepts of modelbased user interface development with the more traditional usercentred design approach to development can provide an answer to this situation. An approach is presented that allows designers to use prototyping tools, in this case Adobe XD, to design graphical interfaces, and then automatically converts them to (Vue.js + Bootstrap) code, thus creating a first version of the implementation for further development. This is done through the interpretation of the SVG file that Adobe XD exports.FCT -Fundação para a Ciência e a Tecnologia(UIDB/50014/2020

Implementation of a multiplatform system for defining and monitoring of diets

The AquaeVitae project innovatively promotes health and prevents illness, focusing on thermal water-based dietary recommendations. It features an intelligent system, split into a web platform for nutritionists and administrators, and a mobile app for patients, enhancing nutritional planning and client interaction. It was decided to split the system into two parts: a web system for nutritionists and administrators, and a mobile system for patients. Nutrition apps are increasingly popular as they help clients manage their diet and make healthier food choices. Requirements were gathered for each user of the system and use case, entity-relationship and architecture diagrams were created. Prototypes were also developed for the web and mobile layout. This project is centred on the Web application for the nutritionist, using technologies such as Vue.js, TypeScript and Node.js. Our project offers an intuitive layout for managing nutritional plans by simplifying the creation, editing, and updating of health plans. Moreover, we allow easy interaction with patient reports and food diaries. Last, this Web Application was designed to allow an easy update of the food database with new foods, particularly unique thermal-based foods.O projeto AquaeVitae promove de forma inovadora a saúde e previne a doença, centrandose nas recomendações dietéticas baseadas na água termal. Trata-se de um sistema inteligente, dividido numa plataforma web para nutricionistas e administradores e numa aplicação móvel para pacientes, que potencia o planeamento nutricional e a interação com o cliente. Foi decidido dividir o sistema em duas partes: um sistema Web para nutricionistas e administradores e um sistema móvel para pacientes. As aplicações de nutrição são cada vez mais populares, uma vez que ajudam os clientes a gerir a sua dieta e a fazer escolhas alimentares mais saudáveis. Foram recolhidos requisitos para cada utilizador do sistema e foram criados diagramas de casos de uso, de entidade-relacionamento e de arquitetura. Foram também desenvolvidos protótipos para o layout Web e móvel. Este projeto centra-se na aplicação Web para o nutricionista, utilizando tecnologias como Vue.js, TypeScript e Node.js. O nosso projeto oferece um layout intuitivo para a gestão dos planos nutricionais, simplificando a criação, a edição e a atualização dos planos de saúde. Além disso, permitimos uma fácil interação com os relatórios e diários alimentares dos pacientes. Por último, esta aplicação Web foi concebida para permitir uma fácil atualização da base de dados de alimentos com novos alimentos, em particular alimentos de base termal

Transitioning from Vue 2 to Vue 3

Frontend development is a field that is constantly changing because of the vast amounts of tools that are made available each year. One of the most popular frameworks being utilized to create fluid user experience is the Vue framework. Branching from the well-known Angular.js, Vue.js is an independent open-source project that is making its mark in the user interface community. Regardless of the popularity of a framework, updates are inevitable to keep up with the innovations required by the IT Field. To ensure that UNO IS&T students are being offered opportunities to learn and develop in the most update to date technologies, I have undertaken the work to upgrade two applications built in the Full Stack Development (4900) course offered at UNO from using the Vue 2 version of Vue.js to the Vue 3 version