이 모든 것은 9월 어느 날 밤 충전소를 찾지 못한 데서 시작되었습니다...
사실 그 전에도 이미 南哪充电 웹페이지가 있었습니다: https://charge.zhuxh.net/

하지만 개인적으로 사용하기에는 조금 아쉬웠습니다. 어디에 빈 자리가 있는지 한눈에 볼 수는 있었지만, 충전소가 너무 부족해서 충전하려고 할 때면 전부 빨간색이거나, 유일하게 초록색인 곳이 멀리 떨어져 있는 경우가 많았습니다.
그래서 저도 직접 만들기로 했습니다. 예상 남은 시간을 표시해서 미리 대기할 수 있도록 말이죠 ~~, 여러분을 앞지르겠습니다~~

백엔드 데이터 크롤링

크롤링은 저에게 비교적 간단합니다. 이미 여러 크롤링 관련 프로젝트를 진행했으니까요. Reqable 실행!

충전소 ID 가져오기

먼저 闪开来电의 여러 요청 중에서 난징대학교 셴린 캠퍼스의 충전소를 필터링하여 충전소의 station_id를 얻습니다. 이 단계는 순수하게 수동으로 기록했습니다. 구체적인 id는 다음과 같습니다:

https://github.com/Do1e/NJUCharge-backend/blob/main/stations.json

각 충전소의 콘센트 ID 가져오기

이전 단계에서는 충전소가 33개뿐이라 수동 기록도 괜찮았지만, 302개의 콘센트 ID까지 수동으로 기록하는 것은 용서해 주세요.
2025년 6월 16일 작성: 왜 새로 추가된 충전소들은 대부분 한 충전소에 콘센트가 두 개뿐이어서 오늘 station_id를 한참 수동 기록해야 했습니다. 현재 셴린 캠퍼스에는 누적 112개 충전소, 724개 콘센트가 있습니다.
f'https://wemp.issks.com/charge/v1/outlet/station/outlets/{station_id}'에서 각 충전소의 정보를 얻을 수 있으며, 여기에는 콘센트 id가 포함됩니다.

https://github.com/Do1e/NJUCharge-backend/blob/main/utils/per_station.py

드디어 각 콘센트 상태 가져오기

이전 단계에서 각 충전소(예: 천문학과) 아래의 모든 충전 콘센트 outletNo를 얻을 수 있습니다. 이 단계에서는 outletNo를 바탕으로 f'https://wemp.issks.com/charge/v1/charging/outlet/{outletNo}'에서 각 콘센트의 구체적인 상태를 가져옵니다!

응답 예시:

CodeBlock Loading...

사실 그 안에는 불필요한 정보가 많습니다. 저는 여기서 콘센트 이름, 예상 남은 시간, 사용 시간, 상태 코드(空闲, 故障, 분당 과금 모드, 고정 금액 모드), 오류 정보 유무 정도만 가져왔습니다. 동시에 프론트엔드에서 바로 표시할 수 있도록 예상 사용 가능 시간을 계산했습니다(제 프론트엔드 실력이 너무 약해서요). 코드는 다음과 같습니다:

https://github.com/Do1e/NJUCharge-backend/blob/main/utils/per_outlet.py

다행히도 상태를 가져오는 이 단계에는 토큰이 필요하지 않으며, 각 충전소 아래의 콘센트는 완전히 고정되어 있습니다. 이후 데이터 업데이트는 기존의 outletNo에 따라 이 단계를 반복하기만 하면 됩니다.

데이터 후처리

직접 배포할 때는 멀티스레딩(302개 데이터를 약 2초 만에 처리, 실제 테스트 결과 리스크 컨트롤도 발동하지 않음)을 사용하여 백엔드 머신에서 1분마다 데이터를 업데이트했습니다.
프론트엔드 호출 편의를 위해 백엔드에서 데이터를 남은 시간 순으로 정렬하고, 충전소 분류를 기존 xx号机에서 xx栋으로 변경했습니다:

https://github.com/Do1e/NJUCharge-backend/blob/main/sort_outlets.py

첫 번째 프론트엔드

프론트엔드 초보인 저의 첫 번째 프론트엔드는 Python으로 생성했습니다. ＞︿＜
여러분께 웃음을 선사합니다.

CodeBlock Loading...

