Optimize web performance

How to Optimize web performance

Top 20 API trong AI và Machine Learning bạn nên biết

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/flutter-vs-react-native-copy.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2023-07-10 10:14:08</span><h3>Cuộc đối đầu giữa Flutter vs Native
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Flutter và React Native là hai framework được rất nhiều người quan tâm ở thời điểm hiện tại. Điểm chung của cả 2 đều là Cross Platform Mobile, build native cho cả Android và iOS. Cả 2 có thể giao tiếp với native để viết các module base on native (gần như bắt buộc). Hãy cùng nhìn qua những ưu điểm và nhược điểm của cả hai công nghệ này nhé.


</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Flutter
</a></li>
<li class="list-goto-1"><a href="#goto-h2-1">2. React Native</a></li>
<li class="list-goto-1"><a href="#goto-h2-3">3. Lời kết</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Flutter</h2>
<h3 class="ml-3">1.1. Ưu điểm</h3>


<p>– Mạnh về animation, performance app rất cao.<br>
– Giao tiếp gần như trực tiếp với native<br>
– Static language nhưng với syntax hiện đại, compiler linh động giữa AOT (for archive, build prod) và JIT (for development, hot reload)<br>
– Có thể chạy được giả lập mobile ngay trên web, tiện cho development. Các metric measure performance được hỗ trợ sẵn giúp developer kiểm soát tốt performance của app.<br>
– Có thể dùng để build các bundle/framework gắn và app native để tăng performance.</p>
<h3 class="ml-3">1.2. Nhược điểm</h3>
<p>– Bộ render UI được team author gần như viết lại, không liên quan tới UI có sẵn của Framework native, dẫn đến memory sử dụng khá nhiều.<br>
– Phải học thêm ngôn ngữ DART, bloc pattern, DART Streaming<br>
– Dù đã release 1.0 chính thức, tuy nhiên còn khá mới. Một số plugin rất quan trọng như Google Map vẫn còn đang phát triển, chưa stable.<br>
– Là con cưng của Google, tuy nhiên hãng dính nhìu phốt với thói quen “quăng con giữa chợ” nên cần cân nhắc.</p>


<div>
<h2 id="goto-h2-1" data-stt="1">2. React Native</h2>
</div>
<h3 class="ml-3">2.1. Ưu điểm</h3><p>– Thiên về development/hotfix nhanh (hot reload, bundle injection)<br>
– Sử dụng JS (quen thuộc với nhiều developer) và có thể share business logic codebase với frontend (js).<br>
– Phát triển bởi Facebook, Facebook dùng cho sẩn phẩm của họ hàng ngày nên developer hưởng lợi khá nhiều từ đây.<br>
– Hiện tại React Native đã có rất nhiều thư viện, gần như đã rất đầy đủ cho các nhu cầu app thông dụng.</p>

 
<h3 class="ml-3">2.2. Nhược điểm</h3><p>– Giao tiếp với native thông qua các bridge, dễ bị bottleneck nếu không được kiểm soát tốt.<br>
– Dùng JS nên mang theo các đặc điểm của JS: rất dễ làm nhưng cũng dễ sai, dẫn tới khó maintain về sau.<br>
– HIệu năng animation là điểm yếu của React Native, muốn làm tốt phải làm từ native, tầng js chỉ call vào, setup views. Tuy nhiên với các interactive animation thì rất đau khổ.<br>
– Không thích hợp cho các app cần năng lực tính toán cao (hash, crypto, etc).</p>
 


 










































                
                











<div>
<h2 id="goto-h2-3" data-stt="3">3. Lời kết</h2>
</div>

<p>Flutter phù hợp với các dự án focus về animation, các layout phức tạp, với thế mạnh sử dụng bộ render tự làm, giao tiếp trực tiếp với GPU và một SDK để viết anim dễ dàng. Cực kỳ phù hợp với các team native (đang có nhu cầu làm thêm các UX có hiệu năng cao vào app native có sẵn). Flutter Developer hiện tại chưa nhiều, sẽ khó tìm người hơn.</p>
<p>React Native phù hợp với các team dùng JS as main language, không có quá nhiều animation phức tạp. RN hiện tại tuyển người khá/rất dễ so với Flutter.</p>
<p>Về quan điểm cá nhân mình thiên về Flutter hơn, cũng tin tưởng vào khả năng phát triển của nó, dùng nó như một sự bổ trợ cho native. Tuy nhiên với sự phát triển của các cross platform hiện tại thì khả năng cao là chúng chỉ có 2 – 3 năm vòng đời, vì thế nếu đã chọn làm mobile thì nên nắm được native.</p>
<p>Không chỉ React Native với Flutter, ngay cả <a href="https://anhben.com/blog-detail/xamarin-introduce/" class="text-gradient">Xamarin</a> chen chân vào cuộc chiến cũng khiến các dev cân nhắc lựa chọn. Vậy dùng Flutter, React Native hay Xamarin phù hợp với dự án, với công ty hay với con đường sự nghiệp của bạn? Không có tốt nhất, chỉ có sự phù hợp nhất mới đem lại hiệu quả.</p>





















                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Cuộc đối đầu giữa Flutter vs Native

Flutter và React Native là hai framework được rất nhiều người quan tâm ở thời điểm hiện tại. Điểm chung của cả 2 đều là Cross Platform Mobile, build native cho cả Android và iOS. Cả 2 có thể giao tiếp với native để viết các module base on native (gần như bắt buộc). Hãy cùng nhìn qua những ưu điểm và nhược điểm của cả hai công nghệ này nhé.

Tìm hiểu về NextJS và build ứng dụng đơn giản kết hợp Firebase


Hầu hết các ứng dụng ngày nay được xây dựng dưới dạng Single-page application (SPA) bằng cách sử dụng framework của JavaScript để cho phép người dùng tương tác phong phú hơn. Với một SPA truyền thống, người dùng thực hiện một yêu cầu duy nhất tới server liên quan đến HTML, CSS và JavaScript cần thiết cho ứng dụng. Vì ứng dụng là một loạt các tập lệnh JS, nên nó phải đợi cho đến khi một số gói JS được tải xuống hoàn toàn trước khi có thể thực hiện bất kỳ yêu cầu nào tới server để đưa dữ liệu vào giao diện người dùng. Điều này có nghĩa là có hai lần đi vòng đến server trước khi người dùng có thể tương tác với ứng dụng.



TypeScript là gì? Toàn bộ kiến thức cơ bản về TypeScript dành cho người mới

TypeScript là thông tin được khá nhiều lập trình viên, người dùng tìm hiểu trong khoảng thời gian gần đây. Bởi lẽ khái niệm về TypeScript thực tế vẫn còn khá mới mẻ và chưa thực sự phổ biến. Bài viết hôm nay, Vietnix sẽ cập nhật đầy đủ thông tin TypeScript là gì? Những kiến thức cơ bản về TypeScript để bạn đọc có thể tham khảo và hiểu rõ hơn nhé!

SASS/SCSS là gì?

Bất cứ một lập trình viên nào đều phải từng làm việc liên quan đến CSS. Tuy nhiên làm việc với CSS thuần một thời gian dài bạn sẽ thấy nó rất nhàm chán. Bạn có thể viết CSS một cách chuyên nghiệp hơn, nhanh và rõ ràng mạch lạc hơn bằng SASS/SCSS.



<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/ssr.jpg" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-12-12 16:14:08.000</span><h3>Server-side Rendering trong React

</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Ở một số bài viết trước, mình có viết về React và đã dùng Create React App để thực hiện ví dụ một cách đơn giản và nhanh chóng nhất. Tuy nhiên sử dụng CRA cũng có một số điểm yếu như khi bạn xem source code trên duyệt web thì bạn sẽ chỉ thấy trang gần như trống trơn và chỉ có phần &lt;head&gt; nhưng hầu như không có gì trong &lt;body&gt;.
</strong></p>
<p><strong>Điều này là kết quả của việc CRA render ứng dụng của bạn ở client-side. Bạn có thể hiểu rằng, tệp .js đã build được tải xuống trình duyệt của người dùng trước khi phần còn lại của trang bắt đầu tải. Việc này làm cho thời gian tải trang ban đầu bị tăng lên và một số trình thu nhập dữ liệu web không thể lập index trang web.
</strong></p>
<p><strong>Có cách tốt hơn để render ứng dụng là server-side rendering.</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Server-Side Rendering?
</a></li>
<li class="list-goto-1"><a href="#goto-h2-1">2. Lý do nên dùng server-side rendering
</a></li><li class="list-goto-2"><a href="#goto-h2-2">3. Client-side Rendering với Server-side Rendering

</a></li><li class="list-goto-3"><a href="#goto-h2-3">4. React SSR framework

</a></li><li class="list-goto-4"><a href="#goto-h2-4">5. Có phải luôn luôn cần đến SSR?
</a></li><li class="list-goto-5"><a href="#goto-h2-5">6. Kết luận

</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Server-Side Rendering?</h2>


<p class="ads_displayed"><a href="https://anhben.com/blog-detail/server-side-rendering" class="text-gradient" target="_blank">Server Side Rendering</a> chính là nội dung website của bạn được hiển thị trên máy chủ chứ không phải sử dụng JS hiển thị trên trình duyệt. Ví dụ như một trang web Laravel thì nội dung chính là đến từ HTTP hiển thị trên server và render ra HTML, CSS và cả JS. Với ứng dụng tạo bởi CRA thì nó chỉ gửi tệp .js đến máy client, từ đây trình duyệt JS của client tạo ra markup sau khi tệp .js được tải hoàn thành.
</p>


<div>
<h2 id="goto-h2-1" data-stt="1">2. Lý do nên dùng server-side rendering
</h2>
</div><p>
    Server-Side Rendering có nghĩa là mọi trang web được hiển thị và tải từ server. Với server-side của React thì có một số nhược điểm như sau:
</p>
<ul class="ml-5">
    <li>SSR cải thiện hiệu suất với điều kiện rằng ứng dụng của bạn là tương đối nhỏ. Tuy nhiên, nó lại có thể làm cho ứng dụng của bạn bị chậm đi với một ứng dụng đủ lớn.
</li><li>Nó làm cho thời gian phản hồi của ứng dụng cũng bị tăng lên. Với một máy chủ yếu hay bận thì làm cho điều này càng tồi tệ hơn.
</li><li>Nó tăng kích thước của phản hồi và đương nhiên rồi thời gian tải trang của bạn không thể nào giảm đi được.
</li><li>Ứng dụng cũng bị làm cho phức tạp hơn.</li>
</ul><p>Tuy nhiên, chúng ta không thể không kể đến những thuận lợi, và sự cần thiết của SSR trong một số trường hợp:</p>
<h3 class="ml-3">2.1. Cải thiện hiệu năng
</h3>
<p>Nội dung hiển thị xuất hiện sớm hơn với render phía server do trang HTML được hiển thị đang được gửi đến client thay vì trang HTML trống chỉ được hiển thị sau khi tải JS/ React trên client. Vì nôi dung xuất hiện sớm hơn khi sử dung SSR so với CSR cho nên hiệu suất là tốt hơn. Hiệu suất thực tế không nhất thiết phải tốt hơn cho ứng dụng được hiển thị phía server vì ứng dụng không thể được cập nhật hoặc tương tác cho đến khi JS được tải trên trang. Nó xảy ra đồng thời với CSR. Trong SSR, hiệu suất của ứng dụng cao hay thấp tùy thuộc vào tài nguyên của server và nữa là tốc độ mạng của người dùng. Thời gian tải trang nhanh hơn chính là yếu tố đầu tiên để đánh giá trải nghiệm của người dùng tốt hay xấu. Với các trang web lớn hiện này thì đương nhiên họ đang sử dụng SSR.

</p>
 
<h3 class="ml-3">2.2. Optimal Search Engine Optimization (SEO)
</h3>
<p>Tiêu chuẩn vàng để các ứng dụng web ủa bạn hiển thị trong các kết quả của các công vụ tìm kiếm là sử dụng render phía server cho các ứng dụng cẩu bạn. Điều này sẽ đảm bảo rằng ứng dụng của bạn có thể được thu thập và lập chỉ mục một cách nhanh chóng và hiệu quả bởi các công cụ tìm kiếm. Mọi trang web đều luôn luôn muốn xuất hiện trong các kết quả tìm kiếm từ các máy chủ tìm kiếm lớn như Google, Bing. Tuy nhiên, trình công cụ tìm kiếm chưa hiểu được và cũng chưa có khả năng lấy nội dung từ JS. Điều này có nghĩa rằng họ chỉ thấy một trang trống, không có nội dung mặc dù trang web của bạn có hữu ích như thế nào. Hiện tại có nghe nói rằng Google thu thập dữ liệu từ các ứng dụng Web được xây dựng bởi JS. Tuy nhiên, không phải tất cả các công cụ tìm kiếm đều có thể thu thập dữ liệu các ứng dụng được client-side render như Google. Hơn nữa, vì việc render JS cần thêm tài nguyên tính toán, Google sẽ trì hoãn khi nó sẽ thu thập dữ liệu và lập chỉ mục các ứng dụng client-side render. Việc chuẩn bị sẵn sàng nội dung phía server để các công cụ tìm kiếm thu nhập dữ liệu web của bạn thì có vẻ vẫn là cách làm chắc chắn hơn.

</p>
<h3 class="ml-3">2.3. Social sharing
</h3>
 


 










<p>Một lợi ích khác của SSR chính là bạn có một đoạn snippet và hình ảnh nổi bật khi chia sẻ nội dung trang web của bạn thông qua mạng xã hội. Điều này chỉ có thể thực hiện nếu ứng dụng của bạn được render từ server.</p><div class="mt-5">
<h2 id="goto-h2-2" data-stt="1">3. Client-side Rendering với Server-side Rendering
</h2>
</div>

