สร้าง Discord Chat Bot ใน Rust

เรียนรู้วิธีสร้างบอท Discord ใน Rust ด้วย Shuttle และ Serenity เรียนรู้วิธีสร้างบอทใน Discord เพิ่มบอทไปยังเซิร์ฟเวอร์ของคุณ และเชื่อมต่อรหัส Rust กับบอทของคุณ

บอท Discord สามารถช่วยเจ้าของเซิร์ฟเวอร์และพนักงานลงแรงและเวลาได้มาก ในขณะเดียวกันก็มอบคุณสมบัติที่มีประโยชน์มากมายให้กับผู้ใช้ คุณสามารถใช้บอทใน Discord เพื่อทำงานซ้ำๆ โดยอัตโนมัติและงานที่ต้องใช้เวลาและความพยายามมาก

ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างบอทใน Discord เพิ่มบอทไปยังเซิร์ฟเวอร์ของคุณ และเชื่อมต่อรหัส Rust กับบอทของคุณ

สารบัญ:

การตั้งค่าบอท Discord
- การสร้างแอปพลิเคชันใน Discord
- การสร้างบอทสำหรับแอปพลิเคชัน
- การติดตั้งบอทไปยังเซิร์ฟเวอร์ Discord ของคุณ
การตั้งค่าสภาพแวดล้อมรหัสสนิม
การเชื่อมต่อฐานข้อมูลรหัส Rust กับบอท Discord ของคุณ
การสร้างคำสั่งสำหรับบอท Discord
- เปิดใช้งานโหมดผู้พัฒนาในบัญชี Discord ของคุณ
- เปิดใช้งานบอทของคุณเพื่อตอบสนองต่อคำสั่ง
การปรับใช้บอท Discord กับเซิร์ฟเวอร์ Shuttle

หากต้องการติดตามบทความนี้ คุณต้องมีความคุ้นเคยกับ Discord ในระดับหนึ่งเป็นอย่างน้อย คุณควรมีบัญชี Discord เซิร์ฟเวอร์ Discord ที่คุณเป็นเจ้าของ และประสบการณ์ในการเขียนโปรแกรมด้วย Rust

การตั้งค่าบอท Discord

การตั้งค่าบอทใน Discord อาจเป็นเรื่องยุ่งยากเล็กน้อย โดยเฉพาะอย่างยิ่งหากนี่เป็นครั้งแรกที่คุณทำ ในส่วนนี้ ฉันจะแนะนำคุณตลอดการตั้งค่าบอทสำหรับเซิร์ฟเวอร์ของคุณ

การสร้างแอปพลิเคชันใน Discord

แอปพลิเคชัน Discord เป็นบริการที่ให้อินเทอร์เฟซระหว่างผู้ใช้ Discord และรหัสของคุณ อินเทอร์เฟซที่แอปพลิเคชันจัดเตรียมให้เรียกว่าบอท บอทได้รับข้อความจากผู้ใช้และส่งการตอบกลับ

หากต้องการสร้างแอปพลิเคชัน Discord ให้ลงชื่อเข้าใช้บัญชี Discord ในเบราว์เซอร์ของคุณก่อน ถัดไป เปิดพอร์ทัลผู้พัฒนา Discordในเบราว์เซอร์ของคุณ แล้วคลิกปุ่ม "แอปพลิเคชันใหม่" ที่ด้านบนขวาของหน้า:

ป้อนชื่อสำหรับแอปพลิเคชันของคุณ:

แจ้งให้ป้อนชื่อสำหรับแอปพลิเคชันหรือตรวจสอบกับฝ่ายสนับสนุน Dev เพื่อดูว่ามีแอปอยู่แล้วหรือไม่

คลิกปุ่ม "สร้าง" เพื่อสร้างแอปพลิเคชัน หากการดำเนินการเสร็จสมบูรณ์ คุณจะได้รับการต้อนรับด้วยแดชบอร์ดที่มีลักษณะดังนี้:

แดชบอร์ดแอปพลิเคชัน Discord

การสร้างบอทสำหรับแอปพลิเคชัน

