In today’s standard of mobile application development, ensuring code maintainability, readability, and scalability is important. Refactoring and design patterns provide structured approaches to improve these aspects. We will dive in deeper into the application of Martin Fowler’s refactoring and design pattern within our Flutter application.

Main Aspects Of Refactoring

Refactoring is the process of restructuring existing code without any kind of change of its original external behavior. The main goal of refactoring is to improve the nonfunctional attributes of the software.

Here are the key points to understand about refactoring:

1. Code Quality Improvements: Enhances the internal structure of the code, making it more somewhat readable, maintainable, and scalable in the long run.
2. Zero Change In Code Behavior: While the internal structure of the code is improved, its external behavior — how the code functions and what it does — remains unchanged as if it were not tampered at first glance.
3. Incremental Changes: Involves incremental changes compared to larger scale overhauls. This makes the process safer and easier to manage.
4. Automated Testing: Having a comprehensive suite of tests without introducing new bugs and the main code’s functionality remains consistent.

Design Patterns And Common Uses

Design patterns have been proven to be reusable solutions to common problems that occur in most software designs. They provide “templates” on how to solve these problems in a way that has been effective for others with the same use cases. Design patterns help to improve code readability and reduce complexity for easier collaboration.

Some design patterns can be categorized into few types or kinds:

1. Repository Pattern: Separates the logic that retrieves data from the main business logic, providing somewhat modular and testable approach to accessing data.
2. Service Layer: Defines an application’s boundary tad-bits and encapsulates its business logic.
3. Factory Pattern: Provides an interface for creating objects in a superclass but allows subclasses to tamper the type of objects that will be created.
4. Data Transfer Object (DTO): An object that carries data between processes to reduce the number of method calls.
5. Decorator Pattern: Allows behavior to be added to an individual object without affecting the behavior of other objects from the same class.
6. Singleton Pattern: Ensures a class has only one instance and provides a global point of access to it.

Applications Approaches In Flutter Framework

In our recent flutter app, we were dealing with an academic conferences services that lets user gain access to conference schedules, speakers, academic publications, and so on. So we stumbled upon a pattern called Repository that fits somewhat perfectly for this use cases.

The Repository pattern helps us to abstract and encapsulate data access logic, making our code easier to work on and test. Hence these are why we think it fits well to our current architecture:

• Separation of Concerns: It separates the data access logic from the main business logic, making the application easier to manage and test.
• Flexibility: It allows for easy swapping of data sources without changing the main business logic.
• Testability: By abstracting the data layer, we were able to mock the repository during unit tests, leading to better test coverage.

Overview of the Flutter Application Structure

• Model: Defines the data structure.
• Repository: Manages data fetching and storage.
• User Interface: Presents the data to the user through a mobile interface.

To illustrate these concepts, we will examine one of our venue map pages for the conference. The components include:

• venue_map_model.dart: Represents the structure of our venue map data. It includes fields for the ID, place, and image URL.

class VenueMap {
  String id;
  String place;
  String image;

  VenueMap({
    required this.id,
    required this.place,
    required this.image,
  });

  factory VenueMap.fromJson(Map<String, dynamic> json) => VenueMap(
    id: json['id'],
    place: json['place'],
    image: json['image'] ?? '',
  );
}

• venue_map_repository.dart: Responsible for fetching the venue map data from a remote server and storing it locally.

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:konfui_mobile/view_venue_map/venue_map_model.dart';

class VenueMapRepository {
  List<VenueMap> venueMaps = [];

  Future<List<VenueMap>> getVenueMaps() async {
    var url = Uri.parse('URL');
    var response = await http.get(
      url,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
    );
    if (response.statusCode == 200) {
      var fetchedJsonDataList = json.decode(response.body)["data"];
      for (var venueMap in fetchedJsonDataList) {
        venueMaps.add(VenueMap.fromJson(venueMap));
      }
      return venueMaps;
    } else {
      throw Exception('Failed to load Venue Maps');
    }
  }

  VenueMap getByPlace(String place) {
    if (venueMaps.isNotEmpty) {
      for (VenueMap venueMap in venueMaps) {
        if (venueMap.place == place) {
          return venueMap;
        }
      }
    }
    throw Exception("$place currently does not have a venue map");
  }
}

