1638320400
Full Understanding Of Apollo Data Sources
Full Understanding Of Apollo Data Sources
👉Thanks to the flexibility of GraphQL, we have many options (back-end services, databases, external APIs, and so on). Certain cloud platforms provide automatically generated GraphQL access to a particular set of data sources, and if you create your own GraphQL server, you can combine any set of data sources you like.
⭐️You can see more at the link at the end of the article. Thank you for your interest in the blog, if you find it interesting, please give me a like, comment and share with everyone. Thanks! ❤️
#apollo #graphql
What is GEEK
Buddha Community
1620466520
Your Data Architecture: Simple Best Practices for Your Data Strategy
If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.
If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.
In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.
#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition
1685213040
使用 jQuery 创建分页
在本文中，我们将看到如何使用 jquery 创建分页。我们将使用多种方式创建 jquery 分页。您可以使用不同的方式创建分页，例如使用简单的 HTML 创建分页，您可以使用 paginate() 方法在 laravel 中创建分页。另外，创建分页 laravel livewire，使用 bootstrap 进行分页。
我们将创建简单的 jquery 分页。此外，使用不带插件的 jquery 创建分页，并使用下一个和上一个按钮创建 jquery 分页
那么，让我们看看jquery中的动态分页和jquery中的bootstrap分页
例子：
在这个例子中，我们将使用 jquery 创建分页而不使用插件。此外，您可以自定义分页。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Pagination Using jQuery - Websolutionstuff</title>
<style>
.current {
color: green;
}
#pagin li {
display: inline-block;
font-weight: 500;
}
.prev {
cursor: pointer;
}
.next {
cursor: pointer;
}
.last {
cursor:pointer;
margin-left:10px;
}
.first {
cursor:pointer;
margin-right:10px;
}
.line-content, #pagin, h3 {
text-align:center;
}
.line-content {
margin-top:20px;
}
#pagin {
margin-top:10px;
padding-left:0;
}
h3 {
margin:50px 0;
}
</style>
</head>
<body>
<h3>How To Create Pagination Using jQuery - Websolutionstuff</h3>
<div class="line-content">This is Page 1 content example with next and prev.</div>
<div class="line-content">This is Page 2 content example with next and prev.</div>
<div class="line-content">This is Page 3 content example with next and prev.</div>
<div class="line-content">This is Page 4 content example with next and prev.</div>
<div class="line-content">This is Page 5 content example with next and prev.</div>
<div class="line-content">This is Page 6 content example with next and prev.</div>
<div class="line-content">This is Page 7 content example with next and prev.</div>
<div class="line-content">This is Page 8 content example with next and prev.</div>
<div class="line-content">This is Page 9 content example with next and prev.</div>
<div class="line-content">This is Page 10 content example with next and prev.</div>
<div class="line-content">This is Page 11 content example with next and prev.</div>
<div class="line-content">This is Page 12 content example with next and prev.</div>
<div class="line-content">This is Page 13 content example with next and prev.</div>
<div class="line-content">This is Page 14 content example with next and prev.</div>
<div class="line-content">This is Page 15 content example with next and prev.</div>
<div class="line-content">This is Page 16 content example with next and prev.</div>
<div class="line-content">This is Page 17 content example with next and prev.</div>
<div class="line-content">This is Page 18 content example with next and prev.</div>
<div class="line-content">This is Page 19 content example with next and prev.</div>
<div class="line-content">This is Page 20 content example with next and prev.</div>
<div class="line-content">This is Page 21 content example with next and prev.</div>
<div class="line-content">This is Page 22 content example with next and prev.</div>
<div class="line-content">This is Page 23 content example with next and prev.</div>
<div class="line-content">This is Page 24 content example with next and prev.</div>
<div class="line-content">This is Page 25 content example with next and prev.</div>
<div class="line-content">This is Page 26 content example with next and prev.</div>
<div class="line-content">This is Page 27 content example with next and prev.</div>
<div class="line-content">This is Page 28 content example with next and prev.</div>
<div class="line-content">This is Page 29 content example with next and prev.</div>
<div class="line-content">This is Page 30 content example with next and prev.</div>
<div class="line-content">This is Page 31 content example with next and prev.</div>
<div class="line-content">This is Page 32 content example with next and prev.</div>
<div class="line-content">This is Page 33 content example with next and prev.</div>
<div class="line-content">This is Page 34 content example with next and prev.</div>
<div class="line-content">This is Page 35 content example with next and prev.</div>
<div class="line-content">This is Page 36 content example with next and prev.</div>
<div class="line-content">This is Page 37 content example with next and prev.</div>
<div class="line-content">This is Page 38 content example with next and prev.</div>
<div class="line-content">This is Page 39 content example with next and prev.</div>
<div class="line-content">This is Page 40 content example with next and prev.</div>
<div class="line-content">This is Page 41 content example with next and prev.</div>
<div class="line-content">This is Page 42 content example with next and prev.</div>
<div class="line-content">This is Page 43 content example with next and prev.</div>
<div class="line-content">This is Page 44 content example with next and prev.</div>
<div class="line-content">This is Page 45 content example with next and prev.</div>
<ul id="pagin"></ul>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
pageSize = 5;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=5;
incremSlide-=5;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=5;
incremSlide+=5;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page){
$(this).show();
}
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
</script>输出：
例子：
在这个例子中，我们将在 jquery 的帮助下创建引导分页。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
display: none;
}
.page {
margin: 30px;
}
table, th, td {
border: 1px solid black;
}
#data {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#data td, #data th {
border: 1px solid #ddd;
padding: 8px;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #03aa96;
color: white;
}
#nav a {
color: #03aa96;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
#nav {
margin-top: 20px;
}
</style>
</head>
<body>
<h2 align="center" class="mt-4">How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</h2>
<div class="page" align="center">
<table id="data">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>Helen</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>6</td>
<td>Philip</td>
<td>Germany</td>
</tr>
<tr>
<td>7</td>
<td>Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>8</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Dell</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>10</td>
<td>Trump</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready (function () {
$('#data').after ('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for (i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice (0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>输出：
例子：
在此示例中，我们将使用twbsPagination插件创建分页。这个 jQuery 插件简化了 Bootstrap 分页的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Pagination Using Plugin - Websolutionstuff</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapper{
margin: 60px auto;
text-align: center;
}
h2{
margin-bottom: 1.25em;
}
#pagination-demo{
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li{
display: inline-block;
}
.page-content{
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>jQuery Pagination Using Plugin - Websolutionstuff</h2>
<p>Simple pagination using the TWBS pagination JS library.</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
$(document).ready (function () {
$('#pagination-demo').twbsPagination({
totalPages: 16,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page) + ' content here';
}
});
});
</script>输出：
原文出处：https: //websolutionstuff.com/
1685216760
Создание пагинации с помощью jQuery
В этой статье мы увидим, как создать пагинацию с помощью jquery. Мы создадим разбиение на страницы jquery, используя несколько способов. Вы можете создать разбиение на страницы, используя разные способы, такие как создание разбиения на страницы с помощью простого HTML, вы можете создать разбиение на страницы в laravel, используя метод paginate(). Кроме того, создайте разбиение на страницы laravel livewire, разбиение на страницы с помощью бутстрапа.
Мы создадим простую пагинацию jquery. Кроме того, создайте разбиение на страницы с помощью jquery без плагина и создайте разбивку на страницы jquery с помощью кнопок «Далее» и «Предыдущий».
Итак, давайте посмотрим динамическую нумерацию страниц в jquery и бутстраповскую нумерацию страниц в jquery.
Пример:
В этом примере мы создадим пагинацию с помощью jquery без использования плагина. Кроме того, вы можете настроить пагинацию.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Pagination Using jQuery - Websolutionstuff</title>
<style>
.current {
color: green;
}
#pagin li {
display: inline-block;
font-weight: 500;
}
.prev {
cursor: pointer;
}
.next {
cursor: pointer;
}
.last {
cursor:pointer;
margin-left:10px;
}
.first {
cursor:pointer;
margin-right:10px;
}
.line-content, #pagin, h3 {
text-align:center;
}
.line-content {
margin-top:20px;
}
#pagin {
margin-top:10px;
padding-left:0;
}
h3 {
margin:50px 0;
}
</style>
</head>
<body>
<h3>How To Create Pagination Using jQuery - Websolutionstuff</h3>
<div class="line-content">This is Page 1 content example with next and prev.</div>
<div class="line-content">This is Page 2 content example with next and prev.</div>
<div class="line-content">This is Page 3 content example with next and prev.</div>
<div class="line-content">This is Page 4 content example with next and prev.</div>
<div class="line-content">This is Page 5 content example with next and prev.</div>
<div class="line-content">This is Page 6 content example with next and prev.</div>
<div class="line-content">This is Page 7 content example with next and prev.</div>
<div class="line-content">This is Page 8 content example with next and prev.</div>
<div class="line-content">This is Page 9 content example with next and prev.</div>
<div class="line-content">This is Page 10 content example with next and prev.</div>
<div class="line-content">This is Page 11 content example with next and prev.</div>
<div class="line-content">This is Page 12 content example with next and prev.</div>
<div class="line-content">This is Page 13 content example with next and prev.</div>
<div class="line-content">This is Page 14 content example with next and prev.</div>
<div class="line-content">This is Page 15 content example with next and prev.</div>
<div class="line-content">This is Page 16 content example with next and prev.</div>
<div class="line-content">This is Page 17 content example with next and prev.</div>
<div class="line-content">This is Page 18 content example with next and prev.</div>
<div class="line-content">This is Page 19 content example with next and prev.</div>
<div class="line-content">This is Page 20 content example with next and prev.</div>
<div class="line-content">This is Page 21 content example with next and prev.</div>
<div class="line-content">This is Page 22 content example with next and prev.</div>
<div class="line-content">This is Page 23 content example with next and prev.</div>
<div class="line-content">This is Page 24 content example with next and prev.</div>
<div class="line-content">This is Page 25 content example with next and prev.</div>
<div class="line-content">This is Page 26 content example with next and prev.</div>
<div class="line-content">This is Page 27 content example with next and prev.</div>
<div class="line-content">This is Page 28 content example with next and prev.</div>
<div class="line-content">This is Page 29 content example with next and prev.</div>
<div class="line-content">This is Page 30 content example with next and prev.</div>
<div class="line-content">This is Page 31 content example with next and prev.</div>
<div class="line-content">This is Page 32 content example with next and prev.</div>
<div class="line-content">This is Page 33 content example with next and prev.</div>
<div class="line-content">This is Page 34 content example with next and prev.</div>
<div class="line-content">This is Page 35 content example with next and prev.</div>
<div class="line-content">This is Page 36 content example with next and prev.</div>
<div class="line-content">This is Page 37 content example with next and prev.</div>
<div class="line-content">This is Page 38 content example with next and prev.</div>
<div class="line-content">This is Page 39 content example with next and prev.</div>
<div class="line-content">This is Page 40 content example with next and prev.</div>
<div class="line-content">This is Page 41 content example with next and prev.</div>
<div class="line-content">This is Page 42 content example with next and prev.</div>
<div class="line-content">This is Page 43 content example with next and prev.</div>
<div class="line-content">This is Page 44 content example with next and prev.</div>
<div class="line-content">This is Page 45 content example with next and prev.</div>
<ul id="pagin"></ul>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
pageSize = 5;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=5;
incremSlide-=5;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=5;
incremSlide+=5;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page){
$(this).show();
}
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
</script>Выход:
Пример:
В этом примере мы создадим загрузочную пагинацию с помощью jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
display: none;
}
.page {
margin: 30px;
}
table, th, td {
border: 1px solid black;
}
#data {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#data td, #data th {
border: 1px solid #ddd;
padding: 8px;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #03aa96;
color: white;
}
#nav a {
color: #03aa96;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
#nav {
margin-top: 20px;
}
</style>
</head>
<body>
<h2 align="center" class="mt-4">How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</h2>
<div class="page" align="center">
<table id="data">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>Helen</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>6</td>
<td>Philip</td>
<td>Germany</td>
</tr>
<tr>
<td>7</td>
<td>Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>8</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Dell</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>10</td>
<td>Trump</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready (function () {
$('#data').after ('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for (i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice (0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>Выход:
Пример:
В этом примере мы создадим пагинацию с помощью плагина twbsPagination . Этот плагин jQuery упрощает использование разбиения на страницы Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Pagination Using Plugin - Websolutionstuff</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapper{
margin: 60px auto;
text-align: center;
}
h2{
margin-bottom: 1.25em;
}
#pagination-demo{
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li{
display: inline-block;
}
.page-content{
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>jQuery Pagination Using Plugin - Websolutionstuff</h2>
<p>Simple pagination using the TWBS pagination JS library.</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
$(document).ready (function () {
$('#pagination-demo').twbsPagination({
totalPages: 16,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page) + ' content here';
}
});
});
</script>Выход:
Оригинальный источник статьи: https://websolutionstuff.com/
1685205672
Create Pagination Using jQuery
In this article, we will see how to create pagination using jquery. We will create jquery pagination using multiple ways. You can create pagination using different ways like creating pagination using simple HTML, you can create pagination in laravel using paginate() method. Also, create pagination laravel livewire, pagination using bootstrap.
We will create simple jquery pagination. Also, create pagination using jquery without a plugin and create jquery pagination with next and previous buttons
So, let's see dynamic pagination in jquery and bootstrap pagination in jquery
Example:
In this example, we will create pagination using jquery without using a plugin. Also, you can customize the pagination.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Pagination Using jQuery - Websolutionstuff</title>
<style>
.current {
color: green;
}
#pagin li {
display: inline-block;
font-weight: 500;
}
.prev {
cursor: pointer;
}
.next {
cursor: pointer;
}
.last {
cursor:pointer;
margin-left:10px;
}
.first {
cursor:pointer;
margin-right:10px;
}
.line-content, #pagin, h3 {
text-align:center;
}
.line-content {
margin-top:20px;
}
#pagin {
margin-top:10px;
padding-left:0;
}
h3 {
margin:50px 0;
}
</style>
</head>
<body>
<h3>How To Create Pagination Using jQuery - Websolutionstuff</h3>
<div class="line-content">This is Page 1 content example with next and prev.</div>
<div class="line-content">This is Page 2 content example with next and prev.</div>
<div class="line-content">This is Page 3 content example with next and prev.</div>
<div class="line-content">This is Page 4 content example with next and prev.</div>
<div class="line-content">This is Page 5 content example with next and prev.</div>
<div class="line-content">This is Page 6 content example with next and prev.</div>
<div class="line-content">This is Page 7 content example with next and prev.</div>
<div class="line-content">This is Page 8 content example with next and prev.</div>
<div class="line-content">This is Page 9 content example with next and prev.</div>
<div class="line-content">This is Page 10 content example with next and prev.</div>
<div class="line-content">This is Page 11 content example with next and prev.</div>
<div class="line-content">This is Page 12 content example with next and prev.</div>
<div class="line-content">This is Page 13 content example with next and prev.</div>
<div class="line-content">This is Page 14 content example with next and prev.</div>
<div class="line-content">This is Page 15 content example with next and prev.</div>
<div class="line-content">This is Page 16 content example with next and prev.</div>
<div class="line-content">This is Page 17 content example with next and prev.</div>
<div class="line-content">This is Page 18 content example with next and prev.</div>
<div class="line-content">This is Page 19 content example with next and prev.</div>
<div class="line-content">This is Page 20 content example with next and prev.</div>
<div class="line-content">This is Page 21 content example with next and prev.</div>
<div class="line-content">This is Page 22 content example with next and prev.</div>
<div class="line-content">This is Page 23 content example with next and prev.</div>
<div class="line-content">This is Page 24 content example with next and prev.</div>
<div class="line-content">This is Page 25 content example with next and prev.</div>
<div class="line-content">This is Page 26 content example with next and prev.</div>
<div class="line-content">This is Page 27 content example with next and prev.</div>
<div class="line-content">This is Page 28 content example with next and prev.</div>
<div class="line-content">This is Page 29 content example with next and prev.</div>
<div class="line-content">This is Page 30 content example with next and prev.</div>
<div class="line-content">This is Page 31 content example with next and prev.</div>
<div class="line-content">This is Page 32 content example with next and prev.</div>
<div class="line-content">This is Page 33 content example with next and prev.</div>
<div class="line-content">This is Page 34 content example with next and prev.</div>
<div class="line-content">This is Page 35 content example with next and prev.</div>
<div class="line-content">This is Page 36 content example with next and prev.</div>
<div class="line-content">This is Page 37 content example with next and prev.</div>
<div class="line-content">This is Page 38 content example with next and prev.</div>
<div class="line-content">This is Page 39 content example with next and prev.</div>
<div class="line-content">This is Page 40 content example with next and prev.</div>
<div class="line-content">This is Page 41 content example with next and prev.</div>
<div class="line-content">This is Page 42 content example with next and prev.</div>
<div class="line-content">This is Page 43 content example with next and prev.</div>
<div class="line-content">This is Page 44 content example with next and prev.</div>
<div class="line-content">This is Page 45 content example with next and prev.</div>
<ul id="pagin"></ul>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
pageSize = 5;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=5;
incremSlide-=5;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=5;
incremSlide+=5;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page){
$(this).show();
}
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
</script>Output:
Example:
In this example, we will create bootstrap pagination with help of jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
display: none;
}
.page {
margin: 30px;
}
table, th, td {
border: 1px solid black;
}
#data {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#data td, #data th {
border: 1px solid #ddd;
padding: 8px;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #03aa96;
color: white;
}
#nav a {
color: #03aa96;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
#nav {
margin-top: 20px;
}
</style>
</head>
<body>
<h2 align="center" class="mt-4">How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</h2>
<div class="page" align="center">
<table id="data">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>Helen</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>6</td>
<td>Philip</td>
<td>Germany</td>
</tr>
<tr>
<td>7</td>
<td>Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>8</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Dell</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>10</td>
<td>Trump</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready (function () {
$('#data').after ('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for (i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice (0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>Output:
Example:
In this example, we will create pagination using the twbsPagination plugin. This jQuery plugin simplifies the usage of Bootstrap Pagination.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Pagination Using Plugin - Websolutionstuff</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapper{
margin: 60px auto;
text-align: center;
}
h2{
margin-bottom: 1.25em;
}
#pagination-demo{
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li{
display: inline-block;
}
.page-content{
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>jQuery Pagination Using Plugin - Websolutionstuff</h2>
<p>Simple pagination using the TWBS pagination JS library.</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
$(document).ready (function () {
$('#pagination-demo').twbsPagination({
totalPages: 16,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page) + ' content here';
}
});
});
</script>Output:
Original article source at: https://websolutionstuff.com/
1641693600
Cree Una Aplicación De Android Con El Marco Kivy Python
Si es un desarrollador de Python que está pensando en comenzar con el desarrollo móvil, entonces el marco Kivy es su mejor opción. Con Kivy, puede desarrollar aplicaciones independientes de la plataforma que compilan para iOS, Android, Windows, macOS y Linux. En este artículo, cubriremos Android específicamente porque es el más utilizado.
Construiremos una aplicación generadora de números aleatorios simple que puede instalar en su teléfono y probar cuando haya terminado. Para continuar con este artículo, debe estar familiarizado con Python. ¡Empecemos!
Primeros pasos con Kivy
Primero, necesitará un nuevo directorio para su aplicación. Asegúrese de tener Python instalado en su máquina y abra un nuevo archivo de Python. Deberá instalar el módulo Kivy desde su terminal usando cualquiera de los comandos a continuación. Para evitar conflictos de paquetes, asegúrese de instalar Kivy en un entorno virtual:
pip install kivy
//
pip3 install kivy Una vez que haya instalado Kivy, debería ver un mensaje de éxito de su terminal que se parece a las capturas de pantalla a continuación:
Instalación decepcionada
Instalación exitosa de Kivy
A continuación, navegue a la carpeta de su proyecto. En el main.pyarchivo, necesitaremos importar el módulo Kivy y especificar qué versión queremos. Puede usar Kivy v2.0.0, pero si tiene un teléfono inteligente anterior a Android 8.0, le recomiendo usar Kivy v1.9.0. Puede jugar con las diferentes versiones durante la compilación para ver las diferencias en las características y el rendimiento.
Agregue el número de versión justo después de la import kivylínea de la siguiente manera:
kivy.require('1.9.0')Ahora, crearemos una clase que básicamente definirá nuestra aplicación; Voy a nombrar el mío RandomNumber. Esta clase heredará la appclase de Kivy. Por lo tanto, debe importar appagregando from kivy.app import App:
class RandomNumber(App): En la RandomNumberclase, deberá agregar una función llamada build, que toma un selfparámetro. Para devolver la interfaz de usuario, usaremos la buildfunción. Por ahora, lo tengo devuelto como una simple etiqueta. Para hacerlo, deberá importar Labelusando la línea from kivy.uix.label import Label:
import kivy
from kivy.app import App
from kivy.uix.label import Label
class RandomNumber(App):
def build(self):
return Label(text="Random Number Generator")¡Ahora, el esqueleto de nuestra aplicación está completo! Antes de continuar, debe crear una instancia de la RandomNumberclase y ejecutarla en su terminal o IDE para ver la interfaz:
importar kivy de kivy.app importar aplicación de kivy.uix.label clase de etiqueta de importación RandomNumber(App): def build(self): return Label(text="Generador de números aleatorios") randomApp = RandomNumber() randomApp.run()
Cuando ejecuta la instancia de clase con el texto Random Number Generator, debería ver una interfaz o ventana simple que se parece a la siguiente captura de pantalla:
Interfaz simple después de ejecutar el código.
No podrá ejecutar el texto en Android hasta que haya terminado de construir todo.
Externalización de la interfaz
A continuación, necesitaremos una forma de subcontratar la interfaz. Primero, crearemos un archivo Kivy en nuestro directorio que albergará la mayor parte de nuestro trabajo de diseño. Querrá nombrar este archivo con el mismo nombre que su clase usando letras minúsculas y una .kvextensión. Kivy asociará automáticamente el nombre de la clase y el nombre del archivo, pero es posible que no funcione en Android si son exactamente iguales.
Dentro de ese .kvarchivo, debe especificar el diseño de su aplicación, incluidos elementos como la etiqueta, los botones, los formularios, etc. Para simplificar esta demostración, agregaré una etiqueta para el título Random Number, una etiqueta que servirá como marcador de posición. para el número aleatorio que se genera _, y un Generatebotón que llama a la generatefunción.
Mi .kvarchivo se parece al siguiente código, pero puede jugar con los diferentes valores para que se ajusten a sus requisitos:
<boxLayout>:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15 En el main.pyarchivo, ya no necesita la Labeldeclaración de importación porque el archivo Kivy se encarga de su interfaz de usuario. Sin embargo, necesita importar boxlayout, que utilizará en el archivo Kivy.
En su archivo principal, debe agregar la declaración de importación y editar su main.pyarchivo para leer return BoxLayout()el buildmétodo:
from kivy.uix.boxlayout import BoxLayoutSi ejecuta el comando anterior, debería ver una interfaz simple que tiene el título del número aleatorio, el _marcador de posición y el generatebotón en el que se puede hacer clic:
Aplicación de números aleatorios renderizada
Tenga en cuenta que no tuvo que importar nada para que funcione el archivo Kivy. Básicamente, cuando ejecuta la aplicación, regresa boxlayoutbuscando un archivo dentro del archivo Kivy con el mismo nombre que su clase. Tenga en cuenta que esta es una interfaz simple y puede hacer que su aplicación sea tan robusta como desee. Asegúrese de consultar la documentación del idioma Kv .
Generar la función de números aleatorios
Ahora que nuestra aplicación está casi terminada, necesitaremos una función simple para generar números aleatorios cuando un usuario haga clic en el generatebotón y luego mostrar ese número aleatorio en la interfaz de la aplicación. Para hacerlo, necesitaremos cambiar algunas cosas en nuestros archivos.
Primero, importaremos el módulo que usaremos para generar un número aleatorio con import random. Luego, crearemos una función o método que llame al número generado. Para esta demostración, usaré un rango entre 0y 2000. Generar el número aleatorio es simple con el random.randint(0, 2000)comando. Agregaremos esto a nuestro código en un momento.
A continuación, crearemos otra clase que será nuestra propia versión del box layout. Nuestra clase tendrá que heredar la box layoutclase, que alberga el método para generar números aleatorios y representarlos en la interfaz:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()Dentro de esa clase, crearemos el generatemétodo, que no solo generará números aleatorios, sino que también manipulará la etiqueta que controla lo que se muestra como número aleatorio en el archivo Kivy.
Para acomodar este método, primero necesitaremos hacer cambios en el .kvarchivo. Dado que la MyRootclase ha heredado el box layout, puede crear MyRootel elemento de nivel superior en su .kvarchivo:
<MyRoot>:
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15Tenga en cuenta que todavía mantiene todas las especificaciones de la interfaz de usuario con sangría en el archivo Box Layout. Después de esto, debe agregar una identificación a la etiqueta que contendrá los números generados, lo que facilita la manipulación cuando generatese llama a la función. Debe especificar la relación entre la ID en este archivo y otra en el código principal en la parte superior, justo antes de la BoxLayoutlínea:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15La random_label: random_labellínea básicamente significa que la etiqueta con el ID random_labelse asignará a random_labelen el main.pyarchivo, lo que significa que cualquier acción que manipula random_labelserán mapeados en la etiqueta con el nombre especificado.
Ahora podemos crear el método para generar el número aleatorio en el archivo principal:
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))
# notice how the class method manipulates the text attributre of the random label by a# ssigning it a new random number generate by the 'random.randint(0, 2000)' funcion. S# ince this the random number generated is an integer, typecasting is required to make # it a string otherwise you will get a typeError in your terminal when you run it.La MyRootclase debería parecerse al siguiente código:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))¡Felicidades! Ya ha terminado con el archivo principal de la aplicación. Lo único que queda por hacer es asegurarse de llamar a esta función cuando se haga generateclic en el botón. Solo necesita agregar la línea on_press: root.generate_number()a la parte de selección de botones de su .kvarchivo:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15
on_press: root.generate_number()Ahora, puede ejecutar la aplicación.
Compilando nuestra aplicación en Android
Antes de compilar nuestra aplicación en Android, tengo malas noticias para los usuarios de Windows. Necesitará Linux o macOS para compilar su aplicación de Android. Sin embargo, no necesita tener una distribución de Linux separada, en su lugar, puede usar una máquina virtual.
Para compilar y generar una .apkaplicación Android completa , usaremos una herramienta llamada Buildozer . Instalemos Buildozer a través de nuestra terminal usando uno de los siguientes comandos:
pip3 install buildozer
//
pip install buildozerAhora, instalaremos algunas de las dependencias requeridas de Buildozer. Estoy en Linux Ergo, así que usaré comandos específicos de Linux. Debe ejecutar estos comandos uno por uno:
sudo apt update
sudo apt install -y git zip unzip openjdk-13-jdk python3-pip autoconf libtool pkg-config zlib1g-dev libncurses5-dev libncursesw5-dev libtinfo5 cmake libffi-dev libssl-dev
pip3 install --upgrade Cython==0.29.19 virtualenv
# add the following line at the end of your ~/.bashrc file
export PATH=$PATH:~/.local/bin/Después de ejecutar los comandos específicos, ejecute buildozer init. Debería ver un resultado similar a la captura de pantalla a continuación:
Inicialización exitosa de Buildozer
El comando anterior crea un .specarchivo Buildozer , que puede usar para hacer especificaciones para su aplicación, incluido el nombre de la aplicación, el ícono, etc. El .specarchivo debe verse como el bloque de código a continuación:
[app]
# (str) Title of your application
title = My Application
# (str) Package name
package.name = myapp
# (str) Package domain (needed for android/ios packaging)
package.domain = org.test
# (str) Source code where the main.py live
source.dir = .
# (list) Source files to include (let empty to include all the files)
source.include_exts = py,png,jpg,kv,atlas
# (list) List of inclusions using pattern matching
#source.include_patterns = assets/*,images/*.png
# (list) Source files to exclude (let empty to not exclude anything)
#source.exclude_exts = spec
# (list) List of directory to exclude (let empty to not exclude anything)
#source.exclude_dirs = tests, bin
# (list) List of exclusions using pattern matching
#source.exclude_patterns = license,images/*/*.jpg
# (str) Application versioning (method 1)
version = 0.1
# (str) Application versioning (method 2)
# version.regex = __version__ = \['"\](.*)['"]
# version.filename = %(source.dir)s/main.py
# (list) Application requirements
# comma separated e.g. requirements = sqlite3,kivy
requirements = python3,kivy
# (str) Custom source folders for requirements
# Sets custom source for any requirements with recipes
# requirements.source.kivy = ../../kivy
# (list) Garden requirements
#garden_requirements =
# (str) Presplash of the application
#presplash.filename = %(source.dir)s/data/presplash.png
# (str) Icon of the application
#icon.filename = %(source.dir)s/data/icon.png
# (str) Supported orientation (one of landscape, sensorLandscape, portrait or all)
orientation = portrait
# (list) List of service to declare
#services = NAME:ENTRYPOINT_TO_PY,NAME2:ENTRYPOINT2_TO_PY
#
# OSX Specific
#
#
# author = © Copyright Info
# change the major version of python used by the app
osx.python_version = 3
# Kivy version to use
osx.kivy_version = 1.9.1
#
# Android specific
#
# (bool) Indicate if the application should be fullscreen or not
fullscreen = 0
# (string) Presplash background color (for new android toolchain)
# Supported formats are: #RRGGBB #AARRGGBB or one of the following names:
# red, blue, green, black, white, gray, cyan, magenta, yellow, lightgray,
# darkgray, grey, lightgrey, darkgrey, aqua, fuchsia, lime, maroon, navy,
# olive, purple, silver, teal.
#android.presplash_color = #FFFFFF
# (list) Permissions
#android.permissions = INTERNET
# (int) Target Android API, should be as high as possible.
#android.api = 27
# (int) Minimum API your APK will support.
#android.minapi = 21
# (int) Android SDK version to use
#android.sdk = 20
# (str) Android NDK version to use
#android.ndk = 19b
# (int) Android NDK API to use. This is the minimum API your app will support, it should usually match android.minapi.
#android.ndk_api = 21
# (bool) Use --private data storage (True) or --dir public storage (False)
#android.private_storage = True
# (str) Android NDK directory (if empty, it will be automatically downloaded.)
#android.ndk_path =
# (str) Android SDK directory (if empty, it will be automatically downloaded.)
#android.sdk_path =
# (str) ANT directory (if empty, it will be automatically downloaded.)
#android.ant_path =
# (bool) If True, then skip trying to update the Android sdk
# This can be useful to avoid excess Internet downloads or save time
# when an update is due and you just want to test/build your package
# android.skip_update = False
# (bool) If True, then automatically accept SDK license
# agreements. This is intended for automation only. If set to False,
# the default, you will be shown the license when first running
# buildozer.
# android.accept_sdk_license = False
# (str) Android entry point, default is ok for Kivy-based app
#android.entrypoint = org.renpy.android.PythonActivity
# (str) Android app theme, default is ok for Kivy-based app
# android.apptheme = "@android:style/Theme.NoTitleBar"
# (list) Pattern to whitelist for the whole project
#android.whitelist =
# (str) Path to a custom whitelist file
#android.whitelist_src =
# (str) Path to a custom blacklist file
#android.blacklist_src =
# (list) List of Java .jar files to add to the libs so that pyjnius can access
# their classes. Don't add jars that you do not need, since extra jars can slow
# down the build process. Allows wildcards matching, for example:
# OUYA-ODK/libs/*.jar
#android.add_jars = foo.jar,bar.jar,path/to/more/*.jar
# (list) List of Java files to add to the android project (can be java or a
# directory containing the files)
#android.add_src =
# (list) Android AAR archives to add (currently works only with sdl2_gradle
# bootstrap)
#android.add_aars =
# (list) Gradle dependencies to add (currently works only with sdl2_gradle
# bootstrap)
#android.gradle_dependencies =
# (list) add java compile options
# this can for example be necessary when importing certain java libraries using the 'android.gradle_dependencies' option
# see https://developer.android.com/studio/write/java8-support for further information
# android.add_compile_options = "sourceCompatibility = 1.8", "targetCompatibility = 1.8"
# (list) Gradle repositories to add {can be necessary for some android.gradle_dependencies}
# please enclose in double quotes
# e.g. android.gradle_repositories = "maven { url 'https://kotlin.bintray.com/ktor' }"
#android.add_gradle_repositories =
# (list) packaging options to add
# see https://google.github.io/android-gradle-dsl/current/com.android.build.gradle.internal.dsl.PackagingOptions.html
# can be necessary to solve conflicts in gradle_dependencies
# please enclose in double quotes
# e.g. android.add_packaging_options = "exclude 'META-INF/common.kotlin_module'", "exclude 'META-INF/*.kotlin_module'"
#android.add_gradle_repositories =
# (list) Java classes to add as activities to the manifest.
#android.add_activities = com.example.ExampleActivity
# (str) OUYA Console category. Should be one of GAME or APP
# If you leave this blank, OUYA support will not be enabled
#android.ouya.category = GAME
# (str) Filename of OUYA Console icon. It must be a 732x412 png image.
#android.ouya.icon.filename = %(source.dir)s/data/ouya_icon.png
# (str) XML file to include as an intent filters in <activity> tag
#android.manifest.intent_filters =
# (str) launchMode to set for the main activity
#android.manifest.launch_mode = standard
# (list) Android additional libraries to copy into libs/armeabi
#android.add_libs_armeabi = libs/android/*.so
#android.add_libs_armeabi_v7a = libs/android-v7/*.so
#android.add_libs_arm64_v8a = libs/android-v8/*.so
#android.add_libs_x86 = libs/android-x86/*.so
#android.add_libs_mips = libs/android-mips/*.so
# (bool) Indicate whether the screen should stay on
# Don't forget to add the WAKE_LOCK permission if you set this to True
#android.wakelock = False
# (list) Android application meta-data to set (key=value format)
#android.meta_data =
# (list) Android library project to add (will be added in the
# project.properties automatically.)
#android.library_references =
# (list) Android shared libraries which will be added to AndroidManifest.xml using <uses-library> tag
#android.uses_library =
# (str) Android logcat filters to use
#android.logcat_filters = *:S python:D
# (bool) Copy library instead of making a libpymodules.so
#android.copy_libs = 1
# (str) The Android arch to build for, choices: armeabi-v7a, arm64-v8a, x86, x86_64
android.arch = armeabi-v7a
# (int) overrides automatic versionCode computation (used in build.gradle)
# this is not the same as app version and should only be edited if you know what you're doing
# android.numeric_version = 1
#
# Python for android (p4a) specific
#
# (str) python-for-android fork to use, defaults to upstream (kivy)
#p4a.fork = kivy
# (str) python-for-android branch to use, defaults to master
#p4a.branch = master
# (str) python-for-android git clone directory (if empty, it will be automatically cloned from github)
#p4a.source_dir =
# (str) The directory in which python-for-android should look for your own build recipes (if any)
#p4a.local_recipes =
# (str) Filename to the hook for p4a
#p4a.hook =
# (str) Bootstrap to use for android builds
# p4a.bootstrap = sdl2
# (int) port number to specify an explicit --port= p4a argument (eg for bootstrap flask)
#p4a.port =
#
# iOS specific
#
# (str) Path to a custom kivy-ios folder
#ios.kivy_ios_dir = ../kivy-ios
# Alternately, specify the URL and branch of a git checkout:
ios.kivy_ios_url = https://github.com/kivy/kivy-ios
ios.kivy_ios_branch = master
# Another platform dependency: ios-deploy
# Uncomment to use a custom checkout
#ios.ios_deploy_dir = ../ios_deploy
# Or specify URL and branch
ios.ios_deploy_url = https://github.com/phonegap/ios-deploy
ios.ios_deploy_branch = 1.7.0
# (str) Name of the certificate to use for signing the debug version
# Get a list of available identities: buildozer ios list_identities
#ios.codesign.debug = "iPhone Developer: <lastname> <firstname> (<hexstring>)"
# (str) Name of the certificate to use for signing the release version
#ios.codesign.release = %(ios.codesign.debug)s
[buildozer]
# (int) Log level (0 = error only, 1 = info, 2 = debug (with command output))
log_level = 2
# (int) Display warning if buildozer is run as root (0 = False, 1 = True)
warn_on_root = 1
# (str) Path to build artifact storage, absolute or relative to spec file
# build_dir = ./.buildozer
# (str) Path to build output (i.e. .apk, .ipa) storage
# bin_dir = ./bin
# -----------------------------------------------------------------------------
# List as sections
#
# You can define all the "list" as [section:key].
# Each line will be considered as a option to the list.
# Let's take [app] / source.exclude_patterns.
# Instead of doing:
#
#[app]
#source.exclude_patterns = license,data/audio/*.wav,data/images/original/*
#
# This can be translated into:
#
#[app:source.exclude_patterns]
#license
#data/audio/*.wav
#data/images/original/*
#
# -----------------------------------------------------------------------------
# Profiles
#
# You can extend section / key with a profile
# For example, you want to deploy a demo version of your application without
# HD content. You could first change the title to add "(demo)" in the name
# and extend the excluded directories to remove the HD content.
#
#[app@demo]
#title = My Application (demo)
#
#[app:source.exclude_patterns@demo]
#images/hd/*
#
# Then, invoke the command line with the "demo" profile:
#
#buildozer --profile demo android debugSi desea especificar cosas como el ícono, los requisitos, la pantalla de carga, etc., debe editar este archivo. Después de realizar todas las ediciones deseadas en su aplicación, ejecute buildozer -v android debugdesde el directorio de su aplicación para construir y compilar su aplicación. Esto puede llevar un tiempo, especialmente si tiene una máquina lenta.
Una vez finalizado el proceso, su terminal debería tener algunos registros, uno que confirme que la compilación fue exitosa:
Construcción exitosa de Android
También debe tener una versión APK de su aplicación en su directorio bin. Este es el ejecutable de la aplicación que instalará y ejecutará en su teléfono:
Android .apk en el directorio bin
Conclusión
¡Felicidades! Si ha seguido este tutorial paso a paso, debería tener una aplicación simple de generador de números aleatorios en su teléfono. Juega con él y ajusta algunos valores, luego reconstruye. Ejecutar la reconstrucción no llevará tanto tiempo como la primera compilación.
Como puede ver, crear una aplicación móvil con Python es bastante sencillo , siempre que esté familiarizado con el marco o módulo con el que está trabajando. Independientemente, la lógica se ejecuta de la misma manera.
Familiarícese con el módulo Kivy y sus widgets. Nunca se puede saber todo a la vez. Solo necesita encontrar un proyecto y mojarse los pies lo antes posible. Codificación feliz.
Enlace: https://blog.logrocket.com/build-android-application-kivy-python-framework/