অ্যাঙ্গুলারজেএস সহযোগিতা বোর্ড সকেট.ইও এর সাথে

লেখক: Peter Berry
সৃষ্টির তারিখ: 14 জুলাই 2021
আপডেটের তারিখ: 13 মে 2024
Anonim
NodeJS এবং AngularJS দ্বারা চালিত 3d ওয়েব
ভিডিও: NodeJS এবং AngularJS দ্বারা চালিত 3d ওয়েব

কন্টেন্ট

  • জ্ঞান প্রয়োজন: মধ্যবর্তী জাভাস্ক্রিপ্ট
  • প্রয়োজনীয়: নোড.জেএস, এনপিএম
  • প্রকল্পের সময়: ২ ঘন্টা

অ্যাঙ্গুলারজেএস ব্রাউজারে সমৃদ্ধ ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন তৈরি করার জন্য বিশেষভাবে উপযুক্ত এবং আপনি যখন মিশ্রণে সামান্য সকেট.ইও যুক্ত করেন, জিনিসগুলি সত্যিই আকর্ষণীয় হয়ে ওঠে। এই নিবন্ধে আমরা একটি রিয়েল-টাইম সহযোগিতা বোর্ড তৈরি করতে যাচ্ছি যা ক্লায়েন্ট-সাইড অ্যাপ্লিকেশনের জন্য AngularJS এবং সমস্ত সংযুক্ত ক্লায়েন্টের মধ্যে রাষ্ট্র ভাগ করে নেওয়ার জন্য Socket.io ব্যবহার করে।

আসুন আমরা শুরু করার আগে কিছুটা বাড়ির রক্ষণাবেক্ষণ করি। আমি অনুমান করতে যাচ্ছি যে এইচটিএমএল এবং জাভাস্ক্রিপ্টের আপনার কাছে মৌলিক উপলব্ধি আছে কারণ আমি কোডের প্রতিটি ছোট্ট কোণটি coverেকে রাখছি না। উদাহরণস্বরূপ, কোনও নতুন তথ্য নেই বলে আমি এইচটিএমএল ফাইলের মাথায় অন্তর্ভুক্ত থাকা সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি কল করতে যাচ্ছি না।

এছাড়াও, আমি আপনাকে অনুসরণ করতে আমার গিটহাব অ্যাকাউন্ট থেকে কোড ধরতে উত্সাহিত করি। আমার ভাল বন্ধু ব্রায়ান ফোর্ডের একটি দুর্দান্ত সকেট.আইও বীজ রয়েছে, যা আমি আমার মূল ধারণাগুলির উপর ভিত্তি করে তৈরি করেছি।

সহযোগিতা বোর্ডে আমরা যে চারটি প্রধান বৈশিষ্ট্য চাই তা হ'ল নোট তৈরি করা, নোটগুলি পড়তে, একটি নোট আপডেট করতে, একটি নোট মুছতে এবং মজাদার জন্য বোর্ডে একটি নোট সরানো। হ্যাঁ, এটি সঠিক, আমরা মানক CRUD বৈশিষ্ট্যগুলিতে ফোকাস করছি। আমি বিশ্বাস করি যে এই মৌলিক বৈশিষ্ট্যগুলিতে মনোনিবেশ করার মাধ্যমে, নিদর্শনগুলি উত্থাপিত হওয়ার জন্য আমরা পর্যাপ্ত কোডটি আবরণ করব যাতে আপনি সেগুলি নিতে এবং এটিকে অন্য কোথাও প্রয়োগ করতে পারেন।


01. সার্ভার

আমরা নোড.জেএস সার্ভারটি প্রথমে শুরু করব যেহেতু এটি ভিত্তি হিসাবে কাজ করবে যা আমরা অন্য সব কিছু তৈরি করতে যাচ্ছি।

আমরা এক্সপ্রেস এবং সকেট.ইও দিয়ে একটি নোড.জেএস সার্ভার তৈরি করতে যাচ্ছি। আমরা এক্সপ্রেসটি ব্যবহার করার কারণটি হ'ল এটি Node.js এর মধ্যে স্থির সম্পদ সার্ভার স্থাপনের জন্য একটি দুর্দান্ত প্রক্রিয়া সরবরাহ করে provides এক্সপ্রেস সত্যিই দুর্দান্ত কিছু বৈশিষ্ট্য নিয়ে আসে তবে এই ক্ষেত্রে, আমরা অ্যাপ্লিকেশনটিকে সার্ভার এবং ক্লায়েন্টের মধ্যে পরিষ্কারভাবে দ্বিখণ্ডিত করতে ব্যবহার করতে যাচ্ছি।

(আপনি নোড.জেএস এবং এনপিএম ইনস্টল করেছেন এই ধারণার আওতায় আমি কাজ করছি। একটি দ্রুত গুগল অনুসন্ধান আপনাকে না দেখায় কীভাবে এগুলি ইনস্টল করা যায় তা আপনাকে দেখায়))

02. খালি হাড়

সুতরাং সার্ভারের খালি হাড়গুলি তৈরি করতে, আমাদের উঠে দৌড়াতে কয়েকটি জিনিস করা দরকার।

// app.js

// এ .১
var এক্সপ্রেস = প্রয়োজন (‘এক্সপ্রেস’),
অ্যাপ = এক্সপ্রেস ();
সার্ভার = প্রয়োজন (‘HTTP’) create
io = আবশ্যক (’সকেট.ইও’)। শোনো (সার্ভার);

// এ .২
app.configure (ফাংশন () {
অ্যাপ.উইস (এক্সপ্রেস.স্ট্যাটিক (__ dirname + ’/ সার্বজনিক’));
});

// এ .৩
সার্ভার.লিস্টেন (1337);


A.1 আমরা আমাদের নোড.জেএস মডিউলগুলি ঘোষণা এবং তাত্ক্ষণিকভাবে নিচ্ছি যাতে আমরা সেগুলি আমাদের প্রয়োগে ব্যবহার করতে পারি। আমরা এক্সপ্রেস ঘোষণা করছি, এক্সপ্রেস ইনস্ট্যান্টিয়েট করছি এবং তারপরে একটি এইচটিটিপি সার্ভার তৈরি করব এবং এতে এক্সপ্রেস উদাহরণটি প্রেরণ করব। এবং সেখান থেকে আমরা সকেট.আইটি ইনস্ট্যান্ট করছি এবং এটি আমাদের সার্ভারের নজরে নজর রাখতে বলছি।

A.2 আমরা এর পরে ফাইলগুলি পরিবেশন করতে আমাদের সার্বজনীন ডিরেক্টরিটি ব্যবহার করতে আমাদের এক্সপ্রেস অ্যাপ্লিকেশনটিকে বলছি।

A.3 আমরা সার্ভারটি শুরু করি এবং এটি বন্দরে শুনতে বলি 1337.

