Hướng dẫn react native with python backend - phản ứng bản địa với chương trình phụ trợ python

Tất cả bắt đầu với một ý tưởng.

Ý tưởng là thú vị. Bạn muốn bắt đầu ngay lập tức và làm cho ý tưởng của bạn trở nên sống động. Có thể là bạn đang nghĩ đến việc thực hiện một dự án phụ, thử các công nghệ mới tại nơi làm việc hoặc chuẩn bị khởi động.

Vào tháng 1, tôi đã ra mắt khởi nghiệp đầu tiên của mình, Proxyistyle. Đối với bất kỳ bộ trang phục nào, Proxyistyle cho phép bạn xem cửa hàng nào có trong kho, trong kích thước của bạn, gần đó. Proximistyle được xây dựng trên một React, React Native, Python và AWS Stack. Tôi đã chọn ngăn xếp này cả vì tôi đã có kinh nghiệm trước đây làm việc với nó từ công việc cũ của mình với tư cách là một nhà phát triển số lượng trong một quỹ phòng hộ stystematic, và bởi vì nó là một ngăn xếp dễ dàng để thuê.

Trang web của Proxyistyle đã được thực hiện bằng cách sử dụng React

Trang web của Proxyistyle được tạo trong React và ứng dụng iPhone được tạo bằng cách sử dụng React Native. Cả hai đều sử dụng cùng một API để nói chuyện với A AWS được chia sẻ Python phụ trợ.

Phản ứng

React là một thư viện JavaScript dễ học khiến cho việc tạo UI tương tác. Sức mạnh của React là nó cho phép bạn xây dựng giao diện người dùng của mình từ hỗn hợp mô -đun của thư viện và các thành phần tùy chỉnh. Sức mạnh của các thành phần là bạn có thể viết một phần của trang web của mình một lần, và sau đó sử dụng lại nó nhiều lần.

Một danh sách việc cần làm với một số thành phần được tô sáng

Lấy danh sách TODO này làm ví dụ. Một nhiệm vụ trong danh sách việc cần làm của bạn là một thành phần (màu cam). Điều này có nghĩa là nếu bạn muốn thay đổi tất cả các tác vụ của mình để bắt đầu bằng biểu tượng cảm xúc sao, bạn sẽ chỉ cần cập nhật thành phần nhiệm vụ của mình. Tất cả các địa điểm sử dụng thành phần nhiệm vụ của bạn sẽ ngay lập tức được cập nhật. Danh sách TODO (màu tím) cũng là một thành phần. Điều này tuân theo nguyên tắc lập trình của don don lặp lại chính mình (khô).

Các tính năng phản ứng đáng chú ý

Mã React được cấu trúc thành một loạt các thành phần và được lắp ráp như một cây phân cấp. Bạn có một thành phần gốc ở trên cùng và phần còn lại của trang được kết nối với điều này.

#1 luồng dữ liệu một chiều

Lưu lượng dữ liệu trong React là một chiều từ cha mẹ sang con. Dữ liệu được truyền vào một đứa trẻ được coi là bất biến.

#2 Virtual Dom

React sử dụng DOM ảo, đó là bộ đệm dữ liệu trong bộ nhớ của toàn bộ trang web. Bất cứ khi nào dữ liệu cho một thành phần thay đổi, DIFT được tính toán và chỉ các thành phần bị ảnh hưởng được cập nhật. Điều này có nghĩa là trang web của bạn cập nhật rất nhanh khi thay đổi xảy ra.

#3 JSX

React sử dụng một ngôn ngữ gọi là JSX, viết tắt của JavaScript XML, về cơ bản cho phép bạn viết HTML trong JavaScript của mình.

#4 Báo cáo có điều kiện trong JSX của bạn

Biểu thức có điều kiện trong JSX của bạn cung cấp cho bạn khả năng thay đổi nội dung tự động tùy thuộc vào các biến. Ví dụ, bạn có thể hiển thị nội dung khi nhấp vào nút.

#5 Thư viện

Một trong những lợi ích lớn nhất của React là sự sẵn có rộng lớn của các thư viện. Có những thư viện có sẵn cho hầu hết bất kỳ thành phần nào bạn muốn trang web của bạn có. Sliders, băng chuyền, bản đồ, vv Điều này làm cho nó rất nhanh chóng để có được một trang web và chạy. Hai người quản lý gói phổ biến cho các thư viện là NPM và Sợi.

