BeThere (This URL should be there in your phone)
So, in my last post I talked about the product that I was writing and it will sync any URL (for now) from your laptop machine to your mobile device. Today I will be writing about how I implemented this and the challenges that I experienced while writing the product.
It consists of three parts, a chrome extension, a mobile app and another service(REST api) that will communicate to the database, will be accessed by both chrome extension and the mobile app. This is how it looked
Chrome Extension
The first part a chrome extension is a normal web application and is completely written on front end technologies HTML, CSS and Javascript, source code has been uploaded here.
The issue that I faced while writing this was to remember the user is logged in and not to show the register/login page if they click on the browser action again. There are a lot of options(session storage, local storage and cookies) to go for, and I chose storage.sync, to store the API(REST) key, in the storage so that if the user is trying to perform an action like saving the URL this saved API key will be sent alongwith the REST endpoint to authenticate the user. I chose chrome.storage.sync to store the API key the reason was, that session storage can’t be used due to unavailability of it after restarting the browser.
Another issue that I faced was because of CORS(cross origin resource sharing) as shared in last post, because the REST api and the chrome extension were in different domain and solved it by setting REST APIs response’ headers. By changing the response’ header we tell the container that we want this REST api to be accessed from any resource published on any other domain. I will talk about the changes that I did on server side in another section.
Mobile Application
I mostly work on java based technologies but was not too much into mobile application development so I used cordova to make the hybrid mobile application using web technologies that I am familiar with, well a bit.
Cordova has great documentation about how to start creating your mobile application, anyone can start by going through the docs. The issue that I faced again was to implement sharedpreferences(mainly used to enable login once facility) in cordova, there are some native storage plugins available and you can learn how to implement by going through them. We can store the API key in the storage using the plugin that we downloaded and later we can check whether user is logged or not.
REST API
A REST API is written that will communicate to the DB directly, and rest of the services(chrome extension and mobile app) will send the HTTP requests to get or save URL and register or login the user.
The API is written in java, used JAX-RS jersey framework to handle the requests, after writing the API the main issue that I was facing was the API was not accessible by the application that were deployed on the different domain from where this API is deployed(used AWS here).
To get this issue resolved these are the response headers that were changed so that the API can be accessed from any application deployed on any domain.
So, whenever any response is being sent to the client form this REST service, it will be filtered from a resource that I wrote and in that resource(java class) I am setting the response headers that are mentioned in above image. We can create a provider in JERSEY and implement ContainerResponseFilter so that every response, that will be returned to the client, will go through it. We can change the response in any way we want in this provider. This is a rough diagram of this flow
The product is not live yet, I am having some issues in chrome extension with oauth, will make some changes in REST api to support oauth and make it live later.
So, this is it for this post I planning to upload the code of mobile app and REST API also on github, will share the links later.