• view_venue_map.dart: Displays the venue map and handles user interactions.

import 'package:flutter/material.dart';
import 'package:konfui_mobile/venue_map_rooms/venue_map_room_model.dart';
import 'package:konfui_mobile/venue_map_rooms/venue_map_room_repository.dart';
import 'package:konfui_mobile/view_venue_map/venue_map_model.dart';
import 'package:konfui_mobile/view_venue_map/venue_map_repository.dart';
import 'package:photo_view/photo_view.dart';
import 'package:widget_zoom/widget_zoom.dart';

class ViewVenueMapPage extends StatelessWidget {
  VenueMapRepository venueMaps = VenueMapRepository();
  final String place;

  ViewVenueMapPage({super.key, required this.place});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<VenueMap>>(
      future: venueMaps.getVenueMaps(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return const Center(child: Text("Error: Couldn't fetch Venue Map\nCheck your connection and refresh"));
        } else {
          try {
            final VenueMap venueMap = venueMaps.getByPlace(place);
            return WidgetZoom(
              heroAnimationTag: 'tag',
              zoomWidget: Image.network(
                venueMap.image,
                fit: BoxFit.contain,
              ),
            );
          } catch (e) {
            return Container(
              height: 200,
              color: Colors.grey,
              alignment: Alignment.center,
              child: const Text(
                "Venue Map not found",
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            );
          }
        }
      },
    );
  }
}

Future<List<dynamic>> fetchData() async {
  VenueMapRepository venueMaps = VenueMapRepository();
  VenueMapRoomRepository venueMapRoomRepository = VenueMapRoomRepository();

  List<dynamic> results = await Future.wait([
    venueMaps.getVenueMaps(),
    venueMapRoomRepository.getVenueMapRooms(),
  ]);

  return results;
}

• The showVenueMapPopup function displays a popup with venue map details.

void showVenueMapPopup(BuildContext context, String place) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return FutureBuilder<List<dynamic>>(
        future: fetchData(),
        builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return const Center(child: Text("Error: Couldn't fetch data\nCheck your connection and refresh"));
          } else {
            List<VenueMap> venueMaps = snapshot.data![0] as List<VenueMap>;
            List<VenueMapRoom> venueMapRooms = snapshot.data![1] as List<VenueMapRoom>;

            try {
              final VenueMap venueMap = venueMaps.firstWhere((map) => map.place == place);
              final List<VenueMapRoom> filteredRooms = venueMapRooms.where((room) => room.venueMapId == venueMap.id).toList();

              return AlertDialog(
                content: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ViewVenueMapPage(place: place),
                      const SizedBox(height: 12),
                      const Text(
                        'Rooms:',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 12,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: filteredRooms.map((room) {
                          return ListTile(
                            leading: const Icon(Icons.house_rounded),
                            title: Text("Nama Ruang : ${room.room}"),
                            subtitle: Text("Nomor Ruang : ${room.label}"),
                          );
                        }).toList(),
                      ),
                    ],
                  ),
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Text('Close'),
                  ),
                ],
              );
            } catch (e) {
              return AlertDialog(
                title: Text(place),
                content: Container(
                  height: 200,
                  color: Colors.grey,
                  alignment: Alignment.center,
                  child: const Text(
                    "Venue Map not found",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Text('Close'),
                  ),
                ],
              );
            }
          }
        },
      );
    },
  );
}

Conclusions

Refactoring and applying design pattern in your current project provides a robust and maintainable structure for managing data access. With the addition of Repository Pattern, allows us to encapsulate the data retrieval logic within our dedicated repository classes. At this point, we’ve achieve a clear separation of concerns, enhancing code readability and maintainability.

This pattern not only facilitates easier unit testing by allowing for mock implementations but also offers the flexibility to swap data sources with minimal changes to the main business logic. Consequently, the Repository pattern fits perfectly to our current Flutter application, promoting a cleaner and more scalable codebase.

Sources : Refactoring Guru | SD Times

