راهنمای توسعه برنامه آموزشی – انجمن DEV

Summarize this content to 400 words in Persian Lang
دنیای آموزش به سرعت در حال تغییر است. بیشتر و بیشتر، مردم برای یادگیری چیزهای جدید به برنامه ها روی می آورند. این راهنما به شما کمک می کند تا نحوه ساخت یک برنامه آموزشی را درک کنید. ما همه چیز را از برنامه ریزی تا راه اندازی برنامه شما پوشش خواهیم داد. چه معلم، دانش آموز یا صاحب کسب و کار باشید، این راهنما چیزی برای شما دارد. ما به این خواهیم پرداخت که چه چیزی یک برنامه آموزشی خوب را می سازد و چگونه می توان آن را ساخت.

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

بازار اپلیکیشن آموزش آنلاین در سال 2024

بازار اپلیکیشن‌های یادگیری آنلاین در سال 2024 در حال رونق است. افراد بیشتری از هر زمان دیگری برای یادگیری مهارت‌های جدید، پیشرفت شغلی یا دنبال کردن علایق شخصی به پلتفرم‌های دیجیتال روی می‌آورند. این رشد در برخی اعداد کلیدی منعکس شده است که نشان می دهد این بازار چقدر بزرگ و مهم شده است.

انتظار می رود در سال 2024، بازار پلتفرم یادگیری آنلاین به درآمد خیره کننده 58.45 میلیارد دلاری برسد. این رقم بسیار بزرگی است و قرار است حتی بیشتر هم رشد کند. کارشناسان پیش بینی می کنند که تا سال 2029، تنها پنج سال دیگر، ارزش این بازار به 75.52 میلیارد دلار خواهد رسید. این بدان معناست که بازار هر سال با نرخ ثابت 5.26 درصد در حال رشد است.

اما موضوع فقط پول نیست. تعداد افرادی که از این برنامه ها استفاده می کنند نیز در حال افزایش است. در حال حاضر، حدود 13.5 درصد از مردم از پلتفرم های یادگیری آنلاین استفاده می کنند. پیش بینی می شود تا سال 2029 این رقم به 16.7 درصد افزایش یابد. این بدان معناست که افراد بیشتر و بیشتری در یادگیری از طریق برنامه ها ارزش پیدا می کنند.

چین در این انقلاب آموزش دیجیتال پیشرو است. انتظار می رود آنها در سال 2024 40.60 میلیارد دلار درآمد از طریق پلتفرم های یادگیری آنلاین ایجاد کنند. این بیشتر از هر کشور دیگری در جهان است. چین همچنین دارای بالاترین درصد افرادی است که از این برنامه ها استفاده می کنند، به طوری که 21.9٪ از جمعیت آنها با پلتفرم های یادگیری آنلاین درگیر هستند.

به طور متوسط، هر کاربر حدود 74.59 دلار برای این برنامه ها هزینه می کند. این نشان می دهد که مردم مایل به سرمایه گذاری در آموزش و رشد شخصی خود از طریق ابزارهای دیجیتال هستند.

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

ویژگی های ضروری یک برنامه آموزشی عالی

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

ابزارهای یادگیری مجازی بلادرنگ: درس‌های ویدیویی زنده، تخته‌های سفید تعاملی و اشتراک‌گذاری صفحه به معلمان و دانش‌آموزان اجازه می‌دهد تا در زمان واقعی با هم تعامل داشته باشند. این به کاربران یک تجربه کلاس مجازی می دهد، جایی که می توانند با یکدیگر همکاری کنند، سؤال بپرسند و بازخورد فوری دریافت کنند. ویژگی‌هایی مانند پیام‌رسانی هم‌زمان و اتاق‌های جداکننده نیز به دانش‌آموزان کمک می‌کند در فعالیت‌ها و بحث‌های گروهی شرکت کنند و یادگیری را تعاملی‌تر و جذاب‌تر می‌کنند.

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

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

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

نحوه ایجاد یک برنامه آموزشی با ZEGOCLOUD

ZEGOCLOUD ساخت برنامه های آموزشی قدرتمند را با تماس های ویدیویی و ابزارهای تعاملی آسان می کند. خدمات ما برای کلاس های درس مجازی طراحی شده اند و به توسعه دهندگان کمک می کنند تا راه حل های یادگیری آنلاین موثری را به سرعت ایجاد کنند. چه در حال ساختن یک برنامه برای تدریس خصوصی و چه در کلاس های زنده بزرگ باشید، ما شما را تحت پوشش قرار داده ایم.

ما ابزارهایی را برای ادغام تماس‌های ویدیویی با کیفیت بالا و تخته سفید مشترک در برنامه آموزشی شما ارائه می‌کنیم. این به معلمان و دانش آموزان همه چیزهایی را می دهد که برای یادگیری تعاملی و جذاب آنلاین نیاز دارند. در این بخش، از ZEGOCLOUD's Express Video و SuperBoard SDK برای افزودن تماس ویدیویی و ویژگی‌های تخته سفید قدرتمند به برنامه‌های آموزشی شما استفاده می‌کنیم.

