I Built an Offline-Capable App by Myself: React Native Frontend, C# Backend

This isn’t a story about gluing together a few UI components. It’s about how I, as a solo developer, built a complete mobile application that works offline, syncs data automatically when online, and shares a unified backend with a web-based admin panel. The frontend is built with React Native, and the backend is written in C# using ASP.NET Core.

What may sound like a team-level system can absolutely be done by one person — as long as the structure is clear.

📱 Frontend Architecture: React Native + SQLite + Sync Engine

The mobile client is built with React Native and uses SQLite for local data persistence. The architecture is layered and clean:

  • Screens: Each business flow (task detail, photo capture, data entry) is isolated in a screen module
  • Components: Reusable UI components like buttons, inputs, modals
  • Models: Typed data structures, all aligned with the backend’s field naming (snake_case)
  • Services: Business logic, validation, task management, and offline state marking
  • Database Manager (dbManager): Centralized SQLite table schema and query wrapper
  • Sync Scheduler (syncScheduler): Responsible for marking dirty records, triggering sync, handling conflict resolution, and status tracking

For example: the user records a reading and takes a photo — that data is stored in SQLite and flagged as dirty=1. The sync scheduler runs in the background every few minutes. If the network is available, it pushes dirty data to the server and marks it clean after confirmation.

🌐 Backend Architecture: ASP.NET Core Web API + EF Core + SQL Server

The backend uses ASP.NET Core Web API with EF Core for data access, and it serves both the mobile app and the web admin portal.

  • EF Core (Code First): Manages models, migrations, and database operations
  • All APIs use standardized fields: device_id, local_id, and last_modified to support de-duplication and conflict detection
  • Table schema includes updated_at, is_deleted, and synced to track versioning and sync status
  • The web admin frontend consumes the same APIs as the mobile app, enabling shared business logic
  • Token-based authentication and user-based data isolation are enforced at the API level

The backend was originally built to serve mobile, but as needs expanded, the web portal re-used the entire service layer without code duplication.

🔁 Sync Mechanism Design

The sync logic is simple but solid:

  1. Local changes are marked with dirty=1
  2. Background job checks connectivity every X minutes
  3. Dirty records are POSTed to the backend
  4. Backend accepts the data if updated_at is newer, or rejects with status
  5. Cleaned-up entries get dirty=0 and synced_at timestamps
  6. The client can pull downstream changes and apply patches

Manual sync via a button is also available for power users or critical moments.

? Key Highlights

  • Mobile app works fully offline, including photo capture and data entry
  • Syncing is automatic and happens in the background
  • Shared API layer supports both mobile and web, no redundant logic
  • EF Core provides a structured, version-controlled schema
  • Lightweight deployment and maintenance for solo or small-team projects

🧩 Tech Stack

  • React Native (with TypeScript)
  • SQLite (via expo-sqlite)
  • ASP.NET Core Web API
  • EF Core + SQL Server
  • GitHub Actions (for CI/CD and APK builds)
  • Web Admin Panel (uses same APIs)

What started as a local data collection app turned into a complete system — from offline-first mobile UX to centralized backend logic and admin tools.

Sometimes, building a robust system doesn’t require complex tooling or a big team. If you clearly define boundaries, stick to responsibilities, and don’t over-engineer, one person can ship a production-grade full-stack app.

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/94134.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/94134.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/94134.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

在Idea中,配置maven

? 哈嘍,屏幕前的每一位開發者朋友,你們好呀!?? 當你點開這篇文章時,或許正對著 IDE 里閃爍的光標發呆,或許剛解決一個卡了三天的 bug,正端著咖啡松口氣 —— 不管此刻的你在經歷什么,都想先和…

mac 字體遍歷demo

文章目錄邏輯字體類頭文件實現文件使用文件主程序CMakeLists文件腳本文件邏輯字體類 #ifndef LOGICAL_FONT_H #define LOGICAL_FONT_H#include <string> #include <memory> #include <CoreText/CoreText.h> #include <CoreFoundation/CoreFoundation.h&g…