In today’s fast-paced software engineering landscape, effective teamwork is pivotal for delivering products on time. Nowadays, collaboration tools have become essential in building up team communications, coordinations, and productivity. In my latest software engineering team, we utilized a combination of Discord, GitLab, and Miro to streamline our workflow and notify our latest addition over product changes and new features updates.

What Are Collaboration Tools And What Distinguish Them One And Another?

Generally, collaboration tools vary widely in functionality and purposes, they might offer a combination of the following key features:

1. Communication: Enable real-time or asynchronous communication, including text messaging, voice & video calls, and discussion text channels or forums.
2. File Attachment and Management: Capabilities for storing, sharing, and editing project-related documents and files.
3. Project Management: Features for tracking tasks, deadlines, milestones, and project progress.
4. Version Control: Systems that manage changes to documents or code, allowing multiple users to work on a project simultaneously with the options such as version rollbacks.
5. Integration: Ability to connect with other tools and services, creating a seamless workflow.
6. Visual Collaboration: Tools that support brainstorming and planning through visual elements like whiteboards, sticky notes, and diagrams.

Communication and Instant Notifications with Discord

Discord, notoriously known as a platform for video game communities, at its core is also a versatile communication tool for team. It offers real-time messaging, voice channels, and extensive customization options make it ideal for such software engineering teams.

We integrated Discord with GitLab using webhooks, which allowed us to receive instant notifications for pull requests (PR), merge requests (MR), commits, and merging activities directly in our designated channels. This integration ensured that everyone on the team was immediately aware of changes in the codebase, facilitating quicker reviews and reducing the turnaround time for feedback.

Key benefits of using Discord included:

• Real-time Communication: Send messages and voice channels allowed for quick discussions and resolutions of issues.
• Centralized Notifications: Receive GitLab’s notifications directly into Discord in order to avoid the constant needs to check GitLab for updates, ensuring that no critical updates were missed.
• Collaboration Channels: Separate channels for different text channels and topics in order to keep conversations organized, making it easier to track and retrieve information.

Code Management and Collaboration with GitLab

GitLab act as our primary platform for version control, offering a Git based central commands with continuous integration/continuous deployment (CI/CD) and collaborative code reviews.

GitLab offer us things such as:

• Merge Requests and Code Reviews: Structured code review and feedbacks through assignee’s merge requests allowed for cooperatives code changes, ensuring good standards and knowledges among team.
• CI/CD Pipelines: Automated testing and deployment pipelines helps our development cycle such as maintain our code reliability & performance.
• Issue Tracking: GitLab’s issue tracking system helped us manage tasks, bugs, and feature requests effectively, aligning our development efforts with project goals.

Visual Collaboration and Sprint Planning with Miro

Miro is a digital whiteboard/sticky notes platform, played a pivotal role in our sprint planning sessions. Its simplified interface and set of features enabled us to visualize our plans and ideas collaboratively, regardless of team members whereabouts.

Miro offers few primary elements including:

• Interactive Sprint Planning: We were able to create and manage sprint boards, allowing everyone to contribute to planning sessions in real-time. This visual approach made it easier to prioritize tasks, define product backlog items and allocate resources effectively.
• Ideation And Brainstorming: Miro’s flexibility allowed us to perform brainstorming sessions, taking ideas on sticky notes, and organizing them into sticky cards filled with backlog descriptions and workflows.
• Documentation and Mapping: We documented user stories and other critical project components to be able to provide a centralized visual reference that was accessible to all team members with ease.

Conclusion

The combination of Discord, GitLab, and Miro proved to be pretty effective in enhancing our teamwork and productivity. Discord’s real-time communication and notifications, GitLab’s robust code management and CI/CD capabilities, and Miro’s interactive planning and collaboration features created a seamless workflow that supported our software development efforts.

With us leveraging these tools, we were able to maintain communication, streamline our development processes, and foster a collaborative environment that try to empowered every team member to contribute evenly and effectively.

We as software developers, often times stumble upon both analyzing and addressing not only errors but also other in-app performances. Since some of those tasks can sound a bit daunting and tedious at the same time. Sentry offers real-time error tracking, performance monitoring and analytics, complete with insights into what is currently happening ith our application.

