Built Twitter Like App - 4

从零搭建

Add FollowBar

Modify file conmponent/Layout.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import FollowBar from "./layout/FollowBar";
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
                <FollowBar />
            </div>  
        </div>
     </div>
   );
}

export default Layout;
More...

Built Twitter Like App - 3

从零搭建

Install Icon

1
npm install react-icons

Add Sidebar Item

Modify file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { BsHouseFill, BsBellFill } from 'react-icons/bs'
import { FaUser } from 'react-icons/fa'
import { BiLogOut } from 'react-icons/bi'

import SidebarLog from './SidebarLogo'
import SidebarItem from './SidebarItem'
import SiderbarTweetButton from './SiderbarTweetButton'

const Sidebar = () => {
    const items = [
        {
            label: 'Home',
            href:'/',
            icon: BsHouseFill
        },
        {
            label: 'Notifications',
            href:'/notifications',
            icon: BsBellFill
        },       
        {
            label: 'Profile',
            href:'/users/123',
            icon: FaUser
        },
        
    ]
    
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}

                <SidebarItem onclick={() => {}} icon={ BiLogOut } label='Logout' href='/'  />
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
}

export default Sidebar
More...

Built Twitter Like App - 2

从零搭建

Add basic layout

Add file components/Layout.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
            </div>  
        </div>
     </div>
   );
}

export default Layout;

Add file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9
const Sidebar = () => {
    return(
        <div>

        </div>
    );
}

export default Sidebar
More...

Built Twitter Like App - 1

从零搭建

Install Next.Js

1
npx create-next-app@13.0.0 --typescript

Install tailwindcss

1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Initial page

modify pages/index.js

1
2
3
4
5
6
7
export default function Home() {
  return (
    <div className="text-3xl text-sky-500">
      Hello World!
    </div>
  )
}
More...

Five Principles of Prompting

当日所学

  1. Give Direction: Describe the desired style in detail, or reference a relevant persona.

    给出方向：详细描述所需的风格，或参考相关的人物角色。

  2. Specify Format: Define what rules to follow, and the required structure of the response.

    指定格式：定义要遵循的规则以及所需的响应结构。

  3. Provide Examples: Insert a diverse set of test cases where the task was done correctly.

    提供示例：插入正确完成任务的一组不同的测试用例。

  4. Evaluate Quality: Identify errors and rate responses, testing what drives performance.

    评估质量：识别错误并对响应进行评级，测试驱动性能的因素。

  5. Divide Labor: Split tasks into multiple steps, chained together for complex goals.

    分工：将任务分成多个步骤，链接在一起以实现复杂的目标。

Django Docker的部署时如何设置环境

日常练习

1. 背景

在部署时，程序需要根据当前环境，设置不同参数，比如数据库，DEBUG是否打开等。


2. 实现方式

在构建Docker的时候设置环境变量：

1
2
3
4
5
RUN python manage.py collectstatic

ENV DJANGO_DEBUG_FALSE=1
ENV DJANGO_SECRET_KEY=sekrit 
ENV DJANGO_ALLOWED_HOST=localhost

在superlists/settings.py中添加判断：

1
2
3
4
5
6
7
8
9
10
import os
[...]
if "DJANGO_DEBUG_FALSE" in os.environ:
    DEBUG = False
    SECRET_KEY = os.environ["DJANGO_SECRET_KEY"]
    ALLOWED_HOSTS = [os.environ["DJANGO_ALLOWED_HOST"]]
else:
    DEBUG = True
    SECRET_KEY = "insecure-key-for-dev"
    ALLOWED_HOSTS = []

Data Management Policies

资源总结

Policies

Appropriate Storage Policies

  1. Information must only be stored on company authorised storage media. USB sticks and other temporary storage solutions should not be used to hold corporate data.
  2. The appropriate storage solution for the information must be used.  This may be a structured database, Sharepoint, shared drives, document management systems, proprietary system or  archive solution.
More...

Categories of Data

资源总结

Background

Certain type of data created as part of normal business activities might be used enterprise wide, whilst others may only be useful locally within a department or geographic region. The data maybe structured, for example an order held in the SAP system, or unstructured such as design document. The data can also differ from a retention and usage and perspective. Taking this into account different categories of data exist that have different management requirements.

Categories

Data Type Description
Analytical Data Created by transforming operational, unstructured, master and reference data to address specific decision support or reporting requirements.
Operational Data Generated from business activities and is given context by Master data and reference data, for example purchase orders, or sales orders.  It is subdivided into structured and unstructured data.
Enterprise Structure Data Represents the key structures of the enterprise and is particularly used for reporting business activity by responsibility.  Examples are Chart of Accounts and organisational structures.  Changes to enterprise structure data can have a high impact of historical reporting.
Master Data Refers to the core business data entities such as customer, product, vendor or parts.  It is used to provide context to operational data, for example the master data related to a Purchase Order would be the supplier, the goods or service types being supplied and the employee who raised the order.
Reference Data Any kind of data that is only used to categorise other data in a database and normally values have to confirm to one of several allowed values.  For eample the classification of an employee may be hourly paid, salaries or agency
Metadata The information used to describe the characteristics of a piece of corporate data, for example the meaning, format, and security classification.

请我喝杯咖啡吧~

支付宝
微信