DEV Community: Gun

How to Integrate YouTube Video Player in a Flutter Application

Gun — Tue, 12 Mar 2024 14:11:20 +0000

YouTube is one of the world’s popular social media platforms for hosting and sharing videos. You can find a great list of music, movies, tutorials, documentaries and interviews in any domain there. Many enterprises, corporations and freelancers create and share videos on their various channels to enhance communication and provide a better user experience on the various services they offer. YouTube has become an indispensable social asset in the daily lives of many entrepreneurs and organizations.

Objectives

This guide will cover the necessary steps you need to follow to integrate YouTube into your Flutter application. In a nutshell, you will build a simple application like in the demo below.

Youtube Flutter Player Demo in Drive

Common Use Cases Where You Should Add YouTube Integration in Your Mobile App

Before diving into the main subject, it’s important to know when and where to integrate YouTube into your application. Some of the common use cases are:

Integrating Video Tutorials

One of the easiest ways to enhance user experience and improve engagement is by adding video tutorials from your channel or various subject matters that can interest your audience.

If you own a course or food application or a simple informational application, integrating YouTube can help users easily and efficiently get access to video content from your various channels that align with their interests.

Integrating in Movies Application

Adding movie trials or reviews via YouTube in your movie application allows users to get a preview of a specific movie and helps them decide whether to watch it or not. You can equally add behind-the-scene footage to spice up the app and encourage users to spend longer time on your application hence improving user engagement.

Informational oriented application

Informational-centered applications that provide articles, blog posts, and news about a variety of subjects can be enhanced by adding video-related content to improve user comprehension further.

Monetization

Implementing a YouTube player with ad support in your application provides a revenue stream for your application. For example, if you have a food recipe application, you can generate revenue by displaying YouTube videos with ads before, during or after the video.

Live Stream Events

You can embed YouTube live stream video using the YouTube LIVE API into your application easily for real-time interaction with your audience, product launch or Q&A sessions which can improve the kind of services you offer and user engagement.

Product Demonstrations

For educational applications or e-commerce applications, you can integrate YouTube videos to showcase the product features, the benefits of using it and real-life usage to the users in-app.

Travel

A mobile app that includes travel guides or travel-related content with embedded YouTube videos showcasing popular destinations, attractions, or travel tips.

For example, users can easily visualize popular spots instantly rather than navigating through a list of selected images.

Fitness and Music

In fitness applications, you can incorporate YouTube videos that demonstrate and guide users on how to perform certain movements.

Keep in mind that while integrating these YouTube features into your mobile application, it’s important to always ensure compliance with YouTube’s terms of service.

Integrating YouTube in a Flutter Application

In this section, we will work you through how to integrate a Youtube player into your Flutter application.

Prerequisites

YouTube Player Flutter
Basic Dart Knowledge

Creating a Flutter Application

Install Flutter, open your Android Studio editor and create a new Flutter project or open your terminal and run the following command to get started with a Flutter project.

flutter create example_project_youtube

example_project_youtube is the name of the project, and you can replace it with any name you want. Once the project is complete, choose an emulator or connect your phone and run the following command to launch it.

flutter run

Adding YouTube Package

To add the youTube_player_flutter package, open another terminal and run the following command:

flutter pub add youtube_player_flutter

youtube_player_flutter plugin for playing or streaming inline YouTube videos using the official iFrame player API. This plugin supports both Android and iOS.

This will add the youtube_player_flutter package in the dependencies section of your pubspec.yaml located at the root of your project.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  youtube_player_flutter: ^8.1.2

Now create two dart files in which one will contain the video JSON data model and the last will be the YouTube player page.

We also have the main.dart file which looks like this:

import 'package:flutter/material.dart';
import 'package:flutter_app_youtube/screens/YoutubeScreen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
        useMaterial3: true,
      ),
      home: const YouTubeScreen(),
    );
  }
}

Create a lib/model/VideoModel.dart and add the following code:

import 'dart:convert';

class VideoModel {
  int? id;
  String? name;
  String? url;

  VideoModel(this.id, this.name, this.url);

  VideoModel.fromJson(Map<String, dynamic> json) {
    id = json["id"];
    name = json['name'].toString();
    url = json['url'];
  }
}

Create YouTubeVideoScreen.dart

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YouTubeScreen extends StatefulWidget {

  const YouTubeScreen({Key? key}) : super(key: key);

  @override
  _YouTubeScreenState createState() => _YouTubeScreenState();
}

class _YouTubeScreenState extends State<YouTubeScreen> {
  String? videoId;

  @override
  void initState() {
    super.initState();
    videoId = 't31fj-0t3Dw';
  }

  @override
  Widget build(BuildContext context) {
    return YoutubePlayer(
      controller: YoutubePlayerController(
        initialVideoId: videoId!,
        flags: const YoutubePlayerFlags(
          autoPlay: true, 
          mute: false
        )
      )
    );
  }
}

A Youtube video url is generally in the form:

https://www.youtube.com/watch?v='Your video id here'

The v in the url contains the id of your video. So put this id in the videoId variable and test your application

Incorporating Features and Customizing YouTube Player

Show Video Progression Indicator

By default, the showVideoProgressIndicator is set to true, you can set it to false if you don’t want to see the video progression indicator.

showVideoProgressIndicator: false

Progress Indicator Color

Use the progressIndicatorColor attribute to change the color of the video progress indicator. For example, below we have changed the color to green:

progressIndicatorColor: Colors.green

Setting FullScreen Mode

To support Full screen you need to wrap the player in the YoutubePlayerBuilder:

YoutubePlayerBuilder(
  player: YoutubePlayer(
    controller: _controller,
  ),
  builder: (context, player){
    return Column(
      children: [
        player,
      ]
    );
  }
),

Adding Players Control

YoutubePlayerFlags allows you to define player flags. In the example below, we set the autoplay to false, disabled the audio by setting mute to true, enabled caption, and hide controls, looped the video and disabled video HD mode.

YoutubePlayerFlags(
  autoPlay: false,
  mute: false,
  enableCaption: true,
  loop: true,
  forceHD: false,
  hideControls: true
)

If you want to know more you can check the YoutublePlayerFlags Class and equally learn how to customize other features.

What’s Next

Conclusion

In this guide, we have learned how to integrate a YouTube video player into a Flutter application. By following the step-by-step guide and code examples provided, you can enhance your app's functionality and user experience by seamlessly incorporating YouTube videos. Remember to handle error cases gracefully and consider implementing additional features like Playback Speed and playlist integration to further enrich your app.

Flutter YouTube Player increases the productivity of your applicant by providing visual and dynamic content that makes your application both informative and engaging. You can add a YouTube video player in any application as you can see through the use cases provided earlier.

With the power of Flutter and YouTube integration, the possibilities are endless.

Happy coding!
Full GitHub Code of Tutorial.

Resources

https://pub.dev/packages/youtube_player_flutter

https://www.linkedin.com/pulse/why-considering-video-integration-mobile-apps-profitable-abbas/

Opensea vs Blur: Which Platform Suits Your Needs?

Gun — Tue, 12 Mar 2024 11:23:06 +0000

In the ever-evolving world of digital assets and non-fungible tokens (NFTs), choosing the right platform for buying, selling, or exploring NFTs can be a daunting task. Two of the leading platforms in this space are OpenSea and Blur. Each has its unique features, community, and approach to the NFT market. In this post, we’ll dive deep into the differences between OpenSea and Blur, helping you decide which platform best suits your needs as an NFT enthusiast, artist, or investor.

OpenSea: The Gateway to NFTs

OpenSea has established itself as the go-to marketplace for NFT transactions, often referred to as the eBay for digital assets. It’s designed to cater to a broad audience, from beginners in the NFT space to seasoned collectors and investors.

Key Features:

Diverse Marketplace: OpenSea boasts an expansive collection of NFTs across various categories, including art, domain names, virtual worlds, trading cards, and collectibles. This diversity makes it an attractive platform for users with varied interests.
User-Friendly Interface: The platform is known for its intuitive and easy-to-navigate interface, making it accessible for users of all levels of experience. Whether you’re creating, buying, or selling NFTs, the process is straightforward.
Cross-Blockchain Support: OpenSea supports multiple blockchains, including Ethereum, Polygon, and Klaytn. This cross-chain functionality allows users to explore a wider range of NFTs and engage with different blockchain communities.
Community and Resources: OpenSea offers extensive resources for new users, including guides, FAQs, and a supportive community. These resources are invaluable for those new to the NFT space.

Pros:

Wide range of NFTs
User-friendly for beginners
Strong community support

Cons:

Transaction fees can be high on certain blockchains
Some users have reported issues with customer service

Blur: The Professional’s NFT Marketplace

Blur positions itself as a platform for professional NFT traders and artists. It’s known for its advanced features and analytics, catering to users looking for a more data-driven approach to the NFT market.

Key Features:

Advanced Trading Tools: Blur offers sophisticated tools and analytics for users to track the market, analyze trends, and make informed decisions. This is particularly beneficial for professional traders and investors.
Batch Buying and Selling: The platform allows users to buy or sell multiple NFTs in a single transaction, streamlining the process and saving on transaction fees.
Rewards System: Blur incentivizes platform activity through a rewards system, offering BLUR tokens for actions like listing NFTs and participating in auctions. This can be particularly attractive for active traders and sellers.
Focus on Speed and Efficiency: The platform is optimized for speed, aiming to provide a seamless and efficient experience for high-frequency traders.

Pros:

Advanced tools and analytics
Incentivized participation
Efficient batch transactions

Cons:

Might be overwhelming for beginners
More focused on trading than the community aspect

Comparing OpenSea and Blur

When deciding between OpenSea and Blur, consider your objectives and preferences in the NFT space.

For Beginners and Enthusiasts:

If you’re new to NFTs or looking for a broad marketplace with diverse offerings, OpenSea is likely the better choice. Its user-friendly interface, extensive resources, and supportive community make it an ideal starting point for exploring the world of NFTs.

For Artists:

Artists looking to showcase their work might find OpenSea more accommodating due to its larger audience and the diversity of its user base. However, Blur’s advanced tools and analytics could also appeal to artists interested in market trends and the trading aspect of their work.

For Professional Traders and Investors:

For those with experience in the NFT market, particularly traders and investors seeking advanced tools and analytics, Blur stands out. Its focus on speed, efficiency, and the rewards system makes it a compelling option for users looking to maximize their engagement and returns.

Community vs. Trading Focus:

OpenSea fosters a broader community of NFT enthusiasts, making it a more suitable platform for users interested in the social and discovery aspects of NFTs. On the other hand, Blur appeals to users with a strong focus on the trading and investment side, offering tools and features that cater to this demographic.

Conclusion

Choosing between OpenSea and Blur ultimately depends on your specific needs, level of expertise, and interests within the NFT space. OpenSea offers a welcoming environment for newcomers and a diverse marketplace for collectors and artists, emphasizing community and accessibility. Blur, meanwhile, caters to the more professional segment of the market, providing advanced tools and analytics for serious traders and investors.

Before making your decision, consider what you value most in an NFT platform — whether it’s the community, diversity of assets, trading

How to Build an Electronic Commerce Store with Medusajs

Gun — Wed, 25 Oct 2023 12:55:57 +0000

The demand and supply of goods and services keep evolving daily. Businesses need to keep an eye on these evolutions to adopt the right ecommerce platform to distribute their goods and services to various end users.

Headless commerce is becoming increasingly popular because of its adaptability and scalability. A great option for constructing a headless commerce store is Medusa, an open source and scalable ecommerce engine. Next.js offers a robust framework for building storefronts.

With the help of Medusa and Next.js, you can develop a powerful and scalable online store that is tailored to the particular requirements of your company or business. Regardless of your experience as a developer or online retailer, this tutorial will guide you on building and customizing an electronic store.

Here’s a demo of the application with Medusa and Next.js by following this tutorial:

demo medusa electronic store.mp4

What Will You Learn?

Set up a Storefront with Medusa’s Next.js default starter template.
Add product using the admin dashboard.
Display products in your storefront.
Customize your storefront.
Add a Search option to your store.
Add a Payment option to your store.

You can find the code for this tutorial in this GitHub Repository.

What is Next.js?

Next.js is an open-source React framework for building user-friendly web applications. React is a JavaScript library for building interactive user interfaces. Next.js enables server-side rendering and requires minimal or no configuration.

Medusa offers two storefront starters: Next.js and Gatsby. It's easy to install them with the CLI command. Medusa Next.js storefront has many ecommerce pre-build features like a shopping cart, product display, payment processing, and more.

What is Medusa?

Medusa is an open-source digital commerce infrastructure built with Node.js and provides many ecommerce features such as RMA flows, product and collection management, order management, customization, and more.

These are some features that set Medusa apart from other ecommerce platforms. Medusa also offers a great developer experience, allowing developers to create amazing and scalable stores with minimal effort.

Medusa's headless architecture enables you to build your store with the framework or language of your choice. There are no constraints, as you can use Medusa's API to connect the Medusa admin to the storefront to perform actions like the product, customer, order, payment management, and many more.

Creating your Electronic Commerce Platform

This section highlights the steps to build your electronic store with Next.js and Medusa.

Prerequisites

Before you begin, make sure you have the following:

Nodejs version 14 or later
Git
Yarn or Npm(This tutorial uses Yarn)
A code editor like VSCode
An Algolia account
A Stripe account
S3 for file upload service

You will find all the resources used in this tutorial, such as icons and images in the Git repository.

How to Set Up the Medusa Server for the Electronic Store

If you have everything installed, follow these steps to set up your Medusa project.

Install the Medusa CLI tool with the following command:

yarn global add @medusajs/medusa-cli

Create your Medusa application with this command:

yarn create medusa-app

Upon executing, this command will ask you where you which to install your project. Enter a name there; in this tutorial, it is ElectronicStore. Then, press enter. For this tutorial, choose the Medusa-starter-default for the backend and the Next.js starter template for the storefront.

Normally you should have the same information as the screenshot below.

![How to Build an Electronic Commerce Store with Medusa and Nextjs]https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/starter-1024x302.png

Upon the execution of this command, Medusa will create three folders in the ElectronicStore: storefront, admin, and backend.

To start each part of the application, open the three command line/terminal tabs and run the following command with respect to each folder:

# Medusa server
cd ElectronStore/backend
yarn start

# Admin
cd ElectronStore/admin
yarn start

# Storefront
cd ElectronStore/storefront
yarn dev

After executing those commands, visit localhost:8000 to view your storefront.

Similarly, visit your admin dashboard by opening your browser on localhost:7000. 7000 is the default admin port.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/admin-1024x552.png

The next step consists of styling your storefront. This tutorial uses Tailwind CSS very useful for building modern websites. Note that you can equally set up your Medusa admin, Medusa storefront, and Medusa Backend separately.

Styling the Electronic Commerce Storefront

This section shows how to style your storefront using Tailwind CSS. With create-medusa-app, the Next.js starter template already contains Tailwind. However, you need to configure the tailwind.config.js as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now that you have successfully added Tailwind to your project, you must customize your storefront.

Customizing the Storefront

Start by changing the style of the header storefront/src/module/layout/templates/nav/index.tsx with the code below:

const Nav = () => {
  const { pathname } = useRouter()
  const [isHome, setIsHome] = useState(false)
  useEffect(() => {
    pathname === "/" ? setIsHome(true) : setIsHome(false)
  }, [pathname])

  const { toggle } = useMobileMenu()

  return (
    <div
      className={clsx("sticky top-0 inset-x-0 z-50 group", {
        "!fixed": isHome,
      })}
    >
      <header className="relative h-16 px-8 mx-auto transition-colors bg-white border-b border-transparent duration-200 group-hover:bg-white group-hover:border-gray-200 border-b-[#f1f1f1]">
        <nav
          className={clsx(
            "text-gray-900 flex items-center justify-between w-full h-full text-small-regular transition-colors duration-200"
          )}
        >
          <div className="flex-1 basis-0 h-full flex items-center">
            <div className="block small:hidden">
              <Hamburger setOpen={toggle} />
            </div>
            <div className="hidden small:block h-full">
              <DropdownMenu />
            </div>
          </div>

          <div className="flex items-center h-full">
            <Link href="/">
              <a className="text-xl-semi uppercase">
                <img src="/logo.png" alt="" width={50} />
              </a>
            </Link>
          </div>

          <div className="flex items-center gap-x-6 h-full flex-1 basis-0 justify-end">
            <div className="hidden small:flex items-center gap-x-6 h-full">
              {process.env.FEATURE_SEARCH_ENABLED && <DesktopSearchModal />}
              <Link href="/account">
                <a>Account</a>
              </Link>
            </div>
            <CartDropdown />
          </div>
        </nav>
        <MobileMenu />
      </header>
    </div>
  )
}

export default Nav

This code above changes the navbar by adding a border and logo.

To change the banner image, locate your storefront/src/modules/home/components/hero/index.tsx, which is the hero section and replace it with the code below:

const Hero = () => {
  return (
    <div className="h-[90vh] w-full relative">
      <div className="text-white absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:text-left small:justify-end small:items-start small:p-32">
        <h1 className="text-2xl-semi mb-4 drop-shadow-md shadow-black">
          Hi 👋 welcome to my electronic shop
        </h1>
        <p className="text-base-regular max-w-[32rem] mb-6 drop-shadow-md shadow-black">
          The best electronic devices to help you in your daily tasks both in
          the professional and personal life.
        </p>
        <UnderlineLink href="/store">Explore products</UnderlineLink>
      </div>
      <div className="bg-white h-[90vh] w-full">
        The best electronic devices to help you in your daily tasks both
        in the professional and personal life.
      </div>
      <Image
        src="/hero2.jpg"
        layout="fill"
        loading="eager"
        priority={true}
        quality={90}
        objectFit="cover"
        alt="computer"
        className="absolute inset-0"
        draggable="false"
      />
      <div className="bg-black h-[90vh] w-full absolute top-0 opacity-50"></div>
    </div>
  )
}

export default Hero

This code block adds a banner image and text to the hero section.

Next, change how you display feature products in the home section. storefront/src/module/home/components/featured-products/index.tsx:

const FeaturedProducts = () => {
...
  return (
   ...
        <div className="flex flex-col items-center text-center mb-16">
          <span className="text-base-regular text-gray-600 mb-6">
            Latest products
          </span>
          <p className="text-2xl-regular text-gray-900 max-w-lg mb-4">
            Our newest electronic gadgets to make your life smooth.
          </p>
          <UnderlineLink href="/store">Explore products</UnderlineLink>
        </div>
       ...
  )
}

...

The code above changes the text of feature products of your store.

Change the section just before the footer storefront/src/modules/layout/components/footer-cta/index.tsx by adding the following code:

const FooterCTA = () => {
  return (
    <div className="bg-gray-100 w-full">
      <div className="content-container flex flex-col-reverse gap-y-8 small:flex-row small:items-center justify-between py-16 relative">
        <div>
          <h3 className="text-2xl-semi">Check out the lastest gadgets</h3>
          <div className="mt-6">
            <UnderlineLink href="/store">Explore products</UnderlineLink>
          </div>
        </div>

        <div className="relative w-full aspect-square small:w-[35%] small:aspect-[28/36]">
          <Image
            src="/hero3.jpg"
            alt=""
            layout="fill"
            objectFit="cover"
            className="absolute inset-0"
          />
        </div>
      </div>
    </div>
  )
}

export default FooterCTA

Here you are changing the default text as well as the default image.

Now move to the footer file storefront/src/modules/layout/components/footer-nav/index.tsx and replace it with the following code:

const FooterNav = () => {
  const { collections } = useCollections()

  return (
    <div className="content-container flex flex-col gap-y-8 pt-16 pb-8">
      <div className="flex flex-col gap-y-6 xsmall:flex-row items-start justify-between">
        <div>
          <Link href="/">
            <a className="text-xl-semi uppercase">
              <img src="/logo.png" alt="" width={50} />
            </a>
          </Link>
          <p className="py-5 text-sm text-[#999]">
            Get the best electronics from the best place
          </p>
          <div className="flex flex-col-reverse gap-y-0 justify-center xsmall:items-center xsmall:flex-row xsmall:justify-between">
            <span className="text-xsmall-regular text-gray-500">
              © Copyright 2023 ES store
            </span>
            <div className="min-w-[316px] flex xsmall:justify-end">
              <CountrySelect />
            </div>
          </div>
        </div>
        <div className="text-small-regular grid grid-cols-3 gap-x-16">
          <div className="flex flex-col gap-y-2">
            <span className="text-base-semi">Collections</span>
            <ul
              className={clsx("grid grid-cols-1 gap-y-2", {
                "grid-cols-2": (collections?.length || 0) > 4,
              })}
            >
              {collections?.map((c) => (
                <li key={c.id}>
                  <Link href={`/collections/${c.id}`}>
                    <a>{c.title}</a>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FooterNav

This code snippet above adds new links and a logo in the footer. In the last part of the footer, change the background colour storefront/src/modules/layout/components/medusa-cta/index.tsx

const MedusaCTA = () => {
  return (
    <div className="py-4 flex justify-center items-center w-full bg-[#333]">
      <div className="content-container flex justify-center flex-1">
        <a href="https://www.medusajs.com" target="_blank" rel="noreferrer">
          <PoweredBy />
        </a>
      </div>
    </div>
  )
}

Head to storefront/src/pages/index.tsx to modify the meta information of the home page:

const Home: NextPageWithLayout = () => {
  return (
    <>
      <Head
        title="Home"
        description="Get the best electroics for your home and office from the best stores online with secure payment methods."
      />
      <Hero />
      <FeaturedProducts />
    </>
  )
}

By the end, you should have a store similar to the screenshot below:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store1-1024x470.png

Adding Products in the Electronic Commerce Store

By default, Medusa comes with some products on the storefront. You need to add your products. Medusa commonly uses a file service plugin to add products to the admin dashboard.

Installing and Integrating a File Service Plugin (S3)

Simple Storage Service (S3) is a powerful open-source object storage suite available on any public and private cloud. Medusa uses file service plugins to host files such as images.

This tutorial will use AWS S3, but you can use other file services like Space and Minio. You need to have an AWS account and create a bucket if you have none. Equally, you need to create an access and secret key that you will use in the next section to build your store.

When you are done with that, install the S3 plugin in the backend with the command below:

yarn add medusa-file-s3

Then, open your backend/.env file and add the following:

S3_URL=<YOUR_BUCKET_URL>
S3_BUCKET=<YOUR_BUCKET_NAME>
S3_REGION=<YOUR_BUCKET_REGION>
S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID>
S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>

<YOUR_BUCKET_URL> corresponds to the URL of your bucket it's generally in the form: http://<YOUR_BUCKET_NAME>.s3-website-<YOUR_BUCKET_REGION>.amazonaws.com
<YOUR_BUCKET_NAME>: The name of your S3 bucket
<YOUR_ACCESS_KEY_ID: The access key which was created earlier
<YOUR_SECRET_ACCESS_KEY>: The secret key created earlier

To complete the S3 integration, add the following configuration to the array of plugins in the backend/medusa-config.js file:

const plugins = [
  // ...
  {
     resolve: `medusa-file-s3`,
    options: {
      s3_url: process.env.S3_URL,
      bucket: process.env.S3_BUCKET,
      region: process.env.S3_REGION,
      access_key_id: process.env.S3_ACCESS_KEY_ID,
      secret_access_key: process.env.S3_SECRET_ACCESS_KEY,
    },
  },
]

Lastly, edit storefront/next.config.js file like this:

images: {
    domains: ["<YOUR_BUCKET_NAME>.s3.amazonaws.com"],
  },

Add the domain from where you are uploading your images. corresponds to the name of your bucket. Once you have finished setting up S3, you can add electronic products to your store.

Add Products with Medusa Admin

To add products to your store, head to the admin dashboard (localhost:7000). The default login credentials are admin@medusa-test.com and supersecret. The Medusa admin dashboard connects the Medusa server to help you to manage your store.

Once you logged in, you should have a similar interface as below. Here you can manage your products, orders, customer settings, and more.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/dash-1024x464.png

Head to the product page and delete all the default products by clicking on the three dots at the end and selecting delete.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/deleteprod-1024x176.png

After removing all the products, click on add new product button to add some electronic products to the ecommerce store.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store3-1024x464.png

If you go to localhost:8000/store you will see your newly-added products.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store2-1024x469.png

Integration

Now is the time to integrate the two main services: Search and Payment.

Algolia Integration

Algolia is an open-source UI search JavaScript library. It allows you to add advanced search functionalities to your store. Adding this search functionality to your store will greatly improve the user experience and optimize internal search in the electronic commerce store.

To add Algolia to your application, you need to possess an Algolia account. Upon creating your account, follow this documentation to create an Algolia application and then, get your Algolia Application ID, Admin API Key, and Search-Only API Key.

Next, install the Algolia plugin in your store with the following command:

yarn add medusa-plugin-algolia

Then add this environment variable to your Medusa backend:

ALGOLIA_APP_ID=<YOUR_APP_ID>
ALGOLIA_ADMIN_API_KEY=<YOUR_ADMIN_API_KEY>

<YOUR_APP_ID> and <YOUR_ADMIN_API_KEY> correspond to the Application ID and Admin API Key mentioned earlier. You can find them on the API Keys page under your Algolia account.

Add the following item into the plugins array in medusa-config.js:

const plugins = [
  // ...
  {
    resolve: `medusa-plugin-algolia`,
    options: {
      application_id: process.env.ALGOLIA_APP_ID,
      admin_api_key: process.env.ALGOLIA_ADMIN_API_KEY,
      settings: {
        products: {
          searchableAttributes: ["title", "description"],
          attributesToRetrieve: [
            "id",
            "title",
            "description",
            "handle",
            "thumbnail",
            "variants",
            "variant_sku",
            "options",
            "collection_title",
            "collection_handle",
            "images",
          ],
        },
      },
    },
  },
]

searchableAttributes are attributes in a product that are searchable while attributesToRetrieve are attributes to retrieve for each product result.

Now, add the search UI to the storefront so that users can effectively perform product research. Fortunately, Next.js storefront Algolia integration is available out-of-the-box. To get everything ready, make sure the search feature is set to true in the store.config.json:

 {
  "features": {
    "search": true
  }
}

Then add the environmental variables:

NEXT_PUBLIC_SEARCH_APP_ID=<YOUR_APP_ID>
NEXT_PUBLIC_SEARCH_API_KEY=<YOUR_SEARCH_API_KEY>
NEXT_PUBLIC_SEARCH_INDEX_NAME=products

<YOUR_APP_ID> corresponds to the Application ID.
<YOUR_SEARCH_API_KEY> corresponds to the Search-Only API Key. You can find this information in your Algolia API Keys section.

To complete this integration, change the code in src/lib/search-client.ts to the following:

import algoliasearch from "algoliasearch/lite"

const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || ""

const apiKey =
  process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"

export const searchClient = algoliasearch(appId, apiKey)

export const SEARCH_INDEX_NAME =
  process.env.NEXT_PUBLIC_INDEX_NAME || "products"

If you run your storefront and backend, you will notice that the search feature is available.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/search-1024x553.png

Payment Integration with Stripe

This section will guide you through how to set up Stripe payment methods in your Medusa backend, admin, and storefront. Stripe is one of the simplest ways to accept online payments. It gives you the technical components needed to manage transactions safely. Other payment methods you can use with Medua are Paystack, Klarna, and Paypal.

To add Stripe to your store, you must possess a Stripe account. Like Algolia, you must retrieve your account's API Keys and secrets to connect Medusa to your Stripe account.

In the root directory of the Medusa backend, use the following command to install the Stripe plugin:

yarn add medusa-payment-stripe

Next, you need to add configurations to your stripe plugin. In medusa-config.js, add the following at the end of the plugins array:

const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]

Head to the dashboard of your Stripe account to retrieve the API Key and secret key. Then, in your Medusa backend, create .env if it does not exist and add the Stripe key:

STRIPE_API_KEY=sk_...

Next, add Stripe’s webhook in the .env file. You can get it by heading to the Stripe dashboard and clicking Add an Endpoint. Medusa backend's endpoint, Stripe webhook, is {BACKEND_URL}/stripe/hooks.

Note: Add this endpoint to its field if you are in production, and replace {BACKEND_URL} with the URL of your backend. Add a description, select at least one action, and then click Add Endpoint. Once the Webhook is created, you’ll see "Signing secret" in the Webhook details. Reveals the secret key by clicking reveal it and copying it into your Medusa backend.

STRIPE_WEBHOOK_SECRET=whsec_...

The last part of Stripe integration consists of setting it up in the Medusa admin by adding a payment provider.

Go to Settings → Regions.
Select a region to edit.
Click on the icon at the top right of the first section on the right.
Click on Edit Region Details from the dropdown.
Under the provider's section, select the payment providers you want to add to the region. Here it's Stripe.
Unselect the payment providers you want to remove from the region.
Click Save.

Finally, in your storefront, add the following environment variable:

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

Where <YOUR_PUBLISHABLE_KEY> corresponds to your Stripe Publishable Key.

If you run your Medusa storefront and backend, add products to your cart, and then proceed to checkout, you can now use Stripe as a payment method. Here is what the final result looks like:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store4-1024x558.png

You could also check out this Stripe guide for more information regarding its integration

Testing the Store

The final step of this tutorial consists of testing the whole store. While the Medusa server is still running, restart your storefront.

Navigate to localhost:8000 to see the final electronic commerce store:

Click on the store item in the navigation bar to open the store:

Add some products to your cart:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store8-1024x467.png

Checkout:

View your order:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store10-1024x465.png

Conclusion

In this tutorial, you learned how to build a headless electronic commerce platform with the Medusa engine, using the Next.js Storefront and integrating services like search and payment using Algolia and Stripe.

However, you can add many other functionalities to this electronic commerce store. Some include gift cards, tax management, custom shipping methods, and Notifications.

Go to the Medusa documentation for more details regarding these functionalities and services.

This article was originally published on the Learn Dev Tools Blog

7 Useful Mobile Applications to Improve Your Productivity as a Developer

Gun — Tue, 04 Jul 2023 20:37:08 +0000

Today many things that were usually done on a desktop, can now be performed on your smartphone thanks to the evolution of Mobile phones. Developers must be always on the move in today's fast-paced world, working on their projects and remaining productive. Mobile apps, which provide ease and flexibility, have become an essential element of a developer's arsenal. Having the appropriate mobile apps may dramatically enhance your productivity, whether you're coding on the move or managing your projects remotely. In this article, we'll look at the best mobile apps that every developer should use.

1. Code from Anywhere with Replit

Coding from anywhere and doing everything you'd normally do on a desktop, such as coding the complete project, sharing, and hosting, are all possible. Everything is handled via your phone. Replit comes with everything you need to get started, including a CPU, storage, and RAM. You can interact with the terminal, use a file system, and do other things. Replit is available for Android and iOS systems

2. Improve Your Productivity with Macrodroid

One feature that Android consumers like is freedom. They are free to do whatever they choose. You can do even more using Macrodroid. It is one of the best Android device automation tools. You can auto-skip YouTube advertising, auto-swipe in TikTok, do something when something happens, and so on. The app is readily available for Android users only

3. Test your APIs directly with Your Mobile Phone using API Tester

API Tester is a robust tool for testing and debugging APIs from mobile devices. It has most of the functionalities of a typical desktop API testing program. You can test any API, including REST, GraphQL, WebSocket, and SOAP. It uses cURL or files from your device to import requests and collections. You can also run all queries simultaneously, save variables for later use, and integrate with other Widgets. API Tester is available on both AppStore and PlayStore

Share your work with friends, coworkers, or team members while maintaining control over viewing and editing rights. Collaborate whether you're at home, in your workplace, or on the other side of the world. With a single click, Mindly can convert your well-structured Word, HTML, or Markdown document into a creative and entertaining mind map. Anytime you add, delete, or relocate nodes, your map automatically updates and preserves its layout. You can even import and export to or from your Dropbox account.

The app is readily available on AppStore and PlayStore

5. Avoid Painless Configurations with Expo Go

Expo Go will be extremely beneficial for React Native developers or anyone on their way to want to learn React Native. Rather than installing and configuring Android Studio locally for development. Simply use Expo Go to see real-time changes and easily share your creation with everyone. Create a react-native project with appropriate configurations, then scan the QR code from the console. The Expo Go smartphone app will provide access to the project. All your changes will be directly reflected in the app. You can download the app on PlayStore or AppStore

6. Stay up to date with DevBytes

As a developer, you must constantly stay up to date on the latest technological developments. However, most of you do not have time to investigate and read lengthy articles. DevBytes explores, resumes and presents popular computer programming news. Not only can you obtain news, but you can also learn new coding ideas with explanations and code samples, find career possibilities, and participate anonymously in public polls to express your opinions. The application is only available on PlayStore.

7. Plan Easily with Planio

Planio implements scrum and agile methods. On the Agile Kanban-style board, you can plan sprints and track progress. However, more standard project management tools such as milestones and the Gantt chart can also be used. This is useful when you cannot manage everything using agile methodologies. As your team completes milestones, they'll start coming up with brilliant ideas. You want to debate them, evaluate their merits, and record your team's findings. Planio also, allows you to construct your wiki, discuss ideas in a forum atmosphere, or simply leave comments on, well, just about anything. Work from anywhere at any time.

Conclusion

Mobile apps have transformed the way developers work and increased their productivity. Developers can code, collaborate, manage projects, and stay connected right from their mobile apps. Their simplicity and flexibility can enable developers to be productive even while they are on the go. Including these top mobile apps in their toolset will certainly improve the development process and yield better results.

How to Localize Your Vue Application with Tolgee?

Gun — Thu, 29 Jun 2023 12:34:45 +0000

Nowadays, providing solutions to specific problems identified in a domain has fueled the creation and growth of many companies and startups. But one problem arises which is how to market the product in various places given that not everyone does not have the same background. Even though English is one of the most used languages, especially in the professional domain, this does not exclude the other part of the population that uses other languages. To build an application or solution for a specific area, you need to assure that your solution will efficiently communicate with the target audience. Software localization is the process of adapting a product or a service offered by the software to meet the needs of a desired culture, population or language.

In this article, you will learn how to localize your Vue application in various languages with Tolgee an open-source tool. But before that let’s have an overview of what Tolgee and Vuejs are.

What is Tolgee?

Tolgee is an open-source platform that provides a user-friendly interface for organizing translations for developers and translators. It facilitates the translation process by providing a centralized site for all translation duties, such as managing translation files, translating text, and integrating with popular development tools such as Nextjs, Gatsby or Angular. Tolgee also provides a number of tools to aid collaborative translation operations, including translation memory. Tolgee is an all-in-one solution for project management and optimizing multilingual content distribution.

What is Vue.js?

Vue.js is a JavaScript framework used for creating user interfaces, PWA and single-page apps. It is intended to be adopted in stages and can also serve as a web application framework capable of powering complex single-page applications. Vue.js is well-known for its ease of use and simplicity, making it a popular choice among developers for creating scalable and performant web apps.

How to Integrate Tolgee into a Vue Application

This selection highlights a step-by-step approach to integrating Togee into a Vue application.

Step 1: Install Tolgee

You can either create a Tolgee project via the Tolgee Cloud Platform or self-host it. In this tutorial, we will use the hosted version of Tolgee. However, you can host the server on your own via Docker. If you don’t have Docker installed use this Docker quick guide to get started

It is recommended to run it in a single container.

docker run -v tolgee_data:/data/ -p 8085:8080 tolgee/tolgee

Then follow this guide to configure your Tolgee project.

Step 2: Create a Project

Once everything is set up, log into your account and create a new project. Give a name to your project and add the languages you wish your app to use. In this tutorial, the app will use three languages: English, French and Spanish

Step 3: Generate API Key

Still, in your Tolgee dashboard, navigate to integrate; the last element in the left menu and select Vue among the list of app integrations

Then in the select input, click on Create new to create a new API Key.

Name your API key and select the period of time you wish to use it and click on Save.

This will generate a first-time-only token that you need to save somewhere on your PC because you will use it later.

Step 4: Add Tolgee to Your Vue application

Navigate to your desired directory and run the following command :

npm init vue@latest

You will be prompted to provide your project’s name and other information.

If you already have a project setup, you can skip this step.

Vue.js - The Progressive JavaScript Framework
√ Project name: ... vue-tolgee
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Once the command is executed, navigate to the project’s root directory and run npm install, then npm run dev to start the app.

If your application does not automatically open, type [localhost:5173](localhost:5173)`` in your browser to visualise your freshly created application.

If your project is a Vue 3 Typescript project create shims-vue.d.ts file and add the following code:

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

This will allow you to import vue components.

Step 5: Install Tolgee Package

Now use the command below to install Tolgee.

cd vue-tolgee
npm install @tolgee/vue

Step 6: Add Environment Variable:

Create env.development.local file if you don’t have one at the root of your project and paste the following code

VUE_APP_TOLGEE_API_URL=<host>
VUE_APP_TOLGEE_API_KEY=<Only new key can be revealed>

VUE_APP_TOLGEE_API_URL is where your Tolgee server is hosted

VUE_APP_TOLGEE_API_KEY is your API key. If somehow you lost the API key you generated earlier, you can regenerate a new one.

Click on your profile picture at the top right corner of the dashboard

Then Select Project API Keys. In the new window that opens, either you add a new API key or you generate a new one. Make sure to save the API key somewhere this time in case you failed to do it previously.

Once your API key is ready, you can now add it to your env file.

Step 7: Initialize Tolgee

Update your main.ts found at the root of your project with the following code:

import './assets/main.css';
import { createApp } from 'vue';
import App from './App.vue';
import {
  BackendFetch,
  DevTools,
  Tolgee,
  FormatSimple,
  VueTolgee,
} from '@tolgee/vue';

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .use(BackendFetch())
  .init({
    language: 'en',
    apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
  });
const app = createApp(App);
app.use(VueTolgee, { tolgee });
app.mount('#app');

Then wrap your code in src/app.vue in TolgeeProvider tag like below:

<template>
  <TolgeeProvider>
    <header>
      <img
        alt="Vue logo"
        class="logo"
        src="./assets/logo.svg"
        width="125"
        height="125"
      />
      <div class="wrapper">
        <HelloWorld msg="You did it!" />
      </div>
    </header>
    <main>
      <TheWelcome />
    </main>
  </TolgeeProvider>
</template>

Step 8: Add Translations

Now head to your Tolgee server and add some translations. In this tutorial, you will be translating the default Vue 3 starting application so for each text, add a keyname, and add the default English text. Make sure to conventionally name your translations.

Then click on the French and Spanish input to select a translation from the machine-generated translations that best describes the text. You can adjust if you feel that the text does not fit its context.

Repeat this process until all translations are added. In the end, you should see the list of translations below.

Step 9: Create a Select Component

The select component will help you easily switch from one language to another. In your src/components created selector.vue file and add the following code:

<script setup>
import { useTolgee } from '@tolgee/vue'
const tolgee = useTolgee(['language'])
const changeLanguage = (e) => {
  tolgee.value.changeLanguage(e.target.value)
}
</script>
<template>
  <select :value="tolgee.getLanguage()" v-on:change="changeLanguage" class="selector">
    <option value="en">🇬🇧 English</option>
    <option value="fr">🇫🇷 Français</option>
    <option value="es">🇪🇸 Español</option>
  </select>
</template>

Now let’s give some style to the select tag with the following code in src/assets.main.css:

.selector {
  display: block;
  text-align: center;
  width: 80%;
  padding: 10px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  background: rgba(0, 255, 255, 0.51);
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  cursor: pointer;
  margin-left: 10px;

Step 10: Add Translation Keynames

This is the last step which consists of adding translation keynames. A typical translation looks like this:

import { T } from '@tolgee/vue';

<T keyName="documentation" defaultValue="Documentation" />;

So in your src/components/TheWelcome.vue replace your code with the following:

And src/components/HelloWorld.vue add:

<script setup lang="ts">
import { T } from '@tolgee/vue'
...
</script>

<template>
  <div class="greetings">
   ...
    <h3>
      <T keyName="success" defaultValue="You've successfully created a project with Vite + Vue 3" />
    </h3>
  </div>
</template>

Finally, update your App.vue file with the code below:

In the code block above, we have updated our components imports and added the Selector component we created earlier.

But there is one last thing we need to do, which is to add our translation files to the Vue project.

In your Tolgee dashboard, click on export in the left menu, then select the languages you wish to use and click on export.

Create i18n folder in your Vue application public folder and add the extracted files

utilis/i18n/en.json

{
  "documentation": "Documentation",
  "documentation_desc": "Vue’s official documentation provides you with all information you need to get started.",
  "tooling": "Tooling",
  "tooling_desc": "This project is served and bundled with Vite. The recommended IDE setup is VSCode + Volar. If you need to test your components and web pages, check out Cypress and Cypress Component Testing. More instructions are available in README.md.",
  "ecosystem": "Ecosystem",
  "ecosystem_desc": "Get official tools and libraries for your project: Pinia, Vue Router, Vue Test Utils, and Vue Dev Tools. If you need more resources, we suggest paying Awesome Vue a visit. ",
  "community": "Community",
  "community_desc": "Got stuck? Ask your question on Vue Land, our official Discord server, or StackOverflow. You should also subscribe to our mailing list and follow the official @vuejs twitter account for latest news in the Vue world. ",
  "support Vue": "Support Vue",
  "support Vue_desc": "As an independent project, Vue relies on community backing for its sustainability. You can help us by becoming a sponsor. "
    "readme": "More instructions are available in README.md.",
  "success": "You’ve successfully created a project with Vite + Vue 3",
  "hello": "Hello"
}

utilis/i18n/fr.json

{
  "documentation": "Documentación",
  "documentation_desc": "La documentation officielle de Vue vous fournit toutes les informations dont vous avez besoin pour commencer.",
  "tooling": "Outillage",
  "tooling_desc": "Ce projet est servi et groupé avec Vite. La configuration IDE recommandée est VSCode + Volar. Si vous avez besoin de tester vos composants et vos pages Web, consultez Cypress et Cypress Component Testing. Plus d'instructions sont disponibles dans README.md.",
  "ecosystem": "Écosystème",
  "ecosystem_desc": "Obtenez des outils et des bibliothèques officiels pour votre projet : Pinia, Vue Router, Vue Test Utils et Vue Dev Tools. Si vous avez besoin de plus de ressources, nous vous suggérons de rendre visite à Awesome Vue.",
  "community": "Communauté",
  "community_desc": "Est resté coincé? Posez votre question sur Vue Land, notre serveur Discord officiel, ou StackOverflow. Vous devez également vous inscrire à notre liste de diffusion et suivre le compte Twitter officiel @vuejs pour les dernières nouvelles du monde Vue.",
  "support Vue": "Soutenir Vue",
  "support Vue_desc": "En tant que projet indépendant, Vue s'appuie sur le soutien de la communauté pour sa durabilité. Vous pouvez nous aider en devenant parrain.",
  "readme": "Plus d'instructions sont disponibles dans README.md.",
  "success": "Vous avez réussi à créer un projet avec Vite + Vue 3",
  "hello": "Bonjour"
}

utilis/i18n/es.json

{
  "documentation": "Documentación",
  "documentation_desc": "La documentación oficial de Vue le brinda toda la información que necesita para comenzar.",
  "tooling": "Estampación",
  "tooling_desc": "Este proyecto se sirve y se incluye con Vite. La configuración IDE recomendada es VSCode + Volar. Si necesita probar sus componentes y páginas web, consulte Cypress y Cypress Component Testing. Más instrucciones están disponibles en README.md.",
  "ecosystem": "Ecosistema",
  "ecosystem_desc": "Obtenga herramientas y bibliotecas oficiales para su proyecto: Pinia, Vue Router, Vue Test Utils y Vue Dev Tools. Si necesita más recursos, le sugerimos que visite Awesome Vue. ",
  "community": "Comunidad",
  "community_desc": "¿Quedó atascado? Haga su pregunta en Vue Land, nuestro servidor oficial de Discord o StackOverflow. También debe suscribirse a nuestra lista de correo y seguir la cuenta oficial de Twitter @vuejs para conocer las últimas noticias en el mundo de Vue. ",
  "support Vue": "Soporte Vue",
  "support Vue_desc": "Como proyecto independiente, Vue depende del respaldo de la comunidad para su sostenibilidad. Puedes ayudarnos convirtiéndote en patrocinador. ",
  "readme": "Hay más instrucciones disponibles en README.md.",
  "success": "Ha creado con éxito un proyecto con Vite + Vue 3",
  "hello": "Hola"
}

If you re-run your application, it should be working perfectly like the screenshot below:

You can find the full working code in this GitHub Repository.

What is Open Source Software? A Beginner’s Guide

Gun — Thu, 29 Jun 2023 12:27:56 +0000

Introduction

If you have been in the tech industry for a while you may have heard about open source or open source software. When we talk about open source, you should think of open collaboration, open exchange, participation transparency and community-oriented development.

In this article, you will learn more about open source software including the difference between open source and other forms of software, key features of OSS, pros and cons of open source, how to start contributing to open source and some examples of OSS.

What is Open Source?

Open source designed any program whose source code can be modified and shared by anyone because it’s openly accessible.

What is Source Code?

A source code is a set of instructions written in the form of functions, descriptions, methods, calls or any other operational statement by a programmer using a computer programming language. A source code can be open that is available to anyone to edit and redistribute or closed. Source code is the part that most software or computer users cannot see.

Example of a Source code taken from Medusa's GitHub Repository

What Does Open Source Software(OSS) Mean?

The term Open source software is a non-proprietary software in which code is publicly available to anyone to inspect, comment on, modify, improve and redistribute it. Open source software is created and maintained by a group of developers so if you are new to computer programming, you can begin your journey as an open source contributor.

I have known open source since 2017 and started with my first contribution in 2020. I made my first contributions to the Apache Software Foundation Gihhub and Mozilla mobile Github.

What is the Difference between Open source Software and other Types of Software?

Do not get confused with open source, free, closed software and freeware. This section highlights the differences between these types of Software.

Open Source vs Free Software

Open source software is software available for anyone to edit, improve and redistribute. The source code is accessible to anyone. Open source promotes collaboration and sharing of source code. It’s an effective way for organizations, developers and individuals to collaborate. Freedom to use the software is not absolute or imposed but it’s allowed. Every open source software is not free. However, some open source licenses are restrictive. WordPress is an example of open source software

Free Software describes software in which source code is free to use, edit and redistribute without any restrictions. With free software, Freedom is a value that is more important than any other thing. All free software is open source software. Ares is an example

Open source and free software have distinguished features. Some open source software is restrictive and all free software are open source software but not all open source software is free software.

Open Source Software vs Freeware

Freeware is any software that is free to use and available to the general public. If you are a, it can be frustrating to use freeware because its source code is not open or rather, it’s closed so you can edit the software to fit your needs. You can only use the features it offers even if it it is limited. Google Chrome is an example of freeware

While with open source software, you have the possibility to edit, improve, and add different features to fit your needs. An example is Chromium.

Freeware source code is closed, only the developer or organization who created the software can view its source code while open source one can edit and redistribute. Freeware is copyrighted while Open source is not.

Open Source vs Proprietary Software

You do not need an authenticated license to use open source software. They function with GNU Public License. They can be installed freely on any computer system. Open source software is developed and maintained through open collaboration.

Proprietary Software is software with protected source code(closed). They cannot be installed on a computer without a valid license. So users need a valid and authenticated license to use it. They are also copyrighted like freeware but the difference is that you do not need to pay to use freeware. An example is Windows

Key features of Open Source Software

In this section, I will elaborate on the various key features and values that cover Open source Software.

Transparency: Open source allows you to track and understand any changes made to software without relying on the software manufacturer.
Collaboration: The main goal of the open source initiative is to allow anyone to freely participate and improve the software. By working together, we can easily identify and solve problems
Meritocracy: Including diverse perspectives from different brains can help identify the best ideas by decision-makers and could equally determine the success of a project.
Community: When many people gather to help and share ideas, it creates a community where each other can get support.
Review: Since source code is freely available to the public, different experimented community members can check, propose ideas and improve the software.
Reliability: Many collaborators can update and test the code to check if there is any bug and fix it. Open sources do not depend on one, two or three people to maintain but rather have a large community that supports them.
Flexibility: Flexibility refers to the fact that you can use open source code to address problems that are unique to your business. Plus you can rely on community help to improve an existing solution or implement a new one.
Lower cost: Most of the time, open source is free to use and download. Sometimes you may need to pay for only reinforcing security and interoperability.

What are the Benefits of Open Source?

Choosing to use or contribute to open source software offers many benefits. Some of them include:

Open source is free
You have more control over the software. Compare to Closed software you can edit open source software to fit your needs.
It's good for anyone beginning computer programming. As a beginner, you can become a better programmer by sharing your work and contributing to other works
Open source is good because it can help to enhance software security as anyone can spot and fix a security issue quickly that the original programmer may have missed
Open source projects tend to be more stable than other types of software since there is a great community behind ready-to-deploy means to improve it.
It promotes collaboration through the creation of communities.
Open source is flexible
They have Good Documentation

What are the Disadvantages of Open Source Software?

Not everyone embraces the open source philosophy. Some organizations still debate the fact that open source software is more vulnerable since their source code is open to anyone.

I have been in the software community for 3 to 4 years now and I have noticed that they tend to be more secure since issues linked to security or not can easily be identified and fixed by community members. However, I equally notice some drawbacks of open source.

Open source software can be difficult to set up, especially for beginners. Some of them may lack user-friendly interfaces imposing you to use a Terminal
Liability problems. Open source rarely contains warrant or liability protections
Compatibility issues.
Initially, there is no cost but it can be costly in the long term especially if you need immediate support. There is also training cost in case you incorporate the software into your team.
Not all open source possesses a user manual although you can seek help from the community it won't always be available immediately like commercial software where support is available 24h/7

How can you Start Contributing to Open Source?

It’s quite simple to contribute to open source software. You could do that by identifying and fixing bugs, adding features, improving documentation and writing content in the form of blog posts, technical tutorials or creating Videos. You also create your own open source project to promote open source.

To contribute to existing open source software, you should head to GitHub:

Find a project and Fork
Clone the Project to your Local machine
Create a new branch
Make changes
Commit your changes
Push your changes to your remote repository
Finally, Create a pull request

If you don’t have any project ideas, then open source projects to contribute to include

Open Source License

An Open source License governs how other individuals besides the initial developer can use, modify and redistribute the software. It allows the software to be transparent and changed by members of a community or third party. According to the Open Source Initiative include

Example of Open Source Software

You might have used an open source software without realising. There are many of them out there. Some popular and most-used open source software is

WordPress, an open source CMS for Content Management
Flutter for web, desktop and mobile development
CSS Frameworks Like Bootstrap for website layout
VLC Media Player for video and sound player
Libre Office for word processing
Open source Linux Operating System
Python is open source too.
Open source reporting tools include Metabase, BIRT
Open source PDF viewer include Qoppa PDF Studio, pdfFiller, and Soda PDF
Some Java open source projects are Arduino, Mindustry, and Signal Android
We equally have open source development tools like Eclipse IDE, and Apache Cordova

FAQ

Is Open Source Software Free?

Most open source software is free but there are some exceptions. Some open source licenses are restrictive and do not allow the creation of a modified version. An example is Open Source Watcom

Where can I find OSS?

You can find and download open source projects on SourceForge, OSDN, FossHub, GitHub, and F-Droid

Why Should you Contribute to OSS?

The most important advantage of contributing to open source is that you can find and collaborate with other developers hence improving your developer network.

Why is Open Source Important?

Open source improves innovations through collaboration with other organizations and developer

What are Some Open Source Competitions?

Open Source Competitions are contests where you can learn to participate in open source projects, demonstrate your coding skills, and get feedback. Examples of Open source competitions include Open Source Contest, Google Summer of Code (GSoC), Outreachy, Open Summer of Code, Free Software Foundation (FSF) Internship Program, GirlScript Summer of Code (GSSoC)

What is Closed Source Software?

Closed Software is software whose source code is only available to the author. So only the author can modify and copy it.

What is the Open Source Initiative?

The Open Source Initiative is a non-profit organisation with the main aim to educate about, form, and inform the benefit of open source

Conclusion

Open source is available for anyone to edit, use and redistribute. Some key features of open source include transparency, reliability, available community and flexibility. However, OSS can be costly in a long run. So if you are planning to incorporate OSS into your business you need to include additional or urgent costs in your project plan including the cost of training staff members to use the software. Some popular Open source projects include Apache, WordPress, and Mozilla Firefox.

If you like this kind of content, feel free to share or subscribe to our newsletter below to get fresh content like this periodically. But if you have any questions, you can reach me via my twitter account. I will be glad to hear from you.

Let's Flutter Together Today

Gun — Thu, 06 Apr 2023 15:00:06 +0000

Photo by Randall Ruiz on Unplash

Nowadays mobile application is growing exponentially. Many people use smartphones these days either for automation, relaxation, GPS for directions, keep track of appointments and contacts. In fact, many employees and businesses have trouble just imagining a day without a smartphone or mobile device. As people evolve over time so are the different tools used to build most software found in smartphones. Please note that Flutter is also used to build web and desktop apps. Here I will only focus on mobile applications. Then What is Flutter- Why should you learn Flutter in 2023?

In this article, I will briefly introduce Flutter to you and list some companies or apps which use or build applications using it.

Flutter is an Open source toolkit used to build expressively beautiful, natively compiled applications in a single code base. One of its benefits and why I will encourage you to use it in your project is the fact that you can build amazing UI and fancy animations. You also have the possibility to build an app that will run on different operating systems. The factor is commonly known as cross-platform. But apart from this why should you learn Flutter in 2023?

Fast Development with Flutter

Flutter provides a feature known as hot reload which helps you to quickly build and test your UI as well as fix some bugs related to them without having to re-run the whole app. Flutter framework automatically rebuilds the widget tree in order for you to quickly view the effects of any changes.

Native Performance

Flutter’s widgets provide most of the native components such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android.

Flutter, a Wonderful Documentation

Even if you are new to mobile development or not flutter offers highly detailed and comprehensive documentation to help developers or none developers acquire the knowledge needed to perform a particular task.

Ready-to-use tutorials

Truly if you are not still satisfied with the documentation you can go ahead and download tutorials on Udacity, Udemy or any other platform which offers complete mastery tools. These tutorials may help you polish up your skills since they usually contain practical projects.

Learn from Developers

Learning does not imply learning on your own. There are many developers with outstanding experience as well as forums such as Stack Overflow or GitHub forums to help. Just be humble to yourself and accept to receive and share knowledge with others.

Who is using Flutter?

I forget to mention it but Google is actually the one who is behind the Flutter framework and many companies around you may know actually use it. Some of those companies are

Google,
Groupon,
EMAAR,
UNbank,
Ebay,
Alibaba group,
CapitalOne
Tencent,
Square,
SONOS... and many other organizations

Some applications around us which are built using Flutter...

For example, we have,

Google Ads at the top of this list,
Insight Timer,
Abbey Road Studios,
Baidu,
ByteDance,
Hamilton,

Ahhh! I have just been talking about the positive aspects of Flutter. What about the drawbacks, Well Flutter has a handful number of disadvantages just as it has great abilities.

So what are its drawbacks? Let's flutter together today to expose them.

I hope you were able to learn something from this article and wish this article will help you understand more and choose the right technology that will help you to build awesome apps either with or without Flutter. Take your time to choose and then get started right away.

Want more? then you could check this detailed article about Flutter

WordPress, Yet Another CMS

Gun — Thu, 06 Apr 2023 14:17:06 +0000

Photo by Markus Winkler on Unsplash

I recently talked about WordPress.com and WordPress.org in my previous articles and actually I have been getting requests from people asking what WordPress actually is. Today you will finally feel relief cause I will give you a brief introduction to WordPress. So guys sit and get a cup of tea to savour this.
WordPress… just another CMS

WordPress is actually a free and open source Content Management System written in PHP and associated with MySQL or MariaDB databases. Initially, it was created as a blog publishing-System. But it has evolved to include different web content types (such as online stores, membership websites, forums, and media galleries…).
CMS… What is it?

Content System Management also known as CMS is simply an application that is used to manage web content. In general, it allows a contributor or contributors to create, edit, publish or destroy content(web pages, articles…). A contributor can be any person who has access to a WordPress Dashboard

WordPress is equally one of the most popular content system management used today. It has also been used for other application domains such as pervasive display systems.

The software was released under the GPLv2 license. Founded by an American developer Matt Mullenweg and Mike Little an English developer. WordPress is also called a factory that makes webpages. It comes along with many tools to ease management. Some of these tools include themes and plugins.

Below you will find a screenshot of a section of WordPress Dashboard

As you can see in the shot above, the WordPress Dashboard has many tools you can use to manage your web content. To have a better experience just install WordPress and take a look around. If you would like to set up WordPress on your own don’t worry here is a tutorial on how to install it locally.

To conclude, WordPress is an application used for building web platforms. Be it a blog, a website, or a portfolio, WordPress facilitates and eases your efforts to build such platforms. For example MangAnime tradnow and Learndevtools are two blogs which talks about anime and development build essentially with WordPress

Last but not least there exist different versions of WordPress. Some of us can use WordPress.com(Practically no coding). Then developers have the chance to get beautiful documentation in order to customize and bring in some innovations with WordPress.org.

I hope I was able to answer most of your questions guys. Feel free to ask more questions. I will be glad to understand and help you.

Medusa Vs Woocommerce: Comparing Two Open source Online Commerce Platforms

Gun — Mon, 20 Mar 2023 10:57:53 +0000

Introduction

Woocommerce is an open source, customizable ecommerce platform built on WordPress. Woocommerce offers features like flexible and secure payment and shipping integration. It is written in PHP which is a universal language that can be used to build complex applications.

On the other hand, Medusa is an open source composable commerce engine built with Node.Js. It offers out-of-the-box features like multi-currency support, plugin integration support, and tax configurations among many others. Besides these, Medusa is known for its Return Merchandise Authorization (RMA) flows and how it is fully customizable.

Through this article, you will learn why open source ecommerce tools are essential, how to choose a tool for your ecommerce, and the difference between Woocommerce and Medusa open source online commerce platforms per developer’s experience and the general ecommerce features they offer.

What is an Open Source Ecommerce Platform?

Open source refers to software that has its source code publicly accessible for anyone to see, modify, modify, contribute to, and distribute as they want. An open source ecommerce platform is software that gives you full access to the source code, allowing you to customize the ecommerce platform to meet your needs and equally giving you total control over your store.

What is Woocommerce?

Woocommerce is a WordPress plugin used to build an online store. Woocommerce's first version was launched in 2011 and became extremely popular. In 2014, the plugin hit 4 million downloads.

At the time of writing this article, Woocommerce has over 5 million active installations and 8.3k stars on GitHub. Woocommerce is a beginner-friendly tool, so you don’t need to be an expert developer to use it. Additionally, there are thousands of free and paid themes on Woocommerce.

Woocommerce's main aim is to enable you to create an online store with just a few clicks and start selling. Woocommerce runs under WordPress; after creating your Woocommerce account, you will create a WordPress account and give some permission to Woocommerce before building a store. You will need to set up a WordPress installation before setting up a Woocommerce store.

What is Medusa?

Medusa is a JavaScript-based open source tool for building online stores. Medusa was launched in 2021, aiming to provide a great experience to developers building an ecommerce platform, using NodeJs as an engine.

Although Medusa is newer than Woocommerce, it becomes increasingly popular each day as it’s being adopted by companies and individuals across the world. What attracts businesses and developers mostly is the customization ability Medusa offers.

Medusa also offers other out-of-the-box features like bulk export and import, creation and management of multiple sales channels, configuration and management of many regions on one platform, addition, customization, and sorting of products into collections, and many more.

Medusa is made up of 3 components:

The Medusa Server: It’s a headless backend built on Node.js and it's the main component that contains all the logic and data of the store.
The Admin Dashboard: The store operator uses this component to manage the store, i.e. add, remove and update products, and customize and manage the store settings.
The Storefront: Here, customers can view products and place orders. By default, Medusa offers 2 storefronts. One is built with NextJs and the other Gatsby, but you could build your own storefront using the Storefront REST APIs.

Medusa Vs Woocommerce

This section highlights the difference between Medusa and Woocommerce in terms of the general features both offer and the developer’s experience.

General Features Comparison

Payment Gateways

Woocomerce and Medusa allow both developers and businesses to integrate third-party payment solutions. Woocommerce has a variety of ready-made extensions to integrate payment. Most of these payment gateways support Stripe, Paypal, Verifone, Apple Pay, and Amazon Pay.

Developers can integrate payment methods in their Medusa store using payment providers such as Klarna, Paypal, and Stripe with existing plugins. However, as a developer, you could also create a plugin to integrate other payment methods.

Live-Chat Integrations

A live chat will help engage more visitors and increase customer satisfaction across many channels.

Woocommerce offers extensions like LiveChat that you can install and set up on your store. WordPress has many plugins for live chat Integration compatible with Woocommerce and some of them include LiveChat's WordPress Plugin, OLark WordPress Plugin, Tidio WordPress Plugin, Chatwoot, and WP Social Chat.

Medusa, on the other hand, offers many ways to integrate Live Chat with Tidio, Chatwoot, Zendesk, Hotspot, ChatBot, and many others. In addition, Medusa plugin systems make it easier to create plugins and integrate with these chat services.

Taxes

Woocommerce offers a simple way to manage taxes, but before configuring your tax, you need to enable taxes. You can choose to either include taxes in your product’s prices or charge taxes separately. You can set up taxes to be applied in a specific region.

Taxes are available out-of-the-box in Medusa. Like Woocommerce, you can manage taxes in specific regions as well as add multiple tax rates.

Medusa provides a Tax API to developers that allow them to further integrate third-party services.

RMA Flows

Woocommerce offers a powerful and reliable RMA tool for selling, managing, processing warranties, and handling return requests within your Woocommerce store. However, you need to download the Woocommerce Product RMA, install, activate and configure it. Unfortunately, this product is not free.

RMA Flows are available out-of-the-box in Medusa and customers can send requests to return items from an ecommerce store. The admin or store operator can manage the order status, shipping, and payment.

Shipping

Woocommerce allows you to set up shipping zones and add methods to those zones and rates to your shipping methods. Users can create as many zones as possible and add methods and rates.

Medusa allows developers to integrate third-party providers like WebShipping. Medusa has 4 components in its shipping architecture: fulfillment provider*,* shipping options, shipping methods, and shipping profiles which are the highest in the hierarchy of shipping. However, developers can equally create plugins to manage any shipping provider.

Admin Dashboard

Woocommerce does not have an admin dashboard on its own but rather uses the WordPress dashboard since it’s functionally built to use WordPress. When you install the plugin, the Woocommerce menu appears on the sidebar of the WordPress dashboard.

The dashboard is simple and allows you to manage products, orders, Extensions, Reports, and other features. You need to know how the WP admin dashboard works to use Woocommerce.

Medusa has a simple and fluent admin dashboard. The dashboard allows you to manage products, price listings, customers, regions, currencies, settings, and many other elements of your store.

Localization

Woocommerce does not offer localization options on its own. To localize your store, you need to install a plugin like PoEdit, Loco Translate, or MultilingualPress.

Currently, the localization feature is not also available out-of-the-box in Medusa. But it can be implemented using CMS plugins like Contentful.

Multi-currency Support

Unfortunately, multi-currency is not available out–of–the–box in Woocommerce. To set up multiple currencies in your online store, you need to purchase the Currency Converter Widget extension and set it up. There are other extensions like Woocommerce Multi-Currency or Multi-Currency Switcher which are also not free.

Medusa supports the multi-currency feature. A business can set up a region and choose specific regional settings such as currency. Additionally, the business can manage each region from one store, hence eliminating the need to create many stores or switch between them

Gift Cards

You can create and sell prepaid multipurpose gift cards to customers, which they can redeem at your store. Gift cards are not available out-of-the-box in Woocommerce. Some Woocommerce gift card extensions require at least version 3.9. of Woocommerce. They are not free of charge.

Gift cards are available in Medusa out-of-the-box. Merchants can specify multiple denominations and images. Customers can then purchase the gift cards as if they were buying a product. However, gift cards are not packaged and shipped like products. Customers can receive it in the form of a link or by email.

Reporting and Analytics

Woocommerce offers an analytical board where you can view your number of sales, net sales, number of orders, products sold as well as variation sold. You can compare your sales per date and even download your reports for further utilization.

Right now, Medusa does not provide any analytic module but developers can use third-party services to add analytical features. Fortunately, with the flexibility Medusa offers, developers can easily implement and integrate third-party services in their store.

Speed and Performance

The process of creating a store with Woocommerce is quite fast. With a few clicks, you will have your store set up and ready to sell. If you need to measure the speed and performance in terms of the tools used to build the frontend and backend, this will be different since Woocommerce is not a headless commerce. You can optimize the speed and performance of your store in various ways.

For example, if you decide to use a lighter framework or just pure CSS rather than using Bootstrap, the number of stylesheet files will considerably reduce, and the pages will load rapidly increasing user experience as well as some SEO factors hence improving the speed ad performance of your store

Medusa's headless architecture allows you to separate the backend from the frontend. This makes it faster and lighter compared to tightly coupled architecture. So you can decide to use a lighter framework or fewer resources for both your backend and frontend and this can greatly impact the speed and performance of your store.

In addition, you can set up your store following this quick guide and the process is fast since in just three steps, you will now have a complete commerce engine running. However, if you need advanced functionalities then you can check the complete Documentation

Developer’s Features Comparison

This section presents a brief comparison between Medusa and Woocommerce in terms of developer features

Documentation

Both Woocommerce and Medusa provide extensive documentation for both developers and business owners. Woocommerce codex provides a library of documentation and tutorials to set up, customize and expand your online store whereas Medusa has a detailed user guide to help you get started.

Community

Developers can contribute or report bugs on Woocommerce’s GitHub repository.

Medusa is an open source platform whose aim is to build a strong and collaborative relationship with the community. Both developers or tier persons can join the Discord server to stay up to date with current trends and request and receive help from the community members as well as the core Medusa team.

Developers can equally showcase their work, report bugs, propose fixes or contribute to issues to the Medusa platform on its GitHub repository. There are other channels like Twitter and LinkedIn that developers can join to bring their contribution or get help.

Installation and Time to Get Started

WooCommerce’s installation guide shows you a step-by-step process on how to install and set up your online store easily. To get started with Woocommerce, developers need to know PHP, HTML, CSS3, and WordPress. Non-developers can install WooCommerce via WordPress.com.

Medusa provides a quick guide that allows developers to create and manage their store in just 3 steps: Installing Medusa CLI with yarn or npm, creating a new Medusa project using the CLI, and starting the Medusa server.

In less than 4 steps, you will have a store set up with the features mentioned earlier. You’ll then need to set up the admin and storefront with Gatsby or NextJs to effectively manage your store. Medusa ecommerce store is written in Typescript and JavaScript essentially and uses SQLite as a database if no database engine is set up.

For production purposes, it’s recommended to install and configure a PostgreSQL database and Redis to handle events. The step-by-step process to install and manage these tools for various OS is included in the Medusa documentation.

Deployment and Upgrade

Since Woocommerce is built on top of WordPress, it’s recommended to deploy the online store on a WordPress deployment plan hence restricting deployment on any cloud hosting.

Woocommerce deals mostly with updates rather than upgrades. Before thinking of updating your Woocommerce store, it’s recommended to manually back up or automatically back up your store.

Unlike Woocommerce, Medusa can be deployed on any cloud hosting. In its documentation, you can find a straightforward guide on how to deploy on various platforms like Heruko, Digital Ocean, or Qovery.

Upgrading Medusa is quite simple; however, some versions may require you to run migration scripts or take additional actions. Fortunately, Medusa provides an upgrade guide with detailed steps to follow.

Customization

Woocommerce is not a headless architecture. Nevertheless, you can build a WooCommerce headless store on your own. This is not recommended, though, as Woocommerce is not designed for this purpose and it does not have the tools or features to build one.

The fact that Medusa has a headless architecture allows anyone to easily and freely customize their storefront. You can choose any framework or programming language to use on your frontend. This also applies to the admin dashboard. Creating custom features is like adding a JavaScript file that loads automatically into Medusa as soon as you run the server.

The backend uses an API so developers can extend these APIs to add third-party services and custom features.

Developer’s Level

You don’t need to be a developer to be able to set up a store with WordPress and Woocommerce. You can set up your online store with just a few clicks. However, if you need advanced features and more customization, then you may need to hire an experienced developer to build those features or make them by yourself.

Medusa has a simple and understandable architecture. As a developer, you just need knowledge of JavaScript/TypeScript and NodeJs. Both the Medusa storefront and admin dashboard are built with JavaScript Frameworks.

Due to the decoupled nature of Medusa, you can create the admin dashboard and storefront with any language or framework. All you need is to link the backend using REST API.

Summary of Medusa vs Woocommerce

Property	Medusa	Woocommerce
Language	TypeScript	PHP
API	REST API	REST API but you need to enable it in the Woocommerce settings
Stars on GitHub	https://github.com/medusajs/medusa	8.3k
License	https://github.com/medusajs/medusa/blob/master/LICENSE
Activity	Since 2021	Since 2011
Latest Release	1.7.5(5 days ago)	7.3.0(2 weeks ago)
Platform	-	WordPress
Mobile App	No	Yes
RMA Flows	Yes	Yes
Taxes	Yes	Yes
Localization	No	No
Multi-Region Support	Yes	Yes
Gift Cards	Yes	Yes
Headless Architecture	Yes	No
Customization	Highly Customizable	No

Conclusion

In this article, you learned the difference between Woocommerce and Medusa based on the features each ecommerce store offers and the developer’s experience. Choosing the best ecommerce platform is an important decision to reflect on because taking the wrong decision may greatly affect your business in the long run.

Woocommerce is easy to set up and can handle both smaller and bigger businesses. It is a good choice for non-developers and developers who know PHP and WordPress.

Medusa is a perfect choice for anyone aiming to build headless commerce. Medusa can equally manage both larger and smaller businesses. It’s a good choice for developers with great JS/TS skills, looking forward to building a NodeJs ecommerce Platform. If you want to design your storefront and admin dashboard then Medusa is also a good choice.

Fixing Your Software Documentation Problem in 2023

Gun — Mon, 20 Feb 2023 18:22:15 +0000

Software products are being built daily, and the necessity to create vital documentation has become a must. However, many product owners seem to neglect this issue. For instance, I recently worked on a React native project using a package. I faced difficulties with the mismanaged documentation because now I had a minimal idea about the recent upgrades, or previous bugs encountered. It took me days to figure out the correct configuration. To ease your documentation challenges, I’ll also introduce a software documentation tool in the blog so your efforts don’t get wasted.

Before heading to our main points, let’s define what documentation is:

Documentation is the act of communicating any material that describes, explains, instructs detailed information regarding an object, a system, or part of a system on how to assemble, build, maintain and use it.

Now you may ask, Why should I document my project?

Why is Documentation Necessary?

To Track Progress of Your Software Development Cycle

Be it your project or a team project, you need to provide enough documentation in such a way that even if you or one of your team members revisits the code after six months, you will still be able to understand what the function readNow() means.

Documenting your code is essential for you and equally for others. Not everyone knows what you have written, or the methodology you adopted. You might face similar issues. So, to avoid calling your colleague in the middle of the night and asking why he chose a particular code function, it is better to jot everything down so that others can use it as a reference. Another situation where documentation will pose a problem is when a developer builds a product for his client; later, if the product owner has to hire a new developer, the previous developer fails to provide code documentation. In this case, the new developer will either need to take a long period to walk around the code or rebuild some components or that were present but not documented.

We Need It!

Yes, we all need it. Even the client needs good documentation to use the product. Suppose you’re developing a product for a group of users in your company or external users. In that case, they need a document on installing, configuring, and using it if it’s a machine, software, framework, package. Another scenario where documentation is essential is when a product has undergone some changes. I mentioned a react native package earlier that was changed, but the documentation was not updated. Each time you modify your product, update the documentation.

Documentation is the reflection of your software product.

Getting Started with Project Documentation

Tip: the first step will be to start at the same time as your project starts. Poor documentation sometimes results due to deadlines, and at the same time, it’s time-consuming and too technical.

Time-consuming: Yes, documenting is not always easy, plus it takes time because each time you develop a feature, you will need to provide minor changes in the documentation describing what that feature does and how to use it.

It’s Technical: Let’s say you have a Technical Writer in your team who does the documenting task. If they are not developers themselves, it won’t be easy to grasp what the developers do and provide a good document.

In other words, if you are writing documentation:

You should start at the same time as you start your project.
You should think of how you will document.
Select a good documentation tool.
Provide multiple support.

And good documentation should provide:

A well-defined description of the product and each feature.
A preview so that a user can know what to expect.
Smooth navigation from one section of the documentation to another.

Documentation problems

You may have already identified many documentation problems if you read along attentively. Documentation is becoming a daily problem because:

Software updates are made monthly or weekly, and there is a need to update the documentation ASAP. Note that changing the documentation can create inconsistency and errors if not handled well. In this case, updating existing documentation is also a problem and should be done meticulously.
Documentations are often hard to read due to the absence of precise descriptions.
Writers assume knowledge that users often do not have. And end up skipping or failing to provide detailed steps.
Documentation sometimes becomes unavailable when needed (destruction of copies). There is a need to provide it somewhere that will always be available and in many spaces.
There is a need to review each part of the documentation in detail to detect any error.
It may be expensive and time-consuming.
Lack of appealing visuals and preview as well as ugly documentation visual.

Fixing Software Documentation Challenges with Docz

What exactly is Docz? Docz lets you create live-reloading quickly, SEO-friendly, production-ready documentation sites with MDX and customize the look, feel and behave when required by leveraging GatsbyJS and Gatsby theme shadowing.

We have pointed out many things that are becoming problems in the documentation domain, and Docz will eventually help you tackle most of these problems in the future.

It’s pretty simple:

There is Zero config, and it’s easy to learn: Avoid unnecessary build steps with confusing setups.
It’s Blazing fast: Built with performance in mind from the start.
It’s easy to customize: Create something that will be easy to use and customize.

MDX-based: Use the best standard for writing documentation.

Another essential factor to note while dealing with software is that a well-documented product adds value to software and increases its marketability, contributing to marketing metrics. A well-documented product will attract users. In the next section, we will discuss getting started with Docz.

How Do I Get Started with Docz?

If you are starting a new project, use the following create-docz-app command to create your project with Docz

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript

If you already have an existing project, then use

$ yarn add --dev docz@next # react react-dom#

# or

$ npm install --save-dev docz@next # react react-dom

Create a button.tsx in your component/button folder

import React from 'react'
import t from 'prop-types'
const Button = ({ children, type }) => (
 <button type={type}>
   {children}
 </button>
)
Button.propTypes = {
 /**
  * This is a pretty good description for this prop.
  * Button type.
  */
 type: t.oneOf(['button', 'submit', 'reset']),
}
Button.defaultProps = {
 type: 'button',
}
export default Button

Add a .mdx file in your component folder

---
name: Button
route: /
---
import { Playground, Props } from 'docz'
import Button from './Button'
# Button
<Props of={Button} />
## Basic usage
<Playground>
 <Button type="submit">Click me</Button>
 <Button>No, click me</Button>
</Playground>

Lastly, run yarn docz:dev and open your browser(localhost:3000) to see your documentation.

We have come to the end of our discussion regarding documentation. We covered what documentation is, why it’s essential, the various documentation problems and how to tackle them with a great open source tool called Docz. It is a powerful tool with zero configuration, easy customization, and even supports Typescript. If you want to learn more about Docz, visit docz.site.

You can read more about Docz on Aviyel.

What is Search Engine Optimization and how is it useful?

Gun — Mon, 20 Feb 2023 17:12:37 +0000

Nowadays internet users tend to grow as well as the demand for different kinds of resources. To respond to the need for these resources, website creators or developers create and add content to their websites to satisfy each user. But creating and adding content does not guarantee that the content will be readily available to users when they query the internet utilizing a search engine.

To overcome this problem search engines have introduced some parameters that will help both webmasters/developers and content writers to optimize their content for search engines to rank them while providing the best results to the users. Then What is Search Engine Optimization and how is that useful?

What is Search Engine Optimization?

SEO is a technique and practice of increasing the quantity and quality of traffic to a website through organic search engine results. These techniques can be classified into 2 types: On-page SEO and Off-page SEO.

On-page SEO

Focus on improving elements on your website to get higher rankings. The main elements are

HTML tags.
Image alt attribute.
The Content.
Keyword (primary and secondary).
Permalinks Structure.
Internal links.
Meta Description.
Last but not least Keyword density.

Off-page SEO

On the other hand we have Off-page techniques. These are techniques applied out of your pages to increase traffic on a website. Some of these techniques include

Using social media to boost traffic and
Using Backlinks (blogging and forum). Backlinks are simply links that come from some other site to your site. The greater the number of sites that are linked to your site the higher your rank on the search result page.
Link building

Equally, we distinguish 3 types of SEO practitioners: White hat SEO, Gray hat SEO and Black hat SEO. They are classified depending on the way(good and bad) they practice optimization. White is the best and black is the fraudulent way.

Examples of Search Engine Optimization Tools

We have an in-exhaustive list of SEO tools but will list some of the most used ones.

Google search console.
Yoast SEO.
Google Analytics.
Ahrefs.
Ubersuggest.
Answer the public.
and many others…

But why is Search Engine optimization useful?

First of all, with SEO you can bring super [organic traffic](https://medium.com/@gunkev/4-ways-to-increase-traffic-to-your-website-6e2ebf0a82f3) to your websites
Secondly, having great navigation around your website pages also gives you great credibility and builds a strong trusteeship with your users.
Optimizing your site from a user perspective also brings great user experiences thereby encouraging more users to come back.
It helps you have more visibility on your local and international competitors.
It creates job opportunities such as SEO specialists.
ROI.
SEO helps to predict user behaviour patterns based on user queries (keywords).

If you haven’t thought about optimizing your web content I encourage you to start doing it as soon as possible cause this may help you and have a great impact on your website

Should I use Yoast Free or Yoast Premium Version?

Gun — Mon, 20 Feb 2023 16:09:58 +0000

In a previous article, I talked about Yoast, defining what it was as well as listing some of its features. But if you would like to use Yoast to manage your content, have you already thought of which version to use? I mean will you use the Yoast free version or rather the premium version? Well, it may depend on many factors, the first being the different features each offer. In this article I will help you to answer the question– “Should I use Yoast free or Yoast Premium Version ?” for most of you who want to use Yoast SEO in order to optimize your content.

Here are some criteria to take into consideration while choosing the Yoast premium version or free version.

I will be using PV and FV in some sections to represent the Premium version and Free version respectively.

In the PV you have full access to academic courses so you have the possibility to get full access to their training and become an expert in SEO. Meanwhile the FV you have access to the free courses only.
In the premium version you have the possibility to find and add high-performing keywords while in the free version, you add them manually in your text.
You can add related keywords in the PV. Unfortunately, you can only add one keyword or key phrase in the FV.
PV word form recognition is available in many languages whereas in FV you are responsible for manually researching and improving your content.
Both of them can tell Google what your page is all about.

Automation, update and supports

PV automates your publishing flow, that is you can share your post to more than 2000 entities just by pushing on a button while in the free version sorry but you will have to manually share your posts.
In the PV, Yoast observes your important posts and pages and if necessary warns you if you haven’t updated for 6 months. You have to manually check your pages in FV in order to ensure that none is outdated.
You have the ability to preview what your pages look like on Google, Bing, Twitter and Facebook. Whereas in the FV you can only preview your pages on Bing and Google.
For the PV you can get suggestions for internal links that Yoast suggests you internal links you can add to your post. While the FV you have to look for related posts yourself and add them.
You have full support 24h/7 (1 year) in PV. No support in the FV but the team provides hundreds of articles to help you.
PV is ad-free. So you won’t see ads on your dashboard. FV contains ads.
Last but not least both work in the WordPress classical and block editor.

Now that you have an idea of what each version offers, it's up to you to identify your main objects in order to chose the right solution.

Reference yoast.com

If you love this content also check my article on how to bring more traffic to your website

DEV Community: Gun

How to Integrate YouTube Video Player in a Flutter Application

Objectives

Common Use Cases Where You Should Add YouTube Integration in Your Mobile App

Integrating Video Tutorials

Integrating in Movies Application

Informational oriented application

Monetization

Live Stream Events

Product Demonstrations

Travel

Fitness and Music

Integrating YouTube in a Flutter Application

Prerequisites

Creating a Flutter Application

Adding YouTube Package

Incorporating Features and Customizing YouTube Player

Show Video Progression Indicator

Progress Indicator Color

Setting FullScreen Mode

Adding Players Control

What’s Next

Conclusion

Resources

Opensea vs Blur: Which Platform Suits Your Needs?

OpenSea: The Gateway to NFTs

Key Features:

Pros:

Cons:

Blur: The Professional’s NFT Marketplace

Key Features:

Pros:

Cons:

Comparing OpenSea and Blur

For Beginners and Enthusiasts:

For Artists:

For Professional Traders and Investors:

Community vs. Trading Focus:

Conclusion

How to Build an Electronic Commerce Store with Medusajs

What Will You Learn?

What is Next.js?

What is Medusa?

Creating your Electronic Commerce Platform

Prerequisites

How to Set Up the Medusa Server for the Electronic Store

Styling the Electronic Commerce Storefront

Customizing the Storefront

Adding Products in the Electronic Commerce Store

Installing and Integrating a File Service Plugin (S3)

Add Products with Medusa Admin

Integration

Algolia Integration

Payment Integration with Stripe

Testing the Store

Conclusion

7 Useful Mobile Applications to Improve Your Productivity as a Developer

1. Code from Anywhere with Replit

2. Improve Your Productivity with Macrodroid

3. Test your APIs directly with Your Mobile Phone using API Tester

4. Share Your Thoughts Easily with Mindly

5. Avoid Painless Configurations with Expo Go

6. Stay up to date with DevBytes

7. Plan Easily with Planio

Conclusion

How to Localize Your Vue Application with Tolgee?

What is Tolgee?

What is Vue.js?

How to Integrate Tolgee into a Vue Application

Step 1: Install Tolgee

Step 2: Create a Project

Step 3: Generate API Key

Step 4: Add Tolgee to Your Vue application

Step 5: Install Tolgee Package

Step 6: Add Environment Variable:

Step 7: Initialize Tolgee

Step 8: Add Translations

Step 9: Create a Select Component

Step 10: Add Translation Keynames

What is Open Source Software? A Beginner’s Guide