آموزش کامل نحوه افزودن کد Qr به وب سایت

کدهای QR دو دهه است که وجود دارند، اما هرگز به یک ابزار اصلی تبدیل نشده اند. با شیوع همه‌گیری کرونا در سال 2020، کدهای QR در کانون توجه قرار گرفتند. صاحبان برند و بازاریابان تمایل دارند از کدهای QR به عنوان یک راه حل بدون تماس استفاده کنند. از افزودن کدهای Qr بر روی بسته بندی محصول گرفته تا جایگزینی منوهای فیزیکی با کدهای QR، این کدهای اسکن در همه جا به خصوص در وب سایت ها وجود دارند. چیزی که به عنوان یک روش بدون تماس برای ارائه اطلاعات آغاز شد، برای اکثر برندها به یک کانال ارتباطی مستقیم با مصرف کننده تبدیل شده است.

اما کدهای Qr اغلب با تهدیدات امنیتی مرتبط هستند. برای کمک به شما در انتخاب ایمن ترین و بهترین تولید کننده کد Qr برای استفاده و افزودن این ویژگی به وب سایت خود، افزونه وردپرس Qr code و نحوه ایجاد کد Qr با استفاده از Vue js و Quasar را به شما آموزش می دهیم.

Master QR – تولید کننده کد QR برای وردپرس

این افزونه زمانی که یک مقاله/صفحه/پست سفارشی را منتشر می کنید به طور خودکار یک کد QR تولید می کند. کاربران می توانند با افزودن این کدهای Qr به تلفن های هوشمند خود و اسکن آنها به لینک وب سایت مورد نظر مراجعه کنند. هر کد QR تولید شده منحصر به فرد است.

کاربر می تواند هر نوع پستی را از صفحه تنظیمات کد Qr حذف کند، اگر می خواهید یک یا چند پست، صفحه یا محصول را ببندید، می توانید آن را به راحتی از تنظیمات متا باکس انجام دهید.

ویژگی های نسخه رایگان

• کد Qr را برای انواع پست وب سایت اضافه کنید: پست، صفحه، محصول، پست سفارشی
• یک کد QR زیبا DotScale
• شما به راحتی می توانید اندازه کد QR را تغییر دهید
• می توانید محدوده DotScale را سفارشی کنید
• تراز QR صحیح
• پشتیبانی از جعبه متا

ویژگی های نسخه پریمیوم

در نسخه پریمیوم، از مزایای چاپ دسته ای برخوردار خواهید شد و می توانید از کد کوتاه و ویجت داخلی برای ایجاد لینک های سفارشی، URL های صفحه فعلی، دسترسی WiFi، مکان نقشه گوگل، شماره تلفن، چت های WhatsApp استفاده کنید. برای کاربران Elementor، افزونه Master QR را در پنل ویرایش اصلی پیدا خواهید کرد و به راحتی می توانید با چندین گزینه از آن استفاده کنید.

کد Qr را می توان برای موارد زیر ایجاد کرد:

آدرس صفحه فعلی: یک صفحه QR عالی برای نمایش لینک سایت قدرتمند شما در سبک های مختلف با استفاده از لوگو، رنگ نقطه و تصویر یا رنگ پس زمینه. شما گزینه های طراحی منحصر به فرد قدرتمندی را خواهید یافت تا آنها را به راحتی متمایز کنید.

متن، شماره، پیوند QR سفارشی: با افزودن این کد Qr قدرتمند به وب سایت خود، اطلاعات متنی زیبا، شماره تلفن، لینک های سفارشی ایجاد کنید و با استفاده از ویژگی های داخلی آنها را پویا کنید.

مکان گوگل: یک کد QR برای نمایش سایت یا موقعیت مکانی شما فوق العاده قدرتمند است. گوگل ترکیب خوبی از طول، عرض جغرافیایی و تصویر را ارائه می دهد. می توانید با استفاده از توابع موقعیت یابی داخلی و افست، یک طرح i-candy wrap ایجاد کنید.

چت واتساپ: WhatsApp Chat QR یک QR اساسی برای دسترسی به چت های کاربر، پیام ها و سایر اطلاعات پیشرفته است. با گزینه های سفارشی سازی شگفت انگیز مطابق با نیازهای شما همراه است.

دسترسی WIFI: WiFi را وصل کنید و دسترسی را از طریق WiFi QR به اشتراک بگذارید. این کدها را با استفاده از تنظیمات داخلی و توابع موقعیت یابی جدا کنید.

پست الکترونیک: بازدیدکنندگان می توانند به راحتی آدرس ایمیل خود را از طریق ایمیل QR دریافت کنند. با بازدیدکنندگان و مشتریان خود ارتباط برقرار کنید و با استفاده از یک تولید کننده ایمیل QR اطلاعات را با هم به اشتراک بگذارید.

چگونه با Vue JS و Quasar یک Qr-code بسازیم؟