এখনও পর্যন্ত এটি বেশ বেদনাদায়ক এবং দ্রুত হয়েছে। আমি বিশ্বাস করি যে কোডটিতে আমরা 10 টিরও কম লাইনে আছি এবং ইতিমধ্যে আমাদের একটি কার্যকরী নোড.জেএস সার্ভার রয়েছে। সামনে!

03. আপনার নির্ভরতা ঘোষণা করুন

// প্যাকেজ.জসন
{
"নাম": "কৌণিক-কোলাব বোর্ড",
"বিবরণ": "কৌণিক জেএস সহযোগিতা বোর্ড",
"সংস্করণ": "0.0.1-1",
"ব্যক্তিগত": সত্য,
"নির্ভরতা": {
"এক্সপ্রেস": "৩.x",
"সকেট.আইও": "0.9.x"
}
}

এনপিএম-এর অন্যতম বিশেষ বৈশিষ্ট্য হ'ল একটিতে আপনার নির্ভরতা ঘোষণা করার ক্ষমতা প্যাকেজ.জসন ফাইল করুন এবং তারপরে স্বয়ংক্রিয়ভাবে এগুলি ইনস্টল করুন এনপিএম ইনস্টল কমান্ড লাইনে।


04. ওয়্যার আপ সকেট.আইও

আমরা অ্যাপ্লিকেশনটিতে আমাদের মূল বৈশিষ্ট্যগুলি ইতিমধ্যে সংজ্ঞায়িত করেছি এবং সুতরাং প্রতিটি ক্রিয়াকলাপের জন্য ইভেন্টটি পরিচালনা করতে আমাদের सॉকেট.ইও ইভেন্ট শ্রোতা এবং একটি উপযুক্ত ক্লোজার স্থাপন করতে হবে।

নীচের কোডটিতে আপনি লক্ষ্য করবেন যে এটি মূলত ইভেন্ট শ্রোতা এবং কলব্যাকগুলির একটি কনফিগারেশন। প্রথম ঘটনাটি হ'ল সংযোগ ইভেন্ট, যা আমরা আমাদের অন্যান্য ইভেন্টগুলিকে বন্ধ করার জন্য ব্যবহার করি।

io.sockets.on (‘সংযোগ’, ফাংশন (সকেট) {
socket.on (‘createNote’, ফাংশন (ডেটা) {
সকেট.বরোডকাস্ট.ইমিট (‘অনটোট তৈরি করা’, তথ্য);
});

সকেট.অন ('আপডেট নোট', ফাংশন (ডেটা) {
সকেট.বরোডকাস্ট.ইমিট (‘অনটোটাইপেটেড’, ডেটা);
});

সকেট.অন ('মুছে ফেলা নোট', ফাংশন (ডেটা) {
সকেট.বরোডকাস্ট.ইমিট (‘অনটোট ডিলিটেড’, ডেটা);
});

সকেট.অন ('মুভনোট', ফাংশন (ডেটা) {
সকেট.বরোডকাস্ট.ইমিট (‘অনটোট মোভড’, ডেটা);
});
});

এখান থেকে আমরা শ্রোতাদের সাথে যুক্ত করি createNote, আপডেটনোট, মুছে ফেলুন এবং মুভনোট। এবং কলব্যাক ফাংশনে, আমরা কেবল কী ইভেন্টটি ঘটেছে তা সম্প্রচারিত করছি যাতে কোনও ক্লায়েন্ট শ্রবণ করেই ঘটনাটি ঘটেছিল তা অবহিত করা যায়।

পৃথক ইভেন্ট হ্যান্ডলারগুলিতে কলব্যাক ফাংশনগুলি সম্পর্কে উল্লেখ করার মতো কয়েকটি জিনিস রয়েছে। এক, আপনি যদি অন্য সবার কাছে কোনও ইভেন্ট পাঠাতে চান তবে ক্লায়েন্টটি যে ইভেন্টটি আপনি sertোকালেন তা নির্গত করে সম্প্রচার পূর্বে নির্গমন ফাংশন কল। দ্বিতীয়ত, আমরা কেবল আগ্রহী পক্ষগুলিতে ইভেন্টটির পেডলোডটি প্রেরণ করছি যাতে তারা এটি কীভাবে উপযুক্ত দেখায় এটি প্রক্রিয়া করতে পারে।

05. আপনার ইঞ্জিনগুলি শুরু করুন!

এখন আমরা আমাদের নির্ভরতাগুলি সংজ্ঞায়িত করেছি এবং এক্সপ্রেস এবং সকেট.ইও শক্তিগুলির সাথে আমাদের নোড.জেএস অ্যাপ্লিকেশন সেট আপ করেছি, নোড.জেএস সার্ভারটি আরম্ভ করা বেশ সহজ।

প্রথমে আপনি আপনার নোড.জেএস নির্ভরতা ইনস্টল করুন:

এনপিএম ইনস্টল

এবং তারপরে আপনি সার্ভারটি এভাবে শুরু করুন:

নোড app.js

এবং তারপর! আপনি আপনার ব্রাউজারে এই ঠিকানায় যান। বাম!

06. এগিয়ে যাওয়ার আগে কয়েকটি স্পষ্ট ধারণা

আমি মূলত একটি ফ্রন্টএন্ড বিকাশকারী এবং আমার অ্যাপ্লিকেশনটিতে একটি নোড.জেএস সার্ভার হুক করে আমাকে প্রাথমিকভাবে কিছুটা ভয় দেখানো হয়েছিল। অ্যাঙ্গুলারজেএস অংশটি কি একটি স্ন্যাপ তবে সার্ভারের পাশের জাভাস্ক্রিপ্ট ছিল? একটি হরর ফ্লিক থেকে ক্রাইপি সংগীত সারি করুন।

তবে, আমি মাত্র কয়েক লাইনের কোডগুলিতে একটি স্ট্যাটিক ওয়েব সার্ভার স্থাপন করতে পারলাম এবং আরও কয়েকটি লাইনে ব্রাউজারগুলির মধ্যে থাকা সমস্ত ইভেন্টগুলি পরিচালনা করতে সকেট.আইও ব্যবহার করতে পারার জন্য আমি একেবারে মেঝেতে ছিলাম। এবং এটি এখনও ঠিক জাভাস্ক্রিপ্ট ছিল! সময়োপযোগীতার জন্য, আমরা কেবল কয়েকটি বৈশিষ্ট্য আবরণ করছি, তবে আমি আশা করি যে এটি নিবন্ধের শেষে আপনি দেখতে পাবেন যে এটি সাঁতার কাটা সহজ - এবং পুলটির গভীর প্রান্তটি এত ভীতিকর নয়।

07. ক্লায়েন্ট

