mumei

Next.jsとSupabaseを使用したアプリ開発

Twitterクローン

既存サービスのクローンシリーズ検討お願いいたします

ChatGPTのプラグイン開発チュートリアル

はる@講師

ChatGPTのVOICEVOXを使用したアプリ構築

LangChainを使用して自動タスク生成アプリ構築

https://zenn.dev/hathle/books/next-langchain-book

AutoGPTを使用したアプリ

完全自動生成は夢が広がります！！

OpenAIのChatGPT APIとWhisper APIを使用した音声認識チャット構築チュートリアル

 ChatGPT APIとWhisper APIが公開になったので、作ってみようと思います。

supabase × graphql × Typscript の講座をお願いします。

nekomusume

Next.jsとSupabaseのブログ構築をリリースしました。

https://www.fullstackchannel.com/courses/24

AI画像生成アプリをリリースしました。

https://www.fullstackchannel.com/courses/25

ありがとうございます。

エラー原因を教えてくれるアプリは良さそうですね。

プロンプトを工夫して設定しておけば、できそうです。

検討してみますね。

Djangoの予約サイトとサブスクリプションの講座を学習しました。
とても勉強になりました。
ChatGPTは、ゲームチェンジャーですね。

ChatGPTを使用したアプリ開発というわけではないのですが、Djangoやnext.jsなどでエラーログを詳しく設定する講座があると嬉しいです。エラーログをChatGPTに投げると原因をリスト化してくれるので、初心者には助かります。短い動画でも、たくさんの人が見てくれそうです。

これからも楽しみにしています。

Belocump

Midjourney & DALL-Eを使用したAI画像生成アプリ開発

ChatGPTを使用したアプリ開発

https://openai.com/blog/chatgpt/

Next.jsとSupabaseを使用したアプリ開発

Supabaseは、BaaS(Backend as a Service)でPostgreSQLに特化しています。

フロントエンドとバックエンドの境界がなくなるため、迅速な開発が可能になります。

https://qiita.com/kabochapo/items/6a2a391832825d17af7d

terraformでAWSインフラ構築チュートリアル

インフラ構築はコードで運用する時代です。

リクエストありがとうございます。

確かに2年前の講座は古いですね。

同じ題材でも新しいバージョンで作ると、違った観点で講座が作れそうなので、早速検討したいと思います。

引き続きよろしくお願い致します。

はじめて投稿させて頂きます。    
動画の有料化、updateはいかがでしょうか？        
YouTubeを拝見していると、2年前などの講座があります。私は1年以上前の動画は無意識で排除していました。しかし、動画を拝見したら、どの講座も非常に勉強になりました。
そこで、有料化で機能を追加した上級の動画、updateした講座を視聴したいです。
予約サイトの講座で言えば、FormViewやUpdateView、自動メール機能、二要素認証、frontのカレンダーは、日別、時間別のreactなどを希望したいです。
ご検討だけでもお願いします。

Django

自律走行ロボット開発

Raspberry Pi/ROS2/LiDAR/SLAM

ついにハードウェアにも手を出しました。

自由にロボットが動かせるようになると楽しいです！

Lチカ→ラジコン→自律走行

Tailwind.cssの講座をお願いいたします。
チートシートの使い方すらわからない初学者のための入門講座を是非お願いいたします。

NestJS入門

https://nestjs.com/

Prisma入門

https://www.prisma.io/

TypeScript入門

Next.jsでポートフォリオ構築

Djangoをつかったリアルタイムチャットの実装方法をお願いいたします。

できれば本番環境のデプロイ方法もお願いします。

リリースしました

■React NativeでTikTokのホーム画面を開発

https://www.fullstackchannel.com/courses/21

■Django GraphQL入門とReact Native(TikTok)連携

https://www.fullstackchannel.com/courses/22

ブログサイト

Next.jsとDjango GraphQLの組み合わせを学習

TikTok風スマホアプリ

ReactNativeとDjango GraphQLの組み合わせを学習

WebRTCを使用してビデオ会議アプリ構築

WebRTC SFUオープンソースのLivekitを使用します。

https://livekit.io/

Recruitが提供しているAir Shiftのようなシフト作成アプリができたら感無量です！！

希望はNext.js DRFです！

Next.js DRF
複数のユーザーを管理できるアプリ。
（User側とCompany側のような）

両者で
・サインアップ
・サインイン
・パスワード（リセット）
・認証

が実装できるところまでの簡単なアプリが欲しいです！

予約サイト→1店舗複数スタッフ別受付app

360do

Web3.0、ブロックチェーン講座

Ethereumでスマートコントラクトアプリ構築

- Solidity
- MetaMask
- React/NextJS
- Ethereum

DjangoでLINEアプリ構築

LIFFを使って、LINEプラットフォームでアプリを動かす

はる先生

お世話になります。
いつも動画を拝見させていただいております。

・入門者向けのReact単体で作れるサービス
・楽天など自社ポイントの連携機能
・経費システム

もし可能であれば、業務支援サービスも
学習していきたいと思っていますので、
採用をご検討いただけますと幸いでございます。

よろしくお願い致します。

ポカリ