ในส่วนนี้ คุณจะสร้างบอทสำหรับแอปพลิเคชัน Discord ของคุณ ที่บานหน้าต่างด้านซ้ายของหน้าเว็บ คลิก “บอท” เพื่อเปิดเมนูบอท:

ภายใต้ส่วน “สร้างบอท” ให้คลิกปุ่ม “เพิ่มบอท” เพื่อสร้างบอท:

หลังจากคลิกปุ่มนี้ คุณจะสร้างบอท Discord ได้สำเร็จ หากต้องการสิ้นสุด ให้เปิดใช้งานตัวเลือก “ข้อความแสดงเจตนา” เพื่อให้บอทสามารถรับข้อความจากผู้ใช้ในเซิร์ฟเวอร์ Discord ของคุณ:

ตัวเลือกความตั้งใจของเนื้อหาข้อความเปิดใช้งานเพื่ออนุญาตให้บอท Discord รับข้อความจากผู้ใช้

การติดตั้งบอทไปยังเซิร์ฟเวอร์ Discord ของคุณ

สิ่งสุดท้ายที่คุณต้องทำในการตั้งค่าบอทคือติดตั้งลงในเซิร์ฟเวอร์ของคุณ ในบานหน้าต่างนำทางด้านซ้าย คลิกรายการเมนู “OAuth2” เพื่อสลับรายการแบบเลื่อนลง ในดร็อปดาวน์นี้ ให้คลิกตัวเลือก “ตัวสร้าง URL”:

ในเมนูตัวสร้าง URL ใต้ “ขอบเขต” ให้ทำเครื่องหมายที่ตัวเลือก “บอท”:

เลื่อนลงไปด้านล่างของหน้าไปที่ “BOT PERMISSIONS” และทำเครื่องหมายที่ตัวเลือก “Administrator” เพื่อให้สิทธิ์ของผู้ดูแลระบบ bot:

เมนูย่อยสิทธิ์ของ Bot พร้อมรายการช่องทำเครื่องหมายเพิ่มเติมพร้อมตัวเลือกผู้ดูแลระบบทำเครื่องหมายภายใต้สิทธิ์ทั่วไป

เลื่อนไปที่ด้านล่างของหน้าและคัดลอก URL ที่สร้างขึ้นที่ด้านล่าง จากนั้นเปิด URL ที่สร้างขึ้นในเบราว์เซอร์ของคุณ:

แจ้งให้เลือกปลายทางเซิร์ฟเวอร์สำหรับการติดตั้ง Discord Bot และข้อมูลเกี่ยวกับสิทธิ์

ในหน้าเว็บที่เปิดขึ้นหลังจากที่คุณนำทางไปยัง URL ที่สร้างขึ้น ให้เลือกเซิร์ฟเวอร์ที่คุณต้องการติดตั้งบอท คลิก “ดำเนินการต่อ” เพื่อดำเนินการต่อ

ในหน้าจอถัดไป ให้คลิก "อนุญาต" หน้าเว็บจะแจ้งให้คุณยืนยันว่าคุณเป็นมนุษย์:

หน้าจอยืนยันการเพิ่มแอปพลิเคชันไปยังเซิร์ฟเวอร์ Discord

เมื่อทำตามขั้นตอนเหล่านี้เสร็จแล้ว ให้เปิดรายชื่อสมาชิกของเซิร์ฟเวอร์ คุณควรเห็นบอตของคุณแสดงรายการเป็นสมาชิก

การตั้งค่าสภาพแวดล้อมรหัสสนิม

ในส่วนนี้ ฉันจะแนะนำคุณตลอดการตั้งค่าสภาพแวดล้อมรหัสสนิมสำหรับบอท Discord ของคุณ สภาพแวดล้อมรหัสจะมีรหัสและแพ็คเกจที่จำเป็นสำหรับคุณในการเริ่มต้นสร้างบอท

ในการตั้งค่าโครงการ เราจะใช้เครื่องมือที่เรียกว่า Shuttle Shuttle ช่วยให้คุณเริ่มต้น สร้าง และปรับใช้โครงการต่างๆ ใน Rust