এখন আমাদের সার্ভারের সাথে আমাদের দৃ foundation় ভিত্তি রয়েছে, আসুন আমার প্রিয় অংশটি - ক্লায়েন্ট! আমরা টানাযোগ্য অংশের জন্য অ্যাংুলারজেএস, jQueryUI এবং স্টাইল বেসের জন্য টুইটার বুটস্ট্র্যাপ ব্যবহার করতে যাচ্ছি।

08. খালি হাড়

ব্যক্তিগত পছন্দের বিষয় হিসাবে, যখন আমি একটি নতুন অ্যাঙ্গুলার জেএস অ্যাপ্লিকেশন শুরু করি তখন আমি দ্রুততম ন্যূনতম সংজ্ঞা দিতে চাই যা আমি জানি যে আমি শুরু করতে হবে এবং তারপরে যত তাড়াতাড়ি সম্ভব তার উপর পুনরাবৃত্তি শুরু করব।

প্রতিটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশনটিতে কমপক্ষে একটি নিয়ামক উপস্থিত থাকার সাথে বুটস্ট্র্যাপ করা প্রয়োজন এবং তাই সাধারণত আমি এখানেই শুরু করি।

অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে বুটস্ট্র্যাপ করার জন্য আপনাকে কেবল যুক্ত করতে হবে এনজি-অ্যাপ্লিকেশন এইচটিএমএল নোডে আপনি অ্যাপ্লিকেশনটি লাইভ করতে চান to বেশিরভাগ সময়, এটি এইচটিএমএল ট্যাগে যুক্ত করা পুরোপুরি গ্রহণযোগ্য হতে চলেছে। আমি এতে একটি বৈশিষ্ট্যও যুক্ত করেছি এনজি-অ্যাপ্লিকেশন এটি ব্যবহার করতে চাই যে আমি এটি ব্যবহার করতে চাই অ্যাপ্লিকেশন মডিউল, যা আমি কেবল একটি মুহুর্তে সংজ্ঞায়িত করব।

// সর্বজনীন / সূচক। html
html ng-app = "app">

আমি জানি আমার কমপক্ষে একজন নিয়ামক প্রয়োজন এবং তাই আমি এটি ব্যবহার করে কল করব এনজি-নিয়ামক এবং এটিকে একটি সম্পত্তি বরাদ্দ করা মেইন সিটিআরএল.

বডি এনজি-কন্ট্রোলার = "মেইনসিআরটিএল" </ b>>

সুতরাং এখন আমরা নামের একটি মডিউলটির জন্য হুকের উপরে আছি অ্যাপ্লিকেশন এবং একটি নিয়ামক নামে মেইন সিটিআরএল। আসুন আমরা এখনই তাদের তৈরি করি।

মডিউল তৈরি করা মোটামুটি সোজা is আপনি কল করে এটি সংজ্ঞায়িত করুন কৌণিক.মডিউল এবং এটি একটি নাম দেওয়া। ভবিষ্যতের রেফারেন্সের জন্য, খালি অ্যারের দ্বিতীয় প্যারামিটারটি যেখানে আপনি অ্যাপ্লিকেশনটিতে ব্যবহারের জন্য সাব-মডিউলগুলি ইনজেক্ট করতে পারেন। এটি এই টিউটোরিয়ালের সুযোগের বাইরে নয়, তবে যখন আপনার অ্যাপ্লিকেশনটি জটিলতা এবং প্রয়োজনীয়তাতে বাড়তে শুরু করে তখন সুবিধাজনক।

// পাবলিক / জেএস / কোলাব.জেএস
var অ্যাপ্লিকেশন = কৌণিক.মডিউল (‘অ্যাপ’, []);

আমরা এর মধ্যে কয়েকটি খালি স্থানধারক ঘোষণা করতে চলেছি অ্যাপ্লিকেশন মডিউল দিয়ে শুরু মেইন সিটিআরএল নিচে.আমরা পরে এগুলি পূরণ করব তবে আমি শুরু থেকে প্রাথমিক কাঠামোটি চিত্রিত করতে চেয়েছিলাম।

app.controller (‘মেইনসিআরটিএল’, ফাংশন ($ সুযোগ) {});

আমরা Socket.io কার্যকারিতাও একটিতে মোড়াতে যাচ্ছি সকেট পরিষেবা যাতে আমরা সেই বস্তুকে আবদ্ধ করতে পারি এবং এটি বিশ্বব্যাপী নেমস্পেসে ভাসতে না ফেলে leave

অ্যাপ.ফ্যাক্টরি (’সকেট’, ফাংশন ($ রুটস্কোপ) {});

এবং আমরা এটিতে থাকাকালীন, আমরা ডাকা একটি নির্দেশিকা ঘোষণা করতে যাচ্ছি স্টিকি নোট যেটিতে আমরা স্টিকি নোট কার্যকারিতাটি এনকেপুলেট করতে ব্যবহার করতে যাচ্ছি।

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {});

সুতরাং আসুন আমরা এখন পর্যন্ত কী করেছি তা পর্যালোচনা করি। আমরা অ্যাপ্লিকেশনটি ব্যবহার করে বুটস্ট্র্যাপ করেছি এনজি-অ্যাপ্লিকেশন এবং এইচটিএমএলে আমাদের অ্যাপ্লিকেশন নিয়ামক হিসাবে ঘোষণা করেছে। আমরা অ্যাপ্লিকেশন মডিউলটিও সংজ্ঞায়িত করেছি এবং তৈরি করেছি মেইন সিটিআরএল নিয়ামক, সকেট পরিষেবা এবং স্টিকি নোট নির্দেশ

09. একটি স্টিকি নোট তৈরি করা

এখন যেহেতু আমাদের কাছে কৌণিক জেএস অ্যাপ্লিকেশনটির কঙ্কাল রয়েছে, তাই আমরা নির্মাণের বৈশিষ্ট্যটি তৈরি করা শুরু করব।