Three.jsを使用したインタラクティブなサイトを構築する

https://threejs.org/

Blenderでモデル作成

React NativeでGoogle Mapを使って現在地を取得する

React NativeをGoogle Playストアにリリースする

こちらリリースしました。

https://www.fullstackchannel.com/courses/20

現在は、ReactNative + Djangoでフルスタックチャンネルのスマホアプリを開発中です。

まとまってきたら、講座にします。

「はじめてのReactNative + Django REST Frameworkチュートリアル」

レベル：超級

講座のリクエストはこちらからお願いします。

いいね数が多いリクエストから検討したいと思います。

リクエストのみの書き込みでお願いします。

### 例

「○○○が流行っているので、○○○を使ったチュートリアルが知りたい」

など

### 実現したいこと
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>動画</a>
を参考にして、フロントサイドはハル先生のサブスク有料会員の動画を参考にしてwebアプリを作っています。なんとかuser_createで仮登録機能は実装できたのですが、activationで本登録をする為の方法が全く思い浮かびません、そして色々調べてみたのですが3日ほど答えを見つけられずにいます。もし、activationによる本登録がpostmanを使わずにnext.jsとDjangoなどで可能でしたらやり方を教えていただきたいです。

### 発生している問題
Djoserのactivationを使っての本登録のやり方が全くわからない。

### ソースコード
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>この動画</a>とほとんど同じです。
<p>Reactサイド</p>

```pages/api/account/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```

```pages/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```
### 自分で試したこと
Googleで日本語と英語で調べまくる。
Chat GPTに聞いてみる。

### 補足情報
いつもお世話になっております。

Next.js

DRF+Djoser+Next.jsでDjoserのactivationを実装したい

KosKos

### 実現したいこと
djangoを用いて複数のjsonをまとめたzipファイルのアップロード機能を実装したいです。
全てdjangoで完結させたく、フロントはtemplateで表示させたいです。

処理の流れとしては、<li>①ユーザーがzipファイルアップロード
<li>②サーバー側でzipファイルを解凍、jsonファイルそれぞれに項目存在チェックを行う
<li>③ユーザーはフロント画面でその進捗を確認
<li>④チェックに問題なしならフロントに成功メッセージを出す。チェックに問題あれば対象のjsonファイルの名前を表示する。
<li>⑤jsonファイルを保存する

となります
### 発生している問題
③のフロント画面で進捗を確認するのやり方がわからず…。
実装方法のアドバイスをいただけますと幸いです。


### ソースコード


### 自分で試したこと
調べると、django-channelやCerery,Redisといった単語が出てくるものの、どれがベストプラクティスなのか判断がつけられない状況です。


### 補足情報

JavaScript

Python

Djangoを用いてサーバー側の処理進捗をtemplateで進捗バーで表示したい

Taver

こんにちは！

日本語は第二言語なので、文法の間違いがあれば、あらかじめ謝っておきます。

### 実現したいこと

このビデオに従って、私はDjango REST Framework + Next.js + NextAuthをGoogle認証で実装しようとしています。

https://www.youtube.com/watch?v=TvoMjY291f8

ビデオの指示に従ったのですが、「IDトークン」で問題が発生しています。このサイトの他の質問もチェックしましたが、同じ問題を経験している人を見つけることができませんでした。

### 発生している問題

サインインページで「Googleでログイン」ボタンをクリックすると、英語で「Access Denied」と書かれたエラーが出ます。

Djangoのサーバーサイドのコンソールでは、以下のようなエラーが表示されます。

```
raise OAuth2Error("Invalid id_token") from e
allauth.socialaccount.providers.oauth2.client.OAuth2Error: Invalid id_token
[13/Mar/2023 10:26:30] "POST /api/social/login/google/ HTTP/1.1" 500 162465
```

500エラーなので、URLかビューの問題だと思います。

### ソースコード

**フロント**

`[...nextauth].js`

```
import NextAuth from "next-auth";
import axios from "axios";
import GoogleProvider from "next-auth/providers/google";

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  callbacks: {
    async signIn({ user, account }) {
      if (account.provider === "google") {
        const accessToken = account.access_token;
        const idToken = account.id_token;

        console.log(idToken);

        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          );

          const { access_token } = response.data;
          user.accessToken = access_token;

          return true;
        } catch (error) {
          return false;
        }
      }
      return false;
    },

    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",
  },
};

export default (req, res) => NextAuth(req, res, settings);
```
上記のコードでは、コンソールログにIDトークンが正常に表示されています。

確認のため、.envファイルを示します。

```
DJANGO_URL=http://localhost:8000

GOOGLE_CLIENT_ID=秘密
GOOGLE_CLIENT_SECRET=秘密
```

Client IDとClient secretは、私のGoogleコンソールの情報と一致しています。

JavaScript Originはこのように設定されています。

`http://localhost:3000`

URIはこのように設定されています。

`http://localhost:3000/api/auth/callback/google`

**サーバー**

`authentication/views.py`

```
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from dj_rest_auth.registration.views import SocialLoginView
from allauth.socialaccount.providers.oauth2.client import OAuth2Client


class GoogleLoginView(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    client_class = OAuth2Client
```

