&nbsp;Welcome to the first article in the TypeScript learning series! In this article, we will explore TypeScript from the perspective of those who already know JavaScript. Start your journey to learn TypeScript and enjoy its benefits!<h2>1. Introduction to TypeScript</h2>TypeScript is a static programming language based on JavaScript. It helps us to write JavaScript code more efficiently, while providing more reliability and maintainability. TypeScript is developed by Microsoft and is widely used in large and complex projects.<h2>2. Why use TypeScript?</h2>Although JavaScript is a powerful programming language, it does not have static data types and time-checking for errors. compilation point. This can lead to an error during program execution. TypeScript solves this problem by adding a static data type and checking for errors at compile time. This helps you detect bugs earlier and increases the reliability of your code.In addition, TypeScript provides smart suggestions, powerful code analysis, and a well-integrated IDE. This increases development productivity and reduces bug finding time.<h2>3. Integrate TypeScript into an existing JavaScript project</h2>If you already have an existing JavaScript project and want to switch to TypeScript, don't worry. TypeScript can be integrated into an existing JavaScript project easily. You can start by renaming the JavaScript code files to .ts and start adding data types to the code sections one by one. This allows you to take advantage of TypeScript step by step without rewriting the entire code.<h2>4. Using data types in TypeScript</h2>One ​​of the most important features of TypeScript is the ability to use static data types. You can define data types for variables, parameters, and function return values. This helps you to check and ensure the validity of the source code.For example:<pre><code class="language-typescript">function add(a: number, b: number): number {
 &nbsp;return a + b;
}
let result: number = add(3, 5);
</code></pre>In the above example, we define the data type for the variable "a" and "b" as "number", and the data type of the return value is "number". TypeScript will check these data types and report an error if they don't match.<h2>5. Type Contracts</h2>TypeScript also supports type contracts, allowing you to define data type and interface constraints for objects. This helps to define required attributes and comply with specific data type rules.For example:<pre><code class="language-typescript">interface Person {
 &nbsp;name: string;
 &nbsp;age: number;
}
function greet(person: Person): void {
 &nbsp;console.log("Hello, " + person.name + "!");
}
let john = { name: "John", age: 25 };
greet(john);
</code></pre>In the above example, we define an interface "Person" with two properties "name" (string type) and "age" (of type number). The "greet" function takes as an argument an object with a similar structure to the "Person" interface. This ensures that only objects that conform to the "Person" contract type can be passed into the "greet" function.If we declare an additional attribute “gender” with value “male” to the object “join”&nbsp;&nbsp;<pre><code class="language-typescript">let john = { name: "John", age: 25, gender: "male" };</code></pre>Now the "john" object has an undeclared property in the type contracts "Person" as "gender" . TypeScript will display an error message:<pre><code class="language-typescript">Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.</code></pre>With TypeScript, compile-time data type checking helps you identify and correct errors right from development development, increasing the reliability and maintainability of the code.<h2>6. Take advantage of TypeScript's advanced features</h2>TypeScript has many other advanced features like:Generics: Generics allows you to write flexible and reusable code for a variety of data types without the need for definitions. tough data type.Module: TypeScript supports modules for managing code in large projects, helping to break code into separate parts and reuse them in other files.Class and Inheritance: TypeScript supports full object-oriented programming with class and inheritance, allowing class definition , properties, methods, and use inheritance to share code between classes.And more.&nbsp;These features, along with others in TypeScript, help you write more flexible and efficient code, while reducing Reduce bugs and increase code maintainability.<h2>7. Conclude</h2>The above is a brief introduction to TypeScript for those who already know JavaScript. TypeScript provides data type validation, smart hints, and powerful code analysis, helping you write more efficient and maintainable JavaScript code. Hope this article has helped you to have an overview of TypeScript and discover its potential. Keep learning and applying TypeScript to your projects to enjoy its benefits! &nbsp;

typescript-logo.png

This article is an introduction to TypeScript and a guide for those who already know JavaScript to discover and enjoy the benefits that TypeScript has to offer. TypeScript helps to write JavaScript code more efficiently, while providing more reliability and maintainability.

TypeScript for Beginners - Taking JavaScript Code to the Next Level