게다가 인터페이스도 상당히 조잡했지만, 그래도 GPT의 도움으로 충전소 필터링을 위한 js 코드를 생성할 수 있었습니다.

두 번째 프론트엔드

소위 두 번째 버전은 단지 몇 줄의 css를 작성하여 이 인터페이스를 구제하려고 노력한 것뿐입니다.

세 번째 프론트엔드

저는 새로운 개인 홈페이지를 만들기 시작했습니다. Mix Space가 Markdown with JavaScript를 지원하므로 /charge.html을 개인 홈페이지 아래에 걸어두고, 기존 필터 기능도 개선했습니다. 필터링 시 URL 파라미터를 변경하여 새로고침 후에도 사용자가 마지막으로 필터링한 충전소를 기억하고 바로 표시할 수 있게 했습니다.

CodeBlock Loading...

네 번째 프론트엔드

첫 번째 버전부터 테이블로 표시했기 때문에 위의 그림에서도 알 수 있듯이, 더 자주 사용되는 모바일 환경에서의 경험은 정말 말로 표현하기 어려웠습니다. 그래서 반나절 동안 UI를 재구성하기로 결심하고, 시작 부분에 통계 테이블을 추가하여 충전 목적지를 더 편리하게 계획할 수 있도록 했습니다.

기본적으로 모든 프론트엔드 및 백엔드 코드는 아래 GitHub 저장소에 있습니다. 사용을 환영하지만 MIT 라이선스를 준수하고, 사용 시 제 저작권 정보를 유지해 주세요.

NJUCharge-backend5

南哪充电后端（其实也有前端示例）

HTML

후속 소규모 업데이트

2024-12-01: 구러우 캠퍼스 추가.
2025-01-07: 오늘 갑자기 충전하려면 충전 후 분당 과금으로 변경된 것을 발견했습니다. 이런. 사용 시간 역순으로 업데이트하고, 闪开充电에서 제공하는 설명에 따르면 이 시간은 최대 480분이므로, 적어도 어느 충전기가 곧 끝날지 대략 알 수 있는 참고 자료가 됩니다.
2025-02-22: 분당 과금 모드에서 사용자가 선충전 금액을 직접 선택할 수 있게 되어, 이를 바탕으로 예상 사용 가능 시간을 추정할 수 있게 되었습니다. 하지만 일부 사용자는 완전 충전을 위해 높은 금액을 선택할 수 있고, 인터페이스 반환 값의 정밀도로 인해 최종 계산 정밀도가 낮으므로 참고용으로만 사용하세요. 전력량 과금 모드도 이론적으로 추정 가능하지만, 인터페이스에서 직접 전력을 읽을 수 없어 현재는 작성하지 않았습니다.
2025-06-16: 구러우 및 셴린에 여러 충전소 추가. (콘센트 수 변화: 구러우 148->308, 셴린 302->724)
2025-06-22: 시스템 설정 최대 충전 시간이 480분인 것으로 보여, 이를 바탕으로 남은 시간 예측을 수정했습니다.
2025-09-09: 과거 충전 기록 기능 삭제.
2025-10-11: 충전소 업데이트.

제가 만든 南哪充电-鼓楼 또는 南哪充电-仙林에 방문해 주세요.

이 모든 것은 9월 어느 날 밤 충전소를 찾지 못한 데서 시작되었습니다...
사실 그 전에도 이미 南哪充电 웹페이지가 있었습니다: https://charge.zhuxh.net/

백엔드 데이터 크롤링

크롤링은 저에게 비교적 간단합니다. 이미 여러 크롤링 관련 프로젝트를 진행했으니까요. Reqable 실행!

충전소 ID 가져오기

https://github.com/Do1e/NJUCharge-backend/blob/main/stations.json

각 충전소의 콘센트 ID 가져오기

https://github.com/Do1e/NJUCharge-backend/blob/main/utils/per_station.py

드디어 각 콘센트 상태 가져오기

응답 예시:

JSON