Integrating Sentry.io with NodeJS can significantly enhances the ability to detect, diagnose, and fix issues quickly, ensuring a more reliable app performance. We’ll dive in deeper into Sentry.io as a monitoring and error tracking tool that helps identify and resolve those issues within our application.

Setting Up Sentry With Our NodeJS App

1. Head over to Sentry.io and sign in a new account. Create a new project based on the platform you are currently developing with.

2. Install Sentry’s SDK in your app directory. Since we are trying to integrate with NodeJS, we can proceed using npm as our package manager.

npm install --save @sentry/node @sentry/profiling-node @sentry/tracing

3. Configure Your Sentry’s DSN & Initialize Sentry’s SDK. Here are the approach with my current NodeJS app.

# Best to set your DSN in dotenv for good practices
DSN=YOUR_SENTRY_IO_DSN

require('dotenv').config();
const sentry = require('@sentry/node');
const { nodeProfilingIntegration } = require('@sentry/profiling-node');

sentry.init({
  dsn: process.env.DSN,
  integrations: [nodeProfilingIntegration()],
  tracesSampleRate: 1.0,
  profilesSampleRate: 1.0
});

4. Start Using Sentry’s Transaction & Span. What are those?

• Transaction is a representation of a series of operations or events that occur in a specific sequence within your application. It typically starts when a request is received and ends when a response is sent, encompassing all the steps in between. Transactions provide an overview of the performance of these operations and help identify where delays might be occurring.
• Span is a single unit of work within a transaction. It represents a specific operation, such as a database query, an HTTP request, or any other task. Spans are used to break down transactions into smaller parts, allowing you to see the detailed timing and performance of each individual operation within the broader transaction.

I will be using Sentry’s Span in my app case for a cloud function called “getEvents()”, which returns List<Events> from corresponding Google Spreadsheet.

exports.getEvents = functions.region(REGION).https.onRequest(
    async (request, response) => {
      try {
        const apiKey = functions.config().gsheet.apikey;
        const sheetService = new GoogleSheetService(apiKey);
        const eventsData = await sheetService.getEvents();
        response.status(HttpStatus.StatusCodes.OK).type(JSON_TYPE).send({
          data: eventsData,
        });
      } catch (error) {
        response.status(HttpStatus.StatusCodes.INTERNAL_SERVER_ERROR).send({
          error: "Unable to connect with Google Spreadsheet",
        });
        
        sentry.startSpan(
          {
            op: 'Google API Request',
            name: 'getEvents()',
          },
          () => {
            setTimeout(() => {
              try {
                console.log("Google's API Request failed on getEvents() called");
              } catch (e) {
                sentry.captureException(e);
              }
            }, 99);
          }
        );
      }
    },
);

With this approach, everytime “getEvents()” is called, sentry will start a span full with its own stack trace and catch any exception errors to capture and display it on the Sentry’s Studio.

5. Start analyzing any issues regarding your platform.

Here we have a “ReferenceError” issue with stack tracing that “Sentry” is undefined, indicating either that the package was not installed properly or it was improperly imported. From this point onwards, we will be given notifications on any kinds of issues regarding with platform we are currently developing with.

Other Sentry’s Services That You Might Be Interested To Use With

Let’s talk about the other services that Sentry has to offer.

1. Configure Performance Monitoring

Sentry.init({
  dsn: process.env.DSN,
  integrations: [
    new Sentry.Integrations.Http({ tracing: true }),
    new Tracing.Integrations.Express({ app }),
  ],
  tracesSampleRate: 1.0,
});

app.use(Sentry.Handlers.requestHandler());
app.use(Sentry.Handlers.tracingHandler());

app.get('/api/data', async (req, res) => {
  const transaction = Sentry.startTransaction({ name: 'fetchData' });
  try {
    const data = await fetchDataFromDatabase();
    res.json(data);
  } catch (error) {
    Sentry.captureException(error);
    res.status(500).send('Internal Server Error');
  } finally {
    transaction.finish();
  }
});