<p class="ads_displayed">Chúng ta xem xét trình tự các sự kiện khi tải ứng dụng CSR và SSR.
</p>

<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/ssr_csr.webp
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed">Hình trên đã lý giải tại sao nội dung hiển thị nhanh hơn cho người dùng khi sử dụng SSR. Cũng có thể thấy rằng ứng dụng có thể được tương tác vào cùng một thời điểm cho cả CSR và SSR.

</p>

<div style="margin: 30px 0px 20px;">
        <script async="" id="AV61c43a67f38d9610bd10d035" type="text/javascript" src="https://tg1.playstream.media/api/adserver/spt?AV_TAGID=61c43a67f38d9610bd10d035&amp;AV_PUBLISHERID=61419d5a93ce05220063f702"></script>
    </div><p class="ads_displayed">Dưới đây là một mô tả chi tiết hơn cho trình tự của SSR, bao gồm cả những gì đang thực sự xảy ra ở phía server.
</p>
<ul class="ml-5">
    <li>Trình duyệt gửi yêu cầu trang web (client)</li><li>Server tải React từ bộ nhớ (server)</li>
<li>Server render HTML dựa trên DOM ảo được tạo bởi ứng dụng React (server)</li>
<li>Server gửi HTML được tạo tới trình duyệt (server)</li>
<li>Nội dung hiển thị cho người dùng</li>
<li>Yêu cầu gói JS (client)</li>
<li>Ứng dụng React tải trong trình duyệt (client)</li>
<li>Người dùng có thể tương tác với ứng dụng</li>
<li>Yêu cầu dữ liệu API từ backend (client)</li>
<li>Render lại ứng dụng với dữ liệu mới (client)</li>
</ul>

<div>
<h2 id="goto-h2-3" data-stt="2">4. React SSR framework
</h2>
</div>

<p class="ads_displayed">Có một số framework phục vụ cho việc render React ở phía server như sau:
</p>



<h3 class="ml-3">4.1. Next.js
</h3><p><a href="https://nextjs.org/" target="_blank" class="text-gradient">Next.js</a> là một framework tuyệt vời, cùng với đó là nó cũng có một cộng đồng lớn. Sử dụng Next.js thì bạn không cần phải lo lắng về việc bunding, minimize hay reload. Có rất nhiều những tính năng vượt trội mà bạn có thể trải nghiệm với nó. Bạn có thể tạo các trang dưới dạng là các component trong các tập tin. Ngoài việc có một cộng đồng hỗ trợ thì có nhiều công ty lớn cũng sử dụng Next.js trong các trang web của họ như là npm, Netflix...</p>
<h3 class="ml-3">4.2. Razzle
</h3>
<p><a class="text-gradient" href="https://github.com/jaredpalmer/razzle" target="_blank">Razzle</a> là một công cụ giúp trừu tượng hóa tất cả các cấu hình phức tạp cần thiết cho SSR thành một phụ thuộc duy nhất. Nó mang đến cho bạn một sự trải nghiệm tuyệt vời của developer về <code>create-react-app</code>.</p>
<p>Để bắt đầu với Razzle thì nó tương đối dễ dàng và nó sử dụng React Router v4 theo mặc định, không như Next.js.</p>
<h3 class="ml-3">4.3. Một số lựa chọn thay thế
</h3>
<p>Nếu bạn có sự quen thuộc hơn với việc dùng đến Vue hoặc framework JS nào khác thì dưới đây sẽ có một vài lựa chọn thay thế khác.</p>
<h4 class="ml-5">4.3.1 Nuxt.js
</h4>
<p><a class="text-gradient" href="https://nuxtjs.org/" target="_blank">Nuxt.js</a> là framework server-side rendering cho các ứng dụng Vue và khá phổ biến trong cộng đồng Vue. Nếu bạn đang tìm kiếm một sự lựa chọn thay thế cho Next.js hay Razzle trong thế giới của Vue thì hãy cố gắng thử đến với Nuxt.js
<span class="progressive-img_capturer progressive-img_wrapper article-img-wrapper"><canvas class="progressive-img_tiny progressive-img_filter-blur article-img-tiny progressive-img_hidden" width="60" height="60" style="background: url(&quot;https://images.viblo.asia/60/7f2c64bd-baff-47dc-8842-625d81710474.png&quot;) 100% center / 100%;"></canvas><img class="progressive-img_full article-img" width="60" height="60" data-full-src="https://images.viblo.asia/7f2c64bd-baff-47dc-8842-625d81710474.png" alt="" data-tiny-src="https://images.viblo.asia/60/7f2c64bd-baff-47dc-8842-625d81710474.png" data-zoom-src="https://images.viblo.asia/full/7f2c64bd-baff-47dc-8842-625d81710474.png" data-srcset="https://images.viblo.asia/retina/7f2c64bd-baff-47dc-8842-625d81710474.png 2x" data-wrapper-class="article-img-wrapper" data-tiny-class="article-img-tiny" data-full-class="article-img" src="https://images.viblo.asia/7f2c64bd-baff-47dc-8842-625d81710474.png"></span></p>
<h4 class="ml-5">4.3.2 Gatsby
</h4>
<p><a class="text-gradient" href="https://www.gatsbyjs.org/" target="_blank">Gatsby</a> nó là một trình tạo trang web tĩnh dựa trên React có được cảm tình với nhiều người với (User Experience) và DX (Developer Experience) một cách đặc biệt. Nói một cách chính xác thì nó không làm SSR trong thời gian chạy. Thay vào đó, nó thực hiện render phía server với Node.js trong thời gian build. Nơi mà nó tạo ra HTML tĩnh, CSS và JS khi deploy trang web. Điều này làm cho thời gian tải nhanh và có tối ưu hóa hơn nữa như chia tách các đoạn code dựa trên route và tìm nạp trước.</p>

<div>
<h2 id="goto-h2-4" data-stt="3">5. Có phải luôn luôn cần đến SSR?
</h2>
</div>

<p>Tất nhiên là không rồi <img class="emoji" draggable="false" alt="😃" src="https://twemoji.maxcdn.com/2/72x72/1f603.png"> . Không phải mọi ứng dụng đều cần đến việc render ở phía server. Đặc biệt đối với các ứng dụng có dashboard và xác thực sẽ không cần đến SEO hoặc chia sẻ đến các phương tiện truyền thông. Thêm nữa, yêu cầu chuyên môn để xây dựng một ứng dụng SSR React là cao hơn đối với ứng dụng tạo bằng <code>create-react-app</code>.</p>

<p>Quan trọng nhất là các ứng dụng SSR React tốn nhiều chi phí hơn về mặt tài nguyên do bạn cần duy trì hoạt động của máy chủ Node.</p>

<div>
<h2 id="goto-h2-5" data-stt="4">6. Kết luận
</h2>
</div>

<p>Client-side rendering React rất tuyệt nhưng ứng dụng được render phía server có những lợi ích đáng chú ý hơn. Các lợi ích bao gồm:</p>

<ul class="text-gradient ml-5">
<li>Hiệu năng</li>
<li>SEO</li>
<li>Social sharing</li>
</ul>
<p>Bài này mình tổng hợp lý thuyết đọc được và chủ yếu nói về lợi ích của SSR. Mong rằng ở bài sau mình sẽ có thể thực hiện hướng dẫn các bạn làm ví dụ về việc sử dụng các thư viện kể trên để làm ứng dụng SSR đối với React. Cảm ơn mọi người đã đọc bài <img class="emoji" draggable="false" alt="🙇" src="https://twemoji.maxcdn.com/2/72x72/1f647.png">‍ .</p>






                
                



































                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Server-side Rendering trong React

Ở một số bài viết trước, mình có viết về React và đã dùng Create React App để thực hiện ví dụ một cách đơn giản và nhanh chóng nhất. Tuy nhiên sử dụng CRA cũng có một số điểm yếu như khi bạn xem source code trên duyệt web thì bạn sẽ chỉ thấy trang gần như trống trơn và chỉ có phần <head> nhưng hầu như không có gì trong <body>

Server-side Rendering trong React


<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/what-is-continuous-integration.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-12-09 09:36:28.000</span><h3>Continuous Integration là gì, tại sao bạn cần sử dụng nó?
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Mặc dù không phải tất cả mọi dự án đều có thể đạt được thành công lớn, nhưng vẫn có những phương pháp và thói quen có thể giúp tăng đáng kể cơ hội thành công của một dự án và làm cho việc phát triển trở thành một trải nghiệm thoải mái hơn. Một trong những thói quen đó chính là sử dụng Tích hợp liên tục (Continuous Integration - sau đây tôi sẽ gọi ngắn gọn là CI)


</strong></p>
<p><strong>Ở bài viết trước </strong>
<a href="https://www.anhben.com/blog-details/what-is-jenkins" class="text-gradient">Jenskins</a>
<strong>ta có đề cập đến vấn đề về CI. Vậy hôm nay ta hãy tìm hiểu kỹ về CI </strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. CI là gì?
</a></li><li class="list-goto-0"><a href="#goto-h2-1">2. Lợi ích của việc sử dụng CI
</a></li>
<li class="list-goto-0"><a href="#goto-h2-2">3. Các yêu cầu
</a>
</li>
<li class="list-goto-0"><a href="#goto-h2-4">4. Tìm hiểu kỹ hơn về các server CI
</a></li><li class="list-goto-0"><a href="#goto-h2-4">5. Trách nhiệm của bạn khi sử dụng CI
</a></li><li class="list-goto-0"><a href="#goto-h2-4">6. Continuous Integration vs Continuous Delivery
</a></li><li class="list-goto-0"><a href="#goto-h2-4">7. Những khó khăn tìm ẩn
</a></li>
</ul></div><h2 id="goto-h2-0" data-stt="0">1. Continuous Integration là gì?
</h2>


<p><strong>Continuous Integration</strong>là một thực hành của việc liên tục tích hợp những thay đổi tạo ra với project và test lại nó hàng ngày hoặc thường xuyên hơn.</p>
<p>Tự động hoá việc build, test và deploy của bạn có thể làm giảm bớt nhiều vấn đề đau đầu và thường gặp trong các dự án. Có một phương pháp đáng tin cậy trong việc tích hợp những thay đổi thường xuyên hơn giúp bạn đảm bảo rằng có thể tìm thấy lỗi sớm hơn sau này. Có vấn đề xuất hiện ngay trong ngày demo chỉ vì kết quả của một số phần bạn đã triển khai một vài tháng trước và không có cơ hội thích hợp để kiểm tra các phần khác trong hệ thống của bạn không phải là một điều dễ chịu.

</p>

<p>Tất cả chúng ta có thể đồng ý rằng việc để xảy ra vấn đề ngay trong ngày thực hiện việc demo là một trải nghiệm không hề dễ chịu. CI có thể giúp bạn giảm thiểu nó. Rất nhiều.
</p><p>Chúng ta hãy xem một vòng đời CI cơ bản sẽ trông như thế nào:</p><p class="ads_displayed pt-3"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/vongdoi-ci.png
    " style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>



<div>
<h2 id="goto-h2-1" data-stt="1">2. Lợi ích của việc sử dụng CI
</h2>
</div>


<p>Sử dụng CI đem lại rất nhiều lợi ích, có thể kể đến như sau:

</p>
 

 <ul>
    <li><strong class="text-blue">Giảm rủi ro tích hợp:</strong> Làm việc trên các dự án có nghĩa là nhiều người đang làm việc trên các task riêng biệt hoặc các phần của mã nguồn. Càng nhiều người, sự tích hợp càng nguy hiểm. Tùy thuộc vào vấn đề thực sự tồi tệ như thế nào, việc sửa lỗi và giải quyết vấn đề có thể thực sự gây ra phiền phức và có thể có nghĩa là có nhiều thay đổi đối với mã nguồn. Thực hiện tích hợp hàng ngày hoặc thậm chí thường xuyên hơn có thể giúp giảm thiểu các loại vấn đề này ở mức tối thiểu.</li><li><strong class="text-blue">Chất lượng code cao hơn:</strong> Không cần phải lo lắng về các vấn đề xảy ra và tập trung nhiều hơn vào các tính năng của hệ thống giúp ta viết ra sản phẩm có chất lượng cao hơn.</li>
    <li><strong class="text-blue">Code trên version control luôn hoạt động:</strong> Nếu bạn commit phần nào đó làm hỏng việc build, bạn và đội của bạn sẽ nhận ra điều này ngay lập tức, và vấnd dề sẽ được giải quyết trước khi ai đó kéo code lỗi về</li><li><strong class="text-blue">Giảm tranh luận gay gắt giữa các thành viên trong đội:</strong> Có một hệ thống khách quan tại chỗ giúp giảm tần suất cãi nhau giữa các thành viên</li><li><strong class="text-blue">Giúp thành viên kiểm thử đỡ đau đầu hơn:</strong> Có nhiều version và build của mã nguồn giúp chia cắt và tìm kiếm bug một cách hiệu quả, giúp công việc của đội kiểm thử dễ dàng hơn.</li><li><strong class="text-blue">Giảm thời gian deploy:</strong> Deploy dự án là một công việc rất nhàm chán và tốn thời gian, và việc tự động hoá quá trình này là rất cần thiết</li><li><strong class="text-blue">Tăng sự tự tin và tinh thần:</strong> Mọi người không làm việc hiệu quả nếu luôn thường trực nỗi sợ làm hỏng cái gì đó, và họ có xu hướng tạo ra kết quả tốt hơn và có thể tập trung năng lượng làm việc hơn nếu không phải lo lắng về những hậu quả có thể xảy ra từ hành động của họ.</li>
</ul>


 

















