相信大家都有聽過firebase的大名吧？它已經是APP開發者最愛的BaaS - 後端服務平臺之一，自從Google買下它之後，一直在積極的將本身的一些服務轉到上面，像是最有名的例子就是將推播服務的GCM - Google Cloud Messaging轉成FCM - Firebase Cloud Messaging，還有將Fabric關閉等…，總總的跡象都表示Google的決心。其實市面上另外還有一套叫Parse.com的資料庫，是由Facebook買下，不過由於不賺錢就關閉跟開源了。以下的Code只會寫出比較重要的部分，如果要完整的Code的話，請去github下載，感謝。 Realtime Database 建立 …

Read More

相信Adobe出品的Photoshop大家應該都是耳熱能詳的，而PS這個詞都已經等同於修圖這個動詞了，不過它要花點錢才能使用，難到世界上沒有其它的免費修圖軟體嗎？有的，它就是FireAlpaca - 火羊駝，它也是傳說中的草泥馬？當初為什麼會使用它呢？除了因為它在Windows跟macOS上都能使用之外，主要也是因為英文只有小學程度的我，應該還是要選一個有中文介面的軟體才是，加上它是日本這個動漫大國的PGN公司出品，自然品質有一定的保證，而且官方的教學也相當豐富，最重要的是它的Logo太かわいい了…(╭￣3￣)╭♡ 。在現代，會修圖的打字工應該很正常吧？ 常用功能 選擇範圍 魔術棒 (去除背景) 簡易的去背功能，利用『魔術棒』去自動 …

Read More

這篇應該算是『極短篇』吧，個人其實是滿喜歡魔術的(喜歡被騙？)，最近在Youtube上看到一篇牌穿進手機的魔術揭秘，看起來是很久以前的魔術了(把妹招術？)，身為魔術師(脫魯？)的我，當然也要來練習一下，不過它這篇手機上的牌是固定的，而個人在這裡做一些改良，主要是利用ProximityMonitor的變化，跟Firebase的RealtimeDatabase來變魔術，讓我們來看看吧。 準備道具 iPhone手機一支 可連上Firebase Console的手機一支 未使用過的撲克牌一付 想要認識的對象 (心儀的對象？) 你的好朋友們 (幫忙作弊？) 事前準備工作 撲克牌的檔案命名 Firebase 資料庫長相如下，主要是要取得 …

Read More

主要這一篇文章是要做一個比較完整的案例，個人一直覺得『挫折感才是成功的捷徑』，一直做『對的』事情很難成長的，唯有『挫折感』才能讓人記憶深刻，像我的好人卡已經打破櫻木花道50+的記錄了，真是めでたしめでたし啊，等我要推出好人撲克牌的時候，再麻煩大家再來抖內，集資一下吧。話不多說，大家一起來從做中學吧，以下只會將部分的Code貼上解說。 架構 畫面架構 在圖上可以看到一共有三個畫面，一個是登入的畫面，一個是清單列表，一個是介紹的內容，很符合一般APP的長相。 檔案架構 如圖上所示，畫面放在『libs/widgets』內，有關資料的長相就放在『libs/models』中，而『libs/helpers』則是放一些公用程式，資源檔 (圖片、影 …

Read More

Bash是Unix shell的一種，一般來說Bash就是可以接受用戶輸入命令的程式，包括Linux與MacOSX都將它作為預設shell，它有點類似Windows的命令提示字元，但是功能比較強大，比較像是Windows PowerShell。說了這麼多，為什麼要學bash呢？使用GUI來做事就好了呀？因為有些日常的鎖碎小事，可以利用系統內建的bash就可以處理了，比方說影音轉檔，就可以使用ffmpeg指令，加上迴圈就可以了，其實很多影音轉檔的GUI裡面都是包ffmpeg的。說了這麼多，我們就來慢慢瞭解bash的強大，學習一點簡單的Script吧。 Bash初體驗 建立一個Shell檔 當然只要是『純文字』型的編譯器都可以用來編譯， …

Read More

程式界似乎流傳著一句話：『Code永遠都是別人寫的好』，iOS界的Cocoapods、Android界的Gradle、Nodejs界的NPM…等管理工具，當然Dart界也有Pub，下載現成能用的Code是件幸福的事，除了能讓工作早日完工之外，也幫公司省了一大筆的電費(加班費？)，減少二氧化碳的排放量，為地球盡份心力，何樂而不為呢？現在我們就來試試如何下載別人寫好的package來試用一下吧。 使用 Dart Packages 首先，先去管理中心去尋找你所需要的套件，這裡我們找的是url_launcher 安裝套件 編譯pubspec.yaml檔，然後安裝，當然要使用自己的私人倉庫也是可以的 url_launcher: ^5.0.2 …

Read More

接下來，我們要進入按鈕動作的世界了，先介紹FloatingActionButton，其實Android的也叫FloatingActionButton，想想這也沒錯，降低Android開發者的學習曲線。我們現在就來看看吧。 FloatingActionButton 說明 名稱 說明 重點 StatelessWidget 狀態不變的 (點了也沒有反應) Widget build(BuildContext context) StatefulWidget 狀態可變的 (可以被點擊之類的) @override State createState() State 點擊之類的反應 setState(fn) 程式碼 請各位允許我使用比較不專業的術語 …

Read More

恐怖喔，恐怖到了極點喔，沒有想到短短數日，除了Flutter已經變成1.5版之外，而且Dart也變成了3.0版，更恐怖是它開始可以寫WebApp了耶，雖然Dart一開始就是想要取代JavaScript的，但是因為TypeScript可以原生支援JavaScript，所以就敗下陣來，而後在Flutter的加持下又重新受到大家的關注，如今Flutter藉由Dart可轉譯為JavaScript的特性，開始計畫性的侵蝕WebApp。好吧，就讓我們來做個簡單的WebApp吧。 安裝過程 更新FlutterSDK 請先將FlutterSDK更新到1.5版以上 安裝webdev 這個很重要，沒有安裝這個package的話就不能用了 flutter …

Read More

這次是要說明Flutter的畫面佈局，在Flutter的世界中，萬物皆Widget，應該在iOS中算是UIView吧？UI的根源，一切都是由此而生，話不多說，讓我們踏出成功的第一步。 Container佈局 開始寫Code 首先，flutter的程式碼都是在『lib資料夾』之下 資源管理 在這裡pubspec.yaml可以設定安裝第三方套件、加入影音、圖片…等 assets: - images/book.png - images/time.png 程式碼 // main.dart import 'package:flutter/material.dart'; // 內容主要以iPhone的名稱去做類比 void main() => …

Read More

GraphQL是一種用於API的查詢語言，這項技術是由Facebook從2012年開始使用，為了因應跨裝置及開發News Feed功能而開發，後來覺得不錯用，所以就於2015年公開釋出，它讓Query更加自由，以往如果要新增一組Query，就必須跟後臺人員溝通，現在可以讓前臺的人有很大的空間去修改(工作又多了一項？)，有效減少Request的次數，是不是聽起來很不錯啊？現在就來試試看吧，Let’s go。 安裝 基本環境 首先要有Nodejs的環境，然後安裝Apollo Server node -v npm -v mkdir graphql_demo cd graphql_demo npm init -y npm install …

Read More