Aarif Sumra

Md Abdur Rafi Ibne Mahmood

Abdur Rafi

Abinash Ghosh

Md. Abu Farhad

Ahmed Madkor

Ahmed Naseef Chowdhury

Alexander Bondarenco

Amdadul Hoque

An Wonho

Andrei Hogea

Andrew Lloyd

Antonin Joly

S M Asad Rahman

Md. Aslam Hossin

Aslam Hossin

Md Atiqur Rahman

Atiqur Rahman

Bob De Kort

Brett R. Toomey

Carmen Mihaila

Cheryl Cheng

Chris Combs

Christian Weinberger

Daisuke Hirata

Daniel Eddy

Danny Lee

Deniz Tunç Tuncer

Dennis Haulund Nielsen

Dipanjal Maitra

Dominik Hádl

Dominik Ringler

Emil Marashliev

Enric Macias Lopez

Fahim Ahmed

Faisal Ahmed

Faisal Islam

Ferdous Al-Quraeshi

Golam Shakib Khan

Heidi Puk Hermann

Hiroki Saito

Hitoshi Hasumi

HongYang Chen

Hui Zhou

Inna Marchenko

Jakob Mygind

Jigna Patel

Jiri Bucek

Joao Alves

Johnny Sørensen

Jonas Stokholm Olsen

Jonas Schwartz

Jose Nieto

Kiyotaka Kunihira

Kun Luo

Li Huang

Lin Chen

Lucas Sales

Majid Mvulle

Marius Constantinescu

Markus Rubey

Matko Smoljan

Md. Mazharul Islam

Md. Mamunur Rashid

Milan Vít

Miyuki Akimoto

Morten Turn Pedersen

Morten Nikolaj Pløger

Muddi Walid

Muhammad Bin Farook(Rafi)

Laurentiu Narcis Zait

Md Nazmul Hasan

Nazmul Hasan

Nicolai Harbo

Nikolay Mitikov

Noboru Ishikura

Nozomi Igarashi

Nyle Levi

Oliver Wang Hansen

Oliver Hegelund Duedam

Peter Bødskov

Rasmus Ebbesen

Rasmus Thirslund

Redwan Hilali

Ricardo Tokashiki

Md. Rifat Alam

Rifat Alam

Mohammed Rokon Uddin

Rokon Uddin

Roman Levinzon

Roxana Jula

Ryosuke Hashimoto

Saad Bin Amjad

Sebastian Ly Serena

Full-Stack Tech-Lead engineer

Sébastien Caparros

Shafin Ashraf

Shahnewaz Leon

Shuhei Okuda

Siemen Sikkema

Sivan Payyadakath

Serigne Mbacke Ndiaye

Sourav Ganguli

Steffen D. Sommer

Tagy Aldeen

Tanveer Hassan

Teruhiko Tanaka


At Monstarlab, the role of Solution Architect (SA) provides one career path for developers to progress towards, should they wish to pursue a less hands-on role over time. Many of the most common problems faced by a rookie SA are around the communication of their solution designs. It can be tempting - as an ex-developer - to involve yourself in every detail of the system you’re working with. Tasks often end up defined so meticulously that every decision is already made by the time they’re picked up by the devs. As ex-coders, many SAs create documentation as if the intended audience is a machine. Diagrams are overly detailed, formal and unintuitive. Written instruction is almost pseudo-code.

There’s a danger that devs working with a fastidious SA become deskilled - turned into automatons, churning out code with no understanding of context, according to a detailed spec that allows no room for interpretation or creativity. And spoon-feeding developers with every detail of the designs we want them to implement is not the best way to help them make the transition from coder to SA, should they choose this path. The SA also becomes a single point that every decision has to pass through.

Here I share five tips to help you ensure your solution design communications are optimised for free-range, free-thinking, motivated developers who will be aligned with your technical vision.

## 1. Involve developers in the key technical decisions

Nothing frustrates a developer more than being presented with a technical decision which they disagree with, at a time when it’s too late to change it. When I am doing technical discovery on a feature set, I make a point during our daily stand up of providing a short summary of the key technical decisions I’m working towards. This gives the developers a chance to express a preference, make suggestions, or provide valuable insight as someone closer to the codebase. It is a good way of ensuring that developers are part of the decision-making process, and reduces the chance of pushback when you present your technical solution further down the line.

## 2. Get involved in user story creation

Who writes the user stories for a project will vary from organisation to organisation and will depend on the roles defined. In many organisations, it’ll be the product owner who takes the lead, with detail or tasks added by others in the team such as the scrum master (or delivery lead at Monstarlab), QA engineers, SAs or the developers themselves.

The SA will generally provide the initial detail for the backend elements of user stories, as these may involve third-party integrations or entail interaction with the data layer. Contributing to user stories is an opportunity for you to retain visibility over the solution you’ve designed as it is implemented. What you include will be critical to the relationship between you and your developers. Try to bring a consistent approach to a user story’s structure. Learn over time what works and what doesn’t and discuss this at sprint reviews.

And remember to leave the coding to the devs. The level of detail provided in user stories should strike a careful balance between enough guidance to ensure your broad solution design is met, and so much instruction that you leave no room for the kind of creative problem solving that inspired your developers to get into coding in the first place.

## 3. Give developers context

It’s perfectly possible to spec a task in a way that a developer is able to implement it without having any understanding of the wider context. However, making the effort to provide an understanding of how a feature fits into the overall solution will be empowering and motivating for the development team. Your devs will be better able to suggest efficiencies if they can see the bigger picture.

One of the key elements in my solution designs is the sequence diagram, which is a great way to provide context for a user story. Avoid going into too much detail on these. Ask yourself, “What is the purpose of my drawing?” before you start. Does your team really need a diagram showing every call made between a solution’s classes before they can start coding?

I tend to highlight only the main calls between a solution’s front end application and the middleware, and between the middleware and any third parties. This can provide a useful discussion tool during collaboration sessions with your developers or client and third party stakeholders, as you go through the process of figuring out a key data flow or integration. I use a less formal version of the sequence diagram which is more readable without learning the official UML notation.
<kbd>
![Example sequence diagram]({{ sitePrefix }}/assets/img/articles/2022-04-28-Solution-Design-For-Freerange-Developers/sequence-diagram.png)
</kbd>

## 4. Explain the reasons behind your decisions

Hopefully, your developers will have been involved in the key technical decisions (see point 1) but it’s still possible the developer picking up a user story may not understand the broader context of every element of the task in question. The reasons behind some of a story’s details or acceptance criteria may not be obvious. A short paragraph at the top of a user story’s description goes a long way to giving developers the “why?” and not just the “what?”.

![Example user story]({{ sitePrefix }}/assets/img/articles/2022-04-28-Solution-Design-For-Freerange-Developers/user-story.png)

## 5. Be collaborative with estimation

Solution design should also not be seen as a top-down exercise, where the SA dictates to the team what’s to be done and how long it should take. Involve your developers early in the estimation process. At Monstarlab, this can be as early as the pre-sale stage where we try to give t-shirt size estimations on features. Involve your development team in the process. Decide roughly how much time a small, medium and large corresponds to and then get the team to estimate each feature.

![T-shirt sizing key]({{ sitePrefix }}/assets/img/articles/2022-04-28-Solution-Design-For-Freerange-Developers/t-shirt-sizing.png)

Once in production, involve the developers in the process of creating the more detailed estimations for user stories. Our estimation sessions involve a two-stage process, ahead of sprint planning. First, the delivery lead and SA present each of the next batch of user stories to the developers and QA engineers. This provides an opportunity for the team to ask questions, interrogate the stories, suggest improvements or highlight considerations that haven’t been thought of. We edit the stories as necessary during the session and only once everyone is happy does the team play Planning Poker - www.planningpokeronline.com - to estimate their story points.

## Conclusion

As a new solution architect, it can be hard to relinquish control over every detail of the systems we design. But the more we can, the more we help developers we work with stay motivated and engaged. We also help ourselves by avoiding becoming a decision-making bottleneck for the team. And don’t feel like you need to be the one with all the answers. If you involve the devs in your process, they’ll be more on board with your design when they come to implement it.