<div>
<h2 id="goto-h2-2" data-stt="1">3. Yêu cầu
</h2>
</div>






<p>Bạn có thể đang tự hỏi yêu cầu để cài đặt hệ thống CI mà bạn cần là gì. Nếu bạn muốn cài đặt CI server trên môi trường của chính bạn, trước tiên bạn sẽ cần một số thứ.</p><p>Yêu cầu đầu tiên là bạn cần có Version Control System (VCS). Điều này là bắt buộc. VCS cung cấp một phương pháp đáng tin cậy để tập trung hoá và bảo tồn những thay đổi mà bạn tạo ra trong dự án theo thời gian.</p><p>Nếu bạn sử dụng giải pháp tại chỗ, một yêu cầu khác là bạn phải có một server bổ sung hoặc workstation hoặc ít nhất là một máy ảo. Có một chiếc máy không bị lỗi để cài đặt hệ thống là một trong những điều quan trọng thiết yếu.</p><p>Nếu bạn không muốn bị rắc rối với server hay máy ảo, có nhiều giải pháp hosted CI tool giúp đảm bảo sự bảo trì của toàn bộ quy trình và cho phép mở rộng dễ dàng.
Điểm yếu của các hệ thống hosted đó là thường thiếu các tuỳ chọn thiết lập trong khi các tool self-hosted có đầy đủ.</p><p>Nếu bạn muốn sử dụng tuỳ chọn self-hosted, bạn sẽ cần cài đặt một trong nhiều CI tool có sẵn.</p><p>Về mặt kỹ thuật, CI tool không bắt buộc được dùng, cũng giống như IDE không nhất thiết phải có cho việc phát triển phải mềm, nhưng việc implement sẽ khó hơn đáng kể nếu không có một tool như thế.</p><p>Những CI tool được biết đến rộng rãi nhất gồm có Jenkins, TeamCity, Bamboo, Go... Bạn có thể tìm hiểu thêm về <a href="https://code-maze.com/top-8-continuous-integration-tools/" target="_blank" class="text-gradient">top các CI tool có sẵn</a></p>






































                
                




















































                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Continuous Integration là gì, tại sao bạn cần sử dụng nó?

Mặc dù không phải tất cả mọi dự án đều có thể đạt được thành công lớn, nhưng vẫn có những phương pháp và thói quen có thể giúp tăng đáng kể cơ hội thành công của một dự án và làm cho việc phát triển trở thành một trải nghiệm thoải mái hơn. Một trong những thói quen đó chính là sử dụng Tích hợp liên tục (Continuous Integration - sau đây tôi sẽ gọi ngắn gọn là CI)



<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/jenkins.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-10-19 15:17:28.000</span><h3>Jenkins là gì? Build và deploy code nhanh chóng với Jenkins
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Jenkins là một opensource dùng để thực hiện chức năng tích hợp liên tục (gọi là CI – Continuous Integration) và xây dựng các tác vụ tự động hóa.
</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Jenkins là gì?
</a></li><li class="list-goto-0"><a href="#goto-h2-1">2. Quá trình hình thành
</a></li>
<li class="list-goto-0"><a href="#goto-h2-2">3. CI là gì? CD là gì?</a>
<ul class="ml-5"><li><a href="#goto-h3-0">3.1. CI là viết tắt của Continuous Integration
</a></li><li><a href="#goto-h3-1">3.2. Chu trình làm việc
</a></li><li><a href="#goto-h3-2">3.3. CD là viết tắt của Continuous Delivery
</a></li>
</ul></li>
<li class="list-goto-0"><a href="#goto-h2-4">4. Build, deploy với Jenkins và Docker
</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Jenkins là gì?
</h2>


<p><strong>Jenkins</strong> là một opensource dùng để thực hiện chức năng tích hợp liên tục (gọi là <strong>CI – Continuous Integration</strong>) và xây dựng các tác vụ tự động hóa.</p>
<p>Nó tích hợp các source code của các members trong team lại nhanh chóng một cách liên tục, theo dõi sự thực thi và trạng thái thông qua các bước kiểm thử (<strong>Integration test</strong>,&nbsp;<strong>units test</strong>). Tất nhiên là nhằm giúp sản phẩm chạy ổn định.</p>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/jenkins-1.png
    " style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>


<div>
<h2 id="goto-h2-1" data-stt="1">2. Quá trình hình thành</h2>
</div>


<p>Năm 2004, Kohsuke Kawaguchi – một lập trình viên Java tại Sun vào một ngày cảm thấy mệt mỏi vì các mã nguồn của mình thường xuyên bị fail.</p>
 

 <p>Ông ta muốn tìm cách biết là trước khi đưa code vào deploy, liệu code có hoạt động hay không.</p>


 














<p>Vì vậy, Kawaguchi đã xây dựng một hệ thống server tự động hóa cho chính server và cho Java có thể kiểm tra tình trạng code trước khi deploy, được gọi là <strong>Hudson</strong>. <strong>Hudson</strong> trở nên phổ biến tại Sun và thịnh hành sang các công ty khác dưới dạng opensource.</p>
<p>Đến năm 2011, với việc Oracle mua lại Sun gây nên sự tranh chấp với cộng đồng nguồn mở, Jenkins được forked từ Hudson sau đó. Cả Hudson và Jenkins đều tiếp tục tồn tại, mặc dù Jenkins có phần phổ biến hơn.</p>
<p>Năm 2014 Kawaguchi trở thành CTO của CloudBees, một công ty cung cấp các sản phẩm dựa trên nền tảng Jenkins.</p>
<div style="">
<h2 id="goto-h2-2" data-stt="1">3. CI là gì? CD là gì?
</h2>
</div>
<p class="ads_displayed pt-3"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/CICD.png
    " style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>



<h4 class="mt-4 mb-3" id="goto-h3-0">3.1. CI là viết tắt của Continuous Integration
</h4>

<p>Là&nbsp;tích hợp liên tục, nhằm liên tục tích hợp các source code của các thành viên trong team lại một cách nhanh chóng.</p>
<h4 class="mt-4 mb-3" id="goto-h3-1">3.2. Chu trình làm việc
</h4>
<ol class="pl-5">
<li>Bước đầu tiên, các thành viên trong team dev sẽ bắt đầu pull code mới nhất từ repo về branch để thực hiện các yêu cầu chức năng nhất định.</li>
<li>Tiếp đó là quá trình lập trình và test code để đảm bảo chất lượng của chức năng cũng như toàn bộ source code.</li>
<li>Thành viên code xong thì sẵn sàng cho việc commit vào branch develop của team.</li>
<li>Thành viên cập nhật code mới từ repo về local repo</li>
<li>Merge code và giải quyết conflict.</li>
<li>Build và đảm bảo code pass qua các tests dưới local.</li>
<li>Commit code lên repo</li>
<li>Máy chủ CI lắng nghe các thay đổi code từ repository và có thể tự động build/test, sau đó đưa ra các thông báo (pass/failure) cho các thành viên.</li>
</ol>

<h4 class="mt-4 mb-3" id="goto-h3-2">3.3. CD là viết tắt của Continuous Delivery
</h4>
<p><strong>Continuous Delivery</strong> là chuyển giao liên tục, là 1 tập hợp các kỹ thuật để triển khai tích hợp souce code trên môi trường <strong>staging</strong>&nbsp;( một môi trường rất giống với môi trường&nbsp;<strong>production</strong>).</p><div>
<h2 id="goto-h2-4" data-stt="1">4. Build, deploy với Jenkins và Docker
</h2>
</div>
<p>Các bạn có thể tham khảo thêm về Image này:</p>
<pre class="lang:default decode:true prettyprinted"><span class="pln">https</span><span class="pun">:</span><span class="com">//hub.docker.com/r/topdevvietnamit/jenkins_ci</span></pre>































                
                




















































                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Jenkins là gì? Build và deploy code nhanh chóng với Jenkins

Jenkins là một opensource dùng để thực hiện chức năng tích hợp liên tục (gọi là CI – Continuous Integration) và xây dựng các tác vụ tự động hóa.



<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/icon-for-api-4.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-21 15:16:08.000</span><h3>What's JCoreAPI?
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>This is the document describing the items in the JConnect system conversion and upgrade
JITS would like to announce the upgrade of Coregateway system of JConnect product (The connection between LOS system and Core banking system). This upgrade is to ensure system performance. Help upgrade product functions, limit security risks / system errors
</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. What's JCoreAPI?
</a></li>
<li class="list-goto-1"><a href="#goto-h2-1">2. System Features</a>
<ul class="ml-5"><li><a href="#goto-h3-0">2.1. Technology of Core API
</a></li><li><a href="#goto-h3-1">2.2. Composite Framework Scores

</a></li><li><a href="#goto-h3-2">2.3. Long time support (LTS)

</a></li><li><a href="#goto-h3-3">2.4. Beneficiary of JCoreAPI

</a></li>
<li><a href="#goto-h3-4">2.5. System model

</a></li>
<li><a href="#goto-h3-5">2.6. Database Support
</a></li>
<li><a href="#goto-h3-6">2.7. Support Protocol
</a></li>
<li><a href="#goto-h3-7">2.8. Support Web Token
</a></li>
<li><a href="#goto-h3-8">2.9. Roadmap of JCoreAPI
</a></li>
<li><a href="#goto-h3-9">2.10. Current Module Support
</a></li>
</ul></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. What's JCoreAPI?</h2>


<p class="ads_displayed">
    This is a product belonging to 
    <a href="https://jits.com.vn/" class="text-gradient">JITS</a> (One of the leading core banking providers in Vietnam).
JCoreAPI is considered as Core gateway product integrated with Middleware system.
The product is improved and perfected in all aspects (In terms of processing speed, as well as the ability to synchronize products is very high)
</p>


<div>
<h2 id="goto-h2-1" data-stt="1">2. System Features</h2>
</div>

<h4 class="mt-4 mb-3" id="goto-h3-0">2.1. Technology of Core API</h4>
<p><a href="https://www.anhben.com/blog-details/dot-net-core-introduce" target="_blank" class="text-gradient">.NET Core </a> is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With .NET Core, you can:
</p>
 

 <ul class="ml-5 mt-3">
<li>Build web apps and services, Internet of Things (IoT) apps, and mobile backends.</li>
<li>Use your favorite development tools on Windows, macOS, and Linux.</li>
<li>Deploy to the cloud or on-premises.</li><li>Run on .NET Core.</li>
</ul>

<h4 class="mt-4 mb-3" id="goto-h3-1">2.2.	Composite Framework Scores</h4>
 














<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/Composite-Framework-Scores.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/top8-framework-2020.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/top-8-2021.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div style="margin: 30px 0px 20px;">
        <script async="" id="AV61c43a67f38d9610bd10d035" type="text/javascript" src="https://tg1.playstream.media/api/adserver/spt?AV_TAGID=61c43a67f38d9610bd10d035&amp;AV_PUBLISHERID=61419d5a93ce05220063f702"></script>
    </div><h4 class="mt-4 mb-3" id="goto-h3-2">2.3.	Long time support (LTS)</h4>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/long-time-support.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<h4 class="mt-4 mb-3" id="goto-h3-3">2.4. Beneficiary of JCoreAPI</h4>

<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/Beneficiary-JCoreAPI.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<h4 class="mt-4 mb-3" id="goto-h3-4">2.5. System model</h4><p class="ads_displayed"><img alt="system-jcoreapi-model" src="https://api.jits.com.vn:4001/data/news/image/system-jcoreapi-model.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed"><img alt="system-jcoreapi-model" src="https://api.jits.com.vn:4001/data/news/image/system-jcoreapi-model-full.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><h4 class="mt-4 mb-3" id="goto-h3-5">2.6. Database Support</h4><p class="ads_displayed"><img alt="database-support" src="https://api.jits.com.vn:4001/data/news/image/database-support.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<h4 class="mt-4 mb-3" id="goto-h3-6">2.7. Support Protocol</h4><p class="ads_displayed"><img alt="support-protocol" src="https://api.jits.com.vn:4001/data/news/image/support-protocol.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><h4 class="mt-4 mb-3" id="goto-h3-7">2.8. Support Web Token</h4><p class="ads_displayed"><img alt="support-protocol" src="https://api.jits.com.vn:4001/data/news/image/support-web-token.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<h4 class="mt-4 mb-3" id="goto-h3-8">2.9. Roadmap of JCoreAPI</h4>
<p class="ads_displayed"><img alt="2.9. Roadmap of JCoreAPI" src="https://api.jits.com.vn:4001/data/news/image/roadmap-jcoreapi.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<h4 class="mt-4 mb-3" id="goto-h3-9">2.10. Current Module Support</h4>
<p class="ads_displayed"><img alt="current-system-model" src="https://api.jits.com.vn:4001/data/news/image/current-system-model.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>























                
                




















































                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

What's JCoreAPI?

.NET CORE là gì? Tổng quan, phân biệt .NET core, .NET FW, MONO

This is a product belonging to JITS (One of the leading core banking providers in Vietnam)
CoreAPI is considered as Core gateway product integrated with Middleware system.
The product is improved and perfected in all aspects (In terms of processing speed, as well as the ability to synchronize products is very high)

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/NET-Core-vs-.NET-Framework.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-21 14:22:08.000</span><h3>.NET CORE là gì? Tổng quan, phân biệt .NET core, .NET FW, MONO
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Ở bài viết này, chúng ta sẽ tìm hiểu .NET Core là gì, những điểm mạnh của nó. Và các nền tảng .NET Framework, .NET core có gì khác nhau. Cùng mình tìm hiểu qua bài viết này nhé.
</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. .NET Core là gì?
</a></li>
<li class="list-goto-1"><a href="#goto-h2-1">2. Ngôn ngữ hỗ trợ</a></li><li class="list-goto-2"><a href="#goto-h2-2">3. .NET Core ra đời trong hoàn cảnh nào?
</a></li><li class="list-goto-3"><a href="#goto-h2-3">4. Thành phần của .Net Core
</a></li><li class="list-goto-4"><a href="#goto-h2-4">5. Phân biệt .NET Framework, .NET Core, và Mono
</a></li><li class="list-goto-5"><a href="#goto-h2-5">6. Những cái mới trong .Net Core
</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. .NET Core là gì?</h2>


