Forem: Weseek-Inc

VScode: How to Chain Multiple Devcontainer for Development

Weseek-Inc — Tue, 04 Jun 2024 14:00:00 +0000

Introduction

Hello, I am Ise, an engineer at WESEEK who is in charge of the development and operation of GROWI.cloud.

In this issue, I would like to share a story about a time when I encountered a troubling problem in the development of GROWI.cloud and solved it.

Background

GROWI.cloud develops mainly in node.js, and its projects are divided into “Project A”, “Project B” and so on, according to their roles.
GROWI.cloud's services are made possible by these “Project A” and “Project B” communicating with each other.
Recently, we have decided to use VSCode's devcontainer(, docker-compose) for our development environment.
The devcontainer change had no impact on the development of individual projects, as they were all linked with other projects using the internal test environment.
However, when “Project A” and “Project B” were developed, the devcontainers of both projects could not communicate with each other and hindered the development.
Therefore, I reviewed the settings around the network of devcontainer, and decided to improve the development environment to enable communication between multiple devcontainers.

What I did

Add a setting that allows the network to be specified when the docker-compose of devcontainer is started

Thus, when devcontainer is built, if there is no Docker network, it will be created automatically.

*By adding the same configuration to Project B, it is possible to connect to the same namespace network regardless of whether devcontainer of Project A or B is started first.

On the same Docker network, you can resolve names by service name

Fix service names in devcontainer/docker-compose.yml so that they are not covered by Projects A and B

*Service names in the same Docker network cannot be resolved correctly if they are the same, so even if they are different projects, it is necessary to make sure that the service names do not overlap.

Now you can name resolve node.js apps in Project A as node, node.js apps in Project B as node-project-b, and so on!

Set network in .devcontainer/docker-compose.yml to connect to the same network

Review correspondence destination

*Before devcontainerization, the communication destination was sorted by “port number” of localhost, but now it is possible to communicate by specifying the service name, so it has been modified.

example: When sending a POST request from Project A to Project B

Rebuild container

That's all I did!
Hope everyone has a good devcontainer LIFE!

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI is a wiki service with features-rich support for efficient information storage within the company. It also boasts high security and various authentication methods are available to simplify authentication management, including LDAP/OAuth/SAML.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Use Self-Made Type Guard with TypeScript "is" Operator

Weseek-Inc — Thu, 30 May 2024 14:00:00 +0000

Introduction

Hello, I'm haruhikonyan and I've been working on WESEEK for a while now.
Do you use TypeScript?
You can write not only front-end code, but also server-side code with Node, and it's also type-safe!
In this article, I want to introduce a self-made type guard using the "is" operator, one of the user-defined type guards, to make TypeScript more robust and useful.

What is a Type Guard?

First of all, what is a type guard?
You can read the reference for an overview, but the one you will probably use the most is as follows.

We often use null and undefined checks as you can see. Of course, it is often necessary to determine not only primitive types such as null, but also original types defined by the user.

This is where the "is" operator comes in.

What is "is"?

It is probably faster to look at than explain it so I will show you an example first.
Axios, one of the most widely used libraries, has a simple implementation called isAxiosError.

As you can see in the example, it determines whether a variable is an AxiosError or not, and type guarding is used to narrow down the variable type.

I was going to introduce it as it is, but the original code was in JavaScript, so I rewrote it here in TypeScript to make it relatively easy to read.

isObject

This is also like a real type guard. Since the "is" operator is not used, it does not narrow down the type of the type guard in a transpiler sense, but it guarantees that the type is not null and is of type object with the typeof.

isAxiosError

Here is the main issue. First, let's look at what's inside.

and the first thing is that payload is an object. This is good.
Then we see that the property of that payload has the value isAxiosError true.
That is all.
It seems that the error object issued by Axios always contains the value true.

This means that if the function isAxiosError returns true, it will tell the TypeScript transpiler that the payload given as an argument is (is) type AxiosError<T, D>.

More Explanation

The above is almost all that has been explained, but the following URL contains more detailed and complete specifications, so if you are in doubt or want to know more, check it out.

Made a Function to Determine the String Array

I hope everyone now understands the “is” operator.
Here, I would like to introduce a function I created when I was using TypeScript and wanted to know exactly whether a certain variable was a string array or not.

Function created

If you have read the above explanation, you may understand it. The explanation is that what we receive as value is an array with isArray, and if the value is determined to be an array, the every function tells the transpiler that it is of type string[] if all of its elements are of type string.

In practice, when a query is received from a Request in express, the type of query is string | string[] | QueryString.ParsedQs | QueryString.ParsedQs[] | undefined, a type that considers all possibilities.

If you want just a string, you can use typeof, but if you want to determine string[], isArray is not enough, so I created my type guard.

Be Careful not Falsify the Mold

I'm sure that you have been tempted to try your hand at type determination using the "is" operator. However, if you write is Hoge in the definition and the function returns even true, the transpiler already knows that it is a Hoge type, so if you write a proper judgment, it will be a false type.

The isAxiosError is not always appropriate, but if an appropriate object has a property called isAxiosError and true is set there, it is assumed to be of type AxiosError. Both function definition and use of the function should be aware of this danger.

