Reaaliaikaisen verkkosivun toteuttaminen

Abstract

Insinöörityön tavoitteena oli kehittää jo olemassa olevaa taksinkuljettajien tilauslistaa niin, että siitä saatiin entistä käytettävämpi. Tilauslista päivitettiin vanhanaikaisin menetelmin, mikä aiheutti erilaisia käytettävyyteen ja toiminnallisuuteen liittyviä ongelmia. Tilauslista on verkkosivu, mutta sitä käytetään upotettuna Android-sovelluksessa. Projektin tavoitteena oli tutkia nykyaikaisia reaaliaikaisia web-teknologioita, tehdä tutkimustulosten pohjalta suunnitelma tilauslistan parantamiseksi ja lopuksi toteuttaa suunnitelman mukainen päivitys järjestelmään. Insinöörityössä tutkittiin teknologioita, joiden avulla web-sivuston ja palvelimen välille voidaan luoda jatkuva yhteys niin, että palvelin voi päivittää tietoa sivulle heti, kun uutta tietoa on saatavissa. Tutkimustulosten avulla laadittiin suunnitelma, jossa tilauslistan palvelinpuolen rinnalle tehdään WebSocket-palvelin, jonka avulla tilauslistaa päivitetään reaaliajassa. Suunnitelman pohjalta kehitettiin Ratchet-PHP-kirjastolla WebSocket-palvelin, joka toimi muuten moitteettomasti, mutta se ei ollut tuettu vanhemmissa Android-laitteissa WebView-elementissä. Paremman selaintuen saavuttamiseksi toinen versio toteutettiin Node.js-palvelimella ja Socket.io-kirjastolla. Socket.io:lla toteutettu versio toimi myös vanhemmilla Android-versioilla, joten se otettiin käyttöön. Insinöörityön lopputuloksena syntyi tilauslista, johon mobiilisovelluksesta tehdyt uudet tilaukset ilmestyivät reaaliajassa. Toteutuksesta tuli kehittyneempien teknologioiden hyödyntämisen seurauksena skaalautuvampi ja reaaliaikaisuuden tuomien etujen vuoksi myös käytettävämpi.

The aim of this study was to further develop an already existing order list for taxi drivers, in order to increase its usability. The order list is a website, but it is used embedded inside an android application. The order list used to be updated using outdated technologies, which resulted in a variety of usability and functionality related problems. The aim of the project was to research modern real-time web technologies to create a plan to improve the order list based on the results of the study and finally to implement an upgrade for the system by utilizing the plan. A number of technologies were researched, which enable a server and a website to create a persisting connection between the two parties so that the server can update the webpage immediately when new information is available. Based on the results of the study, a plan was made to implement a WebSocket server that would update the order list in real-time. The plan was executed by implementing the WebSocket server using Ratchet PHP library. The server functioned well in new browsers, but the technology was not supported by older Android devices. In order to achieve better browser support, a second version was implemented utilizing Node.js and Socket.io library. The second version functioned well in older Android devices. As a result of this study, new orders placed in a mobile application now appear in the order list in real-time. By using more advanced modern technologies, the application’s scalability has been greatly improved and the usability is considerably better because of the real-time nature of the application.