app.controller (‘মেইনসিআরটিএল’, ফাংশন ($ সুযোগ, সকেট) {// বি .১
$ সুযোগ.নোটস = []; // খ

// ইনকামিং
সকেট.অন (’অনোটোটেন্ট্রিটেড’, ফাংশন (ডেটা) {// বি .৩
$ সুযোগ.নোটস.পুশ (ডেটা);
});

// আউটগোয়িং
$ স্কোপ.ক্রেটনোট = ফাংশন () B // বি .৪
বর্ণ নোট = {
আইডি: নতুন তারিখ ()। গেটটাইম (),
শিরোনাম: ‘নতুন নোট’,
বডি: ‘মুলতুবি’
};

$ সুযোগ.নোটস.পুষ (নোট);
socket.emit (‘createNote’, নোট);
};

বি .১ অ্যাঙ্গুলারজেএস এর অন্তর্নিহিত ইনজেকশন বৈশিষ্ট্য রয়েছে যাতে আমরা একটি ইনজেকশন দিচ্ছি । সুযোগ বস্তু এবং সকেট পরিষেবা দ্য । সুযোগ অবজেক্টটি ভিউমোডেল হিসাবে পরিবেশন করে এবং মূলত দ্বি-মুখী ডেটাবেন্ডিং সক্ষম করতে কিছু ইভেন্ট এতে বেকড সহ একটি জাভাস্ক্রিপ্ট অবজেক্ট।

B.2 আমরা অ্যারেটি ঘোষণা করছি যেখানে আমরা দৃশ্যের সাথে বাঁধাই করতে ব্যবহার করব।

B.3 আমরা এর জন্য শ্রোতা যুক্ত করছি onNoteCreated উপর ইভেন্ট সকেট পরিষেবা এবং ইভেন্ট পেড লোডের দিকে ঠেলে $ সুযোগ.নোটস অ্যারে।

B.4 আমরা একটি ঘোষণা করেছি createNote একটি ডিফল্ট তৈরি করে এমন পদ্ধতি বিঃদ্রঃ বস্তু এবং এটি মধ্যে ধাক্কা $ সুযোগ.নোটস অ্যারে। এটিও ব্যবহার করে সকেট নির্গমন পরিষেবা createNote ইভেন্ট এবং পাস নতুন নোট পাশাপাশি আপত্তি।

সুতরাং এখন আমাদের কাছে নোটটি তৈরি করার একটি পদ্ধতি রয়েছে, আমরা কীভাবে এটি কল করব? এটি একটি ভাল প্রশ্ন! এইচটিএমএল ফাইলে আমরা বিল্ট ইন অ্যাঙ্গুলারজেএস নির্দেশিকা যুক্ত করি এনজি-ক্লিক করুন বোতামে এবং তারপরে যুক্ত করুন createNote বৈশিষ্ট্য মান হিসাবে পদ্ধতি কল।

বাটন আইডি = "createButton" এনজি-ক্লিক = "createNote ()"> নোট / বোতাম> তৈরি করুন

আমরা এখন পর্যন্ত কী করেছি তাড়াতাড়ি পর্যালোচনা করার সময়। আমরা এতে একটি অ্যারে যুক্ত করেছি । সুযোগ মধ্যে বস্তু মেইন সিটিআরএল এটি অ্যাপ্লিকেশনটির জন্য সমস্ত নোট ধারণ করে। আমরা একটি যোগ করেছি createNote পদ্ধতিতে । সুযোগ একটি নতুন স্থানীয় নোট তৈরি করতে আপত্তি জানায় এবং তারপরে সেই নোটটি অন্য ক্লায়েন্টদের কাছে সম্প্রচার করে সকেট পরিষেবা আমরা এর উপর একটি ইভেন্ট শ্রোতাও যুক্ত করেছি সকেট পরিষেবা যাতে আমরা জানতে পারি যখন অন্যান্য ক্লায়েন্টরা একটি নোট তৈরি করেছে যাতে আমরা এটি আমাদের সংগ্রহে যুক্ত করতে পারি।

10. স্টিকি নোট প্রদর্শন করা হচ্ছে

আমাদের কাছে এখন একটি নোট অবজেক্ট তৈরি করার এবং এটি ব্রাউজারগুলির মধ্যে ভাগ করার ক্ষমতা রয়েছে তবে আমরা কীভাবে এটি প্রদর্শিত করব? এখানেই নির্দেশনা আসে।

দিকনির্দেশ এবং তাদের জটিলতা একটি বিস্তৃত বিষয়, তবে সংক্ষিপ্ত সংস্করণটি হ'ল তারা কাস্টম কার্যকারিতা সহ উপাদান এবং বৈশিষ্ট্যগুলি প্রসারিত করার একটি উপায় সরবরাহ করে। দিকনির্দেশকগুলি অ্যাংুলারজেএস সম্পর্কে সহজেই আমার প্রিয় অংশ কারণ এটি আপনাকে HTML এ আপনার অ্যাপ্লিকেশনটির আশেপাশে একটি সম্পূর্ণ ডিএসএল (ডোমেন নির্দিষ্ট ভাষা) তৈরি করতে দেয়।

এটি স্বাভাবিক যেহেতু আমরা আমাদের সহযোগিতা বোর্ডের জন্য স্টিকি নোট তৈরি করব যা আমাদের তৈরি করা উচিত স্টিকি নোট নির্দেশ আপনি যে মডিউলে এটি ঘোষণা করতে চান এবং নাম এবং একটি ফাংশন যা কোনও দিকনির্দেশক সংজ্ঞা বস্তুকে প্রত্যাবর্তন করে তা নির্দেশিকাকে কল করে নির্দেশকে সংজ্ঞায়িত করা হয়। নির্দেশিক সংজ্ঞা বস্তুর প্রচুর সম্ভাব্য বৈশিষ্ট্য রয়েছে যা আপনি এতে সংজ্ঞায়িত করতে পারেন, তবে আমরা আমাদের উদ্দেশ্যে এখানে কয়েকটি ব্যবহার করতে যাচ্ছি।

আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি নির্দেশাবলী সংজ্ঞা বস্তুতে সংজ্ঞা দিতে পারবেন এমন সমস্ত বৈশিষ্ট্যের পুরো তালিকা দেখতে আপনি AngularJS ডকুমেন্টেশনটি পরীক্ষা করে দেখুন।

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {
var লিঙ্কার = ফাংশন (সুযোগ, উপাদান, অনুগ্রহকারী) {};

var নিয়ামক = ফাংশন ($ সুযোগ) {};

ফিরে
সীমাবদ্ধ করুন: ’এ’, // সি .১
লিঙ্ক: লিঙ্কার, // সি .২
নিয়ামক: নিয়ামক, // সি .৩
সুযোগ: {// সি .৪
দ্রষ্টব্য: ’=’,
অনডিলিট: ’ও’
}
};
});

C.1 আপনি আপনার নির্দেশকে নির্দিষ্ট ধরণের HTML উপাদানগুলির মধ্যে সীমাবদ্ধ করতে পারেন। দুটি সবচেয়ে সাধারণ উপাদান বা বৈশিষ্ট্য, যা আপনি ব্যবহার করে ঘোষণা করেন ই এবং ক যথাক্রমে আপনি এটি কোনও সিএসএস বর্গ বা একটি মন্তব্যেও সীমাবদ্ধ রাখতে পারেন তবে এগুলি সাধারণ নয়।

C.2 লিঙ্ক ফাংশনটি যেখানে আপনি আপনার সমস্ত ডোম ম্যানিপুলেশন কোড রেখেছেন। আমি খুঁজে পেয়েছি যে কয়েকটি ব্যতিক্রম আছে, তবে এটি সর্বদা সত্য (সময়ের অন্তত 99 শতাংশ)) এটি AngularJS এর ​​একটি মৌলিক নিয়ম এবং এজন্যই আমি এটির উপর জোর দিয়েছি।