Lợi ích chính của việc sử dụng React

#1 Tốc độ, Đơn giản, Khả năng mở rộng

Kiến trúc dựa trên thành phần của React cho phép bạn nhanh chóng và dễ dàng tạo một trang web theo quy mô sở thích hoặc kỳ lân.

#2 Don lồng lặp lại chính mình

Sử dụng các thành phần có nghĩa là tạo một lần và tái sử dụng ở mọi nơi.

#3 dễ học

Nếu bạn biết HTML và JavaScript, React rất dễ bắt đầu.

#4 Công nghiệp nhận con nuôi

React được sử dụng rộng rãi trong ngành công nghiệp, trong số những người khác Facebook, Instagram và Airbnb. Điều này có nghĩa là nó dễ dàng thuê, và dễ dàng tìm thấy tài liệu và hướng dẫn trực tuyến.

Phản ứng bản địa

React Native rất giống với React, ngoại trừ nó biên dịch cho Android và iOS thay vì một trang web. Nó cho phép bạn viết ứng dụng di động của mình trong React, điều đó có nghĩa là bạn có thể soạn UI từ các thành phần khai báo phong phú. Tuy nhiên, sử dụng React Native không có nghĩa là bạn đang viết một ứng dụng web di động. Nó biên dịch cho một ứng dụng gốc.

Nếu bạn đã biết React, việc học React bản địa khá dễ dàng, vì cú pháp là như nhau. Sự khác biệt chính là các thư viện có sẵn và các thành phần tích hợp khác nhau.

React Native không sử dụng các thẻ HTML phản ứng sử dụng, vì nó biên dịch cho Mobile chứ không phải web. Trong React, bạn sẽ sử dụng và thẻ để hiển thị một đoạn văn, trong khi ở React Native, bạn sẽ sử dụng và thẻ.

React vs React Mode gốc Ví dụ

Có một thư viện có tên React Primitives cho phép bạn sử dụng lại nhiều thành phần trong các dự án tự nhiên phản ứng và phản ứng của bạn, để tránh sao chép mã. Mục đích của dự án này là một ngày nào đó có thể viết một lần và triển khai 3 lần - cho Web, Android và iOS. Leland Richardson từ Airbnb có một cuộc nói chuyện tuyệt vời về sự trùng lặp mã mà họ hy vọng sẽ thoát khỏi bằng cách kết hợp Web, iOS và Android thành một cơ sở mã.

Lợi ích chính của việc sử dụng React Native

#1 Viết một lần, triển khai hai lần. Một nhóm kỹ thuật gầy hơn.

Lợi ích chính của việc sử dụng React Native là bạn có thể sử dụng lại một số mã của mình và bạn sẽ chỉ phải viết ứng dụng của mình một lần thay vì hai lần. Điều này làm cho việc tuyển dụng dễ dàng hơn vì bạn có thể giữ một nhóm kỹ thuật gầy hơn. Điều này tạo ra một sự khác biệt lớn trên điểm mấu chốt của bạn khi bạn là một công ty khởi nghiệp giai đoạn tai.

#2 Công nghiệp áp dụng rộng rãi

React Native được sử dụng rất rộng rãi trong ngành công nghiệp, trong số những người khác Airbnb, Facebook và Instagram. Điều này giúp bạn dễ dàng thuê, vì nó là một kỹ năng được áp dụng rộng rãi. Nó cũng có nghĩa là có rất nhiều tài nguyên trực tuyến có sẵn. Bạn sẽ tìm thấy nhiều thư viện cập nhật giải quyết các nhu cầu phổ biến nhất của bạn và câu trả lời cho các vấn đề của bạn trên StackoverFlow và trong các bài đăng trên blog.

#3 Phát triển nhanh bằng cách sử dụng tải lại nóng

Một trong những điều tốt nhất về việc phát triển một ứng dụng trong React Native là tốc độ phát triển. Sử dụng tải lại nóng, bạn có thể tải lại ứng dụng của mình ngay lập tức mà không cần biên dịch lại. Nó theo nghĩa đen nhanh như làm mới một trang web. Tải lại nóng thậm chí cho phép bạn giữ lại trạng thái ứng dụng trong khi chạy mã mới.