2025牛客多校第六場 D.漂亮矩陣 K.最大gcd C.棧 L.最小括號串 個人題解

L.最小括號串 #數組操作 #貪心 題目 思路 感謝Leratiomyces大佬賽時的提示&#xff0c;否則估計還一直簽不了到&#xff08;&#xff09; 首先&#xff0c;貪心地構造出最優情況&#xff1a;數組左半部分全是(&#xff0c;右半部分全是)&#xff0c;隨后通過判斷給定的區間…

Ubuntu搭建PX4無人機仿真環境(5) —— 仿真環境搭建(以Ubuntu 22.04,ROS2 Humble 為例)

目錄前言1. 準備下載源碼方式一&#xff1a;方式二&#xff1a;安裝依賴安裝 Gazebo2. 安裝 Micro XRCE-DDS Agent3. 編譯4. 通信5. offboard 測試參考前言 本教程基于 ROS2 &#xff0c;在搭建之前&#xff0c;需要把 ROS2、QGC 等基礎環境安裝配置完成。但是這塊的資料相比較…

自動駕駛中的傳感器技術11——Camera(2)

1、自駕Camera關鍵技術點匯總 ADAS Camera 關鍵技術點摘選&#xff08;IEEE-P2020工作組&#xff09;如下&#xff1a; Ref &#xff1a; 5. IEEE 相關標準 - 圖像質量與色彩技術知識庫 https://www.image-engineering.de/content/library/white_paper/P2020_white_paper.pd…

福彩雙色球第2025088期籃球號碼分析

蔡楚門福彩雙色球第2025088期籃球號碼分析&#xff0c;上期開出籃球號碼數字08&#xff0c;數字形式是合數偶數2路球數字&#xff0c;小號區域&#xff0c;0字頭數字。本期籃球號碼分析&#xff0c;4尾數0414遺漏9期上次遺漏11期&#xff0c;2尾數0212遺漏4期上次遺漏27期&…

【兆易創新】單片機GD32F103C8T6系列入門資料

GD32F103xx 系列器件是一款基于ARM Cortex-M3 RISC內核的32位通用微控制器&#xff0c;在處理能力、降低功耗和外設方面具有超優的性價比。Cortex-M3是下一代處理器核心&#xff0c;它與嵌套矢量中斷控制器(NVIC)&#xff0c; SysTick計時器和高級調試支持緊密耦合。 GD32F103…

高效輕量的C++ HTTP服務:cpp-httplib使用指南

文章目錄httplib介紹與安裝使用案例httplib介紹與安裝 C HTTP 庫&#xff08;cpp-httplib&#xff09;是一個輕量級的 C HTTP 客戶端/服務器庫&#xff0c;它提供了簡單的 API 來創建 HTTP 服務器和客戶端&#xff0c;支持同步和異步操作。以下是一些關于cpp-httplib 的主要特…

24 SAP CPI 調用SAP HTTP接口

SAP CPI 訪問SAP接口一般用RFC或者HTTP,個人在項目中兩種方法都用過,最后還是傾向于HTTP的方式,此方式易于維護,統一管理,接口搭建比較方便。 讀者朋友可網上自行搜索"SAP 發布HTTP接口",SAP CPI調用SAP發布的HTTP接口。 配置CPI接口前,需要將CPI的證書導入…

C/C++常用字符串函數

一、字符串函數介紹&#xff1a; 字符串作為程序中常用的數據類型&#xff0c;學會對字符串進行處理是作為一名C/C程序員的基本功&#xff0c;我們要學會使用相關函數&#xff0c;并且對重點函數要會自己手動實現&#xff08;下文對重點函數有實現代碼以及相關示例&#xff09…

YOLO的Python實現以及 OpenCV

YOLO的Python實現以及 OpenCV Darknet 實現 YOLO 從頭開始開發 YOLO模型不容易&#xff0c;所以我們要使用預訓練模型在項目里進行目 標檢測。你可以在 https://pjreddie.com里到所有可用的預訓練模型。這是 Joseph C. Redmon的主頁&#xff0c;他是 Darknet的維護者。 注意 …

