ozyinc / qr-code-reader-generator Goto Github PK

The project is written in Elm as front-end language, there is a PHP script to redirect requests from app to the endpoint since the real APIs do not support cross-origin requests. The project is bundled using Parcel bundler.

The app has two parts that can be navigated from the menu above:

1. Reader

   In reader part you can provide a URL to be read, or you can select and upload a file to be processed. If operation is successful you will see the result in a green box, a red box will indicate error otherwise.

2. Generator

   In generator part you can adjust settings on the right to generate a given QR code on the left. If the settings you provide has errors or exceeds the limits provided by the API, a red error box will be displayed instead of the QR.

• CORS block:
  1. The API that I used was good, however the developers hadn't allowed Cross-Origin requests, thus I had to find a way in the server-side that would redirect any request that I have sent to the original server.
  2. I have first thought about writing a simple server config in Apache, however to my frustration the machines that we are provided turned out to have Windows in them, which made everything more complicated (no bash scripts, no GNU tools, no anything).
  3. Then I thought about checking if PHP was installed on the machine, and I got lucky. Thus considering that request redirection has not been a part of core functionalities that we are required to implement (and not being very proficient in PHP), I have found a script that would redirect the request here
• File transfer & deployment:
  1. I wanted to build a simple CI/CD process to allow auto-update of my app from source code, but I couldn't find an easy way to do it directly in Azure
  2. I considered using FTP to send files to serve to the machine, however reuploading files each time I update something would be too repetitive and cumbersome.
  3. Then I have realized that in the deployment center with the given utilities I can directly update the file system from Git, thus however dirty it is, I have produced my own builds in Git, then pushed those (details are provided in Deployment section)

You need elm and node and npm to build this project. Elm is the language used to write the main project, npm is necessary for building and developing the app.

• Run npm i in root directory
• Run npm run build to generate the build that is in the /build directory

You need php, it is necessary to run the redirect script and serve the files.

Run cd dist && php -S localhost:8000 to start serving the app in port 8000

1. I have created an App Service in Microsoft Azure.
2. I have used Git as the version control tool for my app and pushed it into a repo in GitHub.
3. I have worked on two branches, master and deployment, in the master branch I have developed my code, then in development branch I have built and pushed the artifact to Git repo.
4. In the app service from Deployment Center I have selected GitHub and the deployment branch as the deployment source.
5. I have added the build path as the virtual root path to make the machine serve the build directory.

With the above steps my app becomes available here (This app is not available now, due to limits of Azure)

• dist/* -> compiled and minified app assets that are ready to be served.

• favicon.ico -> A QR code icon to represent the app

• forward.php -> PHP code to forward given request from app to the real endpoint

• index.html -> HTML entrypoint of the app, generated by create-elm-app

• loading.gif -> A GIF file to show when image is loading

• manifest.webmanifest -> A JSON file for Android and Chrome to specify theme colors and icons

• src/

  • main.scss -> Some SCSS overrides for the app
  • index.js -> Autogenerated main JS entrypoint for the app which includes CSS files and boots Elm app.
  • Main.elm -> Entrypoint for the app, creates the menu and renders the active tab
  • ReadQR.elm -> All the models, update logic and views that are needed for reading QR tab is here
  • GenerateQR.elm -> All the models, update logic and views that are needed for generating QR tab is here
  • QRFormat.elm -> Stores some shared functions and types between reading and generating.

• .gitignore -> Contains entries to exclude some generated code while resolving dependencies

• elm.json -> Package configuration settings for Elm part of the app

• package.json -> Automatically generated by create-elm-app. Package configuration for node and npm which are used by the components that compile and minify the code

• package-lock.json -> Automatically generated by npm to freeze the package state of the app.

Utilities:

• Parcel used for bundling the application
• PHP Redirect Script is used for redirecting requests to the API

Libraries:

• bootstrap: UI library for HTML
• elm/browser: Elm core library for interacting with browser
• elm/core: Elm language core
• elm/file: Elm core library for file interactions
• elm/html: Elm core library for Html generation
• elm/http: Elm core library for creating Http requests
• elm/json: Elm core library for parsing and building JSON
• elm/url: Elm core library for generating and parsing URLs
• elm-json-decode-pipeline: An easier way to decode JSON for Elm
• elm-color: A unified way for representing colors in Elm
• elm-color-extra: A library providing contrast ratio calculation function for colors
• elm-bootstrap: A library in Elm providing representations of Bootstrap entities for UI
• elm-colorpicker: A library in Elm that generates color picker for UI