Sprint 1¶

GitLab configuration¶

Block pushing directly to master, only allow pull requests.
Set default branch.
Configure max file size to 5mb.
Require at least one code review to complete a merge request.

176 As a developer I want to learn how to configure gitlab to only allow merge requests¶

To only allow merge requests I had to set master as a protected branch. Maintainers and developers are allowed to create merge requests and none is allowed to push directly. I also had to disable force push.

Source: https://docs.gitlab.com/ee/user/project/protected_branches.html

177 As a developer I want to learn how to require all merge requests to be reviewed before being completed¶

The setting to require a minimum amount of aprovals before merging is located in Settings -> Merge Requests -> Merge request aprovals

https://docs.gitlab.com/ee/user/project/merge_requests/approvals/

Pipeline configuration¶

Mobile App

Must have no eslint errors
Must compile without errors.

Embedded device code

Must compile without errors

Beacon API

Must have no eslint errors
Must compile without erros

Learning stories

178 As a developer I want to learn how to check for eslint errors on a pipeline¶

The previous team created a mobile app using react native. They have setup eslint which after researching it I found that it checks for the syntax used in the project for errors and enforces a specific code style for consistency. Since I am making the pipeline for our project and we will be expanding on their code, I figured it is a good idea to ensure that code has a consistent style through the pipeline. If there are style errors, the pipeline should fail.

To do that I need to run the npm run lint command which in turn runs eslint on the project using the configuration file present.

Source: https://www.getfishtank.com/blog/adding-eslint-code-style-guard-pipeline-in-devops

179 As a developer I want to learn how to check a react native app for errors on a pipeline¶

The image used for the pipeline has to include the android sdk and I found that there is a image specifically for react native called reactnativecommunity/react-native-android

The previous team had a pipeline file which, while lacking some things, was using the npm run android command to build the app on the cloud. The issue is that this command builds and runs the application but I only wanted to build.

I found out that I need navigate in the android folder and execute ./gradlew assembeRelease

This gave me permission denied so before that I had to modify the permission using chmod +x ./gradlew

Source: https://medium.com/in-the-pocket-insights/upgrading-our-app-build-process-eaff34f7f2e8

180 As a developer I want to learn how to check an arduino file for compile errors on the pipeline¶

To verify that an arduino file is building I need to use the arduino CLI. https://wellys.com/posts/esp32_cli/

181 As a developer I want to learn how to store the build files after the pipeline is finished¶

The pipeline builds the projects to verify that there are no errors. Then I can specify the path where those output files are placed so that they can be stored.

This is done using artifacts within the gitlab pipeline. After the script section I need to add another section named artifacts and then enter that paths to be saved.

  artifacts:
    when: on_success
    expire_in: 10 days
    paths:
      - "/beacon-frontend/dist"

source: https://www.bitslovers.com/gitlab-ci-artifacts/

Database design and setup¶

Store a beacon id, description and location coordinates.

Learning stories

182 As a developer I want to learn how to create a database schema using prisma¶

The schema is defined in the prisma.schema file. I defined the beacon object type with each property having an aprpriate type. I learned how to set the types of the properties in each object, setting the primary key and default values.

After defining the schema I had to run npx prisma migrate to apply the changes in the database and create the types.

https://www.prisma.io/docs/concepts/components/prisma-schema

Beacon API¶

Routes

Get beacon information from id.
Get all beacons.
Create a new beacon.
Delete an existing beacon.

Beacon API Learning stories¶

183 As a developer I want to learn how add hot reloading support the typescript backend¶

I thought of using nodemon which can detect changes and rebuild the node.js project. This requires additional configuration on a typescript project.

I had to define a nodemon configuration file with the command that should be run every time changes are made.

{
    "watch": ["src"],
    "ext": "ts",
    "exec": "ts-node ./src/app.ts"
}

https://blog.logrocket.com/configuring-nodemon-with-typescript/

184 As a developer I want to learn how to setup prisma using an sqlite database¶

I chose to use sqlite so that there is no need of installing and configuring a database server in the different machines that we test it on.

To configured sqlite I had to create a .env file with DATABASE_URL=”file:stephear.db”. This allows us to easily migrate to a different database option by using a different env.

Then to use the database I had add the following to the prisma.schema file:

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

185 As a developer I want to learn how to validate input from the user on the backend to ensure it meets strict requirements¶

I want to validate the json body sent by the requests of the users, for example the details of the new beacon to be created.

To do that I use joi for which I define a schema and then use that schema to ensure that the request body matches that format along with limitations on the size of the fields.

  var beaconSchema = Joi.object({
    id: Joi.string().length(10).required(),
    description: Joi.string().max(200).required(),
    X: Joi.number().required(),
    Y: Joi.number().required()
  });

https://softchris.github.io/pages/joi.html#introducing-joi

Beacon management frontend¶

List all existing beacons in a table.
Function to create a new beacon.
Function to delete an existing beacon.
No authentication required.

187 As a developer I want to learn how to set up a svelte typescript project¶

First I used npx degit sveltejs/template beacon-frontend but I found out this way of creating a project has been deprecated. In the notes it stated that I should use vite to create projects. I did some research on what vite is and found it that it provides a development server that applies changes almost instantly and it bundles all the javascript files together. I set up my project using npm init vite@latest and added typescript support.

188 As a developer I want to learn what vite is and how it works¶

189 As a developer I want to learn how to add bulma css to svelte¶

190 As a developer I want to learn how to customize the default styling of bulma¶

Last update: May 12, 2023