Object duplication is an important requirement in JavaScript programming, and it plays an important role in ensuring secure data and avoid referencing. In JavaScript, there are two methods of object copying, "Shallow Copy" and "Deep Copy". However, many new developers in the field often have difficulty putting these methods into practice. So, in this article, we will learn how to clone objects in JavaScript easily and efficiently, including specific examples and important caveats when using these methods.Before getting into the details of JavaScript object copying methods, let's take a look at what it means to do. copy object.In JavaScript, objects are used to represent an entity or a set of properties and methods of a specific object. This is especially useful in managing data in web applications or server systems. However, when working with objects in JavaScript, you need to sometimes copy them to ensure data safety and avoid referencing.For example, when you pass an object from one function to another in JavaScript, if you don't copy the object and pass only its reference, when the object's internal properties or methods change, this affects all objects that access it. This can cause unexpected problems in your application and make your code difficult to manage and maintain.Therefore, object duplication is an important technique in JavaScript that helps you to solve management related problems data management and ensure the stability of your application. Next, we'll look at specific methods of object copying in JavaScript.As mentioned at the beginning of the article, there are two main methods of copying objects in JavaScript: "Shallow Copy" and " Deep Copy". However, both of these methods have their own pros and cons, and you need to understand how they work before you use them."Shallow Copy" is a method of simply copying an object by creating a new copy of the original object. and point the properties of that copy to the values ​​of the original object. This means that if any properties of the original object change, the properties of the copy will also change."Deep Copy" is a method of fully copying an object by creating a complete copy of the object. original image. This includes both the properties and the internal child objects of the parent object. It ensures that if any properties of the original object are changed, the properties of the copy will not be affected.However, copying objects using the "Deep Copy" method can be expensive in terms of performance, especially is when copying nested or large sized objects. Therefore, it is necessary to consider and choose the most appropriate method depending on the specific situation.In this article, we'll dive into each method of object duplication and learn how to implement them in JavaScript. We'll also look at specific examples and important caveats when using these methods.To begin with, we'll learn how to copy objects using the "Shallow Copy" method. To do this we can use some method like Object.assign() or spread operator.The Object.assign() method is used to copy the properties of one or more objects and assign them to target object. To copy an object using the "Shallow Copy" method using Object.assign(), we can do the following:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }
obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>In the above example, we used Object.assign() to copy the obj1 object to the empty object { } and assign the result to the obj2 object. Now, if we change the value of a property of object obj1, then the a property of object obj2 is not affected, because object obj2 is just a faint copy of object obj1.&lt; /span&gt;In addition to Object.assign(), we can also use spread operator (...) to copy objects . Example:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }
obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>Both Object.assign() and spread operator can be used to copy the properties of one or more objects object to the target object. However, if the object has properties that are objects or arrays, they will only be copied by the "Shallow Copy" method. That is, those properties will point to the same memory area.For a better understanding of the "Shallow Copy" method and the problem with object or array properties, let's consider the following example:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In the above example, we use spread operator (...) to copy obj1 object and assign the result into the obj2 object. Then we change the value of the d property of the c object in the obj2 object. As a result, both obj1 and obj2 objects are affected by this change. This happens because when we copy object obj1 using spread operator, we only copy the reference value of object c into object obj2. Therefore, when we change the value of attribute d in object c of object obj2, the reference value of attribute c in object obj1 is also changed.To copy object using "Deep Copy" method we can use some library like Lodash or jQuery. For example, to copy object using "Deep Copy" method using Lodash, we can do the following:<pre><code class="language-javascript">const lodash = require('lodash');
const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = lodash.cloneDeep(obj1);
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In the above example, we use the Lodash library's lodash.cloneDeep() function to clone the obj1 and assign the result to the obj2 object. Now, when we change the value of property d in object c of object obj2, object obj1 is not affected by this change. This happens because the lodash.cloneDeep() function creates a new copy of the obj1 object, including its properties and values, as well as all nested objects and arrays inside. So, when we change the value of property d in object c of object obj2, object obj1 is not affected by this change.However, it should be noted that the "Deep Copy" method may affect the performance of the application as it will create a full copy of the original object. Therefore, when copying objects in your application, consider convenience and performance.Also you can “Deep Copy” in the following ways:Sử dụng JSON.stringify và JSON.parse:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Note that this method only works with simple objects that do not contain functions or related objects DOM. If you want to clone more complex objects, you can use support libraries like Lodash or jQuery.Or you can write your own deep copy function using recursion.<pre><code class="language-javascript">function deepClone(obj) {
 &nbsp; // If object is not object or null, no need to copy
 &nbsp;if (obj === null || typeof obj !== "object") {
 &nbsp;&nbsp;&nbsp;return obj;
 &nbsp;}
 &nbsp; // Create a new copy of the object
 &nbsp;let clone = {};
 &nbsp; // Loop through all the properties of the object
 &nbsp;for (let key in obj) {
 &nbsp;&nbsp;&nbsp; // Check if the property is a private property of the object
 &nbsp;&nbsp;&nbsp;if (obj.hasOwnProperty(key)) {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // If an object, call recursively to create a deep copy
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof obj[key] === "object") {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = deepClone(obj[key]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // If a primitive value, copy it to a new copy
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = obj[key];
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 &nbsp;}
 &nbsp;// Returns a new copy
 &nbsp;return clone;
}
const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = deepClone(obj1);
obj2.c.d = 4;
console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>In this article, we learned about two methods of object copying in JavaScript, "Shallow Copy" and "Deep Copy", along with the strengths and weaknesses of each method. When duplicating objects in your application, consider using an appropriate method to ensure the correctness and performance of your application. &nbsp;

copy object.jpg

Some knowledge you should know when copying objects in JS

Copy object in JS

I am Hung from ABC Software Solutions Company. Recently, I had the opportunity to experience building a website on the Wix platform, and I would like to share the benefits it brings, along with my personal experience and the lessons I have learned.<h2>What is Wix?</h2> Wix is an online website building platform that allows users to easily create and manage websites without any programming knowledge. Wix offers a drag-and-drop interface that enables users to select and arrange components and content on their website as desired. Users can access Wix through a web browser and start building their website from pre-designed templates or start from scratch with a blank canvas. Wix provides a range of tools and features to customize and design the website, including changing the layout, arranging components, creating product pages, adding features like blogs, online stores, contact forms, and more. Wix also offers content management and analytics features, allowing users to track the performance of their website and interact with visitors. Additionally, Wix supports integration with third-party services such as search engine optimization (SEO) tools, email marketing, social media integration, and more. With Wix, users don't need coding or complex web design knowledge, and they can create a professional and attractive website in a short amount of time.<h2 style="margin-left:0px;">My experience</h2>As a UI/UX designer, I came to Wix through a client request to build a B2B Landing page website. I was given the opportunity to spend nearly 2 weeks to learn and practice. Previously, I had experience building websites using WordPress with the application of plugins such as Elementor, Flatsome, Woocommerce,... Working on Wix this time has some similarities with WordPress that made me feel interesting. more interesting, while providing myself with more new and interesting knowledge about the platform. Here's what I've learned about Wix.<h3 style="margin-left:0px;">Advantages of Wix</h3>Wix shines with a range of notable features. With its appeal to a large user base, Wix impresses with the following standout advantages:<ul><li>User-friendly interface: Wix is designed with a friendly and easily accessible user interface. Users can create and edit websites effortlessly through its drag-and-drop tool.</li><li>Flexible design: Wix offers numerous beautiful templates and interfaces for users to choose from. Additionally, users can customize layouts, colors, fonts, and images to create unique websites that align with their ideas.</li><li>Powerful feature integration: Wix comes with various integrated features such as blogging, online stores, social media integration, SEO support, and more. This enables users to easily build and manage websites according to their specific needs.</li><li>Responsive on multiple devices: Websites built on Wix automatically adapt to different devices like desktops, mobile phones, and tablets. This ensures a seamless user experience across all platforms.</li><li>Dedicated customer support: Wix provides detailed documentation, support centers, and community forums to assist users. You can find quick help and answers to your questions whenever needed.</li></ul><h3>Some disadvantages of Wix</h3>Besides the advantages, Wix also has some disadvantages to be aware of:<ul><li>Limitations of source code customization: Wix does not allow direct access and editing of the source code. Users can only perform customizations through the user interface. This restricts the flexibility and higher level of customization of the website.</li><li>Limited feature extensions: Wix has a range of apps and extensions available in the Wix App Market, but not all features found in general web development platforms may be available. This can make it challenging to meet specific requirements or integrate external tools.</li><li>Service fees and bandwidth limitations: Some advanced features and resource expansions in Wix are only available in paid service packages. Some service packages also have bandwidth limitations, which can affect the website's loading speed and handling of high traffic.</li><li>Wix advertisements: In the free version, Wix displays their own advertisements on your website. To remove these ads, you need to upgrade to paid service packages.</li><li>Difficulty in platform migration: If you want to switch from Wix to another platform, the migration process can be challenging. The conversion may require time and effort to re-customize the website on the new platform.</li></ul>However, these limitations do not undermine Wix's ability to provide a quick and easy website-building solution for users without programming skills.<h3>Compare Wixand WordPress</h3>After learning about Wix, I realized that Wix and WordPress will have many differences, here are some points to pay attention to:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"><h4>Design and layout</h4>Wix and WordPress both offer a range of interface templates for you to choose from. Wix has over 500 pre-designed templates, suitable for various industries. These templates have intuitive interfaces, and you can easily customize layouts and tools according to your preferences. However, one point to note is that once you have chosen a template on Wix, you cannot switch to another template. Instead, you have to continue customizing the layout and components on the selected template. WordPress also provides users with a diverse library of thousands of interface templates, including both free and paid options. One difference from Wix is that WordPress allows easy customization of the chosen interface template by using different themes and plugins. This gives users a higher level of flexibility in creating a unique and targeted website. Whether it's Wix or WordPress, both platforms offer tools and customization options for you to create a beautiful and professional website. The decision to choose between these two platforms depends on your needs and goals. If you want simplicity and ease of use, along with some available templates for customization, Wix is a good choice. On the other hand, if you desire more flexibility and higher customization capabilities, WordPress would be a suitable option, although it does require some knowledge of coding and management.<h4 style="margin-left:0px;">Experience</h4>Wix possesses a wide range of smartly designed and highly user-friendly tools. Even individuals with no knowledge of coding or web design can use them effectively. On the other hand, WordPress has a visual editor that facilitates quick and easy content creation and theme customization. However, exploring the features in WordPress may require more time and effort to learn.<h4>Plugin/App</h4>Currently, the Wix platform has over 500 apps available that support various functionalities such as reviews, galleries, contact form templates, and more. The majority of these apps are free.&nbsp; On the other hand, WordPress boasts an impressive number of plugins, with over 55,000 options available, not to mention thousands of premium apps. In summary, considering the cost-effectiveness and the abundance of features, resources, layout designs, and plugins/apps, WordPress still holds a significant advantage.&nbsp; However, Wix is highly regarded for its user-friendly nature, particularly for beginners.<h3>Should I use Wix?</h3> The Wix platform is simple and user-friendly, even for individuals with limited programming knowledge. People can start using Wix without the need to purchase separate hosting and domain. This makes Wix a reasonable choice for those who don't want to invest too much in technical aspects and finances. If you are not tech-savvy and don't want to spend money on hosting and domain, Wix is a suitable option. You can create a professional website according to your requirements without encountering too many difficulties. However, if you are building a larger, more complex website, WordPress is a better choice. WordPress offers a wide range of features and powerful customization options, while allowing you to use your own domain and leverage advanced functionalities. These are the basic insights into the Wix platform and how to use it to create a simple website. However, it's important to note that Wix does have some limitations. If you only need a simple website or lack deep technical knowledge, then Wix is a safe and convenient choice.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"><h2>The experience I have</h2>Despite the many benefits, I also encountered some challenges during the process of building a website on Wix. One of them was the limitations of the available design templates, which required me to find ways to customize them to meet the project's requirements. However, I overcame these challenges by researching thoroughly and leveraging the flexible features of Wix. The experience of building a website on Wix has provided me with valuable lessons. I realized that mastering the use of an important web design tool like Wix helps enhance my ability to execute future projects. I also recognized the importance of optimizing the user experience and creating a sensible design to meet the needs of clients. In summary, the experience of building a website on Wix has given me valuable knowledge and skills in the field of UI/UX design. I have gained a better understanding of the benefits and limitations of Wix, as well as how to customize and be flexible in creating a beautiful and engaging website. Through this period, I have learned that continuous learning and experimenting will help me further develop in new technologies and enhance my thinking and creativity, delivering excellent products to users. I hope this blog has provided you with useful information and motivation to explore the world of web design. Keep maintaining your passion and creativity, always explore new technologies, and never stop learning. Once again, thank you sincerely, and I hope that we will continue to meet in future articles and sharing. See you again!

WIX cover.png

Wix provides convenience and flexibility. With a variety of pre-designed templates and customization tools, you can create a beautiful and professional website quickly and easily.

Experience building websites on Wix

Today's article we will learn how the Agile model and software testing methods when using the Agile model will be effective.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d594cb3868.png"><h2>1. What is Agile?</h2><ul><li>Agile is an agile software development methodology that focuses on product development in the form of short cycles called "sprints". Agile aims to maximize product value and minimize risks by focusing on adaptability to change and rapid customer response.</li><li>Agile is often applied in software projects but can also be applied in many other areas, from production to marketing and project management.</li></ul><h2>2. Agile criteria:</h2><ul><li>Interaction between people rather than process and tools: Agile focus on interaction and communication among team members first. Regular communication between customers, product managers, and development team members helps ensure a shared understanding of product requirements and helps make decisions faster and more efficient.</li><li>Active software rather than detailed documentation: Agile focuses on developing software that can work instead of detailed documentation. Creating working software versions early makes it possible for customers and development teams to evaluate and provide feedback, thereby optimizing product value.</li><li>Collaborating with customers rather than negotiating contracts: Agile sees customers as part of the product development process. Partnering with customers helps ensure that products are developed that meet actual requirements and respond to customers' changing needs.</li><li>Adaptability to change rather than to a blueprint: Agile allows for changes and adjustments during product development. Rapid adaptation helps ensure that the product can meet new requirements and solve problems that arise during development.</li></ul><h2>3. Rules in Agile:</h2><ul><li>The first priority is to create customer satisfaction by providing valuable products.</li><li>Accept change, even late in the development process. Agile makes the software development process more flexible in terms of changing customer requirements.</li><li>Delivering operational and valuable software products to customers in a short time, by breaking down software products into small pieces and developing them simultaneously.</li><li>Software development team members should cooperate closely to achieve the common goal of the project.</li><li>Build projects around people who contribute directly to the project.</li><li>Create a positive working environment that supports creativity and continuous improvement.</li><li>Focus on providing software products that work according to customer requirements.</li><li>Ensure that the members of the software development team all contribute to the development process and are accountable for the results.</li><li>Adjust the software development process continuously, through periodic evaluation and improvement.</li><li>Use simple and effective methods for software development.</li><li>Encourage direct interaction between members of the software development team.</li><li>Create software products that are sustainable and can adapt to future changes.</li></ul><h2>4. Software testing process in Agile model</h2>a. The software testing phases correspond to the software development phases in the Agile model<ul><li>Planning phase: Test plans are programmed to ensure that customer requirements are fully met. Test plans include functional test plans, performance tests and integration test plans.</li><li>Design phase: Test scenarios are created and test cases are designed. These scenarios are used to ensure that the customer requirements are fully met and that the functionality of the software is tested.</li><li>Development phase: Test cases are executed in parallel with other development steps of the software. Test cases are used to ensure that the software works properly and fully.</li><li>Integration testing phase: Test cases are performed to ensure that the software works properly when integrated with other components of the system.</li><li>Acceptance testing phase: Customer or end user is required to test the product to ensure that it meets their requirements. Acceptance test cases are used to ensure that the software is accepted by the customer.</li></ul>b. Quality assurance activities in segments<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_fde1d78893.png" alt="image.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_image_fde1d78893.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_image_fde1d78893.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_image_fde1d78893.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_image_fde1d78893.png 1000w," sizes="100vw"><ul><li>Requirement definition segment: Customer requirements are defined and ensured that they can be measured and achieved. QA needs to constantly interact with customers to understand their requirements and ensure that the software developed meets these requirements.</li><li>Design segment: QA participates in the architectural design of the software. QA will check if the design meets the quality requirements and company standards. If necessary, QA will make suggestions to improve the design.</li><li>Development segment: QA participates in the software development process. QA ensures that the software developed meets the requirements and set quality standards. QA will conduct product testing to ensure that the developed software meets the quality requirements.</li><li>Testing Segment: QA performs software testing. Types of testing include unit testing, integration testing, system testing, and acceptance testing. The results of the testing activities will be used to improve the software.</li><li>Deployment segment: QA ensures that the software is properly deployed and meets the quality standards. QA will check that the implemented system has met the quality requirements and will make suggestions to improve the product in the future.</li></ul> &nbsp;

image.png

Agile is an agile software development methodology that focuses on product development in the form of short cycles called "sprints". Agile aims to maximize product value and minimize risks by focusing on adaptability to change and rapid customer response.

What is Agile Model in Software Testing?

Welcome back to the Learn What You Share series, and I'm Tuyen. With the previous sharing of content on coding and BA fields, today I will guide you to approach another field that also plays a crucial role in making a project successful, which is the role of a designer. For a designer, in addition to learning or absorbing knowledge from various sources, the tools that can help them express their ideas, creative freedom, etc. are also a part of success. We cannot ignore useful tools such as Adobe Creative Suite (Photoshop, Illustrator, ...) and Figma. For, these two tools are quite useful for a designer like myself.You often hear designers talk about using this software or that software for design, but we just listen and don't really understand them. In case we need to use them later, we still have to ask them about the names of that software. With that drawback in mind, I wrote this blog post to share the software that I use the most for design, which is FigmaFigma is a design software launched in 2015 and quickly adopted by the design community. It allows users to create interactive design drafts and share them with other team membersFigma provides a wide range of useful features such as geometric drawing tools, fonts, colors, and features for creating interactive designs and design templates. Additionally, it integrates with many other tools like Sketch, Photoshop, and project management tools like Jira and Trello. A special feature of Figma is that it allows users to interact with the design's functionality (buttons, links, etc.) like a website.With the flexibility and great features of Figma, you can take advantage of this to make it even better by improving the user experience and making design easier with the help of pluginsAs shared in the blog post 'https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui' by Quoc Hung, he is also a designer who has used common plugins in his designs such as Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... and I have as well. However, I have accidentally discovered even more amazing features of some plugins in Figma, namely: anima, content reel, design lint<h4>Anima</h4>Anima is a plugin that allows users to create buttons, forms, dropdowns, and more with flexible sharing and reuse features to make websites and apps run smoothly and highly interactive.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f14b6226ee.png">You can refer to the UI of components such as button, form, dropdown, etc.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_12c94a945e.png">The plugin provides flexibility, UI, and code support to help developers easily reference and code without deviating from the client's requirements set by the designer.I can't watch the demo you mentioned as I am a text-based AI language model. However, I can assist you with any questions or concerns you may have regarding the Anima plugin for Figma.<ul><li>I selected a previously designed frame (Home page) and right-clicked to select Plugin -&gt; Anima -&gt; Get code. But before using this plugin, you need to install it first ^^!</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f1e884be72.png"><ul><li>After getting the code with Anima plugin, you can choose the programming language that the plugin supports to export the code.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_747bab4051.png">You can export the code in the supported languages ​​such as HTML, React, Vue<ul><li>Finally, the result shows the code for the frame (Home page). But note, this feature is limited if you want to export the code and download the source, you should spend a little more $ for convenience. There is another way to circumvent the law a bit more, you can open to code pen like me and watch it directly. &nbsp;</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d3dc2f743b.png">This is a great plugin, but its free features are limited. Therefore, if you want to have a better experience and have the means, you should add a little $ to have even better experiences!!!In addition, this plugin has a great feature Auto Layout that allows elements to automatically resize and position when the size of the surrounding frame if they change. This reduces the time it takes to update and arrange elements in the design.<h4>Content Reel</h4>Is a plugin that makes the presentation of content (images, content, videos, gifs and animations) in the design become vivid and beautiful.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_533fce5a90.png"><h4>Design Lint&nbsp;</h4>As a plugin that helps to check the quality and standards of the design: ensures consistency in the entire design, colors, spacing, fonts, and other design rules, and helps users find errors in design and fix them quickly.I have a personal exercise, after I design and proceed to ask the support plugin to check, the results I received are quite surprising.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_af9d243da8.png">With only one page, I have wrong many standards, the numbers are amazing. I think this plugin is quite good, it will help us designers improve our design standards and improve our observation, meticulousness and care. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7c6513f53b.png">Realizing that plugins are a small part of making our design more beautiful and perfect. It contributes to helping us reduce stress and understand the time and effort to do new and great things. Thanks to automation and powerful tools, designers can focus on creating products that meet customer and market requirements.Above, are some of the plugins that I discovered on my own in the process of learning to become a designer. I will share the knowledge that I discovered during my studies. Hope it helps okay for you.&nbsp;Thank you for reading this far!!!! See you in the next blog and I'm Tuyen.Post created by ChatGPT and edited.

BLOG.png

I accidentally discovered some amazing features of certain Figma plugins, specifically: Anima, Content Reel, and Design Lint.

Plugin in figma

My problem: I want to build a website with WordPress as the content management system. However, I don’t want to make use of its frontend template, instead, I will expose REST API from WordPress and have a dedicated Frontend WebApp using Nextjs.Below is the diagram:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp" alt="1_9JDIQkG6UOZdWg3VB7vOvg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 128w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 411w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 616w," sizes="100vw"><img class="image_resized" style="width:680px;" src="https://miro.medium.com/v2/resize:fit:700/1*9JDIQkG6UOZdWg3VB7vOvg.png" alt="" loading="eager">Prerequisites:<ul><li>Basic knowledge of SSH into an EC2 server (or any other VPS) and Ubuntu commands, or ability to read documentation for ubuntu commands.</li><li>I have a domain name mydomain.com</li><li>I purchased a wildcard SSL certificate for my domain: *.mydomain.com</li><li>I already setup SSL for my domain: *.mydomain.com</li><li>I created manually an AWS EC2 instance.</li><li>I have a Wordpress backend service to serve REST API at port 8000</li><li>I also have a Wordpress CMS app running at port 8000</li><li>I have a frontend app running at port 3001</li></ul>*Please note that you’re freely to choose the port number.<h2 style="margin-left:0px;">I choose to use Nginx as a reverse proxy server to configure the domain.</h2>&nbsp;Now, let’s jump into the main objective of this blog post.<h2 style="margin-left:0px;">Step 0:</h2><ul><li>Navigate to `/etc/nginx/sites-enabled/` and edit <code>default</code> file using <code>sudo vim default</code></li><li>Better to backup it first by the command <code>mv default defaultbk</code></li></ul><h2 style="margin-left:0px;">Step 1: Configure Nextjs Frontend webapp at port 3001</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp" alt="1_36xC8vGSdwENL11lUHQ0zg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Step 2: Configure the REST API:</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp" alt="1_IpNXpt1ofFBKpdu9w6HM7w.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}</code></pre><h2 style="margin-left:0px;">Step 3: Configure the CMS</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp" alt="1_7AtkF4RGNQ1_16At0HNoZA.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 241w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 500w," sizes="100vw">we are at this part<pre><code class="language-plaintext">#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Full configuration</h2><pre><code class="language-plaintext">
#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}

#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}

#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Last step:</h2><ul><li>Reload and restart Nginx with <code>sudo systemctl reload nginx</code> and <code>sudo systemctl restart nginx</code></li></ul>I hope this helps not only with the configuration but the overall understanding of your own use cases.

1_hq70yoQVaYG_vKQsyQ6rfw.jpg

My problem: I want to build a website with WordPress as the content management system. However, I don’t want to make use of its frontend template, instead, I will expose REST API from WordPress and have a dedicated Frontend WebApp using Nextjs.

Configure NGINX to host both Backend and Frontend servers in one AWS EC2 instance

In this article, I will learn the concept and features of web 1.0, web &nbsp;2.0 and web 3.0<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_67d878a48e.png"></figure><h1>1. What is the World Wide Web (WWW)?</h1>- The World Wide Web (WWW) is part of the internet, which is a system for communicating and sharing information on a network through linked web pages. It was developed by Tim Berners-Lee in 1989. - WWW is a part of the internet, consisting of web pages linked together through hypertext links and hypertext browsers. - Each website on the WWW is identified by a unique address called a URL (Uniform Resource Locator), allowing users to access that website directly. - WWW has opened up a new world of media, giving users access to millions of websites on all topics and fields ranging from entertainment to education, business, and politics. - WWW has also fueled the development of many other web technologies and applications such as e-commerce, social media, online search, and computer cloud (cloud computing). - In recent times, the WWW has become an important means of sharing information about COVID-19, helping health authorities and governments to convey information about the virus and precautions to the community.<h1> 2. What is Web 1.0?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_5b8a1e862b.png"></figure>2.1. Concept - Web 1.0 is a term used to refer to the first phase of the World Wide Web, from its development until around the early 2000s. Web 1.0 can be viewed as a "static web" because it just lets the user see it does not allow direct interaction with such websites. - Web 1.0 focuses mainly on providing static and simple information. Web pages are designed to display static content such as text and images. - Some examples of Web 1.0 sites include news sites, informational sites, and personal websites. It only provides simple static information such as text and images, along with links, without the buttons to interact like today's modern web. 2.2. Features of web1.0 - Static web pages: Web 1.0 only supports static web pages, meaning that the content on the website does not there is a dynamic change but can only be changed by entering another website link or clicking on other links within that web page. - Static content: Content on Web 1.0 web pages is usually static, displaying only fixed information and little change. - Uncategorized information: There is no mechanism to classify and organize information on the website, users have to search for information manually. - No complex dynamics: Web 1.0 websites do not support complex dynamic features like modern web pages, such as media, interactive dynamic features, and complex web applications other miscellaneous.<h1> 3. What is Web 2.0?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_14be3a87a9.png"></figure>3.1. Concept - Web 2.0 is a term used to refer to the second stage of development of the World Wide Web, from the mid-2000s to the present. - Web 2.0 has ushered in a new era of the World Wide Web, marking technological developments and advancements and creating a richer and more diverse online media environment. - Some examples of Web 2.0 sites include Facebook, YouTube, Twitter, Instagram, Wikipedia, Google Maps, blog sites, search sites, and e-commerce sites. 3.2. Features of web2.0 - High interactivity: Web 2.0 allows users to directly interact with websites through comments, likes, shares, votes, ratings, and other features. - Cross-platform: Web 2.0 websites are designed to work on multiple platforms, including computers, mobile phones, tablets, and other smart devices. - Community: Web 2.0 allows users to participate in communities, create social sites, and interact with other users. - Beautiful and intuitive design: Web 2.0 websites are designed with beautiful and intuitive interfaces, making it easy for users to use and find information on the site. - Rich content: Web 2.0 features rich content creation, including audio, video, images, online games, and web applications.<h1>4. What is Web 3.0?</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b9cbcd81c2.png"> 4.1. Concept - Web 3.0 is a concept of evolution of the World Wide Web, believed to be the next stage of development after Web 2.0, and has been developed since 2006. Web 3.0 focuses on building applications and services on a blockchain platform, where decentralization and security are ensured by a distributed network. - Some examples of Web 3.0 applications include: Ethereum, IPFS, Filecoin, Brave browser, Uniswap, Aave, Polkadot, and many more. 4.2. Features of web3.0 - Decentralization: Web 3.0 applications use a decentralized model in which data is stored on distributed network nodes, rather than managed by a third party or a central organization. - Human machine interaction: Web 3.0 enables natural human-computer interaction, through interactive interfaces and voice control systems. - High security: Web 3.0 applications use advanced security technologies such as symmetric and asymmetric encryption to protect user data. - Data ownership: Users will have ownership and control over their data, not letting big companies monetize their data.

web.png

WWW is a part of the internet, consisting of web pages linked together through hypertext links and hypertext browsers. WWW has opened up a new world of media, giving users access to millions of websites on all topics and fields ranging from entertainment to education, business, and politics. It also fueled the development of many other web technologies and applications such as e-commerce, social media, online search, and computer cloud (cloud computing)...

Learn about web 1.0, web 2.0, web 3.0 concepts

Blog

ABC Software Solutions

Platforms, frameworks are growing day-by-day. Here are typical tools we're using and we will continuously update the list.

Experience With

We work and connect with each other at the office, and after work, we also have other enjoyable team-building activities!

ABC team

Our main steps, from listening to your problems to shipping the solutions.

Our process

We get the trust and appreciation from domestic and foreign customer.

Our Customer

Website: <a target="_blank" rel="noopener noreferrer" href="https://odiditravel.com/">https://odiditravel.com/</a>The website is designed to be simple and sophisticated, making it easy for customers to search for tour packages and combos according to their needs. With many attractive tour packages and eye-catching shapes, Odiditravel.com will surely bring users interesting experiences.<h2>1. Search function</h2>The search function allows customers to easily find the right tour package or combo, when clicking on the drop-down bar box with many famous landmarks across the country and abroad, users can choose a destination by Clicking on a location.In addition, users can search by date and departure from their location with an enhanced level of accuracy, or can also search by desired utility type such as Combo/Daily/Tour.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_04_at_16_48_48_674afb99d6.png" alt="Screenshot 2023-04-04 at 16.48.48.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_04_at_16_48_48_674afb99d6.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_04_at_16_48_48_674afb99d6.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_04_at_16_48_48_674afb99d6.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_04_at_16_48_48_674afb99d6.png 1000w," sizes="100vw">Users can enter a place or any place, the search results return with all tour/combo/daily tour packages that match your keywords, this feature is extremely handy for your needs. customer search.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_635f162377.png"></figure><h2>2. Home page</h2>The homepage is the highlight of the entire website, here we can find almost all of the website's information such as banners, a search bar, slides of special offers, sharp images of places famous for tourism at home and abroad, and finally some articles of travel guide.The homepage is neither too simple nor too complicated, making it easy for users to find the necessary information and choose the right travel services for them.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_15_06_01_7a99a0df1c.png" alt="Screenshot 2023-04-05 at 15.06.01.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_15_06_01_7a99a0df1c.png 223w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_15_06_01_7a99a0df1c.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_15_06_01_7a99a0df1c.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_15_06_01_7a99a0df1c.png 1000w," sizes="100vw"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_15_27_39_1153a03f00.png" alt="Screenshot 2023-04-05 at 15.27.39.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_15_27_39_1153a03f00.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_15_27_39_1153a03f00.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_15_27_39_1153a03f00.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_15_27_39_1153a03f00.png 1000w," sizes="100vw"><h2>3. Utility Combo subpages/ Daily tour/ Domestic tour/ Overseas tour</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_15_32_32_7478e39da9.png" alt="Screenshot 2023-04-05 at 15.32.32.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_15_32_32_7478e39da9.png 115w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_15_32_32_7478e39da9.png 369w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_15_32_32_7478e39da9.png 553w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_15_32_32_7478e39da9.png 737w," sizes="100vw">These pages have a similar layout: including special promotional packages with extremely attractive prices will be placed at the top, making it easy for customers to search.<h2>4. Detail page</h2>The detail page contains the full content of the tour package including address, price, general and basic information, detailed schedule, and general regulations of that tour package.Here you can easily leave your information by clicking the Contact Us button or Request a consultation, the Odidi Travel team will quickly connect and guide you to choose the right tour package.<h2>5. Travel guide</h2>Odidi Travel's travel guide page is a great place to find information about fascinating places around the world as well as fascinating travel experiences. Will provide you with helpful tips and detailed information on unique tourist attractions, from the old town to the exciting modern landmarks.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_15_58_14_54042a2b87.png" alt="Screenshot 2023-04-05 at 15.58.14.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_15_58_14_54042a2b87.png 175w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_15_58_14_54042a2b87.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_15_58_14_54042a2b87.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_15_58_14_54042a2b87.png 1000w," sizes="100vw"><h2>6. About Us page</h2>This is the place to introduce the company to the mission, vision, and core values of Odidi Travel. In addition, the about us page also introduces the staff and agents/collaborators of Odidi Travel, helping you better understand the Odidi Travel brand.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_16_27_51_2f9ca6584f.png" alt="Screenshot 2023-04-05 at 16.27.51.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_16_27_51_2f9ca6584f.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_16_27_51_2f9ca6584f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_16_27_51_2f9ca6584f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_16_27_51_2f9ca6584f.png 1000w," sizes="100vw"><h2>7. Recruitment</h2>Odidi Travel's job page is where you can search for job opportunities in the tourism industry. With a clear job description and a handy registration form, it is easy for you to register if you want to accompany Odidi Travel.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_05_at_16_05_54_776aecd61e.png" alt="Screenshot 2023-04-05 at 16.05.54.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_05_at_16_05_54_776aecd61e.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_05_at_16_05_54_776aecd61e.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_05_at_16_05_54_776aecd61e.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_05_at_16_05_54_776aecd61e.png 1000w," sizes="100vw">Above is the specific layout of the Odiditravel.com website that will surely help you find detailed information about tour packages and attractive places at home and abroad.

ODIDI Travel - A website to book cheap tour packages, combos, and daily tours to make your travel journey more convenient.

Website ODIDI travel 

Website: <a target="_blank" rel="noopener noreferrer" href="https://hoaianhtravel.com/">https://hoaianhtravel.com/</a>The website is designed to be simple and easy to use, making it easy for customers to find suitable tourist hotel locations for them. Customers can book tours online through the website or directly contact <a target="_blank" rel="noopener noreferrer" href="https://hoaianhtravel.com/">hoaianhtravel.com</a> travel consultants for dedicated support and advice.<h2>1. Search function</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f41dae9588.png"></figure>Allow customers to easily search for tourist destinations that match their needs. Customers can enter search keywords such as hotel, resort, or tour name to search for information about related tourist destinations.The search function also allows customers to filter search results by criteria such as price, type, distance... and many other criteria. The search function on the website helps customers save time and effort in finding information about travel destinations that suit their needs.<h2>2. List hotel/resort</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b3ad1427c5.png"></figure>You can find a list of reliable and quality hotels in all cities of Vietnam. This list is compiled and evaluated by <a target="_blank" rel="noopener noreferrer" href="https://hoaianhtravel.com/">hoaianhtravel.com</a> based on many criteria such as location, price, service, and reviews from previous customers.Each hotel on the list has detailed information about the services and facilities that the hotel offers, helping customers to choose the right hotel for their needs and requirements. In addition, the website also offers special offers and promotions when customers book online through <a target="_blank" rel="noopener noreferrer" href="https://hoaianhtravel.com/">hoaianhtravel.com</a>.<h2>3. View room rates and book rooms</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_fe9e94eb7a.png"></figure>The hotel page includes the following main sections:- General information: including hotel name, address, the location from the center, and a short description of the hotel.- Slide pictures of the hotel: here you can see all the general pictures of that hotel such as the lobby, dining room, park, bedroom, and kid club...- Details of each hotel's room type including the name of the room type, price, detailed pictures of the bedroom as well as amenities and price of that room type; You can book a room here by clicking the Book button.- Below is an overview of the hotel, location, means of transportation, check-in and check-out times, and check-in rules.- Facilities - Services at the hotel/resort: list amenities such as restaurant, spa, laundry, beach...- Finally, a map of the hotel, is convenient for you to shape the location that the hotel you are looking for.With this layout, customers can easily search for detailed hotel information and make quick and easy booking decisions on <a target="_blank" rel="noopener noreferrer" href="https://hoaianhtravel.com/">hoaianhtravel.com</a> website.

Website booking hotel, resort, tour; Air tickets, car rental to travel Nha Trang and other provinces.

Hoài Anh travel website

Website: <a target="_blank" rel="noopener noreferrer" href="https://pickonename.com/">https://pickonename.com/</a>A website has been created to help you choose an answer by entering choices and spinning the wheel at random to decide an outcome. In this game, the wheel of fortune is divided into nameable tiles, each representing a position on the wheel. The user will fill in all the names in the boxes on the wheel, and then spin the wheel to determine the winner.Pickonename is used to distribute elements randomly, such as for team division in a sports game, or to decide the winner in a competition. In addition, this game is also used to generate lucky prizes for customers or employees in promotions and advertising.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_16_57_cd5e8aa92b.png" alt="Screenshot 2022-10-31 at 15.16.57.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_17_09_da8ca3ed4b.png" alt="Screenshot 2022-10-31 at 15.17.09.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_10_31_at_15_17_28_0f169a9bab.png" alt="Screenshot 2022-10-31 at 15.17.28.png">

A freewheel spinner for a random name picker, free random spinner wheels to help make decisions. Enter choices and spin the wheel to decide a random result.

PICK ONE NAME website

Website: <a target="_blank" rel="noopener noreferrer" href="https://todooy.com/">https://todooy.com/</a>One place to manage your to-do list, with Backlog, To-do, In-process, In-review, In-QA, Done status; assign function; priority from high to low. You will easily manipulate it to make the work process smoother and more efficient.<h2>1. Login display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Login_25512ad9b2.jpg" alt="Login.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Login_25512ad9b2.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Login_25512ad9b2.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Login_25512ad9b2.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Login_25512ad9b2.jpg 1000w," sizes="100vw">You need to log in with your email to store your to-do lists.<h2>2. Create a list</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Home_page_38383620c2.jpg" alt="Home-page.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Home_page_38383620c2.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Home_page_38383620c2.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Home_page_38383620c2.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Home_page_38383620c2.jpg 1000w," sizes="100vw">My list includes all your to-do lists, please log in with email to store my list.Click create a list to create a list.<h2>3. My list display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_List_2355df6e58.png" alt="My-List.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_List_2355df6e58.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_List_2355df6e58.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_List_2355df6e58.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_List_2355df6e58.png 1000w," sizes="100vw">Click New List to create your new list, you can edit share, and delete it.<h2>4. My Tasks display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_task_4b850a0496.png" alt="My task.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_task_4b850a0496.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_task_4b850a0496.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_task_4b850a0496.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_task_4b850a0496.png 1000w," sizes="100vw">All the task that you are assigned<h2>5. To-do list display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/list_task_391807df6f.jpg" alt="list-task.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_list_task_391807df6f.jpg 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_list_task_391807df6f.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_list_task_391807df6f.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_list_task_391807df6f.jpg 1000w," sizes="100vw">Allow to create multiple to-do, add/delete/edit/share to-do/list to-do.<h2>6. To-do task detail display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/detail_task_89c23ed731.jpg" alt="detail-task.jpg" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_detail_task_89c23ed731.jpg 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_detail_task_89c23ed731.jpg 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_detail_task_89c23ed731.jpg 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_detail_task_89c23ed731.jpg 1000w," sizes="100vw">Detail include title, description, Status, Assignee, Priority, Story point, Start date/Due date, and comments.*** Website is being updated with more features.

One place to manage your to-do list, with Backlog, To-do, In-process, In-review, In-QA, Done status; assign function; priority from high to low. You will easily manipulate it to make the work process smoother and more efficient.

Todooy Website 

Website: <a href="https://voteuserstory.com/">https://voteuserstory.com/</a>This is a vote user story website based on the Agile Planning Poker basis, encouraging team building and work, a game-like mechanism that helps everything go in a positive direction and avoids controversies in the meeting.<h2>1. Login display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_15_19_18_24f3b830ea.png" alt="Screenshot 2022-09-30 at 15.19.18.png"><h2>2. Room Creation/Join Room display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_24_18_8bf7f5e3cf.png" alt="Screenshot 2022-09-30 at 16.24.18.png">Click create room or enter the link/room ID that someone else has created.<h2>3. Voting display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_33_12_0ea87552e0.png" alt="Screenshot 2022-09-30 at 16.33.12.png">Copy the link or room ID for colleagues to participate in voting.Here the host can complete the vote by clicking Complete.<h2>4. Voting completion display</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2022_09_30_at_16_44_18_c28ec58940.png" alt="Screenshot 2022-09-30 at 16.44.18.png">Host will have the right to create another story by clicking Next Story.*** Website is updating with more features.

This is a vote user story website based on the Agile Planning Poker basis, encouraging team building and work, a game-like mechanism that helps everything go in a positive direction and avoids controversies in the meeting. 

Vote User Story Website

A simple website plays sounds in a coffee shop. E.g: talking, cleaning, a running coffee machine, etc. This website is born inspired by some similar websites like imissmycafe.com. The objective is to present an office-like atmosphere when we all are working from home because of the pandemic.Website: <a href="https://www.cafesoundbox.com/">https://www.cafesoundbox.com/</a>&nbsp;

Cafe Soundbox

Wordpress

NodeJs

Strapi

ReactJs

NextJs

Electron

Salesforce

Hubspot

Unity

We are with you to understand the problems.

We listen

We will build the MVP (minimum viable product) and get feedback as soon as possible to validate the outcomes

We develop & validate

We make our release cycles as small as possible (one to two weeks) so that we can get actual feedback from end-users.

We release

We don't stop after releasing the product. We keep monitoring and enhancing the product as the requirements can be changed frequently.

We monitor & enhance

mockup odidi.jpg

mockup-hoai-anh.jpg

pickonename.png

We are always proud of the products we make. Products with high efficiency and aesthetics.

Showcases

We found in ABC Solution a way to reduce uncertainty while increasing quality and response time when it comes to making customer needs come true. The team is amazing, always ready to provide the best service and assess our development challenges with an innovative point of view. We feel that our software development department has grown exponentially since we have been working with ABC Solutions. For that and other reasons, we highly recommend them for outsourcing and other development needs.

Jorge Carrasco

Although the cooperation period between Fama and ABC is short, I am very happy and satisfied with ABC's young, enthusiastic, responsible, and inquisitive team of developers. You guys have helped us save a lot of time for the websites we build together.

Hung Nguyen

I would like to thank the extremely talented ABC team that designed my website, you guys have been so supportive and professional to get me a great result. Hoai Anh travel from now on can reach tourists across the country quickly and easily.