یک برنامه ردیابی سلامت را با React ،GraphQL و Okta

مقدمه
در این آموزش ، با استفاده از GraphQL API با چارچوب Vesper ، TypeORM و MySQL به عنوان یک پایگاه داده ، یک برنامه ردیابی سلامت ایجاد خواهید کرد. اینها چارچوب های Node هستند و شما از TypeScript برای زبان استفاده خواهید کرد. برای کلاینت ، برای گفتگو با API از React ، Restrstrap و Apollo Client استفاده خواهید کرد. هنگامی که این محیط کار را دارید ، تأیید اعتبار کاربر امن را با Okta اضافه خواهید کرد. Okta یک سرویس ابری است که به توسعه دهندگان اجازه می دهد تا حساب های کاربری و داده های اکانت را ذخیره و ایمن کنند و آنها را با یک یا چندین برنامه کاربردی متصل نمایند.
قبل از استفاده از این آموزش ، برای یک حساب کاربری آزاد Okta ثبت نام کنید.
مرحله 1 – ساختن API با TypeORM ، GraphQL و Vesper
TypeORM یک چارچوب ORM (object-relational mapper) است که می تواند در اکثر سیستم عامل های جاوا اسکریپت از جمله Node ، مرورگر ، Cordova ، React Native و Electron اجرا شود. و به شدت تحت تأثیر چارچوب Hibernate ، Doctrine و Entity است.
TypeORM را در سطح جهانی نصب کنید تا API خود را شروع کنید:
⦁ $ npm i -g typeorm@0.2.7
⦁
برای نگه داشتن سرویس گیرنده React و API GraphQL یک دایرکتوری ایجاد کنید:
⦁ $ mkdir health-tracker
⦁
⦁ $ cd health-tracker

با استفاده از دستور زیر یک پروژه جدید با MySQL ایجاد کنید:
⦁ $ typeorm init –name graphql-api –database mysql
⦁

برای سفارشی کردن نام کاربری ، گذرواژه و پایگاه داده ، Graphql-api / ormconfig.json ویرایش کنید.
graphql-api/ormconfig.json
{
…
“username”: “health”,
“password”: “pointstest”,
“database”: “healthpoints”,
…
}

توجه: برای دیدن درخواست هایی که مخالف MySQL اجرا میشوند، مقدار logging را در این فایل به all تغییر دهید. بسیاری از گزینه های ورود به سیستم نیز موجود هستند.

MySQL را نصب کنید
اگر قبلاً MySQL را نصب نکرده اید ، آن را نصب کنید. در اوبونتو ، می توانید از sudo apt-get install mysql-server استفاده کنید. در macOS ، می توانید از Homebrew و brew install mysql استفاده کنید. برای ویندوز می توانید از MySQL Installer استفاده کنید.
پس از نصب MySQL با رمزعبور اصلی ، وارد سیستم شوید و یک پایگاه داده Healthpoints ایجاد کنید.
⦁ $ mysql -u root -p
⦁
Mysql> create database healthpoints;
Mysql> use healthpoints;
Mysql> grant all privileges on *.* to ‘health’@’localhost’ identified by ‘points’;

در یک پنجره پایانه به پروژه Graphql-api خود بروید ، متعلقات پروژه را نصب کنید ، سپس آن را شروع کنید تا اطمینان حاصل کنید که می توانید به MySQL وصل شوید.
⦁ $ cd graphql-api
⦁
⦁ $ npm i
⦁
⦁ $ npm start

خروجی زیر را مشاهده خواهید کرد:
Inserting a new user into the database…
Saved a new user with id: 1
Loading users from the database…
Loaded users: [ User { id: 1, firstName: ‘Timber’, lastName: ‘Saw’, age: 25 } ]
Here you can setup and run express/koa/any other framework.

نصب Vesper برای ادغام TypeORM و GraphQL
Vesper یک چارچوب Node است که TypeORM و GraphQL را ادغام می کند. برای نصب آن از npm استفاده کنید:
⦁ npm i vesper@0.1.9
⦁

اکنون زمان آن رسیده است که برخی از مدل های GraphQL (که داده های شما را مشخص می کند) و برخی از کنترل کننده ها (که نحوه تعامل با داده های شما را توضیح می دهند) را تهیه کنید.
Graphql-api / src / schema / model / Points.graphql را ایجاد کنید:
graphql-api/src/schema/model/Points.graphql
type Points {
id: Int
date: Date
exercise: Int
diet: Int
alcohol: Int
notes: String
user: User
}

Graphql-api / src / schema / model / User.graphql را ایجاد کنید:
graphql-api/src/schema/model/User.graphql
type User {
id: String
firstName: String
lastName: String
points: [Points]
}

در مرحله بعدی ، یک Graphql-api / src / schema / controller / PointsController.graphql با نمایش درخواست ها و جهش ها ایجاد کنید:
graphql-api/src/schema/controller/PointsController.graphql
type Query {
points: [Points]
pointsGet(id: Int): Points
users: [User]
}

type Mutation {
pointsSave(id: Int, date: Date, exercise: Int, diet: Int, alcohol: Int, notes: String): Points
pointsDelete(id: Int): Boolean

API را مجدداً راه اندازی کنید ، و اکنون کامل خواهد شد.

کد منبع
می توانید کد منبع این مقاله را در GitHub پیدا کنید.
نتیجه
در این مقاله نحوه ساختن یک برنامه React امن با GraphQL ، TypeORM و Node / Vesper به شما نشان داده شده است.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade