On February 10th, 2020 Anne and I started our internship at TheGuild in Amsterdam. This internship learned us a lot about building a mobile app with the React-Native framework and the process of researching encryption and laws that protect the private data of users. During these couple months we have worked on the doccs app. With the doccs app you can ask care questions, chat with your GP’s office, make an appointment and request medication.
Our assignment during this internship was to integrate the functionality to send images taken via the camera of the user straight into the chat. The user also must be able to select images straight from the camera roll in the app and send them with or without a message underneath the sent image.
Anne and I began with watching tutorials of the React-Native framework in the hope to learn the basics of how React-Native deals with the use of components, navigation and styling. During these first few weeks we had done research about laws that protect personal data, so that these are stored encrypted and safely.
After us feeling comfortable with using the syntax and the use of other technologies such as MongoDB for the storage, Virgil Crypto for the encryption, Loopback for API calls and Firebase for the authentication of the users, we started with building a test app. This test app that we built had all the requirements that were needed inside the doccs app. Taken pictures are encrypted and can only be seen by the user that receives them.
With the test app working and ready to implement into the doccs app we used the remaining time of our internship to work on the improvements of some of the functionalities and changed UI styles according to designs given to us. Anne and I divided the implementation of the test app into two parts, the camera part and the selection of images part. I worked mostly on the selection of images part.
Inside the camera roll picker the user can press on the camera icon to let camera appear. The photo taken by the camera is shown after pressing the green button located in the middle on the bottom part of the screen.
This component that we have built is shown after the user clicks on the camera icon next to the text input field. When clicked on the icon the twenty most recent pictures are being shown from the gallery, the images that are selected by the user can eventually be send as a message.
If the user has selected multiple images to be sent in the chat, they will be shown in the chat as a cluster of images and the remaining images will be represented as a number in the bottom right side of this cluster. The reason why the images in the chat appear blurry is because these images are intended for the user and recipient. Blurring the images prevents anyone from looking over your shoulders at these images. When one of these images is clicked they will be displayed normally in a preview screen.
What an internship! I have learnt so much from working with React Native, MongoDB and Loopback to working and brainstorming with a great team. TheGuild is a company that I would recommend to everyone!