สำหรับโครงการนี้ เราจะใช้ Shuttle เพื่อเริ่มต้นโครงการ Serenity Serenity เป็นเฟรมเวิร์กสำหรับสร้างบอทแชท Discord ใน Rust

ในการเริ่มต้นโครงการ Serenity ให้สร้างไดเร็กทอรีใหม่สำหรับตำแหน่งที่คุณต้องการให้โครงการของคุณอยู่ จากนั้นติดตั้ง Shuttle ด้วยคำสั่งด้านล่าง:

cargo install cargo-shuttle

ถัดไป เริ่มต้นโครงการในไดเร็กทอรี:

cargo shuttle init --serenity

สุดท้าย สร้างโครงการ:

cargo build

หากคุณทำตามขั้นตอนเหล่านี้อย่างถูกต้อง คุณควรเห็นไดเร็กทอรีของคุณเต็มไปด้วยโค้ดที่จำเป็นสำหรับการเริ่มต้นใช้งาน

การเชื่อมต่อฐานข้อมูลรหัส Rust กับบอท Discord ของคุณ

โค้ดsrc/lib.rs— ที่เราสร้างขึ้นในส่วนที่แล้ว — เป็นโปรเจ็กต์พื้นฐานที่คุณสามารถเชื่อมต่อกับบอทของคุณ ซึ่งเราจะทำทีละขั้นตอนในส่วนนี้

ในการเชื่อมต่อรหัสของคุณกับบอทให้สำเร็จ คุณต้องได้รับโทเค็นบอทของคุณก่อน โทเค็นบอทคือการอ้างอิงถึงบอทของคุณ บอททุกตัวมีการอ้างอิงที่ไม่ซ้ำกันซึ่งคุณสามารถใช้เชื่อมต่อฐานรหัสกับบอทของคุณได้

ในการดึงโทเค็นบอทของคุณ ก่อนอื่นให้เปิดแดชบอร์ดสำหรับนักพัฒนา Discord คลิก “บอท” ในบานหน้าต่างนำทางด้านซ้าย จากนั้นคลิกปุ่ม "รีเซ็ตโทเค็น":

สร้างหน้าจอบอทของแดชบอร์ดผู้พัฒนา Discord พร้อมข้อมูลแอปพลิเคชันและปุ่มเพื่อรีเซ็ตโทเค็น

คลิก “คัดลอก” เพื่อคัดลอกโทเค็น:

สร้างหน้าจอ Bot ของแดชบอร์ดผู้พัฒนา Discord ด้วยโทเค็นที่สร้างขึ้นเพื่อเชื่อมต่อรหัสสนิมกับบอท Discord

หากต้องการเชื่อมต่อโค้ดเบสกับบอท ให้สร้างSecrets.tomlไฟล์ในไดเร็กทอรีรากของโปรเจ็กต์ เขียนสิ่งต่อไปนี้ลงในSecrets.tomlไฟล์และแทนที่* bot_token *ด้วยโทเค็นบอทของคุณ:

DISCORD_TOKEN="* bot_token *"

เรียกใช้โครงการด้วยคำสั่งนี้:

cargo shuttle run

ในตอนท้ายของขั้นตอนเหล่านี้ คุณควรเห็นบอท Discord ออนไลน์บนเซิร์ฟเวอร์ของคุณ หากคุณพิมพ์!helloบนเซิร์ฟเวอร์ บอทควรตอบกลับworld!ด้วย

หากต้องการทำความเข้าใจว่าบอทตอบสนองอย่างไร!helloให้ดูที่ตัวจัดการเหตุการณ์จากบรรทัดที่ 12–24 ของไฟล์src/lib.rs:

struct Bot;

#[async_trait]
impl EventHandler for Bot {
   async fn message(&self, ctx: Context, msg: Message) {
       if msg.content == "!hello" {
           if let Err(e) = msg.channel_id.say(&ctx.http, "world!").await {
               error!("Error sending message: {:?}", e);
           }
       }

   }