#4 Hỗ trợ cho các thành phần được viết bằng văn bản

React Bản địa hỗ trợ cả JavaScript và mã gốc (Swift, Objective-C hoặc Java). Điều này có nghĩa là nếu bạn có thể tìm thấy một thư viện giải quyết vấn đề của bạn, bạn có thể viết thành phần của riêng mình bằng phản ứng hoặc mã gốc. Ứng dụng của bạn có thể sử dụng mã gốc trực tiếp và nhập nó như thể nó là bất kỳ thành phần nào khác.

#5 dễ học, nhanh chóng đi từ ý tưởng đến cửa hàng ứng dụng

Tôi đã quyết định tạo ứng dụng iPhone của Proxyistyle vào tháng 2, sau khi người dùng của chúng tôi liên tục yêu cầu một ứng dụng. Chưa bao giờ tạo một ứng dụng trước đây, nhưng biết React, tôi đã quản lý để đưa ứng dụng vào Apple App Store vào giữa tháng ba.

Sự khác biệt giữa việc tạo ra proximistyle thành một trang web React và vì một ứng dụng lớn hơn tôi mong đợi lần đầu tiên (nó mất nhiều thời gian hơn một ngày cuối tuần), nhưng phần chính của đường cong học tập là tìm ra cách chạy ứng dụng của bạn trên điện thoại của bạn và làm quen với đến xcode và tất cả các đặc thù của nó.

Một trong những khác biệt chính trong việc thiết kế giao diện người dùng của bạn là React Native sử dụng Flexbox thay vì lưới CSS. Điều này mất một chút thời gian để làm quen, nếu bạn rất quen với việc làm việc với lưới điện. React Native cũng có các thư viện hoạt hình, vuốt gốc và cấu trúc dữ liệu tích hợp gọn gàng cho các thành phần cuộn.

Khi tôi đã quen với nó, tôi rất thích dòng chảy và thấy rằng trải nghiệm người dùng sử dụng proximistyle làm ứng dụng thay vì trong trình duyệt di động đã quyết định 10 lần.

Bắt đầu với React

Thật dễ dàng để bắt đầu với React nếu bạn sử dụng tập lệnh ứng dụng phản ứng của Facebook. Nó thực sự là một tập lệnh bạn tải xuống từ GitHub và chạy trong thiết bị đầu cuối của bạn để khởi tạo kho lưu trữ của bạn.

npx create-react-app my-app
cd my-app
npm start

Created-React-app chăm sóc tất cả các bước thiết lập khó khăn với WebPack và Babel, vì vậy bạn có thể có quyền làm việc. Nếu bạn cần phải định cấu hình này theo cách thủ công, bạn có thể thấy cách làm điều đó trong bài đăng trên blog của tôi hoặc nói chuyện từ Europython năm ngoái.

Phản ứng cho phép lặp lại nhanh chóng

Khi bạn đang xây dựng MVP cho startup của mình, bạn thường sẽ bắt đầu bằng cách phác thảo những gì bạn nghĩ rằng giao diện người dùng của bạn sẽ trông như thế nào. Cách nhanh nhất để kiểm tra nguyên mẫu sẽ là sử dụng một cái gì đó như phác thảo và invision để chế tạo nó, đặt nó lên điện thoại của bạn và hiển thị nó cho mọi người. Đó là những gì tôi đã làm với Proxyistyle. Khi bạn đã vượt qua giai đoạn đó, bạn sẽ muốn xây dựng một giao diện người dùng tương tác khá nhanh.

Khi bạn đang xây dựng một trang web trong React, việc đưa dữ liệu giả vào hệ thống của bạn là điều tầm thường, nơi các cuộc gọi API của bạn thường sẽ trả về nó. Vì luồng dữ liệu là một chiều, bạn có thể thêm dữ liệu cao trong cây và kiểm tra xem ứng dụng của bạn có hoạt động như mong đợi rất dễ dàng không. Sau đó, bạn có thể kiểm tra nguyên mẫu tương tác sớm của mình để kiểm tra xem đó có phải là những gì người dùng của bạn muốn không. Điều này sẽ giúp bạn tiết kiệm thời gian phát triển quý giá.

Thực hiện cuộc gọi API