{
  "code": "1",
  "msg": "成功",
  "data": {
    "userName": null,
    "supportPayType": null,
    "monthlyDetail": {
      "monthlyPlanId": null,
      "renewFlag": false,
      "districtName": null,
      "hasUserMonthlyPlan": 0,
      "whiteMonthly": false,
      "districtWhite": false,
      "hasDistrictMonthlyPlan": 0,
      "monthlyUsedChargingLength": 0,
      "isMonthlyPlanAvailable": 0,
      "availableChargingTime": 0,
      "expiresTime": null,
      "iType": null,
      "iDistrictId": 18877,
      "dLimitPower": null,
      "iParkId": null,
      "wuYou": 0
    },
    "version": 3,
    "business": {
      "businessDays": null,
      "businessInTime": 1,
      "businessopen": 0,
      "tBusinessStart": null,
      "tBusinessEnd": null,
      "businessType": null
    },
    "outlet": {
      "iOutletId": 1435883,
      "vOutletName": "插座7",
      "iState": 1,
      "iCurrentChargingRecordId": 0,
      "vOutletNo": "O230424025883180",
      "iErrorCount": 0
    },
    "station": {
      "iStationId": 161740,
      "iAreaId": 786688,
      "iFullChargingTime": 0,
      "vStationName": "南京大学仙林校区18栋1号机",
      "iState": 1,
      "iHardWareState": "在线",
      "hardWareState": 1
    },
    "billListDtoList": [
      {
        "billingType": 4,
        "billingTypeName": "固定金额模式",
        "proAmount": 1.0,
        "startPriceCountIndex": 0,
        "propertyList": [
          {
            "iPowerLimitStr": 0,
            "iPowerLimitEnd": 120,
            "dFeePerMin": 1.0,
            "dFeePerHour": 60.0,
            "iHour": 6.0,
            "dDisCountFeePerMin": null,
            "dDisCountFeePerHour": null,
            "vStartTime": null,
            "vEndTime": null,
            "iType": 3
          },
          {
            "iPowerLimitStr": 121,
            "iPowerLimitEnd": 900,
            "dFeePerMin": 1.0,
            "dFeePerHour": 60.0,
            "iHour": 5.0,
            "dDisCountFeePerMin": null,
            "dDisCountFeePerHour": null,
            "vStartTime": null,
            "vEndTime": null,
            "iType": 3
          },
          {
            "iPowerLimitStr": 0,
            "iPowerLimitEnd": 900,
            "dFeePerMin": 2.0,
            "dFeePerHour": 120.0,
            "iHour": 10.0,
            "dDisCountFeePerMin": null,
            "dDisCountFeePerHour": null,
            "vStartTime": null,
            "vEndTime": null,
            "iType": 3
          }
        ],
        "isDefaultBilling": 1,
        "showMaxPowerInfo": 1
      }
    ],
    "staff": {
      "tBeginTime": null,
      "tEndTime": null,
      "isDisFree": 0,
      "isFree": 0,
      "freeType": 0,
      "ruleTimes": null
    },
    "banners": [
      {
        "iBannerId": 342,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2023-03-08/it01on9v1gr9o5mo.png",
        "vHref": "https://api.issks.com/issksh5/?#/activityPage/pages/yearCardPage/yearCardPage",
        "iImgUrlType": 1,
        "iLinkMiniApp": 0,
        "vOriginalId": "",
        "vMiniAppId": null,
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      },
      {
        "iBannerId": 404,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2024-11-19/xdaecvf5cijrldxu.jpg",
        "vHref": "https://mp.weixin.qq.com/s/SwNDfydkbIvfmrki3G3FMQ",
        "iImgUrlType": 1,
        "iLinkMiniApp": 0,
        "vOriginalId": "",
        "vMiniAppId": null,
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      },
      {
        "iBannerId": 427,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2024-11-08/5g190u60qsvrb2oe.jpg",
        "vHref": "https://api.issks.com/issksh5/?#/sonPage/pages/batteryReport/batteryReport",
        "iImgUrlType": 1,
        "iLinkMiniApp": 0,
        "vOriginalId": "",
        "vMiniAppId": null,
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      },
      {
        "iBannerId": 384,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2024-11-15/yu1xh86jqzy7wb5x.jpg",
        "vHref": "https://shop-sksop.issks.com",
        "iImgUrlType": 1,
        "iLinkMiniApp": 1,
        "vOriginalId": "gh_6f1e4731d3ad",
        "vMiniAppId": "wx14dcf42b12d3f02c",
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      },
      {
        "iBannerId": 347,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2023-04-10/asurox92j5of1vfb.gif",
        "vHref": "https://zf.shanghcat.com/tdpl/index?cid=94825049&pln=14580873",
        "iImgUrlType": 1,
        "iLinkMiniApp": 0,
        "vOriginalId": "",
        "vMiniAppId": null,
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      },
      {
        "iBannerId": 420,
        "iType": 1,
        "vImgUrl": "/skoms/doc/2024-09-29/b9skyf6l9ul268wq.jpg",
        "vHref": "https://mp.weixin.qq.com/s/HKuy_UFI5y2832YVOLTtzQ",
        "iImgUrlType": 1,
        "iLinkMiniApp": 0,
        "vOriginalId": "",
        "vMiniAppId": null,
        "iLinkType": "EXTERNAL_LINK",
        "iSecond": 0,
        "vRemark": null
      }
    ],
    "popups": null,
    "floatBanner": null,
    "powerFee": null,
    "usedMonthly": 0,
    "type": 0,
    "pageViewType": "common",
    "curTime": 1732984774218,
    "registerMobile": null,
    "presetLastTime": 0,
    "restmin": 0,
    "usedmin": 0,
    "usedfee": null,
    "currentUser": null,
    "cardfunds": 0,
    "funds": 0.0,
    "safeOpenFlag": 1,
    "closeWuyouSwitch": 0,
    "safeOpenFee": 0.09,
    "safeChargingOpen": 0,
    "nowBillingType": 0,
    "electric": 0,
    "chargingBeginTime": null,
    "normalMonthParkRecord": 0,
    "smartMonthParkRecord": 0,
    "chargeDiscount": null,
    "fixedAmount": {
      "amountList": [
        1.0,
        2.0
      ],
      "defaultAmountIndex": 1,
      "defaultPowerIndex": 2
    },
    "universityProperty": {
      "options": [
        "1",
        "2",
        "3"
      ],
      "maxOption": "20",
      "minOption": "3"
    },
    "noticeType": 0,
    "noticeContent": null,
    "availableNotice": 0,
    "urlLink": null,
    "available": 0,
    "userSelectAmount": null,
    "isCloseWuYou": 0,
    "canCopy": null,
    "nationalStandard": 0,
    "buttonType": 1,
    "helpMobile": null,
    "title": null,
    "managerPriceIsHour": 0,
    "activityContent": null,
    "qrcoed": 0,
    "subscribed": 0,
    "districtId": 18877,
    "showMinute": 0,
    "tags": [
      "UNIVERSITY"
    ],
    "secondaryCardGuide": 0,
    "secondaryCardNum": null,
    "averageAmount": null,
    "secondaryCardMinAmount": null,
    "text": null,
    "alipayUrl": "https://t.bfr2.top/p18OoKF",
    "weather": null,
    "weatherType": null,
    "tianMu": false
  },
  "success": true
}