With Sentry’s transaction, you can create custom operations within your application to trace the flow and measure the time taken for each of these operation.

2. Better Insights With Contexts

Sentry.setUser({ id: '1234', email: 'user@example.com' });
Sentry.setTag('feature-flag', 'new-dashboard');
Sentry.setExtras({ section: 'homepage', action: 'click' });

• Sentry.setUser() associates a specific user with the error or event being tracked. By providing user details such as id and email, you can identify which users are affected by certain issues. This is particularly useful for debugging user-specific problems and improving customer support.
• Sentry.setTag() attaches a tag to the error or event. Tags are key-value pairs that categorize and filter issues based on specific criteria. For example, tagging errors with a feature-flag can help you determine if issues are related to a particular feature or experiment in your application. This aids in quickly identifying patterns and assessing the impact of new features.
• Sentry.setExtras() adds arbitrary data to the error or event, providing more context about the application’s state when the issue occurred. setExtras() allows you to include detailed information about the environment, actions performed, or any other relevant data that can assist in reproducing and understanding the problem. In this example, it specifies that the user was on the homepage and performed a click action.

Conclusion

Integrating Sentry.io with NodeJS application is one way to track errors and monitor performance. Sentry facilitates real-time insights and in-depth analytics, which aid in the better functioning of a highly reliable and performant solution. Be it unexpected errors or bottlenecks in performance, Sentry.io offers us developers with the tools necessary for such problems.

Sources : Sentry.io documentation

In software development, creating products and services that meet user’s needs and expectations is crucial. User Experience research and usability testing does take parts on this process, allowing both designers and developers to understand user behavior, preferences, and pain points.

Maze, a powerful web application tool designed specifically for UX research and usability testing, offers and act as platform to streamline these processes and extract insights. In this article, we’ll dive in deeper and explore how to conduct UX research and usability testing using Maze.

Setting Up User Interfaces For Testing

1. Define Objectives

Before diving even further, we define the objectives. What are you trying to learn or validate? Establishing clear goals will guide the entire testing process.

In my current development team, we have a task to rebuild mainly a mobile application for academic conferences, thus guiding us to create such environment and interfaces proprietary to our requirements.

2. Create Prototypes

Utilize design tools like Figma to create interactive prototypes of your digital product. Maze infact does supports various prototype formats.

Our team approach takes with Low & High Fidelity Prototypes to further set it up for usability testing later on.

3. Configure Test Settings

Customize such participant demographics, device types, and testing environments to ensure that your tests align with your target audience and objectives.

Since our scope takes place on mobile, we try to imitate a lot of scrollable pages and etc.

Conduct & Analyze Usability Test

1. Head to Maze and conduct a new study, whether its individually or inside a project scopes.

2. Up next, we can link and add our prototype to set its preview and start configuring our path for further usability testing.

3. Share our maze path to our testers, whether you have a dedicated team for one or anyone that can help out!

4. Analyze each path that our testers take and evaluate on why and how does these people navigate through each different pages. Track the impact of design iterations on user behavior and satisfaction through these subsequent usability tests. Monitor metrics over time to gauge improvements and identify areas for further enhancement.

Summary

By leveraging Maze for UX research and usability testing, both designers and developers can gain valuable insights into user behavior and preferences, leading to more user-centric and successful digital products.

With its user-friendly interface and robust features, Maze empowers teams to iterate with confidence, delivering exceptional experiences that resonate with users. Incorporate Maze into your UX toolkit and unlock the full potential of designs process.

Source & Reference : Maze | The Continuous Product Discovery Platform

Software Quality Assurance (SQA) plays a pivotal role in implementing methodologies that serves as a tool to detect bugs and vulnerabilities early in software development lifecycle. One of the recent tools that has gained significant popularity is SonarQube.

SonarQube is a platform that provides continuous inspection of code quality to perform automatic reviews with static analysis of code to detect bugs, code smells, and security vulnerabilities. In this article, we’ll dive in deeper and explore how it serves me in my current software development team as a powerful analysis tool in Software Quality Assurance.

Overview

SonarQube offers a wide range of features. It provides near real-time feedback on code quality and security vulnerabilities, providing insights for maintaining standards throughout the development process. Some key features include:

