Explore all articles in How-to

Efficient Ways For Increasing Working From Home Productivity

Working from home is no longer a strange concept for many workers in the modern era. Especially when everything is held at a distance after Covid. It has changed many people's thoughts on an ideal workplace, since it gives you more freedom and less formality than the office. If you work from home, you need to find ways to stay productive so you can stay on top of your work and keep yourself motivated. You can maintain your focus throughout the day, even when domestic conveniences pose a temptation, by making a few changes and establishing some new, easy habits. Read our post to know more efficient ways for increasing working from home productivity. The impact of working from home on employee productivity Company opinion and policy toward WFH is the first factor affecting worker output. When workers believe their company cares about them and is committed to their success, they are more likely to put in the time and effort necessary to complete projects successfully and on schedule. When workers don't have to waste time, money, and energy commuting between home and the office, they're able to put that saved time and energy toward getting more work done. Working from home has both positive and bad effects on productivity. Staff performance can be boosted if they have access to modern resources like computers and other office equipment, as well as technical and logistical help. However, research suggests that workplace efficiency may suffer when employees are unable to interact in person with their coworkers. Other elements rely on employees' attitudes and conditions, flexibility can boost productivity if individuals have self-discipline, planning skills, and a desire to work remotely. The impact of Working from Home on employee productivity Although it's possible that working from home has slowed down productivity in the near term, the trend is growing in popularity. Working from home has been shown to increase output in the long run. Remote work management may be improved, and managerial support can boost working from home productivity. Ways to increase employees working from home productivity More user-friendly IT systems Bad user experiences happen to everyone. Whether it's an app that won't work, a website that doesn't provide the information we need, or a form that's nearly hard to fill out. Unusable or unfriendly software might be the cause that reduces productivity. Selecting business software should prioritize usability. User-friendly software works faster than sophisticated solutions that require months to learn. Provide more user-friendly software Access to IT solution if problem arises Some technologies have unquestionably aided in making people more productive in the workplace. Applications that simplify and streamline otherwise laborious procedures are used by many thriving companies. They're equipped with features that make completing everyday activities faster and easier. Flexible working hours When employees are given more flexibility in determining when they get their work done, they are better able to balance their professional and personal lives and spend more time with their loved ones. Which in turn increases their working from home productivity. Work schedules that are flexible Allow certain employees into offices if remote working is a challenge Although telecommuting has been around for some time now, many people still find the system to be unfamiliar and difficult to adjust to. Those who are not provided with adequate tools and time to complete their work will be unable to meet expectations. As a result, businesses with a WFH policy should accept employees' requests to return to office. Assistance with data & Internet Technical factors can affect productivity, as working from home is highly dependent on technology and technical equipment. Telecommuting is the only option for remote workers to maintain contact with their employers. To be able to do work from home, one needs access to consistent power and an Internet connection. Encourage video call meetings When employees have the option to work from home, they are more likely to get their work done since they are not as likely to be stopped or distracted by their coworkers. However, being socially and professionally isolated at home for an extended period of time has a negative impact on productivity. To maintain constant communication and collaboration, video meetings are more crucial than ever. Video conferencing gets people to talk to each other, which boosts morale and makes your employees happier, therefore increasing working from home productivity. Maintain constant communication with video calls Supervise progress regularly Schedule regular, formal one-on-one meetings with your remote team members so that you may discuss their progress, goals, and other relevant topics. The best method of communication for your group's meetings is the one that is most convenient for everyone involved. Establish and stick to a regular schedule for staff meetings by utilizing technology applications (Meet, Skype, Zoom, etc.). Constantly updating the team with short status reports is an option to consider. Checking with your team Make available resources & equipment Not everyone has the ability to invest in themselves a fully equipped office. Many employees only have a standard laptop, not to mention some might not own a personal laptop. Some businesses have permitted workers to take home essentials like computers and seating so that they may remain productive while working remotely. More access to software & documents After the Covid event, when most businesses had to operate remotely, many companies had to constantly find ways to stay productive. One of the many effective ways that will boost working from home productivity without spending so much is to provide access to a wide variety of software and documents. Provide adequate support systems It is also suggested that establishing a reliable support system as a means to enhance the benefits of working from home. When employees are not provided with support and have problems adjusting to working remotely, it can lead to a significant increase in inefficiencies. For employees to be able to carry out their work at home to the highest possible standard, adequate resources are required. We recommend implementing Today.ly - a virtual office space where you could see your coworkers signing in daily and working as a unit, in real-time, just like in a physical office. Provide adequate support systems Employer must consider challenges with working remotely Remote workers benefit from more adaptable schedules, but their employers face different problems. The challenges of poor communication and poor management are not easily overcome. Employers can seek help from a variety of useful resources and methods to promote higher levels of interaction and communication inside their organizations. Questions-to-ask to improve employee's WFH productivity Want to increase productivity work from home? Here are some questions to ask to better understand your employees' needs. What are your thoughts on working from home?What can I do to improve your remote working experience?Is there anyone on the team who has been particularly supportive of your WFH transition?Are the WFH policies clear and concise?Are your daily work objectives clear? Every week?Do you think your teammates and team leaders communicate effectively?Is it easy to contact your teammates and team leaders when you need them?Do you think your team leader supports and trusts you?Do you have all of the necessary equipment and remote tools to complete your work to the best of your ability? If not, what do you require?What is your most difficult WFH challenge?What can leadership do to help you work while you're at home? Conclusion Remote performance management is different from office performance management, but that's fine. As long as you take the time to figure out what works best for you and your team, have the correct thinking, methods, and goals, you may enhance performance without coming across as a bossy leader. Which will in turn make you feel pleased, less worried, motivated, and more capable of achieving your goals. SupremeTech have shared some tips with you in the hopes that they would increase your team working from home productivity. Keep up with us for more insightful and entertaining information.

What makes mobile apps slow (and how to speed them up)