Let's create a more type-safe and robust system, without escaping to “as” or “any”!

About Us💡

In addition, I want to introduce a little more about GROWI, an open software developed by us WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Rails: Switches Serializer according to STI Type

Weseek-Inc — Tue, 28 May 2024 14:00:00 +0000

Introduction

Hello, here is Tamura.

Suppose you have model data of multiple types using STI and want to mix and return them in a single API endpoint. In this case, you would like to switch the serializer according to the STI type.

In this article, I will show you how to do this.

Issue

Suppose the following class hierarchy is realized in STI

SimplePosts has a title and body field, and QAPosts has a question and answer field. They all have a common posted_at field.

Suppose you define an API endpoint called /api/v1/posts and want to return JSON as follows:

Depending on whether the Posts type is SimplePost or QAPost, the JSON keys will differ.

If you are using ActiveModel::Serializers to output JSON, you will need to switch the Serializer depending on the type of Posts.

Solution

The code is shown below.

app/serializers/post_serializer.rb

app/serializers/simple_post_serializer.rb

app/serializers/qa_post_serializer.rb

app/controllers/api/v1/posts_controller.rb

Override the attributes method in PostSerializer. Since each data is taken as an object, the class is determined in case, and SimplePostSerializer.new(object).attributes(nil, reload) and QAPostSerializer.new(object).attributes( nil, reload) generates attributes and merges them into @attributes.

Reference: https://github.com/rails-api/active_model_serializers/blob/0fbe0fad0dec9368e9335b6280a46ca13442727e/lib/active_model/serializer.rb#L334-L343

The reason for overriding the json_key method is to display posts in the json toplevel object. If this is not defined, qa_posts and the type first processed by the Serializer will be set as the key, as shown below.

Note that if jsonapi_include_toplevel_object is false, there is no need to override the json_key method.

Reference: https://github.com/rails-api/active_model_serializers/blob/0fbe0fad0dec9368e9335b6280a46ca13442727e/lib/active_model/serializer.rb#L384-L392

About Us💡

In addition, I want to introduce a little more about GROWI, an open software developed by us WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

How to Target XHR Errors in Cypress

Weseek-Inc — Thu, 23 May 2024 14:00:00 +0000

Introduction

Hello, I am Miyazawa, an engineer at WESEEK, Inc. I usually develop GROWI, an open-source wiki. Today, I will explain how to deal with XHR errors that occur in Cypress, which is used for visual regression testing of GROWI.

Error Details

The error content introduced here is circled in red below. The screenshot shows the actual GROWI login screen.

The actual Cypress code in which the error occurred is shown below. Specifically, it is a Cypress custom command to log in by going to /login, entering the user name and password registered in advance, and pressing the login button. You can code as cy.login(username, password) to use it.

Error Cause

I believe that the cause is that the user's session data was not saved properly in the browser by trying to move to a page that requires login without waiting for the /api/v3/login response that runs when the login button is pressed.

As a test, after pressing the login button (cy.get('.btnSubmitForLogin').click()), I added cy.wait(10000), and the login process was successfully performed without any XHR errors.

From the above, I realized that waiting for the response from /api/v3/login seems to be a good idea, so I will modify the code accordingly.

Solution

Cypress has an API called intercept. This API allows spying and stubbing on HTTP requests made within an application.

Since I only need to spy in this case, the code refers to the documentation. The first argument is the method name and the second argument is the URL. You can create an alias using as.If you put the alias you created into cy.wait, it will wait for /api/v3/login to complete.

I put the above code into the custom command causing the error and it worked correctly.

About Us💡

In addition, I want to introduce a little more about GROWI, an open software developed by us WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Tips on Handling Hash Keys in Rails

Weseek-Inc — Tue, 21 May 2024 14:00:00 +0000

Introduction

Hello everyone, this is Kota.
I use Rails in my daily work, and I would like to briefly share something I learned about hash keys that I handled the other day!

Trouble

What I did was obtain the data from the model, put the variable into it, and hashed the variable using the attributes method.
However, when accessing the hashed variable with user[:name] to obtain the value of name, nil was outputed and the value could not be obtained.

Investigation

As mentioned earlier, the return value when using the attributes method on the data obtained from the model was as follows. That's the time I noticed that the key is a string.

It is something obvious, but I realized again that the value can only be obtained by accessing it in the same format in which it is defined.

I was a little bit stuck from there because I often used symbols instead of strings to get the value of params, etc.

Further Research & Methodology

I took the opportunity to do a little more research on hash and compiled a list of methods that could be used when you are facing similar issues.

1. Convert key from string to symbol

symbolize_keys
- Methods provided by Rails. Internally, it uses ruby's transform_keys(&:to_sym) method.
Reference: https://api.rubyonrails.org/classes/Hash.html#method-i-symbolize_keys

2. Convert key from symbol to string

stringify_keys
- Methods provided by Rails. Internally, it uses ruby's transform_keys(&:to_s) method.
Reference: https://api.rubyonrails.org/classes/Hash.html#method-i-stringify_keys

3. If you also want to convert hash-nesting

One caveat to the above two methods is that if there are nests within the hash, they will not be converted.