CodeBlock Loading...

https://github.com/Do1e/NJUCharge-backend/blob/main/utils/per_outlet.py

데이터 후처리

https://github.com/Do1e/NJUCharge-backend/blob/main/sort_outlets.py

첫 번째 프론트엔드

프론트엔드 초보인 저의 첫 번째 프론트엔드는 Python으로 생성했습니다. ＞︿＜
여러분께 웃음을 선사합니다.

PYTHON

import json

with open("output/outlets.json", "r", encoding="utf-8") as f:
    outlets = json.load(f)

keys = ["station", "name", "restmin", "available_time", "usedmin", "msg", "update_time"]
station_options = set()
for outlet in outlets:
    station_options.add(outlet["station"])
station_options = list(station_options)
station_options.sort()


html = '<div class="filter-container"><label for="filter-station">选择站点:</label><select id="filter-station"><option value="">All</option>'
for station in station_options:
    html += f'<option value="{station}">{station}</option>'
html += "</select></div>"

html += "<table>\n<thead>\n<tr>\n"
for key in keys:
    html += f"<th>{key}</th>"
html += "</tr>\n</thead>\n<tbody>\n"

for outlet in outlets:
    html += "<tr>"
    for key in keys:
        if key == "msg" and outlet[key] == "空闲":
            html += f'<td class="status-available">{outlet[key]}</td>'
        elif key == "msg" and outlet[key] == "故障":
            html += f'<td class="status-error">{outlet[key]}</td>'
        elif key == "msg":
            html += f'<td class="status-busy">{outlet[key]}</td>'
        elif key == "restmin" and outlet[key] < 20:
            html += f'<td class="status-available">{outlet[key]}</td>'
        else:
            html += f'<td class="tdnormal"><span>{outlet[key]}</span></td>'
    html += "</tr>\n"
