# Development Items
## Project Request
### Short-term Goal
* 會員管理
* CRUD
* 權限管控
* 登入
* Google or Meta 登入認證
* 一般登入
* 球員個人資料管理
* 身高體重位置
* 所屬球隊或俱樂部
* 串聯數據資料
* 串聯會員資料
* 球員數據資料管理
* 數據上傳
* 關聯球員資料
* 關聯球隊資料
* 球隊資料
* 隊名/隊員/隊長 管理(CRUD)
* 比賽資訊
* 參與聯盟
### Medium-term Goal
* 聯盟資訊
* 球隊管理
* 賽事管理
### Long-term Goals
* 球員個人資料分析
* 投籃熱點
*
* 串聯直播
## Develop Information
* Github
* https://github.com/a09090906/RepectBasketball
* Back-end
* JAVA Sprint Boot
* Font-end
* React.Js
* DB
* MongoDB
## Back-End
### Install Items
* Intellij idea
* JDK 1.8
* MogoDB
#### Create Spring boot project
* Create new project
* https://start.spring.io/
* 
* Intellij opne project
* 

#### How to Add Controller

### Note
* Mongo DB Setting
src\main\resources\application.yml

spring:
  data:
    mongodb:
      uri: mongodb://localhost:27017/Basketball?readPreference=primary&appname=MongoDB%20Compass&directConnection=true&ssl=false

* Dependency
instell lombok & mongodb

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-mongodb</artifactId>
		</dependency>

# .Net Core 筆記

* Nuget 安裝以下
* Microsoft.EntityFrameworkCore.SqlServer
* Microsoft.EntityFrameworkCore.Tools
* 開啟Nuget安裝視窗
* 輸入以下指令

Scaffold-DbContext "Server=伺服器位置;Database=資料庫;Trusted_Connection=True;TrustServerCertificate=true;User ID=帳號;Password=密碼" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Force

* 問題集中
* 我是使用Windows認證登入SQL Server
* "移除 User ID=帳號;Password=密碼" 就可以
* 伺服器名稱打錯
* 我是打Localhost, 後面改成 電腦名稱\SQLEXPRESS; 就正常
A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server)

* 此憑證鏈結是由不受信任的授權單位發出的。
* 加入 TrustServerCertificate=true 即可

#### 自動建立Model完成

#### 檢視 BasketballContext
自動建立 BasketballContext
將OnConfiguring改成如下

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                optionsBuilder.UseSqlServer(new ConfigurationBuilder().AddJsonFile("appsettings.json").Build().GetSection("mssqlconnection")["connectionString"]);
            }
        }

#### 無法POST Insert into data
* Unable to track an instance of type
發生原因是這樣，因為你的Table有設Key欄位，無法新增
移除 BasketballContext 底下OnModelCreating 的 entity.HasNoKey();
並且於 Team 的Key值新增 [Key]
* No route matches the supplied values
因為CreatedAtAction 的nameof與function name不同

# NodeJs 筆記

## 安裝方式
看這邊
https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

## How to import MongoDB

先下指令安裝

npm install mongodb -g
npm install mongodb --save

於NodeJS呼叫，db帳號密碼可以寫在網址裡面 這邊是本機當範例 所以不用

app.get("/getData", (req, res) => {
  let res_data;
  var MongoClient = require('mongodb').MongoClient;
  var url = "mongodb://localhost:27017/";
  
  MongoClient.connect(url, function(err, db) {
    if (err) throw err;
    var dbo = db.db("Basketball");
    dbo.collection("GoHoop2").findOne({}, function(err, result) {
      if (err) throw err;
      res_data=result;
      console.log(result);
      db.close();
    });
  });
  res.json(res_data);
});

# React Remark
### Create new project

npx create-react-app graph_view

follow package.Json, install all package

npm install 

Start react app

npm start  

Download CoreUI Template
https://coreui.io/fd/?e=[e-mail]&h=736f224feb65cc8b5ef4e45981a2b1d4&utm_source=website&utm_medium=sendgrid&utm_campaign=website

### React File Download by API example

import axios from 'axios';
import { saveAs } from 'file-saver';

const downloadFile = async (url, filename) => {
  try {
    const response = await axios({
      url,
      method: 'GET',
      responseType: 'blob'
    });
    const blob = new Blob([response.data], { type: response.data.type });
    saveAs(blob, filename);
  } catch (error) {
    console.error(error);
  }
};

### Material UI Autocomplete

import React, { useState } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';

const MyComponent = () => {
  const [value, setValue] = useState(null); 

  const handleInputChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Autocomplete
      value={value}
      onChange={handleInputChange}
      options={options}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => <TextField {...params} label="Autocomplete" variant="outlined" />}
    />
  );
};