การแสดงภาพทีมที่กระจายโดยใช้ Felt

งานทางไกลอยู่ที่นี่แล้ว ความท้าทายประการหนึ่งของการทำงานจากระยะไกลคือเขตเวลาไม่ตรงกัน ลองนึกภาพคุณมี Software Engineer หนึ่งคนทำงานใน Bay Area และ Product Designer ที่ทำงานในโปรตุเกส ในฐานะพนักงานใหม่ สิ่งสำคัญสำหรับทุกคนคือต้องเข้าใจว่าเพื่อนร่วมทีมทำงานในเขตเวลาใด ซึ่งช่วยให้สมาชิกในทีมสามารถกำหนดเวลาการทำงานร่วมกันที่ทับซ้อนกัน ตั้งค่าการสื่อสารแบบ async ที่มีประสิทธิภาพ และป้องกันความล่าช้าเมื่อมีคนต้องการขอความช่วยเหลือเพื่อปลดบล็อก

ในความเห็นของฉัน คู่มือพนักงานทุกเล่มที่มีพนักงานน้อยกว่า 100 คนควรมีแผนที่ซึ่งพนักงานใหม่สามารถทราบได้อย่างรวดเร็วว่าเพื่อนร่วมงานของพวกเขาทำงานในเขตเวลาใด

กระบวนการ 3 ขั้นตอนที่ฉันใช้เพื่อสร้างแผนที่ของสมาชิกในทีมแบบกระจาย ซึ่งเกี่ยวข้องกับการสร้างเครื่องมือ CSV Geocoder ซึ่งใช้ในการแปลงสเปรดชีตให้เป็นหนึ่งเดียวด้วยพิกัดละติจูดและลองจิจูดเพิ่มเติม การเพิ่มแบบฟอร์มที่ผู้ใช้สามารถอัปโหลด CSV ของตนไป และการสร้าง การสร้างภาพข้อมูลภายใน Felt a mapping tool

1. การสร้างเครื่องมือ Geocoder CSV

Geocoding เป็นกระบวนการในการอธิบายหรือข้อความของสถานที่และแปลงเป็นพิกัดทางภูมิศาสตร์ เช่น ละติจูดและลองจิจูด

ในกรณีส่วนใหญ่ ข้อมูลตำแหน่งที่ตั้งที่คุณมีของสมาชิกในทีมประกอบด้วยที่อยู่ เมือง รัฐ หรือประเทศ ในการแสดงเครื่องหมายบนแผนที่ คุณต้องแปลข้อมูลตำแหน่งที่ระบุเป็นพิกัดทางภูมิศาสตร์ (ละติจูด ลองจิจูด) คุณอาจไม่ต้องการสร้างเครื่องหมายด้วยตนเองแม้ว่าจะทำได้ง่ายใน Felt ฉันได้กำหนดให้ส่วนหนึ่งของกระบวนการนี้เป็นไปโดยอัตโนมัติ

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

ภายใต้ประทุน เซิร์ฟเวอร์ Node.js ที่ฉันตั้งค่าให้ทำงานต่อไปนี้โดยใช้ไลบรารีที่เป็นที่นิยม เช่น Express, Multer และ Fast-csv

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

2. สร้างแบบฟอร์มเพื่ออัปโหลด CSV

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

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

<form method="POST" action="/submit" encType="multipart/form-data">
                <h1>CSV Geocoder</h1>
                <div>
                  <input type="file" id="file" name="geocode" required accept='.csv' />
                </div>
                <br>
                <div>
                  <button>Upload</button>
                </div>
              </form>

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

สิ่งที่น่าสนใจสุดท้ายที่ฉันอยากจะสำรวจในอนาคต...

1. สถานที่ใดที่เท่ากันมากที่สุดสำหรับสมาชิกในทีมที่จะจัดงานนอกสถานที่
2. การรวม Geocoding API แบบโอเพ่นซอร์สเข้ากับที่อยู่
3. เพิ่มตัวเลือก Reverse Geocoding
4. การจัดการข้อผิดพลาดที่มีประสิทธิภาพ (ไม่มีข้อมูลเซลล์ ส่วนหัวตารางไม่ถูกต้อง/ไม่มีข้อมูล)

ฉันจะมองหาการปรับใช้ในช่วงปลายสัปดาห์หลังจากทำ TLC บางอย่างเกี่ยวกับการออกแบบและเพิ่มการจัดการข้อผิดพลาดเพิ่มเติมบนเซิร์ฟเวอร์สำหรับกรณีขอบ!

ตรวจสอบแผนที่บน Felt:

คุณมีคำถามหรือข้อเสนอแนะ? ฉันชอบที่จะได้ยินมัน!

อีเมล์: [email protected]

ทวิตเตอร์:https://twitter.com/duckduckquy

รู้สึก:https://felt.com/

แหล่งข้อมูล:https://www.kaggle.com/datasets/juanmah/world-cities