`urls.py`

```
from django.contrib import admin
from django.urls import path, include

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/auth/', include('dj_rest_auth.urls')), #Endpoints provided by dj-rest-auth
    path('api/social/login/', include('authentication.urls')) #Endpoint for Social logins
]

urlpatterns=urlpatterns+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

`authentication/urls.py`

```
from django.urls import path, include
from .views import GoogleLoginView

urlpatterns = [
    path("google/", GoogleLoginView.as_view(), name="google"),
]
```

### 自分で試したこと
この前、authentication/views.pyに「callback_url」変数を設定してみました。

マイグレーションを消して、新しいマイグレーションを作り、新しいマイグレーションを適用することを試しました。

他のフォーラムの投稿を参考に、POST/レスポンスの変数名を変えてみました。


### 補足情報

どうぞよろしくお願いいたします。

NextAuthをGoogle認証とDRFで500エラー

チャッド

### 実現したいこと
ページリロードをしてもstateを保持してログイン状態が持続
するようにしたい。


### 発生している問題
Navigation.jsを {isAuthenticated ?}  でログイン状態の時に表示が変わるように設定しているが、ページリロードをやページ遷移をすると stateがリセットされてしまい、表示が切り替わってしまう。

### 自分で試したこと
stateを保持するredux-persistを使用し、公式ページなどを参考にコードを書いてみました。
結果は、
ページ遷移にはログイン状態を保持することができましたが、
ページリロードをするとログイン状態を保持することができませんでした。

ご教授をお願いしたいです。 

### ソースコード
```
//src/reduser/store.jsx

import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'
import postSlice from './postSlice'

//redux-persist設定
import storage from 'redux-persist/lib/storage'
import { 
  persistReducer, 
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, authSlice)

const store = configureStore({
    reducer: {
      auth: persistedReducer,
      post: postSlice,
    },
    middleware: (getDefaultMiddleware) => 
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
})

export default store
```
```
//pages/_app.jsx

//redux設定
import { Provider } from 'react-redux'
//redux-persist設定
import store from 'src/reducer/store'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist' 

const persistor = persistStore(store)

function App({ Component, pageProps }){
  return (
     <Povider store={store}>
      <PersistGate persistor={persistor}>
        <Layout>
          <Head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
          </Head>
          <Component {...pageProps} />
        </Layout>
      </PersistGate>
    </Provider>
  );
}
```
```
//src/reducer/authSlice.jsx

import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,

    //ログイン
    LOGIN_SUCCESS,
    LOGIN_FAIL,

    //アカウント情報取得
    USER_SUCCESS, 
    USER_FAIL,

    //リフレッシュトークン取得
    REFRESH_SUCESS,
    REFRESH_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,

    //認証チェック
    AUTHENTICATED_SUCCESS,
    AUTHENTICATED_FAIL,
    LOGOUT_SUCCESS,
  } from 'actions/types'

const initialState = {
    user: null,
    isAuthenticated: null,
    loading: false,
}


function authReducer(state = initialState, action) {
  const { type, payload } = action

  switch (type) {
    // アカウント登録----------------------------------------------
    case REGISTER_SUCCESS:
      return {
        ...state,
      }
    case REGISTER_FAIL:
      return {
        ...state,
      }

    //ログイン----------------------------------------------
    case LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
      }
    case LOGIN_FAIL:
      return {
        ...state,
        isAuthenticated: false,
      }

    //アカウント情報取得----------------------------------------------
    case USER_SUCCESS:
      return {
        ...state,
        user: payload.user,
      }
    case USER_FAIL:
      return {
        ...state,
        user: null,
      }
    //リフレッシュトークン取得----------------------------------------------
    case REFRESH_SUCESS:
      return {
        ...state,
      }
    case REFRESH_FAIL:
      return {
        ...state,
        isAuthenticated: false,
        user: null,
      }

    // 読み込み中----------------------------------------------
    case SET_AUTH_LOADING:
      return {
        ...state,
        loading: true,
      }
    case REMOVE_AUTH_LOADING:
      return {
        ...state,
        loading: false,
      }

    // 認証チェック----------------------------------------------
    case AUTHENTICATED_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
      }
    case AUTHENTICATED_FAIL:
      return {
        ...state,
        isAuthenticated: false
      }

      //ログアウト-----------------------------------------------
      case LOGOUT_SUCCESS:
        return {
          ...state,
          isAuthenticated: false,
          user: null,
        }
      case LOGIN_FAIL:
        return {
          ...state,
        }

    default:
      return state
    }
}

export default authReducer
```

//


### 補足情報

初心者

Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]

hayato

### 実現したいこと
DjangoとMS SQL Serverデータベースを連携して、構築しています

### 発生している問題
django.db.utils.NotSupportedError: SQL Server v15 is not supported.

### 自分で試したこと
仮想環境に以下ライブラリinstall済ですが、解決できませんでした。
```django-pyodbc                    1.1.3
django-pyodbc-azure              2.1.0.0
django-pyodbc-azure-2019         2.1.0.0
```
https://stackoverflow.com/questions/60364005/django-cannot-connect-to-sql-server-2019