<p class="ads_displayed">
    <a href="https://en.wikipedia.org/wiki/.NET" class="text-gradient">.NET Core </a>
    là một framework được Microsoft phát triển. Đây là một nền tảng phát triển đa mục đích. .Net Core là nền tảng chéo (hỗ trợ Windows, macOS và Linux) và có thể được sử dụng để xây dựng các ứng dụng thiết bị, đám mây và <a href="https://en.wikipedia.org/wiki/Internet_of_things" class="text-gradient">IoT</a>. 
</p>


<div>
<h2 id="goto-h2-1" data-stt="1">2. Ngôn ngữ hỗ trợ</h2>
</div>

<p>.NET Core hỗ trợ các ngôn ngữ như: C # và F # (và C ++ / CLI kể từ 3.1; chỉ được bật trên Windows) và nó còn hỗ trợ một phần của Visual Basic .NET.
</p>
 <p class="ads_displayed"><img alt="NET Core Releases and Support
" src="https://devblogs.microsoft.com/dotnet/wp-content/uploads/sites/10/2020/09/NET-Core-Release-Roadmap-1024x299.png" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<h5 class="ml-3">Cụ thể</h5>
 <ul class="ml-5 mt-3">
<li>C#: Là loại ngôn ngữ lập trình phát triển theo hướng đối tượng và mục đích.</li>
<li>F# : Là loại ngôn ngữ lập trình cho chức năng đa nền tảng, mã nguồn mở. Nó cũng thường bao gồm lập trình cho hướng đối tượng và mệnh lệnh.</li>
<li>Visual Basic: Là ngôn ngữ lập trình có cú pháp đơn giản giúp xây dựng cho các ứng dụng hướng tới đối tượng an toàn.</li>
</ul>

<h5 class="ml-3 mt-3">Những công cụ (gọi tắt là IDE)  để lập trình với .NET core:
</h5>
 







<ul class="ml-5 mt-3">
<li><a href="https://visualstudio.microsoft.com/fr/" class="text-gradient">Visual Studio</a></li>
<li><a href="https://code.visualstudio.com/download" class="text-gradient">Visual Studio Code</a></li>
<li><a href="https://www.sublimetext.com/" class="text-gradient">Sublime Text</a></li>
<li><a href="https://www.vim.org/" class="text-gradient">Vim</a></li>
</ul>




<p class="ads_displayed">Các phiên bản .Net Core được ra đời từ năm 2016 đã phát triển rất đều đặn và nhận được những sự tiếp đón từ phía cộng đồng lập trình viên. Trong đó bản được đánh giá là ổn định và được ưa chuộng nhất chính là 3.1.2.
</p>

<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms.jpg
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/xamarin-2.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221); width: 802px; height: 366px;"></p>

<div style="margin: 30px 0px 20px;">
        <script async="" id="AV61c43a67f38d9610bd10d035" type="text/javascript" src="https://tg1.playstream.media/api/adserver/spt?AV_TAGID=61c43a67f38d9610bd10d035&amp;AV_PUBLISHERID=61419d5a93ce05220063f702"></script>
    </div><p class="ads_displayed">Nếu bạn không hiểu ngay thì cũng đừng lo lắng, chúng ta sẽ tìm hiểu dần từng phần nhé.</p>

<div>
<h2 id="goto-h2-2" data-stt="2">3. .NET Core ra đời trong hoàn cảnh nào?</h2>
</div>

<p class="ads_displayed">ASP.NET đã xuất hiện cách đây 15 năm trước. Nó là một phần của <a href="https://en.wikipedia.org/wiki/.NET_Framework" class="text-gradient">.NET Framework</a>. Nó đã có hàng triệu lập trình viên đã sử dụng để xây dựng những ứng dụng web. Và <a href="https://en.wikipedia.org/wiki/Microsoft" class="text-gradient">Microsoft</a> đã phát triển thêm nhiều tính năng mới qua từng năm.
</p>

<p class="ads_displayed"><img alt="cross platform jpg" src="https://api.jits.com.vn:4001/data/news/image/DotNet-Architecture.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>



<p class="ads_displayed">ASP.NET Core có một số thay đổi lớn. Từ việc học hỏi các framework module hóa khác. ASP.NET Core không còn dựa trên System.Web.dll nữa. Mà được dựa trên một tập hợp các gói, các module hay cũng được gọi là các Nuget packages.
</p>

<p class="ads_displayed">Với ASP.NET Core bạn có thể:

</p>

<ul class="ml-5 mt-3">
<li>HTTP request được tối ưu nhẹ hơn.</li>
<li>Hợp nhất xây dựng web UI và web APIs.</li>
<li>Tích hợp những client-side frameworks hiện đại và có những luồng phát triển.</li>
<li>Hệ thống cấu hình dựa trên môi trường đám mây thật sự.</li>
<li>Dependency injection được xây dựng sẵn.</li>
<li>Có thể host trên IIS hoặc self-host trong process của riêng bạn.</li>
<li>Được xây dựng trên .NET Core, hỗ trợ thực sự app versioning.</li>
<li>Những công cụ mới để đơn giản hóa quá trình phát triển web tối ưu.</li>
<li>Xây dựng và chạy đa nền tảng(Windows, Mac và Linux).</li>
<li>Mã nguồn mở và tập trung vào cộng đồng.</li>
</ul>










                
                

<div class="mt-5">
<h2 id="goto-h2-3" data-stt="6">4. Thành phần của .Net Core</h2>
</div>