Khi bạn hài lòng với mặt trước của mình, bạn có thể kết nối nó với API phụ trợ của bạn. Thông thường tôi sẽ sử dụng jQuery, tìm nạp hoặc hứa sẽ thực hiện các cuộc gọi API từ mã React.

fetch('api.example.com')
.then(response => response.json())
.catch(error => console.log(error));

Bởi vì tôi muốn có được sự phụ trợ của mình và chạy nhanh chóng, tôi sẽ mã hóa nó bằng Python và lưu trữ nó trên AWS.

Python

Python là một trong những ngôn ngữ linh hoạt nhất hiện có. Bạn có thể sử dụng nó cho tất cả mọi thứ, từ các tập lệnh nhỏ, đến khoa học dữ liệu và hệ thống doanh nhân. Nhiều quỹ phòng hộ có hệ thống, bao gồm cả quỹ mà tôi từng làm việc, là những ngôi nhà Python. Điều đó có nghĩa là nghiên cứu xảy ra trong Python, với Scipy và Numpy. Các hệ thống giao dịch được viết bằng Python, có thể với trình bao bọc Docker và các tập lệnh ngẫu nhiên mọi người viết để tự động hóa bit và bobs cũng sẽ được viết bằng Python. Bạn thậm chí có thể cạo các trang web bằng Python.

Python được cài đặt trên Mac và Linux theo mặc định, và rất cố gắng để bắt đầu. Chỉ cần sử dụng thiết bị đầu cuối hoặc mở trình soạn thảo yêu thích của bạn và bắt đầu gõ.

def hello_world():
print('Hello World!')
if __name__ == '__main__':
hello_world()

Lưu trữ phụ trợ của chúng tôi

Khi nói đến việc viết phần phụ trợ cho trang web hoặc ứng dụng của chúng tôi, chúng tôi có rất nhiều tùy chọn tùy thuộc vào những gì chúng tôi đang cố gắng xây dựng. Một tùy chọn là sử dụng bình, django hoặc kim tự tháp để tạo một máy chủ mà chúng tôi lưu trữ ở đâu đó. Tùy chọn khác là sử dụng kiến ​​trúc không có máy chủ.

Lợi ích của việc sử dụng kiến ​​trúc tính toán không có máy chủ là bạn chỉ trả cho chính xác số lượng tài nguyên máy chủ và thời gian bạn sử dụng. Điều này có thể làm giảm đáng kể chi phí hoạt động và độ phức tạp của khởi động, đặc biệt là khi phụ trợ của bạn không được gọi là rất thường xuyên. Giải pháp tính toán không có máy chủ phổ biến nhất là AWS Lambda.

Amazon Web Services (AWS)

Amazon Web Services được cho là giải pháp lưu trữ đám mây phổ biến nhất thế giới. Nó được sử dụng bởi những người có sở thích, khởi nghiệp, kỳ lân và doanh nghiệp. Một số công ty khởi nghiệp mà bạn có thể nghe nói về những người sử dụng AWS là Spotify, Airbnb, Slack và Lyft. Như với phần còn lại của ngăn xếp công nghệ này, việc áp dụng công nghiệp rộng rãi giúp bạn dễ dàng thuê một người biết điều này và bạn có thể tìm thấy rất nhiều câu trả lời cho các vấn đề phổ biến trực tuyến.

AWS cung cấp mọi dịch vụ bạn có thể tưởng tượng. Lưu trữ, tính toán, giám sát, kết nối mạng, phân tích và học máy. Có hàng trăm tùy chọn để chọn, có thể khá khó khăn nếu nó là bước đột phá đầu tiên của bạn để lưu trữ một cái gì đó. Cuối cùng tôi đã yêu cầu bạn bè trong không gian đề xuất các dịch vụ AWS cụ thể, vì thật khó để nhìn thấy khu rừng cho cây. Tôi cũng đã làm một số nghiên cứu trực tuyến. Cuối cùng, tôi phát hiện ra rằng bạn chủ yếu cần phải nhận thức được các dịch vụ phổ biến nhất, sẽ bao gồm 90% nhu cầu của bạn. Họ đang:

  • Tuyến 53 (DNS. Cần thiết cho SSL)
  • Mặt trận đám mây (bộ nhớ đệm cạnh trên toàn thế giới cho trang web của bạn)
  • S3 (lưu trữ trang web)
  • Gateway API (điểm cuối API công khai của bạn)
  • AWS Lambda (Máy tính không có máy chủ)
  • EC2 (Tính toán)
  • DynamoDB (Cơ sở dữ liệu NoQuery)

