开始前,请阅读我的其他几篇文章

《用谷歌云自建微软GitHub codespaces和VScode.dev云编译Cloud IDE是怎样一种体验?》

《谷歌云双飞微软VSCode和谷歌Android Studio云端远程开发环境云开发自己的爱啪啪APP》

《如何将 Node.js 更新到最新版本 {Linux、Windows 和 macOS}》

准备工作

我们将用到以下全栈技术搭建tiktok

Firebase hosting, realtime database

Material UI

CSS hacks #Flexbox #Snap functionality

3rd Party UseRefhooks

599块钱的小米手机登陆vscode开始复制粘贴我的代码

但是作为高级码农的你懂得为什么要粘贴复制我的代码原理

浏览器远程登陆VScode创建reactjs项目

terminal中输入以下命令行

npx create-react-app tiktok

直到看到happy coding再输入

npm start

浏览器回弹出

http://localhost:3000/
用599块钱小米手机开发一款Tiktok是怎样一种体验?

创建firebase项目

将firebase SDK代码

<script type=”module”>
// Import the functions you need from the SDKs you need
import { initializeApp } from “https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js”;
import { getAnalytics } from “https://www.gstatic.com/firebasejs/9.6.4/firebase-analytics.js”;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/d…

// Your web app’s Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: “AIzaSyAWUAuIq-1oiOm06W7cTtzseXbXfilL7ZU”,
authDomain: “tiktok-f4fd0.firebaseapp.com”,
projectId: “tiktok-f4fd0”,
storageBucket: “tiktok-f4fd0.appspot.com”,
messagingSenderId: “531807740092”,
appId: “1:531807740092:web:6fa520d11bd468294370b9”,
measurementId: “G-2EMCNB20DX”
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>

添加到vscode中tiktok>src位置
用599块钱小米手机开发一款Tiktok是怎样一种体验?

bash添加firebase CLI到vscode>tiktok,代码如下

npm install -g firebase-tools

firebase login

firebase init

在tiktok>src>App位置输入以下代码

import logo from ‘./logo.svg’;
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<h1>你真jj可爱!</h1>
</div>
);
}
export default App;

用599块钱小米手机开发一款Tiktok是怎样一种体验?

在vscode的terminal位置输入
npm start
用599块钱小米手机开发一款Tiktok是怎样一种体验?

firebase实时数据库实时更新tiktok数据库(待续)

Leave a Reply

Your email address will not be published. Required fields are marked *