<p>.NET Core bao gồm các nền tảng: .NET Compiler Roslyn, .NET Core framework CoreFX, .NET Core runtime CoreCLR, và ASP.NET Core.
</p>
<h5>Cấu trúc của.Net Core chi tiết</h5>
<ul class="ml-5 mt-3">
<li><em>CoreFX: </em>Nó được xem là nền tảng thư viện dành cho .NET Core.</li>
<li><em>CoreCLR:&nbsp;</em>Đây là công cụ thực thi .Net trong .Net Core. Nó hỗ trợ thực hiện một số chức năng như thu gom và biên dịch rác thành mã máy.</li>
<li><em>.Net Core runtime:&nbsp;</em>Sẽ cung cấp một kiểu hệ thống, tải lắp ráp, trình thu gom rác và các dịch vụ cơ bản khác.</li>
<li><em>Net Core runtime:</em> Cung cấp framework để việc xây dựng các ứng dụng hiện đại tối ưu, dựa trên đám mây, ứng dụng web, kết nối internet,…</li>
<li><em>.Net Core SDK và trình biên dịch ngôn ngữ (Roslyn và F#):&nbsp;</em>giúp cho phép phát triển .Net Core</li>
<li><em>Lệnh dotnet: </em>Lệnh dùng cho việc khởi chạy ứng dụng .NET Core và các lệnh CLI.</li>
</ul><p class="mt-3"><img alt="cross platform jpg" src="https://api.jits.com.vn:4001/data/news/image/cau-truc-.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>



<div>
<h2 id="goto-h2-4" data-stt="7">5. Phân biệt .NET Framework, .NET Core, và Mono</h2>
</div>



<p>Với người mới làm quen với .NET hay kể cả một số người đã làm việc với .NET lâu năm. Những thuật ngữ, khái niệm như .NET Framework, Mono hay .NET core vẫn hay gây ra nhầm lẫn. Về cơ bản thì .NET Framework, .NET core và Mono là ba phiên bản .NET khác nhau (có nghĩa là mỗi phiên bản có Runtime, Libraries và Toolings riêng).</p>
<ol class="ml-5 mt-3">
<li><strong class="text-blue">.NET Framework:</strong> Được Microsoft đưa ra chính thức từ năm 2002. .NET Framework chỉ hoạt động trên hệ điều hành Windows. Những nền tảng như: WPF, Winforms, ASP.NET(1-4) hoạt động dựa trên .NET Framework.</li>
<li><strong class="text-blue">Mono</strong> là phiên bản cộng đồng giúp mang .NET đến những nền tảng ngoài Windows. Mono được phát triển để xây dựng những ứng dụng với giao diện người dùng và được sử dụng rất rộng rãi như: Unity Game, Xamarin…</li>
<li><strong class="text-blue">.NET core</strong>: Đến năm 2013, Microsoft định hướng đa nền tảng và phát triển .NET core. .NET core hiện được sử dụng trong các ứng dụng Universal Windows platform và ASP.NET Core.</li>
</ol>
<h5 class="mt-5">Bạn nên chọn .Net Framework hay là .Net Core?
</h5>
<h6 class="text-blue mt-3">Bạn nên lựa chọn .NET Framework nếu:</h6>
<ul class="ml-5 mt-3">
<li>Bạn muốn chọn một môi trường làm việc ổn định.</li>
<li>Bạn là người không có quá nhiều thời gian để tìm hiểu về nền công nghệ mới.</li>
<li>Bạn đang sở hữu một đội ngũ có chuyên môn.</li>
<li>Bạn đã từng làm việc trên một ứng dụng và hiện có khả năng mở rộng chức năng.</li>
<li>Bạn không muốn&nbsp;phải liên tục nâng cấp cũng như thay đổi liên tục.</li>
<li>Bạn cần xưng dựng lên những ứng dụng khách trên hệ điều hành Windows bằng Windows Forms hay <strong><a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/?view=netframeworkdesktop-4.8" target="_blank" rel="noopener noreferrer" class="text-gradient">WPF</a></strong>.</li>
</ul>

<h6 class="text-blue mt-3">Bạn nên lựa chọn .NET Core nếu như:
</h6>
<ul class="ml-5 mt-3">
<li>Bạn đang muốn xây dựng ứng dụng của mình chạy đa nền tảng: Windows, Linux và Mac.</li>
<li>Bạn có sẵn các tinh thần học hỏi, không sợ sai bởi vì .NET Core vẫn chưa có thể hoàn thiện.</li>
<li><em>Phát triển ứng dụng theo kiểu Microservices:</em>Xây dựng các ứng dụng phức tạp dựa theo module với khả năng tách rời và với mỗi module có thể sử dụng các công nghệ khác nhau. Hiện nay .Net Core chính là một trong những lựa chọn chính xác nhất.</li>
<li>Nếu hệ thống của bạn cần hiệu năng và khả năng mở rộng tốt nhất cho dù có nhiều người dùng thì .NET Core và ASP.NET Core sẽ vẫn là trợ thủ sáng giá nhất bạn nên lựa chọn.</li>
</ul>
<p class="mt-3"><img alt="cross platform jpg" src="https://api.jits.com.vn:4001/data/news/image/net-core-va-.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><div>
<h2 id="goto-h2-5" data-stt="8">6. Những cái mới trong .Net Core</h2>
</div>
<h5 class="mt-3">Chạy đa nền tảng
</h5>
<p>Trong khi .Net truyền thống chỉ chạy được trên nền hệ điều hành Windows.</p><p>Hiện nay, thế giới đang dần chuyển sang mã nguồn mở. Microsoft tạo .Net Core là một open source. Source Code của nó được lưu trữ trên GIT.</p>
<p>Chỉ có Mono có thể chạy trên Linux. Nhưng đây không phải một sản phẩm của MS. Với .Net Core bạn có thể phát triển các ứng dụng trên Linux, Mac, Windows.</p>
<h5 class="mt-3">Tối ưu việc thực thi
</h5>
<p>Đã có nhiều sự thay đổi trong thư viện. Như thư viện “System” bao gồm cả System.IO, System.Net, System.Configuration. Nhờ vậy làm cho thư viện gọn hơn và tối ưu hơn. .NET Core hỗ trợ nuGet packages để người phát triển có thể phát triển các gói .Net Core.</p>
<p>.Net Core là một trong những loại framework dễ học và có tính hiện đại, tính linh hoạt cao. Nhờ đó cơ hội việc làm cho những lập trình viên.Net Core rất nhiều.</p>
<p>Bài viết là những chia sẻ của mình về .net core là gì? những điều cần biết về .net. Cảm ơn các bạn đã theo dõi bài viết.</p>























                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Ở bài viết này, chúng ta sẽ tìm hiểu .NET Core là gì, những điểm mạnh của nó. Và các nền tảng .NET Framework, .NET core có gì khác nhau. Cùng mình tìm hiểu qua bài viết này nhé.

Cài đặt Xamarin

Chúng ta có thể phát triển ứng dụng trên môi trường Windows khi cài đặt Xamarin Studio hoặc Visual Studio để làm trình soạn thảo phát triển ứng dụng. Nếu ứng dụng hướng đến các thiết bị iOS thì bạn cần phải có một máy Mac, có cài đặt Xcode và kèm theo Xamarin Studio cho nền tảng iOS. Cụ thể như sau:

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/blog-xamarin-forms.png
" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-19 16:55:08.000</span><h3>Tổng quan về Xamarin Forms
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                












<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p>
<div class="goto-wrapper text-post pb-5"><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Giới thiệu về Xamarin Forms</a></li><li class="list-goto-1"><a href="#goto-h2-1">2. Các thành phần cơ bản trong&nbsp;Xamarin Forms</a><ul class="ml-5"><li><a href="#goto-h3-0">Pages</a></li><li><a href="#goto-h3-1">Views</a></li><li><a href="#goto-h3-2">Layouts</a></li><li><a href="#goto-h3-3">Cells</a></li></ul></li><li class="list-goto-2"><a href="#goto-h2-2">3. Kết luận</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Giới thiệu về Xamarin Forms</h2>

<p class="ads_displayed">Xamarin Forms cho phép các nhà phát triển phần mềm xây dựng các ứng dụng di động đa nền tảng sử dụng các thành phần giao diện cơ bản của hệ điều hành như: Pages, Layouts, Views, Controls. Khi chạy chương trình, mỗi thành phần giao diện của Xamarin Forms sẽ được chuyển hóa sang các thành phần giao diện tương ứng với mỗi nền tảng. Chúng ta cùng tìm hiểu các thành phần cơ bản của Xamarin Forms nhé.</p>

<h2 id="goto-h2-1" data-stt="1">2. Các thành phần cơ bản trong&nbsp;Xamarin Forms</h2>

<h3 id="goto-h3-0" class="mt-3 ml-2">2.1 Pages</h3>

<p class="ads_displayed">Các pages trong Xamarin Forms đại diện cho các màn hình của ứng dụng, Một page chứa các layouts và views giúp&nbsp;hiển thị dữ liệu và nhận tương tác từ người dùng.</p>

<p class="ads_displayed"><img alt="xamarin page structure png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-page-structure.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed">Một Page trong Xamarin Forms đại diện cho một View Controller&nbsp;trong iOS hay một Page trong Windows Phone/UWP hoặc một Activity trong Android. Xamarin có các kiểu Page như sau:</p>

<div style="margin: 30px 0px 20px;">
        <script async="" id="AV61c43a67f38d9610bd10d035" type="text/javascript" src="https://tg1.playstream.media/api/adserver/spt?AV_TAGID=61c43a67f38d9610bd10d035&amp;AV_PUBLISHERID=61419d5a93ce05220063f702"></script>
    </div><p class="ads_displayed"><img alt="xamarin forms pages png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms-pages.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div class="table-responsive pt-5" style="overflow-x: auto;"><table align="center" border="1" cellpadding="1" cellspacing="1" class="table"><thead><tr><th scope="col" width="100">Kiểu Pages</th><th scope="col">Mô tả chi tiết</th></tr></thead><tbody><tr><td>Content Page</td><td>Chứa một view đơn giản</td></tr><tr><td>MasterDetail Page</td><td>Một page mà chứa 2 thành phần. Thông thường, thành phần Master sẽ là menu và thành phần Detail là nội dung</td></tr><tr><td>Navigation Page</td><td>Một page mà chứa thanh điều hướng (Navigation bar). Page được giữ trong bộ nhớ ngăn xếp (stack) và có thể chuyển từ page này sang page khác. Thanh điều hướng có thể có nút điều hướng và tiêu đề của page.</td></tr><tr><td>Tabbed Page</td><td>Một trang mà chưa nhiều Content Page và được điều hướng bằng các nhấn vào các Tab.</td></tr><tr><td>Carousel Page</td><td>Một trang mà chưa nhiều Content Page và được điều hướng bằng cử chỉ vuốt sang ngang.</td></tr></tbody></table></div>

<h3 id="goto-h3-1" class="pt-5 ml-2">2.2. Views</h3>

<p class="ads_displayed">Xamarin View là một thành phần&nbsp;được hiển thị trên giao diện dười dùng như là các nhãn&nbsp;(Labels), nút bấm (Buttons), ô nhập ký tự (Entry). Các thành phần Views cơ bản như hình sau:</p>

<p class="ads_displayed"><img alt="xamarin forms views png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms-views.png
" style="width: 847px; height: 191px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed">Xamarin Form Views có thể căn chỉnh chiều ngang và chiều dọc bằng cách sử dụng thuộc tính VerticalOptions và HrizontalOptions.</p>

<p class="ads_displayed"><img alt="xamarin forms views alignment png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms-views-alignment.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<h3 id="goto-h3-2" class="ml-2">2.3. Layouts</h3>

<p class="ads_displayed">Layouts là thành phần chứa các Views trong Xamarin, các View được đặt trong Layout một cách có cấu trúc.</p>

<p class="ads_displayed"><img alt="xamarin layouts png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-layouts.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div class="table-responsive" style="overflow-x: auto;"><table align="center" border="1" cellpadding="1" cellspacing="1" class="table mt-5"><thead><tr><th scope="col" width="100">Kiểu Layouts</th><th scope="col">Mô tả chi tiết</th></tr></thead><tbody><tr><td>StackLayout</td><td>Nó tổ chức các Views theo cấu trúc ngăn xếp (stack), có thể theo chiều dọc hoặc ngang. Các Views trong StackLayout có thể thay đổi kích thước khoảng cách trong layout&nbsp; bằng cách sử dụng layout options</td></tr><tr><td>AbsoluteLayout</td><td>Kích thước và vị trí của các thành phần con trong AbsoluteLayout tỉ lệ với kích thước và vị trí của nó hoặc được đặt các giá trị cố định. Các View con có thể được đặt kích thước và vị trí sử dụng tỉ lệ hoặc các giá trị tĩnh, tỉ lệ và các giá trị tĩnh này có thể cùng được kết hợp.</td></tr><tr><td>RelativeLayout</td><td>Nó được sử dụng để đặt vị trí và kích thước các views có liên quan đến các thuộc tính của layout hoặc các view bên cạnh.&nbsp;</td></tr><tr><td>Grid</td><td>Gid hỗ trợ sắp xếp các View theo hàng và cột. Hàng và cột có thể được đặt kích thước theo tỉ lệ hoặc giá trị cố định. Grid không nên dùng để thay thế một bảng (table).</td></tr><tr><td>ScrollView</td><td>Chứa các Layouts và cho phép cuộn khi nội dung vượt quá kích thước màn hình, Nó cho phép các Views tự động di chuyển lên dùng nhìn thấy của màn hình khi bàn phím được hiển thị.</td></tr></tbody></table></div>

<h3 id="goto-h3-3" class="pt-5 ml-2">2.4. Cells</h3>

<p class="ads_displayed">Xamarin Forms Cells là các thành phần được sử dụng để tùy biến các mục của một danh sách hiển thị. Chúng mô tả chính xác mỗi mục của một danh sách được hiển thị như thế nào. Cells được sử dụng trong ListViews và TableViews.</p>
                <ins class="adsbygoogle" data-ad-client="ca-pub-6999781767311460" data-ad-slot="4552040561" data-ad-format="auto" data-full-width-responsive="true" style="display: block;"></ins>
                

<p><img alt="xamarin forms cells png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms-cells.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div class="table-responsive mt-5" style="overflow-x: auto;"><table align="center" border="1" cellpadding="1" cellspacing="1" class="table"><thead><tr><th scope="col" width="100">Kiểu Cells</th><th scope="col">Mô tả chi tiết</th></tr></thead><tbody><tr><td>EntryCell</td><td>Là một cell chứa một nhãn hiển thị nội dung dạng chữ (text).</td></tr><tr><td>SwitchCell</td><td>Như là một Switch control nhưng có thêm một nhãn hiển thị trước nó.</td></tr><tr><td>TextCell</td><td>Là một cell chứa cả một đoạn chữ cơ bản (primary) và một đoạn chữ bổ sung (secondary).</td></tr><tr><td>ImageCell</td><td>Hiển thị giống TextCell nhưng có thêm một Image trước đó bằng cách đặt thuộc tính Source.</td></tr></tbody></table></div>

<h2 id="goto-h2-2" data-stt="2">3. Kết luận</h2>

<p>Trên đây là các thành phần&nbsp;giao diện&nbsp;phần cơ bản trong Xamarin Forms.&nbsp;Từ các thành phần này, bạn đã có thể bắt tay xây dựng ứng dụng đầu tiên. Hi vọng bạn đã có thời gian bổ ích với bài viết này. Hãy đọc bài kế tiếp để biết cách cài đặt&nbsp;công cụ cho việc viết ứng dụng Xamarin đầu tiên nhé. Hẹn gặp lại.</p>





































                
                



































                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Tổng quan về Xamarin Forms

Tìm hiểu Xamarin - Một giải pháp đa nền tảng

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về useContext trong React Hooks. Đây là bài viết tiếp nối các bài viết về React Hooks trước đó. Để hiểu rõ hơn về các khái niệm trong bài viêt này chúng ta có thể tham khảo thêm về bài viết React Context API.



<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/xamarin_mobile_app_development.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-19 16:14:08.000</span><h3>Tìm hiểu Xamarin - Một giải pháp đa nền tảng

</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Trước đây khi lập trình ứng dụng mobile thì bắt buộc chúng ta phải sử dụng từng ngôn ngữ lập trình riêng cho các hệ điều hành. Ví dụ với Android thì bạn phải học JAVA, Window Phone thì dùng C#, iOS thì dùng Objective C hoặc Swift ... nhưng bây giờ công nghệ ngày càng được nâng cao nên bạn có thể sử dụng một công nghệ là có thể xây dựng được ứng dụng trên nhiều nền tảng, và Xamarin là một trong những công nghệ đó.

</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Mono là gì?</a></li>
<li class="list-goto-1"><a href="#goto-h2-1">2. Giới thiệu về Xamarin</a></li><li class="list-goto-2"><a href="#goto-h2-2">3. Kiến trúc Xamarin</a></li><li class="list-goto-3"><a href="#goto-h2-3">4. Các thanh viên trong gia đình Xamarin</a></li><li class="list-goto-4"><a href="#goto-h2-4">5. Bộ công cụ phát triển (SDKs)</a></li><li class="list-goto-5"><a href="#goto-h2-5">6. Môi trường phát triển ứng dụng Xamarin (IDEs)</a></li><li class="list-goto-6"><a href="#goto-h2-6">7. Môi trường phát triển</a></li><li class="list-goto-7"><a href="#goto-h2-7">8. Ai đang dùng Xamarin?</a></li><li class="list-goto-8"><a href="#goto-h2-8">9. Các ưu thế của Xamarin</a></li><li class="list-goto-9"><a href="#goto-h2-9">10. Lời kết</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Mono là gì?</h2>


<p class="ads_displayed"><a href="https://www.mono-project.com/" class="text-gradient" target="_blank">Mono</a> là một bộ mã nguồn mở dựa trên <a href="https://dotnet.microsoft.com/en-us/download/dotnet-framework" class="text-gradient" target="_blank">.Net Framework</a>&nbsp;được phát triển bởi Novell và sở hữu bởi <a href="https://en.wikipedia.org/wiki/Xamarin" class="text-gradient" target="_blank">Xamarin</a>, một công ty con của Microsoft. Nó được giới thiệu lần đầu tiên vào 30 tháng 6 năm 2004. Mục đích của dự án Mono là đưa những ứng dụng được xây dựng&nbsp;dựa trên nền tảng&nbsp;.Net chạy được&nbsp;trên các nền tảng khác như&nbsp;Linux, Android, Mac.</p>

<p class="ads_displayed">Nền tảng .Net giúp bạn chạy ứng dụng trên Android sử dụng Mono for Android mà được biết đến là Xamarin.Android và trên IOS với MonoTouch được biết đến như là Xamarin.iOS.</p>
<div>
<h2 id="goto-h2-1" data-stt="1">2. Giới thiệu về Xamarin</h2>
</div>
<h3 class="ml-3">2.1. Lịch sử phát triển của Xamarin</h3>
<p>
	Xamarin được thành lập từ tháng 5/ 2011 từ dự án Mono Open source – một Platform cho phép chạy .Net trên tất cả các nền tảng: Linux, Android, iOS, … do Miguel de Icaza và Nat Friedman sáng lập với cộng đồng khoảng 1.3 triệu lập trình viên, độc quyền sử dụng công cụ của hãng, tạo nên các ứng dụng di động bằng C#, cho phép chạy cross-platform (xuyên nền tảng) dành cho iOS, Android và Windows.</p>
 <p class="ads_displayed"><img alt="Minh họa quá trình hình thành và phát triển Xamarin" src="https://api.jits.com.vn:4001/data/news/image/xamarin-1.png" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<h3 class="ml-3">2.2. Đặc điểm của Xamarin</h3><p>	Xamarin hỗ trợ truy cập hoàn toàn tới SDK gốc cũng từng nền tảng và thêm một số tiện ích mới như sau:</p><div>
	-<span style="white-space: pre;"> </span>Kết nối – Binding – Hoàn toàn với SDK gốc:</div>
 <ul>
	<li>
		Chuyển đổi trực tiếp những phương thức trong SDK của Android và iOS sang ngôn ngữ .Net.&nbsp;</li>
	<li>
		Cung cấp trình dò lỗi và kiểm tra “compile – time” hoặc trong quá trình phát triển, giảm thiểu lỗi runtime và tăng chất lượng ứng dụng.</li>
</ul>

<div class="mt-3">
	-<span style="white-space: pre;"> </span>Tương thích với <a href="/lap-trinh-di-dong/Lap-trinh-iOS-Objective-C_22" class="text-gradient">Objective – C</a>, Java, <a href="/lap-trinh-va-csdl#chuyen-de2~92" class="text-gradient">C và C++</a>:
<ul>
	<li>
		Chèn trực tiếp các thư viện Objective-C, Java, C, và C++, giúp lập trình viên có thể sử dụng các thứ viện của bên-thứ-3 một cách dễ dàng.</li>
</ul>
</div>
 

<div class="mt-3">
	-<span class="Apple-tab-span" style="white-space: pre;"> </span>Cấu trúc ngôn ngữ hiện đại:<ul>
	<li>
		Ngôn ngữ C# có một số điểm mới hơn so với Objective-C và Java như: Dynamic Language Features, Lambdas, LINQ, Parallel Programming, Generics, v.v…</li>
</ul></div>

<div class="mt-3">
	-<span class="Apple-tab-span" style="white-space: pre;"> </span>Các lớp thư viện cơ bản (base class library - BCL):&nbsp;<ul>
	<li>
		Gồm rất nhiều class hỗ trợ toàn diện và sắp xếp hợp lý, như XML, Database, Serialization, IO, String, Networking và nhiều thứ khác.</li>
</ul></div>

<div class="mt-3">
	-<span class="Apple-tab-span" style="white-space: pre;"> </span>Môi trường phát triển mới (Modern Integrated Development Environment - IDE):&nbsp;<ul>
	<li>
		Bộ công cụ Xamarin Studio trên Mac OS</li>
	<li>
		Bộ công cụ Xamarin Studio hoặc Visual Studio 2013 trên Windows</li>
</ul></div>

<div class="mt-3">
	-<span class="Apple-tab-span" style="white-space: pre;"> </span>Hỗ trợ Cross Platform:&nbsp;<ul>
	<li>
		Ứng dụng có thể được viết với 90% code được chia sẻ hoặc dùng chung. Qua đó có thể giảm đáng kể chi phí và thời gian phát triển ứng dụng di động cho 3 nền tảng phổ biến nhất hiện nay là iOS, Android và Windows Phone.</li>
</ul></div>


<div class="mt-5">
<h2 id="goto-h2-2" data-stt="1">3. Kiến trúc Xamarin</h2>
</div>

<p class="ads_displayed">Xamarin được xây dựng&nbsp;dựa trên Mono giúp ứng dụng&nbsp;chạy&nbsp;trên Android, MAC và LINUX. Sử dụng Mono, bạn có thể truy cập các tính năng của C# .NET và sử dụng nó để phát triển cho các nền tảng ngoài Windows. Kiến trúc cơ&nbsp;bản của Xamarin như hình dưới.</p>

<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/xamarin-forms.jpg
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed"><img alt="xamarin forms jpg" src="https://api.jits.com.vn:4001/data/news/image/xamarin-2.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221); width: 802px; height: 366px;"></p>

<div style="margin: 30px 0px 20px;">
        <script async="" id="AV61c43a67f38d9610bd10d035" type="text/javascript" src="https://tg1.playstream.media/api/adserver/spt?AV_TAGID=61c43a67f38d9610bd10d035&amp;AV_PUBLISHERID=61419d5a93ce05220063f702"></script>
    </div><p class="ads_displayed">Nếu bạn không hiểu ngay thì cũng đừng lo lắng, chúng ta sẽ tìm hiểu dần từng phần nhé.</p>

<div>
<h2 id="goto-h2-3" data-stt="2">4. Các thanh viên trong gia đình Xamarin</h2>
</div>

<p class="ads_displayed">Dựa trên các hệ điều hành, Xamarin có các lựa chọn đa dạng để phát triển ứng dụng cho IOS, Android, MAC, Android Wear, Android TV, Windows Phone hoặc nền tảng&nbsp;UWP. Dưới đây là các tùy chọn để phát triển ứng dụng sử dụng Xamarin.</p>

<p class="ads_displayed"><img alt="cross platform jpg" src="https://api.jits.com.vn:4001/data/news/image/cross-platform.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div>
<h2 id="goto-h2-4" data-stt="3">5. Bộ công cụ phát triển (SDKs)</h2>
</div>

<p class="ads_displayed">Để phát triển ứng dụng với Xamarin, bạn cần cài đặt SDKs cho iOS, Android và Windows</p>

<p class="ads_displayed"><img alt="xamarin sdks png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-sdks.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div>
<h2 id="goto-h2-5" data-stt="4">6. Môi trường phát triển ứng dụng Xamarin (IDEs)</h2>
</div>

<p class="ads_displayed">Bạn có thể phát triển ứng dụng với Xamarin thông qua Visual Studio cho hệ điều hành&nbsp;Windows, Xamarin Studio hoặc Visual Studio cho MAC. Với các công cụ này, bạn đã có thể bắt đầu cho việc lập tình những ứng dụng đa nền tảng đầu tiên của mình.</p>

<p class="ads_displayed"><img alt="xamarin ide png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-ide.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div>
<h2 id="goto-h2-6" data-stt="5">7. Môi trường phát triển</h2>
</div>

<ul>
	<li>Trên môi trường&nbsp;MAC, bạn chỉ có thể viết ứng dụng cho Android và iOS, không cho Windows nhé.</li>
	<li>Trên môi trường Windows, bạn có thể phát triển ứng dụng Android và Windows và&nbsp;không cho iOS.</li>
	<li>Nếu bạn có máy Windows và 1 máy MAC mà lại đang code trên Windows thì vẫn có cách kết nối 2 máy để&nbsp; đưa code từ&nbsp;Windows thành ứng dụng trên&nbsp;iOS nhé.</li>
</ul>

<p class="mt-5"><img alt="xamarin environment windows to mac png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-environment-windows-to-mac.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
                <ins class="adsbygoogle" data-ad-client="ca-pub-6999781767311460" data-ad-slot="4552040561" data-ad-format="auto" data-full-width-responsive="true" style="display: block;"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>

<div>
<h2 id="goto-h2-7" data-stt="6">8. Ai đang dùng Xamarin?</h2>
</div>

<p>Hơn 1 triệu nhà phát triển đang dùng Xamarin để xây dựng các ứng dụng cho doanh nghiệp và các khách hàng trực tiếp. Dưới đây là một số công ty đã sử dụng các ứng dụng được phát triển với Xamarin.</p>

<p><img alt="xamarin showcase png" src="https://api.jits.com.vn:4001/data/news/image/xamarin-showcase.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div>
<h2 id="goto-h2-8" data-stt="7">9. Các ưu thế của Xamarin</h2>
</div>

<ul>
	<li>Sử dụng C#, một ngôn ngữ tuyệt với từ Microsoft</li>
	<li>Phát triển ứng dụng đa nền tảng</li>
	<li>Giảm thiểu chi phí phát triển phần mềm</li>
	<li>Hiệu năng và giao diện như ứng dụng Native (ứng dụng được&nbsp;viết bằng công cụ độc quyền cho nền tảng: dùng java viết android và dùng swift viết ios)</li>
	<li>Truy cập các API từ các nền tảng hệ điều hành</li>
	<li>Chia sẻ code xử lý logic trên tất cả nền tảng</li>
	<li>Các thư viện hỗ trợ&nbsp;đa dạng</li>
	<li>Bộ công cụ xây dựng mạnh mẽ</li>
	<li>Hỗ trợ kiểm thử&nbsp;và kiếm soát hiệu năng</li>
</ul>

<div>
<h2 id="goto-h2-9" data-stt="8">10. Lời kết</h2>
</div>

<p>Tôi hi vọng bạn đã nắm được phần nào tổng quan về việc Xamarin đã làm cách nào để xây dựng các ứng dụng đa nền tảng&nbsp;và có thể bắt tay vào cài đặt môi trường phát&nbsp;triển. Hãy cho tôi biết suy nghĩ của bạn hoặc có bất kì câu hỏi nào, hẹn hặp lại.</p>





















                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Xamarin là gì?

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/xamarin-la-gi.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-19 16:08:08.000</span><h3>Xamarin là gì?
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p><strong>Trước đây khi lập trình ứng dụng mobile thì bắt buộc chúng ta phải sử dụng từng ngôn ngữ lập trình riêng cho các hệ điều hành. Ví dụ với Android thì bạn phải học JAVA, Window Phone thì dùng C#, iOS thì dùng Objective C hoặc Swift ... nhưng bây giờ công nghệ ngày càng được nâng cao nên bạn có thể sử dụng một công nghệ là có thể xây dựng được ứng dụng trên nhiều nền tảng, và Xamarin là một trong những công nghệ đó.

</strong></p>









<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p>
<div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Xamarin là gì?</a></li><li class="list-goto-1"><a href="#goto-h2-1">2. Ai nên học theo tutorial&nbsp;này</a></li><li class="list-goto-2"><a href="#goto-h2-2">3. Điều kiện theo học</a></li><li class="list-goto-3"><a href="#goto-h2-3">4. Nguồn tham khảo</a></li><li class="list-goto-4"><a href="#goto-h2-4">5. Lời kết</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Xamarin là gì?</h2>

<p class="ads_displayed">Xamarin tiền thân là một công ty công nghệ tại San Francisco, hiện tại đã về Microsoft. Họ cung cấp công cụ phát triển phần mềm cho phép các nhà phát triển xây dựng các ứng dụng cho Android, IOS và Universal Windows Platform sử dụng ngôn ngữ C# và .Net Framework. Xamarin được xây dựng dựa trên <strong>MONO</strong>&nbsp;và&nbsp;<strong>.NET&nbsp;Framework</strong>,&nbsp;nó cho phép tạo các ứng dụng đa nền tảng dễ dàng. Trong series&nbsp;các bài hướng dẫn về Xamarin này&nbsp;chúng ta sẽ cùng tìm hiểu xem Xamarin đã làm như thế nào nhé.</p>

<h2 id="goto-h2-1" data-stt="1">2. Ai nên học theo tutorial&nbsp;này</h2>

<ul>
	<li>Các bạn sinh viên đã năm được ngôn ngữ lập trình C# trong tay, chỉ cần nắm cơ bản.</li>
	<li>Các bạn mới đi làm muốn tìm hiểu một công cụ lập trình di động đa nền tảng.</li>
	<li>Và các bạn thích thì học thôi, không cần lý do gì cả.</li>
</ul>

<h2 id="goto-h2-2" data-stt="2">3. Điều kiện theo học</h2>

<ul>
	<li>Tất cả chương trình và code đều được viết với ngôn ngữ C#, nên bạn cần nắm được C# hoặc một ngôn ngữ hướng đối tượng để bắt đầu</li>
	<li>Nếu chưa, bạn có thể tìm kiểu thêm <a href="https://anhben.com/hoc-csharp" target="_blank" title="hoc csharp" class="text-gradient">tutorials&nbsp;hướng dẫn học C#</a>.</li>
</ul>

<h2 id="goto-h2-3" data-stt="3">4. Nguồn tham khảo</h2>

<ul>
	<li>Người anh em Google</li>
	<li>dotnettrick.com</li>
	<li>tutorialspoint.com</li>
</ul>

<h2 id="goto-h2-4" data-stt="4">5. Lời kết</h2>

<p class="ads_displayed">Giới thiệu qua như thế đã để các bạn nắm được tinh thần, không quá khó để bắt đầu phải không nào. Chúng ta cùng bắt đầu&nbsp;series về Xamarin nhé.</p>


                           
                
    








































                
                

















































                
                
































































                
                



































































                
                
























































































                
                

































































                
                










































                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

useContext trong React Hooks

useEffect trong React Hooks

Tìm hiểu React Hook useState

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks. Ở các bài trước chúng ta đã cùng nhau đi tìm hiểu về useState hooks. Bài viết này sẽ tiếp nối series bằng một hook cũng khá quan trọng đó là useEffect, nó cho phép chúng ta làm việc với life cycle trong functional component.



Giới thiệu Hooks trong React JS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về React Hook useState. Từ phiên bản 16.8 trở đi React cho ra mắt một tính năng mới đó là React Hooks, nó cho phép chúng ta làm việc với state, life cycle, và hàng loạt tính năng khác trong một functional component.

Trong bài viết này ta sẽ tìm hiểu về Higner-Order Components trong React JS, đây là tính năng rất hay trong việc tái sử dụng tài nguyên.



Quy ước và các phiên bản ngữ pháp trong Python


Việc cài đặt Visual Studio Code rất dễ dàng được thực hiện trên mọi nền tảng. Đầu tiên, bạn hãy truy cập vào trang chủ Visual Studio Code  và thực hiện tải bản cài đặt phù hợp cho máy của mình.

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/visual-studio-code.png" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-19 21:40:48.000</span><h3>Cài đặt Visual Studio Code

</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p>Việc cài đặt Visual Studio Code rất dễ dàng được thực hiện trên mọi nền tảng. Đầu tiên, bạn hãy truy cập vào trang chủ <a class="text-gradient" href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code </a> và thực hiện tải bản cài đặt phù hợp cho máy của mình.</p>




<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Download Visual Studio Code</a></li><li class="list-goto-1"><a href="#goto-h2-1">2- Cài đặt các tiện ích mở rộng cho Python trên VS Code
</a></li>
</ul></div><h2 id="goto-h2-0" data-stt="0">1. Download Visual Studio Code</h2>

<p class="ads_displayed">
    Để download <strong><a class="text-gradient" href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code </a> </strong> bạn truy cập địa chỉ:
</p>

<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="https://code.visualstudio.com/download" class="text-blue target-blank-url">https://code.visualstudio.com/download</a></li></ul>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/visual-studio-code-download.png
"></p>


<p class="ads_displayed">Để tài bản cài đặt cho Windows, bạn click vào ô Windows và trình duyệt sẽ tự động tải về bản cài đặt cho bạn. Sau khi tải về bản cài đặt, các bạn thực chạy tệp được tải về.
</p>
<p class="ads_displayed">Một màn hình cửa sổ sẽ hiện ra như sau:


</p><p class="ads_displayed"><img alt="visual" src="https://api.jits.com.vn:4001/data/news/image/visual-studio-code-install.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed">Tiếp tục click vào ô tròn bên trên (I accept the agreement) để đồng ý với các điều khoản sử dụng và nhấn "Next" để tiếp tục cài đặt:
</p>
<p class="ads_displayed"><img alt="visual" src="https://api.jits.com.vn:4001/data/news/image/visual-studio-code-install-step2.png" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed">Đến đây, bạn có thể chọn các tùy chọn cho việc cài đặt. Để đơn giản, bạn chỉ cần tích vào các ô như trong hình bên trên và sau đó nhấn vào <strong>"Next"</strong> . Các bạn cũng có thể chọn toàn bộ các tùy chọn, điều này không ảnh hưởng nhiều đến sự hoạt động của VS Code.</p>
<p class="ads_displayed"><img alt="visual" src="https://api.jits.com.vn:4001/data/news/image/visual-studio-code-install-step3.png" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed">Cuối cùng, tại bước này, bạn chỉ cần click vào nút
<strong>"Install"</strong>và hoàn tất việc cài đặt chương trình <a class="text-gradient" href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code </a></p>
















<p class="ads_displayed">
    Đến đây bạn đã hoàn tất quá trình cài đặt Visual Studio Code. Tiếp theo chúng ta sẽ tiếp tục cài đặt các tiện ích mở rộng cần thiết cho VS Code để hỗ trợ lập trình ngôn ngữ Python.
</p><h2 id="goto-h2-1" data-stt="1" class="pt-5"><span>2- Cài đặt các tiện ích mở rộng cho Python trên VS Code
</span></h2>

<p class="ads_displayed">
    Sau khi đã cài đặt Visual Studio Code, bạn hãy mở ứng dụng này và thực hiện cài đặt thành phần hỗ trợ cho ngôn ngữ Python.
</p><div>
    

<blockquote class="otro-blockquote">Nếu không cài phần mở rộng này, bạn sẽ không thể thấy code highlight đẹp mắt cũng như nhiều tính năng nhắc lệnh khác !

</blockquote>
</div>
<p class="ads_displayed">Để khám phá và cài đặt các tiện ích mở rộng mới, bạn hãy nhấp vào biểu tượng Tiện ích mở rộng trong VS Code (minh họa trong hình bên dưới). Bạn có thể tìm kiếm tiện ích mở rộng bằng cách sử dụng từ khóa, sắp xếp kết quả theo nhiều cách và cài đặt tiện ích mở rộng một cách nhanh chóng và dễ dàng.
</p>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/cai-dat-python-download-6.gif
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/python-extention.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed">Sau khi thực hiện bước này, bạn đã thêm vào VS Code một tiện ích mở rộng cho việc lập trình Python.
</p>
<div>
    

<blockquote class="otro-blockquote">Đến đây, bạn mới chỉ hoàn thành việc cài đặt trình soạn thảo thôi nhé. Để chương trình Python chạy được bạn cần chọn môi trường thông dịch đi kèm nữa !
</blockquote>
</div>



<p class="ads_displayed">Môi trường thông dịch Python này chính là cái mà bạn đã tiến hành cài đặt ở các bước trước. Bạn hãy nhấn tổ hợp các phím <strong>Ctrl+Shift+P</strong> để kích hoạt tính năng <strong>Command Palett</strong> và gõ chữ <code> "Python: Select Interpreter" </code>và nhấn phím Enter. Sau khi thực hiện, ứng dụng <a class="text-gradient" href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code </a> sẽ liệt kê ra danh sách các trình thông dịch cho Python đang được cài đặt trên hệ thống (đã được thêm vào biến môi trường ở bước trước, nếu chưa thêm bạn sẽ phải trỏ đường dẫn thủ công bằng tay ở đây. Bạn đã thấy rắc rối nếu không chọn PATH variable ở bước trước chưa?).
</p><p class="ads_displayed">Trong phần đầu tiên, chúng ta đã thực hiện cài đặt Python, do đó, trong bước này, chúng ta sẽ chọn trình biên dịch Python đã được cài đặt như trong hình bên dưới:
</p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/pythonexe.png
" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><p class="ads_displayed">Như vậy, chúng ta đã hoàn thành việc cài đặt các công cụ cần thiết để thực hiện việc lập trình và thực thi chương trình bằng ngôn ngữ Python trên môi trường Visual Studio Code.
</p>








<p class="ads_displayed">
Visual Studio Code sẽ được sử dụng để bạn làm quen với việc lập trình trên các trình soạn thảo và thông dịch Python thực tế khi bạn học thêm trên lớp hoặc khi đi làm. Ngoài ra, nó sẽ được sử dụng để thử nghiệm các đoạn code trong phần hướng dẫn, xây dựng các dự án phức tạp đòi hỏi nhiều thao tác và nhiều file trong khóa học này.
</p>
<p class="ads_displayed">
Trong bài tiếp theo, chúng ta sẽ khởi động khóa học với việc lập trình một chương trình đơn giản đầu tiên bằng Python trên Visual Studio Code.
</p>





















                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Cài đặt môi trường phát triển Python trên Visual Studio Code

<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/python.jpg" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-17 13:56:48.000</span><h3>Cài đặt Python trên Windows

</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p>Trong bài viết này chúng ta sẽ cùng nhau đi<strong> tìm hiểu cách cài đặt PYTHON trên WINDOW</strong></p>




<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Download Python</a></li><li class="list-goto-1"><a href="#goto-h2-1">2- Cài đặt Python
</a></li><li class="list-goto-2"><a href="#goto-h2-2">3- Bắt đầu với Python
</a></li>
<li class="list-goto-3"><a href="#goto-h2-3">4- Các IDE cho Python
</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Download Python</h2>

<p class="ads_displayed">
    Để download <strong><a href="https://en.wikipedia.org/wiki/Python_(programming_language)" class="text-gradient">PYTHON</a> </strong> bạn truy cập địa chỉ:
</p>

<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="https://www.python.org/downloads" class="text-blue target-blank-url">https://www.python.org/downloads/</a></li></ul>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/PYTHON.png"></p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/python-install-file.png
"></p>
<p class="ads_displayed">Sau khi download xong bạn có một file:
</p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/download-python-file.png"></p>
















<h2 id="goto-h2-1" data-stt="1" class="pt-5"><span>2- Cài đặt Python
</span></h2>

<p class="ads_displayed">Chạy file bạn download được ở bước trên để bắt đầu cài đặt. Chọn <strong>"Customize Installation"</strong> để bạn có thể tùy chọn ví trí <strong>Python</strong> sẽ được cài đặt ra.
</p><p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/install-001.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/install-002.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed">Chọn vị trí mà
<strong>Python</strong>sẽ được cài đặt ra.
</p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/install-003.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/install-004.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><h2 id="goto-h2-2" data-stt="1" class="pt-5"><span>3- Bắt đầu với Python
</span></h2><p class="ads_displayed">
    Trên "Start Menu" của Windows bạn chạy IDLE (Python 3.10 64bit):
</p>

<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/use-python-001.png" style="width: 796px; height: 795px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><p class="ads_displayed">
Chương trình <strong>"Python Shell"</strong> đã được chạy, nó là một chương trình giúp bạn viết mã <strong>Python</strong>. Dưới đây là hình ảnh của nó:
</p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/use-python-002.png" style="width: 876px; height: 445px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><p class="ads_displayed">Nhập vào một đoạn code:&nbsp; <strong>print("Hello Python")</strong> và nhấn Enter.
</p>
<p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/use-python-003.png" style="width: 872px; height: 422px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>




<h4 class="mt-4 text-gradient">Python Shell là gì?
</h4><p class="ads_displayed">
Sau khi bạn cài đặt xong <strong>Python</strong>, nó có thêm một công cụ <strong>Python Shell</strong>, đây là một <strong>IDE</strong> (Integrated Development Environment) giúp bạn viết mã <strong>Python</strong>. Nếu bạn không muốn sử dụng <strong>Python Shell</strong> bạn có thể sử dụng một <strong>IDE</strong> khác. Và chắc chắn là bạn sẽ sử dụng một <strong>IDE</strong> khác tốt hơn, vì <strong>Python Shell</strong> không phù hợp để bạn phát triển một ứng dụng lớn.</p>
<p class="ads_displayed">
Cho tới năm 2022, <strong>Python</strong> đang có phiên bản <a href="https://peps.python.org/pep-0619/" class="text-gradient">3.10</a>
</p>
<h2 id="goto-h2-3" data-stt="1" class="pt-5"><span>4- Các IDE cho Python
</span></h2>

<p class="ads_displayed">Một số <strong>IDE</strong> giúp bạn lập trình <strong>Python</strong>:
</p><ol class="ml-5">
	<li>PyCharm</li>
	<li>Eclipse (Cài đặt PyDev plugin cho Eclipse)</li>
    <li>Kite.</li>
    <li>Spyder.</li>
    <li>IDLE.</li>
    <li>Sublime Text 3.</li>
    <li>Visual Studio Code.</li>
    <li>Jupyter.</li>
    <li>Atom.</li>
</ol>
<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="/blog-details/install-visual-studio-code-python" class="text-blue target-blank-url">Cài đặt Visual Studio Code</a></li></ul>

















                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Cài đặt Python trên Windows

Để download Python, bạn truy cập địa chỉ:


<div class="container"><div class="beny_tm_modalbox_news"><div class="box_inner"><div class=" scrollable"><div class="mb-5"><img src="https://api.jits.com.vn:4001/data/news/image/python.jpg" alt="thumb" class="img-fluid w-100"></div><div class="details"><span>2022-09-16 17:05:48.000</span><h3>Tìm hiểu về Context trong ReactJS
</h3></div><div class="main_content"><div class="descriptions">



<div class="content">
<div class="article">
                


<p>Trong bài viết này chúng ta sẽ cùng nhau đi<strong> tìm hiểu về ngôn ngữ lập trình PYTHON</strong></p>




<p>Bài viết này được đăng tại <a title="anhben" class="text-gradient">anhben.com</a>, không được copy dưới mọi hình thức.</p><div class="goto-wrapper text-post pb-5"><p class="fs-28 text-blue">Mục lục</p><ul class="go-to-detail"><li class="list-goto-0"><a href="#goto-h2-0">1. Python là gì? ?</a></li><li class="list-goto-1"><a href="#goto-h2-1">2- Xếp hạng ngôn ngữ
</a></li><li class="list-goto-2"><a href="#goto-h2-2">3- Lịch sử của Python
</a></li>
<li class="list-goto-3"><a href="#goto-h2-3">4- Bắt đầu với Python
</a></li></ul></div><h2 id="goto-h2-0" data-stt="0">1. Python là gì? ?</h2>

<p class="ads_displayed"><strong><a href="https://en.wikipedia.org/wiki/Python_(programming_language)" class="text-gradient">PYTHON</a></strong> là một ngôn ngữ lập trình thông dịch (interpreted), hướng đối tượng (object-oriented), và là một ngôn ngữ bậc cao (high-level) ngữ nghĩa động (dynamic semantics). Python hỗ trợ các module và gói (packages), khuyến khích chương trình module hóa và tái sử dụng mã. Trình thông dịch <strong><a href="https://en.wikipedia.org/wiki/Python_(programming_language)" class="text-gradient">PYTHON</a></strong> và thư viện chuẩn mở rộng có sẵn dưới dạng mã nguồn hoặc dạng nhị phân miễn phí cho tất cả các nền tảng chính và có thể được phân phối tự do.</p>

<blockquote>
<p class="ads_displayed">Sau đây là các đặc điểm của Python:
</p>
</blockquote>

<ul>
	<li>Ngữ pháp đơn giản, dễ đọc.</li>
	<li>Vừa hướng thủ tục (procedural-oriented), vừa hướng đối tượng (object-oriented)</li>
	<li>Hỗ trợ module và hỗ trợ gói (package)</li>
	<li>Xử lý lỗi bằng ngoại lệ (Exception)</li>
	<li>Kiểu dữ liệu động ở mức cao.</li>
	<li>Có các bộ thư viện chuẩn và các module ngoài, đáp ứng tất cả các nhu cầu lập trình.</li>
	<li>Có khả năng tương tác với các module khác viết trên <strong>C/C++</strong> (Hoặc <strong>Java </strong>cho <strong>Jython</strong>, hoặc <strong>.Net</strong> cho <strong>IronPython</strong>).</li>
	<li>Có thể nhúng vào ứng dụng như một giao tiếp kịch bản (scripting interface).</li>
</ul>



<h4 class="mt-5 mb-2">Python dễ dàng kết nối với các thành phần khác:

</h4>



<ul>
	<li><strong>Python</strong> có thể kết nối với các đối tượng <strong>COM</strong>, <strong>.NET</strong> (<strong>Ironpython, Python for .net</strong>), và <strong>CORBA</strong>, <strong>Java</strong>… <strong>Python</strong> cũng được hỗ trợ bởi <strong>Internet Communications Engine (ICE)</strong> và nhiều công nghệ kết nối khác.</li><li>Có thể viết các thư viện trên <strong>C/C++</strong> để nhúng vào <strong>Python</strong> và ngược lại.</li>
</ul><h4 class="mt-5 mb-2">Python là ngôn ngữ có khả năng chạy trên nhiều nền tảng.
</h4>
<ul>
	<li><strong>Python</strong> có cho mọi hệ điều hành: <strong>Windows</strong>, <strong>Linux/Unix</strong>, <strong>OS/2</strong>, <strong>Mac</strong>, <strong>Amiga</strong>, và những hệ điều hành khác. Thậm chí có cả những phiên bản chạy trên <strong>.NET</strong>, máy ảo <strong>Java</strong>, và điện thoại di động (Nokia Series 60). Với cùng một mã nguồn sẽ chạy giống nhau trên mọi nền tảng.</li>
</ul>
<h4 class="mt-5 mb-2">Python rất đơn giản và dễ học
</h4>
<ul>
	<li><strong>Python</strong> có cộng đồng lập trình rất lớn, hệ thống thư viện chuẩn, và cả các thư viện mã nguồn mở được chia sẻ trên mạng.</li>
</ul>

<h4 class="mt-5 mb-2">Python là ngôn ngữ mã nguồn mở
</h4><ul>
	<li>Cài đặt <strong>Python</strong> dùng giấy phép nguồn mở nên được sử dụng và phân tối tự do, ngay cả trong việc thương mại. Giấy phép <strong>Python</strong> được quản lý bởi <strong>Python Software Foundation</strong>.</li>
</ul>

<h2 id="goto-h2-1" data-stt="1" class="pt-5"><span>2- Xếp hạng ngôn ngữ
</span></h2>

<p class="ads_displayed">Hiện nay ngôn ngữ <strong>Python</strong> được xếp hạng thứ 3 trong Top 10 các ngôn ngữ lập trình phổ biến nhất đang được thế giới sử dụng. (Bảng xếp hạng năm 2016):
</p><p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/range-language.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<p class="ads_displayed">Theo thống kê từ top 39 trường giảng dạy khoa học máy tính thì đa phần các trường sử dụng ngôn ngữ <strong>Python</strong> để giảng dạy:
</p><p class="ads_displayed"><img alt="react refs trong react js gif" src="https://api.jits.com.vn:4001/data/news/image/top-graduated.png
" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p><h2 id="goto-h2-2" data-stt="1" class="pt-5"><span>3- Lịch sử của Python
</span></h2><p class="ads_displayed"><strong>Python</strong> đã được hình thành vào cuối những năm 1980, và việc thực hiện nó vào tháng 12 năm 1989 bởi <strong><a href="https://en.wikipedia.org/wiki/Guido_van_Rossum" class="text-gradient">Van Rossum</a></strong> tại <strong>Centrum Wiskunde &amp; Informatica (CWI)</strong> ở <strong>Hà Lan</strong> như là một kế thừa cho ngôn ngữ <strong>ABC</strong> (tự lấy cảm hứng từ SETL) có khả năng xử lý ngoại lệ và giao tiếp với Hệ điều hành Amoeba. <strong><a href="https://en.wikipedia.org/wiki/Guido_van_Rossum" class="text-gradient">Van Rossum</a></strong> là tác giả chính của <strong>Python</strong>, và vai trò trung tâm của ông trong việc quyết định hướng phát triển của <strong>Python</strong>.</p>

<p class="ads_displayed"><img alt="Guido-portrait-2014-drc.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Guido-portrait-2014-drc.jpg/220px-Guido-portrait-2014-drc.jpg" decoding="async" width="220" height="147" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Guido-portrait-2014-drc.jpg/330px-Guido-portrait-2014-drc.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Guido-portrait-2014-drc.jpg/440px-Guido-portrait-2014-drc.jpg 2x" data-file-width="1500" data-file-height="1000" style="width: 636px; height: 396px; display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);"></p>