C.3 কন্ট্রোলার ফাংশনটি মূল কন্ট্রোলারের মতোই কাজ করে যা আমরা প্রয়োগের জন্য সংজ্ঞায়িত করেছি কিন্তু । সুযোগ আমরা যে বস্তুটির মধ্যে যাচ্ছি তা ডিওএম উপাদানটির জন্য নির্দিষ্ট নির্দেশের উপর নির্ভর করে।

সি .৪ অ্যাঙ্গুলারজেএস-এর বিচ্ছিন্ন সুযোগের ধারণা রয়েছে, যা আপনাকে কোনও নির্দেশকের সুযোগ কীভাবে বাইরের বিশ্বের সাথে যোগাযোগ করে তা স্পষ্ট করে সংজ্ঞা দিতে দেয়। যদি আমরা সুযোগটি ঘোষণা না করতাম তবে নির্দেশটি পিতামাতা-সন্তানের সম্পর্কের সাথে পিতামাতার সুযোগ থেকে সুস্পষ্টভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছিল। অনেক ক্ষেত্রেই এটি অনুকূল নয়। সুযোগকে বিচ্ছিন্ন করে আমরা বাইরের বিশ্ব অজান্তেই এবং বিরূপভাবে আপনার নির্দেশের স্থিতিকে প্রভাবিত করতে পারে এমন সম্ভাবনাগুলি প্রশমিত করি।

আমি দ্বিমুখী ডেটা-বাইন্ডিং এর ঘোষণা করেছি বিঃদ্রঃ সাথে = প্রতীক এবং একটি অভিব্যক্তি বাধ্যতামূলক অনডিলিট সাথে & প্রতীক বিচ্ছিন্ন সুযোগের সম্পূর্ণ ব্যাখ্যার জন্য দয়া করে অ্যাংুলারজেএস ডকুমেন্টেশনটি পড়ুন কারণ এটি কাঠামোর অন্যতম জটিল বিষয়।

সুতরাং আসুন আসলে ডিওমে একটি স্টিকি নোট যুক্ত করি।

যে কোনও ভাল কাঠামোর মতো, অ্যাঙ্গুলারজেএস বাক্সের ঠিক বাইরে কিছু দুর্দান্ত বৈশিষ্ট্য নিয়ে আসে। হ্যান্ডিস্ট ফিচারগুলির মধ্যে একটি এনজি-পুনরাবৃত্তি। এই AngularJS নির্দেশিকা আপনাকে অবজেক্টগুলির একটি অ্যারেতে যেতে দেয় এবং অ্যারের আইটেম থাকায় এটি যতবার ট্যাগ হয় তার নকল করে। নীচের ক্ষেত্রে, আমরা এর উপর পুনরাবৃত্তি করছি মন্তব্য অ্যারে এবং সদৃশ ডিভ দৈর্ঘ্যের জন্য উপাদান এবং তার শিশুদের মন্তব্য অ্যারে।

ডিভি স্টিকি-নোট এনজি-রিপিট = "নোটগুলিতে নোট" নোট = "নোট" অনডিলিট = "ডিলিটনোট (আইডি)">
বোতামের প্রকার = "বাটন" এনজি-ক্লিক = "মুদ্রণ নোট (নোট.আইডি)"> button / বোতাম>
ইনপুট এনজি-মডেল = "নোট.টাইটেল" এনজি-চেঞ্জ = "আপডেটটোট (নোট)" টাইপ = "পাঠ্য">
টেক্সারিয়া এনজি-মডেল = "নোট.বডি" এনজি-চেঞ্জ = "আপডেটটোট (নোট)"
> {{নোট.বাডি}} / টেক্সেরিয়া>
/ div>

এর সৌন্দর্য এনজি-পুনরাবৃত্তি এটি হ'ল এটি আপনি যে কোনও অ্যারে পাস করবেন তার সাথে আবদ্ধ এবং আপনি যখন অ্যারেতে কোনও আইটেম যুক্ত করবেন তখন আপনার ডোম উপাদানটি স্বয়ংক্রিয়ভাবে আপডেট হবে। আপনি এটিকে আরও একধাপ এগিয়ে নিয়ে যেতে পারেন এবং কেবলমাত্র স্ট্যান্ডার্ড ডিওএম উপাদানই নয় বরং অন্যান্য কাস্টম নির্দেশকেও পুনরাবৃত্তি করতে পারেন। এজন্য আপনি দেখতে পাচ্ছেন স্টিকি নোট উপাদান হিসাবে একটি বৈশিষ্ট্য হিসাবে।

কাস্টম কোডের আরও দুটি বিট রয়েছে যা পরিষ্কার করা দরকার। আমরা স্কোপটি বিচ্ছিন্ন করেছি স্টিকি নোট দুটি বৈশিষ্ট্যের উপর নির্দেশিকা। প্রথমটি হ'ল বন্ধনে সংজ্ঞায়িত বিচ্ছিন্ন সুযোগ বিঃদ্রঃ সম্পত্তি এর অর্থ হ'ল যখনই নোটের অবজেক্টটি প্যারেন্ট স্কোপে পরিবর্তিত হয়, এটি স্বয়ংক্রিয়ভাবে সম্পর্কিত নোট অবজেক্টটিকে নির্দেশ এবং তার বিপরীতে আপডেট করে। অন্যান্য সংজ্ঞায়িত বিচ্ছিন্ন সুযোগ রয়েছে অনডিলিট গুণ এর অর্থ কী তা কখন অনডিলিট নির্দেশে ডাকা হয়, এটি যা যা প্রকাশ করবে তা কল করবে অনডিলিট ডিওএম উপাদানটিতে অ্যাট্রিবিউট যা নির্দেশকে তাত্ক্ষণিক করে তোলে।

যখন কোনও নির্দেশ তাত্ক্ষণিক হয় তখন এটি ডিওমে যুক্ত হয় এবং লিঙ্ক ফাংশনটি ডাকা হয়। এটি উপাদানটিতে কিছু ডিফল্ট ডিওএম বৈশিষ্ট্য নির্ধারণের উপযুক্ত সুযোগ। আমরা যে উপাদান প্যারামিটারটি দিয়ে যাচ্ছি তা আসলে একটি jQuery অবজেক্ট এবং তাই আমরা এটিতে jQuery অপারেশন করতে পারি।

