#3. HW1 No Code App/Storyboard Practice / Shopping App

lululemon_App

目錄：

• 作業來源
• 作業目的
• App介紹
• App架構
• 作業GIF展示
• 使用到的工具
• 心得
• GitHub Link

作業來源

#24 Storyboard 電子書 App

作業目的

不寫程式，從 storyboard 運用 tab bar controller，navigation controller，table view controller & static cell 實作電子書 App。

App介紹

這次做的是購物App，選用品牌lululemon當作題材，從lululemon官網尋找衣服照片，App僅學習用途不會商業使用．

App架構

兩個Tab Bar Controller 兩個主頁

用 Tab Bar Controller 製作 Tab App 的步驟說明

Navigation Controller 兩個主頁，點選產品進入產品介紹頁

產品頁照片使用水平Scroll View左右滑動可以預覽照片

navigation bar 右邊購物車Bar Button Item進入My Bag

Tab Bar Controller & Navigation Controller 的相關練習

完整的App架構

因為是無程式版本App，為模擬產品加入到My Bag有加ㄧ 加二的順序，所以建立四個My Bag 來模仿從第一個產品加到第四個產品慢慢增加的感覺

作業GIF展示

Shop主頁 + 白天模式

Photo主頁 + 黑夜模式

使用到的工具

在下面這篇文章裡 #2 iOS First Class Summary

#2 iOS First Class Summary

心得

這是這是我第一個iOS App，從無程式版本的App開始入手，也大量練習Storyboard拉如何拉UI，原本以為會一點繪圖軟體的經驗會很好上手，但實際操作跟想像得不太一樣，拉起來超級痛苦，不過還好有搭配彼得潘上課的教學頭影片，邊拉邊查投影片，才得以完成拙作，還請大家多多指教！

其實要製作的畫面不多，主要是利用流程讓不同畫面連接不同頁面，讓App操作感覺很多元

Github Link

GitHub - chengyu089/lululemon_App