1. Static Code Analysis: Performs static code analysis to identify quality-related issues.
2. Code Coverage: Measures code coverage ensuring the identification of each features that need further additional testing.
3. Technical Debt Management: Calculates technical debt to fix issues identified in the codebase, enabling teams to prioritize and address them proficiently.
4. Integration with CI/CD Pipelines: Seamlessly integrates with Continuous Integration/Continuous Deployment pipelines, allowing for automated code analysis and feedback in software development.

Configuring & Integrating SonarQube To CI/CD Pipelines

Navigate to your SonarQube instance and add a new project repository.

Select any git project / repositories that you want to set up for further configuration & integration.

SonarQube will ask for your access token and you can proceed with running the sonar scanner for analyzing on your handpicked project. Read more about it here. After that, we are more or less ready to integrate it with our CI/CD pipelines.

As shown above, i am going to add a new stage called “sonarqube-check” to run its cli complete with each scripts needed for sonar to be able to sent its review to our SonarQube instance. Don’t forget to set up environment variables as per best practices to ensure software security measures. For further information about SonarQube Integration CLI you can read it here.

From here, we can start to view and navigate issues related to our selected project, such as bugs, vulnerabilities, code smells, etc. We also can review issues and mark them as redudant if anything seems like a false positive/negative of what sonar has analyzed beforehand.

Conclusion

SonarQube acts as a powerful analytical tool in software quality assurance, providing a wide range of features to identify and improve code quality, security, and maintainability. The seamless integration to CI/CD pipelines also provides such improvement that enable us to identify and address issues.

Source & Reference : SonarQube Documentation

SOLID principles are considered fundamental appliances for writing clean, maintainable, and scalable within a codebase. These principles were introduced in order to aid developers in creating softwares that are understandable, flexible, and robust. In this article, we’ll dive in deeper about what are the SOLID principles and how they can be effectively implemented within my current NodeJS project.

Overview

SOLID stands for five design principles:

1. Single Responsibility Principle (SRP)
2. Open/Closed Principle (OCP)
3. Liskov Substitution Principle (LSP)
4. Interface Segregation Principle (ISP)
5. Dependency Inversion Principle (DIP)

Let’s dive right into each of these principles.

• Single Responsibility Principle (SRP):
  Each module or class should have a single job, either in terms of responsibility or functionality. SRP adherence makes the code more modular, easy to maintain, and less prone to errors. That being said, In NodeJS, you can have modules specifically to handle database operations, SaaS functions, and HTTP request processing.
• Open/Closed Principle (OCP):
  The term Open/Closed means open for extension and closed for modification. In NodeJS, this can be achieved by designing modules or classes in such way that allows for adding and or implementing new functionality through extension without further modifying existing code.
• Liskov Substitution Principle (LSP):
  Objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program. In NodeJS, technically it’s not directly applicable as we’re not dealing with inheritance, but we can ensure structurally that the behavior of corresponding modules remains consistent across different instances.
• Interface Segregation Principle (ISP):
  Clients should not be forced to depend on unused interfaces. This means that interfaces should be small, focused, and specific to the needs by breaking down interfaces into smaller, cohesive units. These can lead to less bloated interfaces and minimize dependencies in-between modules.
• Dependency Inversion Principle (DIP):
  High-level modules should not depend on low-level modules and both should depend on abstractions. In NodeJS, this can be achieved by decoupling approach and using dependency injection to provide from external sources. This can lead to code flexibility, easier to test, and less coupled, leading to improved maintainability and scalability.

SOLID Implementation In NodeJS

Single Responsibility Principle

• The “GoogleSheetService” class is responsible for interacting with Google Sheets API to retrieve events data. It encapsulates the functionality related to Google Sheets interaction.
• The Firebase Function handler is responsible for handling HTTP requests, initializing the “GoogleSheetService”, and sending the response. It focuses specifically on request/response handling.

Open/Closed Principle

• The “GoogleSheetService” class is open for extension (adding and or implementing new methods for different operations on Google Sheets) but closed for modification (existing methods are not altered when extending functionality).