It’s no secret that people are always on their phones. If they are not on a social networking app, they’re shopping, gaming, you name it. On average, mobile phone users check their devices 63 times every day. In addition, Americans use their cell phones for 5.4 hours every day on average. This is excellent news for anyone developing an app or considering doing so. However, your app development endeavors will be met with lots of competition. If you want to increase the chances of your app standing out and gaining popularity, you have to ensure that it is fast. Human beings are not inherently patient. With the advancement in technology, they expect maximum speed from all the apps on their phone. According to Apteligent, a mobile app performance specialist, 48% of users will remove or abandon an app if they have to wait longer than two seconds for it to launch. Keep reading this article if your app is slow and you need answers. We will discuss the different issues that make mobile apps slow and how you can speed them up for user satisfaction. 1.    Running outdated software versions App performance will gradually deteriorate if your application uses outdated frameworks and software or has not been upgraded to newer versions in a while. This is because older software versions cannot use more unique features, including improved compiler optimizations and higher community engagement and support. When newer iPhones are released, you'll notice more users complaining about their phones significantly slowing down. Solution Take a closer look at your technology stack and identify any software that still needs to be upgraded to the most recent version. As a rule, the latest versions feature greater compatibility and improved functionality. They provide far better performance and offer more stability. In addition, they are typically embedded with various enhancements that can immediately increase the speed and efficiency of your app, from improved tuning tweaks to security alerts and bug fixes. 2.    Connectivity issues As a developer, you can do little about connectivity issues. It is up to the app user to switch to a better cellular network provider or find a more robust and stable Wi-Fi connection. However, you can make some internal changes to your app to allow it to run more efficiently even when connected to a poor network. There are two possible solutions: Solution: Using a Content Delivery Network Whether you are using a web application or a mobile app, a content delivery network (CDN) can significantly enhance your app's performance. A CDN utilizes multiple servers located all over the world to distribute content quickly and efficiently to visitors. This strategy is highly effective because users receive content from the server that is physically nearest to them. Load data as requested A mobile app often handles enormous amounts of data daily. As a result, loading a large amount of data simultaneously will slow down the app because it is trying to process many requests simultaneously. It would be best to load the data as needed to remedy this. On the other hand, you can opt to divide it into smaller chunks. You'll need separate assemblies to achieve this. Alternatively, you can load textual data first and image-based content later. 3.    Too much data It goes without saying that if your app is overloaded with data, it will take longer to load. However, this does not mean you can delete the chunks of data and make your program lighter. For one, you might have to sacrifice valuable features that make your app unique. Solution: Data compression Compressing data helps speed up loading without sacrificing the attractiveness or functionality of audio components, vivid images, and video content. Compression is a powerful tool that can dramatically accelerate your app's speed.  Data compression takes two forms:  Lossless compression: As the name suggests, content like text and spreadsheets are compressed without losing data. This method allows you to restore a file to its original size without losing data. Lossy compression: Although chunks of data are lost in this method, app users are unaware of it. It is excellent for compressing images, audio, and video. Note: For better performance, you can cache some photos and compress them so you don't have to load them repeatedly whenever a user requests them. 4.    Server issues One of the most frequent causes of delayed apps is typically a server issue. When a user acts as the app, the server performs multiple functions. For example, it executes application code, communicates with thousands of other users, retrieves data from its memory, and rotates between a variety of tasks. Because of the multitude of actions, your server is overwhelmed. As a result, it could run out of memory or process requests slowly to prevent it from shutting down. As a result, it delays processing a few requests while others wait to be processed. As complex as this sounds, several viable solutions can fix slow servers. Solution: Integrating a reserve proxy server Taking some of the strain off your server could help it function quickly and accommodate more requests. In addition, you can outsource some server functions by incorporating a reverse proxy server. A reverse proxy server sits before the device and manages internal flow/traffic. It can do this easily because it is directly connected to the internet, giving it the power to interact with the server via a significantly quicker internal system. As a result, the application server can perform other actions, load pages and send them to the reverse proxy server. The reverse server, in turn, waits for the user's instructions and passes on the ready pages. A reverse proxy server enables your app to operate at benchmark speeds while maintaining optimum performance. Use a load balancer In some apps, multiple minor servers are used instead of a single large one. In this case, it is advised to incorporate a load balancer. A load balancer is a software tool that evenly distributes the load across the servers to maintain a low response time. In addition, a load balancer supports SSL termination and static file caching. If you are still determining which load balancer would be best for your app, specialists recommend sticking with the option available on your cloud platform. Wrapping up Maximizing your app's performance is in your best interest. For one, there are established quality standards you must meet. In addition, speed directly impacts user experience and whether they will stick with or dump your app. If you still need to figure out what's slowing down your app, you can contact a mobile app development business and ask for a performance audit to double-check whether everything is in order. We at Supreme Tech are available for a free consultation. We are an outsourcing IT company focusing on mobile and web apps for English-speaking clients. We build and maintain the products using the agile methodology based on the client's demands.

How to maximize virtual recruitment and training for app development

Virtual work is a concept that has been introduced previously in the professional world, especially in the tech industry. Most companies are embracing remote and hybrid work to expand their employment pool and maximize efficiency and output. This was confirmed in a study by Cielo in 2020 - The Future of Work Survey. The study showed that 64% of recruiters are now more open to virtual work. The popularity of remote work skyrocketed with the onset of the Covid-19 pandemic that took the world by storm, causing worldwide lockdowns and closure of non-essential businesses. To save their companies, CEOs adopted remote work. Although the pandemic is under control and it's full steam ahead for all companies, many have retained remote or virtual employment. However, remote, and physical work require different strategies to maximize their potential. Therefore, relying on the exact procedures for hiring, onboarding, and training workers would be detrimental. Without face-to-face interaction with your employees, assessing their potential, hard and soft skills, professionalism, and whether they would be a good fit for your organization is challenging. The good news is that there are multiple ways you can replicate the physical experience of interviewing, hiring, onboarding, and training employees without wasting resources and time. This article will discuss ways to maximize virtual recruitment and training for app development. 1.    Plan virtual recruitment events Source: Unsplash Recruitment events are an excellent opportunity to expand the talent pool, boost brand awareness, and establish connections with potential candidates. Job fairs are relatively easy to set up depending on the platform you choose and other third-party software services you include. Indeed and Brazen are two of the most popular platforms you can use to organize job fairs. You can create an account, sign up, and create your virtual event in minutes. After creating your event, you can link to other apps like Zoom to allow for video conferencing. Although, some apps come with video conferencing tools embedded in them. A day before the event, you can open the 'lobby' and let other interviewers in and prepare for the fair by customizing greetings and questions. Brazen is a crowd favorite because of its ‘booth’ feature that allows companies to share information about their culture and environment that is readily available to anyone who registers for the fair. This information includes pictures, videos, short text, and links to other relevant pages. Once applicants register for a fair, a landing page automatically collects their resumes, cover letters, and additional information. At the end of job fairs, recruiters can take the next steps with candidates who stood out, such as direct messaging, emailing them or forwarding their information to concerned parties for further assessment. 2.    Request video applications Source: Unsplash You can opt for video interviews if you want to get a real feel of a face-to-face interview without the awkward silences, tension and wait times. In addition, video interviews are a creative way to get an insight into the behavior of your potential employees. For video interviews, you can send out questions they can answer in a self-recorded interview that they have to submit before a specific time. For instance, you can ask them to answer hypothetical questions directly related to the role they are applying for, their strengths, weaknesses, experience, qualifications, and achievements they are most proud of. Video interviews can help you infer whether an applicant is confident, honest, ambitious, and skilled and whether they would fit your company well. 3.    Grow your employer's brand Employers want to hire the crème de la crème in each field to build top-notch apps. However, this is easier said than done. If you want to hire the best talent, you have to ensure that they know about your company's existence. If you are just starting out, this can be pretty challenging, especially when you want to recruit remotely. One way to fix this is by increasing brand awareness. Developers need to know about your company, and they should want to work with you. You can start by working on your online presence—open social media accounts on all appropriate platforms like LinkedIn, Indeed, Twitter, Facebook, etc. In addition, populate your website with information about your company, such as the culture, vision, mission, portfolio, and events. Add real pictures of employees at the workplace if you have a physical office, and even create virtual tours so applicants can get a sneak peek into your work environment. Note: You can outsource your PR work to professionals if you want a highly effective brand presence. Lastly, monitor reviews about your company on platforms like Glassdoor. You can learn much from an objective perspective on your company. 4.    Make use of ATS Source: Unsplash Application tracking software is a lifesaver for HR teams. Screening, interviewing, and hiring candidates can be an overwhelming experience, especially for jobs that can be done remotely, like app development. You will have more than the average number of applications if you open the role to any qualified applicant worldwide. Application tracking software will help you cut the hiring process by days. ATS takes care of receiving resumes, cover letters, and contact information and storing it. ATS also handles screening candidates and rooting out unqualified candidates to reduce the load recruiters have to deal with personally. In addition, it lets candidates see their application status and handles the scheduling of interviewers. 5.    Keep lines of communication open at all times Source: Unsplash Although virtual hiring may be commonplace for your company, some applicants may be new to the entire process. It can feel like an isolating and scary process because they don’t have candidates the comfort and camaraderie of other candidates, they would have met at the interview venue. To get the most out of your remote hiring and onboarding process, you should ensure that your potential employees are as comfortable as possible. You can achieve this by keeping lines of communication open and responsive at all times. Below, I will share a few tips to make the process easier for candidates. Create a comprehensive document that will be shared with all applicants To avoid confusion and chaos in hiring, you can create a simple document that answers most of the questions candidates may have. For instance, the video interview date, the hiring process, its stages, who will be conducting the interviews, how long the interviews will be, and what sample questions they can expect. Candidates are always unsure about video interviews because each company conducts their interviews differently. In the PDF, let them know whether it will be a video interview or an audio one. If they must have their video on, state the dress code and whether they should join early and stay in the waiting room. You can also let them know if they need a pen and notepad ready to take notes. By clearly outlining all this, you are guaranteed confident and prepared candidates. Hold AMA sessions Source: Unsplash As we mentioned earlier, virtual interviews mean applicants don't have the luxury of meeting other candidates and sharing extra information about the job or company. To remedy this, you can hold 'Ask Me Anything' sessions to let them ask any questions they may have about the organization and role they are applying for. In addition, you can acquaint them with the hiring process, how long it will take and how they will know if they've made it to the next level. AMA sessions are a great idea because they let candidates get familiar with the company and allow you to feel the candidates out. You will be able to see the candidates who are chatty, confident, enthusiastic, and confident by the frequency with which they ask questions and voice their concerns and issues. Every employer wants a social candidate who isn't afraid to stand out. AMA sessions are an opportunity to express that. Bonus: You can record these sessions and save them for future purposes. Instead of holding them whenever you hire, you can share them with potential employees and save time. 6.    Take shortlisted candidates for a trial run Source: Unsplash If you want to be sure of your potential candidate's hard skills before you commit to a full-time role, you can make the final stage of the interview process a simple paid job that they have to complete in a given amount of time. Alternatively, it can be a simple live test during their interview to ensure they don't have outside help. Finally, successful candidates can be hired and offered the role in a formal email. 7.    Send out welcome packages Source: Unsplash Who said virtual hiring has to be impersonal and cold? You can take the seriousness out of hiring by sending a surprise welcome SWAG bag to the hired candidate. It can include a brochure, branded products, a company laptop, you name it. If your pockets are deep, you can throw in a fun extra gift like a box of chocolates or a Starbucks gift card. Wrapping up If you borrow most of these tips, hiring and training remote workers can be the most seamless and rewarding experience. Are you developing an app and need a hands-on remote team? Check out SupremeTech. We are an outsourcing IT company focusing on mobile and web apps for English-speaking clients. We build the products using the agile methodology based on the client's demands and maintain them.