html += "</tbody>\n</table>"

with open("html_template.html", "r", encoding="utf-8") as f:
    template = f.read()
    html = template.replace("{{table}}", html)

with open("index.html", "w", encoding="utf-8") as f:
    f.write(html)

CodeBlock Loading...

게다가 인터페이스도 상당히 조잡했지만, 그래도 GPT의 도움으로 충전소 필터링을 위한 js 코드를 생성할 수 있었습니다.

두 번째 프론트엔드

소위 두 번째 버전은 단지 몇 줄의 css를 작성하여 이 인터페이스를 구제하려고 노력한 것뿐입니다.

세 번째 프론트엔드

var filter = document.getElementById('filter-station');
var urlParams = new URLSearchParams(window.location.search);
var initialFilter = urlParams.get('filter') || '';
filter.value = initialFilter;
filterTable();

filter.addEventListener('change', function () {
  var selectedValue = filter.value;
  if (selectedValue === '') {
    urlParams.delete('filter');
  } else {
    urlParams.set('filter', selectedValue);
  }
  if (urlParams.toString() === '') {
    window.history.replaceState({}, '', location.pathname);
  } else {
    window.history.replaceState({}, '', `${location.pathname}?${urlParams}`);
  }
  filterTable();
});

function filterTable() {
  var rows = document.getElementsByTagName('tr');
  for (var i = 1; i < rows.length; i++) {
    var row = rows[i];
    var name = row.children[0].textContent.toLowerCase();
    var nameFilter = filter.value.toLowerCase();
    if (name.indexOf(nameFilter) !== -1 || nameFilter === '') {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  }
}

CodeBlock Loading...

네 번째 프론트엔드

NJUCharge-backend5

南哪充电后端（其实也有前端示例）

HTML

후속 소규모 업데이트

2024-12-01: 구러우 캠퍼스 추가.
2025-01-07: 오늘 갑자기 충전하려면 충전 후 분당 과금으로 변경된 것을 발견했습니다. 이런. 사용 시간 역순으로 업데이트하고, 闪开充电에서 제공하는 설명에 따르면 이 시간은 최대 480분이므로, 적어도 어느 충전기가 곧 끝날지 대략 알 수 있는 참고 자료가 됩니다.
2025-02-22: 분당 과금 모드에서 사용자가 선충전 금액을 직접 선택할 수 있게 되어, 이를 바탕으로 예상 사용 가능 시간을 추정할 수 있게 되었습니다. 하지만 일부 사용자는 완전 충전을 위해 높은 금액을 선택할 수 있고, 인터페이스 반환 값의 정밀도로 인해 최종 계산 정밀도가 낮으므로 참고용으로만 사용하세요. 전력량 과금 모드도 이론적으로 추정 가능하지만, 인터페이스에서 직접 전력을 읽을 수 없어 현재는 작성하지 않았습니다.
2025-06-16: 구러우 및 셴린에 여러 충전소 추가. (콘센트 수 변화: 구러우 148->308, 셴린 302->724)
2025-06-22: 시스템 설정 최대 충전 시간이 480분인 것으로 보여, 이를 바탕으로 남은 시간 예측을 수정했습니다.
2025-09-09: 과거 충전 기록 기능 삭제.
2025-10-11: 충전소 업데이트.

南哪充电, 기초부터 완성까지

南哪充电, 기초부터 완성까지

백엔드 데이터 크롤링

충전소 ID 가져오기

각 충전소의 콘센트 ID 가져오기

드디어 각 콘센트 상태 가져오기

데이터 후처리

첫 번째 프론트엔드

두 번째 프론트엔드

세 번째 프론트엔드

네 번째 프론트엔드

후속 소규모 업데이트

백엔드 데이터 크롤링

충전소 ID 가져오기

각 충전소의 콘센트 ID 가져오기

드디어 각 콘센트 상태 가져오기

데이터 후처리

첫 번째 프론트엔드

두 번째 프론트엔드

세 번째 프론트엔드

네 번째 프론트엔드

후속 소규모 업데이트