<div>
    
<br>
<blockquote class="otro-blockquote">Hơn sáu năm trước, vào tháng 12 năm 1989, tôi đã tìm kiếm một dự án lập trình "sở thích" mà nó đã chiếm đóng tâm trí tôi trong suốt tuần lễ Giáng sinh. Văn phòng của tôi ... sẽ đóng cửa, nhưng tôi đã có một máy tính ở nhà, và không có nhiều thứ khác trên tay. Tôi quyết định viết một bộ thông dịch (interprester) cho ngôn ngữ kịch bản mới mà tôi đã từng nghĩ đến: một hậu duệ của ABC có thể hấp dẫn các hacker Unix/C. Tôi đã chọn Python như là một tiêu đề làm việc cho dự án.
<span>Van Rossum</span>
</blockquote>
</div>


<p class="ads_displayed"><strong>Python 2.0</strong> đã được phát hành vào ngày 16 tháng 10 năm 2000 và có nhiều tính năng mới, bao gồm bộ thu gom rác theo chu kỳ (cycle-detecting garbage) và hỗ trợ <strong>Unicode</strong>. Với việc phát hành này quá trình phát triển đã được thay đổi và trở nên minh bạch hơn và cộng đồng hậu thuẫn</p><p class="ads_displayed">
    <strong>Python 3.0</strong> được phát hành năm 2008, sau một thời gian dài thử nghiệm.