Vue JS یکی از محبوب‌ترین فریم ورک‌های جاوا اسکریپت جلویی امروزی است که توسط Evan You در فوریه ۲۰۱۴ ایجاد شد و در طول سال‌ها محبوبیت آن افزایش یافت. آخرین نسخه آن Vue 3 است.

می توانید Vue CLI را با دستورات زیر نصب کنید:

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Quasar Framework چیست؟

Quasar Framework یک فریم ورک Vue JS است که به شما امکان می دهد برنامه های Vue JS را با سهولت و سادگی توسعه دهید، اجزا و بسیاری ویژگی های دیگر را برای توسعه SPA (برنامه تک صفحه ای)، PWA (برنامه وب پیشرو)، BEX (پسوند مرورگر) و SSR ( برنامه ارائه شده از سمت سرور). این باعث می شود که برنامه موبایل هیبریدی، برنامه دسکتاپ چند پلتفرمی و هر چیز دیگری که می خواهید در دسترس شما باشد.

Quasar CLI را می توان با دستورات زیر نصب کرد:

yarn global add @quasar/cli
# or
npm install -g @quasar/cli

پس از نصب Vue CLI و Quasar CLI، به مرحله بعدی می رویم تا کد Qr را به وب سایت خود اضافه کنیم:

یک برنامه Quasar جدید ایجاد کنید

ما با رفتن به مکان مورد نظر خود و راه اندازی آن، یک برنامه Quasar جدید ایجاد می کنیم:

quasar create qr-generator

ممکن است کمی طول بکشد، اما پس از اتمام، پوشه qr-generator جدید ایجاد شده را در IDE مورد علاقه خود باز کنید، ما از Visual Studio Code استفاده می کنیم.

شما باید یک ساختار فایل مانند این را ببینید:

اکنون برنامه را با باز کردن ترمینال خود در محل پوشه qr-generator و تایپ کردن برنامه شروع می کنیم:

quasar dev

اکنون باید صفحه اصلی مانند این را ببینیم:

اکنون که یک برنامه جدید Quasar ایجاد کرده ایم، زمان آن رسیده است که به کدنویسی بپردازیم.

اولین کاری که انجام می دهیم این است که به پوشه pages رفته و Index.vue را باز کنیم، باید کد زیر را ببینیم:

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="
      style="width: 200px; height: 200px"
    >
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex'
})
</script>

تصویر را حذف می کنیم و یک فیلد ورودی و یک دکمه اضافه می کنیم که مدل های v را به هم متصل می کند تا یک اتصال دو طرفه برای ورودی ایجاد شود:

<template>
  <q-page>

     <q-input v-model="qrLink" label="Input value to generate" />
     <br/>
     <q-btn color="primary" label="Generate QR Code" />

      <canvas id="qr-code">

    </canvas>

  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex',
  data(){
    return{
      qrLink: ''
    }
  },
  methods: {

  }
})
</script>

اکنون یک تابع در متدها ایجاد می کنیم که به ما امکان می دهد کد Qr را تولید کنیم، اما ابتدا آزمایش می کنیم که کار می کند:

methods: {
    generateQrCode: function(){
      console.log('generated code')
    }
  }

سپس تابع را با @click به دکمه متصل می کنیم.

<q-btn color="primary" label="Generate QR Code" 
     @click="generateQrCode"
     />

وقتی روی دکمه کلیک می کنیم و کنسول خود را بررسی می کنیم، باید پیام کد تولید شده را ببینیم.

اکنون باید یک کد QR ایجاد کنیم، برای این کار باید یک کتابخانه به نام QRious نصب کنیم:

$ npm install --save qrious
# OR:
$ yarn add qrious

سپس آن را وارد کنید:

import QRious from "qrious";

بعد، باید یک چک به فیلد ورودی اضافه کنیم:

<q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="((val) => !!val || 'Link field cannot be empty')"
    />

سپس، در تابع geneQrCode، اعتبار و کد را برای تولید خود Qr-code اضافه می کنیم:

generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "n") {
        new QRious({
                level: "H",
                padding: 25,
                size: 300,
                element: document.getElementById("qr-code"),
                value: this.qrLink,
              });
      }
    }

کد باید به صورت زیر باشد:

<template>
  <q-page>
    <q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="((val) => !!val || 'Link field cannot be empty')"
    />
    <br />
    <q-btn color="primary" label="Generate QR Code" @click="generateQrCode" />

    <canvas id="qr-code"></canvas>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import QRious from "qrious";

export default defineComponent({
  name: "PageIndex",
  data() {
    return {
      qrLink: "",
    };
  },
  methods: {
    generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "n") {
        new QRious({
          level: "H",
          padding: 25,
          size: 300,
          element: document.getElementById("qr-code"),
          value: this.qrLink,
        });
      }
    },
  },
});
</script>

ما تولید کننده کد Qr خود را ایجاد کرده ایم و افزودن این قابلیت به وب سایت مزایای زیادی برای کسب و کار ما به همراه دارد.

منابع: dev.to و wordpress.org