Một kiến ​​trúc AWS cơ bản

AWS cung cấp một số hướng dẫn và hướng dẫn bắt đầu hữu ích mà tôi khuyên bạn nên sử dụng để bắt đầu. Nó làm cho việc thiết lập dễ dàng hơn rất nhiều và đảm bảo bạn không định cấu hình sai bất cứ điều gì. Đó cũng là một cách tốt đẹp để làm quen với cách AWS hoạt động.

Xô S3

S3, là viết tắt của dịch vụ lưu trữ đơn giản, khá nhiều những gì nó nói trên hộp thiếc. Đó là một cái xô bạn tải lên tài liệu của mình lên. Sau đó, bạn có thể quyết định xem xô là riêng tư hay công cộng. Nếu bạn tải lên mã React của mình và công khai, bạn có một trang web tĩnh. Dễ dàng như vậy.

// create an S3 bucket
$ aws s3 mb s3://bucketName
// build and deploy your React app
$ npm run build && aws s3 sync build/ s3://bucketName

Chi phí cho S3 là ~ 1 đô la 3/tháng nếu tất cả những gì bạn muốn là lưu trữ một trang web tĩnh.

Cổng API

API Gateway được sử dụng để liên lạc giữa trang web của bạn và phụ trợ của bạn. Nó khá đơn giản để định cấu hình và cho phép bạn dễ dàng đẩy ra các thay đổi API trong các giai đoạn tự xác định như beta và prod. Bạn cũng có thể thêm các hạn chế truy cập hoặc sử dụng cho API cổng API của bạn. Thời gian chờ mặc định cho cuộc gọi API là 30 giây.

AWS Lambda

Máy tính không có máy chủ Amazon Amazon được gọi là AWS Lambda. Một hàm Lambda về cơ bản là một hàm chỉ tồn tại trong thời gian cần thiết để chạy nó. Khi bạn gọi một chức năng Lambda, nó dành một phần nhỏ của một khoảnh khắc bắt đầu, nó đi và làm điều bạn yêu cầu nó làm, và sau đó trả về kết quả. Bạn chỉ bị tính phí cho mỗi 100ms để thực hiện chức năng, so với việc trả mỗi phút hoặc giờ cho một máy chủ bình thường. Bạn không được tính bất cứ điều gì khi mã của bạn không chạy.

Điều đáng chú ý là bạn có thể đặt thời gian chờ tùy chỉnh của riêng mình cho chức năng Lambda, nhưng hãy nhớ rằng nếu bạn gọi nó từ cổng API, cuộc gọi API có thể hết thời gian trước khi chức năng Lambda kết thúc, điều đó có nghĩa là nó có thể trông Giống như bạn gọi là thất bại khi nó không.

Một ứng dụng web ví dụ sử dụng Lambda, từ trang chủ AWS Lambda.

Một lợi ích khác của việc sử dụng lambdas là khả năng mở rộng. Bởi vì tất cả các lambas của bạn chạy song song, ứng dụng của bạn có quy mô hoàn hảo, miễn là những gì nó giao tiếp cũng có thể xử lý thang đo.

Một trong những lý do chính của tôi để chọn sử dụng lambdas là điều đó có nghĩa là tôi đã không phải duy trì máy chủ của riêng mình. Đã sử dụng các máy chủ cho các dự án sở thích khác và đã là người dùng Linux vài năm trước, tôi biết cách bảo trì máy chủ tốn thời gian thậm chí có thể ở quy mô cá nhân như thế nào. Đây cũng là một trong những lý do tôi chuyển từ Linux sang Mac cách đây không lâu. Nó không đáng để gặp rắc rối.

AWS Tier miễn phí

