PowerApps ile çevrimdışı çalışabilen uygulamalar geliştirmeDevelop offline-capable apps with PowerApps

Bir uygulama geliştirici olarak karşılaşabileceğiniz en yaygın senaryolardan biri, bağlantının sınırlı olduğu veya hiç olmadığı durumlarda kullanıcılarınızın üretkenliğine olanak sağlamaktır.One of the most common scenarios you face as a mobile app developer is enabling your users to be productive when there is limited connectivity or no connectivity at all. PowerApps, çevrimdışı çalışabilen uygulamalar geliştirmenize yardımcı olan çeşitli özellikler ve davranışlar içerir.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Yapabilecekleriniz:You can:

  • PowerApps mobil uygulamasını çevrimdışıyken başlatabilirsiniz.Launch the PowerApps mobile app when offline.
  • Geliştirdiğiniz uygulamaları çevrimdışıyken çalıştırabilirsiniz.Run apps you develop when offline.
  • Connection sinyal nesnesini kullanarak bir uygulamanın ne zaman çevrimdışı ve ne zaman çevrimiçi olduğunu veya ne zaman ölçülen bağlantı kullandığını belirleyebilirsiniz.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Çevrimdışıyken temel veri depolaması için koleksiyonları kullanabilir ve LoadData ve SaveData gibi işlevlerden yararlanabilirsiniz.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Çevrimdışı çalışabilen uygulamalar oluşturmaHow to build offline capable apps

Çevrimdışı senaryolarda üzerine düşünülmesi gereken ilk şey, uygulamalarınızın verilerle nasıl çalıştığıdır.The first thing to think about in offline scenarios is how your apps work with data. PowerApps'teki uygulamalar genellikle verilere, SharePoint, Office 365 ve Common Data Service gibi platformların sağladığı bir bağlayıcı kümesi aracılığıyla erişir.Apps in PowerApps primarily access data through a set of connectors that the platform provides, such as SharePoint, Office 365, and the Common Data Service. Ayrıca, uygulamaların bir RESTful uç noktası sağlayan herhangi bir hizmete erişmesine olanak sağlayan özel bağlayıcılar da oluşturabilirsiniz.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Bu bir Web API'si veya Azure İşlevleri gibi bir hizmet olabilir.This could be a Web API or a service such as Azure Functions. Söz konusu bağlayıcıların tümü İnternet üzerinden HTTPS kullanır ve bu, kullanıcılarınızın verilere ve bir hizmetin sunduğu diğer özelliklere erişebilmek için çevrimiçi olması gerektiği anlamına gelir.All these connectors use HTTPS over the Internet, which means your users must be online for them to access data and any other capabilities that a service offers.

Bağlayıcı içeren PowerApps uygulaması

Çevrimdışı verileri işlemeHandling offline data

PowerApps'in en ilginç yönlerinden biri de, veri kaynağından bağımsız olarak verileri tutarlı bir şekilde filtrelemenize, aramanıza, sıralamanıza, toplamanıza ve değiştirmenize olanak sağlayan bir dizi özellik ve formüle sahip olmasıdır.One of the most interesting aspects of PowerApps is its set of capabilities and formulas that enable you to filter, search, sort, aggregate, and manipulate data in a consistent way regardless of the data source. Kaynaklar, uygulamadaki bellek içi koleksiyonlardan SharePoint listelerine, SQL veritabanlarına ve Common Data Service'e kadar uzanmaktadır.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Bu tutarlılık sayesinde bir uygulamayı, farklı bir arka uç kullanılacak şekilde kolayca yeniden hedefleyebilirsiniz.This consistency enables you to easily retarget an app to use a different backend. Burada daha da önemli olan, bir uygulamanın mantığında neredeyse hiçbir değişiklik yapmadan veri yönetimi için yerel koleksiyonlar kullanmanıza da olanak sağlanmasıdır.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Aslında, yerel koleksiyonlar, çevrimdışı veriler işlemeye yönelik birincil mekanizmadır.In fact, local collections are the primary mechanism for handling offline data.

Çevrimdışı bir Twitter uygulaması oluşturmaBuilding an offline Twitter app

Uygulama geliştirmenin çevrimdışı yönlerine odaklanmak için size Twitter üzerinden basit bir senaryo göstereceğiz.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Çevrimdışıyken Twitter gönderileri okumanıza ve tweet göndermenize olanak sağlayan bir uygulama oluşturacağız.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Söz konusu uygulama çevrimiçi olduğunda tweetleri gönderir ve yerel verileri yeniden yükler.When the app comes online, the app posts tweets and reloads the local data.