If you want to convert nests as well, you can use deep_symbolize_keys (deep_stringify_keys) to do so.

PS:The method transform_keys of ruby is also deep_transform_keys, which can transform nests.

4. If you want to get both symbol & string

with_indifferent_access

Check the class of the variable user that was used earlier.

Now let's change the class to ActiveSupport::HashWithIndifferentAccess using the method with_indifferent_access.

Reference: https://api.rubyonrails.org/classes/ActiveSupport/HashWithIndifferentAccess.html

Try to get values in both strings and symbols.

Now you can retrieve the value as both a string and a symbol.
Params also extend this ActiveSupport::HashWithIndifferentAccess class and can retrieve values as both strings and symbols.

Summary

In this article, I briefly summarized the handling of hash keys and related methods used in Rails.
There are many useful methods related to hash, so please check them out yourself.

About Us💡

In addition, I want to introduce a little more about GROWI, an open software developed by us WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Let's Use the Brower Developer Tools!

Weseek-Inc — Thu, 16 May 2024 14:00:00 +0000

Introduction

Browser developer tools are essential tools in web development.

Good use of developer tools can help you debug your website, optimize performance, improve accessibility, and more.

This article describes the basic usage of browser developer tools and various techniques.

What are Developer Tools?

Developer tools are tools that provide useful functions such as debugging websites, optimizing performance, and improving accessibility.

Major browsers (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.) come standard with developer tools.

How to Open Major Browsers

In common with all major browsers, you can open the developer tools by pressing the “F12” key or Ctrl + Shift + I (Command + Option + I for MacOS).

Here is a Google Chrome Example with MacOS

Element Tab

View & Edit Elements

The elements tab can view and edit the HTML and CSS of a website.

This tab allows you to see the structure and style of your web pages.

By double-clicking on an HTML element displayed in the upper right corner, you can freely edit the element itself, its contents, classes, attributes, etc.

The styles section below allows you to edit CSS styles.

The computed tab within the elements tab allows you to see the actual CSS property values applied to the selected element.

Inspect Mode

You can activate inspect mode by pressing the button in the top left corner of the developer tools.

After activating inspect mode, move the mouse cursor and click on the element you want to select on the web page, and the selected element will appear on the elements tab, where you can see how the element is marked up in HTML.

Console Tab

JS Code Execution

Entering JavaScript code on the console tab and pressing the Enter key executes the JavaScript code and allows you to view the results of the execution.

Message Display

The console tab displays errors, warnings, and other messages on the web page.

If an error occurs, the number of lines and file names of the script in which the error occurred are also displayed along with the error message, which is useful for debugging.

Sources Tab

View and Edit Source Code

The Source tab allows you to view the HTML, CSS, JavaScript, and other source code of a web page.

The source code is displayed as a folder hierarchy, and each file can be expanded to see its contents.

You can also search the code using the search window.

Or you can directly edit the source code, including HTML, CSS, and JavaScript.Use the editor to edit and save the code so that changes are immediately reflected.

Breakpoint Setting

In the source tab, you can set breakpoints.

Breakpoints are used to pause JavaScript execution for debugging.

By clicking on any number of lines in the source code, you can set a breakpoint at that point.

After setting a breakpoint, reload the screen and execute the file, JavaScript execution will stop at the location where the breakpoint was set, and you can check the contents of variables and the screen status at that time.

You can check the contents of variables in the scope panel on the right or by hovering the mouse over a variable in the source code.

Network Tab

The network tab displays detailed information about all network requests issued by the web page.

You can see basic information such as the request URL, method, and HTTP status code, as well as detailed information such as the request header and response body.

How to use the Timeline

The network tab displays a timeline of network requests and their responses.

The timeline visually displays information such as web page loads, request processing times, resource downloads, etc.

Each request is represented as a horizontal bar.

The position and length of the bar represent the time from issuing the request to receiving the response or processing time, and its color and shape vary depending on the type and status of the request.

Application Tab

The application tab allows you to manage and manipulate various resources and storage information provided by the browser, such as local storage for web applications, session storage, cookies, and service workers.

By clicking on an item in Storage, you can see the key, value, etc. of the data stored in that storage.

You can also add, delete, and edit data.

Other Functions

Change Display Device

By clicking on the device icon in the upper left corner of the developer tools, you can switch to a different device view of the web page and preview it.

The device toolbar contains presets for various devices. Clicking on the drop-down menu on the left side will display a list of available devices.

Selecting a device from the list will change the display of the web page to match the size and resolution of the selected device.

Instead of selecting a device, you can also preview the page by specifying the horizontal and vertical sizes.

Full-Size Screenshot

In the Developer Tools, you can take a full-size screenshot of the screen.

To do this, as before, click on the device icon in the upper left corner of the developer tools to display the device toolbar.

Then select “Capture Full-Size Screenshot” from the three dots to take a full-size screenshot.

Useful Extensions for Development

RESTer

RESTer is a Google Chrome extension that allows you to perform HTTP requests.

HTTP requests can be sent in the browser by specifying parameters such as URL, method (GET, POST, PUT, DELETE, etc.), header, and body.

The RESTer stores a history of previous requests, which can be reviewed at a later time or partially modified and sent again.

