JSレールプロジェクト

(https://github.com/RoUchiha/flatiron-phase-4-portfolio-project)
このプロジェクトは前回のフェーズ3プロジェクトの延長のように感じられ、私が学んできたこと全てが私の基盤を作り上げていることを示しました.全体的に、私はこのプロジェクトは、実際のウェブサイトがどのように動作し、ユーザーと対話するかを模倣しているので、私の現在のコーディング知識の最高の実装であると思います.
このフェーズ4ポートフォリオプロジェクトのために、私はユーザーが演習を作成し、ワークアウトにそれらを追加できるようにトレーニングプランナーを作成することを決めた.“トレーニング”は実際に週の7日だったので、ユーザーは彼らが上に行う予定の日に演習を追加します.それぞれのエクササイズは、名前、カテゴリ(抵抗、心肺、柔軟体操)、セット(レジスタンスまたはcalisthenicsならば)、および距離を持っていました.たびに新しい運動が作成された、それは適切な日にページを再読み込みせずに追加されます.一度運動は、トレーニングに追加された場合、彼らは望んでいる場合は、運動を削除するユーザーのためのボタンがあります.

このプロジェクトのバックエンドを設定するには、私はレールに精通しているので、最も簡単な部分だったし、APIとしてRailsを使用すると、あまりにもコーディングを意味するので、表示するビューがないためです.私はもともと私は私がまだ毎日訪問するために使用されているもののような頑強なサイトになるまで学ぶ必要がどれだけ謙虚になった前に心の中でより複雑なプロジェクトを持っていた.
モデルとコントローラを作成した後に、私はserializersを作り、次に、私が作成したシードデータのためにlocalhostをチェックしました、そして、すべては私がそれがそうであった方法であった方法で終わりました.

class ExerciseSerializer < ActiveModel::Serializer

    attributes :id, :name, :category, :sets, :distance, :workout_id

end

class WorkoutSerializer < ActiveModel::Serializer

    attributes :date, :name, :id, :exercises
    has_many :exercises

end

このプロジェクトとの私の主な葛藤は、コーディングが難しかったので、必ずしもフロントエンドを設定することから来ました、しかし、私がRailsとJavaScriptで考えるのにとても慣れているので、私にまだ新しい言語はまだあります.私はプロジェクトをどう進めるかについての考えを持っていました、そして、私が使用したかった方法または機能がJSに存在しないのを理解して、手動で書かれなければなりませんでした.このため、私は柵の私のコードについて考える多くの時間を費やしました、そして、その柵コードがJavaScriptとしてどのように見えるか、そして、それをテストしているものをgooglingします.キャンバスのレッスンの下部にあるリソースのリンクは、このタスクに非常に有用であり、私は非常にすべての学生がそれらを訪問することをお勧めします.フェッチリクエストのようなものは標準パターンに従っていたので、期待していたより簡単で、私のメソッドのほとんどは私が実装した2つのクラスの間で同じでした.また、私はRuby/Railsで学んだ概念に似たいくつかのJSの概念もありました.例えば'コンストラクタ'のように'初期化'メソッドを私に思い出させる方法です.つの言語の類似点を見つけることは、本当に私が私が何をするべきか、そして、それをすることについてどうするかを理解するのを助けました.私のJSのクラスとメソッドを設定した後、私は私のウェブサイトのセットアップにいくつかのHTMLをコード化し、私が望んだものの基本的な構造を持っていただけでなく、すべての機能を適切に動作します.

class WorkoutServices {
    constructor(baseURL) {
        this.baseURL = baseURL; 
    };

    getWorkouts() {
        fetch(this.baseURL) 
        .then(resp => resp.json()) 
        .then (json => {
            json.forEach(workout => {
                const workouts = new Workout(workout);
                workouts.renderWorkout();
            });
        });
    }

class Workout {
    constructor({name, date, exercises, id}) {
        this.name = name;
        this.date = date;
        this.exercises = exercises;
        this.id = id;
    };

    renderWorkout() {
        const workoutAll = document.getElementById("workouts-container");
        workoutAll.classList.add("workout");

        const workoutName = document.createElement("h2");
        workoutName.innerHTML = this.name + "'s workout";
        workoutName.name = this.name;
        workoutName.classList.add(`workout-data`);

        workoutName.id = `workout-${this.id}`;

        workoutAll.appendChild(workoutName);

        const exerciseList = this.renderExercises(); 
        workoutName.appendChild(exerciseList);
    };

    renderExercises() {
        const exercises = this.exercises;
        const list = document.createElement("ul");

        exercises.forEach(exercise => { 
            const newExercise = new Exercise(exercise); 

            console.log(exercise, "exercise");

            const nameList = newExercise.renderExercise();

            list.appendChild(nameList);
        });
        return list;
    };
}

驚いたことに、このプロジェクトの最も楽しい部分はCSSスタイリング部分でした.私がどんな要素に割り当てることができるか、そして、それらの変化がウェブサイトに反映されるのを見て、それは楽しみでした.私はプロジェクトのコア機能から気を散らしたくないので、私はすべてをかなり基本的に保ちました.私はdevのコンソール(F 12)を使用してどの要素とどのように私はスタイルをしたいかを参照してください.私は、すべてのテキストをより組織的に見て、より圧倒的に見えさせるために、各々のトレーニングと運動のまわりで境界を置きました.
すべてのすべてで、このプロジェクトは、私は完全なスタックのWeb開発者に期待されると仮定したもののための素晴らしい学習経験であり、私は私が将来的に大きく、より良いウェブサイトを作ることができるように私のバックエンドとフロントエンドの開発スキルを強化することを願っています.