Skip to content

Xây dựng phần mềm quản lý sức khoẻ mẹ và bé (Installing).

Notifications You must be signed in to change notification settings

leanhducprovn/health-care-install

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Health Care

Cài đặt phần mềm quản lý sức khoẻ mẹ và bé.

Backend development

backend development

NodeJS

Cài đặt NodeJS trên Window hoặc MacOS Truy cập vào website chính thức của NodeJS, tải bản cài đặt mới nhất về máy tính và thực hiện cài đặt như bình thường

https://nodejs.org/

Để kiểm tra cài đặt đã thành công hay chưa, bằng cách gõ lệnh:

node -v

Để kiểm tra NPM - Công cụ quản lý package của NodeJS đã cài đặt thành công hay chưa, bằng cách gõ lệnh:.

npm -v

Tạo thư mục chứa project

mkdir health-care

Tạo file package.json trong thư mục gốc của project

npm init

Express

Để cài đặt Express framework sử dụng npm như sau:

npm install express --save

Cài thêm một số module quan trọng đi cùng với express như:

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save

Tạo file server.js để bắt đầu lập trình, có nội dung như sau:

var express = require("express");
var app = express();

app.get("/", function(req, res) {
	res.send("Health Care");
});

var server = app.listen(3000, function() {
	var port = server.address().port;
	console.log(`Health care at http://localhost:${port}`);
});

Khởi chạy server bằng lệnh:

node server.js

MVC paradigm

Tiếp tục phát triển theo mô hình MVC MVC paradigm Note: Cấu trúc lại thư mục theo chuẩn MVC.

Database development

MongoDB

Sử dụng MongoDB Atlas để lưu trữ dữ liệu. MongoDB Atlascloud database của MongoDB được ra mắt vào năm 2016 chạy trên AWS, Microsoft Azure và Google Cloud Platform.

mongodb

Để sử dụng Atlas truy cập vào đây và nhấn nút Try Free, sau đó đăng ký tài khoản để bắt đầu!

Database design

Thiết kế cơ sở dữ liệu Note: Thiết kế cơ sở dữ liệu phù hợp với yêu cầu bài toán.

Frontend development

css3 html5 sass bootstrap handlebars

Bootstrap

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JavaScript

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

Bundle

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">
Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

For next steps, visit the Layout docs or our official examples to start laying out your site’s content and components.

Handlebars

Có nhiều cách để cài đặt Handlebars, tùy thuộc vào ngôn ngữ lập trình và môi trường bạn đang sử dụng.

Việc triển khai tham chiếu của Handlebars được viết bằng JavaScript. Nó được cài đặt phổ biến nhất bằng cách sử dụng npm hoặc yarn:

npm install handlebars
# or
yarn add handlebars

Sau đó, bạn có thể sử dụng Handlebars bằng require

const handlebars = require("handlebars");
const hbs = handlebars.create({
	extname: ".hbs",
});

Sử template engine:

app.engine("hbs", hbs.engine);

Deploy

GitHub

GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền web cho các dự án phát triển phần mềm.

Git hỗ trợ các hệ điều hành Windows, Mac OS, Linux (Ubuntu, ..), để download bạn có thể truy cập vào trang chủ của Git:

https://git-scm.com

Push code lên GitHub

echo "# push" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/leanhducprovn/push.git
git push -u origin main

Note: Trên đây là ví dụ minh hoạ!

Heroku

Heroku là một nền tảng đám mây như một dịch vụ hỗ trợ một số ngôn ngữ lập trình.

Truy cập trang chủ của Heroku và đăng ký tài khoản:

https://www.heroku.com/

Các bước deploy:

  • Chọn New → chọn Create new app → đặt tên App → chọn Create app
  • Trong Deployment method chọn GitHub
  • Trong Connect to GitHub chọn Tài khoảnRepo → chọn Connect → chọn Enable Automatic Deploys
  • Trong Manual deploy → chọn Deploy Branch → Thành công!

Note: Có thể thêm tên tên miền tuỳ chỉnh trong phần cài đặt!

Mobile development

Flutter

Flutter là một SDK phát triển ứng dụng di động nguồn mở được tạo ra bởi Google. Nó được sử dụng để phát triển ứng ứng dụng cho Android và iOS, cũng là phương thức chính để tạo ứng dụng cho Google Fuchsia.

Get the Flutter SDK

Download the following installation bundle to get the latest stable release of the Flutter SDK:

flutter_macos_2.10.3-stable.zip

Extract the file in the desired location, for example:

cd ~/development
unzip ~/Downloads/flutter_macos_2.10.3-stable.zip

Add the flutter tool to your path:

export PATH="$PATH:`pwd`/flutter/bin"

This command sets your PATH variable for the current terminal window only. To permanently add Flutter to your path, see Update your path.

Create and run a simple Flutter app

Create a new Flutter app by running the following from the command line:

$ flutter create my_app

A my_app directory is created, containing Flutter’s starter app. Enter this directory:

cd my_app

To launch the app in the Simulator, ensure that the Simulator is running and enter:

flutter run

Flutter module

Webview

With Flutter:

flutter pub add webview_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
	webview_flutter: ^3.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:webview_flutter/webview_flutter.dart';
Cookie

With Flutter:

dart pub add cookie

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
	cookie: ^0.0.4

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:cookie/cookie.dart';
Material

Import library:

import 'package:flutter/material.dart';
References

Copyright © Lê Anh Đức

Releases

No releases published

Packages

No packages published