_Article Photo by [iStock by Getty Images](https://www.istockphoto.com/vector/set-of-vector-office-elements-with-people-isometric-coworking-or-open-space-gm1205496033-347286760)_


Solution Design for Freerange Developers


This year's [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks) main theme was Life Science and three selected goals were:

1. Assure equitable health care for everybody
2. Keep the “human touch” in digital healthcare solutions in isolating times
3. Connect refugees with medical support in times of crisis (with a focus on low energy consuming solutions)

Our team `PartTimeHackers` decided to tackle the problem of "Connect refugees with medical support in times of crisis" by building a mobile application that will connect health care professionals with people seeking medical care. We think the challenge is important because the problem is so general. Everyone has this problem. Everyone needs to have some diagnosis. Of course not once or twice a year, but frequently, even daily if possible. And if we could solve it then the life of doctors, rural people, and refugees will be a lot easier.


## Problem statement
We believe there are good people on earth and we want to help those people who want to do good for others. For example if a doctor wants to voluntarily help any person in a refugee camp with medical consultancy, he/she simply can’t or he/she has to overcome a lot of issues. We identified some of those issues as follows:

1. Where to meet
2. When to meet
3. Who to meet

For most of the issues the main cause is, there is no organized way for a doctor to connect to a person who needs help.


## The proposed solution
To solve this organizational problem our team came up with the idea of MonstarCare. `MonstarCare` is an app that connects a person in a refugee camp who needs medical help to a specialized doctor.

## How does it work
A doctor uses our app to notify others at which place and time he/she will be available for volunteering with medical consultancy. And also in which medical sector he is specialized in. Any person from a refugee camp makes a request from our app letting us know what kind of problems they have. After that our machine learning algorithm matches a doctor to the refugee who needs help. Then those people who are matched to a doctor are notified by SMS at what time and place the doctor will visit their refugee camp zone.

## Our Tech stack
- [React native](https://reactnative.dev/) (App) - Allowed us to prototype our app faster than any other solution. None of our team members was familiar with app development. But react native was very easy to learn.
- [Go](https://go.dev/) (Backend) -  If we want to scale our solution globally Go helps in that area.
- [Python](https://www.python.org/) (Machine Learning Model) -  Industry standard and huge community support.
- [Figma](https://www.figma.com/) - Intuitive tool for mocking and designing app flow.


### Links to app demo
- 🎨 Design: [Figma file ](https://www.figma.com/file/OGlbDeyIYyDZAnm2fUJASe/hacks2022?node-id=0%3A1)
- 💻 Demo Implementation: [Published expo (React Native)](https://expo.dev/@shafin_ashraf/mht?serviceType=classic&distribution=expo-go)


_Article Photo by [samaritanspurse.ca](https://www.samaritanspurse.ca/article/bc-nurse-offering-helping-hands-to-displaced-in-bangladesh/)_

Connecting specialized doctors to refugee camps with the help of artificial intelligence


Refugee crises continue to be a major concern around the world. As of today, the number of refugees and internally displaced people worldwide has grown to almost 90 million. Due to multiple barriers like culture, language, etc., ensuring adequate access to health care and connecting the community to these huge populations remains a major challenge.

## Problem Statement
Millions of people around the world are forced to be dislocated due to war and other humanitarian crises, thus becoming refugees. Due to many different obstacles, such as language or cultural barriers, refugees are not only burdened with the disease but also compromised access to healthcare. However, knowledge of the living experience of this demographic is very limited. In addition, the strategies that people may develop to access health care, which is very essential to peer support and the establishment of community-based programs, have not been studied in detail.

![]({{ sitePrefix }}/assets/img/articles/2022-04-14-Information-System-for-Storing-and-Analysing-Qualitative-Studies-of-Refugees/image_1.png)

_Image Source: [UN Refugee Agency](https://reporting.unhcr.org/globalappeal2022?page=6#_ga=2.220820248.1411705371.1648888640-227061203.1648888640)_


## Proposed Solution
A greater understanding of the different refugee statuses, such as gender, literacy, ethnicity, culture, etc can guide healthcare workers and policymakers in improving services for these refugees. Furthermore, it is important to enable seldom-heard, hard-to-reach populations and facilitate their research participants to understand how vectors of disadvantage intersect.

Here is MonstarHack 2022, what we are proposing is a means to store semi-structured data of challenges/experiences refugees face and how healthcare professionals around the world developed different strategies to overcome those challenges. These data will be available to explore the experiences of refugees, healthcare professionals, and administrators in the healthcare system.


## Case Study
This is a thematic analysis^1 of semi-structured interviews with refugee participants who arrived in Germany between 2013 and 2018.

![]({{ sitePrefix }}/assets/img/articles/2022-04-14-Information-System-for-Storing-and-Analysing-Qualitative-Studies-of-Refugees/image_2.png)

_Image Source: [A qualitative study on resilience in adult refugees in Germany](https://bmcpublichealth.biomedcentral.com/articles/10.1186/s12889-021-10817-6)_


> The above image shows the nine themes we identified, specific points within each, as well as the two broad categories into which we organized themes based on their function within resilience. The themes of Cognitive coping strategies, Behavioral coping strategies, Self-ascribed resilience as an enduring capacity, and Volunteering, activism, and work for refugee causes all capture ways in which participants manifest resilience as the “process of, capacity for, or outcome of successful adaptation despite challenging or threatening circumstances”. The themes of Social support, Experiencing migration as an opportunity for self-expression, belonging, and personal development, Experiencing migration as an opportunity for women, Being a parent, and Being young all cover factors that appear to facilitate successful adaptation. Within overarching categories, themes are in no particular order except that Cognitive and Behavioral coping strategies and Social support, the first themes in the two categories, were the most globally represented among our participants. The sections below include interview quotations with the individuals quoted represented as participants and a participant number.

## Conclusion
There has been a lot of effort researching the crises of refugees and how different strategies were developed over time to overcome those crises but yet there are no means to record these experiences. 

Information from qualitative research organized into themes and subthemes can be stored and retrieved by storing it in a database. The themes and subthemes are based on an interview guide and the succeeding development of theory and new themes. A database's thorough sorting algorithms allow a researcher to keep track of his data while analyzing and reporting on it.

The comprehensive analysis of these data will help healthcare workers and policymakers working with refugees to take better measures by making them aware of potential strategies and sources of strength specific to this client group. This will also contribute to moving the academic literature as well as will ensure equity in health care for refugees by potentially improving clinical practice and integration processes.

#### Reference:
Walther, L., Amann, J., Flick, U. et al. A qualitative study on resilience in adult refugees in Germany. BMC Public Health 21, 828 (2021). https://doi.org/10.1186/s12889-021-10817-6


_Article Photo by [Amnesty International](https://www.amnesty.org/en/latest/news/2018/11/why-rohingya-refugees-shouldnt-be-sent-back-to-myanmar/)_

Information System for Storing and Analysing Qualitative Studies of Refugees


At Monstarlab we have some incredible talent when it comes to building AR experiences. Some of the work I have seen my colleagues produce has simply blown me away. Really creative, innovative experiences that can often at times blur the line between augmented reality and reality so much so that it’s hard to know what’s real! 

For me personally, I had always enjoyed using AR but had never really got my hands dirty with it. When I got the opportunity to do so, I jumped at the chance. I wanted to share my experience with working with ARKit for the first time and what I managed to create. I first completed some simple online tutorials and watched some videos from Apple to get a grasp of the basics. A really cool feature that really appealed to me was location anchoring. The possibilities of what you could do by combining real world locations using latitude, longitude & altitude, with AR experiences seems so exciting. For a movie nerd like me, the possibility of seeing AR objects interacting with the real world seemed like something only The Terminator could do up until recently!

My end goal was to create an AR experience that could locate & display all of the London TFL tube and train stations for you, what train lines were available and even the current service they were providing. Here goes…


## Step One - Adding an ARAnchor to my ARView


I couldn’t believe how easy it was to add an ARAnchor to an ARKit ARView. I think a lot of people, myself included, see AR and presume its going to be really difficult and complicated but ARKit really does all the heavy lifting for you. My first goal I set myself was to add an AR label to our UK office which simply labelled our office in the sky.

With the latitude & longitude of the office, you can simply create an ARGeoAnchor like so...
```
    let location = CLLocationCoordinate2D(latitude: "51.5113000646694", longitude: "51.5113000646694")
    let anchor = ARGeoAnchor(name: name, coordinate: location)
    arView.session.add(anchor: geoAnchor)
```
You have the option of also supplying altitude if you know how high you want your anchor to be, but I don't want to specify that for now.

This will in turn call a delegate method you should adhere to. You can then specify your AR Entity you wish to display at the location.

```
    func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
        for geoAnchor in anchors.compactMap({ $0 as? ARGeoAnchor }) {
            let entity = Entity.placemarkEntity(for: geoAnchor)
            self.arView.scene.addAnchor(entity)
        }
    }
```

You may notice here I have a method `placemarkEntity(:_)` that generates my entity for me. Lets have a quick look at what this is doing...

```
extension Entity {
    
    static func placemarkEntity(for arAnchor: ARAnchor) -> AnchorEntity {
        
        let placemarkAnchor = AnchorEntity(anchor: arAnchor)
        let indicator = generateNameIndicator(text: arAnchor.name ?? "Untitled")
        placemarkAnchor.addChild(indicator)
        
        //30 meters from the ground
        indicator.setPosition(SIMD3<Float>(0, 30, 0),
                              relativeTo: placemarkAnchor)
        
        //rotate to face where I want
        let radians = 90.0 * Float.pi / 2
        let orientation = simd_quatf.init(angle: radians, axis: SIMD3<Float>(0, 1, 0))
        indicator.setOrientation(orientation, relativeTo: placemarkAnchor)
        
        return placemarkAnchor
    }
    
    static func generateNameIndicator(text: String) -> Entity {
        let indicatorEntity = Entity()

        let text = ModelEntity.nameEntity(text.uppercased()).clone(recursive: true)
        indicatorEntity.addChild(text)
        
        return indicatorEntity
    }
}

extension ModelEntity {
    static func nameEntity(_ text: String) -> ModelEntity {
        ModelEntity(mesh: MeshResource.generateText(text,
                                                    extrusionDepth: 0.2,
                                                    font: .boldSystemFont(ofSize: 4),
                                                    containerFrame: CGRect.zero,
                                                    alignment: .center,
                                                    lineBreakMode: .byCharWrapping),
                    materials: [UnlitMaterial(color: .yellow)])
    }
}
```

So there's quite a lot going on here but I'll give it a quick run down;
Our first function is creating the AnchorEntity we display in our experience. It uses a function to generate the AR text entity, it then positions the entity 30 meters above the ground, that's around the height of our UK office. It then rotates the entity to face the front of the building.
The second function is what is called to generate the text entity, this uses the ModelEntity extension you can see which uses RealityKits' MeshResource static function to generate the 3D text with fonts, colours and other styling we desire.

When this is run in the app it displays something like this which is pretty neat!
![Office Label image]({{ sitePrefix }}/assets/img/articles/2022-04-07-ARAnchors-Bringing-Virtual-Objects-into-the-real-world/officeLabelImage.jpeg)


## Step Two - Adding an ARAnchor for each Station

Now I know how to add an ARAnchor for one location, adding them for all the others was simple. I went on to find some data online that supplied me all the stations throughout London and their latitude & longitude. An issue with this was, London is a rather large city, and it has a lot of train stations! Adding all of these entities to my ARView would cause performance issues and frankly just didn't make much sense for what I wanted as most wouldn't be local enough anyway. I proceeded to use CoreLocation to get the users current location and only generate ARAnchors if the station was within 1000 meters.

Using my previous code for labelling the office, combined with the data of the station locations, I could display all the station labels. One issue with my current implementation was currently all the 3D text entities were rotated facing the same way as our UK office which of course we didn't want. What I really wanted is for the labels to be rotated so the user could read them wherever they are.

Below, this piece of code does this using Combine subscribing to the ARView scene and transforming all the entities to the ARView camera.

```
        //rotate stations to look at camera
        arView.scene.subscribe(to: SceneEvents.Update.self) { [self] _ in
            for anchor in self.arView.scene.anchors {
                if let entity = anchor as? AnchorEntity {
                    entity.billboard(targetPosition: arView.cameraTransform.translation)
                }
            }
        }.store(in: &cancellables)
```
```       
        extension Entity {
            /// Billboards the entity to the targetPosition which should be provided in world space.
            func billboard(targetPosition: SIMD3<Float>) {
                look(at: targetPosition, from: position(relativeTo: nil), relativeTo: nil)
            }
        }
```

The end result meant all tube stations were now displayed with their name above them!
![Euston Square image]({{ sitePrefix }}/assets/img/articles/2022-04-07-ARAnchors-Bringing-Virtual-Objects-into-the-real-world/eustonSquare.png)

## Step Three - Adding custom Reality Composer Scenes & Service Info

Now I had the station names, I really wanted it to look a bit more impressive. I decided to dive in to Reality Composer. It was so fun & easy to use with so many shapes and objects you can combine to create nearly anything you want. When designing your AR objects it's important to keep in mind sizing, these objects are going into the real world in our app, so you want to think about how large you want them to be compared to real life objects. After getting used to Reality Composer quickly, I soon felt like I was making Pixar's next big feature, making all the different train type logos that I would go on to use in our app. 
 ![Reality Composer Example image]({{ sitePrefix }}/assets/img/articles/2022-04-07-ARAnchors-Bringing-Virtual-Objects-into-the-real-world/rcExample.png)

With my Reality Composer scenes finished, I used TFL's API to get all the train lines and their current service. I then updated my entity generation code slightly to include my Reality Composer scenes and laid the lines and their services out using dynamic height depending on the amount of information I needed to display including train lines, line statuses and status icons.

```
    static func placemarkEntity(for arAnchor: ARAnchor,
                                tubeLines: [PlacemarkLineInfo]) -> AnchorEntity {
        
        let meterSpacing:Float = 7
        let placemarkAnchor = AnchorEntity(anchor: arAnchor)
        let topHeightFromGround: Float = 15 + (meterSpacing * Float(tubeLines.count))
        var currentHeight = topHeightFromGround

        let indicator = generateNameIndicator(text: arAnchor.name ?? "Untitled")
        placemarkAnchor.addChild(indicator)
        indicator.setPosition(SIMD3<Float>(0, currentHeight, 0),
                              relativeTo: placemarkAnchor)
        currentHeight -= meterSpacing
        
        //rotate
        let radians = 90.0 * Float.pi / 2
        let orientation = simd_quatf.init(angle: radians, axis: SIMD3<Float>(0, 1, 0))
        indicator.setOrientation(orientation, relativeTo: placemarkAnchor)
        

        for line in tubeLines {
            switch line.tubeLine.trainType {
            case .tube:
                let logoScene = try! UndergroundLogo.loadScene()
                placemarkAnchor.addChild(logoScene)
                logoScene.setPosition(SIMD3<Float>(0, currentHeight + 1, 0),
                                      relativeTo: placemarkAnchor)
            case .overground:
                let logoScene = try! OvergroundLogo.loadScene()
                placemarkAnchor.addChild(logoScene)
                logoScene.setPosition(SIMD3<Float>(0, currentHeight + 1, 0),
                                      relativeTo: placemarkAnchor)
            case .nationalRail:
                let logoScene = try! NationalRailLogo.loadScene()
                placemarkAnchor.addChild(logoScene)
                logoScene.setPosition(SIMD3<Float>(0, currentHeight + 1, 0),
                                      relativeTo: placemarkAnchor)
            case .dlr:
                let logoScene = try! DLRLogo.loadScene()
                placemarkAnchor.addChild(logoScene)
                logoScene.setPosition(SIMD3<Float>(0, currentHeight + 1, 0),
                                      relativeTo: placemarkAnchor)
            }
            let lineIndicator = generateLineIndicator(line: line.tubeLine)
            placemarkAnchor.addChild(lineIndicator)
            lineIndicator.setPosition(SIMD3<Float>(-3, currentHeight, 0),
                                      relativeTo: placemarkAnchor)
            lineIndicator.setOrientation(orientation, relativeTo: placemarkAnchor)
            
            if let status = line.status {
                switch status.status {
                case .good:
                    let iconScene = try! Check.loadScene()
                    placemarkAnchor.addChild(iconScene)
                    iconScene.setPosition(SIMD3<Float>(-4, currentHeight - 2, 0),
                                          relativeTo: placemarkAnchor)
                case .disrupted:
                    let iconScene = try! Warning.loadScene()
                    placemarkAnchor.addChild(iconScene)
                    iconScene.setPosition(SIMD3<Float>(-4, currentHeight - 2 , 0),
                                          relativeTo: placemarkAnchor)
                case .notRunning:
                    let iconScene = try! Cross.loadScene()
                    placemarkAnchor.addChild(iconScene)
                    iconScene.setPosition(SIMD3<Float>(-4, currentHeight - 2, 0),
                                          relativeTo: placemarkAnchor)
                }
                let lineIndicator = generateStatusIndicator(status: status)
                placemarkAnchor.addChild(lineIndicator)
                lineIndicator.setPosition(SIMD3<Float>(-5, currentHeight - 1.5, 0),
                                          relativeTo: placemarkAnchor)
                lineIndicator.setOrientation(orientation, relativeTo: placemarkAnchor)
            }
            
            currentHeight -= meterSpacing
        }

        return placemarkAnchor
    }
```

With my entity generation code in my place, my AR experience was looking a lot more like I wanted.

 ![Line Info image]({{ sitePrefix }}/assets/img/articles/2022-04-07-ARAnchors-Bringing-Virtual-Objects-into-the-real-world/lineInfoOne.png)
 ![Line Info Two image]({{ sitePrefix }}/assets/img/articles/2022-04-07-ARAnchors-Bringing-Virtual-Objects-into-the-real-world/lineInfoTwo.png)
 

### Conclusion

Overall, I was really pleased with all that I had learnt about both ARKit and Reality Composer within a few days. It was much easier to use than I ever would've imagined and you can get impressive results rather quickly. I look forward to having plenty more encounters with ARKit in the future as I am sure the technology & demand for these types of apps will continue to grow. Keep your eyes peeled to the Monstarlab Engineering blog, because just like The Terminator, I'll be back.

Below you can see the application in action. 

`{{ youtube-link="upBFPjHIkuU" }}`

If you want to check out the whole project, you can do so [here](https://github.com/andrewlloyd100/TubeSpotterAR)

####

## Related Articles:

* [Apple's introduction to ARAnchors](https://developer.apple.com/videos/play/wwdc2020/10611/)
* [TFL API](https://api.tfl.gov.uk/)

_Article Photo by [Getty Images](https://www.bbc.co.uk/news/uk-england-london-48531800)_


ARAnchors - Bringing virtual objects into the real world


April 1st 2022 marked the kickoff of the second Monstarlab internal hackathon, [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks), where each team built a project to tackle one of the three Life Science focused challenges:

1. Assure equitable health care for everybody
2. Keep the “human touch” in digital healthcare solutions in isolating times
3. Connect refugees with medical support in times of crisis (with a focus on low energy consuming solutions)

Our team decided to tackle the first challenge: “Assure equitable healthcare for everybody” by building a mobile application that will connect healthcare professionals with individuals seeking medical assistance through a centralized interface. This application can also be integrated with different healthcare providers (hospitals/clinics), for the individuals’ history to be available on the app. All patient history is to be stored on a permissioned blockchain, with individuals providing consent for healthcare professionals to access their history on a as-needed basis.

### The proposed solution

- The mobile application will allow users to login using their government single-sign-on provider, or via username and password
- Logging in with a government SSO will allow healthcare providers to upload their credentials, and have them verified by the relevant authorities/regulatory bodies
- It will also allow individuals to consent to their medical history to be shared with the healthcare professional as needed
- An individual, once logged in, can request medical assistance and go through the flow of describing their symptoms
- The application will then match them with relevant medical professionals, allowing them to either navigate to their location or have a live video call with them

## Solution Architecture

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/10.architecture.svg>
<figcaption>1. Solution Architecture</figcaption>
</figure>

## Working with spatial data in .NET 6 and EF Core

Spatial data represents the physical location and the shape of objects. Many databases provide support for this type of data so it can be indexed and queried alongside other data. Our application currently uses spatial data to calculate distance from a user to a healthcare professional, or even provide the capability to filter based on distance.

NetTopologySuite (NTS) is a spatial library for .NET that allows EF Core to map spatial data with in the database by using NTS types in your model.

To use NTS and spatial data with EF Core, you need to install the appropriate NuGet package, there are NuGet packages to support the following providers:

- [SQL Server](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer.NetTopologySuite)
- [SQLite](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite.NetTopologySuite)
- [In Memory](https://www.nuget.org/packages/NetTopologySuite)
- [PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL.NetTopologySuite)
- [MySQL](https://www.nuget.org/packages/Pomelo.EntityFrameworkCore.MySql.NetTopologySuite)
- [Teradata](https://www.nuget.org/packages/Teradata.EntityFrameworkCore.NetTopologySuite)

Our backend connects to an SQL Server, so we'll be installing the [SQL Server](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer.NetTopologySuite) package.

The types available in the `NetTopologySuite.Geometries` namespace:

- Geometry
  - Point
  - LineString
  - Polygon
  - GeometryCollection
    - MultiPoint
    - MultiLineString
    - MultiPolygon

For our implementation, we'll be adding the `NetTopologySuite.Geometries.Point` type to the User model

```cs
public Point? LastKnownLocation { get; set; }
```

To create a point object, you'll need the coordinates of the user, the latitude and longitude, in degrees. However, the constructor for accepts (x,y), which means you'll need to provide in (longitude,latitude) instead of the usual (latitude,longitude) you might get when interacting with Google Maps or similar. So, to create a point for Monstarlab's office in Dubai (25.0720589,55.1414239) you would use the following constructor.

```cs
LastKnownLocation = new Point(55.1414239, 25.0720589) { SRID = 4326 };
```

The SRID field defines the spatial reference system for Earth's surface, 4326 is the reference system used by GPS satellite navigation systems and for NATO military geodetic surveying.

Querying users within a certain distance is straightforward, you'll need the origin latitude, longitude, as well as the maximum distance.

```cs
var currentLocation = new Point(longitude.Value, latitude.Value) { SRID = 4326 };
result = DbContext.HealthcareProfessionals.Where(x => x.User.LastKnownLocation.Distance(currentLocation) <= distance);
```

Another type that can be used for ensure your search is within a specific region, which can be beneficial if you want to search within a city or neighborhood, is the `NetTopologySuite.Geometries.Polygon`.

To create a polygon representing the JLT West district, where our Dubai office is located, you can use the below code snippet:

```cs
public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Polygon border { get; set; }
}
```

```cs
var JLTCoords = new List<Coordinate>() {
    new Coordinate(55.142068, 25.073812),
    new Coordinate(55.136795, 25.068180),
    new Coordinate(55.137779, 25.061550),
    new Coordinate(55.146201, 25.070782),
    new Coordinate(55.142289, 25.073899),
    new Coordinate(55.142068, 25.073812),
    }.ToArray();
var city = new City()
{
    Name = "JLT",
    border = new Polygon(new LinearRing(JLTCoords)) { SRID = 4326 }
};
```

This Polygon can be visualized on [Google Maps](https://www.google.com/maps/d/u/0/edit?mid=1EODatXqNYrAbtOdmmUnmJIXwCvBg0dPL&usp=sharing).

Subsequently, you can query the users within a region as follows:

```cs
DbContext.HealthcareProfessionals.Where(x => x.User.LastKnownLocation.Intersects(city.border));
```

## Design Ideas

Finally, we built a sample app to demonstrate the application:

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/01.login.svg>
<figcaption>2. App login</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/02.hcp-confirm.svg>
<figcaption>3. Healthcare Professional Confirmation Screen</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/03.symptoms-1.svg>
<figcaption>4.a. Individual symptoms flow part 1</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/04.symptoms-2.svg>
<figcaption>4.b. Individual symptoms flow part 2</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/05.symptoms-3.svg>
<figcaption>4.c. Individual symptoms flow part 3</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/06.symptoms-3.svg>
<figcaption>4.d. Individual symptoms flow part 4</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/07.hcp-list.png>
<figcaption>5. List of Healthcare Professionals</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/08.hcp-profile.png>
<figcaption>6. Healthcare Professional Profile</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-04-07-Assuring-equitable-health-care-for-everybody/09.hcp-call.jpg>
<figcaption>7. Video Call with Healthcare Professional</figcaption>
</figure>

### Related Articles
- [Spatial Data - EF Core](https://docs.microsoft.com/en-us/ef/core/modeling/spatial)
- [WGS 84: EPSG Projection](https://spatialreference.org/ref/epsg/4326/)


Assuring Equitable Healthcare for Everybody

In my early career, when I was asked for the first time by one of my seniors to review his code, I was honored but confused at the same time. What could a junior developer have anything to say about his senior’s years of experience writing code? What I did not understand at that time was that there is no best code. The best code is no code [1](https://blog.codinghorror.com/the-best-code-is-no-code-at-all).

All new lines of code added to your project should be built, tested, reviewed, debugged and later, if necessary load tested. Moreover, being the most experienced developer of a team should not mean that you are given carte blanche to add whatever solution you bring without having it approved.

Writing code can simply be put as proposing an optimal solution that is tightly driven by the level of understanding of the problem to be solved and the skills of the person solving it. Given that we are only humans, there is always room for mistakes, misjudgments and even simply ignorance. Hence, the importance of conducting an effective code review.

In this article, we will first lay out some best practices for a code review. Then briefly discus the specific case of a candidate code challenge review.

## Take your time but don't waste it

You should not review code swiftly, just as you should not review code for too long. Sometimes we are so overwhelmed by the pace reviews are requested that we are tempted to just do basic checks. Code review time should be included in the task estimation time. Don't fall into the **“this will be manually tested anyway”** trap.

Long review time can be avoided with a good task breakdown. Enforce division of the work into smaller tasks with specific logic to deal with. Those are easier to review than a full feature at once.

## Use a checklist

Having a review checklist will ensure your code consistency. Code will be evaluated with the same criteria, and you will make sure nothing is left out. The list should be kept up to date as your team experience grows.

![]({{ sitePrefix }}/assets/img/articles/2022-04-06-Best-practices-for-doing-code-reviews/spring-boot-java-checklist.png)

## Use automated code review tools

There are plenty of efficient and customizable code review and analyzer tools that your team can use to help assist the code review process [2](https://www.softwaretestinghelp.com/tools/top-40-static-code-analysis-tools).

![]({{ sitePrefix }}/assets/img/articles/2022-04-06-Best-practices-for-doing-code-reviews/sonar-cloud.png)

![]({{ sitePrefix }}/assets/img/articles/2022-04-06-Best-practices-for-doing-code-reviews/linting.png)

## Build it locally and test it when necessary

Sometimes, just looking at the code might not be enough to spot crucial errors. For example when reviewing a batch process, running the code build locally can be more telling than just doing visual inspections. Any findings at this point could however mean poor test code quality.

## How to conduct a code review?

Each team has its own way of organizing a code review. Most of us, I presume, are mainly just writing comments on GitHub or sending feedback messages over Slack.

But when time permits, do pair programming or schedule a review meeting with the developer. These methods are more effective, more interactive than just leaving comments, and are a good mentoring means.

Don’t give orders, give suggestions and always give the reason why you think it is a better way. This will help the developer understand better.

Don’t just focus on finding mistakes, positive comments are always welcome. When you come across that clever and magical piece of code that impresses you, give a thumbs up or write a compliment. It makes a developer feel appreciated and can lead to a better working relationship.

## What to look for when reviewing?

- Are the requirements fulfilled?
- Is the code following good design principles?
- How complex is the code? Is it readable?
- What about performance and scalability issues? Always remember that data is the most important part of your system, and you should always think about how things would perform at a large scale.
- What about security issues? Look for potential security threats such as SQL injection, XSS, personal data handling, etc.
- Is the code well commented?
- What about maintainability? Is the code DRY?
- Is the code style following your predefined guidelines?
- What about reusability, naming conventions, etc.?


## Code challenge review

Most of the statements above also apply when reviewing a candidate code challenge. Even though the problem to solve is usually simple, there are interesting points that can help you decide whether to move the candidate to the next hiring step.

Review criteria include, but are not limited to,

- the ability to understand the given requirements,
- the problem-solving approach,
- the core architecture and design of the proposed solution,
- the initial setup complexity: it should not be OS dependent and should run out of the box,
- the choice of technology stack used,
- the quality of code proposed, ...

One thing to always keep in mind when doing a candidate code review is that these code challenges are not a contest. A candidate should not be penalized for proposing a solution that is less impressive than another candidate code that you have reviewed before.

## Conclusion

A good code review will save you time and money by spotting potential problems before moving to production. Beyond that it can help you build a good team collaboration by sharing techniques and tips. Especially in these pandemic days, when most developers spend their time isolated, let's avoid just leaving comments on GitHub and take the time to meet for code review.

## References

[1] [The Best Code is No Code At All](https://blog.codinghorror.com/the-best-code-is-no-code-at-all)

[2] [TOP 40 Static Code Analysis Tools](https://www.softwaretestinghelp.com/tools/top-40-static-code-analysis-tools)

[3] [How to do a code review](https://google.github.io/eng-practices/review/reviewer)


Best practices for doing code reviews


Back in 2019, there was a presentation made at [Google India](https://youtu.be/CFIxLnqEifs?t=3443), where it was showcased how Indians can use a phone number, toll-free, and talk to Google Assistant in their language. The idea was just mind-blowing and too good to be true, as features like this would ensure folks who have only 2G phones around the world, not part of the internet, can suddenly have empowerment to take any internet services while talking to the Google Assistant using a simple phone call. When MonstarHacks 2022 edition was announced, Team Bowlers comprised of Saad Bin Amjad and Ahmed Naseef Chowdhury, we knew exactly what we would be doing!

The goal for this [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks) edition was to come up with an awesome product prototype over two days that can positively impact the lives of people, especially in the field of Life Science and healthcare. We registered and decided we will try to solve 2 challenges. Primarily to connect refugees with medical support in times of crisis (with a focus on low energy consuming solutions) and secondarily to assure equitable health care for everybody.

Our team strongly believes healthcare is a right for everyone, it should be especially protected for the most vulnerable groups in our societies. Unlike other commercial domains, like arts and business, we see a lack of innovation in medicare, as often systems are black-boxed for both caregivers and takers. So we wanted to have a solution where what works in other domains can be contextualized in the healthcare domain and used for similar meaningful impact. Through technology, we can impact people’s lives faster and efficiently, and medicare needs innovative ideas to do just that, to protect the most vulnerable folks, like senior citizens, expecting mothers, children, etc.

## Problem Statement

In Bangladesh, there is an ongoing Rohingya Refugee Crisis. There are now 860,000 Rohingya living in refugee camps in Cox’s Bazar, Bangladesh, over half of whom are children. The refugees still have inadequate water, sanitation, healthcare, education, nutrition, protection, and communication tools.

The recent Ukraine refugee crisis also put spotlight on the turmoils that can be faced even in developed countries. For the survival of refugees, the foremost need is to have a functioning medical health care system.

Our team believes in Tech For Good and wants to do our part to help ease the crisis, and make it a bit better than what it is right now.  

Apart from political will, the major risks/obstacles to connecting refugees with medical support are the overburdened medical workforce and lack of funded facilities, visible/invisible barriers for refugees to seek out help from proper authorities without fearing deportation.

![]({{ sitePrefix }}/assets/img/articles/2022-04-06-Building-Next-Generation-Applications-Using-Voice/team.png)

## Case Study: CareBooth

2G Voice-Based Medical Assistant For Refugees

{{ youtube-link="ihrWeQ0V7g8" }}

CareBooth, is a 2G Voice-Based Medical Assistant For Refugees. To get various assistance like asking for emergency medical help, registering for vaccination, learning about prevention of diseases and updates of local news, etc, one does not need any internet connection! They just need a 2G Phone that can make a call. A phone call giving a gateway to internet services to refugees of different age groups!

This solution enables refugees of different age groups to have greater ease of access to health info and systems from a technical, UX perspective, as everything is abstracted behind simple voice commands in their local languages.

The use of Intent - Entity Matching, Knowledge Bank, Natural Language Processing, and Machine Learning on the assistant (Bot Cognition) ensures efficient automation of logical processes in refugee medicare flow, meaning most of the tasks would now not require a human workforce, thus reducing constraints on the medical/community workforce. The care flows now will have Machine Learning and AI inclusion, which will be trained and verified by credible authorities, ensuring efficacy and scalability of the solution. For example, when it comes to pre-medical screening for a vaccination drive, instead of health workers going door to door, a simple phone call would help the refugees to fill up the form and also get registered.

Phone calls are an example of low consuming energy from the user’s end and automation, and the use of internet services generates equitable healthcare as it removes any sort of censorship or bias from the manual workflow.

Ease of access, since voice commands are quite UX friendly than multiple forms, flows on webpages. Also, the consumption of information becomes authentic (since peer-reviewed FAQs) as well as it is done in local languages (the ones that are available in NLP units).

In the future, for CareBooth to be really practically viable for refugees, we would need corporations that host AI / Bot Cognition to come up with reduced prices for NLP or sponsor it on the humanitarian ground for refugees, and phone companies to give the phone numbers toll-free for the refugees access, just as we have seen how it was rolled out in India with the help of a phone company.

Medical Agent intent and entity modeling is quite tough, as there are no easy, available resources up for developer consumption, so we would also require different stakeholders to make it on the design board while designing the conversations effectively.

## Technologies used
(including 3rd party frameworks and services):

- [Google Cloud Console](https://cloud.google.com/gcp/)
- [Actions On Google](https://developers.google.com/assistant)
- [Firebase](https://firebase.google.com/)
- [Firestore](https://firebase.google.com/products/firestore?)
- [DialogFlow](https://cloud.google.com/dialogflow/docs)
- [DialogFlow Phone Gateway](https://cloud.google.com/dialogflow/es/docs/integrations/phone-gateway)
- Node.js Express Server
- HTML
- [Whimsical](https://whimsical.com/) for diagrams

Conversational Design and Basic Architecture can be found [here](https://whimsical.com/carebooth-FAQxXgCP5hqtpXbofnC2tK).

![]({{ sitePrefix }}/assets/img/articles/2022-04-06-Building-Next-Generation-Applications-Using-Voice/assistant.png)

Voice applications are the next generation of applications, as billions of people who are still disconnected from the internet can avail internet services in 2G ways. Given the huge success of chatbots in CRM, it was a matter of time before voice would be adopted in the 4th Industrial Revolution. We were proud to spend our weekend creating something that can help ease the current refugee issue by empowering the refugees to avail of internet services via their 2G phones and not be dependent on internet connectivity or data packs.

_Article Photo by [Nastya Dulhiier](https://unsplash.com/photos/Ihi56-Qs39U)_


Building next generation applications using voice

It’s been almost 6 months since I started working at Monstarlab. I want to share with you what it’s like “being a Tech Lead at Monstarlab” and hope that my insights and personal experiences will benefit anyone who has an interest in working at Monstarlab.

## Diversity

I am sure many people working at Monstarlab share a similar view on this.  

With Monstarlab offices all over the world, project teams are built across the globe and various languages other than Japanese are used to communicate. It’s inspiring to work in an environment without fixating on Japanese values and exchange ideas with people from different regions and countries.

And to better connect with Monstars - Monstarlab members - from other teams and countries, we are working on a “Culture Book” in which company culture is shared. The purpose of this platform is to build an organization and development teams in which members voluntarily build working relationships by acknowledging their strengths and make full use of those strengths.

On the other hand, language differences could sometimes be a challenge. Generally, Japanese and English are mainly used but the company supports English/Japanese learning through the benefit packages they offer so for anyone looking to improve their English/Japanese skills, it’s a great opportunity.

## Job of a Tech Lead

In a nutshell, a Tech Lead is like a midfielder in soccer (or football.) More specifically, the biggest responsibility of a Tech Lead is assessing and selecting technology and communicating with team members of various functions. Actually, the scope of responsibility of a Tech Lead varies by project. The following image is an example that will give you an idea of what the job and responsibilities could include. 

![]({{ sitePrefix }}/assets/img/articles/2022-03-18-Work-at-ML/image01_en.jpg)

If you excel in coding, you may be in charge of implementation; if architecture is your speciality, then you could be creating the specification. A lot of times, Tech Lead acts as the control tower to ensure the project moves forward smoothly from a technical aspect. It’s a critical role in charge of discussions with clients and deciding specifications which sets the foundation for the key technology in the upstream process. This would be an exciting role for anyone who is looking into technological support from a business perspective or creating better products with new technology.

## Offshore development

Monstarlab has offshore offices within the group and proactively engages them in projects.  
I was anxious in my first Tech Lead role, but with the support of an assigned communicator in the project team who acted as an interpreter, the project went smoothly. Offshore development is a way in which high-quality products could be provided at a low cost, so we develop from a global perspective. And this is one of the contributing factors to the significant number of requests we receive from clients to work on projects together.

## Working with clients

At Monstarlab, there are many opportunities to work directly with clients.

In a corporate digital transformation project, our involvement sometimes begins with building a business strategy. There are many opportunities to propose new technology and take on the challenge to find a solution for a problem.   
“Do as you’re told” work hardly exists; you are expected to make technical suggestions and be capable of quick learning. While enjoying freedom in the workplace, you experience more decision making in a broad spectrum. And because of the nature of the job, you have the opportunity to encounter various industries and acquire different technological skills. Every time I work on a project, I see my abilities and skills expand and that’s really exciting.

## Full remote work (Work from anywhere in Japan)

Tasks and communication can be accomplished while working fully remote. There are a number of Monstars who don’t work at the main office. If we need to speak to each other, we simply huddle on Slack or use Google Meet. It’s great to be able to work and take breaks at my own discretion.

## Great people, open communication

There’s an openness in communication between workers and that creates a healthy environment which allows you to talk to your superior if something is on your mind.

There’s also a mentoring program that helps you get your concerns off your mind, whether it’s about work or life in general. I received helpful advice on managing workload and skill enhancement which helped me figure out the work-life balance and assess my career plan.   
For issues that come up on the job that you can’t figure out on your own, there are Slack channels dedicated to the specific topic where you could ask questions and Monstars across the globe provide you with thorough tips and advice.

## Express your opinion from day 1

The company encourages Monstars to thrive which creates an environment that allows everyone to freely express their opinions and incorporate their ideas. And there are opportunities where you can dive into discussions and unleash your potential in many areas.

## Family-friendly workplace

Monstarlab is very generous to anyone raising children.  
The company implements the Discretionary Labor System which enables Monstars to manage our family life with flexible working hours so we could manage work schedules according to our personal situations. I was startled to see both men and women taking childcare leave. It certainly reflects the needs of our times and it wouldn’t have been possible without the diversity the company achieves.


# Thanks for reading!

I hope this gave you a better picture of what Monstarlab is all about; a look inside the company and an idea of what it’s like to work at Monstarlab.   
Monstarlab is looking for talent who share the mission to “Empower talent everywhere to engineer awesome products, services and ecosystems; building a brighter world for us all.” If you are interested, visit Careers on our website to find out more information. 


## Reference

- [Monstarlab Japan hiring page](https://www.join.monstar-lab.com/)

_[Article Photo by fauxels](https://www.pexels.com/@fauxels)_


Working as a Tech Lead at Monstarlab


## What was the issue?

Crash reporting is something that's hugely important for all our apps. It allows us to easily find issues within our apps and can give us helpful advice on where to fix them. For our crash reporting, we use [Firebase Crashlytics](https://firebase.google.com/products/crashlytics). For the crash reporting to work in Crashlytics, it needs dSYM files (debug symbol files) but our issue was our application has bitcode enabled. 

Bitcode was first introduced by Apple with the release of Xcode 7, it allows Apple to re-optimize your app binary to tailor the app to the capabilities of the device used. For our particular use case, our application had WatchOS support and for both WatchOS & tvOS apps, bitcode is required, meaning simply turning it off wasn’t an option. And hey, it’s a cool feature that we didn’t want to turn off anyway. [You can read more about Bitcode here](https://help.apple.com/xcode/mac/current/#/devbbdc5ce4f).

With bitcode enabled, the dSYM files only become available to you after your app is done processing on App Store Connect. Previously we were downloading these files manually from App Store Connect and then manually uploading them to firebase, which as you can imagine, was a very tedious task.

We wanted to find a way to automate this within our current CI using Bitrise so we wouldn’t ever have to suffer that tedium again!

## Using Fastane to solve it

Currently we use [Fastlane](https://fastlane.tools) mostly to handle the signing of our apps, but it’s proved our main saviour here also. 

These are the steps required to upload your dSYM files automatically using Fastlane & Bitrise together. Here we go…

## 1. Add Fastlane to your project

First of all, you're going to need to install Fastlane and add it to your project. This is as easy as just installing it and running `fastlane init` in the terminal at the root of your project. Fastlane may ask you what lanes you might want to setup automatically but you can just select a custom setup. The main result should be it will generate a folder in the root of your project called "Fastlane" with two files; `Appfile` & `Fastfile`. Don't worry too much about whats in the files as we will update that. If you see this result, congratulations! It worked!

```
fastlane init
```
![Fastlane setup image]({{ sitePrefix }}/assets/img/articles/2022-03-03-Automating-The-Upload-Of-iOS-Firebase-DSYM-files/fastlaneSetup.png)

If you need more help getting Fastlane setup in your project [see here](https://docs.fastlane.tools/getting-started/ios/setup/)

## 2. Getting the Firebase upload script where you need it.

The Firebase SDK includes a script that we can use to upload the dSYM files. This is what we are going to use to upload them using Fastlane…

Side note; If you’re using Cocoapods, you wont have to do this or specify the binary path in your Fastfile. The script is already present in the Crashlytics pod folder and fastlane can find it. If you go this route, make sure to either commit your pod dependencies into your repo or install the pods in your Bitrise workflow before you run the fastlane step.

1. Add a folder to the root of your project and call it "scripts".

2. Next navigate to where your Firebase SDK is located. Then go into the folder Crashlytics. If using SPM, your Firebase SDK should be able to be located via right clicking and selecting "Show In Finder" on the package from within Xcode.

3. Here you should find the script "upload-symbols". Copy/paste this script into the scripts folder you just created in step 1. Note; you shouldn't need to add these or a reference to them into your Xcode project. Being in your project finder/repository is what we want.

## 3. Updating the `Appfile`

Now let's configure our `Appfile` as required. Open that file up from within your "Fastlane" folder.

We don't need to add much information here, we just need to confirm our platform and our team id. This team id relates to your App Store Developer team and can be found in your account details [there](https://developer.apple.com/account).

Then for each environment your project has, add some code like the following, specifying your environment in the lane name and which app identifier that environment uses.

```
  for_lane :refresh_dsyms_prod do
    app_identifier 'com.Monstarlab.myExampleApp.Prod'
  end
```

In the end you should have done it for each environment you wish to support and your app file should look something like this

```
for_platform :ios do
  team_id '69ABZ3N123'
  for_lane :refresh_dsyms_staging do
    app_identifier 'com.Monstarlab.myExampleApp.Staging'
  end
  for_lane :refresh_dsyms_prod do
    app_identifier 'com.Monstarlab.myExampleApp.Prod'
  end
end
```

## 3. Configuring your `Fastfile`

Next up is to configure our `Fastfile` with the lanes we need to run to do this job.

We're going to show this in reverse as it will be easier to explain. Your `Fastfile` will look something like this in the end. In this example, we are supporting the upload of two different environments (Firebase projects) dSYM uploads.

```
update_fastlane

default_platform(:ios)

platform :ios do
  desc "Downloads DSYM Files from ASC and upload them to firebase"
  lane :refresh_dsyms_prod do
     download_dsyms(version: "latest")
     upload_symbols_to_crashlytics(
      gsp_path: "./App/Resources/Firebase/GoogleService-Info.plist",
          binary_path: './scripts/upload-symbols'
    )
     clean_build_artifacts
   end
   lane :refresh_dsyms_staging do
     download_dsyms(version: "latest")
     upload_symbols_to_crashlytics(
      gsp_path: "./App/Resources/Firebase/GoogleService-Info-Staging.plist",
          binary_path: './scripts/upload-symbols'
    )
     v
   end
end
```

The first few lines just assure to update fastlane if required and defines the platform.

Then below that, you can see each lane is defined with the same names we used in our Appfile. Fastlane uses these names to relate them together to use the correct Bundle ID for the related lane. 

Let's look at the three steps in our lanes.

1.
```
download_dsyms(version: "latest")
```
 This step downloads the dsym files from App Store Connect. Currently we're only downloading the latest available builds files. You can leave this parameter off and it will download the files for every version available on App Store Connect but beware, if you have a lot of builds, this could take a while! There are some other options for specifying specific build versions or dates.
 
  You can find out more info on the action and it's options [here](https://docs.fastlane.tools/actions/download_dsyms/)

2. 
```
upload_symbols_to_crashlytics(
      gsp_path: "./App/Resources/Firebase/GoogleService-Info-Staging.plist",
          binary_path: './scripts/upload-symbols'
    )
```
Here we are uploading the symbols we just downloaded to Firebase Crashlytics. We need to specify the location of the `GoogleService-Info.plist` file within our repository. This is used so we know which Firebase project to upload them to. 

You will also need to specify the path to that script with `binary_path`. As you can see, it points to the `scripts` folder we created earlier.

More info on this fastlane action can be found [here](https://docs.fastlane.tools/actions/upload_symbols_to_crashlytics/).

3.
```
clean_build_artifacts
```     
This then simply cleans all the dSYM files we have downloaded.

More info [here](https://docs.fastlane.tools/actions/clean_build_artifacts/).


## 4. Setting up Bitrise

Ok, that is all that is needed in terms of Fastlane setup in our project. Now let's see how we can run those Fastlane lanes daily using Bitrise to keep our Firebase crash reporting up to date and returning useful crash reports.

For the sake of keeping this blog size less than the size of a novel, we assume you have your Bitrise project already set up and are already using it to upload your application to App Store Connect using the `deploy-to-itunesconnect-deliver` workflow with API Keys.

1. Go into your projects bitrise.yml and add this workflow

```
deploy-dsyms:
  after_run:
  - prepare
  - dsym-upload
```

What this is doing is creating a workflow called "deploy-dsyms". It then runs two flows;
`prepare`; which activates required ssh keys & clones our project. You'll most likely already have a workflow that does something like this.
`dsym-upload`; is then the workflow that handles the upload

2. Add this second `dsym-upload` workflow to your birise.yml

```
dsym-upload:
    steps:
    - fastlane@3:
        inputs:
        - connection: 'off'
        - api_key_path: "$BITRISEIO_ASC_API_KEY_URL"
        - api_issuer: "$ASC_ISSUER_ID"
        - verbose_log: 'yes'
        - work_dir: "./"
        - lane: refresh_dsyms_prod
    - fastlane@3:
        inputs:
        - connection: 'off'
        - api_key_path: "$BITRISEIO_ASC_API_KEY_URL"
        - api_issuer: "$ASC_ISSUER_ID"
        - verbose_log: 'yes'
        - work_dir: "./"
        - lane: refresh_dsyms_staging
```

What is happening here is it is running a Fastlane workflow, twice for each of our environments we want to support (Staging & Production). You will have to add a flow for each of your environments.

You may notice it looks very similar to the `deploy-to-itunesconnect-deliver` workflow. It requires the `api_key_path` and `api_issuer` just the same as that. 

The two important differing properties are;
 - The `work_dir` which should just be the root of your project
 - The `lane` which should match the name of the lane you specified in your Fastfile for that environment.

## 5. Automating your workflow

OK, now we 
- have our fastlane lanes all setup to do the job 
- have our bitrise workflows ready to run 
- call them

All that is left is for us to schedule them. 

As we need to wait for the app to finish processing on App Store Connect before these files are available, we decided we were just going to run this daily late at night. We didn't want to take our company's limited Bitrise spaces as these could be required by other developers throughout the day to upload builds etc and waiting for the app to finish processing in an upload workflow would eat up a lot of unused time.

If you go to your projects Builds page in Bitrise, you can select on the right hand side to "start/schedule a build". Select this.

![Schedule Button image]({{ sitePrefix }}/assets/img/articles/2022-03-03-Automating-The-Upload-Of-iOS-Firebase-DSYM-files/bitriseButton.png)

You can then select which days you want the workflow to run and at what time. We chose to run them on weekdays at 11pm as we rarely upload builds on weekends and 11pm is a quiet time for us. 
You then select which branch you are using mainly to upload builds from but this shouldn't really matter. As long as that branch has the fastlane setup in it, we're all good. Then select your `deploy-dsyms` workflow as the flow you wish to run and select "Schedule Build".

![Schedule Build image]({{ sitePrefix }}/assets/img/articles/2022-03-03-Automating-The-Upload-Of-iOS-Firebase-DSYM-files/scheduleABuild.png)

Thats it you're all done! Bitrise will now download and upload your DSYMS at the times you just set.

### Conclusion

Hopefully this tutorial will help you automate the upload of dSYM files to Crashlytics and save you those annoying 5 minutes whenever you want to deduce why your app is crashing.

####

## Related Articles:

* [Adding missing dSYMs to Crashlytics with Fastlane](https://blog.bitrise.io/post/adding-missing-dsyms-to-crashlytics-with-fastlane)
* [Bitcode & App Thinning](https://help.apple.com/xcode/mac/current/#/devbbdc5ce4f)

_Article Photo by [Firebase](https://firebase.google.com/products/crashlytics)_


iOS: Automating the upload of DSYM files to Firebase using Fastlane & Bitrise

Introduction to GPUs with OpenGL


In this article we will have a look at testing in an Agile process, with reference to the ISTQB Foundation Level Agile Tester (*1) syllabus, and will be covering the following three topics:
1. The differences from testing in a Waterfall process
2. Improving the efficiency in testing
3. The dilemma between Agile Testing and Independence

*1 ISTQB (International Software Testing Qualifications Board) certification for Agile testing

## The differences from testing in a Waterfall process
#### Testing in a Waterfall process
In a Waterfall process, each process of requirements analysis, design, development, and testing proceeds to the next process after the deliverables are fixed.

In terms of testing, the basic principle is to start component testing, follow up by integration testing, and upon completion begins system testing.

As shown in figure 1, there is a co-relation between each design-to-testing process. For example, once the Requirement Design is completed, then used to perform Acceptance Testing. The same goes for System Design to System Testing and so forth.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-10-What-is-QA-in-an-Agile-Process/fig1_vmodel-en.jpeg>
<figcaption>Fig.1 V-model</figcaption>
</figure>

The client can only confirm the product when it reaches the acceptance testing stage. Depending on the scale of the project, it is not uncommon for the entire process to take more than a year.

### Agile: testing is repeated in a short period of time.
In Agile development, a working product is released every **short development cycle, iteration,** of a few weeks and is improved with feedback.

Testing is also conducted within each iteration. In order to complete the process from the test design to the test execution in a short period of time, **high efficiency** is required.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-10-What-is-QA-in-an-Agile-Process/fig2_agile-model.jpeg>
<figcaption>Fig.2 Agile Model</figcaption>
</figure>

### Test Levels for Agile Testing
While Waterfall has clearly defined test levels for integration testing, system testing, etc., Agile testing is a little different. The table below is a summary of the syllabus description from the ISTQB Foundation Level Agile Tester with a few of my own interpretations.

Test Level|Executor|Execution Timing|Execution Content.
--|---|---|--
Unit Testing|Developer|In Iteration|Component Level Verification
Feature Validation Testing|Developer or QA|In Iteration|Confirmation that user story acceptance criteria are met
Feature Validation Testing|Developer, QA and Business Stakeholder|In Iteration|Verify that the feature is suitable for use
System testing|QA|Outside of iteration|Functional and non-functional testing with user stories as test basis(*2)
Acceptance testing|Users|Each iteration or after all iterations are completed|Alpha/Beta testing, user acceptance testing, etc.

It is not necessary to implement all of the above without fail, but rather, to consider and plan the level of testing according to the needs of the project.

In some cases, **regression testing**(*3) may be conducted prior to a release by building up the test cases conducted in each iteration.

*2 Test basis: The documents or information used as the basis for test analysis and design.

*3 Regression testing: Testing to verify that changes to a part of a program do not have an unintended impact on the system.

## Improving the efficiency in testing
### Exploratory testing: Test technique that can easily adapt to specification changes
One of the "Twelve Principles of Agile Software" is as follows:

> "Welcome changing requirements, even late in development." - [The principles behind the Agile Manifesto](https://Agilemanifesto.org/iso/ja/principles.html)

In Waterfall, specification changes in the late stages of the development cycle are unacceptable, but in an Agile development cycle, changes are acceptable as long as they increase the value of the product. This requires a testing strategy that can easily adapt to changes.

When specification changes occur in the late stage of development, we need to revise the test design and redo the tests. In the worst case scenario, all the test cases you have worked so hard to create may be wasted, resulting in unnecessary costs.

**Exploratory testing** is an effective testing technique for such situations.

Traditional **script testing** uses test cases that specify test procedures, expectations, etc., whereas exploratory testing does not use test cases.

Exploratory testing, however, is slightly different from ad-hoc testing or monkey testing, which is perform blindly.
The table below summarizes the differences between script testing and exploratory testing.

Test technique|Test case|Pros|Cons  
--|---|---|--
Script testing|Yes|・Slight individual difference in results.<br>・Coverage is ensured.|・Large rework in case of specification change.
Exploratory testing|No|・Can detect bugs efficiently by experience.<br>・No man-hour required for test case creation.|・A certain level of skill required for executors.<br>・Difficult to ensure coverage.

There are several approaches to exploratory testing. We, at TestarLab, often prepare a document called a **test charter**, which contains testing guidelines, and execute tests according to it. Using the test charter allows us to give hints to less experienced testers and also allows for quantitative analysis.

Exploratory testing seems to be a good fit for Agile development, but it also has its disadvantages, as shown in the table above. Therefore, it is necessary to distinguish between script testing and exploratory testing by using script testing for important functions.

### The necessity of test automation
In a normal Agile development flow, regressions are more likely to occur due to frequent code changes; therefore, the importance of **regression testing** increases.

On many occasions, regression testing involves the usage of prior test cases in the past and is repeatedly executed. Thus, automated regression testing is more than likely to reduce the workload. Another benefit from automated test is that this allows QA to **concentrate on new feature testing or other changes**.

In addition, running automated tests at the timing of a pull request to a deployment, defects are usually found earlier.

In conclusion, knowledge about test automation is necessary for QA in an Agile team.

## The Dilemma between Agile Testing and Independence
Generally speaking, the more independent a QA team is, the more efficiently bugs can be detected. In an environment where they are separated from the developers, they can evaluate the product from a more objective and unbiased point of view.

On the other hand, in Agile development, the QA team works in collaboration with business stakeholders and developers in an Agile team to improve the quality of the product's process. There is a trade-off for being an independent QA.

### The ISTQB approach
How do you maintain independence while collaborating within an Agile team?

The ISTQB Foundation Level Agile Tester syllabus describes another approach to this dilemma:
>"A third option is to have an independent, separate test team where testers are assigned to Agile teams on a long-term basis, at the beginning of the project, allowing them to maintain their independence while gaining a good understanding of the product and strong relationships with other team members."

As a division of roles, QA within an Agile team is responsible to understand the product and deepening the relationships with all team members, while the QA outside the Agile team is responsible for iteration-independent activities such as automation and non-functional testing.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-10-What-is-QA-in-an-Agile-Process/fig3_qa-team-en.jpeg>
<figcaption>Fig.3 QA inside and outside of an Agile Team</figcaption>
</figure>

As a QA in an Agile team, certain abilities are still required, such as being able to think objectively and critically in any situation, otherwise, having a QA in an Agile team would be meaningless.

## Summary
As for the characteristics of Agile testing, I hope the following are clear to you through the article.
- Compared to Waterfall, there is no uniform definition, and project-specific planning is required
- Use of exploratory testing and test automation improves efficiency
- Be careful not to compromise the independence of QA

Most of the projects in which TestarLab participates are Agile-type development projects. There are other development models besides Waterfall and Agile, but our goal is to provide optimal quality assurance in any development model.

## References
- [ISTQB Foundation Level Agile Tester](https://www.istqb.org/certification-path-root/Agile-tester.html)
- [ISTQB Foundation Level 2018](https://www.istqb.org/certification-path-root/foundation-level-2018.html)

The images used in this article may not be reproduced without permission.

## What is "TESTAR LAB"?
TestarLab is a new service specialized in testing the quality of application functions and services. We offer cost-optimized and speedy proposals based on our abundant human resources in 29 cities in 17 countries and our extensive network of domestic and overseas partner companies.
Testarlab provides an independent third-party verification team that optimizes the cost and detection efficiency for customers who are experiencing quality issues within their services, as well as customers who frequently upgrade versions, which makes testing costly and time-consuming.

_Article Photo by [Patrick Perkins](https://unsplash.com/photos/ETRPjvb0KM0)_


What is Quality Assurance in an Agile Process?


At the end of 2021, we attended Monstarlab's internal hackathon [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks), where each team built a project on the theme of 3 of the [17 UN Sustainable Development Goals](https://sdgs.un.org/goals).
1. Gender equality
2. Good Health and Well-being
3. Quality education


Each of the goal is quite diverse, and there are lot things yet to be done under each of the goal. After hours of team discussions, we picked gender equality as our main focus, which is a very sensitive topic.

### Female Feticide ###

It's shocking that, when most of the people hear this word, it seems like a third world problem, but surprisingly it's not a problem only in third world.

##### Problem study

In our study we found that:
1. Female feticide is a very diverse and complex topic.
2. From place to place and time to time the cause changes drastically.
3. In some places it's becoming a problem, where historically we don’t have any data.
4. The whole internet seems to be a read-only platform for this particular issue.
5. It seems like a taboo topic inside some societies.
6. In some cases where `Right to have abortion` seems to be a symbol of gender-equality, then particular topic is somewhat conflicting.
7. Whereas this practice is not a disgrace to females, but also a threat to humanity, and collective initiatives are totally absent.

#### The proposed solution

In the modern society from the nation election process to household oven everything is designed and improved based on data. In our proposed solution we want to gather as much as data possible. And in the whole process three major components are involved:
1. Collection of data
2. Process of the data
3. Actionable to-dos

#### Step 1: Collection of data
In the collection phase we will focus on in these key areas:
- From whom we will collect this data?
- Is there a priority that should be set on the data?
- How can we ensure data privacy and not reveal or expose the identities of the parties involved?
- In what frequency we will collect data?


#### Step 2: Process of data
In the data processing part we decided to make the outputs in the form of:
- Geological hotspot.
- Clustering based on root causes.
- Organisations that are currently working inside each of the locations (or if they even exists or not).
- Historical time periods.

That will help us to understand:
- External factors/events that can hugely affect this problem.
- Historical patterns.

#### Step 3: Actions
So the actions should be derived from data analysis. These valuable outputs should be passed to the government organisations, NGOs and other social welfare organisations.

### Proposed Project Title: Womb Equality (WE)

#### Backend Data Sources ####
- Doctors (Share their experiences and raise alarm of a possible of forced abortion)
- Victims (Can share mental conditions and reasons)
- Witnesses (Someone who witnessed an forced abortion)
- General Public (With their perception of this problem)

The backend system architecture would look like this:

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/backend.png>
<figcaption>Backend System Architecture</figcaption>
</figure>

### Frontend design idea ###

We built a sample Android app and demonstrated how data will be collected.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/01.splash.jpg>
<figcaption>1. App opening splash screen</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/02.roles.jpg>
<figcaption>2. Role selection</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/03.campaigns.jpg>
<figcaption>3. Recent posts and campaign news</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/04.inputs.jpg>
<figcaption>4. Data input Section</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/05.submit.jpg>
<figcaption>5. Post submit screen</figcaption>
</figure>

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2022-02-03-Solving-Gender-Inequality-with-data-driven-platform/06.confirmation.jpg>
<figcaption>6. Submit Confirmation</figcaption>
</figure>

### Conclusion

And finally let's be honest. Female foeticide is a century old problem, and it’s not going anywhere anytime soon. In the aftermath of Covid 19, history tells us that it will make a strong comeback. If we are not prepared, then It will struck us hard and wipe all the achievements that world has made in the last several decades.

No single platform or initiative can prevent and eradicate female feticide from this world, we need collective initiatives, fund and cooperation among all the countries.

Until this is done, the Gender Equality will always remain as a chapter inside the book and the dream will never be a reality.

Without any doubt, technology and data driven approach can greatly help us to achieve this goal.

_[Article Photo](https://crealet.com/2021/06/we-invest-in-the-future/)_


Solving gender inequality and saving lives with data driven approach


Some years ago, when storing data, we mainly used RDBMS (Relational DataBase Management System) such as MySQL and PostgreSQL. But recently, we started using [Firestore](https://firebase.google.com/products/firestore) more. Although the role of storing data is the same, the usage and design concept of Firestore is very different from RDBMS.

In this article, we will check the limitations of Firestore, and what are the differences from RDB.

## No aggregate function

In RDB, it is relatively easy to perform `COUNT(*)` or `SUM(amount)` for hundreds or thousands of records.  
However, this is not practical with Firestore.

For example, suppose we have a screen that displays a list of 20 slips, each of which has 10 details attached to it.  
If we want to display the "total amount" in the list, we can get the result quickly in RDB by doing `SUM` in a subquery.

On the other hand, if we want to do the same thing with Firestore, we need to load 200 documents on the client-side and aggregate them as a "process". This causes a problem in terms of cost and performance.  
In such a case, we update the "total amount" of the slip data when adding or updating the details data, and refer only to the slip data when displaying it on the screen.

For other constraints as well, it is necessary to think in terms of creating and updating data with reading situations in mind at the time of writing data.

## Not good at searching

To search with two or more conditions, we need to create an index.  
In addition, some queries cannot be executed even if any indexes are created.

> In a compound query, range (`<`, `<=`, `>`, `>=`) and not equals (`!=`, `not-in`) comparisons must all filter on the same field.

[Perform simple and compound queries in Cloud Firestore | Firebase Documentation](https://firebase.google.cn/docs/firestore/query-data/queries?hl=en)

For example, we cannot do a range search on two columns, such as "Created after A, modified after B". Also, we cannot do a range search and sort with two different columns.

We need a workaround, such as changing the screen specification or using a different search column to perform an exact match search.  

For example, in the above example, if we can change the specification to "search data that was created in a specific month and updated after B", we add a new column that is the year-month of created (the string "yyyyMM"). Therefore we can change one of the conditions to an exact match.

## No full text search

If we want to do a full-text search, such as searching for posts that contain a specific string, it is common to use an external service such as Algolia.

> Cloud Firestore doesn't support native indexing or search for text fields in documents.
> Additionally, downloading an entire collection to search for fields client-side isn't practical.

[Full-text search | Firebase Documentation](https://firebase.google.cn/docs/firestore/solutions/search?hl=en)

We can also use Firebase Extensions called "Search with Algolia" to seamlessly sync our Firestore data to Algolia.

## No "offset"

In RDBMS, paging can perform by specifying "offset".  
In Firestore, "limit" can be specified, but "offset" cannot be specified.  
Therefore, it is difficult to support specifications such as loading by page number.

On the other hand, loading continuous data such as infinite scrolling can be easy.

## Cannot update or delete multiple data by conditions

It is not possible to update all the flags of the data that match the condition or delete all the related data when the parent data was deleted.  
It is necessary to retrieve the data by conditions and then update or delete them individually.

There are functions such as transactions and batches, it is possible to update and delete data atomically.  
However, only 500 writes can be done in one transaction.

> Maximum number of writes that can be passed to a Commit operation or performed in a transaction 500

[Usage and limits | Firebase Documentation](https://firebase.google.com/docs/firestore/quotas?hl=en#writes_and_transactions)

## Cannot apply security rule to per-field

When using RDBs, an API is usually implemented between the client and the DB.  
Therefore, it is common to implement read restrictions as "processes" on the API side.

In the case of Firestore, read restrictions are defined as a security rule, it is common for clients to refer directly to Firestore.

By setting the security rule, various restrictions can be applied to each collection.  
However, it is not possible to set restrictions such as "only certain fields can be viewed" within a single data collection.  
Therefore, if there are two types of user information, one for public and the other for private, it is recommended to manage them in separate collections.

## Cannot write frequently

> Maximum sustained write rate to a document 1 per second
> Sustaining a write rate above once per second increases latency and causes contention errors. This is not a hard limit, and you can surpass the limit in short bursts.

[Usage and limits | Firebase Documentation](https://firebase.google.com/docs/firestore/quotas?hl=en#soft_limits)

As mentioned earlier, aggregation by queries is not possible, so to display the number of "likes" on a post, it needs to be counted up as an integer.  
However, "likes" may be done for a single post from many users, it is likely to be limited to the soft limit above.  
An answer is available on the official page.

> To support more frequent counter updates, create a distributed counter.
> Each counter is a document with a subcollection of "shards," and the value of the counter is the sum of the value of the shards.

[Distributed counters | Firebase Documentation](https://firebase.google.com/docs/firestore/solutions/counters?hl=en)

Simply put, by storing the data in 10 counter documents, the soft limit is reduced to about 1/10. And by summing them when loading, the loading cost is reduced.

## Summary

Firestore has a lot of advantages, such as relatively low cost of operation and easy implementation of real-time change detection.

However, the direction it aims to take and the situations in which it excels are different from those of the RDBMSs.  
I think it is important to understand the limitations and use them in the right place.

_[Article Photo by Jan Antonin Kolar](https://unsplash.com/photos/lRoX0shwjUQ)_


What you need to know when using Firestore


### Gender is a social construct

Gender and sex are two different things. From a very young age, we see different roles played by our father and mother. We see society treating a boy and a girl differently. Children are told not to play certain games or wear certain dresses based on their biological sex. A child learns to differentiate between a man and a woman and associate different gender roles with them. Some of those associations are biological truths, but a lot of them are false biases that the child inherits from the environment and society.

### Language plays a vital role

Language shapes our thoughts. We think about things through how language means things. Language has a direct influence over how people of a certain language think. How we speak and what we read affects how we think and how we interpret the world around us. Most languages commonly use the male gender as default, so our collective identity is understood as masculine. Certain languages associate different levels of respect with a different gender.

### Let's see an example
<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Gender-Equality-Detection-in-Written-Text/image_1.png>
</figure>

### Reducing gender inequality by reducing gender bias in language

Language is biased. And that bias has an impact on people. As there is an association between a language and thought processing of the language speaking people, reducing negative biases will create an equal society.

Reading and writing gender-inclusive content can have far-reaching effects in creating an inclusive world. Detecting gender bias in a language can help us to generate content that is not biased against a particular gender. We can use algorithms to detect and reduce gender biases on a large scale all over the internet.

### Educate about gender bias and inequality

Educating the population is very very important. A huge number of people in our country, Bangladesh, have no idea about gender inequality. They are very used to seeing gender roles played generation after generation.

Information needs to be spread to everyone. Good content needs to be created. As everyone has a mobile phone nowadays, we can take advantage of the digital power we have to spread information and education. Creating an online platform in the form of a mobile app or web app will be most effective.

### Our hackathon solution

#### A cloud service to detect gender bias in text

Our team participated in Monstarlab's hackathon, [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks), with the idea to build a cloud service to detect gender biases in written text and fix it with gender-neutral words. Below are some of the roles the service is supposed to do:
1. Detect gender-biased words
2. Detect explicit and implicit gender bias, gender stereotypes using NLP and ML techniques
3. Detect gender-related misinformation
4. Fix with correct word/sentence


<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Gender-Equality-Detection-in-Written-Text/image_2.png>
</figure>

### A platform to teach gender equality

An online learning platform based on mobile/web to teach people about gender inequality, gender bias in language, gender-related common misconceptions, false gender stereotypes, etc. The platform also shows news/blogs on gender empowerment to inspire gender equality.

### The sky's the limit but we are constrained by time and resources in the hackathon

Due to time and resource constraints, we could not build as much as we dreamed about our project. Below are the functionalities we built:

1. A backend service to detect gender-biased words and suggest gender-inclusive ones
2. A proof of concept Google chrome extension that highlights all gendered words in any webpage
3. A mobile editor to write gender unbiased paragraphs using our backend service
4. A mobile app prototype showing bias check editor and a learning platform

### Future Direction

Our cloud bias detector service can easily be extended by adding NLP, ML modules to detect more complex gender bias, gender stereotypes, implicit gender biases. We can extend our chrome extension to be like full-fledged [Grammarly](https://www.grammarly.com/) for gender bias chrome extension.


Header Photo by [Alex Marchenko](https://unsplash.com/@alex_marchenko)


Gender Equality Detection in Written Text


Machine learning (ML) is expected to make the hunt for new health care quicker, cheaper, and more effective. It could be taught to identify concerning trends quickly, while also improving its models over time and potentially proposing courses of action.

> ### Highlights
> * The reduction of child mortality is reflected in several of the United Nations' Sustainable Development Goals and is a key indicator of human progress.
> * The UN expects that by 2030 countries will end preventable deaths of newborns and children under 5 years of age, with all countries aiming to reduce under‑5 mortality to at least as low as 25 per 1,000 live births.
> * Parallel to the notion of child mortality is of course Maternal Mortality, which accounts for 295 000 deaths during and following pregnancy and childbirth (as of 2017). The vast majority of these deaths (94%) occurred in low-resource settings, and most could have been prevented.

ML is a computational field that over the last decades has been constantly showing its potential and gained relevance and importance in multiple disciplines, one being Health Care. There is a large number of scientific studies demonstrating and showing how ML can contribute to significantly improving aspects related to the health and wellbeing of groups and individuals. Ending preventable maternal death still remains at the top of the global agenda. ML can be trained to interpret and learn from real-time data such as fetal heart rate signals, contractions, and vital indicators. Mothers at risk of morbidity during the intrapartum and postpartum periods might be diagnosed by applying predictive analytics using ML.

### Introducing Maa
<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Predicting-Maternal-Morbidity-using-Machine-Learning-Techniques/logo.png>
  <figcaption style="text-align: center;">
  	Maa Logo
  </figcaption>
</figure>


As part of the [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks) 2021, our team decided to tackle the [3rd UN Sustainable Development Goal - Good Health and Well-being](https://sdgs.un.org/goals/goal3). Maa is the One-Stop service for Pregnancy and Childbirth. It is responsible for collecting health records and diagnosis reports from patients using Mobile apps which will then be analyzed using ML to take any preventive measures. In case of any critical health condition, Maa will suggest what necessary steps should be taken and even provide medical support.

<figure>
  {{ youtube-link="FmS3YCkX6qM" }}
  <figcaption style="text-align: center;">
  	Maa iOS App Prototype
  </figcaption>
</figure>


### Overview
Our system is aiming to play a vital role for women to receive health care before, during, and after pregnancy to decrease the risk of pregnancy complications. To maintain the service properly and keep the chain stable we need to monitor the system closely. Hence, the admin portal has been created with some key features such as:

* View the total number of patients, nurses (active and inactive), appointments, ambulances, and whatever else is needed.
* Submit medical reports for the patients.
* View and compare various types of data by date, time, and year.
* Rewarding nurses based on their performances (e.g. nurses of the month).
* Chat option with patients.

It's hard to come up with all the necessary features at the very beginning of the development stage. As of right now, we have implemented the data visualization dashboards and system reports to get a high-level overview.

### Where we are now
We have built a fully functional and deployed a REST API Service of “Fetal Health Predicting” to facilitate Maa app’s Prediction and Assistance features. In the mobile app, an expecting mother will fill the required fields (22 parameters of her cardiotocography result) and a prediction of the fetal health as “Normal”, “Suspicious” or “Pathological” will be returned by the Prediction API with ~95% accuracy.

Our dataset had 22 columns. 21 among those columns were various features of the [Cardiotocography](https://en.wikipedia.org/wiki/Cardiotocography) result. The last one indicates the fetal health for the row values. Fetal health 1.0 means Normal, 2.0 means Suspicious, 3.0 means Pathological.

We did some simple data analysis on the dataset to find the mean, standard deviation, 1st quartile, and fetal health distribution analysis. We then found out the count plot of targets indicates an imbalance in data. This is a case that tends to provide misleading classification accuracy.

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Predicting-Maternal-Morbidity-using-Machine-Learning-Techniques/image_1.png>
  <figcaption style="text-align: center;">
  	Plot indicating an imbalance in data
  </figcaption>
</figure>

In this kind of scenario, the performance measures that would provide better insights are :

* Precision
* F1 Score
* Confusion Matrix
* Recall

Let's evaluate the result of the correlation matrix. Which is as follows:

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Predicting-Maternal-Morbidity-using-Machine-Learning-Techniques/image_2.png>
  <figcaption style="text-align: center;">
  	Correlation matrix
  </figcaption>
</figure>

Considering the results of our data analysis we chose 4 algorithms that might be the best fit to gain higher accuracy to predict fetal health better.
Then we ran these algorithms on our dataset to see which algorithms give us the best accuracy.

The result is as follows:

	Logistic Regression: 0.897170
	Decision Tree: 0.916683
	RandomForest: 0.940205
	SVC: 0.906594

As Random Forest was the clear winner we trained a model using this algorithm.
Then we have converted the ML model into REST API Service using python-based framework [FastAPI](https://fastapi.tiangolo.com/) and deployed it to [Heroku](https://www.heroku.com/).
Finally, we developed an iOS Application that consumes the API and shows results to the end-users.

We used React.js and Typescript with Ant design to build our dashboard. Since Ant Design provides us with a variety of UI components, we can enhance our web applications and keep improving our user experience. To visualize our data with a graph we used React Chart Js. The react components come with [chart.js](https://www.chartjs.org/) and the most popular charting library.
We deployed our react app to [Netlify](https://www.netlify.com/) as it is very convenient and easy to deploy any `create-react-app` with just a single click.

The dashboard shows us how the system works by displaying various metrics. Due to a lack of health workers and data, the dashboard allows us to know whether we are on track to achieve our goal. And it improves monitoring in a resource-constrained environment.

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2022-01-31-Predicting-Maternal-Morbidity-using-Machine-Learning-Techniques/image_3.jpeg>
  <figcaption style="text-align: center;">
  	Maa system design
  </figcaption>
</figure>

### Extensible Learnings
Along the way, we went through different challenges and learned numerous new frameworks and tools such as:

* **Deploy API to Heroku**
* **Hands-on Machine Learning**
* **Converting an ML model to Python API**
* **ML model evaluation using Confusion Matrix**
* **Jupyter**
* **FastAPI**
* **CareKit**
* **HealthKit**
* **FHIRModels**

One of the challenges worth mentioning was to train the ML model. It took over nine hours to train the model to work with. But eventually, we did it. We have taken some missteps and hopefully, we learned a lot from those experiences.

### Information is Key
Patients' health data and medical records are invaluable for predicting maternal morbidity. With predictive analytics and ML, you’re able to unlock a new world of possibilities for reducing data rates related to pregnancy, and help better tailor severities and also reduce the treatment cost.

> Today the greatest risk of global catastrophe does not look like nuclear weapons or war. Instead, If anything kills over 10 million people in the next few decades, it is most likely to be a highly infectious virus rather than a war. - Bill Gates

Even in the pinnacle of science and technology we are trembled by pandemics like Covid-19. One of the key reasons is the lack of relevant information. We can overcome this scarcity by utilizing ML based health care systems to simulate different environments. Covid-19 is an early warning, a wake-up call, to get ready. If we do not start now, it will be too late to get ready for the next epidemic.

### Closing Thoughts
ML simplifies the lives of patients, doctors, and hospital administrators by performing tasks that are typically done by humans, but in less time and at a fraction of the cost. ML-based health care can help to improve the universal provision of health services, especially in the most disadvantaged areas, even during pandemics.

_Article Photo by [Eduardo Goody](https://unsplash.com/photos/typEuT_5Tzc)_


Predicting Maternal Morbidity using Machine Learning Techniques


Apple has introduced an API for prefetching the data for a _UITableView_ or _UICollectionView_ in iOS 10. This is a short story about how to implement the _UITableViewDataSourcePrefetching_ protocol. Let's learn how to make our apps buttery smooth, richer, and faster by using new features in _UITableView_ and its sibling, _UICollectionView_.

### Overview

To implement prefetching, we conform to the _UITableViewDataSourcePrefetching_ protocol in our ViewController, just like _UITableViewDataSource_ and _UITableViewDelegate_. That enables UITableView’s data source to begin loading data for cells before _tableView(\_:cellForRowAt:)_ data source method is called.

### Getting Started

Set your ViewController to TableView prefetch datasource

```swift
tableView.prefetchDataSource = self
```

Initiate asynchronous loading of the data required for the cells at the specified index paths in your implementation of _tableView(\_:prefetchRowsAt:)_

```swift
func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
	for indexPath in indexPaths {
		if let _ = loadingOperations[indexPath] { return }
		if let dataLoader = dataStore.loadImage(at: indexPath.row) {
			loadingQueue.addOperation(dataLoader)
			loadingOperations[indexPath] = dataLoader
		}
	}
}
```

Cancel pending data load operations when the TableView informs you that the data is no longer required in the _tableView(\_:cancelPrefetchingForRowsAt:)_ method

```swift
func tableView(_ tableView: UITableView, cancelPrefetchingForRowsAt indexPaths: [IndexPath]) {
	for indexPath in indexPaths {
		if let dataLoader = loadingOperations[indexPath] {
			dataLoader.cancel()
			loadingOperations.removeValue(forKey: indexPath)
		}
	}
}
```

### Loading Data Asynchronously

Unlike _tableView(\_:cellForRowAt:)_, the _tableView(\_:prefetchRowsAt:)_ method is not necessarily called for every cell in the TableView. It is called for cells that are not visible on the screen. Implementation of _tableView(\_:cellForRowAt:)_, therefore, must be able to handle the following potential situations

*   Data has been loaded via the prefetch request and is ready to be displayed.

```swift
...  
// Has the data already been loaded?  
if let image = dataLoader.image {
	cell.updateAppearanceFor(image)
	loadingOperations.removeValue(forKey: indexPath)  
}  
...
```

*   Data is currently being prefetched but is not yet available.

```swift
...  
else {
	// No data loaded yet, so add the completion closure to update the cell once the data arrives
	dataLoader.loadingCompleteHandler = updateCellClosure  
}  
...
```

*   Data has not yet been requested.

```swift
...
// Need to create a data loaded for this index path  
if let dataLoader = dataStore.loadImage(at: indexPath.row) {
	// Provide the completion closure, and kick off the loading operation
	dataLoader.loadingCompleteHandler = updateCellClosure
	loadingQueue.addOperation(dataLoader)
	loadingOperations\[indexPath\] = dataLoader  
}
...
```

To handle all of these situations Operation is used to load the data for each row. We create the Operation object and store it in the prefetch method. The data source method can then either retrieve the operation and result or create a new operation if doesn’t exist.

```swift
class DataLoadOperation: Operation {
	var image: UIImage?
	var loadingCompleteHandler: ((UIImage?) -> ())?
	private let imageModel: ImageModel

	init(_ imageModel: ImageModel) {
		self.imageModel = imageModel
	}

	override func main() {
		if isCancelled { return }
		guard let url = imageModel.url else { return }
		downloadImageFrom(url) { (image) in
			DispatchQueue.main.async() { [weak self] in
				guard let `self` = self else { return }
				if self.isCancelled { return }
				self.image = image
				self.loadingCompleteHandler?(self.image)
			}
		}
	}
}
```

<figure>
  {{ youtube-link="aD1EKjRoDks" }}
  <figcaption style="text-align: center;">
  	Seamless Prefetching...!!!
  </figcaption>
</figure>

### Conclusion

I hope this blog helped you understand how to implement the prefetching protocol. I tried to be very brief and focused. If you want to know more about it, I encourage you to [watch Apple’s WWDC session](https://developer.apple.com/videos/play/wwdc2016/219/) on the prefetching protocol.

👑 [KEEP CALM AND HERE IS MY CODE](https://github.com/rokon-mlbd/TableViewDataSourcePrefetching)


UITableView DataSource Prefetching



**I am glad to participate in the first edition of the [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks) hackathon organized by Monstarlab. In this event, I made an Augmented Reality Panda Demo, and I will take this opportunity to introduce ARFoundation to you and take you through a small AR Demo.**

## About ARFoundation
In 2017, Apple and Google launched their respective AR development SDK toolkits, ARKit and ARCore, corresponding to AR development for iOS and Android platforms respectively. ARFoundation platform architecture is based on ARKit and ARCore, and its purpose is to use Unity's cross-platform capability to build ARFoundation. ARFoundation's goal is not limited to ARKit and ARCore, but to build a unified and open AR development platform.

**ARFoundation operating principle**
![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image01.png)

**Features supported by ARFoundation**
![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image02.png)

**In this tutorial, we will build a simple app to preview a 3D model in AR.**

## Preparation

1. Download [Unity 2020.3.14](https://unity.com/download)
2. An Android device that supports Google ARCore

## Getting Started

1. Open Unity Hub and create an empty Unity project
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image03.png)

2. Select Window-> Package Manager in the toolbar
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image04.png)

3. Select Unity Registry in Package Manager
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image05.png)

4. Find the following Package and install it
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image06.png)

5. In the right Hierarchy view, delete the original MainCamera, right-click on the blank space and add ARSession and ARSessionOrigin respectively.
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image07.png)![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image08.png)

6. Create a Cube, first set the scale of the cube to (0.2, 0.2, 0.2), then drag and drop the cube to the project view, set it to Prefab, and finally delete the Cube in Hierarchy
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image09.png)
   Create another ARPlane and set it to Prefab, then delete the ARPlane from Hierarchy
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image10.png)

7. Right-click the blank space of Project view to create a C# script named PlaceOnPlane. After successful creation, double-click the script to add the following code and save it.

```
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.XR.ARFoundation;
using UnityEngine.XR.ARSubsystems;


[RequireComponent(typeof(ARRaycastManager))]
public class PlaceOnPlane : MonoBehaviour
{
   [SerializeField]
   [Tooltip("Instantiates this prefab on a plane at the touch location.")]
   GameObject m_PlacedPrefab;

   /// <summary>
   /// The prefab to instantiate on touch.
   /// </summary>
   public GameObject placedPrefab
   {
       get { return m_PlacedPrefab; }
       set { m_PlacedPrefab = value; }
   }

   /// <summary>
   /// The object instantiated as a result of a successful raycast intersection with a plane.
   /// </summary>
   public GameObject spawnedObject { get; private set; }

   void Awake()
   {
       m_RaycastManager = GetComponent<ARRaycastManager>();
   }

   bool TryGetTouchPosition(out Vector2 touchPosition)
   {
       if (Input.touchCount > 0)
       {
           touchPosition = Input.GetTouch(0).position;
           return true;
       }

       touchPosition = default;
       return false;
   }

   void Update()
   {
       if (!TryGetTouchPosition(out Vector2 touchPosition))
           return;

       if (m_RaycastManager.Raycast(touchPosition, s_Hits, TrackableType.PlaneWithinPolygon))
       {
           // Raycast hits are sorted by distance, so the first one
           // will be the closest hit.
           var hitPose = s_Hits[0].pose;

           if (spawnedObject == null)
           {
               spawnedObject = Instantiate(m_PlacedPrefab, hitPose.position, hitPose.rotation);
           }
           else
           {
               spawnedObject.transform.position = hitPose.position;
           }
       }
   }

   static List<ARRaycastHit> s_Hits = new List<ARRaycastHit>();

   ARRaycastManager m_RaycastManager;
}

```

8. Click ARSessionOrigin component in Hierarchy view, add ARPlaneManager, ARRaycastManager and the PlaceOnPlane script we created via Add Component button in Inspector view. And drag the cube prefab we created to the PlaceOnPlane script and then drag the ARPlane Prefab to the ARPlaneManager script, as shown in the figure.
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image11.png)

## Now we finished editing, let's start building the APK next.

1. Open File-> Build Settings window, click Add Open Scenes button to add scene, Platform select Android, and finally click Switch Platform to switch platforms
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image12.png)
   Click Player Settings and change the Company Name and Product Name.
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image13.png)
   Modify Other setting options
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image14.png)

2. After the modification, take out the prepared Android phone, open the USB debugging mode, connect to the computer, and click Build And Run in the Build Settings window to start building the APK.
   ![]({{ sitePrefix }}/assets/img/articles/2022-01-04-Cross-Platform-AR-Development/image15.png)

3. When the build is completed, check the connected Android device, find the App which is installed automatically, click Run and you will be able to see the AR Demo we made.
   {{ youtube-link="k_8XoIhzs9U" }}
   **Now, our ARDemo can run successfully, we can identify the plane and place a cube on the
   plane and can move the position of the cube.**

## Summary

**AR Foundation has a lot of functions, and we just used the relatively basic functions this time, surely you can build very interesting apps if you would like.**

## References

1. [Unity’s Handheld AR Ecosystem](https://blogs.unity3d.com/2018/12/18/unitys-handheld-ar-ecosystem-ar-foundation-arcore-and-arkit/)
2. [ARFoundation](https://docs.unity3d.com/Packages/com.unity.xr.arfoundation@4.2/manual/index.html)

Article photo by [Unity](https://developer.unity.cn/projects/5c32ddfbedbc2a0020e732b9) & [ARFoundation](https://docs.unity3d.com/Packages/com.unity.xr.arfoundation@4.2/manual/index.html)


Intro to AR Foundation - Cross-Platform AR Application Development

In 2000s, when I started working as a QA Engineer, there weren't good tools for UI automated testing, I didn't have enough experience and developers didn't think about automation.

The first tool I tried was TestComplete. We used Infragistics UI controls for our applications and TestComplete wasn't able to locate them properly. It performed clicks by coordinates and if the test was recorded on the one device they might fail on devices with another screen resolution.

We made the decision to test our applications manually.

I started working for another company (Sitecore).

A QA Engineer with good knowledge of programming languages joined our QA team. In cooperation with one of our best FE developers he built a framework for UI testing. The framework was based on WatiN (open-source tool). Together with unit and integration tests (QA Engineers took part in the creation too), this gave us good savings, and regression testing was faster.

However, there was still a lot of manual work.

After maternity leave, I went to work for another company.

Before that, I tried Selenium for self-study, but in Caspio I saw for the first time how it is used in real conditions, on real projects.

There was an Automation Team, they automated tests and it saved time for regression testing.

Also, we automated tests for the new features inside our Scrum teams:

- unit tests prevented commiting "bad" code to the repository
- integration tests helped prevented deploying "bad" code to our servers
- UI auto tests helped us understand if the build may be accepted for the testing or should be reverted
- Additionally UI auto tests helped us run end-to-end scenarios faster and receive the results faster

I fell in love with Selenium: its capabilities and community.

One of the challenges in automated testing is fragmentation in the testing ecosystem. Several different tools are used for creating tests, running them, creating reports etc.

Recently, there has been a confrontation between open-source tools and full-featured test automation platforms.

I was asked to compare two of the platforms: Testim and TestProject.

There are some differences between them:

- **TestProject** is free - **Testim** has free plan but there are several paid plans
- **TestProject** can be used for automated testing of web and mobile applications - **Testim** is for web applications only
- **Testim** uses their own Grid for running the tests
- **TestProject** allows creating addons that can be used by anyone who has account

The list isn't full.

There is one common thing - AI (Artificial Intelligence).

Testim:

> **AI learning**
> Smart <ins>Locators</ins> compare confidence scores from current to prior runs. When elements change, the <ins>locators</ins> improve and match your app.
>
> **Control locators**
> Smart <ins>Locator</ins> properties are visible and adjustable. Increase the confidence requirement or alter the weighting of a specific attribute.
>
> **Optimize reuse**
> Automatically scan all tests, identify repeated sequences, deduplicate, and replace them with reusable groups to reduce maintenance.


TestProject:

> **Self Healing**
> One thing that many test automation teams have found is that test maintenance takes up a lot of time. Often tests will fail due to changing or moving <ins>locators</ins>. Humans can easily correct for this, but traditional test automation can't. This leads to a lot of time being spent on updating tests. This kind of work can be tedious and so TestProject has created self-healing capabilities. This AI-driven capability will identify one main way to identify an element, but will also find a number of other possible ways to locate the element. If something breaks such that the primary <ins>locator</ins> strategy does not work, it will automatically detect that it is broken and then use the fallback strategies to find the element for you.


What is the <ins>"locator"</ins>?

Webpage source can be viewed in Web DevTools. If you press F12 or right-click and select "View page source" you will see an HTML code.

Each HTML-tag (a, li, div, form) is an HTML-element.

**Locator** is a query that helps to find 1 or more HTML elements on the page.

If we are talking about an Android app something similar to the DevTools view can be seen in the Layout Inspector.

The simplest ways to find an element are by id, name, class name, link text, tag name. CSS selector and XPath are used in the locators too.

**Example**: there is an application called [Debugle](https://debugle.com/). I used it to teach my students to create good bug reports. Also, we created test plans for it, checklists for cross-browser testing and automated smoke tests for it.

![]({{ sitePrefix }}/assets/img/articles/2022-01-03-AI-in-automated-UI-testing/pic1.jpg)

It is possible to identify the highlighted element by its id, name, tag name, class name, type, or placeholder. Locators could look like the following (C#):

- By.Id("UserEmail")
- By.Name("data\[User\]\[email\]")
- By.ClassName("input-text")
- By.TagName("input")
- By.CssSelector("input\[placeholder='Email'\]")
- By.CssSelector("input\[type='email'\]")
- By.XPath("//input\[@type='email'\]")

The list isn't full. These locators can be used for automation with Selenium WebDriver.

I propose to record the following test in Testim and in TestProject and compare the results:

1. Open [Debugle](https://debugle.com/).
2. Click Login (in the top right corner).
3. Login as "debugle-demo@ua.fm", "Qwerty123!" (you can use this test account or create your own).
4. Check that "Hello, Inna" (or your account name) is on the top of the page.

Instructions for Testim are [here](https://help.testim.io/docs/creating-your-first-codeless-test).

Instructions for TestProject are [here](https://docs.testproject.io/tips-and-tricks/how-to-record-a-web-test-for-a-mobile-browser#creating-a-web-test).

Let's start with Testim.

Work of Testim AI is to record all possible locators for the element and locators of all its children and parents:

![]({{ sitePrefix }}/assets/img/articles/2022-01-03-AI-in-automated-UI-testing/pic2.jpg)

It is clear from the picture above that Testim recorded only properties of the "input" element (id, name, class, placeholder etc.)

When it is necessary, Testim will try to locate the element by these properties (and by the properties of its parents and children). It will calculate a score. If the score is “Very Low” the test will be failed because the element cannot be found on the page.

**Note**: it is impossible to add more locators, it is only possible to hide some locators.

Let's take a look at two more examples to get a better understanding of how it works.

**Example**: run the recorded test for the 2nd time.

The user is already logged in (no Login button in the top right corner of the page). Testim opens the Account page (instead of the Login page). After that it is trying to enter username and password, and it isn’t possible. Anyway the test is passed.

There are 3 ways to fix the problem:

1. Clear cookies before the second step
2. Add a step to logout (if needed) before running the rest of the steps
3. Run the test in the Incognito mode

To clear cookies:

1. Add a new step with type "Add custom action" (from the "Testim predefined steps") after the "Setup" step.
2. Enter the following Javascript code:
```javascript
var cookies = document.cookie.split(";");

for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var eqPos = cookie.indexOf("=");
    var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

location.reload();
```
3. Save and run the test.

It doesn't help (and it won't help in most cases) because the "HttpOnly" flag disables Javascript's access to the cookie.

I decided to use the 3rd way: to check the "Run in incognito mode" checkbox and allow the Testim Chrome extension to be enabled in the Incognito mode. It is simpler than the 2nd way. Also when the tests are run in the Grid no need to clear cookies.

Let's continue with the test above but before the beginning change the locator for the "Hello, Inna" element. Change "Inna" to "Maria".
Run the test.

It will be passed. It is because of the score I've written earlier.

Do the following:

1. Open the step with assertion.
2. Open "Locators".
3. Click the "target" icon.
4. Change "The minimal confidence level required to consider the element as found" to "High" (it is "Low" by default).
5. Run the test again.

The result will be the same.

It will fail only if "Very High" is selected in this case.

**Note** : the test will fail in 30-40 seconds!!!

As far as all element locators and all locators of its children and parents are taken into account in calculation of the score it is impossible to know exactly which "The minimal confidence level required to consider the element as found" should be selected. In some cases it should be "High", in some cases it should be "Very High".

I believe the AI work of Testim needs to be improved.
It is really easy to record the tests, run them and receive reports. However, I cannot trust the results.

It's TestProject turn.

Here are the locators recorded by the TestProject for the "email" element:

![]({{ sitePrefix }}/assets/img/articles/2022-01-03-AI-in-automated-UI-testing/pic3.jpg)

It is possible to define which locator is more preferred, delete or add a new locator for the element.
The first 3 locators look secure enough.

Let's change the fist locator to "#UserEmailTEST" to have a look at how TestProject AI works.

The test will be passed and the following will be in the report:

![]({{ sitePrefix }}/assets/img/articles/2022-01-03-AI-in-automated-UI-testing/pic4.jpg)

This "heartbeat" sign means that the element wasn't recognized by the 1st locator and was found by another locator from the list:

> Don't sweat! This step was self-healed by TestProject's AI.
> We'll keep looking for ways to speed up your executions.
> The original locator was "CSSSELECTOR:#UserEmailTEST"


When I changed "Inna" to "Maria" in the step with assertion the test failed as it was expected.

This, of course, is just my opinion. I like the TestProject more, I trust its results more.

It has a lot of good features. The TestProject community continuously develops new addons. One of them gives me the ability to clear cookies for example.

Also, it is possible to implement some kind of Page Object Pattern, well-known and bellowed by QA Automation Engineers. Elements can be added manually and placed to folders. Then they can be used when creating tests.

For those who are on Windows machines it is possible to automate tests for iOS apps. Visit this page for [details](https://docs.testproject.io/getting-started/getting-started-with-ios-testing/ios-devices). I tried and it worked for me.

To summarize, when I started to investigate TestProject and Testim I didn't expect anything amazing.

I am still sure that there are a lot of cases when it is impossible to automate tests without knowledge of any programming language. Two of them:

- when search for some entities you should be sure that all possible variants are present in the results and no any superfluous results
- when tickets, rooms etc. should be selected for some dates in the future (it is not easy to use Calendar in this cases)

TestProject SDK can be used: C#, JAVA, Python.

Testim Javascrip Dev Kit can be used.

It gives some flexibility in creating the tests.

**Testim AI disappoints me (I hope for a while).**

**I would like to learn TestProject deeper, I see potential here. I will try it for our applications.**

_Article Photo by [Andy Kelly](https://unsplash.com/photos/0E_vhMVqL9g)_


AI in automated UI testing


There is always excitement about what the future should look like. As the year ends, tech corporations and developers attempt to look into the future, make bold predictions and try to learn from the past. Recently, there has been a new paradigm surfacing from the tech-sphere, with an ambition to challenge, and perhaps change the way we perceive the internet.
The message is clear and brief; the new net is here, and you may own it.

Web3 (originally “Web 3.0”), as the word was first coined by Ethereum co-founder Gavin Wood in 2014 as he had just recently left the Ethereum project, has been dominating the tech landscape in the recent months.

Our team, “Team BlockBhais”, was formed for [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks), an internal hackathon event that happened between 10-12 December 2021 where teams from all the Monstarlab offices were invited to participate. This year's MonstarHacks theme was to make a solution for any of the 3 judge-selected goals out of the 17 [UN Sustainable Goals](https://sdgs.un.org/goals). Out of the selected goals for the hackathon, we picked the 3rd SDG goal (good health, and well-being) and took this opportunity to explore, learn and implement aspects of the Web3 in a real hybrid solution, bringing together the best of both worlds.

We identified that post-COVID era we realized that we need to work together to achieve any success and the government may lead but cannot solve problems like medicare alone.
The current problems of healthcare services are many, and the most pressing issues are the health care services are inadequate, underfunded, understaffed, and people with pre-existing medical conditions are the worst affected. Too often we see people opt-out of regular medical check-ups or services so as to save for emergencies. We want an alternative for people to invest in their health at an earlier age and consistently, so that they may reap the benefits of a healthy life and more affordable healthcare.

So, over the hackathon weekend, we created BlockHealth+ - a blockchain-powered Health DAO (Decentralized Autonomous Organization) that rewards good healthy behavior with healthcare. The next time you go for a run, you’ll gain tokens by losing calories! These BlockHealth Tokens (BHT) can be exchanged for medical services from one of the community-picked partners.

## Case Study: BlockHealth+

## Building a health-focused DAO on the blockchain

{{ youtube-link="1TiH4Qo8X7g" }}

### Introduction

Imagine you are running a marathon event, you get a medal at the end of the race, but in addition you are also rewarded with sufficient social capital that can easily be redeemed with top healthcare providers for a 20-30% discount or greater.

Another scenario may be a not so strictly physical in nature, but assuming you participate in your government's vaccination drive and get your Covid-19 vaccine, you are then allocated tokens upon completion that can be spent with your local healthcare provider for, perhaps, large discounts in your next medicinal purchase. But, how do you facilitate this sort of cooperation among many different authorities, partners and people?

### Proposition

We needed to create a community with a shared, trustless bank account dedicated to rewarding the health-related activities that people do regularly with health services in the longer run. This community will have transparent financial transactions and a direct democratic governance-structure.

For participating members, all of their good behaviors now serve a greater purpose. They can carry out their daily routine, track it in their Google Fit, registered gym or other mandated 3rd party health service, and later cash-out these activities in the health sector with entities that have a community-mandated partnership.

The partnerships can be suggested by anyone, but it is up to the members of the community (of the DAO), to vote for and against the different companies and/or NGOs, authorities etc.
Essentially, the community votes for the partnerships they want on their terms - cutting out the middleman, which has the potential to be predatory in nature, and wind up getting the better deal.

This greater cause and transparency on how the money is spent and in what activities, allows UN, WHO, governments, NGOs, philanthropists, etc. to step in to promote and preserve a healthy lifestyle and healthcare in society.

Business entities have an incentive to be part of a community to help individuals redeem the rewards with their health services since they do enjoy extra benefits from the government, as well as a monetary incentive from the group for various initiatives.

### What is a DAO?

Web3 revolves around the idea of decentralization, which is in stark contrast to its predecessor, in which large amounts of data and personal information is owned by a few large tech companies, also known as “Big Tech”.

The main idea is that Web3 is governed by people through the use of decentralized blockchain technologies, in which large tech companies have little to no control over data or people.
There has been a resurgence of financial instruments (DeFi - Decentralized Finance), as well as gaming, art, music, and even organization forms such as the so-called DAO (Decentralized Autonomous Organization).

In this form of organization, decisions are made by stakeholders/members of said organization, usually through a vote.

### In practice

So, to create a DAO or to use an OSS DAO platform after thorough investigation and be able to connect it to it via middleware whose documentation is not updated at all, to utilize blockchain and users digital wallet with Metamask integration, to write smart contracts, and to generate NFTs in a language like a Solidity that is not mainstream, all was daunting, to begin with, but with time we slowly could see how the pieces connect.

![]({{ sitePrefix }}/assets/img/articles/2021-12-22-an-exercise-in-web3-daos/model.png)

This entire project currently relies on the web and mobile applications to interface with the DAO, we selected (Aragon) [https://aragon.org/] to build one, by use of middleware where this middleware also communicates with the Companion Smart Contract - that means whenever you participate, you will be able to be rewarded with their own redeemable NFT.

However, while members of the DAO are able to grant entities partnership roles and revoke them, they are also able to vote on the software solution required to facilitate activity validation - this means our current software (web & mobile) could be replaced in the future and are not irrevocably binding the DAO to it.

### System Flow

- Onboarding
- Import/Generate Wallet
- Acquire BHT Tokens
- Get Entry In DAO
- Integrate FIT APP Data
- Be Part GooD Healthy Activities
- Be ACTIVE IN DAO Activities
- Claim Rewards, NFTS
- Redeem tokens

### Technologies (including 3rd party frameworks and services)

![]({{ sitePrefix }}/assets/img/articles/2021-12-22-an-exercise-in-web3-daos/infra.png)

#### Aragon DAO

- [Aragon Client](https://aragon.org/aragon-client) (platform)
- [Aragon Company Template](https://help.aragon.org/article/30-create-a-new-company-organization)(configuration-type)

#### Mobile

- [Flutter](https://flutter.dev/) (framework)
- [Webview_flutter](https://pub.dev/packages/webview_flutter/example) (3rd-party package for displaying web in-app)
- [Dart](https://dart.dev/) (language)

#### Partnership Smart Contract Companion

- [Solidity](https://docs.soliditylang.org/en/v0.8.11/) (language)
- [ERC721](https://eips.ethereum.org/EIPS/eip-721) (ethereum token standard)
- Access Control (smart contract administration standard)
- Javascript (language)
- [Hardhat](https://hardhat.org/) (dev environment)
- [ethers.js](https://docs.ethers.io/v5/) (JS library for blockchain interaction)
- [Waffle](https://getwaffle.io/) (Library for writing & testing smart contracts)
- [Chai](https://www.chaijs.com/) (JS library for smart contract testing)

#### Web App

- [Angular 12](https://github.com/angular/angular)
- Typescript
- RxJS
- Web3
- [Ant Design](https://ant.design/)

#### Laravel Middleware

- [Laravel](https://github.com/laravel/laravel)
- PHP 8.0
- Database
- MySQL 8

#### Node.js Middleware

- Typescript
- [Aragon Connect](https://github.com/aragon/connect)

#### Terraform IAC

### Afterword

We strongly believe this solution of DAO, powered by blockchain, that tries to reward
people for their activities, and allow people to have ownership stake from day one can
be used for other domains apart from health, like education, climate change etc.

![]({{ sitePrefix }}/assets/img/articles/2021-12-22-an-exercise-in-web3-daos/blockbhais.png)

This hackathon helped us learn many things, among them:

- SDG Goals and their impact in society
- How DAOs work
- Hands on experience with creating and managing a DAO on Aragon
- Better understanding of blockchain technology
- General Web3 knowledge
- Metamask wallet integration to web app
- Smart Contract development using Solidity
- Connecting to DAO via JS

Surely Web3 looks daunting, but the potential it has is huge as power is redistributed from organizations and large tech companies, back into the hands of the people. Exciting days ahead for developers and users alike.

[Header Image](https://unsplash.com/photos/oGv9xIl7DkY) from Unsplash by fitsum-admasu.


An exercise in Web3 & DAOs


Restrictions on Face-to-Face meetings are always an archenemy of collaboration. Many of us facing this issue had to adapt and find other means to work around our limitations. And it came with no surprise that when it was our time to discuss and ideate for the Monstarlab's hackathon - [MonstarHacks](https://www.linkedin.com/showcase/monstarhacks), we turned to [Miro](https://miro.com/index/).

Miro gave us the opportunity to do live collaboration without meeting physically, and the best part of it is the ease and convenience to input our ideas together and structure them in a neat and wholesome way. Miro gives you the templates according to your preference of collaboration - in our case, it was brainstorming and ideation.

As we are brainstorming through our concept, we are able to leave notes in the platform and our ideas grew and gave birth to the flowchart of the application. From the overarching goals and recognising the problem statements, to the minute details of the app’s features, to the wire frames - we did it all on Miro. It allows extensive information to be stored on cloud so that we may go back to it anytime with just a click of the link.

<img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Ideation-through-Miro/image_1.png>

We can just select the stick notes in the left banner and select the color for categorisation purposes to make it easier to segmentise our ideas.

<img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Ideation-through-Miro/image_2.png>

Even with our research on the topic, all we have to do is just to copy and paste the link to the board and it will be instantaneously be reflected with the details of the webpage. From the start to the end of our ideation, it took us 2-3 hours to get our framework together and when we went on our separate ways to work on individual tasks, it became the foundation of our reference point and it helped to accelerate the process.

<img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Ideation-through-Miro/image_3.png>

You can also link Miro to other apps such as Slack, Zoom and Figma to integrate your work smoothly across the other platforms.

<img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Ideation-through-Miro/image_4.png>

There is much to explore for Miro but it is a starting point for everyone to try it out and use the platform to experience a more efficient and effective work process.

### Resources
- [Miro](https://miro.com/index/)
- [Miro Academy](https://miro.com/academy/)
- [Miro Webinars](https://go.miro.com/webinars)


Hackathon ideation through Miro


When Swift was made, it had been the first protocol-oriented programming language. Though Swift is great for object-oriented programming, but from the way _for-loops_ and _String_ _literals_ work to the emphasis in the standard library on _generics_, at its heart, Swift is protocol-oriented.

## Motivation

We use classes to represent a symmetric operation, like Comparison, for example, if we want to write a generalized sort or binary search where we need to compare two elements, we end up this something as below:

```swift
class Ordered {
	func precedes(other: Ordered) -> Bool {
		/// To ensure this method is implemented by subclass
		/// we added an error and that is nothing but a trap.
		fatalError("implement me!")
	}
}
```
```swift
func binarySearch(sortedKeys: [Ordered], forKey k: Ordered) -> Int {
  var low = 0, high = sortedKeys.count
  while high > low {
  	let mid = low + (high - low) / 2
  	if sortedKeys[mid].precedes(k) { low = mid + 1 }
  	else { high = mid }
  }
  return low
}
```
We don’t know anything about an arbitrary instance of `Ordered` yet. So if the method is not implemented by a subclass, well, there is nothing we can do other than the trap. Now, this is the first sign that we are fighting the type system. And if we fail to recognize that, it is also where we start lying to ourselves. Because we brush the issue aside, telling ourselves as long as each subclass of Order implements precedes, we will be okay. Making it the subclass’s problem. So we go ahead and implement an example of `Ordered` as below.

```swift
class Number: Ordered {
    let value: Double
    init(_ value: Double) {
        self.value = value
    }
    /// We down-cast other to Number to get to the right type to compare.
    /// It is a static type safety hole. Classes don't let us express this
    /// crucial type-relationship between the type of self and type of other.
    /// It is a code smell.
    override func precedes(other: Ordered) -> Bool {
        return self.value < (other as! Number).value
    }
}
```
It got `double` value and we override `precedes` to do the comparison. `other` is just arbitrary Ordered and not a number. So we don’t know that `other` has a value property. We down-cast `Other` to `Number` to get to the right type to compare. It is a static type safety hole. Classes don’t let us express this crucial type relationship between the type of `self` and type of `Other`. It is a code smell. So any time we see a force down-cast in our code, it’s a good sign that some important type-relationship has been lost, and often that’s due to classes for abstraction. Clearly, what we need is a better abstraction mechanism.

## Better Abstraction Mechanism

An abstraction mechanism must have the following properties:

* Doesn’t force to accept implicit sharing or lost type relationships
* Force to choose just one abstraction and do it at the time types are defined
* Doesn’t force to accept unwanted instance data or the associated initialization complexity
* Doesn’t leave ambiguity about what needs to override.

**And yes…!!! Protocol has all of these properties.**

> Don’t start with a class. Start with a protocol…!!!

<figure>
 <p style="margin:30"></p>
 <div style="width:100%;height:0;padding-bottom:100%;position:relative;">
 	<iframe src="https://giphy.com/embed/a5auAyjyCOf1S" width="100%" height="100%" 		style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen>
 	</iframe>
 </div>
 <figcaption style="text-align: center;">
  	Time for POP, no more OOP
  	<a href="https://giphy.com/gifs/princess-leia-a5auAyjyCOf1S">via GIPHY</a>
 </figcaption>
</figure>

## Protocol-Oriented Programming in Swift

There is a saying in Swift: “Don't start with a class, start with protocol”. So let’s redo the binary search example with protocol

```swift
/// Protocol does not have a method body.
/// We are trading dynamic runtime check for the static check.
/// Self in a protocol is a placeholder for the type that is going
/// to conform to that protocol. It is called "Self" requirement.
protocol Ordered {
    func precedes(other: Self)  -> Bool
}

/// sortedKeys is now a homogeneous array of any single Ordered type T.
/// Original signature, heterogeneous array of Ordered was a lie.
/// We never really handled the heterogeneous case other than by trapping.
func binarySearch<T: Ordered>(sortedKeys: [T], forKey k: T) -> Int {
    var low = 0
    var high = sortedKeys.count

    while high > low {
        let mid = low + (high - low) / 2
        if sortedKeys[mid].precedes(other: k) {
            low = mid + 1
        } else {
            high = mid
        }
    }
    return low
}

/// As Ordered is not class anymore,
/// we are not subclassing Ordered, instead confirming.
/// So, no more override keyword in preceds method.
extension Int: Ordered {
    func precedes(other: Int) -> Bool {
        return self < other
    }
}

let position = binarySearch(sortedKeys: [2, 3, 5, 7], forKey: 5)
```
<figure>
 <div style="width:100%;height:0;padding-bottom:108%;position:relative;">
	<iframe src="https://giphy.com/embed/h2MLtoOjxtkGY" width="100%" height="100%" style="position:absolute" 	frameBorder="0" class="giphy-embed" allowFullScreen>
	</iframe>
</div>
 <figcaption style="text-align: center;">
  	Wow…!!! “Protocol” rocks…!!!
  	<a href="https://giphy.com/gifs/impressed-bfd-h2MLtoOjxtkGY">via GIPHY</a>
  </figcaption>
</figure>

## Protocol Self Requirement

Once we have a Self-requirement to a protocol, it moves the protocol into a very different world, where the capabilities have a lot less overlap with classes.

* It stops being usable as a type
* Collections become homogeneous instead of heterogeneous
* An interaction between instances no longer implies an interaction between all model types.
* We trade dynamic polymorphism for static polymorphism, but, in return for that extra type-information we are giving the compiler, it is more optimizable

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Swift-Type-Erasure/image_1.png>
  <figcaption style="text-align: center;">
  	Protocol Oriented Programming in Swift, session 408, #WWDC2015
  </figcaption>
</figure>

## Protocol Extension

In our current implementation, we need to implement `precedes` method for each type. e.g:

```swift
extension Int: Ordered {
    func precedes(other: Int) -> Bool {
        return self < other
    }
}

extension Double: Ordered {
    func precedes(other: Double) -> Bool {
        return self < other
    }
}
```
Here comes the power of protocol. One implementation to rule them all by using a constrained extension on Ordered.

```swift
/// It says that, type that is Comparable
/// and also is declared to be Ordered will automatically
/// be able to satisfy the precedes requirement
extension Ordered where Self: Comparable {
    func precedes(other: Self) -> Bool {
        return self < other
    }
}
/// No more precedes method implementation
extension Int: Ordered {}
extension Double: Ordered {}
```
Let’s take constrained extension a step further

```swift
protocol Ordered {
    func precedes(other: Self)  -> Bool
}

extension Collection where Self.Index == Int, Element: Ordered {
    func binarySearch(forKey k: Element) -> Int {
        var low = 0
        var high = self.count

        while high > low {
            let mid = low + (high - low) / 2
            if self[mid].precedes(other: k) {
                low = mid + 1
            } else {
                high = mid
            }
        }
        return low
    }
}

extension Ordered where Self: Comparable {
    func precedes(other: Self) -> Bool {
        return self < other
    }
}

extension Int: Ordered { }

/// Call binarySearch just like the regular method.
/// No more angle-bracket blindness.
let index = [1, 2, 3, 4, 5, 6, 7].binarySearch(forKey: 3) // 2
```

## Protocol Associated Types:

By now we know what is Protocol Oriented Programming (POP). But POP without Protocol Associated Types (PAT) will never be completed.

`associatedtype` is a protocol generic placeholder for an unknown `Concrete Type` that requires concretization on adoption at **Compile** time.

> Protocol Associated Types (PAT)= Type Alias + Generics

\
&nbsp;
\
&nbsp;

At one stage of programming in Swift, many of us might have came across the below error:

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Swift-Type-Erasure/image_2.png>
  <figcaption style="text-align: center;">
  	Error while trying to use Generic in Protocol
  </figcaption>
</figure>

Swift does not allow us to use `Generic` parameters in `Protocol`. To bypass this limitation, Swift introduced `Protocol Associated Type`. The below example shows how to use `associatedType` in `Protocol`

```swift
protocol ViewModelType {
    associatedtype myType
    var anyProperty: myType { get set }
}

class ViewModel: ViewModelType {
    typealias myType = String
    var anyProperty: myType = "Hello, Protocol Associated Type"
}
```

## Type Erasure

Though `associatedType` solved one problem, it also introduced another problem. In Swift, we can not use `Protocol` with `associatedType` as a Type. What it means is, if we set a variable type to `ViewModelType,` `Swift` compiler will show the following error:

<figure>
  <img src={{ sitePrefix }}/assets/img/articles/2021-12-21-Swift-Type-Erasure/image_3.png>
  <figcaption style="text-align: center;">
  	Error while using Protocol with AssociatedType as Type
  </figcaption>
</figure>

`Type Erasure` is the only savior here to this error. There are three patterns that we can apply to solve the problem of generic constraints requirement.

* `Constrained Type Erasure:` erases a type but keeps a constrain on it.
* `Unconstrained Type Erasure:` erases a type without a constrain on it
* `Shadow Type Erasure:` erases a type by camouflaging the type

**Example**

The below code snippet shows how to implement multi-sectioned heterogeneous TableViewCell using `Unconstrained Type Erasure`

```swift
/// Cell `Interface`
protocol CellModel {
    /// PAT Placeholder for unknown Concrete Type `Model`
    associatedtype Cell: UITableViewCell
    /// Recieves a parameter of Concrete Type `Model`
    func tableViewCell(_ tableView: UITableView) -> Cell
}

/// Wrapper `AnyCell` erased the Type requirement
struct AnyCell {
    private let _tableViewCell: (_ tableView: UITableView) -> UITableViewCell

    init<Model: CellModel>(_ model: Model)  {
        self._tableViewCell = model.tableViewCell
    }

    /// Conforming to `AnyCell` protocol
    func tableViewCell(_ tableView: UITableView) -> UITableViewCell {
        return _tableViewCell(tableView)
    }
}

/// `Concrete Type` of `CellModel`
struct ImageCellModel: CellModel {
    internal let name: String

    init(_ name: String) {
        self.name = name
    }

    func tableViewCell(_ tableView: UITableView) -> ImageTableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: Cell.id)
        as? Cell else { fatalError() }
        cell.titleLabel.text = self.name.capitalized
        cell.thumbImageView.image = UIImage(named: self.name)
        return cell
    }
}

/// `Concrete Type` of `CellModel`
struct TextCellModel: CellModel {
    internal let quote: String
    private let author: String

    init(_ quote: String, author: String) {
        self.quote = quote
        self.author = author
    }

    func tableViewCell(_ tableView: UITableView) -> TextTableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: Cell.id)
        as? Cell else { fatalError() }
        cell.titleLabel?.text = self.quote
        cell.subtitleLabel?.text = self.author
        return cell
    }
}
```
If you download the project shared below and run the app, you will see the app has two models `TextCellModel` and `ImageCellModel` displayed using two table cells `TextTableViewCell` and `ImageTableViewCell` respectively. As the app has different models and cells under a single TableView section, without `TypeErasure` we would face the following problems:

* Self or Associated Type Requirement

```swift
let items: [CellModel] = [<a text model>,<a image mode>]
/// Error explained above
```
`CellModel` has an associated type requirement to avoid spaghetti code while dequeuing TableCell. Without associated type requirement our code would be as:

```swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  
   let items = sections[indexPath.section].items  
   let item = items[indexPath.row]
   /// More the model types, more the if-else  
   if item is TextCellModel {  
   /// load TextTableViewCell  
   } else {  
   /// load ImageTableViewCell  
   }  
}
```

* Heterogeneous Array

As TableView has different models and cells under same section, without `TypeErasure` we had to populate different array for different model which will lead to lots of if-else. Instead let's do eligently:

```swift
let imageCell = AnyCell(ImageCellModel("cyclamen"))  
let quoteCell = AnyCell(TextCellModel("Hello World.", author: "-"))  
let anyCells = [imageCell, quoteCell]
```

If we had just directly instantiated our `ImageCellModel` instance using the `ImageCellModel` initializer, it would be of type `ImageCellModel`. But because we have instantiated using this `AnyCell` wrapper class, `ImageCellModel` is now instantiated as type `AnyCell`. We have just erased type information (_this is what type erasure means_)

Wrapper classes are conventionally prefixed with the word `Any`, in order to guarantee that you will instantiate an object that implements our protocol and fills the generic type, without necessarily having the implementation on hand.

🎉 Using `AnyCell` wrapper we’ve erased the `Type` requirement when conforming to `CellModel` protocol. The `init` function is without clause and we now have a heterogeneous collection `Type` and dynamic dispatch at our disposition. 👍🏼

## Conclusion

We often end up writing spaghetti code while implementing TableView or CollectionView with different types of cells and models. `TypeErasure` is the right choice to avoid spaghetti code, makes code much more organized, and increases readability. I hope that you have enjoyed this article.

####
[👑 KEEP CALM AND HERE IS MY CODE](https://github.com/rokon-mlbd/SwiftTypeErasure)

## Related Articles:

* [Swift Associated Type Design Patterns](https://medium.com/dunnhumby-data-science-engineering/swift-associated-type-design-patterns-6c56c5b0a73a)
* [Protocol-Oriented Programming in Swift](https://developer.apple.com/videos/play/wwdc2015/408/)
* [Swift: Attempting to Understand Type Erasure](https://www.natashatherobot.com/swift-type-erasure/)


Swift: From Protocol to AssociatedType then Type Erasure


In this article, we will demonstrate how computer vision and deep learning can achieve receipt recognition and enhancement of its observation. Moreover, we will present how training data was created in a semi-automated way using computer vision.

You should read this if you are interested in:

- Deep learning
- Computer vision
- Semi-automatic data generation

## What's this about?

Improvement of the usability and accessibility of AI-related technologies steadily increase their spread in our daily life tasks.
Thus, receipt recognition and understanding of its content has various applications such as human resource invoice check, accounting or document parsing and analysis.

In order to democratize its use, it is often easier to perform it using pictures from a smartphone. Unlike scanned receipts, which require a scanner machine, pictures taken from smartphones do have a lot of sources of noise (picture background) that makes the task of accurate receipt recognition harder.

<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure0.PNG>

To achieve the goal of receipt recognition, two approaches are considered:

- **Computer vision**, referred to as **CV** in this article: apply various transformations to the input image in order to retrieve receipt location in the image and enhance its observation.
- **Deep learning**, referred to as **DL** in this blog: retrieve receipt location in the image using a trained model to be able to enhance its observation.

DL is sometimes overkill as CV can solve a problem much more efficiently and in fewer lines of code. However, CV does not work in every situation and use of DL can make the recognition of receipt more robust.

We will investigate both approaches in this blog to see their outcomes and conclude on how to achieve performant receipt recognition.

## Procedures

The different steps of receipt recognition and enhancement of its observation are (technical terms are explained in the following section):

1. Find the **contour** of the receipt in the image.
2. Apply **affine transformation** to vertically rotate the receipt.
3. Retrieve the corners of the receipt.
4. Apply **homography transformation** using corners and enclosing **bounding box** corners.
5. Compute the grid mapping of the receipt between its contour and the corresponding bounding box.
6. Apply **thin plate spline transformation** to undistort the receipt.

Among the operations described above, step 1 is the most crucial as the contouring operation controls the success of the following operations.

Thus, step 1 will be achieved by using both CV and DL, while the following steps will be done using CV, only.

## Computer vision operations

In the above section, the different steps for achieving receipt understanding and enhancement was shown. In this section, the technical explanation of each step is proposed.

**Contouring** is a boundary detection operation around a shape that has edges. A contouring algorithm can calculate the gradient of surrounding pixel values to detect a closed shape. This is a well-known problem in both CV and DL. Using the contour of the receipt and enclosing bounding box, we will vertically rotate the receipt using affine transformation.
A **bounding box** is the smallest rectangle with vertical and horizontal edges that surrounds an object (a receipt in our use case).
An **affine transformation** in CV is a set of linear transformations such a translation or a rotation of an image.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure1.png>
<figcaption>Figure 1. Original image, contouring & bounding boxes estimation, rotated receipt sentences.</figcaption>
</figure>

**Homography operation**, also referred as planar homography operation, is a transformation that maps points in one image so you can observe this image in a different point of view. This is used in this case to rectify the image and modify its yaw/pitch/roll angles, simply speaking, so you can observe it from the top.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure2.png>
<figcaption>Figure 2. Original image and its modification of observation using homography.</figcaption>
</figure>

**Thin plate spline operation** is an operation that can be used to rectify image distortion by applying a spatial mapping from two sets of grids, while interpolating the values in these grids.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure3.png>
<figcaption>Figure 3. Contour parsing analysis, source (blue dots) and destination (red dots) grids retrieval, and thin plate spline transformation to undistort the receipt.</figcaption>
</figure>

Regarding the images above, it seems that CV could be sufficient to achieve ticket recognition and enhancement of its observation. However, Contouring depends on image background, receipt condition (crumple receipt) or bright spot of the image, among others.

Here is an example of missed contouring operations that leads to failure.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure4.png>
<figcaption>Figure 4. Failed contouring operation (green) and bounding box estimation (red).</figcaption>
</figure>

To overcome this issue, DL is considered as it can handle complex recognition tasks that CV could not perform.

## Deep learning operation

### Instance segmentation

Deep learning is a subset of artificial intelligence that aims to map input data through layered models to estimate variables as a classification or a regression problem. Input data can take the form of images, text, tabular data or time series signals. Output data can take any form we like it to take (segmentation mask, binary variable, vector, ...).

Instance segmentation is a subset of deep learning that consists in detecting distinct objects of interest appearing in an image. It treats multiple objects of the same class as distinct individual instances as it produces distinct per-pixel segmentation masks for each instance.

Its advantage in our case is that it gives a segmentation mask that can be used as a receipt contour even though we have multiple receipts in one image.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure5.png>
<figcaption>Figure 5. Instance segmentation concept illustrated using COCO dataset samples.</figcaption>
</figure>

Unlike CV, DL need training data to learn from, which we will discuss in the following section.

### Semi automated data generation

The amount of data required to train a deep learning model widely varies depending on the task you aim to achieve. As receipts have a simple shape and are often contrasting with the background, we expect to get good results with a few hundred samples.

However, since there is no available online dataset for receipt segmentation, we should create these data from scratch. Labelling from scratch is a hassling task that most AI engineers prefer to delegate as it can be repetitive and time consuming.
In our situation, we could estimate the contour of a receipt in an image using CV so creation of segmentation masks will be based on this approach.

In case the CV contouring operation would not perform well, the segmentation mask would be edited using a polygon data labelling software.

Thus, creating training data still takes time (review data creation to ensure its quality) but making it semi-automatic alleviates most of the burden.

## Contouring via deep learning

After training an instance segmentation model, problematic receipt images were tested.

<figure>
<img src={{ sitePrefix }}/assets/img/articles/2021-12-20-Receipt-recognition-using-computer-vision-and-deep-learning/figure6.png>
<figcaption>Figure 6. Instance segmentation results on problematic images.</figcaption>
</figure>

Thanks to previously created training data that was used to train an instance segmentation model, receipt segmentation masks could be estimated where CV fails to do so. As the contouring step could be performed correctly, the following CV steps were applied successfully.

## Summary

We demonstrated in this article how computer vision and deep learning could be combined or used separately to enhance recognition of a receipt from a picture taken from a smartphone.

Advantages of computer vision (straight forward use) could be used to remedy drawbacks of deep learning (need of training data) to create a robust receipt recognition solution.

From receipt recognition onward, computer vision steps were applied to enhance the observation of the receipt.

In order to improve the accuracy and robustness of our solution, the following tasks are considered for the deep learning approach:

-   Add more data in our training dataset.
-   Benchmark different backbones for the instance segmentation model.
-   Refine the deep learning results with computer vision.

_[Image source Figure 5: COCO dataset](https://cocodataset.org/)_

_[Article Photo by Karolina Grabowska from Pexels](https://www.pexels.com/photo/person-using-a-computer-and-holding-a-credit-card-and-receipts-4968390/)_


Receipt recognition using computer vision and deep learning


You've seen news stories of data breaches by mysterious hackers stealing information. That threatens to release sensitive information to the public unless they get paid. But did you know there is a proactive way of testing your security before the bad guys do?

Let's explore how you can protect yourself and dive into the what, why & when of pen-testing.

## What Is A Penetration Test?

A penetration test, or pen test, is when a trained team of security experts tries to find your system's weak points.

Hackers are always trying to exploit vulnerabilities in cloud services and applications. Vulnerabilities may exist in insecure configurations, outdated dependencies, or even bad end-user behavior.

Security assessments help verify that your defenses are working as they should. It usually involves an attempt to compromise an app, servers, or IT infrastructure.

After finding a vulnerability, the security engineer will then try to escalate privileges. This means they will try to get access to sensitive or information they should not be able to access.

After the exploit succeeds, it then gets reported to the development team to patch.

## What Is the Difference Between Vulnerability Scans and Pen Tests?

The terms “Vulnerability Scan” and “Pen Test” are sometimes used, but they refer to two different types of security tests.

Vulnerability scanners are just automated tools that examines an app's source code and generates a report upon completion.

Scanners often list these vulnerabilities based off CVE identifiers. CVE identifiers are a list of known weaknesses.

Scanners can discover vulnerabilities, some low to severe vulnerabilities. That's when prioritization of the vulnerabilities are needed.

Unfortunately, these scanners can result in false positives so just relying on them is not enough.

This is where penetration tests come in.

They are a great way to see if any issues may not have been caught by your routine security testing.

Penetration tests add additional context to vulnerability scans. By seeing if the discovered vulnerabilities could be leveraged to gain access.

Penetration tests help you prioritize remediation plans by identifying the areas to be protected.

## Why Is Pen Testing Even Important?

### Finding and Prioritizing Vulnerabilities

Pen testing exposes any weaknesses in your web apps and cloud infrastructure. This gives your the knowledge of where you weak points are and where you should be direct resources and in which order you should fix them.

### Managing Vulnerabilities In A Smart Way

Pen testing gathers detailed information about security threats that can be exploited by actual hackers.

You can find out which vulnerabilities are most significant and worth addressing, which ones should be disregarded, and which ones may be false alarms by performing a penetration test.

This allows you to more thoroughly and efficiently evaluate risks, apply needed patches, and allocate resources to ensure that they are available when and where they are needed most.

### Taking A Proactive Approach To Your Security

Today, it's clear that there is no one solution to prevent a security breach.

You must now have a portfolio of advanced security measures to protect against cyberattacks, including Firewalls, SIEM solutions, and IAM programs.

But even with these security tools, it can be difficult to find and eliminate every vulnerability in a network or web application.

Penetration testing takes a proactive approach, uncovering weaknesses so that organizations can know what needs to be remediated and if additional layers need to be implemented.

### See What's Working Vs What Is Not

Too often, companies make changes to their security programs without first identifying the actual problems that need fixing.

Pen tests aren't only about finding vulnerabilities. You'll find out what policies are most effective and which tools give you the highest ROI.

These insights can help you allocate security resources wisely, ensuring that they are available when and where they are needed most.

### Be Confidence In Your Security Strategy

How can you know your security posture is effective if you never test it?

You can avoid being blindsided by an attack when your security team puts your security infrastructure through its paces.

You'll have safely experienced teamwork and will know how to prepare a well-organized team for success with security.

## How Often Should You Test Your Security?

You should perform penetration testing regularly to ensure a high level of application security.

Tests should also be performed if required by regulatory mandates, additional tests should be run whenever:

- You update a applications dependencies
- You made major changes to your application's codebase
- Adjustments are made to the infrastructure or hosting environments

## What Should You Do After a Pen Test?

When going through the results of pen tests, discuss plans for improving security and revisit your security posture overall.

Pen tests are important, but you shouldn’t just scan them for vulnerabilities and check them off a list.

Make time for a post-mortem to talk about what was discovered, share the results, and learn from them.

We suggest that you provide actionable information to decision-makers within your company. As this will help them understand the impact that vulnerabilities pose and the positive impact of remediation.

Review, evaluation, and leadership buy-in can transform pen test results into action items for improvements and takeaways that help shape larger security strategies.

## Want Your Security Tested?

Here at Monstarlab, we have recently created a new cybersecurity division that can conduct web, API & mobile security tests.

If you would like to learn more about how Monstarlab could help you improve your security [please contact us here](https://monstar-lab.com/global/contact/)

_Article Photo by [B_A](https://pixabay.com/users/b_a-363247/)_


Pen Testing The What, Why & When

This article explains how to make use of Dynamic Links in Flutter through a step by step guide.

## What are Dynamic Links?

Dynamic Links are smart URLs that lead to a specific screen in our application. They can be easily used in an outsider website/app and are more commonly known as deep links.

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image01.gif)

## Why Firebase Dynamic Links?

Why Firebase? Could we not implement this by ourselves? Do we really need to rely on another service to do that? These were some of the questions we asked ourselves before we made a decision to go with Firebase. Luckily those questions were easily answered by watching the video below.

{{ youtube-link="LvY1JMcrPF8" }}

So, why Firebase Dynamic Links are a really good option to go with:

- **They work in and adapt to all platforms (iOS, Android, Web):** one link works perfectly between all platforms.
- **App not-installed behavior can be adjusted:** we can lead the users to a landing page or the platform (iOS, Android) store in case they don’t have our app installed.
- **The flow doesn’t die after app installation:** even if the user does not have our app installed, after installation and opening the app for the first time; the Dynamic Link works.
- **Easily used in combination with Firebase Analytics:** we can use Firebase Analytics to count the number of times a Dynamic Link is used.

## Getting started

In this article we are only going to elaborate on how to implement Dynamic Links with Flutter. In other words, the below steps are necessary and we are not going to get into detail on how to do so.

- Create a Firebase project
- Add the necessary iOS and Android apps
- Configure the iOS and Android apps in Flutter to use Firebase

Before going further, let’s make sure the above steps are finished!

## Step 1: Create a prefix URL

A Dynamic Link is defined by a URL, and that is what we are going to do first. Define the URL that is going to be used in all our links.

To specify our URL, we go to:

*Firebase Console > Dynamic Links > Get started*

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image02.png)

Here is where we are going to set up our prefix URL. This prefix will be the one showing in all our Dynamic Links and should be explicit to our app. Therefore we should choose something clear and precise. For this example we decided on the prefix below:

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/<p/>***

Subsequent links from this prefix URL will look like the one below:

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/home<p/>***

Along with an explicit prefix URL, we have to own that domain too, due to the fact that we need to prove that ownership on the **Verify** step.

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image03.png)

Once we get to the **Finish** step of the **Get started** guide, we should have a prefix URL ready to create Dynamic Links for our app.

## Step 2: Install

To implement the Dynamic Links in our Flutter app, we are going to make use of the firebase_dynamic_links library.

[https://pub.dev/packages/firebase_dynamic_links](https://pub.dev/packages/firebase_dynamic_links)

Running the command below in our terminal will install the library into our Flutter project.

```terminal
flutter pub add firebase_dynamic_links
```

After installation, to receive Dynamic Links on Android nothing more should be done. However, iOS devices need some more configuration. In the next sections we are going to explain the three procedures that made our app capable of opening Dynamic Links successfully.

#### Step 2.1: Universal Link configuration

The first configuration step will be to add the Associated Domains capability to our iOS app. To do so, we need to open our Runner.workshop in Xcode and go to:

*Project root > App target > Signing & Capabilities > + Capability > Associated Domains*

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image04.png)

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image05.png)

We will set the **Associated Domains>Domains** as **applinks:(URL prefix)**.

```terminal
applinks:app.monstarlabdynamiclinksdemo.com
```

After this change, we will need to update the configuration of our App ID (Apple dev center), adding the Associated Domains capability as well, and update our provisioning profile accordingly. Otherwise we will not be able to test our Dynamic Links in iOS.

#### Step 2.2: Support Custom URL schemes

For our second configuration step we need to support the custom URL schemes in our iOS app. We need to go to:

*Project root > App target > Info > URL Types > +*

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image06.png)

Here we need to set the **Identifier** field as **Bundle ID** and the **URL Schemes** field with our iOS app bundle ID.

```terminal
com.monstarlab.monstarlabDynamicLinksDemo
```

#### Step 2.3: Info.plist configuration

For the third and final configuration step we will add a **FirebaseDynamicLinksCustomDomains** Array into our app **Info.plist**.

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image07.png)

Once the array has been added, we will also need to insert a **String item** into the array with our URL prefix.

```terminal
https://app.monstarlabdynamiclinksdemo.com/
```

At this point we should be ready to go. Nevertheless, iOS configuration is one of the troublesome tasks dealing with Dynamic Links. If you have difficulties trying to configure the Dynamic Links for iOS, especially when opening them on a device later in this tutorial. Return here and check the link below, it was a great help for us.

{{ youtube-link="KLBjAg6HvG0" }}

## Step 3: Generate Dynamic Links (Immutable url)

In the previous steps we created a prefix URL that works with our app, but that is not enough. As stated before, Dynamic Links are smart URLs that lead to a specific screen in our application. We need to define the last part of our URL that leads to that specific screen.

In this first part of step 3, we are going to focus on links that refer to a screen that does not need additional information to show. Examples of those links could be:

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/feed</p>***

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/premium</p>***

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/profile</p>***

This kind of link can be easily created from the Firebase Console:

*Firebase Console > Dynamic Links section > New Dynamic Link*

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image08.png)

Clicking this button will trigger a window with a series of steps explained in the following sections.

#### Step 3.1: Short URL

In this first step we need to set up the last part of our short Dynamic Link URL.

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image09.png)

For an immutable URL a short link may not be that useful. Moreover, at this point it may be difficult to understand why they are used for. Thus, we recommend leaving the field with the random string as is and continuing to the next step.

#### Step 3.2: Dynamic Link setup

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image10.png)

In this second step we need to set up the last part of our **Deep link URL**. This will become our actual Dynamic Link. Anything should be fine, but we recommend it to be clear and explicit to the screen we are referring to.

In addition to the URL path, a **Dynamic Link name** is required. This Dynamic Link name is for internal use, it is used to help us identify links easier. This name will show on the Firebase console Dynamic Links list next to the URL.

#### Step 3.3: iOS behavior

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image11.png)

For the third step we will need to configure the behavior of our link when opening the smart link on an iOS device. We want our link to open a specific screen in our app, for that we need to specify **Open the deep link in your iOS App**.

Likewise, we also can set the behavior if the user does not have our app installed. In our case, we decided to show the **App Store page for your app**, and guide them to install our app. Similarly we could choose **Custom URL** and define a URL to fall through to instead.

#### Step 3.4: Android behavior

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image12.png)

For the fourth step we will need to configure the behavior of our link when opening the Dynamic Link on an Android device. As in the previous step, we want to open a specific screen in our app with the Dynamic Link, for that we need to select the **Open the deep link in your Android App**.

We also selected the **Google Play page for your app** to guide the users to the Play Store in case they don’t have the app installed.

#### Step 3.5: Advanced options

In the fifth and final step we are going to add a bunch of optional parameters to our Dynamic Link.

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image13.png)

**Meta tag parameters** are easily used on social media, when presenting links in their interfaces. Setting up those parameters will allow us to show our link more appealingly, rather than a plain URL.

On the other hand, the **UTM parameters** (see image above) are set to be used along with Firebase Analytics.

#### App preview page

The app preview page is an html page between the generated Dynamic Link and the app screen. This html page is shown in the user device default browser and also presents the social meta tag parameters that were set in the last step (title, image and description).

![]({{ sitePrefix }}/assets/img/articles/2021-11-29-Firebase-Dynamic-Links-+-Flutter/image14.jpeg)


App preview pages are usually useful because they let the user decide if they really want to open the link or not. In case we don’t want to show it, we can skip it by checking the **Skip the app preview page (not recommended)** checkbox.

## Step 3: Generate Dynamic Links (Mutable links)

Continuing with Dynamic Link generation, we learnt how to generate links that refer to a screen that does not need additional information to show. But what if they need some changing parameters to be specified? In this second part we are going to focus on mutating links and how they are generated.

Examples of those links would be:

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/detail/9875</p>***

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/news/305</p>***

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/profile/monstarlab</p>***

For these cases we will need to generate our deep links with code.

#### Coding with firebase_dynamic_links library

To create a mutating Dynamic Link URL we are going to make use of the **DynamicLinkParameters** class of the firebase_dynamic_links library.

The code below is an example of a deep link creation using the DynamicLinkParameters.

```dart
final DynamicLinkParameters parameters =
DynamicLinkParameters(
    uriPrefix: 'https://app.monstarlabdynamiclinksdemo.com/',
    link: Uri.parse('https://app.monstarlabdynamiclinksdemo.com/detail/$id'),
    androidParameters: AndroidParameters(
      packageName: 'com.monstarlab.monstarlab_dynamic_links_demo',
    ),
    iosParameters: IosParameters(
      bundleId: 'com.monstarlab.monstarlabDynamicLinksDemo',
      appStoreId: '962194608',
    ),
);
final Uri dynamicUrl = await parameters.buildUrl();
```

The parameters specified in the piece of code are mandatory in order to have a Dynamic Link working properly:

- **uriPrefix:** specifies the URL prefix.

```terminal
http://app.monstarlabdynamiclinksdemo.com/
```

- **link:** specifies the Dynamic Link URL. The below “id” is a value that changes depending on each case/screen.

```terminal
https://app.monstarlabdynamiclinksdemo.com/detail/$id
```

- **androidParameters > packageName:** specifies the Android package name set on the Firebase console.

```terminal
com.monstarlab.monstarlab_dynamic_links_demo
```

- **iosParameters > bundleId & appStoreId:** specifies the iOS bundle id set on the Firebase console.

```terminal
com.monstarlab.monstarlabDynamicLinksDemo
```

And the App Store id, also set on the Firebase console. In case you still don’t own an App Store id, you can use the one below. It is the Google Photos App Store id.

```terminal
962194608
```

#### Short links

```dart
final Uri dynamicUrl = await parameters.buildUrl();
```

After setting the parameters following the previous section and executing the code above, our mutating Dynamic Link would look something like this:

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/?link=https://app.monstarlabdynamiclinksdemo.com/detail/9234&apn=com.monstarlab.monstarlab_dynamic_links_demo&ibn=com.monstarlab.monstarlabDynamicLinksDemo&isi=962194608</p>***

A little bit too long for a handy deep link, huh!? Especially for a tweet.

Here is where we can make good use of a short link.

```dart
final ShortDynamicLink shortDynamicLink = await parameters.buildShortLink();
final Uri shortUrl = shortDynamicLink.shortUrl;
```

By using the previously generated parameters variable we can create a short url looking like the one below:

***<p style="text-align: center;">https://t.co/9YPgIeGACb</p>***

The deep link will work equally well as the first one and will have the same properties, but it is shorter.

#### Platform additional parameters

There is a series of additional parameters that we can set on the Android and iOS parameters.

```dart
final DynamicLinkParameters parameters =
DynamicLinkParameters(...),
    androidParameters: AndroidParameters(
      packageName: 'com.monstarlab.monstarlab_dynamic_links_demo',
      minimumVersion: 21
      fallbackUrl: 'https://www.monstar-lab.com',
    ),
    iosParameters: IosParameters(
      bundleId: 'com.monstarlab.monstarlabDynamicLinksDemo',
      appStoreId: '962194608',
      minimumVersion: '12.0'
      fallbackUrl: 'https://www.monstar-lab.com',
    ),
);

final Uri dynamicUrl = await parameters.buildUrl();
```

Same as when we created the link through the Firebase console, we can specify a url to show in case the user does not have our app installed. If **fallbackUrl** is not set then the platform store (App store, Play store) will show instead.

Using the **minimumVersion** we are also able to specify the minimum OS version which our link should work with.

#### Social meta tag parameters

To make use of the meta tag parameters on a code generated Dynamic Link we will need to set the **socialMetaTagParameters**. Here an example of code:

```dart
final DynamicLinkParameters parameters =
DynamicLinkParameters(...),
    androidParameters: AndroidParameters(...),
    iosParameters: IosParameters(...),
    socialMetaTagParameters: SocialMetaTagParameters(
      title: ‘title’,
      description: ‘description’,
      imageUrl: Uri.parse(imageUrl),
    ),
);

final Uri dynamicUrl = await parameters.buildUrl();
```

## Step 4: Open Dynamic Links

Once we have our Dynamic Links properly generated, we will need to prepare our app to receive them.

Below is the needed code to make our app responsive when receiving a Dynamic Link.

```dart
FirebaseDynamicLinks.instance.onLink(onSuccess: (dynamicLink) async {
  final Uri deepLink = dynamicLink?.link;
  if (deepLink != null) {
    // Show desired screen
  }
});
```

We should place it somewhere the app goes through when coming from the background, in our case we placed it in our root view.

As discussed previously, Firebase Dynamic Links permits the Dynamic Link flow to continue after installation. In order to make that possible, we need to make use of the code below.

```dart
final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
final Uri deepLink = data?.link;
if (deepLink != null) {
	// Show desired screen
}
```

**getInitialLink()** will let us know if the user has clicked a link before installation and will provide us with it.

To finish with the link opening we just need to show the pertinent screen. Below an example of code showing a screen using our previous Dynamic Link.

***<p style="text-align: center;">https://app.monstarlabdynamiclinksdemo.com/?link=https://app.monstarlabdynamiclinksdemo.com/detail/9234&apn=com.monstarlab.monstarlab_dynamic_links_demo&ibn=com.monstarlab.monstarlabDynamicLinksDemo&isi=962194608</p>***

```dart
if (deepLink.contains('detail')) {
  final strings = deepLink.split('detail/');
  navigatorKeys[TabPage.home].push(
    MaterialPageRoute(
      builder: (context) => LectureDetailView(strings.last),
    ),
  );
}
```

## Testing

Arriving at this point we are practically done, we only need to check if the generated Dynamic Link properly opens on our app and shows the right screen.

Remember that Dynamic Links cannot be opened on the browser, that means we cannot copy paste them on the address bar and hit enter because that is not going to work. They need to be clicked. Our recommendation is to use a Notes app or a tweet on Twitter.

**<p style="color: indianred;">Besides that, deep links can be opened on Android emulators and Android devices. But they can only be tested on iOS devices, iOS simulators will not work.</p>**

Last but not least, we found an issue while working with iOS 14 and a VPN that is worth mentioning here. Let’s make sure to enable “Associated Domains Development” on the “Developer menu” in “iOS Settings” if we are using a VPN connection. Otherwise the opening of deep links will generate no response at all. We leave the link to the bug discussion thread below.

<u>https://developer.apple.com/forums/thread/659156</u>

## Conclusion

To sum up, generating links with Firebase is super powerful and kind of easy, the worst part is definitely the iOS configuration.

The Flutter firebase_dynamic_links library has also a very handy URL generation, but there are so many options that it is difficult to understand all at first glance.

Clearly it is a tool that brings a better experience to the end user and empowers developers. Making everybody happier.


Firebase Dynamic Links + Flutter

Let’s imagine an IDEAL world where all Developers test their code and the level of coverage is 100%.

Why should QA Engineers test when each line in the code (each decision, each condition, each branch) is covered by unit and integration tests?

They could test characteristics that cannot be covered by unit/integration tests, for example:
- Usability
- Performance
- Portability
- Etc.

And this is true but frankly speaking this is not the whole truth.

No method for calculating the level of coverage can be used to fully guarantee that the application functions as expected. The percentage of coverage is to know how many code lines are executed during the testing.

The simplest example is when requirements have been understood incorrectly.

Here is one more example.

There are several methods of calculating the level of coverage. For example, to achieve 100% decision (branch) coverage, each decision in the code should have “true” and “false” value at least once.

_Console application that determines if it is possible to build a triangle with sides entered by user:_

```csharp
using System;

namespace Is_it_a_Triangle
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = int.Parse(Console.ReadLine());
            int b = int.Parse(Console.ReadLine());
            int c = int.Parse(Console.ReadLine());

            if (Triangle.IsValidTriangle(a, b, c))
            {
                Console.WriteLine($"It is possible to build a triangle with sides {a}, {b}, and {c}.");
            }
            else
            {
                Console.WriteLine($"It is impossible to build a triangle with sides {a}, {b}, and {c}.");
            }
        }
    }

    public class Triangle
    {

        public Triangle(int a, int b, int c)
        {
        }

        public static bool IsValidTriangle(int a, int b, int c)
        {
            return ((a + b > c) && (a + c > b) && (a + c > b));
        }
    }
}
```

So, only two tests are necessary to achieve 100% coverage.

_Tests:_

```csharp
using Xunit;

namespace Is_it_a_Triangle.tests
{
    public class TriangleTests
    {
        [Fact]
        public void IsValidTriangleTest1()
        {
            int a = 2;
            int b = 2;
            int c = 3;

            bool isValidTriangle = Triangle.IsValidTriangle(a, b, c);

            Assert.True(isValidTriangle);           
        }

        [Fact]
        public void IsValidTriangleTest2()
        {
            int a = 1;
            int b = 1;
            int c = 3;

            bool isValidTriangle = Triangle.IsValidTriangle(a, b, c);

            Assert.False(isValidTriangle);
        }
    }
}
```

What if we add one more test?

```csharp
        [Fact]
        public void IsValidTriangleTest3()
        {
            int a = 3;
            int b = 1;
            int c = 1;

            bool isValidTriangle = Triangle.IsValidTriangle(a, b, c);

            Assert.False(isValidTriangle);
        }
```

It won’t pass.
The problem is in the following line:

```csharp
return ((a + b > c) && (a + c > b) && (a + c > b));
```

“(a + c > b)” condition is added two times. Instead, it should be:

```csharp
return ((a + b > c) && (a + c > b) && (b + c > a));
```

This is a very simple program, but even here the user could enter numbers like doubles or maybe not numbers at all. That will cause errors in addition to the one I described above.

Kudos to Developers who test their code. My hat is off to them. And this is all because we live in a REAL world where Developers don’t have enough time for creating and maintaining tests, they take care of more than 1 project and have several meetings per day, where requirements are changing too often.

I like to be on the same project with Developers who want to produce qualitative products and not only to complete their tasks.

There are so many opportunities how Testers can support Developers:
- to prepare test data
- to advice if they have knowledge about similar feature on another project
- to use different techniques to prepare tests (to not skip most of bugs)
- to give an overview of the functionality which is going to be fixed or increased
- to see light at the end of the tunnel and let everyone else see it too

There are a lot of test design techniques (specification-based and experience-based) in our arsenal.

For example, Equivalence Partitioning is the best for smoke testing. Usually it is used in pair with Boundary Value Analysis.
Decision Table Testing is good not only for creating tests but it also helps to determine gaps in the requirements.
State Transition Testing is the best when you need to perform security testing (but not only there).
There are tools that help in Pairwise Testing. This technique solves the problem of having too many combinations of parameter values.

I use them for each feature I am testing. Sometimes, when I don’t have enough time to create test cases, my tests looks like the following:

![]({{ sitePrefix }}/assets/img/articles/2021-10-28-Developers-Tester-Love-Forever/testcases.jpg)

Once I have some free time I add these tests to our Test Management system.

Additionally, understanding test design techniques helps to not perform superfluous tests and save time for more needed tests.

Let’s not forget about experience-based techniques. To be honest these techniques are just an addition to the more formal ones, but in the right hands they are powerful weapons.

Each QA Engineer has his own list of common bugs in addition to well-known ones that may be found by Google.

Some time ago (when I was preparing for the “Mobile Application Testing Foundation Level” exam), I learned about such an exploratory testing technique as Mnemonics.

An example of a mnemonic is SFiDPOT (taken from [here](https://www.istqb.org/downloads/send/61-mobile-application-testing/251-mobile-application-testing-specialist-syllabus.html)). Each letter has its own meaning:
- **S – Structure** (e.g., user interface elements, other application elements and their order and call hierarchy)
- **F – Function** (e.g., desired features are working, available, and functioning according to the requirements etc.)
- **i - Input** (e.g., all required inputs are available and processed as they should be, such as inputs from the keyboard, sensors, and camera)
- **D – Data** (e.g., the data is stored (also on SD card), modified, added, and deleted as defined in the requirements)
- **P – Platform** (e.g., the specific operating system functions are available depending on device settings, includes store for downloading the app)
- **O – Operations** (e.g., the activities of the normal user are available, such as moving between mobile carrier networks and Wi-Fi)
- **T – Time** (e.g., handling and display of time zones, time, and dates)

One more interesting technique is Tours. Here is not full list but those which I found more useful:
- **Connectivity** - Connectivity used, such as Wi-Fi, GSM
- **Location** - Correct language, dates, numbers
- **Low battery** - Data losses in the app caused by low energy levels
- **Gesture** - Use all gestures wherever possible
- **Orientation** - Change orientation
- **Change your mind** - Go back
- **Permissions** - Permissions to device features

In my IDEAL world Developers work side by side with Testers, they are comrades, brothers in arms. Testers help to test code better, Developers build applications for which automation can be applied easily.

My REAL world is a bit different but mostly it is close to my IDEAL world. Problems are solved, challenges make us stronger as specialists.

## Testers + Developers = Love Forever

_Article Photo by [Windows](https://unsplash.com/photos/p74ndnYWRY4)_


TESTERS + DEVELOPERS = LOVE FOREVER

How to setup CI/CD for iOS App Development with Fastlane, CircleCI and Firebase App Distribution


RubyKaigi Takeout 2021 was held from September 9 to 11, 2021, after the original version of the conference was replaced with this online version. A place where the whole ruby community gathered together despite the pandemic’s attempt to keep them apart. It was a bit intimidating for me as a first-time attendee, but I got into the zone very quickly, thanks to the fine lineup of talks and presentations.
I’d like to take a spin through some of the highlights of the events that made this conference so great.

## TypePorf for IDE

By Yusuke Endoh

This talk by Yusuke Endoh- San was the perfect way to kick off Rubykaigi Takeout 2021.
The talk started with small pseudo-code examples in typescript, depicting how well of a dynamically typed language it is. TypeProf enables developers to achieve the same level of user experience, at least to an extent, in a very dynamically typed language like Ruby. Providing features like on-fly reporting, go-to-definition option, auto-completion, showing hints, inferring types on the fly, etc. There will be Typeprof support from Ruby 3.1, intending to improve our developing experience. Typeprof is still very slow from an analysis point of view, which hopefully will get better in near future. Even though it is still in the experimental phase, this is definitely exciting for all fellow Rubyists.

## Rubocop in 2021: Stable and Beyond

By Koichi Ito

Rubocop has been the most famous linter/formatter for ruby, which has helped developers enforce standard ruby style guidelines in their code. The talk discusses how things have changed after the release of Rubocop 1.0 last year, providing new upgrades in areas like bug fixes, performance, new ruby syntax support, auto-correction, etc. The optional --parallel option that can improve performance by enabling parallel processing really caught my eye. I think computers with good CPU, memory resources will benefit from this. Even though Koichi Ito-San says he has no plans for the major release of Rubocop version 2.0, he agrees to the fact that this is bound to happen at some point in the future.

## Ruby Archeology

By Nick Schwaderer

This title seemed odd to me, to be honest at first, but it wasn’t long before fascination crept in. The author reflects on how ruby has evolved over time. He started with setting up the 2009/2008 environment(Ruby 1.8~) on the 2021 machine. The author really dug deep on gems from the same generation in Nokogiri, hpricot (maintainers closed the book on it), builder gem. As a person who was introduced to ruby not until recently, I found it quite fascinating. The author took us all on board on his ride to the past which made us realize how important looking at our past and knowing the history is.

## Variable width allocation: Optimizing Ruby's Memory Layout

By Peter Zhu and Matt Valentine-House

This was one of the most informative talks for me personally. Started with how Ruby lays out its memory, how it manages memory, for both small and large objects. They also explained how Ruby’s garbage collection works, including slides that depicted how the steps of marking, sweeping, and compaction are implemented. The performance overhead caused by the malloc system was also well explained.
The goals of this project were to improve the performance by enabling ruby to manage its layout rather than relying on malloc system library. Reducing the malloc calls has already shown good improvements in performance. Even though this is not production-ready yet, the prospect of variable width allocation looks really promising.

## Parsing Ruby

By Kevin Newton

This talk was about different projects that parsed Ruby code over the years. Starting with Ruby 0.06 in 1996 all the way to Ruby 3.0 in 2020. The author also shared the pictorial representation of the releases of these projects along the timeline. The talk concluded with a discussion of current ruby script parsers Ripper and RubyParser, discussing the upsides and downsides of each and how investing in these or similar kinds of libraries can help us build powerful production applications.

## Regular Expressions: Amazing and Dangerous

By Martin J. Dürst

The author Martin reflects on how strong and handy Regular expressions can get, but at the same time can leave you in a world of evil when not used correctly. Due to its unpredictable time behavior and compact syntax, we could be running a high risk of significantly slowing down our program. Even though the author sees some solutions in RegExp timeouts limits and backtracking limits, the importance of avoiding the use of RegExs unless when it’s really needed is conveyed well enough.

## PRK Firmware: Keyboard is Essentially Ruby

By Hitoshi Hasumi

PRK firmware is the first keyboard firmware framework in ruby. You can basically write your keymap in ruby for your keyboard firmware. Also, you can add extra layers to your keyboard, essentially expanding your 50% layout keyboard to a much bigger virtual layout. There are also options to set rainbow or breathing effects to make your keyboard look cooler. The level of customization doesn't end here.
The author goes the extra mile with the custom Fibonacci key, which generates the Fibonacci number, and the custom Password key which generates a password every time you click those keys. The Ruby mode on the keyboard lets you execute small ruby codes from your text editor, literally letting you carry a ruby environment with you. The keyboard is essentially ruby, Indeed.

As anticipated, the talk was able to live up to its high expectations. The fact that the author, Hasumi-San is from Monstar Lab, made it extra special for me as a fellow employee. Creator truly has taken Ruby to the next level. The first keyboard firmware framework in ruby will definitely be the one for the books.

## Ractor's speed is not light-speed

By Satoshi "moris" Tagomori

Ractor is designed to run ruby code in parallel, introduced from the newer version of Ruby. Even though it is still in the experimental phase, Ruby with Ractor sounds like an exciting prospect. The talk covered how Ractor will introduce new features which will boost the execution speed. The “shareable” objects (Modules, Classes) that can be shared between the ractors, which are running in parallel on multiple CPU cores will do the job for us.
Even though Ractor sounds like a very good thing that can happen to ruby, it is still a big leap away from being production-ready.

## Do regex dream of Turing Completeness?

By Daniel Magliola

The presentation was really a treat to the eye, demonstrating Conway's game of life by using complex ruby regex expressions. Once he was able to implement it to a great extent, now he was pushing for the bigger prize, Turing completeness, with all the power vested in him by the Regex expressions. Maybe the author Daniel Magliola wouldn't have cracked the German code during world war 2, but definitely wouldn't have gone down without a fight.

## Charty: Statistical data visualization in Ruby

By Kenta Murata

Ruby is well established and has proven itself as a widely accepted general-purpose programming language. But have you ever thought of building charts and plots with ruby, making it a decent data visualization tool? This is what the creator Kenta Murata-San achieves with his library, called Charty. Charty, a statistical data visualization tool, can create scatter and line plots (Relational plots), bar and box plots (Categorical plots), and distributional plots (histogram plots) for your data. The fact that Charty can generate these plots from a table makes it extra special.

## Conclusion

If I were to define RubyKaigi in a line, it would be like this: a marathon of an amazing and diverse lineup of talks. Even for me, as a seasonal Rubyist, it got me buzzing with excitement. While 2020 hasn’t been easy for anyone, fortunately, Ruby didn’t show any signs of slowing down. What the future holds for this underrated programming language is definitely exciting. The end.

## Reference

You can watch all the talks here:
https://www.youtube.com/playlist?list=PLbFmgWm555yYgc4sx2Dkb7WWcfflbt6AP


Ravishing Ruby: Looking back at RubyKaigi Takeout 2021


Can you believe it’s already been an entire year since I had the opportunity to join my first ever developers
conference, the RubyKaigi? Over the past three days, I was blessed with the opportunity to also enjoy this year’s
talks and sessions, and get once again the opportunity to immerse myself in the Ruby ecosystem that I had to,
unfortunately, leave behind for the time being due to project assignments. In this article, I’d like to highlight
some of my favourite moments from the conference.

## About RubyKaigi

Before I delve into the details on various sessions, let me just make sure we’re all on the same page by reiterating
what RubyKaigi is in the first place. [RubyKaigi](https://rubykaigi.org/2021-takeout) is the largest conference for
Ruby programmers held annually in Japan since 2006. Just like last year, while some of the presentations and
discussions are done in Japanese, there was a simultaneous live audio translation service available for the numerous
international members of the community that do not have the luxury of knowing the Japanese language.

Finally, just like last year, this year’s RubyKaigi format has been altered into an online-only conference. I hope that
next year, we can all go back to the original format of an in-person conference.

## TypeProf for IDE

The conference kicked off into high gear with
[Yusuke Endoh-san’s keynote presentation](https://rubykaigi.org/2021-takeout/presentations/mametter.html) on the
benefits of static typing and [TypeProf](https://github.com/ruby/typeprof), a code analysis tool shipped with Ruby 3.0,
that is capable to analyze the types of your code without having to write every single type annotation. Today’s special
announcement followed just shortly after, and it took the form of TypeProf for IDE, an extension for Visual Studio Code
powered by TypeProf.

TypeProf for IDE can already today provide on-the-fly hints on method signatures (displayed conveniently in Code Lens),
report errors as you type, find definitions of methods you call and offer code completion which takes types into
consideration. Of course and as always, if TypeProf guesses the type of your method incorrectly, you can manually
override that inferred type signature by manually specifying the method signature using RBS. TypeProf for IDE will ship
with Ruby 3.1, but if the above description already got you excited (as it should!), you can start using it
[today](https://gist.github.com/mame/86234de6a58352b9f994e0f8a6d6fbc2) by following a couple of manual steps.

I welcome TypeProf for IDE as an exciting addition to the Ruby ecosystem that will allow for comfortable development
even in light-weight editors, because it should not be needed to open a full-blown IDE (don’t worry, I still love you,
RubyMine) just to write a simple script or make a small change in your code.

## Ruby Archaeology, parallel testing with Ractors and the danger of regular expressions 💎⛏

Many other great sessions were happening on the first day of RubyKaigi, but if I had to highlight only three,
then [Ruby Archaeology by Nick Schwaderer](https://rubykaigi.org/2021-takeout/presentations/schwad4hd14.html) would have
to be one of my them for sure. In his talk, Nick looked into the ancient history of Ruby and explained all the hoops and
traps he had to overcome and work his way around to get a 12-year-old version of Ruby working. Even though Ruby itself
would run just fine in an appropriate operating system for that time, to my surprise, most of the problems seemed to lie
elsewhere – in particular, by relying on remote resources that may not be accessible the same way as they used to be, or
just might be gone in the digital heaven altogether. Fortunately, if you want to follow in Nick’s footsteps and become a
time traveller yourself, you [won’t have to work quite as hard as he did](https://github.com/Schwad/portal_gun).

Finally, I’d like to highlight
[Vinicius Stock’s presentation and work](https://rubykaigi.org/2021-takeout/presentations/vinistock.html) on a test
framework that would leverage the power of Ractors to achieve faster test execution (because having a slow test suite is
the best way to discourage your developers to run it) and
[Martin J. Dürst’s tour into the land](https://rubykaigi.org/2021-takeout/presentations/duerst.html) of amazing, yet
sometimes dangerous regular expressions.

## Keyboard is essentially Ruby, or ⌨️ = 💎

Okay okay, I might be biased but I still have to say this: the personal highlight of the second day, if not the entire
conference, would really have to be our
[Monstarlab’s Hitoshi Hasumi-san’s presentation](https://rubykaigi.org/2021-takeout/presentations/hasumikin.html) on
[PRK Firmware](https://github.com/picoruby/prk_firmware) – and that’s a pretty crazy achievement if you consider how
amazing the rest of the speakers and presentations were!

In his live presentation, Hasumi-san kept blowing the audience collective minds in regular intervals. On the first
level, it’s already incredibly impressive to be able to program the firmware of your custom-built keyboard in Ruby.
On the next level, it’s even more impressive to be able to dedicate certain keys to execute Ruby code, as Hasumi-san
demonstrated with his Fibonacci key and password generator key. And then on whole another level from another universe,
it’s truly mind-blowing to have a “Ruby key” which turns the combination of your keyboard and any text editor (even as
simple as `Notepad.exe`) into essentially an IRB shell. You can truly take your Ruby with you anywhere you go – but
before you actually go, don’t forget to read
[Hasumi-san’s article on static type checking](https://engineering.monstar-lab.com/2021/05/27/Static-type-checking-in-PicoRuby)
in PicoRuby if you missed it earlier!

## Graphical Terminal User Interface of Ruby 3.1

I have to come clean, I’m a big fan of smart, intuitive and user-friendly terminal user interfaces, or TUIs for short.
IRB is already a very smart REPL (read-evaluate-print-loop, something every self-respecting programming language should
provide) environment with its powerful auto-completions, automatic indentations and even syntax highlighting, but it
seems that [Itoyanagi Sakura-san’s plans](https://rubykaigi.org/2021-takeout/presentations/aycabta.html) don’t stop
there: by improving the Reline library, IRB in Ruby 3.1 will offer not only code auto-completion using the `Tab` key as
before, but will even show you all possible options in a lovely drop-down menu, just like any IDE would!

## Do regex dream of Turing completeness? 😴💭

Finally, the third and final day of RubyKaigi kicked off with
[Daniel Magliola’s investigative goal](https://rubykaigi.org/2021-takeout/presentations/dmagliola.html) of finding out
whether regular expressions are Turing-complete by trying to implement
[Conway’s Game of Life](https://playgameoflife.com) entirely in a regular expression. I think I won’t spoil much
by sharing the conclusion – which is the realization that regular expressions are not fully Turing-complete, but
they’re not that far off the mark – because the entire talk is absolutely worth watching and shows not only Daniel’s
ingenuity and inventiveness, but also the power and quirks of regular expressions that you likely were not aware of
before.

## Native extensions and dead ends

Following up was an interesting talk by
[Mike Dalessio on the topic of native extensions](https://rubykaigi.org/2021-takeout/presentations/flavorjones.html)
(“this could take a while…”, a message we all likely saw in the past and sighed just a bit anytime it appeared in our
terminals) and native gems, which contain the pre-compiled libraries for a specific architecture, thus removing the need
to compile the C extensions yourself.

Richard Schneeman demonstrated in an
[incredibly professionally done presentation](https://rubykaigi.org/2021-takeout/presentations/schneems.html) his work
on the [`dead_end`](https://github.com/zombocom/dead_end) which will help you next time quickly diagnose and fix all of
your “unexpected end” error messages with ease. It can diagnose missing `end` and `do` keywords as well as unmatched `|`
and `}` symbols, and I’d love to both try it myself soon and also have it included in Ruby itself.

## Closing keynote by Yukihiro “Matz” Matsumoto

Finally, the conference concluded with
[Yukihiro Matsumoto-san’s closing keynote](https://rubykaigi.org/2021-takeout/presentations/yukihiro_matz.html).

In the first half, he looked back at the relatively recent release of Ruby 3.0, which was both a first major release
in nearly eight years (since Ruby 2.0’s original release), but also a release that still kept the importance of
backward compatibility in mind, because as surprising as that might be to some communities, developers don’t really
like new things if it means that their old code stops working and has to be re-written.

Matsumoto-san highlighted the wonderful additions that Ruby 3.0 brought to the developers, such as support for type
definitions with RBS, which are conceptually similar to TypeScript’s `d.ts` files – or personally, I feel that they
are very similar in both nature and syntax to Elixir’s Dialyzer typespecs. Numbered block parameters and support for
pattern matching (funnily enough, two more features that I love in Elixir and am so happy to see in Ruby) were also
mentioned, as well as two approaches for better concurrent programming: Fiber Scheduler with its fast context switching
is ideal for I/O heavy operations, while Ractor is here to save the day for all the CPU-intensive tasks.

After that, the presentation shifted focus to the upcoming release of Ruby 3.1. It was stated that Ruby 3.1 will be
a conservative release with the main goals of improved stability, more bug fixing, and especially two things:
_developer comfort_ (thanks to a more powerful IRB and TypeProf for IDE) and _even more speed_ – but ideally, it would
be a speed that doesn’t come in the form of pointless number-chasing in artificial benchmarks, but rather a speed that’s
more closely related to where speed is truly needed in real-world applications.

I cannot but applaud the decision to focus on these two aspects, as I find the developer’s comfort one of the key
elements in a programming language’s viability, and unfortunately, the rest of the world judges languages by the other
aspect. I can’t wait to see what the future brings to Ruby, and I hope to participate in RubyKaigi also next year!


RubyKaigi Takeout 2021: A Look Back


Navigation is the key part of application development and Android is no exception. From Activities and Fragments transitions to Navigation Component and now, Navigation Component is available for Jetpack Compose! In this article, I would like to give a brief overview of how Jetpack Compose Navigation works, the problems I’ve faced, and my solution for it. Let's get started 🙂 !

> **Disclaimer**
> Since Jetpack Compose is still in its early stages and its Navigation APIs are still in alpha, in Monstarlab we don't yet fully rely on Jetpack Compose Navigation APIs when building Android applications. It doesn't mean that we don't play around with it however and that's where the idea for this article (and the library you will learn about) came from =).

## Your First Route

When using the original Navigation Component, we used XML to describe our navigation. There we could declare the arguments for our destination and transitions between them. In Compose world, of course, we use functions :)

> *The example I will be using in the following section is a slightly modified example taken from the developer.android.com —* [_Navigating with Jetpack Compose_](https://developer.android.com/jetpack/compose/navigation) _. Make sure to visit it in case you need more information_

We start by declaring a `NavHost` and then we can build our navigation graph by adding destinations using `composable()` function. It takes a path URI and a `@Composable` as the destination content

```kotlin
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("details") { DetailsScreen() }
}
```

We’ve just set up our first destinations, lets add some action into our code by adding a transition from `"home`" to `"details"`. Compose Navigation Component makes it pretty easy as well, all we need to do is to tell our `navController` the path we want to navigate to

```kotlin
composable("home") {
  HomeScreen(onClick: { navController.navigate("details") })
}
```

### Arguments Support

Let's imagine our Details route needs two arguments: an optional `Int` called **number** and a mandatory `String` called **id**. To support an ability to pass the arguments you need to do two things: adjust the path so that the Navigation Component knows that this route can accept arguments and describe the type of the arguments. This is how it looks like in our case

```kotlin
NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen(/*...*/) }
    composable("details/{id}?number={number}",
        arguments = listOf(
          navArgument("id") { type = NavType.StringType }
          navArgument("number") { type = NavType.IntType; defaultValue = 1 }
        )
    ) {...}}
```

Now for our detail transition, it won’t be enough to specify just the destination name like we used to — we need to provide arguments too, at least id anyway, as the optional param will be set to our default value.

```kotlin
navController.navigate("details/myFancyId?number=21")
```

The next step is to obtain the arguments. This can be done in multiple ways, either from the `NavBackStackEntry` or from the `SavedStateHandle` (this can be injected in our `ViewModel`)

Note that in both cases, the value you receive can be `null`, so that must be addressed in some way.

```kotlin
/**
* Get args from NavBackStackEntry
**/
composable(/** our details route **/ ) { backStackEntry ->
    val id: String? = backStackEntry.arguments?.getString("id")
    val number: Int? = backStackEntry.arguments?.getInt("number")
    DetailsScreen(id, number)
}

/**
* Get args from SavedStateHandle
**/
class DetailsScreenViewModel @Inject constructor(
  savedStateHandle: SavedStateHandle
) {
  init {
    val id: String? = savedStateHandle.get<String>("number")
    val number: Int? = savedStateHandle.get<Int>("name")
  }
}
```

### The elephant in the room 🐘

By now, you have probably noticed how much boilerplate code we have to just support these two routes and more importantly, how many hard-coded strings we have. Each navigation stage: declaration, arguments handling, and navigation actions, all use the path and parameters. Moreover, the arguments handling is very poor since we always need to be aware of the argument name and its type.

To reduce this overhead you can wrap your destinations in a `sealed class` , for example, that will clean up the code for sure, but it won't solve all the problems.

Remember the original Navigation Component? Well, it has `safeArgs` , a very useful plugin that generates code that allows handling arguments in a very clean and safe way. When I started to work with Jetpack Compose and its Navigation Component I immediately noticed that I miss this functionality, so I've decided to write one myself 👨‍💻 .

## Introducing Safe Routing Library

At its core, `safe-routing` is an annotation processing library that generates a code that will handle most of the boilerplate code and hardcoded strings and will provide a safe way to navigate between your composables and ease up arguments handling.

### Installation

in your project level `build.gradle`

```kotlin
allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}
```

And then in your app-level `build.gradle`

```kotlin
dependencies {
    kapt("com.github.levinzonr.compose-safe-routing:compiler:2.1.0")
    implementation("com.github.levinzonr.compose-safe-routing:core:2.1.0")
}
```

Let's sync our project and apply some annotations to clean up our code. `safe-routing` provides two annotations for you to describe the routes. Meet `@Route` and `@RouteArg`

- `@Route` is used to describe your Route, its constructor accepts a route name and the arguments for it
- `@RouteArg` is used to describe the arguments for your Route, it accepts several parameters: the name, type, a flag to tell whether that argument is optional or not and a String representation of the default value. Note that the default value will only be used in case the argument is optional.

Okay, now it's time to revisit our navigation code 🙂 .

### Basic Setup

To start, all we have to do is to apply the annotations for our two routes

```kotlin
@Composable
@Route(name = "details", args = [
    RouteArg("id", RouteArgType.StringType, false),
    RouteArg("number", RouteArgType.IntType, true, defaultValue = 1.toString()),
])
fun DetailsScreen() {
  /** your sweet composable code **/
}

@Composable
@Route("home")
fun HomeScreen() {
  /** your sweet composable code **/
}
```

That's it! After rebuilding the project, several new Kotlin files will be generated. Here is a quick description, but if you want to see what it actually looks like, in this particular example, check [this gist](https://gist.github.com/levinzonr/2acc21de9050da35d2929112310fc7b5#file-generatedexample-kt)

- `Routes.kt` - This file contains all your routes descriptions that can be used to declare the destinations in our`NavGraphBuilder` using the `RouteSpec` interface. `RouteSpec` knows everything for successful navigation: the name of the route, its arguments, and how to obtain them.
- `RoutesActions.kt` - This file contains the Nav Actions for your routes. Similar to `NavDirections` from `safeArg` plugin, it will build a proper path only accepting the arguments you provided in the annotations.
- `*RouteArgs.kt` and `*RouteArgsFactory.kt` -> for every route that contains arguments an Argument Wrapper and Factory will be generated - `DetailsRouteArgs.kt` and `DetailsRouteArgsFactory` in our case.

### Usage

Now let's start using all this code that's been generated, starting with our `NavGraphBuilder`. `Routes.kt` now contains two objects `Details` and `Home` and they both extend `RouteSpec` interface, which gives us access to the following properties:

- `route` - full path of the route including the arguments we specified
- `navArgs` - list of the `NamedNavArgument` to fully describe our arguments
- `argsFactory` - an object that will help us to obtain our arguments from various places

Let's put them to good use 🙂 . Here we are using `route` and `navArgs` properties to describe your route, and `RouteArgsFactory` to obtain the arguments that are being passed

```kotlin
NavHost(
  navController = navController,
  startDestination = Routes.home.route
) {
  composable(route = Routes.Home.route) { HomeScreen() }
  composable(routes = Routes.Details.route, arguments = Routes.Details.navArgs) {
    val args = DetailsRouteArgsFactory.fromBackStackEntry(it)
    DetailsScreen(args)
  }
}
```

But since we are dealing with the RouteSpec interface we can make this declaration even shorter!. SafeRoute lib provides `composable` extension functions that accept`RouteSpec` as the main parameter. Another one is `composableWithArgs` that will handle arguments retrieving for you.

```kotlin
NavHost(
  navController = navController,
  startDestination = Routes.home.route
) {
  composable(Routes.Home) { HomeScreen() }
  composableWithArgs(Routes.Details) { entry, args -> DetailsScreen(args)}

}
```

Our only transition also needs some love, lets use our `RoutesActions.kt`

```kotlin
composable(Routes.Home) {
  HomeScreen(
    onClick = {
      navController.navigate(RoutesActions.toDetails(id = "MyFancyId", number = 0))
      // navController.navigate(RoutesActions.toDetails("myId")) in case we don't want to pass the number
    }
  )
}
```

Bonus, in case you are wondering about how to pass the arguments directly to the ViewModel

```kotlin
class DetailsScreenViewModel @Inject constructor(savedStateHandle: SavedStateHandle) {
  init {
    val args = DetailsRouteArgsFactory.fromSavedStateHandle(savedStateHandle)
  }
}
```

And that's it!

## Afterword

Thank you for your time! I really enjoyed making this tiny little library and I hope you can find it useful! I will really appreciate any feedback and suggestions so feel free to reach out to me 🙂 . SafeRoute already had quite a few updates, and it now [supports](https://github.com/levinzonr/compose-safe-routing/blob/master/RELEASE_NOTES.md/#210-release-notes) Animations and Material Destinations from the [Accompanist](https://github.com/google/accompanist) library Here is the [GitHub page](https://github.com/levinzonr/compose-safe-routing) for those of you who want to know more.

_Article photo by [Siyuan](https://unsplash.com/@jsycra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/RyUWQxgN6RI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_


Safe Navigation With Jetpack Compose


There are now over 1 billion augmented reality enabled iPhones and iPads which gives an incredible reach for your experiences. Here is an overview of what we know so far from this year's [WWDC](https://developer.apple.com/wwdc21/) when it comes to augmented reality, with more details to unravel this week after the engineering sessions. You can find a list of recommended AR sessions and challenges to check out from this year's WWDC at the end of the article.

## [RealityKit 2](https://developer.apple.com/augmented-reality/realitykit/)

Introduced in 2019, RealityKit is Apple's rendering, animation, physics, and audio Swift framework built from the ground up with augmented reality in mind. This year, RealityKit gets some great improvements:

### Object Capture API

![]({{ sitePrefix }}/assets/img/articles/2021-06-08-WWDC21-A-first-look-at-Apples-new-Augmented-Reality-features/objectcapture.jpg)
_Image source: [Apple](https://developer.apple.com/videos/wwdc2021/)_

Object Capture is a new API on macOS Monterey that enables anybody to create high-quality, photo-realistic 3D models of real-world objects in minutes. The biggest step-back I have seen for adding augmented reality capabilities to businesses is the cost of 3D content creation. So this new feature is massive for the AR world, especially for the E-commerce industry. You can use an iPhone, iPad or even a DSLR to take pictures and transform them into 3D models optimized for AR. You will be able to generate USDZ, USD and OBJ files with the level of detail you wish.

![]({{ sitePrefix }}/assets/img/articles/2021-06-08-WWDC21-A-first-look-at-Apples-new-Augmented-Reality-features/gallery.jpg)

AR Quick Look is a great way to showcase your models created with Object Capture. Apple has even updated their [AR Quick Look Gallery](https://developer.apple.com/augmented-reality/quick-look/) with new 3D model examples created with Object Capture, and I must say, I am very impressed!

![]({{ sitePrefix }}/assets/img/articles/2021-06-08-WWDC21-A-first-look-at-Apples-new-Augmented-Reality-features/shoe.jpg)

Unity has been working closely with Apple to bring this new feature into their AR Companion app ([Unity MARS](https://blog.unity.com/technology/mars-companion-apps)). You can read more about Apple's collaboration with Unity in [this article](https://blog.unity.com/technology/unity-reveals-latest-ar-companion-app-feature-at-apple-wwdc-21).

### Custom Shaders

Custom shaders give developers more control over the rendering with custom render targets and materials. This update will make Apple AR experiences even more realistic.

![]({{ sitePrefix }}/assets/img/articles/2021-06-08-WWDC21-A-first-look-at-Apples-new-Augmented-Reality-features/shaders.gif)
_Video source: [Apple](https://developer.apple.com/videos/wwdc2021/)_

### Dynamic assets

The loading of assets is now more flexible, giving the option for example to programmatically change an image with every frame.

### Improved Entity Component System

A new `System` object is available which will affect multiple entities in every frame of a RealityKit scene. Developers will be able to organize their assets better and build more complex apps.

### Character Controller

Great addition for AR games, developers will now be able to control the characters and make them jump, scale and explore the AR worlds.

## [ARKit 5](https://developer.apple.com/augmented-reality/arkit/)

ARKit helps developers build powerful augmented reality experiences for millions of users worldwide. Here are the main updates announced this year:

### Location Anchors (in more cities)

Location anchors were introduced in 2020 but with a limited availability in major United States cities. The update we are getting this year is additional cities including London. AR Coaching UI will also now support location anchors with a new `geoTracking` goal, meaning that you can easily guide your users through location based experiences.

### Expanded Face Tracking support

Face Tracking support has been extended on the Ultra Wide camera on iPad Pro (5th generation). If you want to learn more about how to create AR Face filters, you can check out my Borderless Engineering Conference talk on the topic [Youtube video](https://youtu.be/xSLDST-a6qU).

### Improvements to Motion Tracking

With ARKit, you can capture the motion of a person in real time with a single camera, previously possible only with special equipment. Great potential with this ARKit feature, so it is exciting to see what improvements they are bringing to it.

### App Clip Code Anchors

Great addition to the list of supported ARKit anchors, you will be able to place your virtual content to a printed or digital App Clip Code.

![]({{ sitePrefix }}/assets/img/articles/2021-06-08-WWDC21-A-first-look-at-Apples-new-Augmented-Reality-features/appclips.gif)
_Video source: [Apple](https://developer.apple.com/videos/wwdc2021/)_

## Apple Smart Glasses

Still no Apple Smart Glasses announced, but that was expected. However, if you would like to catch up with the latest rumors, I can recommend [this in-depth roundup article from MacRumors](https://www.macrumors.com/roundup/apple-glasses/).

## WWDC21 AR sessions

- [Create 3D models with Object Capture](https://developer.apple.com/videos/play/wwdc2021/10076/)
- [Dive into RealityKit 2](https://developer.apple.com/videos/play/wwdc2021/10074/)
- [AR Quick Look, meet Object Capture](https://developer.apple.com/videos/play/wwdc2021/10078/)
- [Explore advanced rendering with RealityKit 2](https://developer.apple.com/videos/play/wwdc2021/10075/)
- [Explore ARKit 5](https://developer.apple.com/videos/play/wwdc2021/10073/)
- [Create 3D workflows with USD](https://developer.apple.com/videos/play/wwdc2021/10077/)

## WWDC21 AR challenges

[WWDC21 Challenges](https://developer.apple.com/wwdc21/challenges/) are a fun way to dive right into the latest technologies and frameworks. Each day brings new challenges you can share on the Apple Developer Forums. This year, we have 2 augmented reality related challenges:

1. Create your first 3D model with Object Capture (Tuesday)
2. Framework Freestyle (Thursday) - build and ARKit sample app in 100 lines of code or less

## Resources

- [Augmented Reality - Apple Developer](https://developer.apple.com/augmented-reality/)
- [Building Augmented Reality experiences with iOS - Engineering Awesome Conference 2020](https://youtu.be/v2Br76XFAYQ)
- [Easy web augmented reality with AR Quick Look]({{ baseurl }}2020-09-07-Easy-web-augmented-reality-with-ar-quick-look)
- [How to convert 3D models to USDZ files using Apple's Reality Converter]({{ baseurl }}2020-04-26-how-to-convert-3d-models-to-usdz-files-using-apples-reality-converter)
- [Using USDZ for a better AR experience]({{ baseurl }}2019-10-07-Using-USDZ-for-a-better-AR-experience)
- [How to make an augmented reality decorating experience app with AR Quick Look]({{ baseurl }}2019-12-31-How-to-make-an-Augmented-Reality-decorating-experience-app-with-AR-Quick-Look)

_Article Photo by [Apple](https://developer.apple.com/videos/wwdc2021/)_


WWDC21 - A first look at Apple's new Augmented Reality features


The static type system ensures correspondence of the "type" among arguments, parameters, and return values.
The point is that you can notice some kinds of bugs in advance of execution.

Static typing languages like TypeScript, Go, and Swift are mainstream in programming nowadays.
Because the IT industry has grown and the division of labor has been promoted, the benefit of static typing is quite remarkable.

So, how are dynamic typing languages like PHP, Python, and Ruby catching up the tide?

## Gradual typing and annotations

PHP offers "Type declarations" from version 5 and the possibility of declaration is getting broader.

```php
function sayhello(string $name): string
{
  return print('Hello ' . $name);
}
sayhello("Monstar");
=> Hello Monstar
```

Python 3 has introduced "Type hints" which allows you to annotate a type of variables and functions.

```python
def sayhello(name: str) -> str:
  return print('Hello ' + name)
sayhello('Monstar')
=> Hello Monstar
```

Both PHP and Python support gradual static typing by their languages themselves.
In other words, they deal with the types in syntax parsing.

## Not the syntax, but a library

Matz says that Ruby will not introduce any syntax-level type annotations. I agree with his philosophy since once a language has introduced a static type system in its syntax, it should be maintained to keep backward compatibility. It will possibly be a negative legacy.

Instead, the Ruby ecosystem introduced "RBS" as an exclusive language that describes the structure of a Ruby program.
And you can check the types of your Ruby values described in RBS with "Steep" which is a gradual static type checker.
The point is that both RBS and Steep aren't supported by the syntax of Ruby.

Because CRuby thus offers static type checking as libraries instead of its syntax parsing, unlike PHP and Python, other Ruby language implementations like JRuby and mruby can gracefully take advantage of it, too.

**This is, indeed, a hidden innovation!**

## Static type checking in firmware programming

I wrote about PicoRuby and PRK Firmware in [my previous article "PicoRuby"](/2021/04/13/PicoRuby) the other day.
In short, PicoRuby is a Ruby implementation for microcontrollers.
PRK Firmware is a framework of keyboard firmware in PicoRuby.

One thing troublesome to develop firmware for microcontrollers is debugging on actual devices.
You need to build an executable from your application program, detach the USB cable from your dev board (because you must have connected it just before, right? :), reconnect the cable while pushing a boot button on the device, then flash the executable to the device's ROM with a flashing script.

You have to do a messy procedure like this every time you amend the program.
That's why you really need to find trivial mistakes such as assigning a String to a variable that should accept only a Symbol while building an executable.

On the other hand, when you write a Rails application, you can easily fix your TYPO without rebooting Rails server.

You now understand why RBS and Steep are good news for PicoRuby in particular.

## How RBS and Steep work together in PicoRuby

If you want to know about RBS and Steep, there is nothing better than the official documentation listed at the bottom of this article.
However, there is still worth showing how RBS and Steep bring a benefit.

### Types in parameters and arguments

(All the example code below is abbreviated for explanation)

Let's say Keyboard class has `add_layer` method to let you be able to configure your keymap.

```ruby
# in keyboard.rb
class Keyboard
  def add_layer(name, map)
    new_map = Array.new(map.size)
    map.each_with_index do |row, row_index|
      new_map[row_index] = Array.new(row.size)
      row.each_with_index do |key, col_index|
        keycode_index = KEYCODE.index(key)
        new_map[row_index][col_index] = if keycode_index
          keycode_index * -1 # Integer
        else
          key                # Symbol
        end
      end
    end
    @layers[name] = new_map  # Array[Array[Integer | Symbol]]
  end
end

# in keyboard.rbs which describes the structure of Keyboard class
class Keyboard
  def add_layer: (Symbol name, Array[Array[Symbol]] map) -> void
end
```

`keyboard.rbs` tells that `add_layer` method accepts two arguments.
The first one is `name` and should be a Symbol.
The latter is `map` and should be an Array of Array of Symbol.

You can call `Keyboard#add_layer` and `steep check` successfully passes like this:

```ruby
keyboard.add_layer :default, [
  %i(KC_ESCAPE KC_Q KC_W KC_E KC_R KC_T KC_Y KC_U KC_I KC_O KC_P KC_BSPASE),
  # The Array of Symbol goes on...
]

$ steep check
# Type checking files:
...............
No type error detected. 🍵
```

You will be warned if you mistakenly wrote like this:

```ruby
keyboard.add_layer "default", [
  %i(KC_ESCAPE KC_Q KC_W KC_E KC_R KC_T KC_Y KC_U KC_I KC_O KC_P KC_BSPASE),
  # The Array of Symbol goes on...
]

$ steep check
# Type checking files:
.............F.
keymap.rb:22:19: [error] Cannot pass a value of type `::String` as an argument of type `::Symbol`
│   ::String <: ::Symbol
│     ::Object <: ::Symbol
│       ::BasicObject <: ::Symbol
│
│ Diagnostic ID: Ruby::ArgumentTypeMismatch
│
└ keyboard.add_layer "default", [
                     ~~~~~~~~~
Detected 1 problem from 1 file
```

### Types in instance variables

As a result of `add_layer` method, the instance variable `@layers` should be a Hash with Symbol as a key and Array of Array of "Integer or Symbol" as its value.
The RBS code below ensures it (and has a type definition of `@special_procs` mentioned later):

```ruby
# keyboard.rbs
class Keyboard
  @layers: Hash[Symbol, Array[Array[Integer | Symbol]]]
  @special_procs: Hash[Symbol, Proc]
end
```

Steep understands you are handling the variable as a specific type by a comment form annotation `# @type var key: Symbol`.

```ruby
layer = @layers[:default]
layer.each do |rows|
  rows.each do |cols|
    cols.each do |key| # at this point, `key` should be an Integer or a Symbol
      next if key.is_a?(Integer)
      # @type var key: Symbol
      @special_procs[key].call
    end
  end
end
```

Because a comment form annotation is just a comment in terms of Ruby syntax, there is no compatibility issue if Ruby's type system is basically changed in the future.
There are also no worries that type annotation syntax will be an obstruction against a new syntax.
This is what Matz says, I think.

Lastly, Steep sharply makes you notice if you mistakenly call `each` method for `key` that should be an Integer or a Symbol before you are going to flash your executable into the device which will crash for sure 💥

```ruby
      case key.class
        ...
      else
        key.each { do_something }
      end

$ steep check
[error] Type `(::Symbol | ::Integer)` does not have method `each`
│ Diagnostic ID: Ruby::NoMethod
│
└      key.each { do_something }
           ~~~~
```

## Conclusion

- RBS is an independent language that describes the type information of a Ruby program
- Steep is a library that statically checks types in Ruby program using RBS formed annotations
- CRuby syntax itself doesn't suport static type checking
- Therefore, other implementations of Ruby can use RBS and Steep. Even PicoRuby can do it❗
- Static type checking in firmware programming is truly helpful

## Resources

- [Matz's keynote in RubyConf 2016](https://www.youtube.com/watch?v=1l3U1X3z0CE&t=1516s) describing his opinion about type checking
- RBS [https://github.com/ruby/rbs#readme](https://github.com/ruby/rbs#readme)
- Steep [https://github.com/soutaro/steep#readme](https://github.com/soutaro/steep#readme)
- Although this article didn't mention, you may also want to check [TypeProf](https://github.com/ruby/typeprof#readme)
- Find how PRK Firmware actually handles RBS and Steep in practice here: [https://github.com/picoruby/prk_firmware/tree/master/src/ruby](https://github.com/picoruby/prk_firmware/tree/master/src/ruby)

![Helix low profile version with PRK Firmware on Raspberry Pi Pico]({{ sitePrefix }}/assets/img/articles/2021-05-27-Static-type-checking-in-PicoRuby/header.jpg)

_Article Photo by [hasumikin](https://twitter.com/hasumikin)_


Static type checking in PicoRuby


**TL;DR:** We built a Node.js backend starter kit based on [NestJS Framework](https://github.com/nestjs/nest).
It follows a **Monolithic** architecture and implements **REST APIs**.

The starter kit is completely open source and can be found at this [Github Repo](https://github.com/monstar-lab-oss/nestjs-starter-rest-api).

## Introduction

[Monstarlab](https://monstar-lab.com/global/) is a product development and consultation company, which helps other organizations solve their business problems, with the help of the latest technological solutions.

We engineers at Monstarlab tend to work on new customer projects every 4-6 months. We noticed that every time we kickstarted a new project, we spent a considerable amount of time on choosing our technology stack, software architecture, etc.

While we agree that there are no silver bullets, we concluded that some things could be improved in this regard. For instance, we do not need to redesign our logger service, our request validators, JWT authentication middleware, etc. every single time!

**Tada!** Hence this starter kit.

## The Game plan

This wasn't the first time one of us decided something like this needs to be done. Many of us have tried to solve this issue in the past, but unfortunately have failed due to a variety of reasons like time management, motivation, the difference of opinions, etc.

We were worried this time could turn out to be no different, hence we decided to try out a few things differently.

#### Keeping it open source.

In our previous attempts at doing this, we noted we lost motivation halfway due to various reasons. Keeping it open source allowed us to develop a sense of achievement, that we could share this project with others in the community even outside of our organization.

#### Sponsored Hackathons.

Almost all of us contributing to this project could only do so in our free time. Since the weekdays mostly go towards working on the business problems and projects directly with our clients, the time we could spend on this was very limited.

After brainstorming a bit on this issue, we decided to hack away at this starter kit on our weekends.
Monstarlab was kind enough to offer us generous amounts of free food to run these hackathons.
This gave us a chance to keep up with our release timelines for the starter kit project.

![]({{ sitePrefix }}/assets/img/articles/2021-04-30-NestJS-Starter-Kit-Monstar-Lab-Edition/Q3-B&W.png)

#### We need to go left, no right...

What do we put in this starter kit. What do we **NOT** put in this starter kit. These discussions were always difficult and time consuming.

The conclusion was as follows:

- There will be 2 main types of starter kits, one based on monolithic pattern, and the other one based on microservices.
- Within monolithic, we decided to further have REST API based and GraphQL based.
- The starter kits will be very lightweight. To include some advanced features we will also create a [Sample Solutions Repo](https://github.com/monstar-lab-oss/nestjs-sample-solutions) which will showcases some real-life production projects built on top of these starter kits.

## Our features

As pointed above, one of our main principles has been to keep the starter kit as lightweight as possible. With that in mind, here are some of the features that we have added to this starter kit.

#### Authentication:

Authentication is something that almost all of our projects need. We haven’t reinvented the wheel here. We use the popular Node.js library, PassportJS to do most of the heavy lifting for us in our JWT implementation. We use bcrypt library to ensure we are correctly hashing our passwords with salts, etc.
For more enterprise grade projects, we want to encourage everyone to use robust identity management projects like KeyCloak, Okta, etc.
We might be working on such examples in the coming future, so do keep an eye on our [Sample Solutions Repo](https://github.com/monstar-lab-oss/nestjs-sample-solutions). Do feel free to reach out to us for consultation and we can work on this on priority. :)

#### Authorization:

Based on top of authentication, the next thing that most projects require is Authorization. Authorization refers to the process that determines what a user is able to do. We have implemented a basic Role Based Access Control (RBAC) authorization module. To check out how it works and how easy it is for you to use it, refer to this [doc file](https://github.com/monstar-lab-oss/nestjs-starter-rest-api/blob/master/docs/acl.md) within the project repository.

#### ORM Integration

Object–relational mapping (ORM) is a technique that lets you query and manipulate the data from a database using an object-oriented paradigm. TypeORM encapsulates the code needed to manipulate the data, so we don't need to use raw SQL anymore.

#### DB Migrations

Migrations provide a way to incrementally update the database schema to keep it in sync with the application's data model while preserving existing data in the database.
DB Schema migrations have always been a nightmare for many of us when it comes to a relational database. TypeORM allows us to easily generate the migration files.

#### Logging

NestJS comes with its own built-in logger. But it is a text-based logger and does not suit production requirements. Hence we implemented our own custom logger based on Winston, which is a very popular production logging package.
What’s even better is that we pass a request context throughout our call stack, which allows us to do **contextual logging** with additional information like request-id, request-user, etc.

#### Request Validation

It is best practice to validate the correctness of any data sent into a web application. NestJS makes use of the powerful [class-validator package](https://github.com/typestack/class-validator) and its declarative validation decorators.

#### Pagination

No REST API feels complete without having some basic pagination in it. We went ahead and added support for simple pagination parameters like limit and offset.
Our responses also always include a child property called `meta`. This includes information like total resource count, etc which further makes the pagination implementation smoother on the frontend application side.

#### Docker Ready

Need we say more?
![]({{ sitePrefix }}/assets/img/articles/2021-04-30-NestJS-Starter-Kit-Monstar-Lab-Edition/memegenerator.jpeg)

#### Auto-generated OpenAPI

This is one of our most loved features in NestJS.
The OpenAPI specification is a language-agnostic definition format used to describe RESTful APIs. Nest provides a dedicated module that allows generating such a specification by leveraging decorators.

#### More features

Apart from these features above, our start-kit comes loaded with a bunch of minor awesomeness like prettier integration, commit-linting husky hooks, package import sorting, SonarCloud github actions, docker-compose for database dependencies, etc. :D

## Conclusion

Recently we released a major version of our starter kit based on Monolithic + REST API.

It was a “work-in-progress” for a long time, but we finally believe it is ready for everyone to try it out and provide us with their invaluable feedback.

## What’s next

#### Auto-generated ChangeLog

This is the last one in our backlog for this starter kit. After this feature, we believe we won’t be touching this particular starter kit for a while.

Next on our roadmap is a starter kit which uses GraphQL.

## Resources

- [Official NestJS Website](https://nestjs.com/)

_Article Photo by [Gaelle Marcel](https://unsplash.com/@gaellemarcel)_  
_Docker Meme Photo by [Meme Generator](https://memegenerator.net/)_


NestJS Starter Kit, Monstarlab edition


[PicoRuby (f/k/a mmruby)](https://github.com/picoruby/picoruby) is an alternative Ruby implementation dedicated to one-chip microcontrollers. The binary fits into less than 256 KB ROM and runs on less than 64 KB RAM.
This development was supported by [the Ruby Association (RA) Grant program 2020](https://www.ruby.or.jp/en/news/20201022) and mentored by **Matz** himself!
_Monstarlab is one of the developers of the Ruby programming ecosystem._

C/C++ is still the first language for microcontrollers though, script languages like Lua and MicroPython are nicely developing in embedded systems nowadays.
I, an enthusiastic Ruby fan, dreamed that Ruby would be a real choice to make hardware.
The time has come.

## Ruby in small footprint

Implementing a Ruby interpreter for microcontrollers was regarded as difficult because of its free and descriptive grammatical rules.
An upside of Ruby is also a downside in terms of a small footprint.
The unnecessity of parenthesizing arguments in method call may increase the size of the syntax parser table.
The dynamic type decision system will complicate the runtime environment.

Despite these valid observations, some people including me are trying to achieve it.
I am working at the Shimane development branch at Monstarlab Japan.

## Developing Ruby as my daily work

After my proposal was adopted by the RA Grant, I talked to Daisuke, our CTO in Japan, about whether we can work on the project as an official work of our company.
I became a "part-time committer" of the OSS at that moment since he promptly agreed to my suggestion.

Matz, the founder of Ruby, has been responsible for my mentorship during the project as mentioned above.
I could (even now I still can) text him to ask how Ruby works, why did he design Ruby like that, and what are his thoughts in reducing the memory consumption.
Thanks to Matz's big support, I successfully submitted [the final report](https://github.com/picoruby/picoruby/wiki/Final-report-for-the-Grant-Program-2020-of-Ruby-Association).

## A keyboard firmware in Ruby

Now you can freely fork and build PicoRuby, though it is probably hard to use it properly without any idea.
My next goal is to make a "killer product" to indicate that PicoRuby deserves to be your language of choice.

I definitely know you are a "keyboard lover" if you are a software programmer, right?
I have good news for you that I recently released "[PRK Firmware](https://github.com/picoruby/prk_firmware)" which is a keyboard firmware platform and runs on Raspberry Pi Pico (RP2040 chip).
`keymap.rb` which configures keymap and allows you to modify keyboard behavior can be written as follows:

### Initialize a Keyboard object and configure GPIO pins

```ruby
kbd = Keyboard.new

kbd.init_pins(
  [ 2, 3, 4, 5 ],                                 # row0, row1,... respectively
  [ 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]  # col0, col1,... respectively
)
```

Supposing you are building a 4x12 matrix, a so-called "40%" keyboard.

### Add layers as you like

```ruby
# (I skipped the right-side of the keymap)
kbd.add_layer :default, [
  %i(KC_ESC  KC_Q        KC_W        KC_E      KC_R     KC_T ...),
  %i(KC_TAB  KC_A        KC_S        KC_D      KC_F     KC_G ...),
  %i(KC_LSFT KC_Z        KC_X        KC_C      KC_V     KC_B ...),
  %i(KC_NO   KC_NO       KC_LGUI     KC_LALT   KC_LCTL  RAISE_ENTER ...)
]
kbd.add_layer :raise, [
  %i(KC_ESC  KC_1        KC_2        KC_3      KC_4     KC_5 ...),
  %i(KC_TAB  KC_F1       KC_F2       KC_F3     KC_F4    KC_F5 ...),
  %i(KC_LSFT KC_LBRACKET KC_RBRACKET KC_SCOLON KC_MINUS KC_PLUS ...),
  %i(KC_NO   KC_NO       KC_LGUI     KC_LALT   KC_LCTL  RAISE_ENTER ...)
]
```

You don't need to insert `,` (comma) between `KC_x` and `KC_x` while QMK firmware requires you to do.

### Define "mode" keys

```ruby
#                   Your mode       Keycode or  Keycode or Proc                     Release time      Re-push time
#                   key name        Proc when   while you keep press                threshold(ms)     threshold(ms)
#                                   you  click                                      to consider as    to consider as
#                                                                                   `click the key`   `hold the key`
kbd.define_mode_key :RAISE_ENTER, [ :KC_ENTER,  Proc.new { kbd.hold_layer :raise }, 200,              150 ]
kbd.define_mode_key :LOWER_SPACE, [ :KC_SPACE,  Proc.new { kbd.lock_layer :lower }, 200,              150 ]
```

You will easily see `Proc` object works particularly.

### Want to input ":" without Shift and ";" with Shift?

Sure!

```ruby
kbd.before_report do
  kbd.invert_sft if kbd.keys_include?(:KC_SCOLON)
end
```

## Conclusion

What do you say?
I hope you find `keymap.rb` is better than other firmware platforms :)

PRK Firmware will be frequently updated as it is still public beta.
Please check my [Twitter](https://twitter.com/hasumikin) and [GitHub](https://github.com/picoruby) if you want to be notified.

## Resources

- [PicoRuby](https://github.com/picoruby/picoruby)
- [Final report for Ruby Association](https://github.com/picoruby/picoruby/wiki/Final-report-for-the-Grant-Program-2020-of-Ruby-Association)
- [PRK Firmware](https://github.com/picoruby/prk_firmware)
- [Yukihiro Matsumoto a.k.a Matz (the founder of Ruby)](https://en.wikipedia.org/wiki/Yukihiro_Matsumoto)

![Developing PRK Firmware on Raspberry Pi Pico]({{ sitePrefix }}/assets/img/articles/2021-04-13-PicoRuby/header.jpg)

_Article Photo by [hasumikin](https://twitter.com/hasumikin)_


PicoRuby


Authorization and Authentication (AuthZ and AuthN) are very critical parts of any system for identity and permissions validation and enforcement, **AuthN** is basically the process to verify who the user is, while **AuthZ** is the process of validating the user’s permissions to access or perform certain functions/actions.

There are plenty of identity providers to handle the AuthN part, however in this blog post, we are going to cover the AuthZ, the permissions validation and enforcement.

In any decent backend (e.g. Rest APIs, Event Processing), we certainly need to verify the identity and permissions, traditionally we will have a code similar to the below somewhere in the implementation to check for AuthZ:

```ts
    if ( !user.hasRole("admin") ) {
        throw Error("Not Authorized").
    }
```

Depending on the permissions model implemented (e.g. RBAC, ABAC), the above code could be slightly different, but in general, the idea is to enforce certain rules to make sure that we don’t over or under expose the data, that is what is called **“Policy Enforcement”**.

With that in mind, policy enforcement is traditionally tightly coupled with the business logic implementation, and any change to the rules, means business logic needs to be updated as well. This is where Open Policy Agent (OPA) comes in handy, it allows developers to manage policies as code and offers the possibility to have centralized policy management.

> The Open Policy Agent (OPA, pronounced “oh-pa”) is an open source,
> general-purpose policy engine that unifies policy enforcement across
> the stack. OPA provides a high-level declarative language that lets
> you specify policy as code and simple APIs to offload policy
> decision-making from your software. You can use OPA to enforce
> policies in microservices, Kubernetes, CI/CD pipelines, API gateways,
> and more.” - [OPA Website](https://www.openpolicyagent.org)

OPA allows us to define policies and rules in a declarative way as code (in REGO language), and use the OPA API or libraries to make a decision based on the previously defined policies.

![Open Policy Agent Flow]({{ sitePrefix }}/assets/img/articles/2021-04-06-Policy-As-Code-In-REST-APIs/opa.jpeg)
_Image source: [OPA Website](https://www.openpolicyagent.org/docs/latest/)_

As per the Diagram above, we give OPA a policy and some data (JSON), and whenever a request (e.g. REST API call) or an event (Kafka or RabbitMQ) comes in, OPA will make a decision based on the data and request/event payload, and then we can allow or reject the request based on the outcome.

    allow {
    	input.method = "DELETE"
    	input.path = ["posts", postId]
    	input.user = user.roles['admin']
    }

## Fine-grained permissions on REST API endpoints

When implementing any REST API endpoint or event handler, more often than not, we need to perform two things to check permissions:

1. **Resource Access**: can the user access this endpoint (has a role or access level)? Example: a reader cannot delete a post.
2. **Resource Ownership**: if the user can call this endpoint, we might need to filter by ownership, and allow access to resources he owns only. Example: an author can only edit/delete his own posts (so even if he can access the endpoint `PUT /posts` and `DELETE /posts`, but some ownership filters apply).

Implementing the above inside the endpoint code can make the code look a bit redundant and policies and rules are repeated many times.

We can give OPA the data (e.g. users, roles, permissions) and policies (rules, who can access what and when) and we can solve both problems in an elegant and centralized way.

## OPA Deployment Approaches

There are multiple ways to integrate OPA in a solution, depending on the goal and the case of every solution.

### OPA as Library in projects

OPA offers a Go library that simplifies the integration of policies and queries for Go based projects, there are also other libraries and integrations such OPA WASM (Web Assembly).

The advantages of using a library is simplicity and it offers a quick way to start using OPA right away without having to interact with an external OPA server or REST API.

However, as of now, the only officially supported library is for Go based projects, if your project is based on another stack, then this approach won’t be helpful.

### OPA as an external service

Another approach is to deploy OPA as an external service and use its REST API to query and make authorization requests and decisions.

This is especially useful in a Microservice-based environment, where multiple services need to query OPA for policy and authorization decisions, it allows for a single centralized AuthZ service, and enforces Separation of Concerns principle at this level.

This approach works fine in most cases, but there are two major problems that arise when the scale of the environment grows:

1.  The services need to be aware of OPA server, and they still need to implement certain logic to interact with OPA REST API.
2.  If OPA is down for some reason, this means other services cannot operate properly.

To solve these issues, we can enhance this approach even further by adding a proxy and using the sidecar pattern.

### OPA as a sidecar

> This pattern is named Sidecar because it resembles a sidecar attached
> to a motorcycle. In the pattern, the sidecar is attached to a parent
> application and provides supporting features for the application. The
> sidecar also shares the same lifecycle as the parent application,
> being created and retired alongside the parent -
> [Microsoft Docs](https://docs.microsoft.com/)

The idea is to deploy OPA as an isolated service that lives next to the main services (each Microservice will have its own OPA instance), this will reduce latency problems since both the service and OPA will share the same network.

This pattern eliminates the single point of failure, since every service is now completely independent to make AuthZ decisions, and if one OPA goes down, this will not affect the other services.

But we still have the other issue, the services still need to be aware of OPA, how can this be resolved? - Service Proxy, specifically Envoy Proxy ([https://www.envoyproxy.io/](https://www.envoyproxy.io/)).

Envoy is a service proxy used frequently in Microservices environments, and offers several features such as Service Discovery, Edge Proxy, Health Checks, Load Balancing and more.

Envoy allows us to wrap our service (Microservice + OPA Sidecar in this case), and every request hitting the service will be first received by Envoy, and with the help of the “External Authorization” feature offered by Envoy Proxy, we can separate the AuthZ decision making from service implementation and put it on Envoy Proxy.

We give Envoy the OPA address, and it will ask for a decision every time a request is received.

![OPA with Envoy sidecar]({{ sitePrefix }}/assets/img/articles/2021-04-06-Policy-As-Code-In-REST-APIs/opa-envoy.jpg)

## Conclusion

Combining Policy as Code engine with Microservices in a Sidecar pattern offers a huge improvement in terms of resiliency and reliability, although that setup is not as straightforward as other classic approaches.

## Resources:

1.  [OPA Documentation](https://www.openpolicyagent.org/docs/latest/)
2.  [Envoy Proxy](https://www.envoyproxy.io/docs/envoy/latest/)

_Article Photo by [Christopher Gower](https://unsplash.com/photos/m_HRfLhgABo)_


Using Policy As Code to manage permissions in REST APIs


In .NET we have been using Azure DevOps Pipelines for our CI/CD needs, but after Microsoft bought GitHub and has promised to support both GitHub Actions along with Azure DevOps Pipelines promising that each platform will be able to perform the same tasks, the answer to which provider to use is maybe not as clear cut as it has been in the past.

We will take a small look into the main differences between the two platforms looking both as a newcomer to DevOps but also as a more experienced user. The topics we will take a look into are the following:

- Adding tasks: how is the experience of setting up your pipelines/actions
- Variables: how does the system handle variables both global and environment-specific
- Environment hooks: how do you set up a hook into a server or similar you want to deploy to or modify

There are of course a lot more to it than just these topics, but these topics are the basic ones that you will use for most CD pipelines/actions.

## Azure DevOps Pipelines

Azure DevOps Pipelines is Microsoft's main CI/CD platform which traditionally has been used for .NET projects of all kinds. In Azure DevOps, there are also two different pipelines to get your head around: Build pipelines which build artifacts, and release pipelines which can take a build artifact and deploy it to an environment.

At the time of writing, there are two methods of defining build pipelines:

1. Classic
2. YAML

We will not go into the Classic as the functionality is the same, but the defined pipeline is stored in Azure DevOps and not the repository, where YAML serializes the pipeline into a YAML file.

There are two methods of editing YAML files:

1. Manually editing the file in the repository using your favourite editor
2. Use the web portal

We will focus on the web portal editor.

### Adding tasks

Adding a task in Azure DevOps Pipelines is as simple as selecting the task you want in the task selector, entering the parameters you want and it's added to your YAML file where the cursor is currently placed when clicking add.

![Azure DevOps Pipeline add task example]({{ sitePrefix }}/assets/img/articles/2021-03-30-Azure-DevOps-Pipelines-vs-GitHub-Actions/azure-devops-task-example.png)

### Variables

Variables in specifically release pipelines can be defined on a release pipeline level or environment level, which means you as a DevOps developer can differentiate the variables between being global and environment-specific with ease without the pipelines needing to care, they just use the variable with a given name.

![Azure DevOps Release Pipeline variables example]({{ sitePrefix }}/assets/img/articles/2021-03-30-Azure-DevOps-Pipelines-vs-GitHub-Actions/azure-devops-release-pipelines-variables.png)

### Environment hooks

Environment hooks in Azure DevOps are set up inside the project settings, where you can use the hooks in your build steps by referencing the name of the environment hook.

## GitHub Actions

GitHub Actions is GitHub's CI/CD pipeline setup. It has been implemented with an open source usage in mind and not any particular technology to build. GitHub was acquired by Microsoft in 2018 and Microsoft has promised to expand the functionality of the Actions and support it.

### Adding tasks

As there is no official online editor of the build pipelines, you edit it using your favourite text editor in your cloned repository and push updates to the Git repository. Due to this method, you have to look up the parameters to the build steps you're using.

### Variables

Variables, or secrets as they are called, are values that can be stored globally or per environment in GitHub. Once you've entered the secret's value, you cannot view it again, but it can be used in your Actions.

### Environment hooks

In GitHub there's not anything specifically for environment hooks, you can use secrets for e.g. publish profiles to Azure Web Apps which performs the same task in practice.

## Comparison

Comparing the two platforms, we can conclude functionality wise there isn't really any noticeable difference, but the difference becomes clearer when looking at the user interface and how much the interface helps the pipeline/action developer.

### Adding tasks

Looking at the generated files, there is practically no difference. The difference lies in how much help is given to the developer. In GitHub Actions the developer must look up the parameters themselves while in Azure DevOps Pipelines, you can view all parameters in the editor with additional help of what the valid values are if the task developer has set it up.

### Variables

The main difference between Azure DevOps Pipelines and GitHub Actions regarding variables, is that in Azure DevOps Pipelines, you can define whether you want to be able to view the variable values or not where in GitHub Actions, you are not able to view the values at all. Regarding using them in pipelines/actions, the functionality is practically identical for the developer.

### Environment hooks

In GitHub Actions there are no specific menu or place for environment hooks while in Azure DevOps Pipelines, they are put into their own category. That's the main difference between the two, so it's mostly a matter of taste which of the two are most preferred.

## Summary

GitHub Actions have over the last year gotten most of the functionality that was present in Azure DevOps Pipelines such as Environments and on-demand execution of Actions. The main difference between the two is in the adding tasks part of the implementation. In Azure DevOps Pipelines you are able to view the parameters of a task directly in the browser while in GitHub Actions you have to look in the documentation of the task you're using to get the same information. However, in Azure DevOps Pipelines, the tasks available are set at an organisation level where GitHub Actions is much more liberal with adding new tasks to an Action.

Another consideration is that in Azure DevOps you can define build pipelines for repositories outside Azure DevOps including GitHub where GitHub is restricted to repositories in GitHub only.

To summarise, if you're new to DevOps development, Azure DevOps Pipelines is easier to get started with as it's holding your hand through the process a bit more, but the features available in each offering is close to identical, so if your code is already in GitHub, it makes more sense to use GitHub Actions, but if your code is in Azure DevOps or you don't want to migrate your repository to GitHub, use Azure DevOps Pipelines to keep the processes in one place.

## Resources

- [Get started with Azure DevOps Pipelines](https://docs.microsoft.com/en-us/azure/devops/pipelines/get-started/pipelines-get-started?view=azure-devops)
- [Get started with GitHub Actions](https://docs.github.com/en/actions/quickstart)


Azure DevOps Pipelines vs GitHub Actions


Multiple players interacting at the same time in a game room will generate a lot of data that needs to be synchronized, such as each player's basic data, change data, skill performance data, damage data, map data, monster data, etc. According to the refresh rate of the game's FPS, it needs to be synchronized to each client in a very short time, so two mainstream synchronization methods are produced: `frame synchronization` and `state synchronization`.

## What is frame synchronization?

It is usually used in real-time strategy and battles that require very high real-time performance. It synchronizes the player's operation instructions which include the previous frame index. The client uploads the operation to the server, and the server does not calculate the game behavior after receiving it. It is forwarded to all clients. The most important concept here is that the `same input + the same timing = the same output`. The process of realizing frame synchronization is generally:

1. **Synchronize the random number seed**. In games, the use of random numbers is common. By synchronizing the random number seeds, the consistency of those can be maintained.
2. **Client uploads the operation instructions**. Instructions include game operations and current frame index.
3. **The server broadcasts all client operations**. If there is no operation, it also broadcasts a null command to drive the game frame forward.
4. **Because of the frame synchronization feature, we can easily replay the battle**. The server records all operations, and the client requests the operation file to execute it again.

### Advantages of frame synchronization

1. Save the amount of messages, each message transfer only needs to be accompanied by operation information, and the message package for state synchronization needs to be accompanied by various state information.
2. It is convenient to realize the synchronization problem of real-time battle games under weak networks, and the battle can be maintained with as few messages as possible.
3. To reduce the calculation pressure of the server, the state of the battle is synchronized, the server needs to calculate all the battle logic.
4. Improve development efficiency, because the server can only rebroadcast messages, and the client can also be separated from the server during development.
5. Obtain better expressive power in terms of client performance, because the client has obtained more performance management permissions, and does not have to be hard driven by data.
6. It is very convenient to make battle videos. With the initial information of the battle and the list of battle frames, the battle process can be perfectly reproduced.

### Choice of network protocol

- [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol): The message is stable, but slow. It is suitable for games that are not instantaneous and communication is not intensive, such as cards.
- [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol): Message delivery is fast, but unstable, prone to packet loss and disorder. It is suitable for the key technology in the frame synchronization design of games with strong real-time, random value pseudo-random algorithm. Safe use of UDP protocol.

![]({{ sitePrefix }}/assets/img/articles/2021-02-09-Game-server-Synchronization/frame1.png)

![]({{ sitePrefix }}/assets/img/articles/2021-02-09-Game-server-Synchronization/frame2.png)

## What is state synchronization?

![]({{ sitePrefix }}/assets/img/articles/2021-02-09-Game-server-Synchronization/state1.png)

To synchronize various states in the game, the client uploads operations to the server, the server calculates the results, broadcasts various states in the game and the client displays the content according to the state after receiving the state.
State synchronization is widely used in turn-based games and it is actually a loose synchronization. In its thinking, the consistency of the performance of different players on the screen is not an important indicator, as long as the result of each operation is the same.

Therefore, state synchronization does not require high network delay. Like playing RPG games, 200-300ms delay is also acceptable. But in RTS games, the 50ms delay is also obvious. For example, while on the move, a delay has passed after 50ms. During this process, client B needs to do some smooth processing locally, and finally make the movement normal. In a state-synchronized game, the damage is often displayed after the attack is over, because it needs to wait for the server calculation to end through special effects animation.

### Advantages of state synchronization

1. It is relatively simple, the client only needs to synchronize data according to the push of the server.
2. There are almost no plug-ins, because all operations are checked by the server.
3. It is suitable for some games with small real-time synchronization data: such as RPG, hang-up, chess and other game types.
4. Client-side development is less difficult, and problems are better positioned for debugging and development.

![]({{ sitePrefix }}/assets/img/articles/2021-02-09-Game-server-Synchronization/state2.png)

## Comparison of the two designs

|                   | State synchronization                  | Frame synchronization                       |
| ----------------- | -------------------------------------- | ------------------------------------------- |
| Flow rate         | Very high                              | Relatively low                              |
| Combat playback   | The record file is large               | The record file is small                    |
| Security          | High (server computing)                | Low (client computing, unavoidable plug-in) |
| Server pressure   | Large                                  | Small                                       |
| Caton performance | Teleportation, inexplicable blood loss | Battle Caton                                |

## Sources

- [How do multiplayer games sync their state? Part 1](https://medium.com/@qingweilim/how-do-multiplayer-games-sync-their-state-part-1-ab72d6a54043)
- [Fast-Paced Multiplayer (Part II): Client-Side Prediction and Server Reconciliation](https://www.gabrielgambetta.com/client-side-prediction-server-reconciliation.html)


Game server synchronization of large amounts of data in a battle


Once I asked my dad how to test a fire extinguisher. He answered:

"Very simple! It is necessary to check the expiration date, see that the seal is in place and that there is no visible damage to the case."

"Is that all? But how do you know it will work? How can you be sure?"

"I just know, that's all." - _Dad answered._

This question arose for a reason. I was asked the same when I was interviewing for the position of a tester.

I still don't know the correct answer to this question, but since I was hired, I probably answered correctly.

I answered that, in fact, the production of fire extinguishers is an assembly line. At each stage, control must be carried out, moreover, not only control of the quality of materials, sizes of parts, their density, etc., but also control over the equipment used in the manufacture. Also, don't forget about people. They shouldn't get too tired, the schedule should be optimal. Periodically, you need to remove the entire batch of fire extinguishers from the conveyor and check them in the field to determine the percentage of rejects. If the number is small, then everything is in order. But if it exceeds the norm, you need to urgently diagnose all equipment, find out and fix the cause.

Sounds pretty simple in theory. In practice, it turned out differently.

The question is:

**Is it possible to put a person at the end of the conveyor and give him the task of making sure that the result is ideal fire extinguishers? What can he do to achieve this goal?**

Working in the company, I learned the hard way that this is impossible. We had a lot of problems:

- We did not have any requirements, but at the same time the program had to work without interruptions.
- We did not have enough testers, but we had to have time to check all-excel: the CMS itself, the work of its modules and shared sources, the work of various add-ons and extensions. All this had to work on different versions of the operating system, with 4 different database providers, in several browsers and we only had 3 people for this.
- We had to make sure that clients could use our libraries. That is, all open code could be used in any way without problems.
- Sometimes, when we (the testers) had questions about why it works like this and not otherwise, developers would answer: “Because it is written in the code”.
- The support team complained that customers have many problems and questions after each release.

And this is just a small list of the problems we encountered. We hired a few more testers, but it did not save the day much.

The CEO was unhappy and had every right to do so.

My team was doing all the best to improve:

- We had several hours per week for self-education. We learnt new technology and tool and shared knowledge between each other's.
- We tested our applications from different sides (functionality, performance, security, usability etc.). We had separate checklists and test suites for each type of testing.
- We tried to automate as much as possible (on the UI level and lower).
- We created own knowledge base and any newcomer (not only tester) could use it if he was faced with some installation or environment problems for example.
- Thanks to review procedure we became guru in testing documentation.
- Our estimations were as accurate as possible because we were gathering corresponding metrics.
- We used different templates for reports and they were useful and informative for all concerned.

Despite all this we were still at the end of the conveyor.

CEO of the company understood that it is not enough to hire a good tester, you need to be able to give him the opportunity to do this job well and once, during one of the meetings, he reminded me of how I answered the question about the fire extinguisher and suggested setting up a process not only in my team, but throughout the company.

So, he wanted me to tell developers how to write code, the Support Team how to communicate with customers, and the Sales Team how to sell. It was an overwhelming task for me. But this was not necessary.

The company had excellent specialists who knew their business and really wanted to do it better, faster, and more qualitative.

As a result, we had standards and approaches, guided by which we were going to work in the future:

- In a few words, a coding guidelines and a code review process appeared in the company.
- Our developers created recommendation on how to test security of our products.
- When new versions of the operation system were released, we certificated our products to let our clients more evidence of good work of them.
- Our support team developed new rules of their work process, so that our clients were able to receive hot-fix in 8 hours (not more).

I have not worked in this company for many years, but I always remember those times with warmth.

**The Fire Extinguisher has become a symbol of excellent work for me.**

From that time I always ask this question at interviews, as well as to my students who come to me for "QA Engineer" courses.

I got the most varied answers, but I only hired those who did not blurt out instantly:

"Break the seal, pull out the pin, press the lever."

Every experienced tester knows to think first. And when you think about it, it becomes clear that even if the fire extinguisher works correctly, it will no longer be possible to give it to the client and say:

"Yes, it's a good fire extinguisher. In a critical situation, it will help you."

And it is not good idea to tell him:

"We tested functionality only. Security and performance testing is not our responsibility."

Of course, not all programs need to be tested like fire extinguishers. There are such types of programs, for the testing of which it is imperative to apply formal approaches, carefully plan and document everything (programs for medicine or banking software). But there are programs for which this is not necessary.

How to decide how thoroughly a program should be tested?

Experience tells me that even the simplest handbook-program can eventually become part of a huge system that will be used on board an aircraft. If the housewife does not find how many minutes to cook potatoes, this is not a problem. But what if the pilot of a supersonic fighter cannot find ejection instructions and as a result forgets to put his feet on the seat footrests?

**Each tester decides for himself how thoroughly the program should be tested, but he should always be guided by professional ethics, and not by the mood or limits of the project.**

I would really like to test my programs in the same way as those people who produce fire extinguishers. So that about the programs that my company produces, people would say the same as my dad:

**"I just know, that's all."**

_Article Photo by [Matt Chesin](https://unsplash.com/photos/jHqAIuAZPU0)_


How to test a fire extinguisher?


This article provides a quick introduction on how to use [Firebase Cloud Functions](https://firebase.google.com/docs/functions) to send push notifications. There are 2 main advantages in using them:

1. A small amount of code can send iOS and Android push notifications at the same time.
2. There is no need for server-side coding as it is a server-less solution.

Before starting, we need to complete the configuration of the development environment:

### 1. Create the Firebase project

In the Firebase console, click [Add project](https://firebase.google.com/docs/functions/get-started?authuser=0#create-a-firebase-project) and select or enter a Project name (for example: `firebase-cloudfunction-demo`).

### 2. Add the Cloud messaging config

Complete the configuration of Firebase Cloud messaging:

- [iOS instructions](https://firebase.google.com/docs/cloud-messaging/ios/client?authuser=0)
- [Android instructions](https://firebase.google.com/docs/cloud-messaging/android/client?authuser=0)

When the configuration is done, we also need to save the `FCMToken` (Firebase Cloud Messaging) in the realtime database or Firestore, to be used for push notifications.

### 3. Set up Node.js and the Firebase CLI

Open your own command line and create a new folder, then use:

```
npm install firebase-functions@latest firebase-admin@latest --save
npm install -g firebase-tools
```

### 4. Initialize your project

Run the following command:

```
firebase login
```

Your browser will open and you can use your Firebase account login and wait for the redirect. Then you will be able to see this:

```
Waiting for authentication...
✔  Success! Logged in as *******
```

Run the following command:

```
firebase init functions
```

Select JavaScript and when the Cloud functions setup is finished, this is how your folder will look like:

```
+- .firebaserc
 +- firebase.json
 +- functions/
      +- package.json
      +- index.js
      +- node_modules/
```

### 5. Add Cloud functions for push notifications

We only need to edit the `functions/index.js` file.

There are two ways to send push notifications, through HTTP request or by adding a listener to the realtime database or Firestore.

```
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

//http request method
exports.sendHttpPushNotification = functions.https.onRequest((req, res) => {
    const userId = req.body.userId; //get params like this
    	...

//listener method
exports.sendListenerPushNotification = functions.database.ref('/sendMessage/{userId}/').onWrite((data, context) => {
	const userId = context.params.userId; //get params like this
		...
```

Assume that the `FCMToken` is stored in this location of the realtime database：

```
/FCMToken/${userId}
```

You could get the `FCMToken` like this:

```
const FCMToken = admin.database().ref(`/FCMTokens/${userId}`).once('value');
```

To send a notification, use the following code:

```
const payload = {
	token: FCMToken,
    notification: {
        title: 'cloud function demo',
        body: message
    },
    data: {
        body: message,
    }
};

admin.messaging().send(payload).then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
    return {success: true};
}).catch((error) => {
    return {error: error.code};
});
```

### 6. Deploy the functions to a production environment

Run this command to deploy your functions:

```
firebase deploy --only functions
```

If you add HTTP request functions, a function URL you should see:

```
Function URL (sendHttpPushNotification): https://us-central1-firebase-cloudfunction-demo.cloudfunctions.net/sendHttpPushNotification
```

If you want to debug your cloud functions, you could use this command:

```
firebase emulators:start
```

When the Cloud functions are deployed, you can send push notifications by making a request to the Function URL, or just set the data into the Firebase realtime database and the Cloud functions will be triggered by the data listener.

### Resources

- [Cloud Functions for Firebase](https://firebase.google.com/docs/functions)
- [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)


How to use Firebase Cloud functions to send push notifications


Json web token [JWT](https://jwt.io/introduction/), it is a JSON-based open standard that is implemented to transfer statements between web application environment(RFC 7519).The token is designed to be compact and safe, JWT statements are generally used to pass authenticated user identity information between identity providers and service providers, In order to obtain resources from the resource server, you can also add some additional declaration information necessary for other business logic.The token can also be used directly for authentication or encrypted.

### Laravel-JWT Installation and basic configuration

- Install using composer

```
composer require tymon/jwt-auth 1.*@rc
```

- Publish configuration file

```
# This command will add a jwt.php configuration file under config
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"
```

- Generate encryption key

```
# This command will generate an encryption key in the .env file, such as:JWT_SECRET=jwt
php artisan jwt:secret
```

- Update your model

If you use the default User table to generate tokens, you need to add a piece of code under the model

```
<?php

namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
    use Notifiable;

    // Rest omitted for brevity

    /**
     * Get the identifier that will be stored in the subject claim of the JWT.
     *
     * @return mixed
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}

```

- Register two Facade

**config/app.php**

These two facades are not necessary, but using them will bring a little convenience to your code writing.

```
'aliases' => [
        ...
        // Add the following two lines
        'JWTAuth' => 'Tymon\JWTAuth\Facades\JWTAuth',
        'JWTFactory' => 'Tymon\JWTAuth\Facades\JWTFactory',
],
```

**If you don’t use these two Facades, you can use the helper function auth()**

auth() is an auxiliary function that returns a guard, which can be regarded as an Auth Facade for the time being.

```
// If you don’t use Facade, you can write like this
auth('api')->refresh();
// Use JWTAuth Facade
JWTAuth::parseToken()->refresh();
```

- Modify auth.php

**config/auth.php**

These two facades are not necessary, but using them will bring a little convenience to your code writing.

```
'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'jwt',        // change token to jwt
        'provider' => 'users',
    ],
],
```

- Register some routes

These two facades are not necessary, but using them will bring a little convenience to your code writing.

```
Route::group([

    'prefix' => 'auth'

], function ($router) {

    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');

});
```

- Create token controller

```
php artisan make:controller AuthController
```

**AuthController**

```
<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;

class AuthController extends Controller
{
    /**
     * Create a new AuthController instance.
     * Email and password are required (data source users table)
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login']]);
    }

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    {
        $credentials = request(['email', 'password']);

        if (! $token = auth('api')->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->json(auth('api')->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth('api')->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth('api')->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth('api')->factory()->getTTL() * 60
        ]);
    }
}
```

_Article Photo by [Dillon Shook](https://unsplash.com/photos/0jKuUj3vUTg)_


Using JWT in Laravel


This article introduces 4 tools that can greatly improve the efficiency of Flutter development.

## 1. Powerful logging package

Printing logs during `Flutter` development is one of the commonly used debugging methods, but the log printing built in `Flutter` is very simple. Here we recommend a powerful package: `Logger`.

**`Logger`** is an easy to use and extensible logger, it can print beautiful logs and can divide the log into different levels.

```dart
    var logger = Logger();
    logger.v("Verbose log");
    logger.d("Debug log");
    logger.i("Info log");
    logger.w("Warning log");
    logger.e("Error log");
    logger.wtf("What a terrible failure log");
```

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/1-1.png)

[Logger Pub](https://pub.dev/packages/logger)

## 2. Convert JSON data to model

The data returned from a network request is usually in `JSON` format, so it is particularly important to convert the `JSON` format to `model`.

Assume the `JSON` string as follows:

```json
{
  "name": "monstar",
  "age": 14,
  "email": "monstar@example.com"
}
```

Define its corresponding `Model` class: `User`:

```dart
class User {
  final String name;
  final int age;
  final String email;

  User({this.name, this.age, this.email});

  @override
  String toString() {
    return 'name:$name,age:$age,email:$email';
  }
}
```

For parsing:

```dart
String jsonStr = "{\"name\":\"monstar\",\"age\":14,\"email\":\"monstar@example.com\"}";
    var jsonMap = json.decode(jsonStr);
    var user =
        User(name: jsonMap['name'], age: jsonMap['age'], email: jsonMap['email']);
    print('$user');
```

Console output:

```
flutter: name:monstar,age:14,email:monstar@example.com
```

In the case above, there are only three fields in `JSON`. There are often many fields in real life use cases, and writing code by hand is not only error-prone, but also extremely inefficient.

For this situation, `Google` offers a solution: **`json_serializable`**.

But it is cumbersome by this way ([json_serializable Pub](https://pub.dev/packages/json_serializable)), we do not recommend it. Instead, we recommend a simpler plugin named **`JsonToDart`**.

In `Android Studio` install `JsonToDart`, select `Preferences (Mac)` or `Setting (Windows)`, then select `Plugins` and search for `JsonToDart`.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/2-1.png)

Click `Install` and after the installation is completed, restart Android Studio. If the search fails, you can download it from the [official website](https://plugins.jetbrains.com/plugin/12562-jsontodart-json-to-dart-) and install it.

Once installed, select the directory, right-click and select `New->Json to Dart`.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/2-2.png)

Then the `JSON` input screen appears:

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/2-3.png)

In this screen input the `JSON` content and file name, click the **`Generate`** button to generate a file named `user.dart`.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/2-4.png)

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/2-1.gif)

## 3. View UI effects on phones with different resolutions

The biggest advantage of `Flutter` development is that it is cross-platform.

When the development is complete, you want to see the effects on different resolutions of the phone. Should you buy one for each phone to test?

No, using **`device_preview`** allows you to view the interface of different resolution devices on a single device.

#### How to use

First you need to import the dependent library into the project, open the file: `pubspec.yaml`, and add the reference library:

```yaml
dependencies:
  device_preview: ^0.5.4
```

Then execute the following command from the command line:

```bash
$ flutter pub get
```

Finally here is a sample code on how to use it:

```dart
import 'package:device_preview/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.locale(context), // Add the locale here
      builder: DevicePreview.appBuilder, // Add the builder here
      home: HomePage(),
    );
  }
}
```

#### Demo

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-1.gif)

- Interface effect display is supported under different devices (iPhone, iPad, Mac, Windows, Linux).

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-1.png)

- Dynamic system configuration: language, dark mode, text scaling.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-2.png)

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-5.png)

- Change device direction.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-3.png)

- Virtual keyboard pop-up effect.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/3-4.png)

- Screenshots.

[Device_preview Pub](https://pub.dev/packages/device_preview)

## 4. Localization package

**`Intl`** can localize your `Flutter` project quickly.

### How to use

If you use `Android Studio`, you only need to install this plugin: `Flutter Intl`.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/4-1.png)

For `Visual Studio Code` there is also a corresponding plugin: `Flutter Intl`.

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/4-2.png)

After installing the plugin, you need to add the dependency library to the `pubspec.yaml` file：

```yaml
dev_dependencies:
    ...
  flutter_localizations:
    sdk: flutter
```

Then execute the command:

```bash
$ flutter pub get
```

Using `Android Studio` as an example, open `Tool->Flutter Intl -> Initalize for the project` to add localization support for the project. The plugin automatically alters the file `pubspec.yaml`, and generates **generated** and **l10n** two file directories under `lib`.

- Directory **intl** under **generated** generates `messages_all.dart` and `messages_en.dart` by default. The file at the beginning of **messages_xxx.dart** does not require manual modification and is automatically generated.
- Directory **I10n.dart** under **generated** is implementation of `Localizations` and `Delegate`, does not require manual modification and is automatically generated.
- **intl_en.arb** exists under **l10n**, the text is stored here。

If you want to add a language，open `Tool->Flutter Intl -> Add Locale`, input the language abbreviation to be supported, and the plugin will automatically generate the relevant file, as shown in the screenshot below, adding support for Chinese：

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/4-3.png)

With localization, you need to add package dependencies in the file `pubspec.yaml`:

```yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
```

Then execute the command:

```bash
$ flutter pub get
```

Modify `MaterialApp` as follows:

```dart
...
import 'generated/l10n.dart';

...
MaterialApp(
  ...
  localizationsDelegates: [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  ...
)
```

Add text under **intl_en.arb** and **intl_zh.arb**, for example: `cartoon_title`

intl_en.arb

```json
{
  "cartoon_title": "cartoon"
}
```

intl_zh.arb

```json
{
  "cartoon_title": "动画"
}
```

Use `command + s (Mac)` to save, The associated files under the **generated** directory will be generated again.
Here is an example of how to use it:

```dart
    ...
    Text('${S.of(context).cartoon_title}');
    ...
```

The effect looks like the following:

![]({{ sitePrefix }}/assets/img/articles/2020-12-08-Four-tools-to-improve-the-efficiency-of-Flutter-development/4-4.png)

## Reference

- [Logger Pub](https://pub.dev/packages/logger)
- [JSON Serializable Pub](https://pub.dev/packages/json_serializable)
- [JSON to Dart Plugin](https://plugins.jetbrains.com/plugin/12562-jsontodart-json-to-dart-)
- [Device preview Dart Pub](https://pub.dev/packages/device_preview)
- [Flutter Intl Plugin](https://plugins.jetbrains.com/plugin/13666-flutter-intl)
- [Intl Pub](https://pub.dev/packages/intl)

_[Source of the header image](https://proandroiddev.com/building-your-ios-android-app-in-30-minutes-using-flutter-2ec61b78a1e5)_


Four tools to improve the efficiency of Flutter development


Recently I learned about micro services and here is how [Spring Boot](https://spring.io/projects/spring-boot) integrates [RabbitMQ](https://spring.io/guides/gs/messaging-rabbitmq/) to send messages to other micro services.

## Prerequisites

- [IntelliJ IDEA](https://www.jetbrains.com/idea/)
- [RabbitMQ](https://spring.io/guides/gs/messaging-rabbitmq/)

## Getting started

1.Start by creating an empty Spring Boot project and add the Maven dependency.

```xml
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-amqp</artifactId>
</dependency>
```

2.Add the RabbitMQ server configuration information in `application.yml`.

```
spring:
  rabbitmq:
    host: localhost
    port: 5672
    username: guest
    password: guest
```

3.Create a new message consumer:

```
package com.example.springbootmq.message;

import com.example.springbootmq.constant.QueueNameConstant;
import lombok.extern.slf4j.Slf4j;
import org.springframework.amqp.rabbit.annotation.Queue;
import org.springframework.amqp.rabbit.annotation.RabbitListener;
import org.springframework.stereotype.Component;

/**
 * @author donagh.wang
 * @version 1.0.0
 * @date 2020/11/4 15:40
 */
@Slf4j
@Component
public class MessageReceiver {

    @RabbitListener(queuesToDeclare = @Queue(QueueNameConstant.QUEUE_NAME))
    public void process(String message) {
        log.info("The receiver receives the message: {}", message);
    }
}
```

This is a simple example, in actual development MQ also needs to be bound with exchange, routing-key, etc.

4.Create a test class to act as a message producer:

```
package com.example.springbootmq;

import com.example.springbootmq.constant.QueueNameConstant;
import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.Test;
import org.springframework.amqp.core.AmqpTemplate;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.Date;

/**
 * @author donagh.wang
 * @version 1.0.0
 * @date 2020/11/4 15:53
 */
@Slf4j
public class RabbitMqTest extends SpringbootMqApplicationTests {

    @Autowired
    private AmqpTemplate amqpTemplate;

    @Test
    public void testSendMessage() {
        String msg = "now time:" + new Date();
        log.info("Send message 【{}】 to {} message queue.", msg, QueueNameConstant.QUEUE_NAME);
        amqpTemplate.convertAndSend(QueueNameConstant.QUEUE_NAME, "now time:" + new Date());
    }
}
```

5.Start the project (`message consumer`) first, and then execute the test class (`message producer`):

**Message producer output log:**

```
com.example.springbootmq.RabbitMqTest: Send message 【now time:Wed Nov 04 16:33:46 CST 2020】 to test-mq message queue.
```

**Message consumer output log:**

```
c.e.s.message.MessageReceiver: The receiver receives the message: now time:Wed Nov 04 16:33:46 CST 2020
```

This was a simple tutorial on Spring Boot integrated RabbitMQ. For more information, please check those [RabbitMQ tutorials](https://www.rabbitmq.com/getstarted.html).

_Article Photo by [Burst on Unsplash](https://unsplash.com/photos/kUqqaRjJuw0)_


Spring Boot integrated RabbitMQ


In WWDC20, Apple introduced **App Widgets** to the home screen for multiple platforms(iOS, iPadOS, macOS). With **WidgetKit**, you can see the most important information from your app by putting widgets on your Home screen or Notification Center.

### Supported Families

There are three different size styles available for widgets, **Small**, **Medium** and **Large**. By default, all size styles are enabled. You can configure the ones that works best for your app’s content.

### Configuration

There are two types of configuration, **StaticConfiguration** and **IntentConfiguration**.

`StaticConfiguration:` It is used for the widgets that do not provide user-configurable options. For example, a news widget that shows trending headlines.

`IntentConfiguration:` It is used for the widgets that want to provide user-configurable options. For example, a stock quotes widget, which allows you to select a specific stock to show in the widget. Click [here](https://developer.apple.com/documentation/widgetkit/making-a-configurable-widget) for more information.

We will focus on **StaticConfiguration** in this article.

### Requirements

- Xcode 12.0.1(or later)
- macOS Catalina 10.15.5 or later
- Basic knowledge of SwiftUI

### Create a simple app

Let's first create a simple app that lists quotes along with the author name and on tap show the detailView.

Open Xcode and create iOS App project with name **QuotesWidgetDemo**. Make sure **SwiftUI** is selected in `Interface` option and **SwiftUI App** is selected in `Life cycle` option.

- Create **Quote.swift** file and add model

```swift
public struct Quote {
    public let quoteId: Int
    public let author: String
    public let quote: String

    init(quoteId: Int, author: String, quote: String) {
        self.quoteId = quoteId
        self.author = author
        self.quote = quote
    }
}

extension Quote: Identifiable {
    public var id: Int {
        quoteId
    }
}
```

- Create **QuoteProvider.swift** file and add data

```swift
public struct QuoteProvider {
    static func all() -> [Quote] {
        return [
            Quote(quoteId: 1, author: "Steve Jobs", quote: "Have the courage to follow your heart and intuition. They already know what you truly want to become."),
            Quote(quoteId: 2, author: "Albert Einstein", quote: "Everybody is a genius. But if you judge a fish by its ability to climb a tree , it will live its whole life believing that it is stupid."),
            Quote(quoteId: 3, author: "J.K. Rowling", quote: "Imagination is the foundation of all invention and innovation."),
            Quote(quoteId: 4, author: "Abdul Kalam", quote: "Don't take rest after your first victory because if you fail in second, more lips are waiting to say that your first victory was just luck."),
            Quote(quoteId: 5, author: "Sandeep Maheshwari", quote: "Positive Thinking is not about expecting the best to happen. It's about accepting that whatever happens, happens for the best.")
        ]
    }
}
```

- Rename existing file `ContentView.swift` and `struct ContentView` with **QuoteView.swift** and **struct QuoteView** and add the below code for quote listing and detailView

```swift
import SwiftUI

struct QuoteView: View {
    let quotes: [Quote] = QuoteProvider.all()
    @State private var showQuote: Quote?

    var body: some View {
        NavigationView {
            List {
                ForEach(quotes) { quote in
                    Button(action: {
                        showQuote = quote
                    }, label: {
                        QuoteItemView(author: quote.author, quote: quote.quote)
                    })
                    .sheet(item: $showQuote) { quote in
                        QuoteDetailView(quote: quote)
                    }
                }
            }
            .foregroundColor(.black)
            .listStyle(PlainListStyle())
            .navigationBarTitle("Quotes")
        }
    }
}

struct QuoteItemView: View {
    let author: String
    let quote: String

    var  body: some View {
        VStack {
            VStack(alignment: .leading) {
                HStack {
                    Text("\(quote)")
                        .font(.subheadline)
                        .bold()
                        .lineLimit(2)
                }
                .padding([.leading, .trailing])
                Spacer().frame(height: 10.0)
                Text("- \(author)")
                    .padding([.leading, .trailing, .bottom])
                    .font(.footnote)
            }
        }
        .foregroundColor(.black)
    }
}

struct QuoteDetailView: View {
    var quote: Quote

    var body: some View {
        ZStack {
            Color(UIColor.systemBlue).edgesIgnoringSafeArea(.all)

            VStack {
                VStack(alignment: .leading) {
                    HStack {
                        Text("\(quote.quote)")
                            .font(.title)
                            .bold()
                    }
                    .padding()
                    Text("- \(quote.author)")
                        .padding([.leading, .trailing, .bottom])
                        .font(.title3)
                }
            }
            .foregroundColor(.white)
        }
    }
}

struct QuoteView_Previews: PreviewProvider {
    static var previews: some View {
        QuoteView()
    }
}
```

We are done with the simple app design. If you run the app, it will look like this

![]({{ sitePrefix }}/assets/img/articles/2020-11-16-WidgetKit/quotes.gif)

### Widget Extension

- To build a widget, you need to add a widget extension to your app. To add **Widgit extension**, go to File -> New -> Target -> select Widget extension(under iOS tab) -> click on Next -> set Product name to **QuoteWidget** and make sure **Include Configuration Intent option** is not selected -> once finish button tapped it will show Dialog, press Activate.

Run the extension, by default it will look like this

![]({{ sitePrefix }}/assets/img/articles/2020-11-16-WidgetKit/default-widget-extension.gif)

- Enable Target **QuoteWidgetExtention** for our model **Quote.swift** and data provider **QuoteProvider.swift** file.

- Add **random()** function to **QuoteProvider.swift** file to get quote randomly

  ```swift
  public struct QuoteProvider {
      static func all() -> [Quote] {
          // ...
      }

      static func random() -> Quote {
          let allQuotes = QuoteProvider.all()
          let randomIndex = Int.random(in: 0..<allQuotes.count)
          return allQuotes[randomIndex]
      }
  }
  ```

- Lets design our custom widgetView. Add a swiftUI View file with name **QuoteWidgetView**. Make sure it is part of **QuoteWidgetExtention** target.

![]({{ sitePrefix }}/assets/img/articles/2020-11-16-WidgetKit/widget-view.png)

- Update the above added file(**QuoteWidgetView.swift**) with this code

  ```swift
  struct QuoteWidgetView: View {
      let quote: Quote

      var body: some View {
          ZStack {
              Color(UIColor.systemBlue)
              VStack {
                  Text(quote.quote)
                      .font(.subheadline)
                      .lineLimit(2)
                      .padding(.top, 5)
                      .padding([.leading, .trailing])
                      .foregroundColor(.white)
                  Spacer().frame(height: 10.0)
                  Text("- \(quote.author)")
                      .font(.footnote)

              }
          }
      }
  }

  struct QuoteWidgetView_Previews: PreviewProvider {
      static var previews: some View {
          QuoteWidgetView(quote: QuoteProvider.random())
      }
  }
  ```

  **Note:** You can define different views for different style size as per your requirement. I've designed the above view for all supported families(Medium, Large).

- Update **QuoteWidget.swift** file

  ```swift
  import WidgetKit
  import SwiftUI

  struct Provider: TimelineProvider {
      func placeholder(in context: Context) -> SimpleEntry {
          SimpleEntry(date: Date(), quote: QuoteProvider.random())
      }

      func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
          let entry = SimpleEntry(date: Date(), quote: QuoteProvider.random())
          completion(entry)
      }

      func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
          var entries: [SimpleEntry] = []

          // Generate a timeline consisting of five entries an hour apart, starting from the current date.
          let currentDate = Date()
          for hourOffset in 0 ..< 5 {
              let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
              let entry = SimpleEntry(date: entryDate, quote: QuoteProvider.random())
              entries.append(entry)
          }

          let timeline = Timeline(entries: entries, policy: .atEnd)
          completion(timeline)
      }
  }

  struct SimpleEntry: TimelineEntry {
      let date: Date
      let quote: Quote
  }

  struct QuoteWidgetEntryView : View {
      var entry: Provider.Entry

      var body: some View {
          QuoteWidgetView(quote: entry.quote)
      }
  }

  @main
  struct QuoteWidget: Widget {

  // string that identifies the widget
      let kind: String = "QuoteWidget"

      var body: some WidgetConfiguration {
          StaticConfiguration(kind: kind, provider: Provider()) { entry in
              QuoteWidgetEntryView(entry: entry)
          }
          .configurationDisplayName("My Widget")
          .description("This is an example widget.")
          .supportedFamilies([.systemMedium, .systemLarge])
      }
  }

  struct QuoteWidget_Previews: PreviewProvider {
      static var previews: some View {
          QuoteWidgetEntryView(entry: SimpleEntry(date: Date(), quote: QuoteProvider.random()))
              .previewContext(WidgetPreviewContext(family: .systemSmall))
      }
  }
  ```

Let's understand the above code

**@main attribute:**

It indicates that the **QuoteWidget** is the entry point for the widget extension.

**Content closure:**

It contains SwiftUI views like **QuoteWidgetEntryView** in the above case. WidgetKit invokes this to render the widget’s content.

**TimelineEntry:**

_"A type that specifies the date to display a widget, and, optionally, indicates the current relevance of the widget’s content." - Apple_

- **SimpleEntry** conforms to **TimelineEntry** protocol. It holds **date** for the **TimelineProvider** to provide to WidgetKit to update the widget. You can specify additional properties like we have added **quote** in the above code.

- Inside **QuoteWidgetEntryView**, replaced default body `Text(entry.date, style: .time)` with our custom **QuoteWidgetView**

**TimelineProvider:**

_"A type that advises WidgetKit when to update a widget’s display." - Apple_

**Provider** conforms to **TimelineProvider** protocol and it provides the following methods

- `Placeholder:` It allows you to display a placeholder view to the user. It tells the WidgetKit what to render while the widget is loading.

- `getSnapshot:` WidgetKit makes the snapshot request when displaying the widget in transient situations, such as when you are adding a widget.

- `getTimeline:` It allows you to fetch data and declare the next refresh moment of your widget. The above code uses **.atEnd** update policy, which tells WidgetKit to ask for a new timeline once the last date has passed.

![]({{ sitePrefix }}/assets/img/articles/2020-11-16-WidgetKit/widget-extension.gif)

The above output is showing two size styles, Medium and Large because we specified **.systemMedium** and **.systemLarge** inside **supportedFamilies**

### Deep Links

When we tap on the widget, it opens a quote listing(QuoteView). To open **QuoteDetailView** on widget tap, we need to implement deep link in our app.

- Update model file **Quote.swift** and include unique **url** property.

```swift
public struct Quote {
    public let author: String
    public let quote: String
    public let url: URL?

    init(author: String, quote: String) {
        // ...
        self.url = URL(string: "QuotesWidgetDemo://\(self.quoteId)")
    }
}

extension Quote: Identifiable {
    // ...
}
```

In the above code I've created url in the form **appname://quoteId** i.e for quoteId **1**, url will be **QuotesWidgetDemo://1**. Make sure url does not contain whitespace, For example, if I create url in the form **appname://author**, then for author Steve Jobs, url will be **QuotesWidgetDemo://SteveJobs**

- Add **onOpenURL** modifier to **AppView** i.e. update **QuoteView.swift** file

```swift
struct QuoteView: View {
    let quotes: [Quote] = QuoteProvider.all()
    @State private var showQuote: Quote?

    var body: some View {
        NavigationView {
            List {
                ForEach(quotes) { quote in
                    Button(action: {
                        showQuote = quote
                    }, label: {
                        QuoteItemView(author: quote.author, quote: quote.quote)
                    })
                    .sheet(item: $showQuote) { quote in
                        QuoteDetailView(quote: quote)
                    }
                    .onOpenURL { url in
                        guard let quote = quotes.first(where: { $0.url == url }) else { return }
                        showQuote = quote
                    }
                }
            }
            .foregroundColor(.black)
            .listStyle(PlainListStyle())
            .navigationBarTitle("Quotes")
        }
    }
}

struct QuoteItemView: View {
    // ...
}

struct QuoteDetailView: View {
    // ...
}

struct QuoteView_Previews: PreviewProvider {
    // ...
}
```

- Add [widgetURL](<https://developer.apple.com/documentation/swiftui/view/widgeturl(_:)>) modifier to **WidgetView** i.e update **QuoteWidgetView.swift** file

```swift
struct QuoteWidgetView: View {
    let quote: Quote

    var body: some View {
        ZStack {
            // ...
        }
        .widgetURL(quote.url)
    }
}

struct QuoteWidgetView_Previews: PreviewProvider {
   // ...
}
```

Let's run the app (make sure QuoteWidgetDemo scheme is selected) and see the output

![]({{ sitePrefix }}/assets/img/articles/2020-11-16-WidgetKit/deeplink.gif)

## References

- [Widget Extension](https://developer.apple.com/documentation/widgetkit/creating-a-widget-extension)
- [Meet WidgetKit](https://developer.apple.com/videos/play/wwdc2020/10028/)
- [Getting Started With Widgets](https://www.raywenderlich.com/11303363-getting-started-with-widgets)
- [Build Your First iOS Widget](https://medium.com/swlh/build-your-first-ios-widget-part-2-c69b193b9612)


WidgetKit


We love engaging with the tech community, and we are big consumers of the awesome work that people share online. So a couple of weeks ago we hosted our [first-ever online conference](https://www.nodesagency.com/engineering-awesome-conference-2020/) as a way to give back to the community. 6 experts from across our offices in Europe and the Middle East shared their knowledge in topics like Flutter, Vapor, Sitecore and more. After each talk, we had a Q&A session as well so participants can freely ask their questions on the topic.

All the talks are available on our [Youtube channel](https://www.youtube.com/channel/UCfylh6xURCNwDhxh1NEwuSA) so you can watch or rewatch them at any time. You can also find the presentations slides [here](https://github.com/nodesagency/events-slides/tree/master/Engineering%20Awesome%20Conference%202020).

_Here are a few behind the scenes photos from our facilitator and speakers._

![]({{ sitePrefix }}/assets/img/articles/2020-10-08-Engineering-Awesome-Conference-2020/speakers.jpg)

#### Building Augmented Reality experiences with iOS

_by [Roxana Jula](http://twitter.com/roxanajula), Mobile developer from our Dubai office_

Apple has a big lead when it comes to augmented reality and in this session, we will have a look at everything that is possible today with ARKit. From motion capture, people occlusion to geolocation activated AR experiences, there are a lot of amazing opportunities for AR.

{{ youtube-link="v2Br76XFAYQ" }}

#### Laravel hosting with AWS ECS and GitHub Actions

_by [Jonas Schwartz](https://twitter.com/joscdk), Head of Infrastructure at Nodes sitting in our Berlin office_

This talk will give you a quick introduction into setting up AWS ECS (Elastic Container Service). We will also be setting up workflows on GitHub Actions for automatically deploying our app on pushes to GitHub.
After this talk, you will have an idea of how to utilize AWS ECS to get your Laravel app up and running in the Cloud. And how to utilize GitHub Actions for your CI/CD system.

{{ youtube-link="7-9tvgkm_9k" }}

#### What's new in Vapor 4

_by [Heidi Hermann](https://twitter.com/HeidiPuk), Vapor Developer at Nodes, from our Berlin office_

Vapor 4 is released! – So let's have a look at what's new. Some of the topics we'll cover are the changes to Fluent, to database models and the support for eager loading.
Vapor is the most popular Server Side Swift framework. It is written on top of Apple's SwiftNIO, a cross-platform asynchronous event-driven network application framework. You can read more about Vapor [here](https://vapor.codes/).

{{ youtube-link="CwUtRvH3xAQ" }}

#### Flutter: Creating responsive apps

_by [Markus Rubey](https://twitter.com/markusrubey), Senior Android Developer from our Berlin office_

In this session, we will look at how to layout UI according to the size and shape of a screen or window in order to target phones, tablets, laptop or desktop computers. You can download the code used in this session [here](https://github.com/markusrubey/responsive_playground).

{{ youtube-link="R0Coz93azI0" }}

#### Android Compose

_by [Johnny Sørensen](https://twitter.com/jeghedderjohnny), Head of Android from our Copenhagen office_

We time travel to the year 2021 in a world where Compose is the standard of the presentation layer on Android. We will have a quick look at how Compose works, a glimpse into structuring an app and how it can work piecing data streams together and ultimately compare it to the ancient days of XML. You can download the code used in this session [here](https://github.com/johsoe/moviedb-compose).

{{ youtube-link="M0H7SvlTtu8" }}

#### Sitecore & JSS

_by [Rasmus K. Mortensen](https://www.linkedin.com/in/rasmuskirkegaardmortensen/), Head of Sitecore from our Copenhagen office_

We've just released Mashreq Banks new website implemented in Sitecore JSS (Headless).
In this talk we look into:

- How did we intensify the collaboration between backend and frontend development to reach the tight deadline?
- What architectural decisions did we do without jeopardizing core OOTB functionalities for personalization and targeting content?
- What are our key learnings from the project?

{{ youtube-link="OrDslZFjWZA" }}

#### Thanks to everyone for participating!

Our facilitator, [Tiago Araujo de Souza](https://www.linkedin.com/in/taraujodesouza/), gave us some good vibes in between the talks with those lo-fi [Sunny beats](https://open.spotify.com/playlist/37i9dQZF1DXbtuVQL4zoey?si=6VrRBS7PQta647jUsDvmZQ).

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Coffee breaks in Zoom Webinars are way more fun 🤩. Plus the lo-fi from <a href="https://twitter.com/Nodes_Apps?ref_src=twsrc%5Etfw">@Nodes_Apps</a> in the background makes everything better. <a href="https://t.co/dqT6VbUWno">pic.twitter.com/dqT6VbUWno</a></p>&mdash; Juan Carlos (@JC_Tec_) <a href="https://twitter.com/JC_Tec_/status/1308404290650869760?ref_src=twsrc%5Etfw">September 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

We really enjoyed doing this conference and we are planning to bring a second edition soon.

Follow us on social media to stay up to date with Engineering Awesome Conference announcements:

- [Facebook](https://www.facebook.com/nodesagency/)
- [Linkedin](https://www.linkedin.com/company/nodes/)
- [Twitter](https://twitter.com/Nodes_Apps)


Engineering Awesome Conference 2020


We've been building APIs for a long time, enabling our mobile software solutions to communicate with each other across their respective platforms. For years these APIs have been built as part of a "mobile first"-approach, under the guiding light of an internally defined, living document, our so called "API Manifesto", highlighting everything from how URIs are formed to response body formatting and response codes. A recent change in how we document APIs internally, from simple markdown descriptions of individual endpoints to fully fletched OpenAPI specifications and the ability to spawn mock-servers on the fly, has sparked thoughts on how APIs are treated overall in the context of project development within the organization.

Over the past 10 years, being involved with developing and maintaining APIs, I've seen a great deal of approaches to this discipline, some better than others. Some of the worst examples that comes to mind, emerges from different mindsets on how software development should be executed eg. "We need to ship this fast!" (sloppiness), "We need more developers on this to speed up the process" (messy, inconsistent) and "We don't have a mobile developer available at the moment, can we fix this in the API instead?" (platform inconsistency). With no common understanding of "how and why" and "dos and don'ts", the outcome is often disastrous. Yes, in the end it might do the job, but it is in no way a pretty sight, and maintaining these remnants can be a tedious affair.

## The Contract

Seen from the perspective of the vendor of services, executing like the examples given above can lead to an immense amount of frustration. Nothing can make a developer tick off more than when presented to source code that doesn't follow expected agreements or when being expected to build it in an unexpected way. The consumers of APIs also have different opinions to what can be expected in responses from API-services.

With an API-First approach, the involved parties make a mutual agreement on the structure and behavior of the service. This agreement is the ultimate reference, "the law", when doubt arise. It can be utilised to easen decision making regarding future development of the service, referring to original structure, as well as a tool to resolve disputes regarding data structure, response codes and HTTP methods.

## The Product

Many sources on API First underlines treating the API as a "first class citizen" when building software projects, and this is a term I really like. Basically it means that the API is, if not solely then a part of, the main product that is being developed. This means that it is being managed like other primary aspects of a project. Mark O'Neill, VP of Innovation at AXWAY explains it really well:

{{ youtube-link="RP-soXCWoIs" }}

## The Future

I can imagine a lot of the projects, large and small, I've been working on over the years would have benefited from an API development phase under strict management. Even though you can argue that many smaller productions doesn't really require a fully managed development of an API, many of the elements involved in thinking "API first" are to me quite intriguing, enabling better maintainability and transparency across the different teams involved. With a common contribution from people with multiple perspectives (vendor and consumer) on how the API behaves, it is my belief better results we be created.

I do not expect a paradigm shift like this in the company to happen over night, but this article could potentially become the starting point of such a shift. A lot of well written articles about API first already exists and can be found by a simple [google search](https://www.google.com/search?q=api+first), so these are my 5 cents on how my life could become a little better by adopting these ideas.

## Further reading and references

- [Understanding the API-First Approach to Building Products](https://swagger.io/resources/articles/adopting-an-api-first-approach/)
- [What is an API First definition?](https://apifriends.com/api-creation/api-first/)

_Header photo by [CDC on Unsplash](https://unsplash.com/photos/I-SoYkFjVI0)_


API First


The human brain tends to assume that everybody else thinks and behaves in a similar way to it. So every person tends to think that, based on certain categories, they're part of a majority, that there are many others like them. As software developers, it's very easy to assume that every person who uses the apps or the software we make is the same as us. But people are different. How do we make sure we make apps for everyone? We need to care about accessibility and inclusivity.

## Accessibility

When it comes to mobile apps, I would say that accessibility is something that's closer to UX than to the development phase. That's because accessibility has to start from the design. We have to design and develop apps with accessibility in mind.

Unfortunately, the current state of mobile apps, in general, is that they're not accessible, they're not inclusive, developers don't do accessibility testing, and don't even understand the needs of people with disabilities. How many of you have actually seen how a visually impaired person uses a phone? Fortunately, iOS and Android have made a lot of progress in the accessibility field, and they made it a lot easier for developers to build accessible apps. And that when it comes to mobile apps, some accessibility is better than no accessibility.

## Who needs accessibility?

But who needs accessibility? Earlier this month I gave an internal talk about accessibility. And when I announced it in Slack, one of the first Slack reactions my post got was the wheelchair symbol emoji ♿️ . When hearing the term "accessibility", many iOS developers immediately think of Voice Over, the technology that reads out loud things on the screen so people who are visually impaired can use the phone. But the thing is, all of us need certain accessibility features now and then.

Microsoft's [Inclusive toolkit](https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf) has great content on accessibility and inclusivity. A disability should be seen as a mismatch between human interactions and society and not as a personal health problem. They also bring into the spotlight the ideas of temporary and situational disability.

![]({{ sitePrefix }}/assets/img/articles/2020-09-16-Make-apps-for-everyone/microsoft_toolkit.png)

<center><em> © Microsoft </em></center>

## Why should we care about accessibility?

According to [Apple's Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/), approximately one in seven people worldwide have a disability or impairment that affects the way they interact with the world and their devices. That's 14% of your potential user base, which you may lose from the start unless you make your app for them too.

According to [statistics by PSPDFKit](https://pspdfkit.com/blog/2018/improving-dynamic-type-support/#user-adoption), 27% of the users of their PDF Viewer app used a different text size than the default one. That's more than one in four people who might find the experience of your app nonoptimal. Give them control over the text size by supporting Dynamic Type on iOS. Make your apps for them too.

Not to mention that it's the right thing to do and that we as developers and as human beings should care for other people.

And if that's still not good enough, in the US the Americans with Disabilities Act requires certain technology to be accessible for people with disabilities. And there was also a case where the Supreme Court [ruled in favor of a blind man who sued Domino's because their website wasn't accessible](https://www.cnbc.com/2019/10/07/dominos-supreme-court.html).

## Inclusivity

But making apps for everyone is about more than accessibility. It's also about making everyone feel welcome on your platform or in your app. For example, you've probably all seen sign up forms where the users have to input their gender. In most cases, that's a drop-down or a picker with 2 choices, male or female. But what about persons who don't identify as male or female? Well, the easiest thing to do is to just add an "I'd rather not say" option. But what about the people who don't identify as male or female, but would rather say that? So you probably add an "Other" option, pat yourself on the back and congratulate yourself on the great job you did at being inclusive and caring about others. And yes, that definitely is a better solution than just "Male" or "Female". But is it enough? How would a non-binary person feel when they see that your app will categorise them as "other"?

So what's the best way to handle this situation? It's simple: don't collect gender data on your users. With the exception of a very limited number of apps, I can't think of any good reason why an app would need to know its users' gender.

And what about names? There are so many cases where developers built systems with validation rules that fail too many valid names.

<blockquote class="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light"><p lang="en" dir="ltr">My last name isn’t valid because two letters. <br><br>The irony of this... is someone who is Asian probably built parts of this app. How did they not catch this..? <a href="https://t.co/zPVzDOsbWN">pic.twitter.com/zPVzDOsbWN</a></p>&mdash; Shirley (@shirleyywu) <a href="https://twitter.com/shirleyywu/status/1300628412466298881?ref_src=twsrc%5Etfw">September 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

There's an old article that is still very much valid about [falsehoods programmers believe about names](https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/). And one of the most common mistakes with names is assuming that all names your system will ever support are written with the letters of the English alphabet. So no æ, å, ø, ö, ä, ü, ß, ș, ț, ă, â, î, ç, é, etc. How would a person feel when your app tells them their name is not valid?

We need to make apps for everyone. And yes, it's easy to think that if our app is good for us, then it's good for everyone else. But that's not always the case. Here's also where the importance of diversity in the team plays a big role. The more diverse a team is, the more it's likely to build an app that's good for everyone else.

As a conclusion, I'll simply reiterate the title of the article: make apps for everyone.

## Further reading and references:

- [Apps for All: Making Software Accessible](https://www.youtube.com/watch?v=LHHmx5XxIBc)
- [Inclusive - Microsoft Design](https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf)
- [You Can’t Just Draw Purple People and Call it Diversity](https://ux.shopify.com/you-cant-just-draw-purple-people-and-call-it-diversity-e2aa30f0c0e8)

_Header photo by [Adobe](https://xd.adobe.com/ideas/perspectives/social-impact/inclusion-doesnt-stop-accessibility/)_


Make apps for everyone


[Locust](https://locust.io/) is an easy-to-use distributed load testing tool that is completely event-based, that is, a locust node can also support thousands of concurrent users in a process, without callbacks, and use a lightweight process through `gevent` (that is, in Run in its own process). And has the following characteristics:

- No need to write cumbersome UI or bloated XML code, based on coroutine instead of callback, script writing is simple and easy to read;
- There is a simple Web UI user interface that can display relevant test results in real time;
- Support distributed testing, the user interface is based on the network, so it has the characteristics of cross-platform and easy to expand;
- All cumbersome I/O and co-programs are entrusted to `gevent` to replace the limitations of other tools;

### Comparison

|                                       | LoadRunner         | JMeter               | Locust                             |
| ------------------------------------- | ------------------ | -------------------- | :--------------------------------- |
| Cost                                  | Commercial charges | Free and open source | Free and open source               |
| Language                              | C/Java             | GUI                  | Python                             |
| Concurrency mechanism                 | Thread / process   | Thread               | Coroutine                          |
| Single machine concurrency capability | Low                | Low                  | High                               |
| Distributed stress test               | Support            | Support              | Support                            |
| Reporting and analysis                | Perfect            | Simple chart         | Simple chart（Inferior to JMeter） |
| Secondary development                 | Not Supported      | Support              | Support                            |

### Script introduction

##### Scripting:

```python
from locust import HttpLocust, TaskSet, task, between
class Test(TaskSet):
    def on_start(self):
        # Construct request body and request header
        signup_data = {'account': 'test@test.com',
                       'password': '123456',
                       'password_confirm': '123456',
                       }
        signup_header = {"Authorization": r"Bearer tester",
                         "Content-Type": "application/x-www-form-urlencoded"}
        # send signup request
        self.client.post('/api/test/testForSignup',
                         data=signup_data,
                         headers=signup_header,
                         catch_response=True)
    @task(1)
    def get_timeline_page(self):
        # Construct request header
        get_header = {"Authorization": r"Bearer tester",
                      "Accept-Language": r"test"}
        # send get request
        timeline_page_response = self.client.get('/api/test/timelinePage',
                                                 headers=get_header)
        # print response
        print(timeline_page_response.status_code)
    @task(2)
    def get_mypage(self):
        get_header = {"Authorization": r"Bearer tester",
                      "Accept-Language": r"test"}
        mypage_response = self.client.get("/api/test/mypage",
                                          headers=get_header)
        print(mypage_response.status_code)
class WebSiteUser(HttpLocust):
    task_set = Test
    wait_time = between(1, 3)
    host = 'https://test.net'
```

As shown in the code above, we simulated three requests for API access. After executing the "sign-up" request first, "my-page" or "get_timeline_page" will be randomly executed at a ratio of 2:1.

**So, how does the above Python script express the above test scenario?**
As can be seen from the script, it mainly contains two classes, one is `WebSiteUser` (inherited from `HttpLocust`, and `HttpLocust` is inherited from `Locust`), and the other is `Test` (inherited from `TaskSet`). In fact, in Locust's test scripts, all business test scenarios are described in the inherited subclasses of `Locust` and `TaskSet`.

##### Script arguments:

- `@task()`: Indicates the proportion of the execution of the API request; for example, the above figure is filled with 2 and 1 respectively; after the request in the `on_start` function is completed; the function will be randomly executed according to the proportion of 2:1. The function must have `@task()` to be executed.
- `wait_time`: Indicates the random interval of each request.
- `task_set`: Point to a `TaskSet` class, `TaskSet` class defines the user's task information, this attribute is required;
- `host`: The host of the system under test, only used when the `--host` parameter is not specified when starting Locust in the terminal.

##### Enter the locust terminal, and start testing:

Start Locust, enter the background management page of Locust to execute the script and set the number of concurrency. You can use the following example command to start Locust:

```
Locust -f file_name.py
```

After successful startup, you can see the following example prompt:

```
DESKTOP-2M3K1VA/INFO/Locust.main: Starting web
monitor at http://*:8089
DESKTOP-2M3K1VA/INFO/Locust.main: Starting Locust  0.14.4
```

Follow the prompt to visit 「locusthost:8089」 to enter the Locust management background and start the test:

![]({{ sitePrefix }}/assets/img/articles/2020-09-10-Locust-sketch/image2.png)

After setting the various parameters, start the test. You can see the following information output and you can monitor the resource occupation of the server while increasing the concurrency pressure. You can use locust to complete a simple stress test:

![]({{ sitePrefix }}/assets/img/articles/2020-09-10-Locust-sketch/image3.png)

##### About the Distributed stress test:

Once a single machine is not enough to simulate enough users, Locust supports running on multiple machines for stress testing.

To achieve this, you can use the `--master` flag in master mode to enable a Locust instance. This example will run the Locust interactive website you started the test on and view real-time statistics. The machine of the master node does not impersonate any users. Instead, you must use the `--slave` flag to start one or more Locust slave machine nodes, together with the flag `--master-host` (indicating the IP/hostname of the master machine).

The common practice is to run the master in a separate machine, and run a slave instance for each processor core in the slave machine.

The commands for master-slave settings are as follows:
Set Master （The host does not participate in the test, only the results are summarized）:

```
Locust -f file_name.py --master
```

Set Slaves：

```
Locust -f file_name.py --slave --master-host=127.0.0.1
```

After starting the Locust terminal again, you can see the Slaves, so there are two Slaves participating in the test.

![]({{ sitePrefix }}/assets/img/articles/2020-09-10-Locust-sketch/image4.png)


Locust sketch


Apple is making augmented reality accessible to everyone with AR Quick Look. Not only is this great for iOS apps, but also for websites. Online shopping is one of the best industries that can take advantage of AR, as it can give users the possibility to see the products in 3D and in their own environments. From previewing furniture in your home with apps like [IKEA Place](https://apps.apple.com/us/app/ikea-place/id1279244498), to experiencing newly launched cars like this [Lamborghini Huracán](https://www.lamborghini.com/en-en/models/huracan/huracan-evo-rwd-spyder), this technology can improve our experience as buyers. But of course, the applications of web AR extend beyond retail as well.

## AR Quick Look

> Built-in apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D or AR on iPhone and iPad. You can embed Quick Look views in your apps and websites to let users see incredibly detailed object renderings in a real-world surrounding with support for audio playback.

There are many advantages of using AR Quick Look: it gives you interactions like placing, moving and scaling the object, people occlusion and sharing of the model available “out of the box”. It supports vertical and horizontal planes for placing your content and even viewing face accessories. You can view a gallery of Apple's AR Quick Look examples [here](https://developer.apple.com/augmented-reality/quick-look/), all you need to do is open the models on an iPhone or iPad to view them in AR.

For web based AR Quick Look experiences we can use USDZ, the distribution format for [USD (Universal Scene Description)](http://openusd.org/),which is a 3D file format developed by Pixar that focuses on speed, scalability and collaboration.

In this tutorial, we will build a simple webpage that shows a sneaker in AR.

## Preparing the 3D model

I will be using a model from [Sketchfab.com](www.sketchfab.com) but feel free to use whatever model you wish in USDZ file format. Sketchfab offers the option to download the model directly in this file format.

[Adidas Originals Stan Smith by VRModelFactory](https://sketchfab.com/3d-models/adidas-originals-stan-smith-358c67bd2bf74460a5ffc5d93e1e5be0)

### Converting your 3D models to USDZ Files/Changing the base unit of the model

In case you already have your models in other 3D formats, you can check out [this article](https://engineering.monstar-lab.com/2020/04/26/how-to-convert-3d-models-to-usdz-files-using-apples-reality-converter) on how you can easily convert them to USDZ using Apple's [Reality Converter](https://developer.apple.com/news/?id=01132020a).
In this article you can also see in the `Properties` section how to edit the base unit for example from meters to centimetres. I had to do this as well for the sneaker model so that it has a real life size when viewing it in AR.

## Getting started

In order to test what we are building right away on real devices, for simplicity, we will be using [codepen.io](https://codepen.io/):

1. Sign up or login on Codepen
2. Create a new pen and name it as you wish
3. Click save, this will create a link that you can open on your device for testing. Here is how my link looks like: <https://codepen.io/roxanajula/pen/poydGKx>, you should have something similar.

## Showing the model in AR

For basic AR Quick Look functionality, all we need to do is add the following code in the HTML file:

```html
<div>
  <a
    rel="ar"
    href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz"
  >
    <img
      src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg"
    />
  </a>
</div>
```

The code above is pretty straightforward, we have the AR model inside a hyperlink tag and an image to be displayed for the model. By adding the `rel="ar"` attribute we tell the browser that this is an AR model so it will automatically add the AR badge in the right corner of the image and will start the AR experience directly instead of navigating to another page.

![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/codepen.jpg)

I uploaded the image and model on my personal website as you can only host assets directly on Codepen with a paid account. When you will be developing your project you can also link to your project files, like this for example: `href="/assets/models/model.usdz"`.

Additionally, I added the following to the CSS file to fit the image nicer on the screen:

```css
img {
  width: 100%;
}
```

And that's it! You can now save it and reload the Codepen link from your device. When we tap on the image on iOS, we will be taken to the AR Quick Look view. If we tap on the image on macOS, the model will be downloaded on your machine.

![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/ar.jpg)

## Banners

_Available for devices running iOS 13.3 or later_

In the previous section we looked at the most basic AR Quick Look experience, but you can also add banners with `Apple Pay` or `Custom Actions` to your AR experience.

Check out this very useful [webpage](https://applepaydemo.apple.com/ar-quick-look) made by Apple for more information on integrating those features. You can enter all the customisation details you need for your banner and this webpage will generate the code for you, pretty cool!

In this section we will have a look at different styles of banners you can add but it will be up to you to define the actions your website takes in response to tapping on the banner. For more information, see [this article from Apple](https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look).

The flow of your experience will look like this:
![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/bannerFlow.png)

_Image Source: [Apple](https://developer.apple.com/videos/play/wwdc2020/10604/)_

Here are some examples of custom banners for our sneaker webpage:

**Apple Pay banner with title, subtitle, price and a "Buy with  Pay" button:**

- Button types: `plain` (default), `book`, `buy`, `check-out`, `donate`, `pay` and `subscribe`
- The `price` is optional on Apple Pay banners only from iOS 14.

```html
<div>
  <a rel="ar" id="ar-link" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#applePayButtonType=buy&checkoutTitle=Adidas%20Stan%20Smith&checkoutSubtitle=Classic%20trainers&price=$80">
      <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
</div>
```

![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/applePayBanner.jpg)

Find out more about how to support Apple Pay on your website [here](https://developer.apple.com/documentation/apple_pay_on_the_web).

**Custom action banner with title, subtitle, price and a "Preorder" button:**

```html
<div>
  <a
    rel="ar"
    id="ApplePay"
    href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#callToAction=Preorder&checkoutTitle=Adidas%20Stan%20Smith&checkoutSubtitle=Classic%20trainers&price=$100"
  >
    <img
      src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg"
    />
  </a>
</div>
```

![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/preorder.jpg)

**Custom large sized banner with own html:**

- You can pick between 3 height sizes: `small` (81 points), `medium`(121 points) and `large`(161 points). Small will be set by default if `customHeight` is omitted.
- The custom HTML file must be sent over HTTPS.
- I am hosting [the custom html file on my website](https://roxanajula.com/wp-content/uploads/2020/09/sneaker_custom.html)

```html
<div>
  <a rel="ar" id="ApplePay" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#custom=https://roxanajula.com/wp-content/uploads/2020/09/sneaker_custom.html&customHeight=large">
    <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
</div>
```

![]({{ sitePrefix }}/assets/img/articles/2020-09-07-Easy-web-augmented-reality-with-ar-quick-look/customBanner.jpg)

## Content scaling

Content scaling is enabled by default but you can disable it with the following URL parameter: `allowsContentScaling=0`.

## Share link

The share functionality will link to the model by default, but you can also specify another link with the following URL parameter: `canonicalWebPageURL=https://example.com`.

## Detect support for AR

It is good practice to only show the AR model to the users if it's supported, here is how you can detect if AR is supported:

```javascript
const a = document.createElement("a");
if (a.relList.supports("ar")) {
  // AR is available.
}
```

_Code Source: [Viewing Augmented Reality Assets in Safari for iOS](https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/)_

## Bonus: Nested models

You can have a look at the `Making the nested USDZ file` section in this [article](https://engineering.monstar-lab.com/2019/12/31/How-to-make-an-Augmented-Reality-decorating-experience-app-with-AR-Quick-Look) for a step by step tutorial on how to nest together more models into one USDZ file.

_Keep in mind that USDZ is still a fairly new format so you might need to check that your web server understands the `model/vnd.usdz+zip` MIME-type. Refer to your web server documentation on how to configure this if not already supported._

## Resources

- [Sneaker shop with AR Quick Look Codepen](https://codepen.io/roxanajula/pen/poydGKx)
- [Adding an Apple Pay Button or a Custom Action in AR Quick Look](https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look)
- [Viewing Augmented Reality Assets in Safari for iOS](https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/)
- [Previewing a Model with AR Quick Look](https://developer.apple.com/documentation/arkit/previewing_a_model_with_ar_quick_look)
- [WWDC20: Shop online with AR Quick Look](https://developer.apple.com/videos/play/wwdc2020/10604/)


Easy web augmented reality with AR Quick Look


Today, I participated in the RubyKaigi Takeout 2020 online conference. It was the first large-scale developer conference
that I ever took part in and I am very excited to share my experience with you.

## What is RubyKaigi?

RubyKaigi is the largest conference for Ruby programmers held annually in Japan since 2006. Due to the nature of the
Ruby ecosystem, a significant portion of the presentations and discussions are done in Japanese, but since the
conference organizers understand the importance and size of the international community, all talks presented in Japanese
are also available with an English interpretation.

This year, RubyKaigi was originally postponed, then cancelled, and finally converted into an online conference. That
way, truly anyone could join the event.

## Sessions available

This year, there were two “tracks” available: `#rubykaigiA` with mostly Japanese speakers, and `#rubykaigiB` with all
talks being done in English. After looking at the first day’s
[schedule page](https://rubykaigi.org/2020-takeout/schedule/#day1) and reading through the descriptions of each talks,
I mostly decided to follow the `#rubykaigiA` track from the start and switch to the `#rubykaigiB` track just before
lunch; though I definitely want to catch up on some of the talks that I had to skip – there was just way too much good
content available there (which, I suppose, is a very good problem to have 😅)!

## Ractor Report by Koichi Sasada

The conference kicked off (after just a little bit of technical issues because as beloved Murphy would say, “everything
that could go wrong, will go wrong”) with a status report by Sasada-san on Ractor (previously known as Guild). Ractor
will provide Ruby with a parallelism model that provides many benefits compared to the thread-based model seen in many
other programming languages.

Compared to thread-based concurrency, Ractors are thread-safe (meaning you should not be running into dreaded issues
such race condition) and don’t share most objects – in fact, the only objects that are shareable are immutable objects,
class/module objects and some special shareable objects. To send any other data between two Ractors, either a
push-based (where target Ractor is known) or pull-based (where sender Ractor is known) must be used.

Each Ractor can use one or more threads, and in the demonstration showed by Sasada-san, it seemed that Ractors can
utilize available hardware resources quite a bit better than traditional threads.

## Type Profiler: a Progress Report of a Ruby 3 Type Analyzer by Yusuke Endoh

Endoh-san showed everyone the impressive work he’s done on Type Profiler (tentative name), a Ruby interpreter that
executes Ruby programs at the type level and tries to determine type information. This information is then stored in
`rbs` files, which are Ruby 3’s rough equivalent to TypeScript’s `d.ts` type information files.

![Type Profiler]({{ sitePrefix }}/assets/img/articles/2020-09-04-RubyKaigi-Takeout-2020-Day-first/type-profiler.jpg)

As someone who comes to the world of Ruby from the land of statically-typed languages, I can’t wait to get my hands on
Ruby 3 (and RubyMine once it supports RBS type definitions).

## On sending methods by Urabe, Shyouhei

In this talk, viewers were taken on a magical journey that resembled a detective story: it all started with an unusual
profiler’s output that didn’t make much sense. After digging deeper and deeper into the mystery, a culprit in Rails’
ActiveRecord library was found, causing Ruby’s method cache to evict entries that shouldn’t be evicted. After fixing the
issue in Ruby 2.7, the performance of Ruby and Rails apps increased!

## Reflecting on Ruby Reflection for Rendering RBIs by Ufuk Kayserilioglu

After switching to the `#rubykaigiB` track, I was shown Ruby’s powerful capabilities when it comes to reflection and
the many intricacies that one must be aware of when trying to automatically analyze the source code of third-party
dependencies. The work done by Ufuk is used in the [Tapioca](https://github.com/Shopify/tapioca) project, which can
automatically generate type information for your project’s Gem dependencies.

![Ruby Reflection]({{ sitePrefix }}/assets/img/articles/2020-09-04-RubyKaigi-Takeout-2020-Day-first/reflection.jpg)

I only wish that the resulting type information were generated in the RBS format as opposed to Sorbet’s RBI format, but
one can dream, right?

## The whys and hows of transpiling Ruby by Vladimir Dementyev

Transpiling is a technique of transforming source code of one programming language into an equivalent source code in the
same or different programming language. While that’s a daily practice for nearly all front-end web developers (hello
Babel), I was at first unsure as to why that would be necessary in the world of Ruby where we don’t have to worry about
obsolete web browsers that don’t support the latest and greatest versions of JavaScript.

![Transpiling]({{ sitePrefix }}/assets/img/articles/2020-09-04-RubyKaigi-Takeout-2020-Day-first/transpiling.png)

Turns out that my world-view was quite limited, as transpiling doesn’t have to be a process born out of necessity, but
rather out of convenience! When transpiling code written in the Ruby 2.8 syntax into, let’s say, Ruby 2.5 syntax, we
can enjoy the luxury of using new language constructs while still ensuring that the code can be used as a dependency in
projects that are still running an old version of Ruby. Better yet, new or experimental features can be tested and
triaged before the Ruby team decides to add them to the standard language. If you want to learn more about this topic,
I really recommend reading through
[this excellent article](https://evilmartians.com/chronicles/ruby-next-make-all-rubies-quack-alike).

## mruby machine: An Operating System for Microcontoller by Hasumi Hitoshi

Finally, a personal highlight of the day – our own MonstarLab’s Hasumi-san was showing that Ruby is not a language
viable only for computers and servers, but also microcontrollers. That might seem obvious to you, dear reader, but I
have to admit that I would have never imagined that an interpreted language can ever be capable of running on such a
limited hardware – though I’m someone whose microcontroller experience ends with a bit of tinkering with Arduino, so I
really have close to zero idea as to what’s possible in this field.

![Ruby on Sheep 🐑]({{ sitePrefix }}/assets/img/articles/2020-09-04-RubyKaigi-Takeout-2020-Day-first/microcontroller.jpg)

## Running Rack and Rails Faster with TruffleRuby by Benoit Daloze

Finally, in this talk, Benolt demonstrated the world that while Ruby 3 might be 3&times; faster than Ruby 2.0,
TruffleRuby still has much more to offer in terms of speed. I’ve personally toyed with TruffleRuby on GraalVM in the
past a bit and was absolutely blown away by the ability to compile the code into a native binary with no dependencies,
and by being able to combine Java, Ruby, Python and R programming languages in a single project.

## Closing words

The first day of RubyKaigi Takeout 2020 finished with a 30-minute long session where Ruby committers shared their
contributions, favourite features of Ruby 3 and answered a couple of questions from the audience. I really appreciated
being able to see “behind the scenes”, to “meet” the people responsible for creating the beautiful language of Ruby.

The first day of the conference had me excited, yet still managed to overcome my expectations. I adored the quality of
the English interpretation service and I appreciated the fact that all talks were pre-recorded, which both avoided any
possible audio/video/connection issues as well as allowed the speakers to interact with the audience in the chat as
their speech was broadcasted.

I can’t wait to see what the second day of RubyKaigi Takeout 2020 will bring us!


Posts Tagged "frontend"

Introduction to GPUs with OpenGL

Nordic.js 2019

Nodes x Hacktober Fest 2019

Universal App Platform - State of Progressive Web Apps in 2019