Furthermore, by defining endpoint URLs and other parameters as environment variables, URLs can be easily switched between different environments.

Summary

We have found that using developer tools can help in many ways, such as reviewing and editing page elements, executing JavaScript code, and monitoring the network.

Developer tools are essential for efficient development and debugging for web developers.

We encourage you to learn these features and become proficient in using the developer tools.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Quickly Trace and Understand The Key Concepts of VictoriaMetrics

Weseek-Inc — Tue, 14 May 2024 14:00:00 +0000

Introduction

Hi, I am Kouki, a system engineer from WESEEK, Inc. in Japan.

This article is a hands-on summary of the “Key Concepts — VictoriaMetrics” from the VictoriaMetrics documentation. My motivation for writing the article is as follows.

First, I couldn’t find any tutorials on the web where I could register my data and query by myself. Also, “Key Concepts — VictoriaMetrics” is easy to understand, with explanations and images, but it took some trials and errors to try on my own.

*Key Concepts explains the behavior of VictoriaMetrics with images like the one below, so I think it is a beneficial document for understanding.

Try to Touch Key Concepts

Preparation

For this tutorial, I will assume that you have already established the following environment.

You should be able to type docker commands (docker run … etc.)
You should have curl commands installed.
(optional*) jq command is installed.

Launch VictoriaMetrics with docker command

Use Quick start — VictoriaMetrics as reference & add -retentionPeriod=100y option to start up VictoriaMetrics.

The docker image tag is v1.85.3. in this case (Because there is a possibility of discrepancy with the article if it is latest).

The command option -retentionPeriod specifies the retention period of the data, as described in the VictoriaMetrics documentation. The default is 1 month (after which the data will be deleted), but in this tutorial, we plan to register data older than 1 month, so we specify 100y as a higher value.

The VictoriaMetrics README also states that the retention period cannot be set to “infinite” and should be set to 100y.

Register your data with VictoriaMetrics