Ayrıntılı olarak incelendiğinde, uygulama şunları yapar:At a high level, the app does the following:

  1. Uygulama başlatıldığında (ilk ekranın OnVisible özelliğine bağlı olarak):On app startup (based on the first screen's OnVisible property):

    • Cihaz çevrimiçiyse verileri getirmek için Twitter bağlayıcısına doğrudan erişir ve bir koleksiyonu bu verilerle doldururuz.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Cihaz çevrimdışıysa LoadData işlevini kullanarak bir yerel önbellek dosyasındaki verileri yükleriz.If the device is offline, we load the data from a local cache file using LoadData.
    • Kullanıcının tweet göndermesine olanak sağlarız; cihaz çevrimiçiyse tweetleri doğrudan Twitter'a gönderir ve yerel önbelleği yenileriz.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Cihaz çevrimiçiyse her 5 dakikada bir:Every 5 minutes, if online:

    • Yerel önbellekteki tweetleri göndeririz.We post any tweets that we have in the local cache.
    • Yerel önbelleği yeniler ve SaveData işlevini kullanarak kaydederiz.We refresh the local cache and save it using SaveData.

1. Adım: Yeni bir telefon uygulaması oluşturmaStep 1: Create a new phone app

  1. PowerApps Studio'yu açın.Open PowerApps Studio.
  2. Yeni > Boş uygulama > Telefon düzeni seçeneklerine tıklayın veya dokunun.Click or tap New > Blank app > Phone layout.

    Boş uygulama, telefon düzeni

2. Adım: Twitter bağlantısı eklemeStep 2: Add a Twitter connection

  1. İçerik > Veri kaynakları seçeneklerine tıklayın veya dokunun ve ardından Veri kaynakları bölmesindeki Veri kaynağı ekle seçeneğini belirleyin.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.

  2. Yeni Bağlantı'ya tıklayın veya dokunun , Twitter'ı seçin ve Oluştur seçeneğine tıklayın veya dokunun.Click or tap New Connection , select Twitter , and click or tap Create.

  3. Kimlik bilgilerinizi girin ve bağlantıyı oluşturun.Enter your credentials, and create the connection.

    Twitter bağlantısı ekleme

3. Adım: Uygulama başlatıldığında tweetleri bir LocalTweets koleksiyonuna yüklemeStep 3: Load tweets into a LocalTweets collection on app startup

Uygulamada Screen1 için OnVisible özelliğini seçin ve şu formülü söz konusu özelliğe kopyalayın:Select the OnVisible property for Screen1 in the app, and copy in the following formula:

If(Connection.Connected,

    ClearCollect(LocalTweets, Twitter.SearchTweet("PowerApps", {maxResults: 100}));

    UpdateContext({statusText: "Online data"})

    ,

    LoadData(LocalTweets, "Tweets", true);

    UpdateContext({statusText: "Local data"})

);

LoadData(LocalTweetsToPost, "LocalTweets", true);

SaveData(LocalTweets, "Tweets")

Tweetleri yüklemeye yönelik formül

Bu formül, cihazın çevrimiçi olup olmadığını denetler:This formula checks if the device is online:

  • Cihaz çevrimiçiyse LocalTweets koleksiyonuna, "PowerApps" arama terimini içeren 100 adede kadar tweet yükler.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Cihaz çevrimdışı durumdaysa "Tweets" adlı bir dosyadan (varsa) yerel önbelleğe yükleme yapar.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Yeni bir esnek yükseklik galerisi ekleyin: Ekle > Galeri > Boş esnek yükseklik.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.

  2. Items özelliğini LocalTweets olarak ayarlayın.Set the Items property to LocalTweets.

  3. Her bir tweetteki verileri görüntülemek için dört Etiket denetimi ekleyin ve denetimlerin Text özelliklerini şu şekilde ayarlayın:Add four Label controls to display data from each tweet, and set the Text properties to:

    • ThisItem.TweetTextThisItem.TweetText
    • ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserNameThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
    • "RT: " & ThisItem.RetweetCount"RT: " & ThisItem.RetweetCount
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
  4. Bir Görüntü denetimi ekleyin ve Image özelliğini ThisItem.UserDetails.ProfileImageUrl olarak ayarlayın.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

5. Adım: Bağlantı durumu etiketi eklemeStep 5: Add a connection status label

Yeni bir Etiket denetimi ekleyin ve Text özelliğini şu formül olarak ayarlayın:Insert a new Label control, and set its Text property to the following formula:

If (Connection.Connected, "Connected", "Offline")

Bu formül, cihazın çevrimiçi olup olmadığını denetler.This formula checks if the device is online. Cihaz çevrimiçiyse etiketin metni "Connected", değilse "Offline" olarak görünür.If it is, the text of the label is "Connected", otherwise it's "Offline".

6. Adım: Yeni tweetler oluşturmak için metin girişi eklemeStep 6: Add a text input to compose new tweets

  1. "NewTweetTextInput" adlı yeni bir Metin girişi denetimi ekleyin.Insert a new Text input control named "NewTweetTextInput".

  2. Metin girişinin Reset özelliğini resetNewTweet olarak ayarlayın.Set the Reset property of the text input to resetNewTweet.

7. Adım: Tweeti göndermeye yönelik bir düğme eklemeStep 7: Add a button to post the tweet

  1. Bir Düğme denetimi ekleyin ve Text özelliğini "Tweet" olarak ayarlayın.Add a Button control, and set the Text property to "Tweet".
  2. OnSelect özelliğini şu formül olarak ayarlayın:Set the OnSelect property to the following formula:

    If (Connection.Connected,
    
        Twitter.Tweet("", {tweetText: NewTweetTextInput.Text}),
    
        Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    
        SaveData(LocalTweetsToPost, "LocalTweetsToPost")
    
    );
    
    UpdateContext({resetNewTweet: true});
    
    UpdateContext({resetNewTweet: false})
    

Bu formül, cihazın çevrimiçi olup olmadığını denetler:This formula checks if the device is online:

  • Cihaz çevrimiçiyse metni hemen tweetler.If the device is online, it tweets the text immediately.
  • Cihaz çevrimdışıysa tweeti LocalTweetsToPost koleksiyonunda tutar ve koleksiyonu uygulamaya kaydeder.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Bu işlemin ardından formül, metin kutusundaki metni sıfırlar.Then the formula resets the text in the text box.

8. Adım: Tweetlerin her beş dakikada bir denetlenmesine yönelik bir zamanlayıcı eklemeStep 8: Add a timer to check for tweets every five minutes

Yeni bir Zamanlayıcı denetimi ekleyin:Add a new Timer control:

  • Duration özelliğini 300000 olarak ayarlayın.Set the Duration property to 300000.

  • AutoStart özelliğini true olarak ayarlayın.Set the AutoStart property to true.

  • OnTimerEnd özelliğini şu formül olarak ayarlayın:Set the OnTimerEnd to the following formula:

    If(Connection.Connected,
    
        ForAll(LocalTweetsToPost, Twitter.Tweet("", {tweetText: tweetText}));
    
        Clear(LocalTweetsToPost);
    
        Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    
        SaveData(LocalTweetsToPost, "LocalTweetsToPost");
    
        UpdateContext({statusText: "Online data"})
    )
    

Bu formül, cihazın çevrimiçi olup olmadığını denetler.This formula checks if the device is online. Cihaz çevrimiçiyse uygulama, LocalTweetsToPost koleksiyonundaki tüm öğeleri tweet olarak gönderir.If it is, the app tweets all the items in the LocalTweetsToPost collection. Bu işlemin ardından koleksiyon temizlenir.Then it clears the collection.

Uygulama tamamlandığına göre test işlemine geçmeden önce uygulamanın nasıl göründüğünü kontrol edelim.Now that the app is finished, let's check out how it looks before we move on to testing. Soldaki resimde uygulama bağlıyken sağdaki resimde çevrimdışıdır ve tekrar çevrimiçi olduğunda gönderilmeye hazır bir tweet içermektedir.On the left, the app is connected; and on the right, it's offline, with one tweet ready to post when it's online again.

Çevrimiçi ve çevrimdışı modlar ile gösterilen, tamamlanmış uygulama

Uygulamayı test etmeTesting the app

Uygulamayı test etmek için aşağıdaki adımları uygulayın:Use the following steps to test the app:

  1. PowerApps'i çevrimiçi bir mobil cihazda çalıştırın.Run PowerApps on a mobile device while online. Uygulamayı çevrimiçiyken en az bir kez çalıştırmanız gerekir; böylece, uygulamayı cihaza indirebilirsiniz.You must run an app at least once while being online, so you can download the app to the device.
  2. Twitter uygulamasını başlatın.Launch the Twitter app.
  3. Tweetlerin yüklendiğine ve durumun Connected olarak göründüğüne dikkat edin.Notice that the tweets are loaded, and that the status shows Connected.
  4. PowerApps'i tamamen kapatın.Close PowerApps completely.
  5. Çevrimdışı olduğundan emin olmak için cihazı uçak moduna ayarlayın.Set the device to airplane mode to ensure that it's offline.
  6. PowerApps'i çalıştırın.Run PowerApps. Artık Twitter uygulamasını çevrimdışı olarak çalıştırabilir ve bu cihazda daha önce çevrimiçiyken çalıştırdığınız diğer tüm uygulamalara erişebilirsiniz. (PowerApps cihazınıza henüz indirilmemiş olan uygulamaları gizler.)You can now run the Twitter app offline, and you have access to any other apps that you have previously run on this device while online (i.e. PowerApps hides any apps that haven't yet been downloaded to your device).
  7. Uygulamayı tekrar çalıştırın.Run the app again.
  8. Bağlantı durumunun doğru bir şekilde Offline olarak gösterildiğine dikkat edin.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Yeni bir tweet yazın.Write a new tweet. Tweet, LocalTweetsToPost koleksiyonunda yerel olarak depolanır.It will be stored locally in the LocalTweetsToPost collection.
  10. Uçak modundan çıkın.Exit airplane mode. Uygulama, zamanlayıcı tetiklendikten sonra tweeti gönderir.After the timer triggers, the app posts the tweet.

Bu makalenin size PowerApps'in çevrimdışı uygulama oluşturma özelliklerine ilişkin bir fikir verdiğini umuyoruz.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Her zaman olduğu gibi, forumumuzda geri bildirim sağlamanızı ve çevrimdışı uygulama örneklerinizi PowerApps topluluk blogunda paylaşmanızı rica ederiz.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.