Nếu bạn đang tạo một tài khoản AWS cho lần đầu tiên bạn có thể thanh lịch cho tầng miễn phí AWS. Nó cho phép bạn thử AWS về cơ bản miễn phí trong một năm, miễn là bạn không sử dụng quá nhiều tài nguyên. Đây là một trợ giúp rất lớn nếu bạn đang khởi động một công ty khởi nghiệp mới, vì rất có thể bạn sẽ không có tiền khi bạn bắt đầu xây dựng ý tưởng mới tuyệt vời của mình. Nếu bạn có thể chứng minh với AWS rằng bạn là một công ty khởi nghiệp mới, bạn thậm chí có thể được chấp thuận cho khoản tài trợ của Bulder, điều này cung cấp cho bạn 1.000 đô la tín dụng AWS miễn phí. Nó có vẻ không nhiều, nhưng nó đi một chặng đường dài.

Cạm bẫy và gotchas

Có rất nhiều cạm bẫy mà một gotchas sử dụng AWS, đặc biệt là lúc đầu. Rất dễ dàng để lãng phí rất nhiều thời gian để cố gắng tìm ra lý do tại sao một thành phần không giao tiếp với một thành phần khác, chỉ để tìm ra bạn đã định cấu hình mạng hoặc quyền chính xác. Tôi đã viết về điều này trong một blogpost trước đây, mà tôi khuyên bạn nên xem xét để tránh một số đau đầu.

Suy nghĩ cuối cùng

Bây giờ bạn nên có một ý tưởng tốt hơn về lý do tại sao việc chọn ngăn xếp công nghệ khởi động của bạn dựa trên mức độ dễ dàng để bắt đầu, thuê cho và Google Các vấn đề là một ý tưởng tốt. Hy vọng rằng bài đăng này là một thúc đẩy hữu ích theo đúng hướng để đưa bạn từ ý tưởng đến MVP.

Nếu bạn đọc cái này và sau đó kết thúc việc xây dựng một cái gì đó, hãy cho tôi biết. Tôi rất thích nghe những gì bạn làm việc. Gửi email cho tôi để cho tôi biết tất cả về nó!

Angela Branaes là người sáng lập Proxyistyle, một công ty khởi nghiệp bán lẻ giúp bạn tìm thấy những gì bạn đang tìm kiếm gần đó. Cô có bằng điện toán từ Imperial College London và trước đây đã làm việc tại một quỹ phòng hộ có hệ thống, một ngân hàng cấp một và một công ty Thung lũng Silicon trước khi cô dũng cảm bỏ công việc của mình để bắt đầu khởi nghiệp.

Tôi có thể sử dụng React Native với Python làm phụ trợ không?

React Native-Khung phát triển ứng dụng di động-có thể được sử dụng cùng với Django-một khung dựa trên Python cấp cao để phát triển phụ trợ. Giống như React, nó là nguồn mở và sử dụng miễn phí cho bất cứ ai.can be used together with Django – a high-level Python-based framework for backend development. Just like React, it is open-source and free to use for anyone.

Phần phụ trợ nào là tốt nhất cho React Native?

10 phụ trợ tốt nhất cho React ...
Nút. JS. ....
Thể hiện. JS. ....
Cơ sở lửa. Firebase là một nền tảng phát triển ứng dụng giúp bạn xây dựng và phát triển ứng dụng và trò chơi mà người dùng yêu thích. ....
Prisma. Đó là Node.js và TypeScript thế hệ tiếp theo cho cơ sở dữ liệu. ....
Heroku. ....
Dây đeo. ....
Gatsby. ....
Django..

Có phản ứng bản địa có hoạt động với Python không?

Vâng, nó là có thể.Ví dụ: bạn có thể sử dụng Python làm phụ trợ (máy chủ), với một số "giao diện" HTTP lộ ra, sau đó tạo một ứng dụng Android giao tiếp với các phụ trợ Python này với yêu cầu / phản hồi HTTP.. For example, you can use Python as backend (server), with some exposed HTTP "interface", then make an Android application that communicates with these Python backend with HTTP request / response.

Django có tốt cho React Native không?

Làm thế nào có thể phản ứng bản địa và django được sử dụng cùng nhau?React Native chủ yếu là một khung frontend và Django giúp chạy mã phía máy chủ phụ trợ.Cả hai đều có lợi thế so với các khung phía trước và phụ trợ khác, tương ứng.Cả hai thường được sử dụng cho bất kỳ loại phát triển nào (Web, Android hoặc iOS và Hybrid).React Native is primarily a frontend framework, and Django helps run the backend server-side code. Both have advantages over other frontend and backend frameworks, respectively. Both are often used for any sort of development (Web, Android or iOS, and Hybrid).