Использование OrgChartJS для визуализации 8 поколений - более 160 родственников - в моем генеалогическом древе

Применение навыков программирования в личных проектах. Охватываемые технологии: OrgChartJS, JavaScript / React, MongoDB и Heroku.

Не каждый день удается применить свои навыки программирования в личном проекте. В январе этого года я сделал именно это: я использовал свои навыки веб-разработки, чтобы создать приложение / веб-сайт, который визуально отображает историю моей семьи на протяжении 8 поколений из более чем 160 человек, вплоть до конца 1800-х годов! В этой статье мы рассмотрим мотивацию моего проекта, то, как я выбирал инструменты, процесс разработки, краткий обзор окончательный результат и что я буду делать дальше для продвижения проекта.

Итак, зачем строить собственное генеалогическое древо?

  1. Запечатлейте мое прошлое, настоящее и будущее - когда я был маленьким мальчиком в Зимбабве, я всегда увлекался семейной историей, мне было любопытно те, кто был до меня. С какими проблемами они столкнулись? Что заставило их улыбнуться или полюбить? Знать свою семейную историю - это привилегия, и это дает чувство заземления, отличное от всего, что я испытал. Некоторые говорят, что если вы не знаете, откуда вы идете, трудно иметь четкое представление о том, куда вы идете!
  2. Поделитесь с моей семьей - эта семейная история предназначена для того, чтобы их могли делиться, строить и поддерживать те, кому она небезразлична - моя семья и родственники - все 167 человек! Это точка связи, воспринимайте ее как версию социальных сетей для нашей семьи. В глобальном мире, где мы все рассеяны по Зимбабве и в диаспоре, я чувствую, что наши потомки будут благодарить нас за то, что мы отслеживаем эту информацию, несмотря на физическое расстояние между нами.
  3. Текущие альтернативы неадекватны - мое исследование текущих веб-сайтов и приложений, посвященных семейной истории, генеалогическому древу и родословным крупных брендов, выявило большой пробел - в этой базе данных нет никаких записей об африканцах. Моя семья не приехала в США на Mayflower, поэтому их записи не попадают на крупные сайты, и любые поиски бесполезны. С точки зрения сбора данных текущие рыночные альтернативы были для меня бесполезны.
  4. Сохраняйте нашу конфиденциальность - это БОЛЬШОЙ! Создание собственного приложения позволяет вам контролировать данные и сохранять их в безопасности, особенно с учетом того, что сведения о семье являются одними из самых конфиденциальных материалов, которые можно опубликовать. Я не знаю, что все существующие коммерческие приложения делают с моими данными, поэтому я предпочитаю держаться подальше и реализовать собственное решение.
  5. Совершенствуйте свои навыки - наконец, я многому научился, самостоятельно исследуя и реализуя первый черновик с нуля. Но в конечном итоге способность использовать и понимать служебные библиотеки, такие как OrgChartJS, показала мне, что возможно и как я могу использовать это, не тратя недели на один проект. Я также лучше познакомился со структурами данных javascript и другими функциями во время устранения неполадок.

Выбор подходящего инструмента для работы - OrgChartJS

Я использую JavaScript более 4 лет и недавно научился использовать библиотеку React. Итак, моей первой попыткой было создать простую версию с нуля, но она была не такой приятной на вид, и потребовалось много времени, чтобы встроить все необходимые мне функции, такие как поиск, масштабирование, бесшовное соединение между ветвями деревьев и листьями. Я также пробовал другие библиотеки диаграмм с иерархической визуализацией, но они не попали в цель. Не каждый проект требует, чтобы вы начинали с нуля - вам нужно выбрать правильный инструмент для работы, чтобы выполнить его с максимальной эффективностью. Итак, я, наконец, остановился на библиотеке Balkan OrgChartJS, в которой были лучшие визуальные эффекты и код plug-and-play.

Процесс разработки проекта

Этот проект состоит из 4 основных частей: сбор данных, внешний интерфейс, серверный модуль и хостинг / развертывание.

  1. Сбор данных - это включало обращение ко всем моим родственникам, чтобы они предоставили мне информацию, чтобы заполнить пробелы. Мы выбрали представителя, обычно первенца, из каждой ветви семьи, и было более эффективно координировать действия с этим ответственным лицом, чтобы получить информацию для всей ветви.
  2. Интерфейс / взаимодействие с пользователем - я использовал JavaScript и React для настройки проекта (использовал надежную утилиту create-react-app), а затем загрузил файл OrgChart.js с https : //balkangraph.com/js/latest/OrgChart.js поместив его в мою папку public / scripts вместе с моим файлом main.js. Ниже представлена ​​структура моей папки: (i) архив - содержит файлы старого кода. (ii) контроллеры - содержит файл с функцией для входа и выхода пользователя; (iii) модели - содержит пользовательские функции, взаимодействующие с базой данных, например CRUD, а также любые проверки и чистки. пользовательских данных, (iv) общедоступные - папки с изображениями, скриптами и стилями. В папке Scripts есть файлы orgchart.js и main.js, (v) views - содержит файлы .js для домашней страницы и древовидной страницы.

2. Бэкэнд / управление данными - я использовал MongoDB для обработки логики имени пользователя. Нам нужен только один набор учетных данных для всей семьи, поскольку я ожидаю только периодический трафик. Что касается данных генеалогического древа, я сохраняю их как обычный объект в файле main.js. Это не лучшая практика, но она подойдет для этой версии MVP. Начальные демонстрации настройки объекта и связывания с функциями OrgChartJS см. Здесь: https://balkan.app/OrgChartJS-Demos/.

3. Хостинг / развертывание - Я использовал Heroku для хостинга / развертывания. Это было быстро, легко и бесплатно!

Теперь взглянем на окончательный результат!

Конечный результат

1. Целевая страница

Не так уж плохо, он выполняет свою работу!

2. Страница семейного древа

Я был доволен результатами, поэтому сделал частное обучающее видео на YouTube и отправил своей большой семье вместе с учетными данными. Всем им понравились все предлагаемые функции - например, поиск, масштабирование, всплывающее окно с листовым узлом и т. д.

Следующие шаги

Мы концептуально изучили, как разработать частное генеалогическое древо с использованием OrgChartJS, Javascript / React, MongoDB и развертывания на Heroku. Мой главный вывод из этого опыта заключался в том, как выбрать подходящий инструмент для работы - быть разработчиком не означает, что вы должны «разрабатывать» все с нуля. Если вы понимаете основы, вы можете использовать имеющиеся у вас служебные библиотеки. Моя семья и родственники могут с удовольствием исследовать свою родословную. В будущем я планирую добавить такие функции, как возможность (i) загружать фотографии, (ii) дату рождения или смерти, (iii) адреса , (iv) биографические заметки и т. д.

Поделитесь статьей и напишите ниже, что вы думаете об этом подходе или если у вас есть вопросы. Для меня это был отличный познавательный опыт, и у меня есть классный, значимый продукт, который я могу показать.

Удачного кодирования!