Liskov Substitution Principle

• As far as i’m concern, it’s not directly applicable as i’m not dealing with inheritance, but the code structure ensures that the behavior of “GoogleSheetService” remains consistent across different instances.

Interface Segregation Principle

• The “GoogleSheetService” class exposes a cohesive interface (getEvents method) that clients (like the Firebase Function handler) can use without depending on unnecessary methods.

Dependency Inversion Principle

• The “GoogleSheetService” class abstracts away the details of interacting with the Google Sheets API. It provides a higher-level interface (getEvents method) that the Firebase Function handler (exports.getEvents) depends on. This follows the said principle because the getEvents() firebase function follow an abstraction rather than concrete implementation for Google Sheets API.

Conclusion

Embracing SOLID principles not only improves the quality of code but also enhances collaboration and fosters a culture of continuous improvement in software development practices.

Source & Reference : Geeksforgeeks

The role of a software developer has expanded besides technical proficiency. Being a “people person” is such an environmental requirements with a unique blend of interpersonal skills that goes well in synergy to the technical expertise mentioned. Let’s dive into what it takes to excel in this aspect and why it’s pretty essential in our today’s software development culture.

What Makes Someone A People Person

A “people person” in a software developer environment is someone who’s not only possesses strong technical skills but also try to excels in communication, collaboration, and networking. They tends to build with a positive and productive work environment with other team members, concurrent users, and clients in mind. These type of individuals understand every single bit of importance in teamwork, actively gaining feedback, and prioritize thorough communication in every aspect of interactions.

How Can Someone Adapt To Being A People Person?

Let’s take an example of my current software developer team. We are consisting of seven people each with their own characteristics, thoughts and perspectives.

We, myself included, believe that in order to meet the requirements of every sprint and releases, have to take the initiate moves in order to kickstart our approach on how the team works and how the client responds. There are a 2 main step that i took to create such environment for my team in order to boost our productivity and effectiveness:

1. Collaborative Atmosphere Is A Must: Effective communication is key in both physical co-working spaces and virtual team environments. I decided to set up a Discord channel for my team that offers various chat channels for team discussions, announcements, and updates, with the intention similar to how coworkers might communicate in person or through messaging platforms in a virtual coworking space. It provides us with a sense of centralized space where my other team members can communicate, share updates, and work together on projects.

2. Neat Workspaces Leads To Better Efficiency: How we properly set up a workspace in fact, does affect how efficient we work as a team, lets take an example of how i set up a figma workspace for prototyping both mobile and web applications in low and high fidelity designs.

The primary factor contributing to our improved workflow direction and long-term teamwork proficiency was our meticulous approach at organizing design components and other UI elements into proprietary sections.

Conclusion

Learning on how to be a people person can thrive some individuals to be collaborative, build meaningful relationships, and drive positive outcomes for their teams and projects. Embracing the role not only enhances individual career even further but also contributes to a more inclusive, productive, and fulfilling work culture as a software development team.

When we are working in a software development, we tends to make an app prototype that requires such planning, iteration, and attention to detail. In this particular reason, Figma stands out as a versatile UI & UX platform that facilitates team collaboration throughout the design process. Furthermore, we’ll explore the creation from low fidelity to high fidelity prototypes within a Figma workspace, focusing on both mobile and web applications. We’ll dive deeper into the significance of each phase to bring their visions into our software development process.

The Basics : Nielsen’s 10 Usability Heuristics

The basics of user interface design are a set of principles intended to guide designers in creating more effective and user-friendly interfaces. These heuristics were developed by Jakob Nielsen and are widely recognized in the field of usability and human-computer interaction. Here are the said ten heuristics:

1. Visibility of system status: The system should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.
2. User control and freedom: Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
3. Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
4. Error prevention: Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
5. Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
6. Flexibility and efficiency of use: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
7. Aesthetic and minimalist design: Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
8. Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
9. Help and documentation: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

The Necessities of Low Fidelity Prototypes

Low fidelity prototypes act as a basic skeletal blueprint for an app, allowing us to throw in concept ideas and mockups. This skeletal blueprint represent layout structures, navigation flows and content placement. Eventually, these designs plays a pivotal role in validating those applied concepts, identifying usability issues, and refining user journeys before investing even further into high fidelity iterations.