ویژگی های کلیدی ZEGOCLOD:

ویدئو کنفرانس با کیفیت بالا: ZEGOCLOUD ویدیو و صدای شفافی را برای آموزش آنلاین روان ارائه می دهد. فناوری با تأخیر کم ما گفتگوهای طبیعی بین معلمان و دانش آموزان را تضمین می کند. می‌توانید میزبان چندین شرکت‌کننده باشید، و راه‌حل ما را برای جلسات آموزشی صمیمی یا کلاس‌های مجازی کامل عالی می‌کند.

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

اشتراک‌گذاری صفحه با حاشیه‌نویسی: با ویژگی قدرتمند اشتراک‌گذاری صفحه نمایش ZEGOCLOUD، معلمان می‌توانند نرم‌افزار را نشان دهند، مشکلات را حل کنند یا اسلایدهایی ارائه دهند. چیزی که ما را متمایز می کند، حاشیه نویسی در زمان واقعی در صفحه نمایش مشترک است. این به معلمان اجازه می دهد تا نکات کلیدی را برجسته کنند یا توضیحاتی را در لحظه اضافه کنند.

اتاق های منعطف: یادگیری در یک جلسه بزرگ می تواند دردناک باشد. به همین دلیل است که ما به معلمان اجازه می دهیم کلاس اصلی را برای بحث ها یا پروژه های متمرکز به گروه های کوچکتر تقسیم کنند. معلمان می توانند بین اتاق ها حرکت کنند، پیشرفت را زیر نظر داشته باشند و به همه اتاق ها پیام ارسال کنند.

پیش نیازها

قبل از شروع، بیایید مطمئن شویم همه چیزهایی را که نیاز دارید دارید:

برای یک حساب توسعه دهنده ZEGOCLOUD ثبت نام کنید.
AppID و URL سرور خود را از داشبورد مدیریت ZEGOCLOUD دریافت کنید.
Node.js را روی دستگاه خود نصب کنید.
مطمئن شوید که پروژه شما برای استفاده از npm برای مدیریت وابستگی تنظیم شده است.
دانش اولیه جاوا اسکریپت یا توسعه TypeScript.
یک مرورگر مدرن که از WebRTC پشتیبانی می کند.
مطمئن شوید که دستگاه شما به اینترنت متصل است.

1. یک پروژه جدید ایجاد کنید

قبل از ادغام قابلیت تماس ویدیویی و وایت برد، باید ساختار پروژه خود را تنظیم کنید.

یک پوشه پروژه با ساختار زیر ایجاد کنید:

project-folder/
├── index.html
├── index.js

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل های HTML و جاوا اسکریپت را اضافه کنید:

index.html شامل ساختار اصلی رابط تماس ویدیویی و تخته سفید خواهد بود.

index.js تمام منطق اولیه سازی و مدیریت SDK ها را حفظ می کند.

مثال: این کد در ما استفاده خواهد شد index.html برای ارائه رابط کاربری اولیه برای برنامه آموزشی خود با ادغام ویدئو و تخته سفید.

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Video Call & Whiteboard Integration

#video-container {
display: flex;
justify-content: space-between;
}
video {
width: 48%;
height: 300px;
background-color: #000;
}
#whiteboard-container {
margin-top: 20px;
width: 100%;
height: 500px;
border: 2px solid #000;
}

Video Call with Whiteboard
id=”video-container”>
id=”localVideo” autoplay muted>
id=”remoteVideo” autoplay>

id=”whiteboard-container”>

src=]]>”index.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. SDK های مورد نیاز را نصب کنید

SDK های لازم را هم برای تماس های ویدیویی و هم برای ویژگی های تخته سفید نصب کنید. از npm برای نصب استفاده کنید ZegoExpress و ZegoSuperBoard SDK ها

دستورات زیر را اجرا کنید:

npm i zego-express-engine-webrtc
npm i zego-superboard-web

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر در macOS یا Linux با خطاهای مجوز مواجه شدید، از sudo استفاده کنید:

sudo npm i zego-express-engine-webrtc
sudo npm i zego-superboard-web

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. SDK ها را وارد کنید

در شما index.js فایل، هم موتور Zego Express (برای تماس های ویدیویی) و هم Zego SuperBoard (برای عملکرد تخته سفید) را وارد کنید:

import { ZegoExpressEngine } from ‘zego-express-engine-webrtc’;
import { ZegoSuperBoardManager } from ‘zego-superboard-web’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یا اگر در یک محیط غیر ماژول کار می کنید، می توانید از نیاز استفاده کنید:

const ZegoExpressEngine = require(‘zego-express-engine-webrtc’).ZegoExpressEngine;
const ZegoSuperBoardManager = require(‘zego-superboard-web’).ZegoSuperBoardManager;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. SDK ها را راه اندازی کنید

باید هم Zego Express SDK را برای تماس‌های ویدیویی و هم SuperBoard SDK را برای تخته‌های سفید مقداردهی کنید.

4.1 راه اندازی موتور Zego Express (ویدئو)

برای مقداردهی اولیه موتور اکسپرس Zego، یک نمونه با عبور دادن در خود ایجاد کنید AppID و Server URL، که می توانید آن را از کنسول مدیریت ZEGOCLOUD دریافت کنید.

const appID = 123456789; // Replace with your actual AppID
const server = ‘wss://your-server-url’; // Replace with your actual server URL

// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4.2 راه اندازی Zego SuperBoard SDK (Whiteboard)

برای مقداردهی اولیه SuperBoard، متد getInstance را فراخوانی کنید و از متد init برای مقداردهی اولیه آن استفاده کنید.

// Initialize the SuperBoard SDK
const zegoSuperBoard = ZegoSuperBoardManager.getInstance();
const result = await zegoSuperBoard.init(zg, {
parentDomID: ‘whiteboard-container’, // ID of the parent container
appID: appID,
userID: ‘your_user_id’, // Replace with your User ID
token: ‘your_token_here’ // Replace with your Token
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قبل از فراخوانی این روش اولیه، اطمینان حاصل کنید که Zego Express SDK مقداردهی اولیه شده است.

5. منطق تماس ویدیویی را تنظیم کنید

برای فعال کردن تماس‌های ویدیویی، باید منطق پخش‌های محلی و از راه دور را تنظیم کنید.

const localVideo = document.getElementById(‘localVideo’);
const remoteVideo = document.getElementById(‘remoteVideo’);

async function startVideoCall() {
try {
const userID = ‘user_’ + new Date().getTime();
const token = ‘your_token_here’; // Replace with your token

// Log in to the room
await zg.loginRoom(‘demo-room’, token, { userID, userName: userID });

// Create and play the local video stream
const localStream = await zg.createStream();
localVideo.srcObject = localStream;

// Publish the local stream
zg.startPublishingStream(‘streamID’, localStream);

// Listen for remote stream updates
zg.on(‘roomStreamUpdate’, async (roomID, updateType, streamList) => {
if (updateType === ‘ADD’) {
const remoteStream = await zg.startPlayingStream(streamList[0].streamID);
remoteVideo.srcObject = remoteStream;
}
});
} catch (err) {
console.error(‘Error starting video call:’, err);
}
}

// Start video call
startVideoCall();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. تخته سفید را تنظیم کنید

هنگامی که کاربر وارد اتاق شد و پخش جریانی ویدیو فعال شد، عملکرد تخته سفید را تنظیم کنید.

async function createWhiteboard() {
try {
const whiteboard = await zegoSuperBoard.createWhiteboardView({
name: ‘Class Whiteboard’, // Whiteboard name
perPageWidth: 1600, // Width of each page
perPageHeight: 900, // Height of each page
pageCount: 1 // Number of pages
});
} catch (err) {
console.error(‘Error creating whiteboard:’, err);
}
}

// Initialize whiteboard after login
createWhiteboard();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

7. رویدادهای تخته سفید را مدیریت کنید

می توانید به رویدادهایی مانند زمانی که تخته سفید به روز می شود یا زمانی که شخصی تخته سفید جدیدی اضافه می کند گوش دهید. این تماس‌ها به شما کمک می‌کنند تخته سفید را در بین همه شرکت‌کنندگان همگام نگه دارید.

zegoSuperBoard.on(‘remoteSuperBoardSubViewAdded’, function(uniqueID) {
console.log(‘A new whiteboard was added:’, uniqueID);
});

zegoSuperBoard.on(‘remoteSuperBoardSubViewRemoved’, function(uniqueID) {
console.log(‘A whiteboard was removed:’, uniqueID);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. از سیستم خارج شوید و پاکسازی کنید

پس از پایان جلسه، مطمئن شوید که از اتاق خارج شده‌اید و منابع را با حذف اولیه از SDKها پاکسازی کنید.

// Leave the room
zg.logoutRoom(‘demo-room’);

// Deinitialize the whiteboard SDK
zegoSuperBoard.unInit();

// Destroy the Zego Express Engine
zg.destroyEngine();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای اطلاعات بیشتر، پلتفرم‌های پشتیبانی‌شده، نمونه‌های کد و بهبود ویژگی‌ها، لطفاً به مستندات SDK و API دقیق ما مراجعه کنید.

نتیجه گیری

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

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

project-folder/
├── index.html
├── index.js

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">