   async fn ready(&self, _: Context, ready: Ready) {
       info!("{} is connected!", ready.user.name);
   }
}

ตัวจัดการเหตุการณ์มีmessageเมธอดที่เรียกทุกครั้งที่มีคนส่งข้อความบนเซิร์ฟเวอร์ ฟังmessageก์ชั่นมีifการตรวจสอบการบล็อกหากข้อความใหม่ระบุว่า!hello:

if msg.content == "!hello" {
    if let Err(e) = msg.channel_id.say(&ctx.http, "world!").await {
        error!("Error sending message: {:?}", e);
    }
}

หากข้อความตรงกัน!helloโปรแกรมจะส่งworld!ข้อความกลับไปยังเซิร์ฟเวอร์พร้อมกับคำสั่งนี้:

msg.channel_id.say(&ctx.http, "world!").await

คุณสามารถตั้งโปรแกรมบอทให้ตอบกลับข้อความที่กำหนดเองด้วยการตอบกลับที่กำหนดเองตามขั้นตอนด้านบน

การสร้างคำสั่งสำหรับบอท Discord

คำสั่งเป็นวิธีที่ตรงกว่าในการโต้ตอบกับบอท ไม่เหมือนข้อความ คำสั่งเริ่มต้นด้วยเครื่องหมายทับ/— เช่น/hello

คุณสามารถส่งคำสั่งใน Discord ได้ด้วยวิธีเดียวกับที่คุณส่งข้อความ แต่เป็นวิธีที่นิยมใช้ในการโต้ตอบกับบอท เพราะคุณสามารถบอกได้อย่างง่ายดายว่าข้อความใดเป็นคำสั่งและข้อความใดไม่ใช่ข้อความ

ในการอนุญาตให้บอทของคุณตอบสนองต่อคำสั่ง คุณต้องมี ID ของเซิร์ฟเวอร์ที่คุณติดตั้งบอท ในการรับ ID เซิร์ฟเวอร์ คุณต้องเปิดใช้งานโหมดผู้พัฒนาในบัญชีของคุณก่อน

เปิดใช้งานโหมดผู้พัฒนาในบัญชี Discord ของคุณ

โหมดผู้พัฒนาคือการตั้งค่า Discord ที่ให้สิทธิ์ระดับสูงแก่นักพัฒนาในเซิร์ฟเวอร์ ในส่วนนี้ ฉันจะแนะนำคุณตลอดการเปิดใช้โหมดผู้พัฒนาในระบบของคุณ เพื่อให้คุณสามารถคัดลอก ID เซิร์ฟเวอร์ของคุณและเปิดใช้งานบอทของคุณเพื่อตอบสนองต่อคำสั่ง

บน Windows หรือ Mac

ที่ด้านล่างของหน้าต่าง คลิกไอคอนการตั้งค่าใกล้กับชื่อผู้ใช้ของคุณ ในบานหน้าต่างด้านซ้าย เลือก "ลักษณะที่ปรากฏ" ภายใต้ "การตั้งค่าแอป"

ในเมนูการตั้งค่ารูปลักษณ์ ให้คลิก "ขั้นสูง" เพื่อเปิดเมนูการตั้งค่าขั้นสูง ซึ่งคุณสามารถสลับตัวเลือก "โหมดนักพัฒนาซอฟต์แวร์" ได้ สุดท้าย คลิกขวาที่ชื่อเซิร์ฟเวอร์แล้วเลือก “คัดลอก ID” เพื่อคัดลอก ID เซิร์ฟเวอร์

บนลินุกซ์

ที่ด้านล่างของหน้าต่าง คลิกไอคอนการตั้งค่าใกล้กับชื่อผู้ใช้ของคุณ ในบานหน้าต่างด้านซ้าย เลือก "ขั้นสูง" ภายใต้ "การตั้งค่าแอป" เพื่อเปิดเมนูการตั้งค่าขั้นสูง ซึ่งคุณสามารถสลับตัวเลือก "โหมดนักพัฒนาซอฟต์แวร์" ได้

