01 Introduction Welcome! Motivation 1 Security is an essential aspect of a web application. There could be a variety of security breaches that can happen if the web application has not addressed these during the design and development phase. The diagram below describes some common security vulnerabilities: Some Commom security vulnerabilities To mitigate a few of the above-described security vulnerabilities, we need to incorporate a secure authentication and authorization mechanism in our web application. We will learn about a few authentication and authorization mechanisms, along with the implementation of JSON web token-based (JWT) authentication. Motivation 2

01 CI/CD Introduction What is DevOps? DevOps is the combination of industry best practices, and set of tools that improves an organization’s ability to: Increase the speed of software delivery Increases the speed of software evolution Have better reliability of the software Have scalability using automation, Improved collaboration among teams. In other words, these tools enable a company to showcase industry best practices in software development.

Introduction {%youtube i2pSr-MlCPU%} UI {%youtube 8IkNVrCqtvo%} Here's the commit with the changes made in this video. What We're Going to Build Now that we have an index.html file and all of the JavaScript code has been transferred over to script tags, let's start adding in a User Interface. Since our project has two pieces of state, we'll need two areas:

食譜相片說明 如果要上傳照片 上傳照片有兩種api，如果真的要上傳到firebase請使用第一個api，因為怕把mysql跟firebase的上傳方式寫再一起怕firebase容量超過限制的問題因此開設兩種上傳模式。 POST {{addr}}/recipe/images/upload/db/{recipeId} 只有上傳至mysql 若是利用這個方式上傳回應如下

如何restart一個應用程式? step1. get into container step2. find backend container app, and click into the container step3. Restart the container

補充: 更多annotation https://www.itread01.com/content/1549646648.html JoinColumn vs JoinTable差別 joinColumn是透過FK來進行連接 JoinTable是將彼此的id獨立出來進行連接 JoinColumn的使用時機 如果有一個實體叫做outfit，其中@ManyToOne關聯上designer，這時候@JoinColumn會在目標實體表(像是designer_Id)定義目標表的foreign key。 @Entity

Introduction {%youtube 0ioxfKg5yM8%} Connect & Provider {%youtube 6Kfj_tRMJsI%} Getting the Store to Each Component The first thing we want to do is improve how each component gets access to the store. If it's tough for a component to access the store, whether it's to get the state, listen to the state, or update the state, nothing else we do will matter. Right now we’re just passing the store down as a prop. It works fine enough in our small app, but what if we had a larger app with more layers to it? Passing the store down ten components deep wouldn't scale very well. One of the main points of having a store is to avoid passing props down through a bunch of components. One reason React (talking about React for a moment, not Redux) is so popular is because it's very efficient. It's efficient in keeping state localized to a component, it's efficient in keeping UI confined to a component, and it's efficient in knowing when something has changed and re-rendering just that component. So the second thing we need need to figure out is how to re-render components only if the data they depend on (from the store) changes. Right now, we're solving this by calling getState at the root of our application and then passing the data down. Again, this won't scale well as our app grows.

Introduction {%youtub wmuL0wNvaZs%} External Data We're going to use a database to interact with our Todos application. We're simulating the database to keep that aspect of the project less complex. This is the HTML script tag you need to add the database to your application which we'll use in the following video: <script src="https://tylermcginnis.com/goals-todos-api/index.js"></script> {%youtube diArZ09Mw1U%} Here's the commit with the changes made in this video.

Introduction {%youtube nq3E2n-ZdvA%} React as our UI In this lesson, we're going to move away from our application being plain HTML and convert it to being powered by React. To do that, we'll need to add a number of libraries: react react-dom babel

[ToC] Introduction {%youtube 9e3divgVWus%} {%youtube TFzVN0hDcpI%} Here's the commit with the changes made in this video. Redux Middleware {%youtube WOEUwVOI0iw%} You’ve learned how Redux makes state management more predictable: in order to change the store’s state, an action describing that change must be dispatched to the reducer. In turn, the reducer produces the new state. This new state replaces the previous state in the store. So the next time store.getState() is called, the new, most up-to-date state is returned.

[ToC] Introduction {%youtube zSHjvdQ7nZ8%} Welcome to the course on Redux! There's no doubt that Redux and the Redux ecosystem is a powerful skill to have in your arsenal. However, it is not a topic for beginners and can be a daunting area to break into. We've broken down your path to learning Redux into the following lessons: Lesson 1 - Managing State Lesson 2 - UI + Redux Lesson 3 - Redux Middleware Lesson 4 - Redux with React

如何import別人的postman檔案 方法一 打開postman，並且選擇import 選擇Link, 並填上以下網址 https://www.getpostman.com/collections/a681f4ca89d3122fd8fb 並且選擇import

React Router Intro {%youtube PV6TN8ahSX0%} Single-Page Apps Single-page applications can work in different ways. One way a single-page app loads is by downloading the entire site's contents all at once. This way, when you're navigating around on the site, everything is already available to the browser, and it doesn't need to refresh the page. Another way single-page apps work is by downloading everything that's needed to render the page the user requested. Then when the user navigates to a new page, asynchronous JavaScript requests are made for just the content that was requested. Another key factor in a good single-page app is that the URL controls the page content. Single-page applications are highly interactive, and users want to be able to get back to a certain state using just the URL. Why is this important? Bookmarkability! (pretty sure that's not a word...yet) When you bookmark a site, that bookmark is only a URL, it doesn't record the state of that page. Have you noticed that any of the actions you perform in the app do not update the page's URL? We need to create React applications that offer bookmarkable pages!

Introduction {%youtube mKcaVQEv38Q %} render() Is For Rendering, Only! I just mentioned this in the video, but I want to stress it again - data should not be fetched in the render method! A component's render() method should only be used to render that component; it should not make any HTTP requests, fetch data that's used to display the content, or alter the DOM. The render() method also shouldn't call any other functions that do any of these things, either. So if render() is only used for displaying content, we put the code that should handle things like Ajax requests in what React calls lifecycle events. Lifecycle Events Lifecycle events are specially named methods in a component. These methods are automatically bound to the component instance, and React will call these methods naturally at certain times during the life of a component. There are a number of different lifecycle events, but here are the most commonly used ones.

這裡是Voice App的內容說明文件，一些參考資料和每日更新如下 https://hackmd.io/qC6DvXmUSFabkgIgLlV_7g?both=# 語音的部分 這邊統一使用RecognizerIntent作為應用延伸，範例影片如下： {%youtube wcrRjqCgnl8 %} Google語音套件 - RecognizerIntent RecognizerIntent for Java in Android

Every morning, zhen stayed home and doing nothing. Every evening, zhen went home and starting sleeping. 09/27 GOOGLE API 應用於 Android ，各種code如下 版本1 (測試成功) https://ironglion.com/archives/android-%E8%AA%9E%E9%9F%B3%E8%BC%B8%E5%85%A5-recognizerintent/ 版本2 (測試失敗) https://codertw.com/android-%E9%96%8B%E7%99%BC/345250/8%AA%9E%E9%9F%B3%E8%BC%B8%E5%85%A5-recognizerintent/

本筆記僅提供國立臺灣科技大學1091學年度 【MI3510701】雲端運算應用與實務課程之使用 請勿外流，若有侵權，法律必究。 Creater 臺灣科技大學　四資管三

雲端應用 CI/CD tags: 高橋流簡報 B10709005 張宜楨 B10709032 陳靖宜 B10709034 王慧婷 B10709036 洪薏璇 動機 何謂CI/CD？

CI/CD? test jfdklafjkdal test fdsafads dfsajkdfla;