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

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

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

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

1.准备工作

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

Firebase hosting, realtime database

Material UI

CSS hacks #Flexbox #Snap functionality

3rd Party UseRefhooks

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

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

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

terminal中输入以下命令行

npx create-react-app tiktok

直到看到happy coding再输入

npm start

浏览器回弹出

http://localhost:3000/

3.创建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/docs/web/setup#available-libraries

// 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位置

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

npm install -g firebase-tools

firebase login

firebase init

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

import logo from ‘./logo.svg’;
import ‘./App.css’;
function App() {
  return (
    <div className=”App”>
     <h1>卧槽你真鸡巴可爱!</h1>
    </div>
  );
}
export default App;
在vscode的terminal位置输入
npm start

5.firebase实时数据库实时更新tiktok数据库(待续)(加我微信成为会员咋们一起琢磨,《tiktok自动点赞》等等更多有意思的事情)

 

https://zhuanlan.zhihu.com/p/461655364

https://developer.aliyun.com/article/860959?spm=a2c6h.13148508.0.0.6dab4f0ezRCQGz

5/5 - (1 vote)

Leave a Reply