จากนั้น คลิกขวาที่ชื่อเซิร์ฟเวอร์แล้วเลือก “คัดลอก ID” เพื่อคัดลอก ID เซิร์ฟเวอร์:

การตั้งค่าแอปขั้นสูงที่ไม่ลงรอยกันเปิดใช้งานในโหมดนักพัฒนาโดยเปิดเมนูเซิร์ฟเวอร์และตัวเลือกในการคัดลอกรหัสเซิร์ฟเวอร์ที่ด้านล่างของรายการ

เปิดใช้งานบอทของคุณเพื่อตอบสนองต่อคำสั่ง

เมื่อ ID เซิร์ฟเวอร์พร้อม ให้ทำตามขั้นตอนเหล่านี้เพื่อให้บอทของคุณตอบสนองต่อคำสั่ง ขั้นแรก เขียนreadyวิธีการด้านล่างลงในตัวจัดการเหตุการณ์:

struct Bot;

#[async_trait]
impl EventHandler for Bot {
   async fn message(&self, ctx: Context, msg: Message) {
       // ...
   }
   
   // "EventHandler" calls the "ready" method below when the project starts running 
   async fn ready(&self, ctx: Context, ready: Ready) {
       info!("{} is connected!", ready.user.name);
       
       let guild_id = GuildId(* guild_id *);
       
       // add "/hello" command to the bot
       GuildId::set_application_commands(&guild_id, &ctx.http, |commands| {
           commands.create_application_command(|command| { command.name("hello").description("Say hello") })
       }).await.unwrap();

   }
}

ถัดไป เขียนinteraction_createตัวจัดการด้านล่างลงในตัวจัดการเหตุการณ์:

struct Bot;

#[async_trait]
impl EventHandler for Bot {
   async fn message(&self, ctx: Context, msg: Message) {
       // ...
   }
   // `ready` method runs when the bot starts
   async fn ready(&self, _: Context, ready: Ready) {
       // ...
   }
   // `interaction_create` runs when the user interacts with the bot
   async fn interaction_create(&self, ctx: Context, interaction: Interaction) {
       // check if the interaction is a command
       if let Interaction::ApplicationCommand(command) = interaction {

           let response_content =
               match command.data.name.as_str() {
                   "hello" => "hello".to_owned(),
                   command => unreachable!("Unknown command: {}", command),
               };
           // send `response_content` to the discord server
           command.create_interaction_response(&ctx.http, |response| {
               response
                   .kind(InteractionResponseType::ChannelMessageWithSource)
                   .interaction_response_data(|message| message.content(response_content))
           })
               .await.expect("Cannot respond to slash command");
       }
   }
}

ในreadyเมธอดของตัวจัดการเหตุการณ์ ให้แทนที่* guild_id *บรรทัดที่สามด้วย ID เซิร์ฟเวอร์ของคุณ

หากรหัสของคุณยังคงทำงานในเทอร์มินัล ให้รีสตาร์ท เมื่อคุณเห็นบอทของคุณออนไลน์บนเซิร์ฟเวอร์ ให้ส่ง/helloข้อความ คุณควรเห็นการตอบกลับจากบอตว่าhelloตอบกลับ

เช่นเดียวกับการตอบกลับข้อความ คุณสามารถตั้งโปรแกรมบอทของคุณให้ตอบสนองต่อคำสั่งที่กำหนดเองด้วยการตอบกลับที่กำหนดเองโดยทำตามขั้นตอนที่เรากล่าวถึงข้างต้น

การปรับใช้บอท Discord กับเซิร์ฟเวอร์ Shuttle

การดำเนินโครงการของคุณในระบบของคุณอาจมีข้อเสีย บอทที่ซับซ้อนมากขึ้นอาจต้องการทรัพยากรจำนวนมากเพื่อเรียกใช้และให้บริการผู้ใช้ทุกคน

การปรับใช้บอททำให้บอทได้รับประโยชน์จากการไม่ใช้ทรัพยากรของคอมพิวเตอร์ในการทำงาน นอกจากนี้ยังช่วยให้บอทของคุณออนไลน์ แม้ว่าคุณจะไม่ได้อยู่ก็ตาม

