【个人开发】我开发了一个应用程序，可以比较GitHub上我种植的草与日本山脉的海拔高度！

2 年 ago

韵, 科

2 minutes

首先

你好！我是@muramyy1！我从制造商的销售职位转行至未经验的工程师职位。
由于我正在学习编程，所以可能在技术内容上含有错误。
如果有任何错误的描述，请在评论中告诉我。谢谢！

服务名称：草坪修剪山雄

开发的背景

在追求成为一名工程师、提升技术能力的过程中，我认为难免会遇到无法保持动力的时候。为了激发更多学习的欲望，我思考着通过将以往学习中所写的代码与现实中的实际项目进行比较，来开发一种解决方法。

服务概要

为了保持编程学习者的学习动力，我们提供了一项名为GitHub草刈高度比的学习动力服务，该服务允许学习者修剪在GitHub上种植的草，并将其堆积起来，然后将高度与日本的山峰高度进行比较。特别是，服务名称与功能无关。

服务的使用方法 de

只需输入GitHub账户名，即可获取贡献数量，可视化自己的学习进展。
此外，通过GitHub登录，您还可以记录草刈历史。

工作的重点和困难之处

不需要登录即可使用该服务。

本服务采用GitHub验证，成为一个可以登录的服务。
考虑到认证难度较高的用户，我们也提供了部分功能无需登录即可使用的选项。

2. 更改按山的海拔高度显示的标记

根据地图上显示的山峰海拔将标记进行分类，如上图所示。
以下的代码实现了这一功能。
没有什么困难的地方，只是做了条件判断而已w

// マーカーの設定
      const markerOption = {
        position: markerLatLng,　 // 緯度経度の値
        map,
        icon: function(){
                if (mountains[i]['elevation'] >= 3000) {
                  return {
                    url: "<%= asset_path '画像' %>",
                  }; 
                } else if (mountains[i]['elevation'] >= 2500) {
                  return {
                    url: "<%= asset_path '画像' %>",
                  };
                } else if (mountains[i]['elevation'] >= 2000) {
                  return {
                    url: "<%= asset_path '画像' %>",
                  };
                } else if (mountains[i]['elevation'] >= 1000) {
                  return {
                    url: "<%= asset_path '画像' %>",
                  };
                } else {
                  return {
                    url: "<%= asset_path '画像' %>",
                  };
                }
              }(),
      };

3. 宝石GraphQL客户端

什么是GraphQL？我们起步于GraphQL是什么？但最终成功地实现了它。
这次我们使用了graphql-client来获取GitHub的贡献数量，但似乎也可以使用octkit。可见我们的调查不够充分…

请查看以下页面以获取实施细节：
https://github.com/github/graphql-client

引入graphal-client

gem "graphql-client"

将 GraghQL 查询、gem 配置等封装成一个模块。

module GraphqlApi
  extend ActiveSupport::Concern

  included do
    AUTH_HEADER = "Bearer #{ENV['GITHUB_ACCESS_TOKEN']}"

    HTTPAdapter = GraphQL::Client::HTTP.new("URLを入力する") do
      def headers(context)
        { "Authorization": AUTH_HEADER }
      end
    end
    Schema = GraphQL::Client.load_schema(HTTPAdapter)
    Client = GraphQL::Client.new(schema: Schema, execute: HTTPAdapter)

    TotalContributionsQuery = Client.parse <<-'GRAPHQL'
      query($user: String!) {
        user(login: $user) {
          contributionsCollection {
            contributionCalendar {
              totalContributions
            }
          }
        }
      }
    GRAPHQL
  end

  private

  def self.graphql_result(query, variables = {})
    Client.query(query, variables:).data
  end
end

将获取的数据提取出来。
用户：通过写入某些内容，可以动态地更改查询。我认为最好阅读官方文档以了解更多信息。
请使用蛇形命名法而不是驼峰命名法进行书写。

api_result = GraphqlApi.graphql_result(GraphqlApi::TotalContributionsQuery, user: account_name).user.contributions_collection.contribution_calendar.total_contributions

主要的使用技术

后端

Ruby on Rails 7.0.4

前端

Tailwind css
daisyUI

主要的库 de

kaminari

基础设施

PostgreSQL(データベース)

其他

GoogleMapsAPI

有关技术选择的问题

为了尽快发布，我用我主要学习的Ruby on Rails进行了开发。为了不浪费时间在前端和外观上，我引入了daisy UI。虽然它是流行的tailwind CSS，但它有很多方便的模板，而且非常容易实现响应式设计，所以我可以轻松进行开发，没有压力。

开发时期

本リリースまで1ヶ月

最后

虽然服务还有需要改善的地方，但从零开始创建服务并体会个人服务开发的乐趣。另外，在撰写技术文章的过程中也会不断涌现出一些“如果能这样做就好了”之类的想法，我希望能将这些想法应用于未来的服务改进中。

非常感谢您阅读这篇拙劣的文章！我知道有很多地方可以挑刺，但请在评论中表达出来哈哈