Crawl Website Đơn Giản Với Postman

Mở đầu Trong kiểm thử API, chúng ta không xa lạ gì với Postman, một tool kiểm thử API rất phổ biến và được sử dụng trong nhiều trường hợp khác nhau. Nếu như bạn chưa rõ API là gì, có thể tham khảo lại bài viết giới thiệu về API cơ bản của mình tại ĐÂY. Trong bài viết này, mình sẽ hướng dẫn các bạn cách crawl đơn giản một website bằng Postman nhằm kiểm tra xem các link hay hình ảnh có trong website đó có bị die hay lỗi gì không?  Crawl Website là việc lấy thông tin từ website , trích xuất ra những thông tin người sử dụng cần, đồng thời cũng tìm những link có trong trang web đó và tự động truy cập vào những link đó. Quá trình đó sẽ lặp đi lặp lại đến khi thu thập đủ thông tin người dùng cần.  Ví dụ dự án của bạn có một website như Landing Page hoặc trang chủ chẳng hạn, và trong trang lại có các hình ảnh, các hyperlink dẫn tới các trang con hoặc các website khác. Sau một thời gian bạn cần kiểm tra lại xem những hyperlink đó có còn hoạt động hay không. Thay vì phải click thủ công từng link một thì Postman có thể giúp bạn đơn giản hoá và tiết kiệm thời gian hơn cho việc này rất nhiều. Trước khi đi sâu vào bài viết, bạn cần có một số kiến thức về các khái niệm dưới đây: Script trong PostmanRunner trong PostmanCó một ít kiến thức cơ bản về Javascript Khâu chuẩn bị Để bắt đầu, máy tính của bạn cần cài đặt Postman, tất nhiên rồi. Sau đó chúng ta sẽ tạo một Collection chứa hai Request với tên bất kỳ và hai biến collection. Trong ví dụ dưới đây, mình sẽ tạo Collection tên Crawl Website cùng 2 request: Input check: Request này dùng để kiểm tra đầu vào trước khi crawl.URL check: Request chính dùng để crawl website.2 biến collection gồm có: rootUrl: URL gốc của trang cần checkstartUrl: URL bắt đầu khi chạy test, ở đây mình sẽ để rootUrl và startUrl chung 1 URL Input check Giờ chúng ta cùng thiết lập cho request đầu tiên. Ở request này, mình sẽ code tại phần Pre-request nhằm kiểm tra các đầu vào trong quá trình crawl website. Dưới đây là danh sách các function mình cần tạo trong request này Kiểm tra danh sách biến có trong collectionKiểm tra giá trị URL gán vào biến có định dạng hợp lệTạo biến Global để sử dụng cho request tiếp theo Như mình đã nói ở phần mở đầu, các bạn cần có kiến thức cơ bản về javascript để có thể hiểu hơn và tuỳ biến lại code phù hợp với nhu cầu của dự án. Mình sẽ có gắng giải thích đơn giản để những bạn ít biết về code vẫn có thể sử dụng được. Ở request này, URL của request chúng ta sẽ để biến {{startUrl}} với phương thức là GET. Kiểm tra danh sách biến có trong collection Trước khi kiểm tra được danh sách các biến có trong collection, ta sẽ chuyển các biến đó thành object và gán vào biến postmanVariables <strong>const</strong> postmanVariables = pm.collectionVariables.toObject(); Sau đó ta kiểm tra các biến cần sử dụng đã có trong collection hay chưa pm.expect(postmanVariables).to.have.all.keys("startUrl", "rootUrl"); Kiểm tra giá trị URL gán vào biến có định dạng hợp lệ Để kiểm tra giá trị URL gán vào biến có định dạng hợp lệ, ta sẽ sử dụng Regex. Đầu tiên ta sẽ gán định dạng URL viết dưới dạng regex vào biến urlRegex và so sánh các giá trị URL trong 2 biến collection là startURL và rootURL có giống với urlRegex hay không. const urlRegex = /^https?:\/\//; pm.expect(postmanVariables.startUrl, 'startUrl does not match URL pattern').to.match(urlRegex); pm.expect(postmanVariables.rootUrl, 'rootUrl does not match URL pattern').to.match(urlRegex); Tạo biến Global để sử dụng cho request tiếp theo Kết thúc script mình sẽ tạo biến 3 biến là link, url, index cho request tiếp theo. Ở đây mình sử dụng biến Global để cho dễ truy cập và lấy giá trị giữa các request, tuỳ thuộc vào tính chất dự án, bạn có thể sửa lại thành biến cho 1 environment cũng không có vấn đề gì nhé.  links: Mảng các link ta lấy được khi crawl một trang pm.globals.set("links", "[]"); url: URL đang test pm.globals.set("url", postmanVariables.startUrl); index: Số thứ tự của URL cần test trong mảng links ta crawl được pm.globals.set("index", -1); URL check Sau khi thiết lập xong request Pre-check, ta chuyển sang request URL check, đây sẽ là request chạy chính của mình.  Ở request này, URL của request chúng ta sẽ để biến {{url}} với phương thức là GET. Dưới đây là danh sách các function sẽ sử dụng trong request này: Kiểm tra link lỗiLấy các hyperlink có trong websiteLọc các link không liên và lặp crawlKết thúc vòng lặp Trước khi bắt đầu thì ta sẽ gán giá trị URL của 2 biến collection và 3 biến Global thành các biến Local cho dễ sử dụng const startUrl = pm.collectionVariables.get("startUrl"); const rootUrl = pm.collectionVariables.get("rootUrl"); const links = JSON.parse(pm.globals.get("links")); const currentUrl = pm.globals.get("url"); const currentIndex = parseInt(pm.globals.get("index")); Kiểm tra link lỗi Giờ ta sẽ tạo 1 hàm để kiểm tra xem link mình lấy về có bị lỗi hay không. Hiện tại thì link chúng ta test ban đầu chính là URL bạn gán vào biến startUrl. pm.test(`Link to "${currentUrl}" works`, function () { try { pm.response.to.not.be.error; } catch (error) { console.log(`FAILED :: ${currentUrl}`); console.log(`FAILED :: status code is ${pm.response.code}`); throw error; } }); Trong đó hàm try để kiểm tra xem link đó có trả về response lỗi hay không và hàm catch dùng để log lại thông tin lỗi. Tuỳ vào nhu cầu bạn có thể log thêm những thông tin khác bạn muốn kiểm tra nhé. Lấy các hyperlink có trong webiste Sau khi ta đã kiểm tra link ban đầu không bị lỗi, ta sẽ chạy hàm lấy các hyperlink có trong URL đó như sau: if (currentUrl.includes(startUrl)) { const $ = cheerio.load(pm.response.text()); $("a").each(function () { const newLink = $(this).attr("href"); if (!links.includes(newLink)) { links.push(newLink); } }); $("img").each(function () { const newLink = $(this).attr("src"); if (!links.includes(newLink)) { links.push(newLink); } }); } Để lấy dữ liệu từ trang web, ta sẽ crawl HTML của web đó và tìm kiếm thông tin ta cần từ các tag có trong HTML lấy về. Trong bài viết này mình sẽ thư viện Cheerio để lấy HTML của website cần test và gán nó vào biến $. Sau khi có được HTML rồi, ta sẽ tạo vòng lặp each để tìm các tag <a> và tag <img>, sau đó  lấy các URL trong attribute “href" ở trong <a> và “src" ở trong <img>. Tiếp đến ta sẽ gán nó vào biến newLink. Ngoài ra tuỳ thuộc vào nhu cầu và tính chất của trang web, các bạn có thể bổ sung thêm các thẻ và attribute có chứa URL cần test như <link> chẳng hạn. Vì ta chỉ cần check mỗi link 1 lần nên mình sẽ viết thêm 1 hàm if để kiểm tra xem URL lấy được đã được lấy trước đó hay chưa, nếu chưa thì sẽ bỏ link đó vào mảng links. Ở bước này bạn cũng có thể bổ sung thêm các điều kiện khác để check link lấy được tuỳ thuộc vào nhu cầu của bạn như không lấy link ads hay action link,... Lọc các link không liên quan và lặp crawl Chúng ta đã đi được hơn nữa quãng đường rồi. Sau khi lấy được các link có trong web và bỏ vào mảng links, giờ ta sẽ viết 1 function để trích xuất các link đó và chạy tiếp cũng như lọc những link không liên quan. const [nextUrl, nextIndex] = getNextUrlAndIndex(links, currentIndex); function getNextUrlAndIndex (links = [], index = 0) { const nextIndex = index + 1; if (links.length - 1 === nextIndex) { return []; } const linkUrl = links[nextIndex]; if (!linkUrl) { // Skip null links console.log('Encountered a null link.'); // Try to get the next link return getNextUrlAndIndex(links, nextIndex); } if (/^https?:\/\//.test(linkUrl)) { // Return if not a relative link return [linkUrl, nextIndex]; } // If the link is relative, prepend with rootUrl const cleanedRoot = rootUrl.replace(/\/$/, ''); const cleanedPath = linkUrl.replace(/^[\.\/]+/, ''); return [[cleanedRoot, cleanedPath].join('/'), nextIndex]; } Function này ta sẽ sử dụng biến links chứa mảng link đã lấy và biến index nhằm trích xuất vị trí link ta muốn chạy tiếp. Hàm if đầu tiên sẽ check nếu như ta chạy xong hết mảng link thì sẽ trả về mảng rỗng. Hàm if thứ 2 sẽ kiểm tra loại trừ các loại link mà bạn không muốn test, ở đây mình sẽ loại trừ null link, ngoài ra bạn có thể bổ sung thêm các loại link khác như link download chẳng hạn. Hàm if tiếp theo sẽ dùng regex để kiểm tra xem link đó có nằm trong các trang con của mình hay không. Mình sẽ check bằng logic nếu như đầu URL đó giống với biến rootUrl thì sẽ truy cập tiếp vào trang đó và lấy tiếp các URL có trong trang con và lặp lại đến khi nào không còn tìm thấy nữa thì thôi. Kết thúc vòng lặp Cuối cùng chúng ta sẽ chạy 1 hàm if để kết thúc vòng lặp crawl này if (nextUrl) { // Update global variables pm.globals.set("links", JSON.stringify(links)); pm.globals.set("url", nextUrl); pm.globals.set("index", nextIndex); postman.setNextRequest("Check URL"); } else { console.log("No more links to check!"); // Clear global variables pm.globals.clear("links"); pm.globals.clear("url"); pm.globals.clear("index"); // End the loop postman.setNextRequest(null); } Trong hàm if này nếu như vẫn còn get được link từ website thì sẽ tiếp tục gán vào biến Local để chạy tiếp bằng hàm postman.setNextRequest("Check URL");. Nếu như hết link thì mình sẽ đặt lệnh clear biến global để cho gọn phần biến tránh ảnh hưởng cho những lần chạy sau và set Next Request về null để kết thúc vòng lặp. Kết Vậy là chúng ta đã hoàn thành một collection crawl website đơn giản bằng Postman. Hi vọng các bạn có thể áp dụng được vào trong dự án của mình và hẹn gặp các bạn ở những bài viết tiếp theo. Reference Crawl Website Regex Postman Collection