Shuttle ช่วยให้คุณสามารถปรับใช้บอทของคุณกับเซิร์ฟเวอร์ Shuttle ในการปรับใช้บอทของคุณ ให้รันคำสั่งนี้ในไดเร็กทอรีโปรเจ็กต์ของคุณ:

cargo shuttle deploy

บทสรุป

การสร้างบอทแชท Discord ใน Rust อาจเป็นงานที่ท้าทาย แต่ด้วยความรู้และเครื่องมือที่เหมาะสมก็สามารถทำได้โดยง่าย

ด้วยคำแนะนำทีละขั้นตอนในบทความนี้ ทุกคนที่มีประสบการณ์การเขียนโปรแกรมใน Rust และบัญชี Discord สามารถเรียนรู้วิธีสร้างบอทแชท Discord ของตนเองได้ หากคุณกำลังมองหาบอท Discord เพื่อสร้าง นี่คือแนวคิดบางประการ:

บอทต้อนรับเพื่อต้อนรับผู้ใช้ใหม่เข้าสู่เซิร์ฟเวอร์หรือแชนเนล
บอทเกมสำหรับเล่นเรื่องไม่สำคัญ แบบทดสอบ tic-tac-toe และเกมอื่นๆ
บอทสื่อที่เล่นเพลงหรืออนุญาตให้ผู้ใช้สร้างหรือเลือกวิดีโอ รูปภาพ หรือ GIF เพื่อแบ่งปัน
บอทสำรวจเพื่อช่วยผู้ใช้สร้างและส่งแบบสำรวจ
บอทยูทิลิตี้สำหรับการทำงานอัตโนมัติของเซิร์ฟเวอร์ เช่น การตอบคำถามที่พบบ่อย และอื่นๆ

หากต้องการอ่านเพิ่มเติมเกี่ยวกับบ็อต Rust Discord โปรดดู ตัวอย่างบ็ อต Serenity Discordหรือเอกสารประกอบของ Serenity

ที่มา: https://blog.logrocket.com

#rust #discord #chatbot

What is GEEK

Buddha Community

Zachary Palmer

1555901576

CSS Flexbox Tutorial | Build a Chat Application

Creating the conversation sidebar and main chat section

In this article we are going to focus on building a basic sidebar, and the main chat window inside our chat shell. See below.

Chat shell with a fixed width sidebar and expanded chat window

This is the second article in this series. You can check out the previous article for setting up the shell OR you can just check out the chat-shell branch from the following repository.

https://github.com/lyraddigital/flexbox-chat-app.git

Open up the chat.html file. You should have the following HTML.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chat App</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/chat.css" />
</head>
<body>
    <div id="chat-container">
    </div>
</body>
</html>

Now inside of the chat-container div add the following HTML.

<div id="side-bar">
</div>
<div id="chat-window">
</div>

Now let’s also add the following CSS under the #chat-container selector in the chat.css file.

#side-bar {
    background: #0048AA;
    border-radius: 10px 0 0 10px;
}
#chat-window {
    background: #999;
    border-radius: 0 10px 10px 0;
}

Now reload the page. You should see the following:-

So what happened? Where is our sidebar and where is our chat window? I expected to see a blue side bar and a grey chat window, but it’s no where to be found. Well it’s all good. This is because we have no content inside of either element, so it can be 0 pixels wide.

Sizing Flex Items

So now that we know that our items are 0 pixels wide, let’s attempt to size them. We’ll attempt to try this first using explicit widths.

Add the following width property to the #side-bar rule, then reload the page.

width: 275px;

Hmm. Same result. It’s still a blank shell. Oh wait I have to make sure the height is 100% too. So we better do that too. Once again add the following property to the #side-bar rule, then reload the page.

height: 100%;

So now we have our sidebar that has grown to be exactly 275 pixels wide, and is 100% high. So that’s it. We’re done right? Wrong. Let me ask you a question. How big is the chat window? Let’s test that by adding some text to it. Try this yourself just add some text. You should see something similar to this.

