系統開發

2019/05/03 (資料更新)
2021/06/29 (增加連結)
2023/03/16 (新增投影片)

規模

• How to design a system to scale to your first 100 million users 

  • Start with simplest: all in one.

  • The art of scability: scaling out, scaling up.

  • Scaling a relational database: master-slave replication, master-master replication, federation, sharding, denormalization, and SQL tuning.

  • Which database to use: NoSQL or SQL?

  • Advanced concepts: caching, CDN, geoDNS., etc.

網路基本知識

• Developers Need to Learn Basic Network Engineering 

Web

• PHP (吳濟聰老師web programming課程教材)

• Java + spring framework

  • 吳濟聰老師Web Programming教材

  • Java on AWS

• Node.js + React.js

  • How to get create-react-app to work with a Node.js back-end API

• .net MVC

  • .net on AWS

  • .net on Azure (有學生專案:https://azure.microsoft.com/zh-tw/free/students/#free-products-section)

    • 虛擬機、SQL server、App Service

• python + django

  • python on AWS

• 超全的web開發工具和資源

  • JavaScript library

    • jQuery (JQuery UI, JQuery Mobile)

    • React

  • 前端框架

    • Bootstrap (CSS + javascript)

    • Foundation

    • Semantic UI

  • 使用者介面框架

    • React (javascript)

    • Vue (javascript)

    • Angular

      • AngularJS (Agular 1 / JavaScript)

      • Angular 2, 4 (rewite in TypeScript)

      • Angular 5 (supports PWA)

        • Creating PWA with Angular 5. Part 1

        • Creating PWA with Angular 5. Part 2

  • 應用框架

    • ASP.net MVC (c#)

    • Django (Python)

    • Laravel (PHP)

  • 程式語言 / 開發平台

    • Java

    • c#

    • PHP

    • Javascript

      • Node.js (後端)

    • Python

跨平台

Progressive Web Apps (PWA) 

簡單的說就是透過網頁來達到手機的功能，現在可以透過瀏覽器取得手機上很多資訊 (詳參: What Web Can Do Today? )，比如取得經緯度、相機、儲存資料在手機端，所以，也有很多公司不再發展App，而是透過網頁來提供服務。基本上PWA就是這樣的概念，好處是，可以快速的把原本已經是符合RWD的網頁，轉換成PWA。

• Progressive Web Apps (PWA) (詳參:Progressive Web Apps)

  • How you can develop Progressive Web Apps that feel like native mobile apps

  • Generate your Progressive Web App

    • Manifoldjs is becoming PWA Builder, to simplify building Progressive Web Apps

  • Angular 5 & PWA

    • Creating PWA with Angular 5. Part 1

    • Creating PWA with Angular 5. Part 2

  • Your First Progressive Web App

  • 什麽是 Progressive Web App?

  • 30 天 Progressive Web App 學習筆記

  • Progressive Web App 會是未來趨勢嗎？

  • 我們真的需要網頁版App嗎？Google PWA的困局

React native

• React native (based on Javascript, flexbox) (詳參: What are the main differences between ReactJS and React-Native?)

  • 行動裝置程式設計 課程教材 (react native)

  • react native (吳老師專題知識分享網站)

  • 從零開始學 ReactJS（ReactJS 101） (2018年2月更新) 

    • 附錄二、用 React Native + Firebase 開發跨平台行動應用程式

  • 拆帳 app 和 React Native 初學心得 (2017年8月)

    • 先安裝expo並可利用 https://snack.expo.io/ 寫簡單的react native測試

  • ReactNative開發入門教學

    • ReactNative開發入門教學(1)-HelloWorld (2017年4月)

    • ReactNative開發入門教學(2)-觸發事件 (2017年4月)

    • ReactNative開發入門教學(3)-與伺服器溝通（Fetch）(2017年4月)

    • ReactNative開發入門教學(4)-利用AsyncStorage保存登入資料 (2017年4月)

    • ReactNative開發入門教學(5)-Navigation實現多頁，畫面跳轉，翻頁 (2017年5月)

    • ReactNative開發入門教學(6)-用ScrollView製作有換頁功能的相本 (2017年7月)

  • React Native 起手教學 (利用XDE或Node.js，不需要Android Studio或XCode) (2017年7月)

  • 一看就懂的 React Native + Firebase Mobile App 入門教學 (2016年9月)

  • 用 React Native 開發鉅亨網 App 的經驗分享 (2016年7月)

  • React Native 簡介：以 JavaScript 建構 iOS App (原文: Introduction to React Native: Building iOS Apps with JavaScript 2015年4月)

  • Getting Started

    • Learn the Basics

  • Get Started: React native with AWS

  • React native in Visual Studio

  • Flexbox

    • 用遊戲學flexbox

  • React是由Facebook支持的JavaScript library (詳參: 從零開始學 ReactJS（ReactJS 101）, React (JavaScript library))

    • Learn React.js from Top 45 Tutorials for the past year (v.2018)

    • React native (詳參: What are the main differences between ReactJS and React-Native?)

    • ReactXP (React Cross Platform)

    • Spring REST + react  React.js and Spring Data REST

    • React studio (mac OS 10.9以上) 可以快速產生雛型並轉成程式碼的工具 (PWA，不支援 react native) **目前免費**

      • Designing responsive web layouts in React Studio

      • The makings of a component

      • Creating lists and using live data in React Studio

      • Meet the Design Compiler

Flutter

• Flutter (吳老師專題知識分享網站)

  • Flutter使用的語言是Dart

  • Flutter 教學：從零開始 一步一步學會使用跨平台套件 Flutter (原文: EntrenaPro — From Zero To Flutter)

• React Native or Flutter

  • Flutter vs. React Native – What to Choose in 2020?

  • React Native vs Flutter. What to Choose for Your Next Project

  • React Native or Flutter: Which should I choose? (Part one) General introduction

  • React Native or Flutter: Which should I choose? (Part two) Comparisons in detail

  • React Native or Flutter: Which should I choose? (Part three) Code samples

其他

• NativeScript / JavaScript, TypeScript

  • Svelte Native

    • Svelte + NativeScript

    • Tutorial

• Free Cross-Platform Mobile App Development Tools Compared - 2017

  • Hybrid

    • Apache Cordova / JavaScript

    • Adobe PhoneGap (based on Cordova) / JavaScript

    • Ionic Framework (Angular + PhoneGap) / JavaScript, TypeScript

    • Framework 7 (Cordova + vue.js) / JavaScript

    • Manifold (Node.js tool for App Generation & PWA) / JavaScript

  • Native

    • Apache Weex (supports vue.js & Rax) / JavaScript

    • React Native (based on react) / JavaScript

    • Flutter / Dart

      • FIREBASE DATABASE IN FLUTTER

      • Firebase for Flutter

      • Flutter: How I built a simple app in under an hour from scratch

      • Flutter: Bookshelf App Part 2, Personal Notes and Database Integration

    • Jasonette / JavaScript+JSON

• Apache Cordova

  • in Visual Studio

  • Adobe PhoneGap

• Xamarin: Ruby, C#

  • in Visual Studio

  • Xamarin Studio

iOS

• 一般都是使用Apple提供的XCode + Swift (詳參:The Big List of iOS App Development Tools)，可以利用Sketch進行畫面設計，並export給XCode (詳參: Build an iOS App: From Sketch to the App Store)，或者使用XCode內建的Interface Builder 。

  • 詳參: Build a Basic UI， Design with Swift，Storyboard vs Programmatically in Swift，iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code。

Android 

• Android Studio

  • Layout Editor

• Kotlin

  • Android Tutorial using Kotlin (中文)

    • 2017年5月的Google開發人員大會，發佈Android支援Kotlin為官方的程式設計語言。在2017年10月發表的Android Studio 3，開發人員可以使用Kotlin開發Android App。

  • 淺談Kotlin，Java終結者?

  • Realm:明年底Kotlin將取代Java成為Android平台上最受歡迎的語言 (2017/10/16)

  • Kotlin and Android

  • Kotlin Tutorial

• Java

  • ㄧ般使用Android Studio(based on IntelliJIDEA)或Eclipse，介面設計建議使用Android Studio的Layout Editor (詳參: Build a UI with Layout Editor)

    • 學習Android之路 ** 學長姐推薦 **

    • UI設計可以參考: Material Design ** 學長姐推薦 **

    • Simplified Coding ** 學長姐推薦 **

    • Developer Guides

      • App Fundamentals

      • Introduction to Activities

        • Fragment

      • Intent & Intent Filter

      • User Interface & Navigation

        • Layouts

        • Navigation

          • Providing descendant and lateral navigation

          • Create a navigation drawer

        • Slide between fragments using ViewPager

        • Menus

        • Search

      • Images and graphics

      • App data and files

        • Save key-value data (SharedPreferences)

    • REST API

      • Android From Scratch: Using REST APIs

      • Getting Started with REST: Consuming simple REST APIs in Android

      • with Retrofit

        • Retrofit 操作教學

        • Using Retrofit 2.x as REST client - Tutorial

        • 學習 Android Retrofit 2

    • Mobile App Backend Services

      • 可使用firebase、App Engine或Compute Engine

    • Android Studio 中文開放式課程

  • Android & Firebase Firestore

    • Firebase Cloud Firestore 筆記

    • Cloud Firestore 之首部曲，類別庫導入與設定

    • Cloud Firestore 之二部曲，資料新增讓你的 APP 馬上成為雲端應用

    • Cloud Firestore 之三部曲，設計資料類別(Model)快速新增複雜資料

    • Cloud Firestore 之四，查詢全部資料集的資料Model與複合條件查詢

    • Get Started with Cloud Firestore

      • Perform Simple and Compound Queries in Cloud Firestore

      • Order and Limit Data with Cloud Firestore

    • Cloud Firestore Quickstart (A Restaurant App: Friendly Eats)

      • Restaurants (A Collection)

        • Restautrant

          • Ratings (A Collection)

            • rating, text, timestamp, userId, userName

          • avgRating, catetgory, city, name, numRatings, photo, price