Back/Forward Cache, Hiện Đại Hay Hại Điện?

Mục Lục Back/forward cache là gì?Nhận biết một trang được lưu, khôi phục từ back/forward cache.Tối ưu hóa cho back/forward cache bằng Chrome DevToolsNhững tác động của back/forward cache đối với trang web Đã bao giờ bạn gặp trường hợp giống thế này chưa? Bạn đang làm một website bán hàng. Khi người dùng đang ở trang thanh toán và đã điền đầy đủ thông tin tài khoản ngân hàng, tiếp theo họ chuyển đến trang giỏ hàng để cập nhật, sau đấy họ lại điều hướng trở lại trang thanh toán. Trên một số thiết bị, trang thanh toán sẽ được tải lại với form chứa thông tin tài khoản thanh toán được làm mới, nhưng trên một số thiết bị khác thì không, khi người dùng nhấp vào nút quay lại của trình duyệt, trang web trước đó sẽ không mất thời gian để tải lại mà nó sẽ xuất hiện ngay lập tức với những thông tin nhạy cảm mà người dùng đã nhập. Trên các thiết bị này, trang web đã được khôi phục từ một loại bộ nhớ đệm của trình duyệt có tên gọi là Back/forward cache. Trong vài trường hợp, việc lưu trữ nội dung của một trang web, để giúp người dùng có thể điều hướng trở lại ngay lập tức, mà không mất thời gian để tải lại như lúc ban đầu là một tính năng rất hay, hữu ích. Nhưng trong một số trường hợp khác, đấy cũng có thể trở thành bug. Back/forward cache là gì? Back/forward cache ( gọi tắt là bfcache) là một loại bộ nhớ đệm, giúp tối ưu hóa trình duyệt cho phép điều hướng quay lại và chuyển tiếp ngay lập tức. Nó cải thiện đáng kể trải nghiệm duyệt web cho người dùng — đặc biệt là những người có mạng hoặc thiết bị chậm hơn vì nó giúp trình duyệt có thể tải lại trang web trước đó mà không cần phải tải lại tài nguyên. Phát hiện một trang được khôi phục từ bfcache. Sự kiện pageshow được kích hoạt ngay sau sự kiện load khi trang web đang tải lần đầu và bất kỳ lúc nào trang được khôi phục từ bfcache. Sự kiện pageshow có một thuộc tính là persisted, nó sẽ có giá trị là true nếu trang được khôi phục từ bfcache (và ngược lại là false nếu không). Vì vậy, bạn có thể sử dụng thuộc tính persisted này để phân biệt trang được tải thông thường với trang được khôi phục từ bfcache. Ví dụ: window.addEventListener('pageshow', (event) => { if (event.persisted) { console.log('Trang web nay duoc khoi phuc tu bfcache.'); } else { console.log('Trang web nay duoc tai xuong binh thuong.'); } }); Nhận biết một trang có thể được đưa vào bfcache Ngược lại với sự kiện pageshow ta cũng có sự kiện pagehide. Sự kiện pagehide này sẽ được kích hoạt khi trang được tải xuống bình thường hoặc khi trình duyệt cố gắng đưa nó vào bộ nhớ đệm bfcache. Sự kiện pagehide này cũng có một thuộc tính là persisted. Nếu giá trị của nó là false thì bạn có thể chắc chắn rằng một trang sẽ không được đưa vào bfcache. Tuy nhiên, nếu giá trị của thuộc tính này là true, nó không đảm bảo rằng một trang chắc chắn sẽ được lưu vào bộ nhớ đệm đâu nhé. Nó chỉ mang ý nghĩa là trình duyệt dự định lưu trang đấy vào bộ nhớ bfcache mà thôi, nhưng có thể có các yếu tố khiến nó không thể làm như vậy. window.addEventListener('pagehide', (event) => { if (event.persisted) { console.log('Trang web nay *co the* duoc dua vao bfcache.'); } else { console.log('Trang web nay khong duoc dua vao bfcache.'); } }); Tối ưu hóa cho bfcache bằng Chrome DevTools Bộ nhớ đệm bfcache đã có trên tất cả các trình duyệt web phổ biến hiện nay nhưng hiện chỉ có Chrome là có cung cấp cho chúng ta công cụ để kiểm tra mà thôi. Công cụ dành cho nhà phát triển của Chrome có thể giúp bạn kiểm tra các trang của mình để đảm bảo chúng được tối ưu hóa cho bfcache và xác định bất kỳ vấn đề nào có thể khiến chúng không đủ điều kiện. Để kiểm tra một trang cụ thể, hãy điều hướng đến trang đó trong Chrome và sau đó trong DevTools, đi tới Application > Back/forward cache. Tiếp theo, nhấp vào nút Run Test và DevTools sẽ cố gắng điều hướng và quay lại để xác định xem trang có thể được khôi phục từ bfcache hay không. Nếu không thành công, bảng điều khiển sẽ cho biết trang không được khôi phục và liệt kê lý do tại sao. Nếu lý do là điều mà bạn với tư cách là nhà phát triển có thể giải quyết, thì lý do đó cũng sẽ được chỉ ra. Cập nhật hoặc xóa dữ liệu sau khi trang web được khôi phục bfcache Trở lại với vấn đề mà mình đặt ra ở đầu bài viết này. Nếu trang web của bạn lưu giữ trạng thái người dùng — đặc biệt là bất kỳ thông tin nhạy cảm nào của họ — thì dữ liệu đó cần được cập nhật hoặc xóa sau khi một trang được khôi phục từ bfcache. Một ví dụ khác, thường gặp hơn là nếu người dùng đăng xuất khỏi trang web trên máy tính công cộng và người dùng tiếp theo nhấp vào nút quay lại. Điều này có thể làm lộ dữ liệu riêng tư mà người dùng cho rằng đã bị xóa sau khi họ đăng xuất. Để tránh những trường hợp như thế này, có một vài trick có thể ngăn trang được đưa vào bfcache nhưng vẫn sẽ có những ngoại lệ, vậy nên tốt hơn hết là bạn nên luôn cập nhật lại trang sau một sự kiện pageshow nếu như event.persisted có giá trị là true. Đoạn mã sau sẽ kiểm tra sự hiện diện của cookie dành riêng cho trang web trong sự kiện pageshow và tải lại nếu không tìm thấy cookie: window.addEventListener('pageshow', (event) => { if (event.persisted && !document.cookie.match(/my-cookie/)) { // Bat buoc tai lai trang neu nhu nuoi dung da dang xuat. location.reload(); } }); Thống kê lượt truy cập trang web có sử dụng bfcache Như đã giới thiệu ở phần trên, nếu một trang web được khôi phục từ bfcache thì nó sẽ không tốn tài nguyên, dữ liệu mạng, điều đó cũng đồng nghĩa với việc trang web đó đã bị mất đi một lượt truy cập nếu bạn theo dõi lượt truy cập vào trang web của mình bằng các công cụ phân tích vì hầu hết các thư viện công cụ phân tích phổ biến không theo dõi khôi phục bfcache dưới dạng số lần xem trang mới. Vậy nên, nếu bạn không biết/lường được vấn đề này thì việc giảm lưu lượng truy cập, lượt xem do bfcache gây ra sẽ ít nhiều có ảnh hưởng không tốt đến việc xếp hạng trang web của bạn, mặc dù nó giúp tăng trải nghiệm của người dùng. Nếu bạn không muốn số lần xem trang của mình giảm xuống do trình duyệt bật bfcache, bạn có thể báo cáo số lần khôi phục bfcache dưới dạng số lần xem trang (được khuyến nghị) bằng cách lắng nghe sự kiện pageshow và kiểm tra thuộc tính persisted. Ví dụ sau đây cho thấy cách thực hiện việc này với Google Analytics ( logic cũng tương tự đối với các công cụ phân tích khác ) : // Gui mot luot xem khi trang duoc tai lan dau tien. gtag('event', 'page_view'); window.addEventListener('pageshow', (event) => { // Gui mot luot xem khi trang duoc khoi phuc tu bfcache. if (event.persisted) { gtag('event', 'page_view'); } }); Tổng kết Cái gì cũng có giá trị của nó, cũng có tồn tại những ưu và nhược điểm, bfcache cũng không ngoại lệ. Việc quay lại một trang trước đó mà không phải tải lại từ đầu là một tính năng rất hữu ích, không chỉ giúp tăng tốc độ điều hướng mà còn giảm việc sử dụng dữ liệu, vì trình duyệt không cần phải tải lại tài nguyên. Điều này giúp tăng trải nghiệm của người dùng đáng kể nhưng nó cũng tiềm ẩn rủi ro về bảo mật dữ liệu cá nhân, làm giảm lượt truy cập trang trực tuyến và một số vấn đề khác nữa. Điều quan trọng là bản thân người lập trình viên phải biết và kiểm soát được nó trong từng trường hợp, vì nếu không, trong một số trường hợp, tính năng cũng có thể sẽ trở thành bug. Bài viết này không chỉ dành cho các lập trình viên tham khảo mà ngay cả các tester cũng có thể đưa vào trong test case của mình đặc biệt là trong các trang web có yêu cầu yếu tố bảo mật hoặc những trang có dữ liệu thường xuyên thay đổi. Hi vọng bài viết này của mình hữu ích đối với các bạn. Đừng quên share và gắn bookmark cho bài viết này để tiện xem lại sau này nhé 😉 ! Tài liệu tham khảo Exploring a back/forward cache for ChromeBrowser Back/Forward Button History Navigation Cache (bfcache)Performance Game Changer: Browser Back/Forward Cache

Productivity App Features That Resonate With Remote Workers

Even as the pandemic fades into the past, remote and hybrid work have remained widely practiced. One of the main factors underpinning this trend is the emergence of remote working productivity apps that enable teams to perform highly, irrespective of individual members' locations. Many of these apps were already used in workplaces before the pandemic, but some gained more acceptance amongst remote workers. That said, let’s discuss the standout features of productivity apps for remote work: eLearning Capabilities One of the trickier aspects of remote work has been how to get recruits up to speed. Training can be hard to conduct when physical in-person meetings aren’t an option. You must figure out how to transition smoothly from face-to-face conversations to presentations and walkthroughs. Then, there’s the distribution of learning materials. As always, you eventually have to assess the trainee to determine their readiness for specific tasks. This is where virtual classroom software has won the hearts of many. In this case, the ideal tools should enable the trainer to create courses, stock libraries, and deliver exams. Top-notch learning management systems also provide ingenious features like surveys and quizzes that keep trainees more engaged during learning and assessment. To promote flexibility, such tools also facilitate self-paced learning while providing detailed reports and analyses for each trainee. Some popular solutions encapsulating eLearning capabilities include TalentLMS, AbsorbLMS, Trainual, ProProfs LMS, and more. Team Building When an entire team is in the same physical workspace, it's easier to organize and hold fun activities outside their work assignments to strengthen bonds and get everyone into a single mission. However, once everyone is scattered across different locations, all this becomes harder. In fact, productivity may decrease as some team members feel less heard and spend more time figuring out how to assert themselves. Others may get caught up in a vicious cycle of second-guessing their ideas and decisions as they feel they have limited guidance. On that note, team leaders need to dedicate time to team building, and they can do it using apps that provide features like scavenger hunts, puzzles, and other games that bring people closer. Common virtual team-building apps include Playmeo, Scavify, Kahoot!, Good & Co Teamwork, Heads Up! and RallyBright. Remember that not all these tools are about playing games. Some deliver quizzes you can use to profile each team member and see how best they can work together based on their individual strengths and weaknesses. Multimedia Communication While email has massively evolved over the years, it still feels like a formal letter. Moreover, the attachment feature doesn’t fully support the wide range of variations in how remote workers interact. For example, a team member overseas may want to share a video feed of their surroundings since they are near a revered landmark or monument. Another team member may receive a work-related message at a party where texting or calling may be inconvenient, but a quick voice note can work. In essence, remote teams need to communicate in a manner that prioritizes their work but also channels the vibe in their respective remote workspaces. This is best achieved with a strategic mix of video conferencing, file sharing, notifications and reminders, text messaging and group chat, postcards and more. To minimize the cold and ultra-serious atmosphere typically associated with work emails, you can try a solution like Today.ly. What’s unique about such a tool is that its interface emulates a real work environment and offers all the typical communication channels. You can see groups meeting in conference rooms and follow how individuals come and go in real time. The app lets you view availability and instantly start a conversation with a teammate by clicking on their avatar. Thus, instead of having back-and-forth emails for sending meeting links and updating the times on invitations, you can simply click on their avatar. Task and Process Automation For many remote workers, their schedules are constantly in flux. They aren't considerably detached from other aspects of their lives, like childcare and home management, in the same way that office workers are. Secondly, remote teams often include members in different time zones, so some work needs to be ready and submitted when the person working on it is sleeping. This can involve transferring figures from survey forms into a report, sending out newsletters, populating tables, sending reminders, and more. For the lucky ones, it’s one simple task. But in other cases, the work involves more elaborate processes demanding contributions and approvals from various personnel. Accordingly, task management and process automation tools are the best way to tackle this challenge. But before you start, you need to ascertain the different levels at which automation takes place. Firstly, there's the lower level, where you need automation tools for specific tasks. A good example is marketing automation tools like ActiveCampaign, MailChimp, HubSpot and Klaviyo for emailing customers. Above this level, you’re creating end-to-end workflows involving multiple tasks. Consequently, you’ll need tools like Integrify, ClickUp, Wrike, Kissflow, Smartsheet, Zapier and Adobe Workfront. With such tools, you should look out for those that come with pre-built templates and drag-and-drop builders or an equivalent that requires as little code as possible (preferably no code). This way, anyone in the organization can easily create and edit automation without involving IT. The bigger picture As you can see, the remote work toolset can quickly expand depending on an organization's size and diversity. From accounting to HR, legal, IT, and marketing, plenty of work could use a digital solution or two. Therefore, when shopping for Work From Home (WFH) tools for your teams, you should pay close attention to their integrations. You don’t want to end up with many tools that can't link to each other. This will leave you with more work, constantly transferring data between different software and increasing the likelihood of errors. Lastly, it helps to choose tools with reliable customer support. It's even better if the support agents are available 24/7 since problems could come in from team members in various time zones. Wrapping Up WFH productivity apps can benefit an organization on various fronts, like increasing efficiency, improving team morale, and reducing operational costs. That’s why you should think broadly when choosing them. For professional assistance in selecting and managing these tools, contact us for a free consultation.

How To Exercise Value-Driven App Development That Drives Revenue

Many software development teams spend long periods developing and rolling out features they've invested in, only to get lackluster results in customer satisfaction and overall revenue. On the other hand, some teams roll out a seemingly silly feature that eventually gets everyone giggling when using their app and drives more engagement. So how do some teams get it right while others fail? Let’s lay out some key value-driven app development strategies that can help you boost revenue: Involve industry experts When development teams are creating software for a client, they often talk to one person on the client’s side or a few people in higher managerial positions. Instead, they should be speaking to people at various levels of the organization to determine how one department's actions affect another department's work. Additionally, if the product isn't just for internal use by one client but for a whole industry, it's essential to talk to different people within that industry. This helps you learn what they are getting wrong individually and as a group. You can discover which approaches are unique to one organization and which workflow practices are industry-standard. From here, you’ll know the must-have features that appeal to a larger group, then create a list of optional features that highlight the ingenious ways a few entities in that industry are tackling inefficiencies. Consequently, you can test these extras individually to see if they'll be relevant for the whole industry or if they only worked for one organization due to their unique characteristics. Remember, HR in an ecommerce company won't be exactly the same as HR in a hospital, so if you know the product is aimed at a specific industry, find out that industry's major pain points before you start development. But what if the app is for the general public? So let’s say you’re trying to make the next WhatsApp or TikTok. In that case, it helps to speak to experts in fields like messaging and communication, behavioral psychology and other broad studies. You should also identify people who have previously worked at firms that do what you’re trying to improve. For example, a former PayPal worker could help you learn what’s missing in modern fintech products, depending on their role at the company. Define value at each stage It’s possible to make an app better in a particular area, like how fast it displays search results, but still not offer value. To create value and drive app revenue, you need to ask yourself, “What are users willing to pay for?” For example, many people are willing to pay for an app that helps them quickly get food from their favorite restaurants. So after ascertaining what people are paying for, find out what's missing in that product/service. What could be better than selecting the dish you want and receiving it quickly? The answer to this question starts with breaking down that entire process into various stages. These may include; finding a good dish, making changes to an order (increasing quantity, choosing different toppings, zinger or regular, extra cheese), notifying the provider that you aren't at your usual address, using alternative payment methods at checkout etc. By dividing the process into such stages, it's easier to determine what can go wrong in a particular phase or what can be added. Ultimately, something valuable changes the user's behavior in one way or another. For example, a favorites menu makes users spend less time scrolling through entire catalogs. They'll only do this when they are tired of their favorites. So in that sense, a better-looking strip of thumbnails might make a user feel good, but the ability to see which item is unavailable or which currently has a discount is more valuable. The ability to quickly see what's new, exclude items below or above a specific price, and other capabilities like that speak to someone who desires to pay. Therefore, whenever your team decides to improve an app, you should represent goals as something that induces an action that could culminate in a sale. For example, goals should sound like, "Make it possible to search by price," "Add option to change the delivery address for each order,” and "Add suggestions that would go well with the item ordered right before checkout.” Shorten the feedback loop It’s common for organizations to champion customer-centric product development, but listening to the user is only half the battle. To grow app revenue, you must transcend discovering what the people want and providing it. You should understand what they are saying and act on it faster than the competition. To achieve this, you ought to categorize feedback based on different criteria, such as; How detailed is it? Is it a score or an entire paragraph?Is it a request for a new feature, a review of the whole app or a small comment on how responsive and helpful an existing feature is?How much does it cost to collect that feedback (the tech tools you need, the amount of time you spend collecting data, the number of people involved in the process and more)? Teams often need to pay more attention to how organized they need to be to collect user opinions or observe and analyze user behavior. They need to remember that it can be tricky to put together a representative focus group, find a usability testing tool that tracks indicators in the desired manner, communicate feedback across the team and arrange meetings to brainstorm in response. By categorizing feedback, it's easier to visualize the entire journey of a user's opinion, the time it's received, and the different people that weigh in on how to respond to it up until it manifests in the next version of the product. Subsequently, you spend less time collecting irrelevant data or sitting on important information. Wrapping Up Value is subjective. This is what makes value-driven app development quite challenging. At the end of the day, there'll always be some hit-and-miss scenarios, but if you want professional help practicing value-driven app development that drives revenue, contact us for a free consultation.

TypeScript – How To Avoid “Any”?

The harmful effects of anyAvoiding any How to avoid any? In the previous blog -

A Better Way To Use Services In React Application

Sometimes you have/want to create and use a service in your application for the DRY principle. But do you know exactly what is a service? And what is the best way to use services in React applications? Hi everyone! It's nice to meet you again in React related series. In the previous article, we discussed about effective state management in React, we learned about Context: what is it? when to use it? One of the use cases is using a context to share a collection of services through the components tree, but what kind of things can be called a service? And how is it integrated into React application? Let's discover the following sections: What is a Service? Service is just a group of helper functions that handle something particularly and can be reused across application, for example: Authentication Service that includes authentication status checking, signing in, signing out, getting user info …Http Service that handles request header, request method, request body … How to use? There are different kinds of implementation and usage, I just provide my favorite one that follows Angular module/services provider concepts. Create a service A service is a JavaScript regular class, nothing related to React. export default class ApiService { constructor() {} _setInterceptors() {} _handleResponse_() {} _handleError_() {} get() {} post() {} put() {} delete() {} } export default class AuthService { constructor() {} isAuthenticated() {} getUserInfo() {} signIn() {} signOut() {} } Create a Context Create a context with provider and pass services as props. import { createContext, useState } from 'react'; import { ApiService, AuthService } from '@services'; const services = { apiService: new ApiService(), authService: new AuthService() }; const AppContext = createContext(); const { Provider } = AppContext; const AppProvider = ({ children }) => { return <Provider value={{ services }}>{children}</Provider>; }; export { AppContext, AppProvider } Use a context Place a context provider at an appropriate scope, all consumers should be wrapped in it. import { AppProvider } from './context/AppContext'; import ComponentA from './components/ComponentA' const App = () => { return ( <AppProvider> <div className="app"> <ComponentA /> </div> </AppProvider> ); }; export default App; Inside a child component, use React hooks useContext to access services as a context value. import { useContext, useEffect } from 'react'; import { AppContext } from '../context/AppContext'; const ChildComponent = () => { const { services: { apiService, authService } } = useContext(AppContext); useEffect(() => { if (authService.isAuthenticated()) { apiService.get(); } }, []); return <></>; } export default ComponentA; Above are simple steps to integrate services with context. But it would be complicated in the actual work. Consider organizing context with approriate level/scope. My recommendation is to have two kinds of service contexts in your application: App Services Context to put all singleton services. Bootstrap it once at root, so only one instance for each is created while having them shared over the component tree.For others, create separate contexts and use them anywhere you want and whenever you need. Alternatives Service is not the only one way to deal with reusable code, it depends on what you intend to do, highly recommend to: Use a custom hook, if you want to do reusable logic and hook into a state.Use a Higher-order component, if you want to do the same logic and then render UI differently. Reference Does React Context replace React Redux?React RetiX - another approach to state management Author: Vi Nguyen

Mini Apps – Ứng Dụng Công Nghệ Là Chìa Khoá Thành Công Với Doanh Nghiệp Của Bạn (Part 3)

Giới thiệu Chào các bạn, như vậy sau 2 bài viết trong chuỗi Seri tìm hiểu về Line Mini App của mình, chắc hẳn mọi người cũng đã nắm được cơ bản về việc tạo channel cũng như khởi tạo LIFF app rồi. Ở bài viết này, chúng ta sẽ tìm hiểu cách để triển khai ứng dụng LIFF app theo đề bài ban đầu. Tạo một ứng dụng chuyên tích điểm dành cho khách hàng thường xuyên check-in tại cửa hàng, và khi khách hàng đạt ngưỡng một số điểm nhất định, chúng ta sẽ gửi thông báo tới khách hàng và tặng khách hàng mã Voucher giảm giá sản phẩm, với yêu cầu đơn giản này, chúng ta hãy cùng xem ứng dụng mini app có thực sự tiện lợi không nhé. Đọc kỹ yêu cầu, chúng ta có 2 yêu cầu chính trong ứng dụng này. Chức năng tích điểm khi check-in tại cửa hàng, mỗi khi khách hàng tới cửa hàng sẽ nhấn nút check-in và hệ thống sẽ lưu lại và tặng điểm cho mỗi lần khách hàng thực hiện thao tác này.Chức năng gửi Voucher cho khách hàng khi tích đủ số Point nhất định. Lựa chọn giải pháp Khi tiến hành với việc triển khai giải pháp bằng việc lựa chọn công nghệ thích hợp, việc đầu tiên chúng ta cần phải nghĩ tới ngay đó là hiệu quả và chi phí vận hành. Rõ ràng, có rất nhiều giải pháp để triển khai một hệ thống, tuy nhiên để cân bằng trạng thái P/P (Price-Performance Ratio - tỷ lệ cân bằng giữa giá và hiệu suất) là điều rất cần thiết. Ở bài này, chúng ta sẽ cùng tìm hiểu về một trong những giải pháp đáp ứng được P/P, đang được rất nhiều hệ thống nhỏ sử dụng hiệu quả, giải pháp liên quan tới Cloud và Serverless, cụ thể trong bài viết này, chúng ta sẽ cùng tìm hiểu và triển khai về AWS Cloud và Serverless (Lambda + API Gateway) Dưới đây là mô hình AWS infrastructure cơ bản để demo sản phẩm này. Giải thích thành phần: API Gateway: cổng kết nối trung gian dịch vụ giữa ứng dụng LIFF và các dịch vụ bên trong (Lambda), là nơi thiết kế các API truy xuất dữ liệu.CloudFront: là CDN dùng để kết nối tới các host chứa dữ liệu, dữ liệu bài viết này là source code của ứng dụng Web, chúng ta sử dụng Single Page Web App cho ứng dụng sắp triển khai.S3: hiện là nơi lưu trữ dữ liệu source code của web app (SPA).Lambda: là một dạng computing được viết theo từng function, thay cho máy chủ để tính toán, truy xuất dữ liệu từ DB và trả về kết quả, chúng ta không cần máy chủ trong ứng dụng này, mọi chi phí sẽ dựa theo lượng request sử dụng.DynamoDB: là cơ sở dữ liệu (Database Engine) lưu trữ thông tin của user, trong khuôn khổ bài viết này, chúng ta sẽ lưu trữ số Point của end-user.CloudWatch: là nơi lưu trữ log của Lambda và dùng để trigger sự kiện theo schedule, ở bài viết này chúng ta sẽ dùng CloudWatch trigger mỗi 5 phút/ lần để gửi mã Voucher thử nghiệm nếu user đã đủ point.Messaging API: Là API do LINE cung cấp, dùng để gửi message tới user đang sử dụng LINE app và đã đăng ký với channel ứng dụng của chúng ta đang triển khai.LIFF SDK: là SDK dùng để tích hợp với Web app mà ta sẽ triển khai. Như vậy, chúng ta đã đi sơ qua các thành phần và giải pháp sẽ triển khai ứng dụng, bước tiếp theo chúng ta cần đăng ký tài khoản AWS và cùng thử xem sơ qua cách tính chi phí vận hành của ứng dụng với mô hình này nhé. Tìm hiểu về AWS và đăng ký tài khoản Ở phần trên, chúng ta sẽ thực hiện giải pháp sử dụng AWS Cloud làm mô hình Serverless cho ứng dụng, để bắt đầu, bạn cần hiểu sơ về AWS Cloud. Amazon Web Services (AWS) là nền tảng đám mây toàn diện và được sử dụng rộng rãi nhất, cung cấp trên 200 dịch vụ đầy đủ tính năng từ các trung tâm dữ liệu trên toàn thế giới. Hàng triệu khách hàng—bao gồm các công ty khởi nghiệp tăng trưởng nhanh nhất, các tập đoàn lớn nhất cũng như các cơ quan hàng đầu của chính phủ—đều tin tưởng vào AWS để giảm chi phí, trở nên linh hoạt hơn và đổi mới nhanh hơn. Đăng ký tài khoản AWS của bạn ngay. Sau khi đã đăng ký được tài khoản, bạn tiến hành đăng nhập, để đảm bảo tuân thủ Security Best Practice, bạn không nên sử dụng Root user, nhưng trong phạm vi khuôn khổ bài viết, chúng ta sẽ sử dụng root user để triển khai. Đừng quên tìm hiểu thêm lý do vì sao không nên xài root user. Giao diện đăng nhập AWS sau khi đăng nhập thành công sẽ như thế này. Như vậy là xong, bạn đã hoàn tất việc tạo 1 tài khoản AWS, lưu ý, mọi dịch vụ trên AWS đều có thể mất phí, vì vậy bạn cần hiểu rõ về dịch vụ mình cần sử dụng, để không mất quá nhiều tiền cho sản phẩm thử nghiệm của mình nhé, trong khuôn khổ bài viết chúng ta không thể phân tích chi tiết về phí dịch vụ, nhưng hãy luôn lưu ý vấn đề này khi sử dụng AWS Cloud. Kết thúc Trong khuôn khổ bài viết này, chúng ta đã hình dung được mô hình cấu trúc (AWS infrastructure) AWS khi triển khai ứng dụng LIFF App cùng với Serverless. Ở bài tiếp theo, chúng ta sẽ xây dựng một ứng dụng và triển khai (deploy) ứng dụng này lên Cloud, các bạn cùng chờ bài viết tiếp theo nhé. Cùng đón đọc các phần trước của series này nhé! Author: Kiet Vo