So as you can see the chat window is only as big as the text that’s inside of it, and it is not next to the side bar. And this makes sense because up until now the chat shell is not a flex container, and just a regular block level element.

So let’s make our chat shell a flex container. Set the following display property for the #chat-window selector. Then reload the page.

display: flex;

So as you can see by the above illustration, we can see it’s now next to the side bar, and not below it. But as you can see currently it’s only as wide as the text that’s inside of it.

But we want it to take up the remaining space of the chat shell. Well we know how to do this, as we did it in the previous article. Set the flex-grow property to 1 on the #chat-window selector. Basically copy and paste the property below and reload the page.

flex-grow: 1;

So now we have the chat window taking up the remaining space of the chat shell. Next, let’s remove the background property, and also remove all text inside the chat-window div if any still exists. You should now see the result below.

But are we done? Technically yes, but before we move on, let’s improve things a little bit.

Understanding the default alignment

If you remember, before we had defined our chat shell to be a flex container, we had to make sure we set the height of the side bar to be 100%. Otherwise it was 0 pixels high, and as a result nothing was displayed. With that said, try removing the height property from the #side-bar selector and see what happens when you reload the page. Yes that’s right, it still works. The height of the sidebar is still 100% high.

So what happened here? Why do we no longer have to worry about setting the height to 100%? Well this is one of the cool things Flexbox gives you for free. By default every flex item will stretch vertically to fill in the entire height of the flex container. We can in fact change this behaviour, and we will see how this is done in a future article.

Setting the size of the side bar properly

So another feature of Flexbox is being able to set the size of a flex item by using the flex-basis property. The flex-basis property allows you to specify an initial size of a flex item, before any growing or shrinking takes place. We’ll understand more about this in an upcoming article.

For now I just want you to understand one important thing. And that is using width to specify the size of the sidebar is not a good idea. Let’s see why.

Say that potentially, if the screen is mobile we want the side bar to now appear across the top of the chat shell, acting like a top bar instead. We can do this by changing the direction flex items can flex inside a flex container. For example, add the following CSS to the #chat-container selector. Then reload the page.

flex-direction: column;

So as you can see we are back to a blank shell. So firstly let’s understand what we actually did here. By setting the flex-direction property to column, we changed the direction of how the flex items flex. By default flex items will flex from left to right. However when we set flex-direction to column, it changes this behaviour forcing flex items to flex from top to bottom instead. On top of this, when the direction of flex changes, the sizing and alignment of flex items changes as well.

When flexing from left to right, we get a height of 100% for free as already mentioned, and then we made sure the side bar was set to be 275 pixels wide, by setting the width property.

However now that we a flexing from top to bottom, the width of the flex item by default would be 100% wide, and you would need to specify the height instead. So try this. Add the following property to the #side-bar selector to set the height of the side bar. Then reload the page.

height: 275px;

Now we are seeing the side bar again, as we gave it a fixed height too. But we still have that fixed width. That’s not what we wanted. We want the side bar (ie our new top bar) here to now be 100% wide. Comment out the width for a moment and reload the page again.

So now we were able to move our side bar so it appears on top instead, acting like a top bar. Which as previously mentioned might be suited for mobile device widths. But to do this we had to swap the value of width to be the value of height. Wouldn’t it be great if this size was preserved regardless of which direction our items are flexing.

Try this, remove all widths and height properties from the #side-bar selector and write the following instead. Then reload the page.

flex-basis: 275px;

As you can see we get the same result. Now remove the flex-direction property from the #chat-container selector. Then once again reload the page.

Once again we are back to our final output. But now we also have the flexibility to easily change the side bar to be a top bar if we need to, by just changing the direction items can flow. Regardless of the direction of flex, the size of our side bar / top bar is preserved.

Conclusion

Ok so once again we didn’t build much, but we did cover a lot of concepts about Flexbox around sizing.

#css #programming #webdev

วิโรจน์ ลุ่มน้ำพาน

1677159060