</p>
<p class="ads_displayed">
Cho tới năm 2022, <strong>Python</strong> đang có phiên bản <a href="https://peps.python.org/pep-0619/" class="text-gradient">3.10</a>
</p>
<h2 id="goto-h2-3" data-stt="1" class="pt-5"><span>4- Bắt đầu với Python
</span></h2>

<p class="ads_displayed">Hãy bắt đầu với <strong>Python</strong> bằng cách cài đặt nó.
</p><h5 class="ads_displayed">WINDOW
</h5>
<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="/blog-details/python-install-001" class="text-blue target-blank-url">Cài đặt Python trên Windows</a></li></ul>
<h5 class="ads_displayed">UBUNTU
</h5>
<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="/blog-details/python-install-002" class="text-blue target-blank-url">Cài đặt Python trên Ubuntu</a></li></ul>
<h5 class="ads_displayed">Học
</h5>
<ul class="ml-5 mt-3 mb-3"><li><a target="_blank" hreflang="vi" data-a-marker="true" href="/blog-details/python-learning-001" class="text-blue target-blank-url">Hướng dẫn lập trình Python cho người mới bắt đầu</a></li></ul>













                
                








































































































                
                

















































                
                
















































                
                






































                     







































                
                






















                           














































                
                
























                      





































                
                


















                           












































                
                



























               
                
    </div>

