私の旅を振り返る: 初心者向けの不動産リストフルスタックアプリの構築-Python チュートリアル-php.cn

私の旅を振り返る: 初心者向けの不動産リストフルスタックアプリの構築

DDD

リリース： 2024-09-13 18:17:51

オリジナル

853 人が閲覧しました

Reflecting on My Journey: Building a Beginner Real Estate Listing Fullstack App

私が初めて Python を学び始めたとき、この旅がどこに向かうのか全く分かりませんでした。私は Python チュートリアルに飛び込み、ループ、関数、オブジェクト指向プログラミングなどの基本概念に苦労したのを覚えています。今日は、バックエンドの Flask とフロントエンドの React の組み合わせを使用して、フルスタックの不動産リストアプリを構築しました。このプロジェクトは、挑戦であるだけでなく、私が開発者として成長するのに役立つ素晴らしい学習体験でもありました。この旅をご紹介し、このアプリの構築中に私が学んだ重要な側面をいくつか紹介します。

入門: Python の基礎を学ぶ

私が Python を使い始めたとき、それが多用途で初心者に優しい言語であることを知りました。しかし、ほとんどの初心者と同じように、私もそれなりの課題に直面しました。構文を理解し、デバッグ方法を学び、Python のライブラリに慣れることはすべて、私が克服しなければならないハードルでした。私は基本を理解するために、単純な電卓や ToDo リスト CLI アプリなどの小さなプロジェクトに数え切れないほどの時間を費やしました。

不動産リストアプリの開発を開始したときに、これらの基礎的な練習が功を奏しました。 Python の基礎は、特にアプリのモデルを作成したりデータを処理したりする場合に、クリーンで効率的なコードを記述するために不可欠でした。

私は、軽量の Web フレームワークである Flask を使用してバックエンドを構築することから始めました。 Flask は使い方が簡単ですが、Python の基礎をよく理解する必要もあります。私の最初のステップには、仮想環境のセットアップとプロジェクトの構築が含まれ、データベースの対話を簡素化する ORM (オブジェクトリレーショナルマッピング) 用の SQLAlchemy など、必要なライブラリがすべてインストールされていることを確認しました。

Flask を使用してバックエンドを構築する

不動産リストアプリのバックエンドは、ユーザー認証、不動産リスト、アプリケーション、ウィッシュリストを処理するように設計されています。そのためには、ユーザー、プロパティ、アプリケーションなど、それぞれに独自のフィールドと関係のセットを持つ複数のモデルを作成する必要がありました。

SQLAlchemy を使用して User モデルを定義した方法のスニペットを次に示します。

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    email = db.Column(db.String(100), unique=True, nullable=False)
    password = db.Column(db.String(100), nullable=False)
    # Relationships
    properties = db.relationship('Property', backref='owner', lazy=True)

ログイン後にコピー

このコードスニペットは、ユーザー名、電子メール、パスワードなどのフィールドを含む User モデルの作成を示しています。また、プロパティモデルと 1 対多の関係も設定しました。これは、ユーザー (エージェント) をリストされたプロパティにリンクするために重要でした。

React でフロントエンドの課題に取り組む

私は Python に精通しているため、バックエンドはほとんど簡単でしたが、フロントエンドではまったく新しい課題が発生しました。私が React を選んだのは、そのコンポーネントベースのアーキテクチャと活気のあるエコシステムのためです。しかし、React を学ぶということは、私にとってあまり馴染みのない JavaScript に飛び込むことを意味しました。

まず、プロパティ一覧ページ、ユーザー登録ページ、アプリケーション管理ページなど、アプリケーションのさまざまな部分に再利用可能なコンポーネントを作成しました。たとえば、PropertyAgent コンポーネントを使用すると、エージェントはプロパティリストを作成、編集、削除できます。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './PropertyAgent.css';

const PropertiesAgent = () => {
    const [properties, setProperties] = useState([]);
    const [newProperty, setNewProperty] = useState({ title: '', description: '', price: '', location: '', property_type: 'Apartment' });
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    useEffect(() => {
        fetchProperties();
    }, []);

    const fetchProperties = async () => {
        try {
            const response = await axios.get('/properties', {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setProperties(response.data || []);
        } catch (error) {
            setError('Error fetching properties');
        }
    };

    const handleCreateProperty = async (event) => {
        event.preventDefault();
        try {
            await axios.post('/properties', newProperty, {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setSuccess('Property created successfully!');
            fetchProperties();
        } catch (error) {
            setError('Error creating property');
        }
    };

    return (
        <div>
            {/* JSX for rendering the properties and the form to create a new property */}
        </div>
    );
};

export default PropertiesAgent;

ログイン後にコピー

このコードスニペットは、React フック (useState と useEffect) を使用して状態を管理し、バックエンド API からのデータのフェッチなどの副作用を処理する方法を示しています。

有用な技術的側面: JavaScript の非同期の性質を理解する

React と JavaScript を扱う中で私が学んだ最も重要な側面の 1 つは、非同期操作の処理方法でした。 JavaScript のノンブロッキング、非同期の性質は、特に API 呼び出しを扱う場合、初心者にとっては少し困難になる可能性があります。

たとえば、バックエンドからデータをフェッチするには、async/await 構文で非同期関数を使用する必要があります。

const fetchProperties = async () => {
    try {
        const response = await axios.get('/properties', {
            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        setProperties(response.data || []);
    } catch (error) {
        setError('Error fetching properties');
    }
};

ログイン後にコピー

async/await を使用すると、Promise を使用する場合に比べてコードが読みやすくなり、デバッグが容易になります。また、データに依存する操作が実行される前にデータがフェッチされることも保証されます。これは、シームレスなユーザーエクスペリエンスを維持するために重要です。

振り返る: Python の基礎からフルスタック開発への成長

振り返ってみると、Python の基礎の学習からフルスタックアプリケーションの構築までの道のりは、信じられないほどやりがいのあるものでした。私はコーディングスキルを向上させただけでなく、さまざまなテクノロジやフレームワークを使用する貴重な経験も得ました。

この不動産リストアプリを構築することで、プログラミングの基礎をしっかりと固めることの重要性を学びました。また、ソフトウェア開発において学習が決して終わることはないという考えも強化されました。常に新しいフレームワーク、ライブラリ、またはツールを習得する必要があり、各プロジェクトには独自の一連の課題があります。

この旅で最も充実した側面の 1 つは、アプリに命が吹き込まれるのを見たことです。バックエンドのセットアップからユーザー認証の処理、動的で応答性の高いフロントエンドコンポーネントの構築に至るまで、すべてのステップが学習の機会でした。