Crafting Low Fidelity Prototypes

With what Figma has to offer, we can utilize its wide variety of robust toolkit, starts with making few sketches out whether it’s wireframes, flow diagrams, or rough mockups. We try to keep up some pace of rapid ideation and iteration in a real-time collaboration that allows seamless communication with other team members, making it efficient brainstorming and design cycles.

Here we have some of the design based on my team current software development. An app that serve purpose around academic conference that users can interact with for each event details, keynotes and also chat session for asking questions regarding specific events.

These designs enable us to proceed even further into High Fidelity iterations for more proprietary application that mimics the actual end product.

Transitioning to High Fidelity Prototypes

At this point, our low fidelity designs marks a significant milestone in the design process. We can proceed to polish the visual aesthetics, interaction details, and content elements of the app, providing our clients with a realistic representation of the end product. Starts with refining typography, incorporate color schemes, add interactive components, and fine-tune UI elements in order to create more immersive experience.

Testing High Fidelity Prototypes Interactively

We set up a prototype flow for users to test out here. This prototyping capabilities allow us to mimic a fluid and responsive user experiences, thus gain us valuable insights into user interactions and ensure seamless compatibility across other platform and devices.

Conclusion

With the technology that is available today, we as a software developer can start prototyping design visions from concept ideas to execution. By creating low and high fidelity prototypes, it allow us to bring and deliver immaculate user experiences and gain insights on what’s work for our client and what are the improvements that we can bring to the table for the end product.

Source:
https://www.figma.com/resource-library/low-fidelity-prototyping/
https://www.figma.com/resource-library/high-fidelity-prototyping/ https://www.nngroup.com/articles/ten-usability-heuristics/

At its core, Test-Driven Development is a software development technique where tests are written before the actual code implementation. This iterative process follows three main cycle:

1. Write a Test: We, developers, start our requested feature by writing a test that defines the desired behavior of a small unit of code, typically a function or method. This specific test is set to fail by design since our implementation doesn’t yet to exist.
2. Write the Code: Next, we can start to implement and write the code required to make the test pass. The focus here is solely on fulfilling the requirements of the test, without considering additional functionalities.
3. Refactor the Test: Once the test passes, we then able to refactor the code to improve its structure, readability, and efficiency while ensuring that all tests continue to pass.

The Benefits of Test-Driven Development

1. Improved Code Quality: We gain a clear understanding of the expected behavior of their code, resulting in cleaner, more reliable implementations by doing the test upfront.
2. Faster Feedback Loop: Tests are usually automated and executed frequently so that we can identify and fix issues early in the development process, reducing the likelihood of bugs produced in production.
3. Enhanced Design: Writing tests first forces us to think about interfaces and interactions, leading to more ‘cohesive’ and ‘maintainable’ software designs.

TDD’s Implementation on NodeJS Project

First thing first, my requirement is to make an API that fetch google spreadsheets data. So we can try to define a positive test case with onSuccess() request that take “HTTP 200 OK” as a response.

Next, we can describe the test function with its context.

With such test case, it will throws us an error that getEvents() is not defined since we haven’t implement yet.

Now we are on the right track to proceed on writing and implementing the required code for the test. Here we have a listEvents() function to fetch specified events from such spreadsheet ID and gain an Array<Event> as a return.

After that, we proceed to implement & export the getEvents() function with the “200 OK” as response status and the Array<Event> as its body.

Last but not least, we refactor our previous tests to call and verify its response with our corresponding onSuccess verification.

As we can see, our test succeeded with the exported getEvents() function returning “200 OK” as its response and is expected by our verify onSuccess request.

Conclusion

Test-Driven Development is more than just a methodology; it encourages us in order to write better software, respond to change more effectively, and deliver value to our users. Additionally, it may require initial adjustments in such variety of workflows but the long-term benefits far outweigh the investment, making it a valuable practice for any software development team.

Source: https://www.spiceworks.com/tech/devops/articles/what-is-tdd/