The document describes the following data. From left to right, “Metrics Name”, “Data Value”, and “Time Stamp (Unix Time Stamp (milliseconds)”.

Note that 2022-05–10 10:00:00 is listed as a comment, but when checked in UTC, it is 2022-05–10 08:00:00 (minus 2 hours). Commands from here on will be based on the time minus 2 hours from the time listed in the official document.

I have prepared and implemented a simple ruby script that outputs a string of curl commands from space-delimited text. Since this script only outputs the above curl command, it is not very important and can be skipped.

Confirm whether the data has been registered

Let’s check if the data has been registered by the curl command described above. The time of the first data is set to 2022–05-10T08:00:00.000Z because the time is minus two hours, as described in “Notes”.

Trace Query data in Key concepts

1. Instant query

Let’s start with the Query data in Key concepts. It is recommended to open the Query data page of Key concepts in advance for smooth reading.

First, let’s try Instant query. Let’s try to throw a query at the time minus 2 hours.

The key point here is that “the value 3 was responded to even though there is no data for 2022-05–10T08:03:00.00 in the registered data”. (In the original data, between #2022–05–10 10:02:00 and #2022–05–10 10:04:00)

Please read the official description for more details.

2. Range query

Next, Let’s try the Range query.

You can see that the intended value is returned.

Again, a point to note is that the JSON response listed in the Range query includes the number 7, but 5 is probably the correct value here.

The explanatory text also includes a figure as shown below.

3. Check the shape of the graph in VM UI

VictoriaMetrics has a WebUI called VM UI that allows you to throw queries and see the results.

Let’s check if the graph looks like the one shown in the image above.

When the screen appears, check the “Trace query” checkbox, change the “Step value” to 60 seconds (1 minute) to align the condition with the document image, and press the “EXECUTE QUERY” button to execute the query.

You can confirm that the “Range query” is as shown in the image.

If you would like to touch the VM UI yourself, you can do the same by clicking the button in the upper right corner of the screen that says “LAST 30 MINUTES” by default, specifying the time, and following the above procedure (setting Step Value and Trace Query).

Note that the query is based on the time zone of the browser you are using, so if your time zone is JST, set the query to plus 9 hours.

In the Range Query specified in curl above, it is 2022-05–10T07:59:00.000Z~ 2022-05–10T08:17:00.000Z, so in JST it is 2022-05–10 16:59:00 ~ 2022-05–10 17:17:00.

Conclusion

Although I have cut out much of the explanations for each chapter of the document, we hope that through this article we have created an environment in which you can practically try VictoriaMetrics.

I would like to close with a list of interesting things that you can try.

Change “step=1m” to “step=1s” in “Range query” and count the number of data returned by jq (officially stated to be about 1000, but it is about 800).
Change the command line options passed to VictoriaMetrics, looking at the documentation.
Set retention period back to default and try to register the data in this article (You probably can’t register the data, but you may want to look at the docker logs to see if it works).

I hope this article helps you to better understand VictoriaMetrics.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

A Quick Guide for GraphQL

Weseek-Inc — Thu, 09 May 2024 14:00:00 +0000

Introduction

Hi, I am Kota, a system engineer from WESEEK, Inc. in Japan.

This time, I have decided to write a blog about my introduction to GraphQL, which I had not yet touched.

What Is GraphQL?

GraphQL is a query language for APIs and a runtime for building data-driven applications, developed by Facebook and released as open-source in 2015.

It allows clients to specify the data they need, unlike REST APIs that query endpoints, thus optimizing network usage and improving performance. It also eliminates API versioning issues and allows for API and front-end development decoupling.

Technology Before GraphQL Appeared

Before the advent of GraphQL, the predominant way of exchanging data in web applications was through RESTful APIs, which strictly followed the HTTP protocol and used endpoints to access resources.

However, this RESTful approach had several problems.

The first is the problem of “overfetching” and “underfetching”. “Overfetching” means that the client gets more data than it needs, which consumes unnecessary network and computational resources, while “underfetching” means that the client gets more data than it needs, which consumes unnecessary network and computational resources. On the other hand, “underfetching” refers to the fact that the client cannot get all the data it needs at once and must make multiple requests.

The second is endpoint complexity, which requires independent endpoints for each resource, so as the API grows, the number of endpoints increases and becomes more difficult to manage. In addition, multiple requests are required to retrieve data from multiple endpoints.

Third is the versioning problem, which makes API versioning difficult because a new version of the endpoint must be created each time the format or structure of the data changes.

The fourth implies a strong coupling between the client and server since the endpoint design is highly dependent on the data structure needed by the client. This problem makes it difficult to have front-end and back-end development going at the same time.

These problems were greatly improved with the advent of GraphQL. Specifically, GraphQL allows a single endpoint to retrieve multiple resources, eliminating the need for versioning and allowing for client and server decoupling.

What Has Changed With GraphQL?

With the advent of GraphQL, the above problems were greatly alleviated. This is because GraphQL provides the client with precision in identifying and retrieving data.

Specifically, GraphQL gives clients the ability to specify which fields to retrieve, thereby ensuring that only the required data is retrieved accurately. This improves network utilization and avoids wasting resources by fetching unnecessary data.

In addition, because GraphQL functions as a query language, it is now possible to retrieve complex data and refine the data. These elements are critical to the flexibility and performance of the API.

GraphQL vs REST

REST and GraphQL are both technologies for building APIs but with the following differences.

First, REST returns a fixed data structure for each endpoint. While this is simple and easy to understand, it is prone to the aforementioned “overfetching” and “underfetching” problems.

In contrast, GraphQL allows clients to freely specify the data they need, thus avoiding unnecessary data fetching. This leads to efficient network utilization and high performance.

Furthermore, with REST, if data needs to be retrieved across multiple endpoints, multiple requests must be made. GraphQL, on the other hand, allows multiple resources to be retrieved with a single request. This greatly reduces the number of requests.

Code Comparison

To understand the difference between GraphQL and REST APIs, let’s compare their respective requests and responses using a simple example.

For example, let’s say we want to retrieve information about a user and the title of a blog post by that user. Let’s see how each API style does this.

REST API

In a REST API, there is usually a separate endpoint for each resource. You would first retrieve the user’s information, and then make separate requests to retrieve the user’s postings.

The first request (to retrieve user information):

Response:

The second request (to retrieve user posts):

Response:

GraphQL

GraphQL, on the other hand, allows the client to retrieve all necessary information in a single request. The client can also specify the exact shape and amount of data needed. An example is shown below.

Request:

Response:

Thus, GraphQL has the advantage that a single request can retrieve multiple related resources and the client can specify the exact data needed. In contrast, the REST API may require multiple requests and return data in a form and quantity defined on the server side.

GraphQL 3 Key Features

The primary functions of GraphQL are queries, mutations, and subscriptions.

Query

A query reads data. The following is an example of a GraphQL query:

The query retrieves the name and email fields for a user whose id is 1. The query keyword is optional, but it is easy to read and understand if it is stated. user is the field name, and the id in this case represents an argument. By using arguments, you can retrieve specific users, posts, etc.

Mutation

Mutation is the modification of data. This includes creating, updating, and deleting data. The following is an example of a mutation:

Mutation creates a new user by calling the createUser function and providing the user’s name and email using the input argument. The function returns the id, name, and email of the newly created user. Mutations are used for operations that modify data, such as creating, updating, or deleting data, and always begin with the mutation keyword.

Subscription

Subscriptions are real-time data updates. The client is notified when a server-side event is triggered. The following is an example of a subscription:

Subscriptions are used to notify clients in real-time when a new user is created with its id, name, and email. Subscriptions are used to notify clients when a specific event occurs on the server, in this case the creation of a new user. Subscriptions begin with the subscription keyword.

About GraphQL Schema and Type System

GraphQL provides a powerful type system to clearly define the shape and interaction of the data available through the API. This is known as a “schema”. A schema defines what data a client can retrieve from a server and how that data interacts with it.

Type system

The schema consists of “types” that represent objects with specific shapes and characteristics. Types range from simple scalar types (String, Int, Boolean, Float, ID) to more complex object, enumeration, interface, and union types. These are combined to form the overall picture of the data that the API represents.

For example, imagine an API for a blogging system. In this system, the schema would probably have object types such as “user,” “post,” “comment,” and so on. Each type would have different fields, such as name and age (user), title and content (article), body (comment), etc. Here is the specific code:

These types can have scalar or other object types. In this example, the posts field of type User indicates that it has a list of type Post, and vice versa, the author field of type Post indicates that it has a type User.

In particular, we will discuss notations such as [Post!] notation. This notation indicates an array of type Post, but there are two ! has two different meanings.

The first ! indicates that Post objects are required (non-nullable). This means that if an array exists, all elements contained within it must be objects of type Post, and null elements are not acceptable.

The second ! indicates that the array itself is required (non-nullable). That is, the posts field should always return an array of type Post, and the array itself is not allowed to be null.

Thus, [Post!] means that the array itself must exist and that the contents of the array must consist of one or more objects of type Post, which may never contain null. This allows the detailed definition of the type of each field and its null tolerance.

Relationships

In this way, the GraphQL schema also represents relationships between data. For example, a “user” can have multiple “articles” and each “article” can have multiple “comments”. These relationships are represented through fields of type Object. This relationship allows the client to select and retrieve only the data they need.

Schema Definition Language (SDL)

GraphQL schemas are written using a special syntax called Schema Definition Language (SDL). This SDL is a language for defining GraphQL data structures and can define various data types, such as the Userand Post types described above.

In a type definition, fields are defined in parentheses following the type name, and the type of the field is specified after each field. After the field name, a ! after the field name indicates that the field is required (not nullable). A [] before the type name indicates an array of that type.

In addition, the following special types exist in the schema:

Query type: This is the entry point for the query. Used by the client to read data.
Mutation type: handles data modification (creation, update, deletion). Used when the client modifies data.
Subscription type: monitors real-time updates. Used when the client tracks real-time changes to data.

These special types allow clients to request various operations from the server, such as data reading, modification, and real-time monitoring.

In the above example, a Query type is defined, with fields such as users, users, and posts. Each of these fields returns a list of all users, users with a given ID, and all posts, respectively.

The Mutation type, on the other hand, defines fields for creating new users and posts, named createUser and createPost, respectively, along with the necessary parameters. These operations allow the client to create new users and posts.

The Subscription type defines a field postCreatedto provide information in real-time when a new post is created. This allows clients to monitor the creation of new posts in real-time.

These types and relationships allow the client to query exactly the data it needs and the server to validate the query and return accurate data. This demonstrates the power of GraphQL’s schema and type system.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Speech Recognition with Python & CMU Sphinx

Weseek-Inc — Tue, 07 May 2024 14:00:00 +0000

Introduction

Hi, I am Masuyama, a software engineer from WESEEK, Inc. in Japan.

In this blog, I will explain the simple way to build up speech recognition using Python and CMU Sphinx.

Source code

The working code can be found at https://github.com/hakumizuki/python_sphinx_sample.

The explanation is based on this repository, so please git clone https://github.com/hakumizuki/python_sphinx_sample if you want actually to run the code on your hand.

In the explanation, we will use devcontainer, but if you want to use external devices such as microphones, it may be easier to use an actual device rather than a container.

SpeechRecognition Library

To work with CMU Sphinx in Python, we use the SpeechRecognition library, which is responsible for the various speech recognition APIs.

CMU Sphinx is an OSS speech recognition tool that, unlike the Google Cloud Speech API, works completely offline and does not require internet access. It can recognize speech in any language by providing a language model. For more information, click here.

If you want to try other methods, please refer to this page.

Development Environment Building

Install Docker
Install VSCode
$ git clone https://github.com/hakumizuki/python_sphinx_sample
cd ./python_sphinx_sample
$ code .
Press [Ctrl+P or Command+P], type “Reopen in container” and click on the suggestion that comes up

Now the devcontainer has been started and the environment has been built. Let’s look at the program.

Program Description

The main library used is SpeechRecognition, a Python library for speech recognition.

Constants such as file paths are written in constants.py, and the speech recognition program is written in recognize.py.

constants.py

recognize.py

*1

python recognize.py<mode> is assumed to be used, passing mic as mode will use the audio coming in from the microphone as the audio source, and not passing anything will use the audio file in WAV_OUT in constants.py as the audio source.

About microphones, please refer here.

Running scripts outside of containers
Set up the microphone for use on the container, referring to this article and others.

*2

Create Recognizer instance
Generate a speech recognition object from the audio file in the record method
Execute the recognize_sphinx method with the object for speech recognition to perform speech recognition

Run Program

This time, I would like to create an audio file with speech.py in the repository and have it recognized. speech.py takes an English string and converts it into an audio file.

$ mkdir ./audios → Same hierarchy as src
$ python speech.py “apple banana” → You can change to any English you like.
$ python recognize.py

If the following codes are displayed, your programming is successful.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

VSCode X Docker: Make a Comfortable Development Environment

Weseek-Inc — Thu, 02 May 2024 14:00:00 +0000

Introduction

Hello, my name is Ryo, and I am an engineer from WESEEK, Inc. in Japan. In this article, I would like to introduce how to build a dev container environment in a project using Docker and Visual Studio Code (VSCode) extensions.

Have you ever felt that installing specific programming languages or libraries when building a development environment is a hassle? Especially when installing directly on the host PC, it is very time-consuming because you have to proceed while checking whether there are any conflicts with the existing ones.

Once the dev container environment introduced in this article is built, it is no longer necessary to install individual programming languages and libraries when building a similar development environment. Thus, you can expect to save a great deal of time. This is very effective when developing with multiple developers.

We are sure that there are many people who are developing with VSCode, so please take time to read this article and learn how to make a comfortable development environment.

The Environment Used In This Project

macOS Catalina: v10.15.7
VSCode: v1.65.0
Remote — Containers: v0.224.2
Docker Desktop: v20.10.12

See below for detailed system requirements:
https://code.visualstudio.com/docs/remote/containers#_system-requirements

What Is a Dev Container Environment?

The dev container environment can be built using the VSCode extension “Remote — Containers”, and can be built on any OS as long as Docker and VSCode are available.

As shown in the figure above, when the dev container environment is launched, VSCode can access the Docker container and edit files on the VSCode container.

In addition, VSCode configuration, extensions, and installation of necessary languages and libraries can be stored in devcontainer.json and Dockerfile.

Thus, developers only need to install Docker and VSCode and open the project repository directory on VSCode to use the development environment.

Quickly Build an Environment In 3 Easy Steps

Now, let’s build the dev container environment.

1. Install Docker
Please click on the following link to install the software:
https://www.docker.com/products/docker-desktop

2. Install the extension “Remote — Containers” in VSCode
We will add an extension to VSCode. In this case, we will install “Remote — Containers” since it is for accessing containers.

3. Select “Reopen in Container” and setup
Once the extensions are in place, you are almost ready to go.

Firstly, click on the icon with the green background in the lower left corner of the VSCode screen

Then a menu will appear in the upper center of the screen, click on “Reopen in Container” and wait a moment.

Select the environment you want to create

The construction of the dev container environment is completed

About `.devcontainer` Directory

When the environment is created by the above procedure, a directory named .devcontainer is created as shown below, and two files are automatically created under the directory.

I will give a brief description of these two files

devcontainer.json

This file is mainly used to describe VSCode settings. It can be used to describe VSCode extensions and settings that you want to standardize in your project.

Check here for more reference:
https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_vs-code-specific-properties

Dockerfile

This file describes the configuration of the container itself. We have posted blogs on Dockerfile in the past. For more details, please refer here.

You can also put docker-compose.yml instead of Dockerfile and make it readable.

Docker-compose

In that case, the following definitions are required in the devcontainer.json file:

dockerComposeFile
service

Also, we have posted blogs on Docker-compose in the past. For more details, please refer here.

Check here for more reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_docker-compose-specific-properties

Tips

Since the goal of this article is to build a dev container environment, it is necessary to proceed with the expansion of dockerfile/docker-compose in addition to building the dev container environment, depending on the project.

You can use common extensions in the dev container environment by entering the IDs of the VSCode extensions used in the dev container environment in the extensions of the devcontainer.json file.

You can enter the ID of the extension directly in the file, but as shown in the image below, search for the extension you want to add and select “Add to devcontainer.json” to automatically enter it in the extensions of devcontainer.json.

Thank you for reading and learning with me to create a dev container environment in 3 simple steps.

Why don’t you start now and try to build a dev container environment in the project you are participating in?

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Building a Docker Development Environment (Part 1)

Weseek-Inc — Tue, 30 Apr 2024 14:00:00 +0000

Introduction

Hello, I work as a system engineer in Tokyo and am now mainly developing web applications using Ruby and JavaScript.

I have been using Docker at my workplace for around 2 years now and almost all of my projects are developed using Docker these days. Docker technology has become so helpful that I believe it will be used for a long time.

So, I will explain Docker Compose, Dockerfile, and how to build a Rails development environment with Docker and put them into two different sections. In the first section, I will explain what exactly Docker is and the various components of DockerCompose.yml.

What is Docker?

Docker is a lightweight platform for building containerized virtual environments. This allows you to quickly build, test, and deploy applications.

Containers created by Docker are independent of the execution environment and are not affected by external influences, so everyone can build the exact same environment by simply sharing docker-compose.yml and Dockerfile.

Unlike conventional virtualization technologies, a guest OS is not launched, making it extremely lightweight compared to conventional virtualization technologies.

Docker Compose

Docker Compose is a tool for Docker applications that define and run multiple containers. By setting up the complex configuration required to launch containers in YAML format in docker-compose.yml, you can create and launch application services based on the configuration with a single command.

Today, we will create two containers, one for Rails and one for Postgres, a database, in order to build a Rails development environment.

Components of Docker Compose

version

It represents the version of the format. Therefore, if the version is changed, the file will be written differently.

build

Specify options to be applied at build time. You can specify the path of the build context and the path of the Dockerfile to be used.

context
Specify the Dockerfile to be used in the build. In Docker Compose, any file name other than “Dockerfile” can be specified here. You can also specify the path.
dockerfile
Specify the Dockerfile to be used in the build. In Docker Compose, any file name other than “Dockerfile” can be specified here. You can also specify the path.

image

If no Dockerfile is specified, an image is used. Find the specified image from docker images. If you do not have the image, pull the image from DockerHub to build it.

container_name

You can name the container as you like.

depends_on

It represents the dependencies (order of creation) of the containers. In this case, the Rails container is created after the Postgres container is created.

Also, by specifying a condition for depends_on, you can change the condition of depends_on, such as executing after the container is created and finished.

For more information, please check here.

ports

You can specify both host-side and container-side ports.
(host side: container side)

If only one port is specified, a random port number will be assigned to the host side.

volumes

There are two types of volumes in DockerCompose. The first is the volumes in rails and postgres in docker-compose.yml. This is what is called a bind mount, which mounts files and directories on the host side to the container side.

The second one is defined at the bottom of the file and is used to configure data persistence. Therefore, the data can remain even if the container is deleted.

tty

This corresponds to the -t option of the docker run command. By setting it to true, you can keep containers running. This prevents the container from being terminated immediately after it is launched.

stdin_open

This corresponds to the -i option of the docker run command. By setting it to true, you can tie stdin and error output to the container.

Summary

You have now finished creating docker-compose.yml.
However, we can’t just run this file, we need to prepare a Dockerfile, which is specified in the Rails build.
We will discuss the Dockerfile in the second article.

This article is based on the Compose file reference in the official documentation: https://docs.docker.jp/compose/compose-file/index.html (Japanese)

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

Building a Docker Development Environment (Part 2)

Weseek-Inc — Tue, 30 Apr 2024 14:00:00 +0000

Introduction

Hello, I work as a system engineer in Tokyo and am now mainly developing web applications using Ruby and JavaScript.

In my previous article, I explained Docker Compose. For this article, I would like to continue the discussion and explain more about Dockerfile.

What is Dockerfile?

A Dockerfile is a text file into which you can write the commands you want to run when creating an image.

Generally, you could pull the original image from the Docker Hub and then create a new image based on that image, customized to fit your project and development style.

Merits of Dockerfile

First, let’s talk about creating a container without a Dockerfile.

Find and pull the source image of the container from the Docker Hub.

A container is then created from the pulled image.

The docker run command combines Docker Create and Docker Start into one command to create and run containers. Note that the -d option runs in the background (detached mode), and the -i and -t options leave it ready to accept commands.

Now you have successfully launched a Ruby container named my-container. If you are not particular about it, using the container you created is enough.

On the other hand, the advantage of using a Dockerfile is that you can write ALL the commands you want to execute in the file when you build the image. This allows you to pull images from DockerHub and customize them to fit your project and development style.

For example, when launching a Ruby container, you can use COPY or CMD in the Dockerfile to copy the Gemfile and Gemfile. lock into the container and run Bundle Install.

If you organize the Dockerfile well, you can also start the application by doing all the initial startup processes when the container is launched.

Dockerfile Commands

In this case, I prepared the following Dockerfile:

FROM

In the Dockerfile, we usually use FROM first. FROM sets up the base image to be used in subsequent instructions. When the Dockerfile is executed, it first looks for the image in the environment where it was executed. If the image is not found, it will look for the image in the Docker Hub and download it.

Subsequent instructions are executed sequentially for the image specified in FROM. The build stage can be named by adding “AS name” after FROM. You can use any name other than “name” here. By adding a name, the name can be referenced in subsequent like FROM and COPY, and multiple FROMs can be defined and managed in the Dockerfile.

COPY

Copy files and folders. Note that only files and directories in the directory where the Dockerfile is placed can be copied.

ADD

Adds files and folders. Unlike COPY, if the file is a compressed file, it would be automatically decompressed. In addition, by specifying a URL instead of a file name, a remote file can be downloaded and added.

WORKDIR

Specifies the directory where RUN, CMD, ENTRYPOINT, COPY, and ADD are executed. If the directory specified in WORKDIR does not exist, a new directory will be created.

RUN

The commands you specify will be executed at the time the image is built.
This is where you write the commands you want to run at the time of the image, such as installing packages, copying files, etc.

CMD

This differs from RUN, with CMD specified command executed when the container is started. The main purpose of a CMD is to specify the initial configuration when the container is run, and it can only be used once in a Dockerfile. If multiple CMDs exist, the last CMD will take effect.

ENTRYPOINT

Like CMD, this command is executed when the container is started. However, in the case of CMD, if a command is specified after the docker run, CMD will be overwritten and executed.

Like the example, if the above command is used to launch a container, the CMD in the Dockerfile will be overwritten and the ls command will be executed.

If ENTRYPOINT is used instead of CMD, the command specified in ENTRYPOINT will be executed without overwriting. In other words, the command specified by ENTRYPOINT is always executed.

If ENTRYPOINT and CMD are used together, a command that is a combination of both will be executed.

For example, if you put such a description in the Dockerfile, “ls -a” will be executed when the container is started. The CMD part can be overwritten, so you can change -a to another option and have it run, but you will probably never use it.

USER

Specifies the user who executes commands such as RUN and CMD. The command is automatically executed as the root user if USER is not specified.

LABEL

Add metadata to the image. Specifically, you can describe the name, version, and producer information.

ENV

Set environment variables. The set environment variables can be overwritten later.

Summary

Use the docker-compose.yml we prepared last time and the Dockerfile this time and run the following code:

Now we successfully built a Rails development environment.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.