譯|Netflix 數據平臺運營中基于機器學習自動修復系統

來自上傳文件中的文章《Evolving from Rule-based Classifier: Machine Learning Powered Auto Remediation in Netflix Data Platform》 本文介紹了Netflix如何將基于規則的錯誤分類器與機器學習服務集成&#xff0c;實現Spark作業失敗的自動修復。技術亮點包括結合規則和ML智…

PAES算法求解 ZDT1 雙目標優化問題

前言 提醒&#xff1a; 文章內容為方便作者自己后日復習與查閱而進行的書寫與發布&#xff0c;其中引用內容都會使用鏈接表明出處&#xff08;如有侵權問題&#xff0c;請及時聯系&#xff09;。 其中內容多為一次書寫&#xff0c;缺少檢查與訂正&#xff0c;如有問題或其他拓展…

邏輯回歸的應用

一參數邏輯回歸參數及多分類策略等完整解析LogisticRegression 初始參數聲明LogisticRegression(penaltyl2, dualFalse, tol0.0001, C1.0, fit_interceptTrue, intercept_scaling1, class_weightNone, random_stateNone, solverliblinear, max_iter100, multi_classovr, verbos…

C語言(長期更新)第7講:VS實用調試技巧

C語言&#xff08;長期更新&#xff09; 第7講 VS實用調試技巧 跟著潼心走&#xff0c;輕松拿捏C語言&#xff0c;困惑通通走&#xff0c;一去不回頭~歡迎開始今天的學習內容&#xff0c;你的支持就是博主最大的動力。 目錄 C語言&#xff08;長期更新&#xff09; 第7講 …

CONTRASTIVE-KAN:一種用于稀缺標記數據的網絡安全半監督入侵檢測框架

研究背景與挑戰? ?工業環境需求?: 第四次工業革命中,物聯網(IoT)和工業物聯網(IIoT)的普及使網絡安全成為關鍵挑戰。 入侵檢測系統需實時性高,尤其對關鍵基礎設施(如燃氣管道)的快速攻擊檢測至關重要。 ?核心問題?: ?標簽數據稀缺?:工業系統多數時間處于正常…

綜合:單臂路由+三層交換技術+telnet配置+DHCP

技術考核1 實驗拓撲&#xff1a;實驗需求 1.按照圖示配置IP地址設備名 2.在SW1和SW2之間配置鏈路聚合增加鏈路帶寬&#xff0c;提高可靠性 3.PC5和PC6屬于VLAN10&#xff0c; PC7和PC8屬于VLAN20 4.SW1和SW2屬于二層交換機&#xff0c;SW3為三層交換機&#xff08;VLAN100用于對…

工業火焰識別漏報率↓78%!陌訊多模態融合算法實戰解析

原創聲明&#xff1a;本文技術方案解析基于陌訊技術白皮書2025版 標簽&#xff1a;#陌訊視覺算法 #火焰識別優化 #工業安全監控 #邊緣計算優化一、行業痛點&#xff1a;工業火災監控的漏檢危機據《2025工業安全白皮書》統計&#xff0c;化工場景傳統火焰識別系統漏報率高達35%&…

C++引用:高效安全的別名機制詳解

目錄 一、引用的概念 二、引用的特性 1、定義時必須初始化 2、一個變量可以有多個引用 3、引用一旦綁定實體就不能更改 三、const引用&#xff08;常引用&#xff09; 1、const引用的基本特性 2、臨時對象與const引用 3、臨時對象的特性 4、const 引用作為函數形參 …

大語言模型API付費?

下面是目前主流 大語言模型 API 的付費情況總覽&#xff1a; &#x1f9e0; 一、主要大語言模型 API&#xff1a;是否付費對比 提供方模型是否免費限制 / 說明OpenAIGPT-3.5 / GPT-4 / GPT-4o? 付費為主有免費額度&#xff08;如 ChatGPT 免費版&#xff09;&#xff0c;API …