(অ্যাঙ্গুলারজেএস আসলে এটিতে নির্মিত জিকিউরির একটি উপসেট নিয়ে আসে তবে আপনি যদি ইতিমধ্যে jQuery এর সম্পূর্ণ সংস্করণ অন্তর্ভুক্ত করেন তবে অ্যাঙ্গুলারজেএস এর চেয়ে পিছিয়ে যাবে))

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {
var লিঙ্কার = ফাংশন (সুযোগ, উপাদান, অনুগামী) {
// এটিকে সুন্দর করে তোলার জন্য কিছু ডিওএম দীক্ষা
উপাদান। CSS (‘বাম’, ’10px’);
এলিমেন্ট.এসএসএস (‘শীর্ষ’, ‘50px’);
এলিমেন্টহাইড ()। ফেডইন ();
};
});

উপরের কোডে আমরা স্টেজে কেবল স্টিকি নোটটি অবস্থান করছি এবং এটিকে বিবর্ণ করছি।

11. একটি স্টিকি নোট মুছে ফেলা হচ্ছে

সুতরাং এখন আমরা একটি স্টিকি নোট যুক্ত এবং প্রদর্শন করতে পারি, এটি এখন স্টিকি নোটগুলি মুছে ফেলার সময়। স্টিকি নোট তৈরি এবং মুছে ফেলা হল নোটগুলি আবদ্ধ যে অ্যারে থেকে আইটেমগুলি যুক্ত এবং মুছার বিষয়টি। এই অ্যারে বজায় রাখা পিতামাতার সুযোগের দায়িত্ব, যার কারণেই আমরা নির্দেশের মধ্যে থেকে মোছার অনুরোধটি উত্পন্ন করি, তবে পিতামাতাদের সুযোগটি আসল ভারী উত্তোলন করতে দিন।

এই কারণেই আমরা নির্দেশের উপর নির্ধারিত বিচ্ছিন্ন সুযোগ তৈরি করার সমস্ত সমস্যার মুখোমুখি হয়েছি: যাতে নির্দেশটি অভ্যন্তরীণভাবে মোছার ইভেন্টটি গ্রহণ করতে পারে এবং প্রক্রিয়াজাতকরণের জন্য এটি তার পিতামাতার কাছে সরবরাহ করতে পারে।

নির্দেশের ভিতরে এইচটিএমএল লক্ষ্য করুন।

বোতামের প্রকার = "বাটন" এনজি-ক্লিক = "মুদ্রণ নোট (নোট.আইডি)"> button / বোতাম>

আমি পরবর্তী যে বিষয়টি বলতে যাচ্ছি তা প্রায় দীর্ঘ পথের মতো মনে হতে পারে তবে মনে রাখবেন আমরা একই দিকে আছি এবং এটি বিস্তারিতভাবে প্রকাশ করার পরে তা বোঝা যাবে। স্টিকি নোটের উপরের ডানদিকে কোণায় বোতামটি ক্লিক করা হলে আমরা কল করছি মুছে ফেলুন নির্দেশকের নিয়ন্ত্রক এবং পাস করার উপর নোট.আইডি মান। কন্ট্রোলার তারপর কল অনডিলিট, যা এরপরে আমরা তার কাছে যা যা প্রকাশ করেছি তা কার্যকর করে। এ পর্যন্ত সব ঠিকই? আমরা নিয়ামককে একটি স্থানীয় পদ্ধতি কল করছি যা এরপরে বিচ্ছিন্ন সুযোগে সংজ্ঞায়িত যেকোন মতকে কল করে এটি বন্ধ করে দেয়। অভিভাবকদের সাথে যে অভিব্যক্তি ডাকা হয় কেবল সেটিকে ডাকা হয় to মুছে ফেলুন যেমন.

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {
var নিয়ামক = ফাংশন ($ সুযোগ)
$ সুযোগ.ডিলেটনোট = ফাংশন (আইডি) {
$ সুযোগ.অনলিট ({
আমি করেছিলাম
});
};
};

ফিরে
সীমাবদ্ধ করুন: ‘এ’,
লিঙ্ক: লিঙ্কার,
নিয়ামক: নিয়ামক,
সুযোগ:
দ্রষ্টব্য: ’=’,
অনডিলিট: ’ও’
}
};
});

(এক্সপ্রেশন-সংজ্ঞায়িত বিচ্ছিন্ন সুযোগ ব্যবহার করার সময় কোনও বস্তুর মানচিত্রে প্যারামিটারগুলি প্রেরণ করা হয়))

মূল সুযোগে, মুছে ফেলুন কল হয়ে যায় এবং এটি ব্যবহার করে মোটামুটি মানক মুছুন angular.forEach নোটের অ্যারেতে পুনরাবৃত্তি করতে ইউটিলিটি ফাংশন। ফাংশনটি তার স্থানীয় ব্যবসা পরিচালনা করার পরে এটি এগিয়ে যায় এবং সেই অনুযায়ী প্রতিক্রিয়া জানানোর জন্য বিশ্বব্যাপী ইভেন্টটি প্রেরণ করে।

app.controller (‘মেইনসিআরটিএল’, ফাংশন ($ সুযোগ, সকেট))
$ সুযোগ.নোটস = [];

// ইনকামিং
সকেট.অন (‘অনটোট ডিলিটেড’, ফাংশন (ডেটা) {
$ স্কোপ.ডিলেটনোট (ডেটা.আইডি);
});

// আউটগোয়িং
$ সুযোগ.ডিলেটনোট = ফাংশন (আইডি) {
var oldNotes = $ সুযোগ.নোটস,
নতুন দ্রষ্টব্য = [];

কৌণিক.ফৌচ (পুরানো নোটস, ফাংশন (নোট) {
if (নোট.আইডি! == আইডি) newNotes.push (নোট);
});

$ সুযোগ.নোটস = নতুন নোট;
সকেট.ইমিট (’মুছে ফেলুন নোট’, {আইডি: আইডি});
};
});

12. একটি স্টিকি নোট আপডেট করা

আমরা দুর্দান্ত অগ্রগতি করছি! এতক্ষণে আমি আশা করি যে আপনি যে ঘূর্ণিঝড়টি নিয়ে যাচ্ছেন সেখান থেকে আপনি কিছু নিদর্শন উত্থিত দেখতে শুরু করেছেন। তালিকার পরবর্তী আইটেমটি আপডেট বৈশিষ্ট্য।

আমরা আসল ডোম উপাদানগুলি থেকে শুরু করতে যাব এবং এটি সার্ভারে সমস্ত পথে অনুসরণ করব এবং ক্লায়েন্টের কাছে ফিরে যাব। প্রথমে আমাদের জানতে হবে কখন স্টিকি নোটের শিরোনাম বা বডিটি পরিবর্তন করা হচ্ছে। অ্যাঙ্গুলারজেএস ডাটা মডেলের অংশ হিসাবে উপাদানগুলি গঠন করে যাতে আপনি একটি স্ন্যাপে দ্বি-মুখী ডেটা-বাঁধাই করতে পারেন। এটি ব্যবহার করতে এনজি-মডেল আপনি যে সম্পত্তিতে আবদ্ধ হতে চান তাতে নির্দেশ দিন এবং রাখুন। এই ক্ষেত্রে আমরা ব্যবহার করতে যাচ্ছি নোট.টাইটেল এবং নোট.বডি যথাক্রমে