</div></div><div class="news_share "><span>Share:</span><ul><li><a href="https://www.facebook.com/zAnhBenz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a></li><li><a href="https://twitter.com/nguyenvuhoangz/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a></li><li><a href="https://www.instagram.com/nguyenvuhoangz/?hl=en" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a></li><li><a href="https://github.com/nguyenvuhoang/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li><li><a href="https://www.linkedin.com/in/anhben/" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></li></ul></div></div></div></div></div></div>

Giới thiệu về Python

Python là một ngôn ngữ lập trình thông dịch (interpreted), hướng đối tượng (object-oriented), và là một ngôn ngữ bậc cao (high-level)  ngữ nghĩa động (dynamic semantics).

Higher-Order Components trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Trong bài này chúng ta sẽ cùng nhau đi tìm hiểu về Render Props trong ReactJS. Khi triển khai một dự án React, việc tái sử dụng các component là điều rất cần thiết nhất là trong các dự án lớn. Bởi vậy, React cung cấp cho chúng ta một pattern rất hữu ích cho việc xây dựng và tái sử dụng các component đó là render props.



Tìm hiểu về Context trong ReactJS

Trong bài này chúng ta sẽ cùng nhau đi tìm hiểu về Fragments trong ReactJS, chắc hẳn trong quá trình làm quen với React bạn gặp thông báo lỗi " JSX parent expressions must have one parent element” khi không bọc các element JSX quanh một element nào đó. Giả sử như thế này.



Tìm hiểu về Fragments trong ReactJS


Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Context trong ReactJS. Trong quá trình làm việc với ReactJS, các dữ liệu trong các component phải được chia sẻ với nhau.



Tìm hiểu về Refs trong ReactJS


Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong ReactJS. Trong quá trình làm việc với React ở một vài trường hợp nào đó bạn cần phải thực hiện việc tham chiếu đến DOM, mặc dù điều này không được khuyến khích sử dụng. Để giúp quá trình tham chiếu đến DOM dễ dàng hơn, React cung cấp cho chúng ta React Refs.



Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Lifting State Up trong ReactJS, trong quá trình làm việc với React, các component phải re-render và thay đổi rất nhiều lần. Trong một vài trường hợp, bạn muốn khi 1 component con được thay đổi, đồng thời bạn muốn component cha cũng sẽ bắt được hành động đó. Theo tài liệu chính thức của ReactJS thì Lifting State Up được định nghĩa là rằng :



Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và keys trong ReactJS, đây cũng là phần mà chúng ta sẽ làm việc rất nhiều trong React.



Xử lý Form trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để render với điều kiện trong ReacJS. Trong React, chúng ta có thể tạo ra các component riêng biệt, và chỉ định thành phần nào được render bằng cách sử dụng biểu thức điều kiện.



Handling Events (xử lý sự kiện) trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các thao tác xử lý form trong ReactJS.



Tìm hiểu Component Life Cycle trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Handling Events trong Reactjs - xử lý sự kiện trong ReactJS. Trong một website việc tương tác giữa người dùng là điều không thể thiếu như click, nhập form,..chúng ta có thể thực hiện bắt các sự kiện này trong React một cách dễ dàng.



Tìm hiểu về Component API trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về component life cycle trong React, đây là một phần quan trọng trong React, nó cho phép bạn hiểu được cách mà một component họat động ra sao ?



Tìm hiểu Props Validation trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các API bên trong các React Component, đây là những API được sử dụng khá nhiều trong quá trình làm việc với các component bao gồm setState(), forceUpdate(), ReactDOM.findDOMNode(),...


Tìm hiểu State trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về khái niệm state trong ReatJS. ReactJS được xây dựng để làm các trang web single page applicationn (SPA) nên vấn re-render lại các component là điều tất yếu và không thể thiếu. State cho phép chúng ta lưu trữ dữ liệu trong component, và mỗi khi state thay đổi thì component đó sẽ tự động re-render.

Tìm hiểu về Props trong ReactJS

Components trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về khái niệm props trong ReactJS, và cách để sử dụng nó trong một dự án. Trong quá trình lập trình một ứng dụng React, việc giao tiếp giữa các components với nhau là điều không thể thiếu. React cho phép chúng ta làm điều này bằng cách sử dụng props.

Giới thiệu JSX trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về components trong ReactJS. Trong bài viết đầu tiên giới thiệu về ReactJS mình cũng đã đề cập đến component, đây là một phần không thể thiếu trong dự án ReactJS. Bài này chúng ta sẽ cùng nhau đi tìm hiểu kĩ hơn về nó.

Cài đặt môi trường chạy ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về JSX trong ReactJS. Ở bài viết trước mình cũng đã giới thiệu về JSX một cách căn bản nhất, bài này chúng ta sẽ tiếp tục và đi tìm hiểu sâu hơn về cú pháp của JSX trong ReactJS, cũng như cách sử dụng nó.

ReactJS là gì?

Trong bài viết này chúng ta sẽ đi tìm hiểu về cách cài đặt môi trường chạy ReactJS, đối với những bạn mới bắt đầu làm quen với ReactJS thì đây là bước đầu tiên để khởi chạy một project hello world.



Trong bài viết này chúng mình sẽ cùng nhau đi tìm hiểu về ReactJS là gì và các khái niệm cơ bản để bắt đầu làm quen với nó. Đây là bài viết đầu tiên trong loạt bài về ReactJS, vì vậy bài viết chỉ tập trung vào giới thiệu và giải thích các khái niệm liên quan.

ReactJS là gì? Các khái niệm cần biết trước khi học React JS

30 câu truy vấn hữu ích trong Oracle

Chào các bạn, hôm nay vô tình đọc được một bài tổng hợp hơn 40 câu truy vấn hữu ích trong Oracle khá hay nên mình dịch lại và chia sẻ với các bạn, đây là những câu truy vấn mà mọi DBA nào cũng phải lưu lại vì trong quá trình quản lý Oracle sẽ phải sử dụng đến, đó là những câu truy vấn liên quan đến máy chủ server, trạng thái thực thi, tính kích thước database, ...



Tổng hợp 30 câu truy vấn hữu ích trong Oracle

Part 6: JSON and Ajax in Javascript

Có đến 10 loại toán tử khác nhau trong Javascript



Phần 6 (Phần cuối): JSON và Ajax trong Javascript

Part 5: Manipulating HTML/CSS DOM

Part 4: Asynchronous callback, promise, async await in Javascript

Phần 5: Thao tác HTML/CSS DOM và Browser BOM với Javascript

Part 3: Manipulating numbers, strings, arrays, objects

Phần 4: Bất đồng bộ callback, promise, async await trong Javascript

Part 2: Operators, conditional statements, loops, functions, HOF

Phần 3: Thao tác với number, string, array, object và class trong Javascript


Part 1: Data types, values and references, variable declaration.

Phần 2: Toán tử, câu lệnh điều kiện, vòng lặp, function, HOF, arrow function, call(), apply(), bind() trong Javascript

Kiểu dữ liệu, tham trị & tham chiếu, khai báo biến, scope và hoisting trong Javascript

Phần 1: Kiểu dữ liệu, tham trị & tham chiếu, khai báo biến, scope và hoisting trong Javascript


Getting started with Haskell

Tôi quyết định viết những trang blog này vì muốn học lại kiến thức về Haskell (theo phương pháp của Feynman) và trong tương lai gần, khi lập trình hàm lên ngôi, tôi mong mình có thể giúp những người chưa biết gì về Haskell học tư duy của ngôn ngữ này nhanh chóng. Cho đến hiện tại, hầu như không có hướng dẫn chuẩn nào trên mạng (đặc biệt là tiếng việt), đa số chỉ là những blog lẻ tẻ. Khi bắt đầu học Haskell, học từ một nguồn tài liệu duy nhất là không đủ, cách học của tôi là đọc vài cuốn sách khác nhau, bài báo khoa học nữa, vì mỗi tài liệu đều có cách diễn giải riêng.


Why should we use Redux Thunk

Have you ever wondered why you have to use a middleware like Redux Thunk , Redux Saga ? Or do you just use it because you see tutorials online telling you to use 😜 and that's it.



Why should we use Redux Thunk Tutorial

Setup environment performance in React

Setting the environment to code is something that many new coders often ignore because it is quite cumbersome. But believe me, once installed, you will be very happy to code. The reason I choose Visual Studio Code as my editor is because it's free 😳 , fully functional and trusted by many people from newbie to pro. Enough rambling, let's get to the main point.