যখন এই বৈশিষ্ট্যগুলির কোনওটি পরিবর্তিত হয় আমরা সেই তথ্যটি সাথে যেতে পাস করতে চাই। আমরা এটি দিয়ে সম্পন্ন করি এনজি-চেঞ্জ নির্দেশ দিন এবং কল করতে এটি ব্যবহার করুন আপডেটনোট এবং নোট বস্তু নিজেই পাস। অ্যাঙ্গুলারজেএস যা কিছু আছে তার মান কিনা তা সনাক্ত করতে খুব চালাক নোংরা চেকিং করে এনজি-মডেল পরিবর্তিত হয়েছে এবং তারপরে থাকা এক্সপ্রেশনটি কার্যকর করে এনজি-চেঞ্জ.

ইনপুট এনজি-মডেল = "নোট.টাইটেল" এনজি-চেঞ্জ = "আপডেটটোট (নোট)" টাইপ = "পাঠ্য">
টেক্সারিয়া এনজি-মডেল = "নোট.বডি" এনজি-চেঞ্জ = "আপডেটডোট (নোট)"> {{নোট.বডি}} / টেক্সারিয়া>

ব্যবহারের উলটো দিক এনজি-চেঞ্জ স্থানীয় রূপান্তরটি ইতিমধ্যে ঘটেছে এবং আমরা বার্তাটি রিলে করার জন্য কেবল দায়বদ্ধ। নিয়ামক মধ্যে, আপডেটনোট বলা হয় এবং সেখান থেকে আমরা নির্গত করতে যাচ্ছি আপডেটনোট আমাদের সার্ভারের জন্য অন্যান্য ক্লায়েন্টদের কাছে সম্প্রচারের ইভেন্ট।

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {
var নিয়ামক = ফাংশন ($ সুযোগ)
$ সুযোগ.আপডেটনোট = ফাংশন (নোট) {
সকেট.ইমিট (‘আপডেটনোট’, নোট);
};
};
});

এবং নির্দেশিকা নিয়ামক মধ্যে, আমরা শুনছি onNoteUpdated যখন অন্য ক্লায়েন্টের কোনও নোট আপডেট হয়েছে তখন তা জানার জন্য ইভেন্টটি যাতে আমরা আমাদের স্থানীয় সংস্করণটি আপডেট করতে পারি।

var নিয়ামক = ফাংশন ($ সুযোগ)
// ইনকামিং
সকেট.অন (‘অননোটেড আপডেটেড’, ফাংশন (ডেটা) {
// আপডেট যদি একই নোট
যদি (ডেটা.আইডি == $ স্কোপ.নোট.আইডি) {

$ স্কোপ.নোট.টাইটেল = ডেটা টাইটেল;
$ সুযোগ.নোট.বডি = ডেটা.ডি;
}
});
};

13. একটি স্টিকি নোট সরানো

এই মুহুর্তে আমরা সিআরইউডি কিডি পুলের চারপাশে একটি কোলা করেছি এবং জীবন ভাল! কেবল আপনার বন্ধুদের মুগ্ধ করার জন্য কোনও পার্লার ট্রিকের স্বার্থে, আমরা পর্দার চারদিকে নোটগুলি সরিয়ে নেওয়ার এবং রিয়েল টাইমে স্থানাঙ্কগুলি আপডেট করার ক্ষমতা যুক্ত করতে যাচ্ছি। আতঙ্কিত হবেন না - এটি কোডের আরও কয়েকটি লাইন। এই সমস্ত কঠোর পরিশ্রমের মূল্য পরিশোধ করতে চলেছে। আমি কথা দিচ্ছি!

আমরা পার্টিতে বিশেষ অতিথি, jQueryUI কে আমন্ত্রণ জানিয়েছি, এবং আমরা এটি ড্র্যাগেবলের জন্য করেছি। স্থানীয়ভাবে একটি নোট টেনে আনার সক্ষমতা যুক্ত করতে কেবল কোডের একটি লাইন লাগে। আপনি যদি যোগ করুন উপাদান.ড্রেগেবল (); আপনার লিঙ্কারের ফাংশনে আপনি বেঁচে থাকা ‘বাঘের চোখ’ শুনতে শুরু করবেন কারণ আপনি এখন নিজের নোটগুলি প্রায় টেনে আনতে পারেন।

আমরা জানতে চাইলে কখন টানাটানি বন্ধ হয়ে গেছে এবং পাশ দিয়ে যাওয়ার জন্য নতুন স্থানাঙ্কগুলি ক্যাপচার করে। jQueryUI কিছু খুব স্মার্ট লোক দ্বারা নির্মিত হয়েছিল, তাই যখন টানাটানি বন্ধ হয়ে যায় তখন আপনাকে কেবল স্টপ ইভেন্টের জন্য একটি কলব্যাক ফাংশন সংজ্ঞায়িত করতে হবে। আমরা দখল নোট.আইডি স্কোপ অবজেক্ট এবং বাম এবং উপরের সিএসএস মানগুলি বন্ধ করে দিন ui অবজেক্ট সেই জ্ঞান দিয়ে আমরা যা করি আমরা সব বরাবর করে যাচ্ছি: নির্গত!

app.directive (‘স্টিকি নোট’, ফাংশন (সকেট) {
var লিঙ্কার = ফাংশন (সুযোগ, উপাদান, অনুগামী) {
এলিমেন্ট.ড্রাগেবল ({
স্টপ: ফাংশন (ইভেন্ট, ইউআই) {
সকেট.ইমিট (‘মুভনোট’,
আইডি: স্কোপ.নোট.আইডি,
x: ui.position.left,
y: ui.position.top
});
}
});

সকেট.অন (’অনটোট মুভড’, ফাংশন (ডেটা) {
// আপডেট যদি একই নোট
যদি (ডেটা.আইডি == স্কোপ.নোট.আইডি) {
এলিমেন্ট.নিমেট ({
বাম: ডেটা.এক্স,
শীর্ষ: data.y
});
}
});
};
});

এই মুহুর্তে এটি অবাক হওয়া উচিত নয় যে আমরা সকেট পরিষেবা থেকে একটি সরানো সম্পর্কিত ইভেন্টের জন্যও শুনছি। এই ক্ষেত্রে এটি onNoteMoved ইভেন্ট এবং যদি নোটটি কোনও মিল হয় তবে আমরা বাম এবং শীর্ষের CSS বৈশিষ্ট্য আপডেট করি। বাম! সম্পন্ন!

14. বোনাস

এটি একটি বোনাস বিভাগ যা আমি অন্তর্ভুক্ত করব না যদি আপনি যদি পুরোপুরি আত্মবিশ্বাসী না হন তবে আপনি এটি 10 ​​মিনিটেরও কম সময়ে অর্জন করতে পারবেন। আমরা একটি লাইভ সার্ভারে স্থাপন করতে যাচ্ছি (এটি করা কতটা সহজ তা নিয়ে আমি এখনও অবাক হয়েছি)।

প্রথমত, আপনাকে একটি বিনামূল্যে নোডিজিটসু পরীক্ষার জন্য সাইন আপ করতে হবে। ট্রায়ালটি 30 দিনের জন্য বিনামূল্যে, যা আপনার পা ভিজা করার জন্য উপযুক্ত getting

আপনার অ্যাকাউন্ট তৈরি হয়ে গেলে আপনাকে জিতসু প্যাকেজটি ইনস্টল করতে হবে যা আপনি কমান্ড লাইন থেকে করতে পারবেন its npm ইনস্টল করুন জিতসু-জি.

তারপরে আপনাকে কমান্ড লাইন থেকে লগ ইন করতে হবে its জিতসু লগইন করুন এবং আপনার শংসাপত্র লিখুন।

আপনি সরাসরি আপনার অ্যাপে রয়েছেন তা নিশ্চিত করুন, টাইপ করুন its জিতসু মোতায়েন এবং প্রশ্নের মাধ্যমে পদক্ষেপ। আমি সাধারণত যতটা সম্ভব ডিফল্ট হিসাবে ছেড়ে যাই, যার অর্থ আমি আমার অ্যাপ্লিকেশনটির নাম দিই তবে সাবডোমেন নয় etc.

এবং, আমার প্রিয় বন্ধুরা, এটুকুই আছে! সার্ভারের আউটপুট থেকে আপনি নিজের অ্যাপ্লিকেশনটির URL টি একবার পেয়ে যাবেন এবং এটি প্রস্তুত হয়ে যাবে।

15. উপসংহার

আমরা এই নিবন্ধে অনেক কৌণিক জেএস গ্রাউন্ডটি কভার করেছি এবং আমি আশা করি আপনি প্রক্রিয়াটিতে অনেক মজা পেয়েছিলেন। আমি মনে করি আপনি প্রায় 200 লাইনের কোডে অ্যাঙ্গুলারজেএস এবং সকেট.ইও দিয়ে যা অর্জন করতে পারেন তা সত্যিই ঝরঝরে।

মূল বিষয়গুলিতে মনোযোগ কেন্দ্রীভূত করার জন্য আমি কয়েকটি বিষয় কভার করি নি, তবে আমি উত্সটি নীচে টানতে এবং অ্যাপ্লিকেশনটির সাথে চারপাশে খেলতে উত্সাহিত করি। আমরা একটি শক্তিশালী ভিত্তি তৈরি করেছি, তবে আপনি যুক্ত করতে পারেন এমন আরও অনেকগুলি বৈশিষ্ট্য রয়েছে। হ্যাকিং পান!

লুকাস রুয়েবেলক প্রযুক্তি প্রযুক্তি এবং তিনি অ্যাঙ্গুলারজেএস-এর সহ-রচনা করছেন ম্যানিং পাবলিকেশনস-এর জন্য। তাঁর প্রিয় কাজটি হ'ল লোকেরা যেমন তার মতো নতুন প্রযুক্তি নিয়ে উত্সাহিত হয়। তিনি ফিনিক্স ওয়েব অ্যাপ্লিকেশন ব্যবহারকারী গ্রুপ পরিচালনা করেন এবং অপরাধে সহকর্মীদের সাথে একাধিক হ্যাকাথন গেস্ট করেছেন।

এই পছন্দ? এগুলো পড়াে!

  • কীভাবে একটি অ্যাপ তৈরি করতে হয়
  • আমাদের প্রিয় ওয়েব ফন্ট - এবং তাদের একটি পয়সাও লাগবে না
  • অগমেন্টেড রিয়েলিটির জন্য পরবর্তীটি আবিষ্কার করুন
  • বিনামূল্যে টেক্সচার ডাউনলোড করুন: উচ্চ রেজোলিউশন এবং এখন ব্যবহারের জন্য প্রস্তুত
পূর্ববর্তী নিবন্ধ

এক্সেল 2010 এ কেবল পঠন পাসওয়ার্ড সক্ষম / অক্ষম করবেন
পরবর্তী নিবন্ধ

ভুলে যাওয়া WinRAR সংরক্ষণাগার পাসওয়ার্ড পুনরুদ্ধার করার জন্য শীর্ষ 4 সাধারণ সমাধান
আজ পড়ুন
2012 ভিমেও পুরষ্কার বিজয়ীদের ঘোষণা
আবিষ্কার

2012 ভিমেও পুরষ্কার বিজয়ীদের ঘোষণা

মে 2024
অনলাইন ভিডিও পোর্টাল ভিমিও গত রাতে নিউ ইয়র্ক সিটির এক চমকপ্রদ ভিওমো অ্যাওয়ার্ড অনুষ্ঠানের মধ্য দিয়ে বিশ্বের সেরা চলচ্চিত্র নির্মাতাদের সৃজনশীলতা উদযাপন করেছে।২০১২ সালের ভিমিও অ্যাওয়ার্ড দুটি মাসের...
প্রতিক্রিয়াশীল ওয়েব ডিজাইনে রেটিনা চিত্রগুলির জন্য টিপস এবং কৌশল
আবিষ্কার

প্রতিক্রিয়াশীল ওয়েব ডিজাইনে রেটিনা চিত্রগুলির জন্য টিপস এবং কৌশল

মে 2024
আমি ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলির ভবিষ্যত দেখেছি এবং এটি 300 পিপি রেজোলিউশনে রয়েছে। এই লেখার হিসাবে, কেবলমাত্র সর্বশেষ আইফোন এবং আইপ্যাডগুলিতে এই রেটিনা ডিসপ্লে রয়েছে তবে কম্পিউটার নির্মাতারা এগুল...
কীট-অনুপ্রাণিত প্যাকেজিং সুন্দর নতুন ব্র্যান্ড পরিচয় আলোকিত করে
আবিষ্কার

কীট-অনুপ্রাণিত প্যাকেজিং সুন্দর নতুন ব্র্যান্ড পরিচয় আলোকিত করে

মে 2024
হালকা বাল্ব প্যাকেজ করতে কত ডিজাইনার লাগে? বেলারুশ বৈদ্যুতিক সংস্থা সিএসের জন্য এই প্রকল্পে, উত্তর দুটি মাত্র। অ্যাঞ্জেলিনা পিসিকোভা র নকশা এবং শিল্প নির্দেশনা এবং আন্না অরলভস্কায়ার সৌজন্যে সুন্দর লা...